remove log

sensorwiki with tabs and only one request

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
     "@material-ui/core": "^4.12.4",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@monaco-editor/react": "^4.3.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -28,6 +29,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^17.0.2",
     "react-cookie-consent": "^7.2.1",
+    "react-country-flag": "^3.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.0",
     "react-markdown-editor-lite": "^1.3.3",
@@ -41,6 +43,7 @@
     "reactour": "^1.18.7",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
+    "rehype-raw": "^6.1.1",
     "remark-gemoji": "^7.0.1",
     "remark-gfm": "^3.0.1",
     "styled-components": "^4.4.1",

src/actions/boardAction.js

@@ -1,10 +1,15 @@
 import {
-    BOARD,
-  } from "./types";
+  BOARD,
+} from "./types";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 export const setBoard = (board) => (dispatch) => {
-    dispatch({
-      type: BOARD,
-      payload: board,
-    });
-  };
+  window.sessionStorage.setItem("board", board);
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
+  dispatch({
+    type: BOARD,
+    payload: board,
+  });
+};

src/actions/sensorwikiActions.js

@@ -0,0 +1,18 @@
+import axios from 'axios'
+
+const fetchSensorWikiSuccess = sensors => ({
+    type: 'FETCH_SENSORWIKI_SUCCESS',
+    payload: { sensors }
+})
+
+export const fetchSensors =  () => {
+    return async dispatch => {
+        try {
+            let sensors = await axios.get('https://api.sensors.wiki/sensors/all')
+            dispatch(fetchSensorWikiSuccess(sensors.data))
+        }
+        catch(e){
+            console.log(e)
+        }
+    }
+}

src/actions/workspaceActions.js

@@ -20,9 +20,15 @@ export const onChangeCode = () => (dispatch, getState) => {
   if (selectedBlock !== null) {
     code.helpurl = selectedBlock.helpUrl
     code.tooltip = selectedBlock.tooltip
+    if (selectedBlock.data) {
+      code.data = selectedBlock.data
+    } else {
+      code.data = null
+    }
   } else if (selectedBlock === null) {
     code.tooltip = Blockly.Msg.tooltip_hint
     code.helpurl = ''
+    code.data = null
   }
 
 

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

@@ -26,6 +26,7 @@ Blockly.Blocks["sensebox_sensor_temp_hum"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
+    this.data = {name: "hdc1080", connection: "I2C"};
   },
 };
 
@@ -51,6 +52,7 @@ Blockly.Blocks["sensebox_sensor_uv_light"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
+    this.data = {name: "veml6070"};
   },
 };
 
@@ -91,6 +93,7 @@ Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
+    this.data = {name: "bmx055"};
   },
 };
 
@@ -122,6 +125,7 @@ Blockly.Blocks["sensebox_sensor_sds011"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
+    this.data = {name: "sds011"};
   },
 };
 
@@ -155,6 +159,7 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_pressure_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_pressure_helpurl);
+    this.data = {name: "bmp280"};
     this.getField("NAME").setValidator(
       function (val) {
         this.updateShape_(val === "Altitude");
@@ -201,6 +206,7 @@ Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
+    this.data = {name: "bme680"};
   },
 };
 
@@ -245,6 +251,7 @@ Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_ultrasonic_helpurl);
+    this.data = {name: "hc-sr04"};
   },
   /**
    * Parse XML to restore the number of pins available.
@@ -382,6 +389,7 @@ Blockly.Blocks["sensebox_scd30"] = {
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_scd_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_scd_helpurl);
+    this.data = {name: "scd30"};
   },
   onchange: function (e) {
     var dropdown = this.getFieldValue("dropdown");
@@ -448,6 +456,7 @@ Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
+    this.data = {name: "smt50"};
   },
 };
 
@@ -470,6 +479,7 @@ Blockly.Blocks["sensebox_sensor_watertemperature"] = {
       .appendField(new Blockly.FieldDropdown(dropdownOptions), "Port");
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
+    this.data = {name: "ds18b20"};
   },
 };
 
@@ -542,6 +552,7 @@ Blockly.Blocks["sensebox_sensor_dps310"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setTooltip(Blockly.Msg.senseBox_sensor_dps310_tooltip);
     this.setHelpUrl(Blockly.Msg.senseBox_sensor_dps310_helpurl);
+    this.data = {name: "dps310"};
     this.getField("NAME").setValidator(
       function (val) {
         this.updateShape_(val === "Altitude");

src/components/Blockly/blocks/variables.js

@@ -9,10 +9,10 @@ Blockly.Blocks["variables_set_dynamic"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.appendValueInput("VALUE")
-      .appendField("set", "set")
-      .appendField("", "type")
+      .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
+      // .appendField("", "type")
       .appendField(new Blockly.FieldVariable("VAR"), "VAR")
-      .appendField("to");
+      .appendField(Blockly.Msg.variables_to);
   },
   onchange: function (e) {
     let variableID = this.getFieldValue("VAR");

src/components/Blockly/msg/de/ui.js

@@ -19,10 +19,12 @@ export const UI = {
   variable_DECIMAL: "Kommazahl (float)",
   variables_TEXT: "Text (string)",
   variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "char (char)",
+  variables_CHARACTER: "Buchstabe (char)",
   variables_BOOLEAN: "Boolean (boolean)",
   variables_NULL: "void (void)",
   variables_UNDEF: "undefined",
+  variables_set: "Schreibe",
+  variables_to: "",
 
   /**
    * Tooltips
@@ -97,11 +99,14 @@ export const UI = {
    * Tablet Dialog
    */
 
