add language selection

src/components/Blockly/BlocklyComponent.jsx

@@ -24,14 +24,12 @@
 import React from 'react';
 
 import Blockly from 'blockly/core';
-import locale from 'blockly/msg/en';
 import 'blockly/blocks';
 import Toolbox from './toolbox/Toolbox';
 
 import { Card } from '@material-ui/core';
 
 
-Blockly.setLocale(locale);
 
 class BlocklyComponent extends React.Component {
 
@@ -39,7 +37,7 @@ class BlocklyComponent extends React.Component {
         super(props);
         this.blocklyDiv = React.createRef();
         this.toolbox = React.createRef();
-        this.state = {workspace: undefined};
+        this.state = { workspace: undefined };
     }
 
     componentDidMount() {
@@ -51,7 +49,7 @@ class BlocklyComponent extends React.Component {
                 ...rest
             },
         );
-        this.setState({workspace: this.primaryWorkspace})
+        this.setState({ workspace: this.primaryWorkspace })
 
         if (initialXml) {
             Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace);
@@ -68,7 +66,7 @@ class BlocklyComponent extends React.Component {
 
     render() {
         return <React.Fragment>
-            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}}/>
+            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}} />
             <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
         </React.Fragment>;
     }

src/components/Blockly/BlocklyWindow.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
-import * as De from './msg/de';
+import { De } from './msg/de';
+import { En } from './msg/en';
 import BlocklyComponent from './BlocklyComponent';
 import BlocklySvg from './BlocklySvg';
 import * as Blockly from 'blockly/core';