+  tabletDialog_connect: "senseBox Connect App öffnen",
   tabletDialog_headline: "Tablet Modus ist aktiviert!",
   tabletDialog_text:
     "Der Tablet Modus wurde aktiviert. Du kannst nun Programmcodes über die senseBox Connect App auf deine senseBox kopieren. Der Tablet Modus kann in den Einstellungen deaktiviert werden",
   tabletDialog_more:
     "Weitere Informationen und den Link zum Download der App findest du unter: ",
+  compiledialog_process: "Dein Code wird compiliert!",
+  compiledialog_instructions: "Übertrage ihn anschließend mithlfe der senseBoxConnect-App..",
 
   /**
    * Reset Dialog
@@ -130,7 +135,7 @@ export const UI = {
    * Compile Dialog
    *
    */
-
+   compiledialog_success: "Dein Programm wurde erfolgreich kompiliert.",
   compiledialog_headline: "Fehler",
   compiledialog_text:
     "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
@@ -150,6 +155,7 @@ export const UI = {
   button_next: "nächster Schritt",
   button_tutorial_overview: "Tutorial Übersicht",
   button_login: "Anmelden",
+  button_createVariable: "Typisierte Variable erstellen",
 
   /**
    *
@@ -311,5 +317,15 @@ export const UI = {
   deviceselection_head: "Welches Board benutzt du?",
   deviceselection_keep_selection: "Speichere meine Auswahl fürs nächste Mal (Du kannst das Board später in den Einstellungen wechseln)",
   deviceselection_footnote: "Hier kommst du zur alten Blockly Version für den ",
-  deviceselection_footnote_02: "oder die"
+  deviceselection_footnote_02: "oder die",
+
+  /**
+   * Sensor Markdown Information
+   */
+  sensorinfo_info: "Informationen zum Sensor",
+  sensorinfo_description: "Beschreibung",
+  sensorinfo_measurable_phenos: "Messbare Phänomene",
+  sensorinfo_manufacturer: "Hersteller",
+  sensorinfo_lifetime: "Lebensdauer",
+  sensorinfo_explanation: "Diese Informationen wurden aus [sensors.wiki](https://sensors.wiki) entnommen. Für weitere Informationen besuchen Sie den Abschnitt über diesen Sensor "
 };

src/components/Blockly/msg/en/io.js

@@ -13,8 +13,8 @@ export const IO = {
   ARD_DIGITALREAD_TIP: "Read digital value on a pin: HIGH or LOW",
   ARD_DIGITALWRITE: "set digitial pin#",
   ARD_DIGITALWRITE_TIP: "Write digital value HIGH or LOW to a specific Port",
-  ARD_FUN_RUN_LOOP: "Arduino loop forever:",
-  ARD_FUN_RUN_SETUP: "Arduino run first:",
+  ARD_FUN_RUN_LOOP: "Loop()",
+  ARD_FUN_RUN_SETUP: "Setup()",
   ARD_FUN_RUN_TIP: "Defines the Arduino setup() and loop() functions.",
   ARD_HIGH: "HIGH",
   ARD_HIGHLOW_TIP: "Set a pin state logic High or Low.",

src/components/Blockly/msg/en/ui.js

@@ -15,14 +15,16 @@ export const UI = {
   toolbox_motors: "Motors",
   variable_NUMBER: "Number (int)",
   variable_SHORT_NUMBER: "char",
-  variable_LONG: " Zahl (long)",
+  variable_LONG: "Big number (long)",
   variable_DECIMAL: "Decimal (float)",
   variables_TEXT: "Text (string)",
   variables_ARRAY: "Array (array)",
-  variables_CHARACTER: "char (char)",
+  variables_CHARACTER: "Character (char)",
   variables_BOOLEAN: "Boolean (boolean)",
   variables_NULL: "void (void)",
   variables_UNDEF: "undefined",
+  variables_set: "set",
+  variables_to: "to",
 
   /**
    * Tooltips
@@ -99,6 +101,7 @@ export const UI = {
     "Tablet mode has been activated. You can now copy program codes to your senseBox via the senseBox Connect app. Tablet mode can be deactivated in the settings",
   tabletDialog_more:
     "For more information and the link to download the app, please visit: ",
+  tabletDialog_connect: "Open senseBox Connect App",
 
   /**
    * Reset Dialog
@@ -126,10 +129,12 @@ export const UI = {
    * Compile Dialog
    *
    */
-
+  compiledialog_success: "Your code has been compiled successfully.",
   compiledialog_headline: "Error",
   compiledialog_text:
     "While compiling an error occured. Please check your blocks and try again",
+  compiledialog_process: "Your code is being compiled!",
+  compiledialog_instructions: "After that, transfer it using the senseBoxConnect app.",
 
   /**
    * Buttons
@@ -145,6 +150,7 @@ export const UI = {
   button_next: "Next step",
   button_tutorial_overview: "Tutorial overview",
   button_login: "Login",
+  button_createVariable: "Create Typed Variable",
 
   /**
    *
@@ -300,13 +306,21 @@ export const UI = {
   codeeditor_compile_progress:
     "Your code will now be compiled and then downloaded to your computer",
 
-      /**
-   * Device Selction
-   *  */
+  /**
+  * Device Selction
+  * */ 
   deviceselection_head: "Which board are you using?",
   deviceselection_keep_selection: "Save my choice (You can change the board later in the settings)",
   deviceselection_footnote: "Here you can access the old blockly Version for the",
   deviceselection_footnote_02: "or the",
 
-
+  /**
+   * Sensor Markdown Information
+   * */
+  sensorinfo_info: "Informationen regarding the Sensor",
+  sensorinfo_description: "Description",
+  sensorinfo_measurable_phenos: "Measurable Phenomena",
+  sensorinfo_manufacturer: "Manufacturer",
+  sensorinfo_lifetime: "Lifetime",
+  sensorinfo_explanation: "This information was fetched from [sensors.wiki](https://sensors.wiki). For more information visit the section on this sensor ",
 };

src/components/Blockly/toolbox/Toolbox.js

@@ -16,7 +16,6 @@ class Toolbox extends React.Component {
       this.props.workspace,
       "callbackName",
       [
-        [`${Blockly.Msg.variable_SHORT_NUMBER}`, "char"],
         [`${Blockly.Msg.variable_NUMBER}`, "int"],
         [`${Blockly.Msg.variable_LONG}`, "long"],
         [`${Blockly.Msg.variable_DECIMAL}`, "float"],
@@ -33,7 +32,7 @@ class Toolbox extends React.Component {
 
     // Add your button and give it a callback name.
     const button = document.createElement("button");
-    button.setAttribute("text", "Create Typed Variable");
+    button.setAttribute("text", Blockly.Msg.button_createVariable);
     button.setAttribute("callbackKey", "callbackName");
 
     xmlList.push(button);
@@ -41,6 +40,7 @@ class Toolbox extends React.Component {
     // This gets all the variables that the user creates and adds them to the
     // flyout.
     const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace);
+    console.log(blockList);
     xmlList = xmlList.concat(blockList);
     return xmlList;
   }

src/components/CodeEditor/CodeEditor.js

@@ -11,6 +11,7 @@ import Sidebar from "./Sidebar";
 import Dialog from "../Dialog";
 import SaveIcon from "./SaveIcon";
 import store from "../../store";
+import DeviceSelection from "../DeviceSelection";
 
 const CodeEditor = (props) => {
   //const [filehandle, setFileHandle] = useState();
@@ -192,6 +193,7 @@ void loop() {
             }}
           />
         </Grid>
+        <DeviceSelection />
         <Grid item lg={4} md={4}>
           <Button
             style={{ padding: "1rem", margin: "1rem" }}

src/components/CodeEditor/Compile.js

@@ -68,7 +68,7 @@ class Compile extends Component {
     };
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   componentDidUpdate(props) {
     if (props.name !== this.props.name) {
@@ -232,8 +232,8 @@ class Compile extends Component {
           >
             <div className="overlay">
               {/* <img src={Copy} width="400" alt="copyimage"></img> */}
-              <h2>Dein Code wird kompiliert!</h2>
-              <p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
+              <h2>{Blockly.Msg.compiledialog_process}</h2>
+              <p>{Blockly.Msg.compiledialog_instructions}</p>
               <p>
                 {Blockly.Msg.compile_overlay_help}
                 <a href="/faq" target="_blank">
@@ -291,7 +291,7 @@ class Compile extends Component {
           button={Blockly.Msg.button_close}
         >
           <div>
-            <p>Dein Code wurde erfolgreich kompiliert</p>
+            <p>{Blockly.Msg.compiledialog_success}</p>
             <a href={this.state.link}>
               <Button
                 style={{ color: "white" }}
@@ -303,7 +303,7 @@ class Compile extends Component {
                   icon={faClipboardCheck}
                   style={{ marginRight: "5px" }}
                 />{" "}
-                Starte Übertragung
+                {Blockly.Msg.tabletDialog_connect}
               </Button>
             </a>
           </div>

src/components/DeviceSelection.js

@@ -7,8 +7,6 @@ import { withStyles } from "@material-ui/core/styles";
 import * as Blockly from "blockly";
 import { IconButton, Grid, Avatar, Typography } from "@material-ui/core";
 import { setBoard } from "../actions/boardAction";
-import mini_opacity from "../data/mini_opacity.png"
-import mcu_opacity from "../data/mcu_opacity.png"
 
 const styles = (theme) => ({
   link: {
@@ -29,37 +27,29 @@ class DeviceSeclection extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      open: true,
-      selectedBoard : "",
+      open: props.selectedBoard ? false : true,
+      selectedBoard: "",
       saveSettings: false,
 
     };
   }
 
   toggleDialog = () => {
-    
     this.props.setBoard(this.state.selectedBoard)
-
   };
 
   onChange = (e) => {
     if (e.target.checked) {
-      this.setState({ saveSettings: true});
+      this.setState({ saveSettings: true });
     } else {
-      this.setState({ saveSettings: false});
+      this.setState({ saveSettings: false });
     }
   };
 
   onclick = (e, value) => {
-    console.log(e, value)
-    const root = document.querySelector(':root');
-    root.style.setProperty('--url', `url(${value === "mcu" ? mcu_opacity : mini_opacity })`);
-    this.setState({selectedBoard: value})
+    this.setState({ selectedBoard: value })
     this.props.setBoard(value)
     this.setState({ open: !this.state });
-   
-
-   
   };
 
   render() {
@@ -72,25 +62,24 @@ class DeviceSeclection extends Component {
         title={Blockly.Msg.deviceselection_head}
         content={""}
         onClick={this.toggleDialog}
-        disabled={this.state.selectedBoard===""}
+        disabled={this.state.selectedBoard === ""}
       >
         <div>
-          <Grid container spacing={2} style={{  textAlign : "center" }}>
+          <Grid container spacing={2} style={{ textAlign: "center" }}>
             <Grid item xs={6}>
-            <IconButton onClick={(e) => this.onclick(e, "mcu")}>
-              <Avatar
-                alt="Sensebox MCU"
-                src="/media/hardware/senseboxmcu.png"
-                style={{
-                  border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
-                  width:"20vw",
-                  height: "20vw"
-               }}
-              />
+              <IconButton onClick={(e) => this.onclick(e, "mcu")}>
+                <Avatar
+                  alt="Sensebox MCU"
+                  src="/media/hardware/senseboxmcu.png"
+                  style={{
+                    border: this.state.selectedBoard === "mcu" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
+                    width: "20vw",
+                    height: "20vw"
+                  }}
+                />
               </IconButton>
               <p>senseBox MCU</p>
             </Grid>
-
             {/* <Grid item xs={4}>
             <IconButton onClick={(e) => this.onclick(e, "esp")}>
               <Avatar
@@ -100,42 +89,27 @@ class DeviceSeclection extends Component {
                   border: this.state.selectedBoard == "esp" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
                   width:"20vw",
                   height: "20vw"
-               }}
+              }}
               />
               </IconButton>
               <p>Sensebox ESP</p>
             </Grid> */}
             <Grid item xs={6}>
               <IconButton onClick={(e) => this.onclick(e, "mini")}>
-              <Avatar
-                alt="Sensebox Mini"
-                src="/media/hardware/senseboxmcumini.png"
-                 style={{
-                  border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue': "0.1px solid lightgray",
-                  width:"20vw",
-                  height: "20vw"
-               }}
-              />
+                <Avatar
+                  alt="Sensebox Mini"
+                  src="/media/hardware/senseboxmcumini.png"
+                  style={{
+                    border: this.state.selectedBoard === "mini" ? 'medium solid DeepSkyBlue' : "0.1px solid lightgray",
+                    width: "20vw",
+                    height: "20vw"
+                  }}
+                />
               </IconButton>
               <p>senseBox MCU:mini</p>
             </Grid>
           </Grid>
         </div>
-        {/* <FormControlLabel
-          style={{ marginTop: "20px" }}
-          classes={{ label: this.props.classes.label }}
-          control={
-            <Checkbox
-              size={"small"}
-              value={true}
-              checked={this.state.checked}
-              onChange={(e) => this.onChange(e)}
-              name="dialog"
-              color="primary"
-            />
-          }
-          label={Blockly.Msg.deviceselection_keep_selection}
-        /> */}
         <Typography variant="body1" >
           {Blockly.Msg.deviceselection_footnote} <a href="https://sensebox.github.io/blockly/">Arduino UNO</a> {Blockly.Msg.deviceselection_footnote_02} <a href="https://sensebox-blockly.netlify.app/ardublockly/?board=sensebox-mcu">senseBox MCU</a>
         </Typography>
@@ -155,5 +129,5 @@ const mapStateToProps = (state) => ({
 
 export default connect(
   mapStateToProps,
-  {setBoard}
+  { setBoard }
 )(withStyles(styles, { withTheme: true })(DeviceSeclection));

src/components/Faq.js

@@ -8,6 +8,7 @@ import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import * as Blockly from "blockly";
 import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import Container from "@material-ui/core/Container";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
@@ -61,6 +62,7 @@ class Faq extends Component {
                         className="news"
                         allowDangerousHtml="true"
                         children={object.answer}
+                        rehypePlugins={[rehypeRaw]}
                       ></ReactMarkdown>
                     </Typography>
                   </ExpansionPanelDetails>

src/components/Navbar.js

@@ -41,6 +41,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import Tooltip from "@material-ui/core/Tooltip";
+import NavbarSettings from "./NavbarSettings";
 
 const styles = (theme) => ({
   drawerWidth: {
@@ -127,6 +128,7 @@ class Navbar extends Component {
             <Link to={"/"} style={{ marginLeft: "10px" }}>
               <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
+            <NavbarSettings />
             {isTutorial ? (
               <Link
                 to={"/tutorial"}
@@ -149,7 +151,7 @@ class Navbar extends Component {
                   onClick={() => {
                     this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  style={{ margin: "0 30px 0 0" }}
                 >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
@@ -163,7 +165,7 @@ class Navbar extends Component {
                   onClick={() => {
                     this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                  style={{ margin: "0 30px 0 0" }}
                 >
                   <FontAwesomeIcon icon={faQuestionCircle} />
                 </IconButton>
@@ -214,11 +216,11 @@ class Navbar extends Component {
           </div>
           <List>
             {[
-                 {
-                  text: Blockly.Msg.navbar_blockly,
-                  icon: faPuzzlePiece,
-                  link: "/",
-                },
+              {
+                text: Blockly.Msg.navbar_blockly,
+                icon: faPuzzlePiece,
+                link: "/",
+              },
               {
                 text: Blockly.Msg.navbar_tutorials,
                 icon: faChalkboardTeacher,
@@ -329,9 +331,9 @@ class Navbar extends Component {
                       onClick={
                         item.function
                           ? () => {
-                              item.function();
-                              this.toggleDrawer();
-                            }
+                            item.function();
+                            this.toggleDrawer();
+                          }
                           : this.toggleDrawer
                       }
                     >

src/components/NavbarSettings.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { setLanguage } from '../actions/generalActions';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import { setBoard } from '../actions/boardAction';
+import ReactCountryFlag from "react-country-flag";
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
+
+const theme = createTheme({
+    overrides: {
+        MuiSelect: {
+            select: {
+                '&:focus': {
+                    backgroundColor: 'transparent',
+                },
+            },
+        },
+    },
+});
+
+class NavbarSettings extends Component {
+    componentDidMount() {
+        // Ensure that Blockly.setLocale is adopted in the component.
+        // Otherwise, the text will not be displayed until the next update of the component.
+        this.forceUpdate();
+    }
+
+    handleChange = (event) => {
+        this.props.setLanguage(event.target.value);
+    }
+
+
+    render() {
+        return (
+            <div style={{ margin: "0 0 0 auto", display: "flex" }}>
+                <div style={{ margin: "0 30px 0 auto", display: "flex" }}>
+                    <MuiThemeProvider theme={theme}>
+                        <Select
+                            value={this.props.selectedBoard}
+                            onChange={(e) => this.props.setBoard(e.target.value)}
+                            disableUnderline={true}
+                            style={{ backgroundColor: "transparent !important" }}
+                            // IconComponent={() => <div />}
+                        >
+                            <MenuItem value="mcu">senseBox MCU</MenuItem>
+                            <MenuItem value="mini">senseBox MCU mini</MenuItem>
+                        </Select>
+                    </MuiThemeProvider>
+                </div>
+                <div style={{ margin: "0 0 0 auto", display: "flex" }}>
+                    <MuiThemeProvider theme={theme}>
+                        <Select
+                            value={this.props.language}
+                            onChange={this.handleChange}
+                            disableUnderline={true}
+                            IconComponent={() => null}
+                        >
+                            <MenuItem value={'en_US'} >
+                                <ReactCountryFlag
+                                    countryCode="US"
+                                    svg
+                                    cdnSuffix="svg"
+                                    title="US"
+                                />
+                            </MenuItem>
+                            <MenuItem value={'de_DE'}>
+                                <ReactCountryFlag
+                                    countryCode="DE"
+                                    svg
+                                    cdnSuffix="svg"
+                                    title="DE"
+                                />
+                            </MenuItem>
+                        </Select>
+                    </MuiThemeProvider>
+                </div>
+            </div >
+        );
+    }
+}
+
+const mapStateToProps = state => ({
+    language: state.general.language,
+    selectedBoard: state.board.board
+});
+
+export default connect(mapStateToProps, { setLanguage, setBoard })(NavbarSettings);

src/components/Project/ProjectHome.js

@@ -18,6 +18,7 @@ import Divider from "@material-ui/core/Divider";
 import Typography from "@material-ui/core/Typography";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   link: {
@@ -60,9 +61,8 @@ class ProjectHome extends Component {
         this.setState({
           snackbar: true,
           key: Date.now(),
-          message: `Dein angefragtes ${
-            type === "gallery" ? "Galerie-" : ""
-          }Projekt konnte nicht gefunden werden.`,
+          message: `Dein angefragtes ${type === "gallery" ? "Galerie-" : ""
+            }Projekt konnte nicht gefunden werden.`,
           type: "error",
         });
       }
@@ -108,6 +108,7 @@ class ProjectHome extends Component {
         />
 
         <h1>{data}</h1>
+        <DeviceSelection />
         {this.props.progress ? (
           <Backdrop open invisible>
             <CircularProgress color="primary" />
@@ -127,9 +128,8 @@ class ProjectHome extends Component {
                         }}
                       >
                         <Link
-                          to={`/${
-                            data === "Projekte" ? "project" : "gallery"
-                          }/${project._id}`}
+                          to={`/${data === "Projekte" ? "project" : "gallery"
+                            }/${project._id}`}
                           style={{ textDecoration: "none", color: "inherit" }}
                         >
                           <h3 style={{ marginTop: 0 }}>{project.title}</h3>
@@ -153,7 +153,7 @@ class ProjectHome extends Component {
                           </Typography>
                         </Link>
                         {this.props.user &&
-                        this.props.user.email === project.creator ? (
+                          this.props.user.email === project.creator ? (
                           <div>
                             <Divider
                               style={{

src/components/SensorInfo.js

@@ -0,0 +1,77 @@
+import React from "react";
+import Box from "@material-ui/core/Box";
+import Tab from "@material-ui/core/Tab";
+import TabContext from "@material-ui/lab/TabContext";
+import TabList from "@material-ui/lab/TabList";
+import TabPanel from "@material-ui/lab/TabPanel";
+import store from "../store";
+import ReactMarkdown from "react-markdown";
+import * as Blockly from "blockly";
+
+
+export default function LabTabs() {
+    const [value, setValue] = React.useState('1');
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    // get the description in the current language if no lang is give return english or the first one
+    function filterLanguage(options) {
+        var lang;
+        if (window.localStorage.getItem("locale")) {
+            lang = window.localStorage.getItem("locale").split("_")[0];
+        }
+        else {
+            lang = "en";
+        }
+        for (var i = 0; i < options.length; i++) {
+            if (options[i].languageCode === lang) {
+                return options[i].text;
+            }
+        }
+        return options[0].text;
+    }
+    var currentStore = store.getState();
+    // ALL SENSOR DATA FROM WIKI
+    var sensorData = currentStore.sensorwiki;
+    // NAME OF SELECTED BLOCK
+    var sensorName = currentStore.workspace.code.data.name;
+    // SEARCH ALL DATA FOR SELECTED BLOCK NAME
+    var sensorInfo = sensorData.find(function (element) {
+        return element.slug === sensorName;
+    });
+    if (sensorInfo) {
+        sensorInfo.markdown = "Coming soon...";
+
+        // GET DESCRIPTION OF SELECTED BLOCK
+        sensorInfo.details = `# ${sensorName.toUpperCase()}
+${Blockly.Msg.sensorinfo_explanation} [${sensorName.toUpperCase()}](https://sensors.wiki/sensor/detail/${sensorName})
+## ${Blockly.Msg.sensorinfo_description}
+${filterLanguage(sensorInfo.description.item)}
+## ${Blockly.Msg.sensorinfo_measurable_phenos}
+## ${Blockly.Msg.sensorinfo_manufacturer}
+${sensorInfo.manufacturer}
+## ${Blockly.Msg.sensorinfo_lifetime}
+${sensorInfo.lifePeriod}`
+    }
+
+    return (
+        <Box sx={{ width: '100%', typography: 'body1' }}>
+            <TabContext value={value}>
+                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                    <TabList onChange={handleChange}>
+                        <Tab label="Basic Information" value="1" />
+                        <Tab label="Details" value="2" />
+                    </TabList>
+                </Box>
+                <TabPanel value="1">
+                    {sensorInfo ? <ReactMarkdown>{sensorInfo.markdown}</ReactMarkdown> : "No data available"}
+                </TabPanel>
+                <TabPanel value="2">
+                    {sensorInfo ? <ReactMarkdown>{sensorInfo.details}</ReactMarkdown> : "No data available"}
+                </TabPanel>
+            </TabContext>
+        </Box>
+    );
+}

src/components/TooltipViewer.js

@@ -1,17 +1,41 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-
 import withWidth from "@material-ui/core/withWidth";
-
-import { Card } from "@material-ui/core";
+import { Button, Card } from "@material-ui/core";
 import * as Blockly from "blockly";
 import CardContent from "@material-ui/core/CardContent";
-
 import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import Slide from "@material-ui/core/Slide";
+import SensorInfo from "./SensorInfo";
+import store from "../store";
+
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
 
 class TooltipViewer extends Component {
+
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+    this.state = {
+      open: false,
+    };
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state });
+  };
+
+  openDialog = () => {
+    this.setState({ open: true });
+  };
+
   render() {
     return (
       <Card
@@ -29,14 +53,46 @@ class TooltipViewer extends Component {
             {Blockly.Msg.tooltip_viewer}
           </Typography>
 
-          <ReactMarkdown linkTarget="_blank">
-            {this.props.tooltip}
-          </ReactMarkdown>
-
-          {this.props.helpurl !== "" ? (
-            <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
-          ) : null}
+          <Typography variant="body2" component="p">
+            <ReactMarkdown linkTarget="_blank">
+              {this.props.tooltip}
+            </ReactMarkdown>
+            {store.getState().workspace.code.data ? (
+              <Button
+                label="Mehr"
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  this.openDialog();
+                }}
+              >
+                Sensor Informationen
+              </Button>
+            ) : (
+              <ReactMarkdown>{`${Blockly.Msg.tooltip_moreInformation} [${Blockly.Msg.labels_here}](${this.props.helpurl})`}</ReactMarkdown>
+            )}
+          </Typography>
         </CardContent>
+        {store.getState().workspace.code.data ? (<Dialog
+          open={this.state.open}
+          TransitionComponent={Transition}
+          keepMounted
+          aria-describedby="alert-dialog-slide-description"
+          onClose={() => {
+            this.toggleDialog();
+          }}
+          maxWidth={"md"}
+          fullWidth={true}
+        >
+          <DialogContent>
+            <SensorInfo></SensorInfo>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => {
+              this.toggleDialog();
+            }}>Close</Button>
+          </DialogActions>
+        </Dialog>) : (null)}
       </Card>
     );
   }

src/components/Tutorial/TutorialHome.js

@@ -37,6 +37,7 @@ import Tooltip from "@material-ui/core/Tooltip";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "../Snackbar";
 import Divider from "@material-ui/core/Divider";
+import DeviceSelection from "../DeviceSelection";
 
 const styles = (theme) => ({
   outerDiv: {
@@ -243,14 +244,11 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
-                            stroke-dasharray={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
-                            } ${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
+                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
+                            stroke-dasharray={`${75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
+                              } ${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
                           ></circle>
                         )}
                         {success < 1 && !error ? (
@@ -265,9 +263,8 @@ class TutorialHome extends Component {
                             cy="50%"
                             fill="none"
                             stroke-width="10"
-                            stroke-dashoffset={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
+                            stroke-dashoffset={`${75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
+                              }`}
                             stroke-dasharray={`${75 * 2 * Math.PI}`}
                           ></circle>
                         ) : null}
@@ -279,8 +276,8 @@ class TutorialHome extends Component {
                         tutorialStatus === "Error"
                           ? this.props.classes.outerDivError
                           : tutorialStatus === "Success"
-                          ? this.props.classes.outerDivSuccess
-                          : null
+                            ? this.props.classes.outerDivSuccess
+                            : null
                       )}
                     >
                       <div className={this.props.classes.innerDiv}>
@@ -311,6 +308,7 @@ class TutorialHome extends Component {
             );
           })}
         </Grid>
+        <DeviceSelection />
         {this.props.user ? (
           <div>
             <h2>User Tutorials</h2>

src/components/User/Login.js

@@ -38,6 +38,19 @@ export class Login extends Component {
     };
   }
 
+  componentDidMount() {
+    if (this.props.message.id === "LOGIN_FAIL") {
+      this.setState({
+        email: "",
+        password: "",
+        snackbar: true,
+        key: Date.now(),
+        message: Blockly.Msg.messages_LOGIN_FAIL,
+        type: "error",
+      });
+    }
+  }
+
   componentDidUpdate(props) {
     const { message } = this.props;
     if (message !== props.message) {

src/components/Workspace/Compile.js

@@ -68,7 +68,7 @@ class Compile extends Component {
     };
   }
 
-  componentDidMount() {}
+  componentDidMount() { }
 
   componentDidUpdate(props) {
     if (props.name !== this.props.name) {
@@ -232,8 +232,8 @@ class Compile extends Component {
           >
             <div className="overlay">
               {/* <img src={Copy} width="400" alt="copyimage"></img> */}
-              <h2>Dein Code wird kompiliert!</h2>
-              <p>übertrage ihn anschließend mithlfe der senseBoxConnect-App</p>
+              <h2>{Blockly.Msg.compiledialog_process}</h2>
+              <p>{Blockly.Msg.compiledialog_instructions}</p>
               <p>
                 {Blockly.Msg.compile_overlay_help}
                 <a href="/faq" target="_blank">
@@ -291,7 +291,7 @@ class Compile extends Component {
           button={Blockly.Msg.button_close}
         >
           <div>
-            <p>Dein Code wurde erfolgreich kompiliert</p>
+            <p>{Blockly.Msg.compiledialog_success}</p>
             <a href={this.state.link}>
               <Button
                 style={{ color: "white" }}
@@ -303,7 +303,7 @@ class Compile extends Component {
                   icon={faClipboardCheck}
                   style={{ marginRight: "5px" }}
                 />{" "}
-                Starte Übertragung
+                {Blockly.Msg.tabletDialog_connect}
               </Button>
             </a>
           </div>

src/helpers/compareXml.js

@@ -15,11 +15,13 @@ const compareNumberOfBlocks = (originalBlocks, userBlocks) => {
     var blocks;
     if(originalBlocks.length > userBlocks.length){
       blocks = originalBlocks.length-userBlocks.length;
-      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
+      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu wenig verwendet.`, type: 'error'};
+      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} weniger verwendet als in der hinterlegten Lösung.`, type: 'success'};
     }
     else {
       blocks = userBlocks.length-originalBlocks.length;
-      return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
+      //return {text: `Es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} zu viel verwendet.`, type: 'error'};
+      return {text: `Du kannst deinen Programmcode kompilieren, aber es wurde${blocks === 1 ? '' : 'n'} ${blocks} Bl${blocks === 1 ? 'ock' : 'öcke'} mehr verwendet als in der hinterlegten Lösung.`, type: 'success'};
     }
   }
 };

src/index.js

@@ -3,7 +3,12 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
+import store from "./store";
+import { fetchSensors } from "./actions/sensorwikiActions";
 
+store.dispatch(fetchSensors());
+
+fetchSensors();
 
 ReactDOM.render(
   <React.StrictMode>

src/reducers/boardReducer.js

@@ -1,12 +1,20 @@
 import { BOARD } from '../actions/types';
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
 
 const initialValue = () => {
-  if (window.localStorage.getItem("board")) {
-    return window.localStorage.getItem("board");
+  if (window.sessionStorage.getItem("board")) {
+    setBackgroundImage(window.sessionStorage.getItem("board"));
+    return window.sessionStorage.getItem("board");
   }
-  return "bla";
+  return null;
 };
 
+const setBackgroundImage = (board) => {
+  const root = document.querySelector(':root');
+  root.style.setProperty('--url', `url(${board === "mcu" ? mcu_opacity : mini_opacity})`);
+}
+
 const initialState = {
     board: initialValue()
 };

src/reducers/index.js

@@ -6,7 +6,8 @@ import generalReducer from './generalReducer';
 import projectReducer from './projectReducer';
 import messageReducer from './messageReducer';
 import authReducer from './authReducer';
-import boardReducer from './boardReducer'
+import boardReducer from './boardReducer';
+import sensorwikiReducer from './sensorwikiReducer';
 
 export default combineReducers({
   auth: authReducer,
@@ -16,5 +17,6 @@ export default combineReducers({
   builder: tutorialBuilderReducer,
   project: projectReducer,
   general: generalReducer,
-  message: messageReducer
+  message: messageReducer,
+  sensorwiki: sensorwikiReducer
 });

src/reducers/sensorwikiReducer.js

@@ -0,0 +1,10 @@
+const sensors = (state = [] , action) => {
+    switch(action.type) {
+        case 'FETCH_SENSORWIKI_SUCCESS':
+            return action.payload.sensors
+        default:
+            return state
+    }
+}
+
+export default sensors