@@ -17,10 +18,26 @@ class BlocklyWindow extends Component {
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    Blockly.setLocale(De);
+    var locale = window.localStorage.getItem('locale');
+    this.state = {
+      renderer: window.localStorage.getItem('renderer'),
+    };
+    if (locale === null) {
+      if (navigator.language === 'de-DE') {
+        locale = 'de';
+      } else {
+        locale = 'en';
+      }
+    }
+    if (locale === 'de') {
+      Blockly.setLocale(De);
+    } else if (locale === 'en') {
+      Blockly.setLocale(En);
+    }
   }
 
   componentDidMount() {
+
     const workspace = Blockly.getMainWorkspace();
     this.props.onChangeWorkspace({});
     this.props.clearStats();
@@ -55,7 +72,7 @@ class BlocklyWindow extends Component {
           style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
           readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
           trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
-          renderer='geras'
+          renderer={this.state.renderer}
           zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
             controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
             wheel: false,

src/components/Blockly/blocks/index.js

@@ -17,5 +17,6 @@ import './map';
 import './procedures';
 import './time';
 import './variables';
+import './lists';
 
 import '../helpers/types'

src/components/Blockly/blocks/lists.js

@@ -0,0 +1,60 @@
+import Blockly, { FieldDropdown } from 'blockly/core';
+import { selectedBoard } from '../helpers/board'
+import * as Types from '../helpers/types'
+import { getColour } from '../helpers/colour';
+
+Blockly.Blocks['lists_create_empty'] = {
+    /**
+     * Elapsed time in milliseconds block definition
+     * @this Blockly.Block
+     */
+    init: function () {
+        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
+        this.setColour(getColour().arrays);
+        this.appendDummyInput()
+            .appendField("create List with")
+        this.appendValueInput('NUMBER');
+        this.appendDummyInput()
+            .appendField("Items of Type")
+            .appendField(new FieldDropdown(Types.VARIABLE_TYPES), 'type');
+        this.setOutput(true, Types.ARRAY.typeId);
+        this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
+    },
+};
+
+
+Blockly.Blocks['array_getIndex'] = {
+    /**
+     * Elapsed time in milliseconds block definition
+     * @this Blockly.Block
+     */
+    init: function () {
+        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
+        this.setColour(getColour().arrays);
+        this.appendDummyInput()
+            .appendField(new Blockly.FieldVariable(
+                'X',
+                null,
+                ['Array'],
+                'Array'
+            ), 'FIELDNAME');
+        this.setOutput(true, Types.ARRAY.typeId);
+        this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
+    },
+};
+
+Blockly.Blocks['lists_length'] = {
+    /**
+     * Elapsed time in milliseconds block definition
+     * @this Blockly.Block
+     */
+    init: function () {
+        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
+        this.setColour(getColour().arrays);
+        this.appendValueInput('ARRAY')
+            .appendField('length of')
+            .setCheck(Types.ARRAY.compatibleTypes);
+        this.setOutput(true, Types.NUMBER.typeName);
+        this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
+    },
+};

src/components/Blockly/blocks/sensebox-display.js

@@ -81,6 +81,54 @@ Blockly.Blocks['sensebox_display_printDisplay'] = {
     LOOP_TYPES: ['sensebox_display_show'],
 };
 
+Blockly.Blocks['sensebox_display_fastPrint'] = {
+    init: function (block) {
+        this.setColour(getColour().sensebox);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_show);
+        this.appendValueInput("Title1", 'Title1')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_title);
+        this.appendValueInput("Value1", 'Value1')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_value);
+        this.appendValueInput("Dimension1", 'Dimension1')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_dimension);
+        this.appendValueInput("Title2", 'Title2')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_title);
+        this.appendValueInput("Value2", 'Value2')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_value);
+        this.appendValueInput("Dimension2", 'Dimension2')
+            .appendField(Blockly.Msg.senseBox_display_fastPrint_dimension);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.sensebox_display_fastPrint_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    },
+    /**
+   * Called whenever anything on the workspace changes.
+   * Add warning if block is not nested inside a the correct loop.
+   * @param {!Blockly.Events.Abstract} e Change event.
+   * @this Blockly.Block
+   */
+    onchange: function (e) {
+        var legal = false;
+        // Is the block nested in a loop?
+        var block = this;
+        do {
+            if (this.LOOP_TYPES.indexOf(block.type) != -1) {
+                legal = true;
+                break;
+            }
+            block = block.getSurroundParent();
+        } while (block);
+        if (legal) {
+            this.setWarningText(null);
+        } else {
+            this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
+        }
+    },
+    LOOP_TYPES: ['sensebox_display_show'],
+};
+
 
 Blockly.Blocks['sensebox_display_plotDisplay'] = {
     init: function () {

src/components/Blockly/generator/index.js

@@ -17,5 +17,6 @@ import './audio';
 import './procedures';
 import './time';
 import './variables';
+import './lists';
 
 

src/components/Blockly/generator/lists.js

@@ -0,0 +1,19 @@
+import * as Blockly from 'blockly/core';
+
+
+Blockly.Arduino['lists_create_empty'] = function () {
+    var code = '';
+    return [code, Blockly.Arduino.ORDER_ATOMIC];
+}
+
+Blockly.Arduino['array_getIndex'] = function () {
+    var code = '';
+    return [code, Blockly.Arduino.ORDER_ATOMIC];
+}
+
+
+Blockly.Arduino['lists_length'] = function () {
+    var array = Blockly.Arduino.valueToCode(this, 'ARRAY', Blockly.Arduino.ORDER_ATOMIC);
+    var code = `${array}.length`;
+    return [code, Blockly.Arduino.ORDER_ATOMIC];
+}

src/components/Blockly/generator/sensebox-display.js

@@ -31,6 +31,42 @@ Blockly.Arduino.sensebox_display_printDisplay = function () {
     return code;
 };
 
+
+Blockly.Arduino.sensebox_display_fastPrint = function () {
+    var title1 = Blockly.Arduino.valueToCode(this, 'Title1', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    var value1 = Blockly.Arduino.valueToCode(this, 'Value1', Blockly.Arduino.ORDER_ATOMIC);
+    var dimension1 = Blockly.Arduino.valueToCode(this, 'Dimension1', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    var title2 = Blockly.Arduino.valueToCode(this, 'Title2', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    var value2 = Blockly.Arduino.valueToCode(this, 'Value2', Blockly.Arduino.ORDER_ATOMIC);
+    var dimension2 = Blockly.Arduino.valueToCode(this, 'Dimension2', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    Blockly.Arduino.codeFunctions_['sensebox_fastPrint'] = `
+    void printOnDisplay(String title1, String measurement1, String unit1, String title2, String measurement2, String unit2) {
+     
+      display.setCursor(0, 0);
+      display.setTextSize(1);
+      display.setTextColor(WHITE, BLACK);
+      display.println(title1);
+      display.setCursor(0, 10);
+      display.setTextSize(2);
+      display.print(measurement1);
+      display.print(" ");
+      display.setTextSize(1);
+      display.println(unit1);
+      display.setCursor(0, 30);
+      display.setTextSize(1);
+      display.println(title2);
+      display.setCursor(0, 40);
+      display.setTextSize(2);
+      display.print(measurement2);
+      display.print(" ");
+      display.setTextSize(1);
+      display.println(unit2);
+    }
+    `
+    var code = ` printOnDisplay(${title1}, String(${value1}), ${dimension1}, ${title2}, String(${value2}), ${dimension2});\n`;
+    return code;
+};
+
 Blockly.Arduino.sensebox_display_show = function (block) {
     var show = Blockly.Arduino.statementToCode(block, 'SHOW');
     var code = '';

src/components/Blockly/generator/variables.js

@@ -14,9 +14,28 @@ const setVariableFunction = function (defaultValue) {
 
         const allVars = Blockly.getMainWorkspace().getVariableMap().getAllVariables();
         const myVar = allVars.filter(v => v.name === variableName)[0]
+        var code = ''
 
-        Blockly.Arduino.variables_[myVar + myVar.type] = myVar.type + " " + myVar.name + ';\n';
+        switch (myVar.type) {
-        return variableName + ' = ' + (variableValue || defaultValue) + ';\n';
+            default:
+                Blockly.Arduino.variables_[myVar + myVar.type] = myVar.type + " " + myVar.name + ';\n';
+                code = variableName + ' = ' + (variableValue || defaultValue) + ';\n';
+                break;
+            case 'Array':
+                var arrayType;
+                var number;
+
+                if (this.getChildren().length > 0) {
+                    if (this.getChildren()[0].type === 'lists_create_empty') {
+
+                        arrayType = this.getChildren()[0].getFieldValue('type');
+                        number = Blockly.Arduino.valueToCode(this.getChildren()[0], 'NUMBER', Blockly['Arduino'].ORDER_ATOMIC);
+                        Blockly.Arduino.variables_[myVar + myVar.type] = `${arrayType} ${myVar.name} [${number}];\n`;
+                    }
+                }
+                break;
+        }
+        return code;
     };
 };
 
@@ -25,8 +44,8 @@ const getVariableFunction = function (block) {
         block.getFieldValue('VAR'),
         Blockly.Variables.NAME_TYPE
     );
-
+    var code = variableName;
-    return [variableName, Blockly['Arduino'].ORDER_ATOMIC];
+    return [code, Blockly['Arduino'].ORDER_ATOMIC];
 };
 
 Blockly['Arduino']['variables_set_dynamic'] = setVariableFunction()

src/components/Blockly/helpers/colour.js

@@ -10,6 +10,7 @@ const colours = {
     text: 160,
     variables: 330,
     audio: 250,
+    arrays: 33
 }
 
 

src/components/Blockly/helpers/types.js

@@ -60,7 +60,7 @@ export const DECIMAL = {
 /** Array/List of items. */
 export const ARRAY = {
     typeId: 'Array',
-    typeName: 'array',
+    typeName: 'Array',
     typeMsgName: 'ARD_TYPE_ARRAY',
     compatibleTypes: []
 }
@@ -87,6 +87,7 @@ export const CHILD_BLOCK_MISSING = {
 }
 
 const compatibleTypes = {
+    Array: ['Array'],
     boolean: ['boolean'],
     int: ['int'],
     char: ['char'],

src/components/Blockly/msg/de.js

@@ -1,5 +1,5 @@
-
+const Blockly = {};
-import * as Blockly from 'blockly/core';
+Blockly.Msg = {};
 
 Blockly.Msg.ADD_COMMENT = "Kommentar hinzufügen";
 Blockly.Msg.AUTH = "Bitte autorisiere diese App zum Aktivieren der Speicherung deiner Arbeit und zum Teilen.";
@@ -646,7 +646,11 @@ Blockly.Msg.sensebox_display_fillCircle_radius = "Radius";
 Blockly.Msg.sensebox_display_drawRectangle = "Zeichne Rechteck";
 Blockly.Msg.sensebox_display_drawRectangle_width = "Breite";
 Blockly.Msg.sensebox_display_drawRectangle_height = "Höhe";
-Blockly.Msg.senseBox_display_filled = "Ausgefüllt"
+Blockly.Msg.senseBox_display_filled = "Ausgefüllt";
+Blockly.Msg.senseBox_display_fastPrint_show = "Zeige Messwerte";
+Blockly.Msg.senseBox_display_fastPrint_title = "Titel";
+Blockly.Msg.senseBox_display_fastPrint_value = "Messwert";
+Blockly.Msg.senseBox_display_fastPrint_dimension = "Einheit";
 // GPS
 Blockly.Msg.senseBox_gps_getValues = "GPS Modul";
 Blockly.Msg.senseBox_gps_getValues_tip = "ruft das GPS Signal ab";
@@ -770,3 +774,6 @@ Blockly.Msg.senseBox_telegram_send = "Sende Nachricht"
 
 Blockly.Msg.senseBox_scd30 = "CO2 Sensor (Sensirion SCD30)";
 
+
+
+export const De = Blockly.Msg;

src/components/Blockly/msg/en.js

@@ -1,5 +1,5 @@
-
+const Blockly = {};
-import * as Blockly from 'blockly/core';
+Blockly.Msg = {};
 
 Blockly.Msg.ADD_COMMENT = "Add Comment";
 Blockly.Msg.AUTH = "Please authorize this app to enable your work to be saved and to allow it to be shared by you.";
@@ -609,6 +609,11 @@ Blockly.Msg.senseBox_display_printDisplay_y = "y-coordinates";
 Blockly.Msg.senseBox_display_setSize = "set font size to";
 Blockly.Msg.senseBox_display_setSize_tip = "Change the font size. Set a Value between 1-10.";
 Blockly.Msg.senseBox_display_white = "White";
+Blockly.Msg.senseBox_display_fastPrint_dimension = "Unit";
+Blockly.Msg.senseBox_display_fastPrint_show = "Show Measurements";
+Blockly.Msg.senseBox_display_fastPrint_tip = "Show two measurements with title and dimension on the display";
+Blockly.Msg.senseBox_display_fastPrint_title = "Title";
+Blockly.Msg.senseBox_display_fastPrint_value = "Measurement";
 Blockly.Msg.senseBox_foto = "Light Dependent Resistor";
 Blockly.Msg.senseBox_foto_tip = "simple light depending resistor, gives values between 0 and 1023";
 Blockly.Msg.senseBox_gas = "Gas (VOC)";
@@ -751,3 +756,5 @@ Blockly.Msg.sensebox_soil_smt50 = "Soil Moisture and Temperature (SMT50)";
 Blockly.Msg.sensebox_web_readHTML_filename = "File:";
 
 Blockly.Msg.senseBox_scd30 = "CO2 Sensor (Sensirion SCD30)";
+
+export const En = Blockly.Msg;

src/components/Blockly/toolbox/Toolbox.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Block, Value, Field, Shadow, Category } from '../';
 import { getColour } from '../helpers/colour'
 import '@blockly/block-plus-minus';
-
 import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal';
 import * as Blockly from 'blockly/core';
 
@@ -14,12 +13,14 @@ class Toolbox extends React.Component {
     componentDidUpdate() {
         this.props.workspace.registerToolboxCategoryCallback('CREATE_TYPED_VARIABLE', this.createFlyout);
 
-        const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'float'], ['TEXT', 'String'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]);
+        const typedVarModal = new TypedVariableModal(this.props.workspace, 'callbackName', [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'float'], ['TEXT', 'String'], ['ARRAY', 'Array'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']]);
         typedVarModal.init();
     }
 
     createFlyout(workspace) {
+
         let xmlList = [];
+
         // Add your button and give it a callback name.
         const button = document.createElement('button');
         button.setAttribute('text', 'Create Typed Variable');
@@ -83,6 +84,28 @@ class Toolbox extends React.Component {
                             </Block>
                         </Value>
                     </Block>
+                    <Block type="sensebox_display_fastPrint">
+                        <Value name="Title1">
+                            <Block type="text">
+                                <Field name="TEXT">Title</Field>
+                            </Block>
+                        </Value>
+                        <Value name="Dimension1">
+                            <Block type="text">
+                                <Field name="TEXT">Unit</Field>
+                            </Block>
+                        </Value>
+                        <Value name="Title2">
+                            <Block type="text">
+                                <Field name="TEXT">Title</Field>
+                            </Block>
+                        </Value>
+                        <Value name="Dimension2">
+                            <Block type="text">
+                                <Field name="TEXT">Unit</Field>
+                            </Block>
+                        </Value>
+                    </Block >
                     <Block type="sensebox_display_plotDisplay">
                         <Value name="Title">
                             <Block type="text">
@@ -323,7 +346,12 @@ class Toolbox extends React.Component {
                     </Block>
                     <Block type="io_notone"></Block>
                 </Category>
-                <Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>;
+                <Category name="Variablen" colour={getColour().variables} custom="CREATE_TYPED_VARIABLE"></Category>
+                <Category name="Arrays" colour={getColour().arrays} >
+                    <Block type="lists_create_empty" />
+                    <Block type="array_getIndex" />
+                    <Block type="lists_length" />
+                </Category>
                 <sep></sep>
                 <Category name="Input/Output" colour={getColour().io}>
                     <Block type="io_digitalwrite"></Block>

src/components/Gallery/GalleryHome.js

@@ -81,14 +81,20 @@ class GalleryHome extends Component {
                                     <Paper style={{ height: '400px', padding: '2rem', position: 'relative', overflow: 'hidden' }}>
                                         <h3>{gallery.title}</h3>
                                         <Divider />
-                                        <BlocklyWindow
+                                        <Grid container spacing={10} style={{ marginBottom: '5px' }}>
-                                            svg
+                                            <Grid item xs={12}>
-                                            readOnly
+                                                <BlocklyWindow
-                                            initialXml={gallery.xml}
+                                                    trashcan={false}
-                                        />
+                                                    zoomControls={false}
+
+                                                    blockDisabled
+                                                    blocklyCSS={{ height: '18vH' }}
+                                                    initialXml={gallery.xml}
+                                                />
+                                            </Grid>
+                                        </Grid>
                                         <p>{gallery.text}</p>
                                         <Divider />
-                                        <p>{gallery.name}</p>
 
                                         <div className={clsx(this.props.classes.outerDiv)} style={{ width: '160px', height: '160px', border: 0 }}>
                                         </div>

src/components/Routes.js

@@ -11,11 +11,12 @@ import TutorialHome from './Tutorial/TutorialHome';
 import Builder from './Tutorial/Builder/Builder';
 import NotFound from './NotFound';
 import GalleryHome from './Gallery/GalleryHome';
+import Settings from './Settings/Settings';
 
 
 class Routes extends Component {
 
-  componentDidUpdate(){
+  componentDidUpdate() {
     this.props.visitPage();
   }
 
@@ -25,6 +26,7 @@ class Routes extends Component {
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/tutorial" exact component={TutorialHome} />
+          <Route path="/settings" exact component={Settings} />
           <Route path="/gallery" exact component={GalleryHome} />
           <Route path="/gallery/:galleryId" exact component={Home} />
           <Route path="/share/:shareId" exact component={Home} />

src/components/Settings/LanguageSelector.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function LanguageSelector() {
+    const classes = useStyles();
+    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+
+    const handleChange = (event) => {
+        setLang(event.target.value);
+        window.localStorage.setItem('locale', event.target.value);
+    };
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                <InputLabel id="demo-simple-select-label">Sprache</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={lang}
+                    onChange={handleChange}
+                >
+                    <MenuItem value={'de'}>Deutsch</MenuItem>
+                    <MenuItem value={'en'}>English</MenuItem>
+                </Select>
+            </FormControl>
+        </div>
+    );
+}

src/components/Settings/RenderSelector.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 400,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function LanguageSelector() {
+    const classes = useStyles();
+    const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
+
+    const handleChange = (event) => {
+        setRenderer(event.target.value);
+        window.localStorage.setItem('renderer', event.target.value);
+    };
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={renderer}
+                    onChange={handleChange}
+
+                >
+                    <MenuItem value={'geras'}>Geras</MenuItem>
+                    <MenuItem value={'zelos'}>Zelos</MenuItem>
+                </Select>
+            </FormControl>
+            <p>Der Renderer bestimmt das aussehen der Blöcke</p>
+        </div>
+    );
+}

src/components/Settings/Settings.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import LanguageSelector from './LanguageSelector';
+import RenderSelector from './RenderSelector';
+
+
+class Settings extends Component {
+    render() {
+        return (
+            <div>
+                <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
+                <LanguageSelector />
+                <RenderSelector />
+                <Button
+                    style={{ marginTop: '20px' }}
+                    variant="contained"
+                    color="primary"
+                    onClick={() => { this.props.history.push('/') }}
+                >
+                    Zurück zur Startseite
+            </Button>
+            </div>
+        );
+    };
+}
+
+export default withRouter(Settings);