update ports for senseBox MCU mini

fix getSelected block

.env

@@ -1,2 +1,8 @@
 REACT_APP_COMPILER_URL=https://compiler.sensebox.de
 REACT_APP_BOARD=sensebox-mcu
+REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
+
+GENERATE_SOURCEMAP=false
+
+# in days
+REACT_APP_SHARE_LINK_EXPIRES=30

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/short-issue.md

@@ -0,0 +1,14 @@
+---
+name: Short Issue
+about: Template for Short Issues
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+### Current behaviour
+Describe the current behaviour
+
+### Expected behaviour
+Describe how it is supposed to work

.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 package-lock.json
-package-lock.json
+

CITATION.cff

@@ -0,0 +1,26 @@
+# This CITATION.cff file was generated with cffinit.
+# Visit https://bit.ly/cffinit to generate yours today!
+
+cff-version: 1.2.0
+title: senseBox Learn- and Programming Environment
+message: Please cite this software using these metadata.
+type: software
+version: 1.0.0
+date-released: 2021-09-30
+url: "https://github.com/sensebox/React-Ardublockly"
+authors:
+  - given-names: Mario
+    family-names: Pesch
+    email: mario.pesch@uni-muenster.de
+    affiliation: >-
+      Institute for geoinformatics University of
+      Muenster
+  - given-names: Luc
+    family-names: Niski
+    affiliation: >-
+      Institute for geoinformatics University of
+      Muenster
+  - given-names: Felix
+    family-names: Erdmann
+    email: f.erdmann@reedu.de
+    affiliation: Reedu GmbH & Co. KG

NEWS.md

@@ -0,0 +1,93 @@
+# Blockly 2020
+
+(aktuelles Preview unter: https://deploy-preview-37--blockly-react.netlify.app/)
+
+In den letzten Wochen haben wir eine komplett neue Lern- und Programmierumgebung für die senseBox geschaffen. Die Basis bildet hierbei weiterhin Google Blockly und das Frontend wird über React realisiert. Fast alle Blöcke wurden bereits aus der alten Version in die neue Version migriert. 
+
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_880bb55f28e0dbb0bb9c2160d8e50594.png)
+
+
+
+## Blockly Core
+Nachdem die bisherige Version, die unter [blockly.sensebox.de](https://blockly.sensebox.de) verfügbar ist, auf einen Google Blockly Core von 2016 aufbaut, wurde es Zeit ein großes Update durchzuführen. Durch den neuen Blockly Core lassen sich auch andere Renderer der Blöcke verwenden. In den Einstellungen kannst du zwischen den zwei Renderern Geras und Zelos auswählen. Geras ist der klassische Blockly Renderer während Zelos vor allem für Touchoberfläche optimiert worden ist.
+
+### Typed Variablen
+
+Neue Variablen werden nun direkt mit einem bestimmten Datentyp angelegt. Ein einfacher Check überprüft ob der zurückgegeben Typ eines Blockes mit dem der Variablen kompatibel ist. 
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_0d505fc2472178182995732af226e736.png)
+
+
+### Funktionen (funktioniert aktuell nicht!)
+
+Funktionen mit Rückgabe Wert und Eingabeparametern können angelegt werden. Durch die Verwendung von Funktionen lassen sich auch komplexere Programme übersichtlicher darstellen und bearbeiten. Beim Anlegen einer Funktion kann über das Zahnrad weitere Eingabeparameter hinzuefügt werden. 
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_bd9544b118a1dbe83d149c00678eb39d.png)
+
+
+### GPS
+
+Der Code für das GPS Modul wurde neu aufgebaut und ermöglicht es deutlich schneller einen GPS Fix zu bekommen. Zusätzlich lassen sich bald! die Koordinaten in zwei verschiedenen Formaten zurückgebenlassen. Zum einen als Kommazahl zum anderen als Zahl ohne nachkommastellen 
+
+### MQTT
+Zwei einfache Blöcke ermöglichen es nun die Daten über MQTT an einen Broker zu versenden. Zwei Broker sind bereits "vorprogrammiert" (Adafruit IO und DIOTY). Natürlich können auch eigene Broker verwendet werden. Falls ihr gute freie Broker kennt, die wir hinzufügen sollten meldet euch einfach bei uns.
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_a9df4b0b9b1e6f39f09cf3b1743caad2.png)
+
+
+### TTN Mapper
+Bisher war es möglich einen "kleinen" TTN Mapper zu bauen, der die Daten als Cayenne Payload versendet hat. Es gibt nun einen Block der es direkt ermöglicht einen vollständigen TTN Mapper zu Programmieren, der die Daten auch auf [TTNMapper](https://ttnmapper.org/) veröffentlichen kann.
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_b59691f2ebcf04d8b67a5f4e7fbe70b6.png)
+
+
+## Fronted
+
+In der Oberfläche gibt es einige Neuigkeiten. Ziel ist es Blockly für die senseBox zu einer vollständigen Lern- und Programmierumgebung weiterzuentwickeln.  
+
+Die Codeanzeige ist standardmäßig ausgeblendet kann aber einfach durch eine Klick auf das `</>` Icon hinzugefügt werden.
+
+### Login mit openSenseMap/senseBox Account
+
+Im Menü unter Login könnt ihr euch mit eurem openSenseMap Account anmelden. Sobald ihr angemeldet seid habt ihr die Möglichkeit Projekte online zu speichern. 
+Sobald der Login mit dem openSenseMap Account erfolgreich war lassen sich die bereits registrierten senseBox unter Account einsehen. 
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_c3965edc99021339a30b8d6704471e50.png)
+
+
+Im Block zum senden an die openSenseMap müssen dann auch keine IDs mehr ausgewählt werden sondern die registrierten senseBox können einfach aus dem Dropdown Menü ausgewählt werden.
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_57284cea57bfa5df3d55fe456f9d7cfa.png)
+
+### Speichern von Projekten
+
+Nach dem Login über den openSenseMap Account lassen sich Projekte online speichern und wieder abrufen
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_148146b1206fde184afff6edce26b515.png)
+
+
+### Tutorials
+
+Es gibt jetzt Tutorials! Eine reihe von verschiedenen Tutorials zeigt dir die ersten Schritte in der Programmierung mit Blockly. (Inhalte werden noch ausgebaut)
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_db0e64df48d4c34a9540ffb089e95769.png)
+
+### Gallery
+
+In der Gallery finden sich Beispiele mit verschiedenen Programmen. Die Beispiele können direkt in Blockly geöffnet werden, um Änderungen vorzunehmen oder das Programm direkt auf deine senseBox zu übertragen. 
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_c61e1fa98f9d840507a8a53b00605484.png)
+
+
+### Teilen von Programmen
+
+Über den Share Button kann ein Link zum Teilen der aktuellen Blöcke erstellt werden. Wann immer du dein Projekt mit anderen Teilen willst musst du nicht mehr eine XML Datei erstellen und verschicken sondern kannst einen Link erstellen, der direkt zu deinem Programm führt. Beachte, dass vor dem Teilen von Blöcken sämtliche sensiblen Daten, wie zum Beispiel Passwörter, Netzwerknamen, Lora oder openSenseMap Keys entfernt werden sollten. Die Links zum teilen von Programmen laufen nach 30 Tagen ab.
+
+![](https://radosgw.public.os.wwu.de/pad/uploads/upload_a8dba6720fe2fb39cadf129d9bb04a62.png)
+
+
+## Fehler
+
+Falls ihr Fehler findet legt bitte ein Issue in folgendem Repository an: https://github.com/sensebox/React-Ardublockly/issues
+

README.md

@@ -2,18 +2,18 @@
 
 # React Ardublockly
 
-This repository contains the source code and documentation of [sensebox-ardublockly](https://sensebox-ardublockly.netlify.app/) :rocket:.
+This repository contains the source code and documentation of [sensebox-ardublockly](https://sensebox-ardublockly.netlify.app/).
 
 This project was created with [Create React App](https://github.com/facebook/create-react-app) and represents the continuation or improvement of [blockly.sensebox.de](https://blockly.sensebox.de/ardublockly/?lang=de&board=sensebox-mcu).
 
 
 ## Getting Started
 
-1. [Download](https://github.com/sensebox/React-Ardublockly/archive/bachelor.zip) or clone the GitHub Repository ``git clone https://github.com/sensebox/React-Ardublockly`` and checkout to branch ``bachelor``.
+1. [Download](https://github.com/sensebox/React-Ardublockly/archive/master.zip) or clone the GitHub Repository ``git clone https://github.com/sensebox/React-Ardublockly`` and checkout to branch ``master``.
 
 2. install [Node.js v10.xx](https://nodejs.org/en/) on your local machine
 
-3. open shell and navigate inside folder ``React-Ardublockly`` or rather ``Quellcode``
+3. open shell and navigate inside folder ``React-Ardublockly``
     * run ``npm install``
     * run ``npm start``
 4. open  [localhost:3000](http://localhost:3000)
@@ -22,7 +22,4 @@ This project was created with [Create React App](https://github.com/facebook/cre
 Ensure that line 14 in [store.js](https://github.com/sensebox/React-Ardublockly/blob/master/src/store.js#L14) is commented out or otherwise you have installed [Redux DevTools Extension](http://extension.remotedev.io/).
 
 ## Demo
-A demo of the current status of the bachelor branch can be accessed via [sensebox-ardublockly.netlify.app](https://sensebox-ardublockly.netlify.app/) :rocket:.
-* [Home](https://sensebox-ardublockly.netlify.app/)
-* [Tutorial Overview](https://sensebox-ardublockly.netlify.app/tutorial)
-* [Tutorial-Builder](https://sensebox-ardublockly.netlify.app/tutorial/builder)
+A demo of the current status of the master branch can be accessed via [https://blockly-react.netlify.app/](https://blockly-react.netlify.app/) :rocket:.

package.json

@@ -1,32 +1,64 @@
 {
   "name": "blockly-react",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@blockly/block-plus-minus": "^2.0.10",
-    "@blockly/field-slider": "^2.1.1",
-    "@blockly/plugin-typed-variable-modal": "^3.1.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/react-fontawesome": "^0.1.11",
-    "@material-ui/core": "^4.11.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@blockly/block-plus-minus": "^4.0.4",
+    "@blockly/field-grid-dropdown": "^2.0.4",
+    "@blockly/field-slider": "4.0.4",
+    "@blockly/plugin-scroll-options": "^3.0.5",
+    "@blockly/plugin-typed-variable-modal": "^5.0.6",
+    "@blockly/workspace-backpack": "^3.0.4",
+    "@blockly/zoom-to-fit": "^3.0.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@monaco-editor/react": "^4.3.1",
+    "@mui/lab": "^5.0.0-alpha.110",
+    "@mui/material": "^5.10.16",
+    "@mui/styles": "^5.10.16",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",
-    "blockly": "^3.20200924.0",
-    "file-saver": "^2.0.2",
-    "moment": "^2.28.0",
-    "prismjs": "^1.20.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "axios": "^0.22.0",
+    "blockly": "^9.2.0",
+    "file-saver": "^2.0.5",
+    "markdown-it": "^12.3.2",
+    "mnemonic-id": "^3.2.7",
+    "moment": "^2.29.4",
+    "prismjs": "^1.27.0",
+    "qrcode.react": "^3.1.0",
+    "react": "^17.0.2",
+    "react-cookie-consent": "^7.2.1",
+    "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.0",
+    "react-markdown-editor-lite": "^1.3.3",
+    "react-mde": "^11.5.0",
+    "react-rating-stars-component": "^2.2.0",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^5.3.3",
+    "react-scripts": "^5.0.1",
+    "react-share": "^4.4.0",
+    "react-spinners": "^0.13.3",
+    "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",
+    "uuid": "^8.3.1",
+    "watchpack": "^2.3.1"
+  },
+  "resolutions": {
+    "//": "See https://github.com/facebook/create-react-app/issues/11773",
+    "react-error-overlay": "6.0.9"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "node_modules/react-scripts/bin/react-scripts.js start",
+    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -34,16 +66,9 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
 }

public/index.html

@@ -24,6 +24,13 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- Matomo Image Tracker-->
+    <img
+      src="https://piwik.sensebox.kaufen/matomo.php?idsite=9&amp;rec=1"
+      style="border: 0; display: none"
+      alt=""
+    />
+    <!-- End Matomo -->
     <div id="root"></div>
     <!--
       This HTML file is a template.

src/App.css

@@ -1,7 +1,74 @@
 .wrapper {
-  min-height: calc(100vh - 60px); /* will cover the 100% of viewport - height of footer (padding-bottom) */
+  min-height: calc(
+    100vh - 60px
+  ); /* will cover the 100% of viewport - height of footer (padding-bottom) */
   overflow: hidden;
   display: block;
   position: relative;
   padding-bottom: 60px; /* height of your footer + 30px*/
 }
+
+.tutorial img {
+  display: flex;
+  align-items: center;
+  max-height: 40vh;
+  max-width: 100%;
+  margin: auto;
+}
+
+.news img {
+  display: flex;
+  align-items: center;
+  max-height: 40vh;
+  max-width: 100%;
+  margin: auto;
+}
+
+.tutorial blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid#4EAF47;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+blockquote:before {
+  color: #4eaf47;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote p {
+  display: inline;
+}
+
+.tutorial table,
+th,
+td {
+  border: 1px solid #ddd;
+}
+
+.tutorial th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  border-color: #4eaf47;
+  color: white;
+}
+
+.overlay {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:root {
+  --url: url('./data/mcu_opacity.png');
+}
+
+.blocklySvg {
+  background-image: var(--url);
+  background-position: center;
+  background-repeat: no-repeat;
+}

src/App.js

@@ -1,48 +1,52 @@
-import React from 'react';
+import React, { Component } from "react";
 
-import { BrowserRouter as Router } from 'react-router-dom';
+import { Router } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
-import { Provider } from 'react-redux';
-import store from './store';
+import { Provider } from "react-redux";
+import store from "./store";
+import { loadUser } from "./actions/authActions";
 
-import './App.css';
+import "./App.css";
 
-import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider, createTheme } from "@mui/material/styles";
 
-import Navbar from './components/Navbar';
-import Footer from './components/Footer';
-import Routes from './components/Routes';
+import Content from "./components/Content";
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
-      main: '#4EAF47',
-      contrastText: '#ffffff'
+      main: "#4EAF47",
+      contrastText: "#ffffff",
     },
     secondary: {
-      main: '#DDDDDD'
-    }
-  }
+      main: "#DDDDDD",
+    },
+    button: {
+      compile: "#e27136",
+    },
+  },
 });
 
-const customHistory = createBrowserHistory();
+class App extends Component {
+  componentDidMount() {
+    store.dispatch(loadUser());
+  }
 
-
-function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Provider store={store}>
-        <Router history={customHistory}>
-          <div className="wrapper">
-            <Navbar />
-            <Routes />
-            <Footer />
-          </div>
-        </Router>
-      </Provider>
-    </ThemeProvider>
-  );
+  render() {
+    const customHistory = createBrowserHistory();
+    return (
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Provider store={store}>
+            <Router history={customHistory}>
+              <Content />
+            </Router>
+          </Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
+  }
 }
 
 export default App;

src/actions/authActions.js

@@ -0,0 +1,251 @@
+import {
+  GET_STATUS,
+  USER_LOADED,
+  USER_LOADING,
+  AUTH_ERROR,
+  LOGIN_SUCCESS,
+  LOGIN_FAIL,
+  LOGOUT_SUCCESS,
+  LOGOUT_FAIL,
+  REFRESH_TOKEN_SUCCESS,
+} from "../actions/types";
+
+import axios from "axios";
+import { returnErrors, returnSuccess } from "./messageActions";
+import { setLanguage } from "./generalActions";
+
+// Check token & load user
+export const loadUser = () => (dispatch) => {
+  // user loading
+  dispatch({
+    type: USER_LOADING,
+  });
+  const config = {
+    success: (res) => {
+      dispatch({
+        type: GET_STATUS,
+        payload: res.data.user.status,
+      });
+      dispatch(setLanguage(res.data.user.language));
+      dispatch({
+        type: USER_LOADED,
+        payload: res.data.user,
+      });
+    },
+    error: (err) => {
+      if (err.response) {
+        dispatch(returnErrors(err.response.data.message, err.response.status));
+      }
+      var status = [];
+      if (window.localStorage.getItem("status")) {
+        status = JSON.parse(window.localStorage.getItem("status"));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status,
+      });
+      dispatch({
+        type: AUTH_ERROR,
+      });
+    },
+  };
+  axios
+    .get(
+      `${process.env.REACT_APP_BLOCKLY_API}/user`,
+      config,
+      dispatch(authInterceptor())
+    )
+    .then((res) => {
+      res.config.success(res);
+    })
+    .catch((err) => {
+      err.config.error(err);
+    });
+};
+
+// Login user
+export const login =
+  ({ email, password }) =>
+    (dispatch) => {
+      dispatch({
+        type: USER_LOADING,
+      });
+      // Headers
+      const config = {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      };
+      // Request Body
+      const body = JSON.stringify({ email, password });
+      axios
+        .post(`${process.env.REACT_APP_BLOCKLY_API}/user`, body, config)
+        .then((res) => {
+          dispatch(setLanguage(res.data.user.language));
+          dispatch({
+            type: LOGIN_SUCCESS,
+            payload: res.data,
+          });
+          dispatch({
+            type: GET_STATUS,
+            payload: res.data.user.status,
+          });
+          dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
+        })
+        .catch((err) => {
+          dispatch(
+            returnErrors(
+              err.response.data.message,
+              err.response.status,
+              "LOGIN_FAIL"
+            )
+          );
+          dispatch({
+            type: LOGIN_FAIL,
+          });
+          var status = [];
+          if (window.localStorage.getItem("status")) {
+            status = JSON.parse(window.localStorage.getItem("status"));
+          }
+          dispatch({
+            type: GET_STATUS,
+            payload: status,
+          });
+        });
+    };
+
+// Logout User
+export const logout = () => (dispatch) => {
+  const config = {
+    success: (res) => {
+      dispatch({
+        type: LOGOUT_SUCCESS,
+      });
+      var status = [];
+      if (window.localStorage.getItem("status")) {
+        status = JSON.parse(window.localStorage.getItem("status"));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status,
+      });
+      var locale = "en_US";
+      if (window.localStorage.getItem("locale")) {
+        locale = window.localStorage.getItem("locale");
+      } else if (navigator.language === "de-DE") {
+        locale = "de_DE";
+      }
+      dispatch(setLanguage(locale));
+      dispatch(returnSuccess(res.data.message, res.status, "LOGOUT_SUCCESS"));
+    },
+    error: (err) => {
+      dispatch(
+        returnErrors(
+          err.response.data.message,
+          err.response.status,
+          "LOGOUT_FAIL"
+        )
+      );
+      dispatch({
+        type: LOGOUT_FAIL,
+      });
+      var status = [];
+      if (window.localStorage.getItem("status")) {
+        status = JSON.parse(window.localStorage.getItem("status"));
+      }
+      dispatch({
+        type: GET_STATUS,
+        payload: status,
+      });
+    },
+  };
+  axios
+    .post("https://api.opensensemap.org/users/sign-out", {}, config)
+    .then((res) => {
+      res.config.success(res);
+    })
+    .catch((err) => {
+      if (err.response && err.response.status !== 401) {
+        err.config.error(err);
+      }
+    });
+};
+
+export const authInterceptor = () => (dispatch, getState) => {
+  // Add a request interceptor
+  axios.interceptors.request.use(
+    (config) => {
+      config.headers["Content-Type"] = "application/json";
+      const token = getState().auth.token;
+      if (token) {
+        config.headers["Authorization"] = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => {
+      Promise.reject(error);
+    }
+  );
+
+  // Add a response interceptor
+  axios.interceptors.response.use(
+    (response) => {
+      // request was successfull
+      return response;
+    },
+    (error) => {
+      const originalRequest = error.config;
+      const refreshToken = getState().auth.refreshToken;
+      if (refreshToken) {
+        // try to refresh the token failed
+        if (error.response.status === 401 && originalRequest._retry) {
+          // router.push('/login');
+          return Promise.reject(error);
+        }
+        // token was not valid and 1st try to refresh the token
+        if (error.response.status === 401 && !originalRequest._retry) {
+          originalRequest._retry = true;
+          const refreshToken = getState().auth.refreshToken;
+          // request to refresh the token, in request-body is the refreshToken
+          axios
+            .post("https://api.opensensemap.org/users/refresh-auth", {
+              token: refreshToken,
+            })
+            .then((res) => {
+              if (res.status === 200) {
+                dispatch({
+                  type: REFRESH_TOKEN_SUCCESS,
+                  payload: res.data,
+                });
+                axios.defaults.headers.common["Authorization"] =
+                  "Bearer " + getState().auth.token;
+                // request was successfull, new request with the old parameters and the refreshed token
+                return axios(originalRequest)
+                  .then((res) => {
+                    originalRequest.success(res);
+                  })
+                  .catch((err) => {
+                    originalRequest.error(err);
+                  });
+              }
+              return Promise.reject(error);
+            })
+            .catch((err) => {
+              // request failed, token could not be refreshed
+              if (err.response) {
+                dispatch(
+                  returnErrors(err.response.data.message, err.response.status)
+                );
+              }
+              dispatch({
+                type: AUTH_ERROR,
+              });
+              return Promise.reject(error);
+            });
+        }
+      }
+      // request status was unequal to 401, no possibility to refresh the token
+      return Promise.reject(error);
+    }
+  );
+};

src/actions/boardAction.js

@@ -0,0 +1,15 @@
+import {
+  BOARD,
+} from "./types";
+import mini_opacity from "../data/mini_opacity.png"
+import mcu_opacity from "../data/mcu_opacity.png"
+
+export const setBoard = (board) => (dispatch) => {
+  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/generalActions.js

@@ -1,8 +1,52 @@
-import { VISIT } from './types';
-
+import {
+  VISIT,
+  LANGUAGE,
+  RENDERER,
+  SOUNDS,
+  STATISTICS,
+  PLATFORM,
+} from "./types";
 
 export const visitPage = () => (dispatch) => {
   dispatch({
-    type: VISIT
+    type: VISIT,
+  });
+};
+
+export const setPlatform = (platform) => (dispatch) => {
+  dispatch({
+    type: PLATFORM,
+    payload: platform,
+  });
+};
+
+export const setLanguage = (language) => (dispatch, getState) => {
+  if (!getState().auth.progress && !getState().auth.isAuthenticated) {
+    window.localStorage.setItem("locale", language);
+  }
+  dispatch({
+    type: LANGUAGE,
+    payload: language,
+  });
+};
+
+export const setRenderer = (renderer) => (dispatch) => {
+  dispatch({
+    type: RENDERER,
+    payload: renderer,
+  });
+};
+
+export const setSounds = (sounds) => (dispatch) => {
+  dispatch({
+    type: SOUNDS,
+    payload: sounds,
+  });
+};
+
+export const setStatistics = (showStatistics) => (dispatch) => {
+  dispatch({
+    type: STATISTICS,
+    payload: showStatistics,
   });
 };

src/actions/messageActions.js

@@ -0,0 +1,32 @@
+import { GET_ERRORS, CLEAR_MESSAGES, GET_SUCCESS } from './types';
+
+// RETURN Errors
+export const returnErrors = (msg, status, id = null) => {
+  return {
+    type: GET_ERRORS,
+    payload: {
+      msg: msg,
+      status: status,
+      id: id
+    }
+  };
+};
+
+// RETURN Success
+export const returnSuccess = (msg, status, id = null) => {
+  return {
+    type: GET_SUCCESS,
+    payload: {
+      msg: msg,
+      status: status,
+      id: id
+    }
+  };
+};
+
+// CLEAR_MESSAGES
+export const clearMessages = () => {
+  return {
+    type: CLEAR_MESSAGES
+  };
+};

src/actions/projectActions.js

@@ -0,0 +1,204 @@
+import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';
+
+import axios from 'axios';
+import { returnErrors, returnSuccess } from './messageActions';
+
+export const setType = (type) => (dispatch) => {
+  dispatch({
+    type: PROJECT_TYPE,
+    payload: type
+  });
+};
+
+export const setDescription = (description) => (dispatch) => {
+  dispatch({
+    type: PROJECT_DESCRIPTION,
+    payload: description
+  });
+};
+
+export const getProject = (type, id) => (dispatch) => {
+  dispatch({ type: PROJECT_PROGRESS });
+  dispatch(setType(type));
+  const config = {
+    success: res => {
+      var data = type === 'share' ? 'content' : type;
+      var project = res.data[data];
+      if (project) {
+        dispatch({
+          type: GET_PROJECT,
+          payload: project
+        });
+        dispatch({
+          type: PROJECT_DESCRIPTION,
+          payload: project.description
+        });
+        dispatch({ type: PROJECT_PROGRESS });
+        dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS'));
+      }
+      else {
+        dispatch({ type: PROJECT_PROGRESS });
+        dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY'));
+      }
+    },
+    error: err => {
+      if (err.response) {
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECT_FAIL'));
+      }
+      dispatch({ type: PROJECT_PROGRESS });
+    }
+  };
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
+    });
+};
+
+export const getProjects = (type) => (dispatch) => {
+  dispatch({ type: PROJECT_PROGRESS });
+  const config = {
+    success: res => {
+      var data = type === 'project' ? 'projects' : 'galleries';
+      var projects = res.data[data];
+      dispatch({
+        type: GET_PROJECTS,
+        payload: projects
+      });
+      dispatch({ type: PROJECT_PROGRESS });
+      dispatch(returnSuccess(res.data.message, res.status));
+    },
+    error: err => {
+      if (err.response) {
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL'));
+      }
+      dispatch({ type: PROJECT_PROGRESS });
+    }
+  };
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
+    });
+};
+
+export const updateProject = (type, id) => (dispatch, getState) => {
+  var workspace = getState().workspace;
+  var body = {
+    xml: workspace.code.xml,
+    title: workspace.name
+  };
+  var project = getState().project;
+  if (type === 'gallery') {
+    body.description = project.description;
+  }
+  const config = {
+    success: res => {
+      var project = res.data[type];
+      var projects = getState().project.projects;
+      var index = projects.findIndex(res => res._id === project._id);
+      projects[index] = project;
+      dispatch({
+        type: GET_PROJECTS,
+        payload: projects
+      });
+      if (type === 'project') {
+        dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
+      } else {
+        dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
+      }
+    },
+    error: err => {
+      if (err.response) {
+        if (type === 'project') {
+          dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL'));
+        } else {
+          dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL'));
+        }
+      }
+    }
+  };
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      err.config.error(err);
+    });
+};
+
+export const deleteProject = (type, id) => (dispatch, getState) => {
+  const config = {
+    success: res => {
+      var projects = getState().project.projects;
+      var index = projects.findIndex(res => res._id === id);
+      projects.splice(index, 1)
+      dispatch({
+        type: GET_PROJECTS,
+        payload: projects
+      });
+      if (type === 'project') {
+        dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_DELETE_SUCCESS'));
+      } else {
+        dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS'));
+      }
+    },
+    error: err => {
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL'));
+    }
+  };
+  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config)
+    .then(res => {
+      res.config.success(res);
+    })
+    .catch(err => {
+      if (err.response && err.response.status !== 401) {
+        err.config.error(err);
+      }
+    });
+};
+
+
+export const shareProject = (title, type, id) => (dispatch, getState) => {
+  var body = {
+    title: title
+  };
+  if (type === 'project') {
+    body.projectId = id;
+  } else {
+    body.xml = getState().workspace.code.xml;
+  }
+  axios.post(`${process.env.REACT_APP_BLOCKLY_API}/share`, body)
+    .then(res => {
+      var shareContent = res.data.content;
+      if (body.projectId) {
+        var projects = getState().project.projects;
+        var index = projects.findIndex(res => res._id === id);
+        projects[index].shared = shareContent.expiresAt;
+        dispatch({
+          type: GET_PROJECTS,
+          payload: projects
+        });
+      }
+      dispatch(returnSuccess(res.data.message, shareContent._id, 'SHARE_SUCCESS'));
+    })
+    .catch(err => {
+      if (err.response) {
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'SHARE_FAIL'));
+      }
+    });
+};
+
+
+export const resetProject = () => (dispatch) => {
+  dispatch({
+    type: GET_PROJECTS,
+    payload: []
+  });
+  dispatch(setType(''));
+  dispatch(setDescription(''));
+};

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/tutorialActions.js

@@ -1,61 +1,345 @@
-import { TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types';
+import {
+  TUTORIAL_PROGRESS,
+  GET_TUTORIAL,
+  GET_TUTORIALS,
+  TUTORIAL_SUCCESS,
+  TUTORIAL_ERROR,
+  TUTORIAL_CHANGE,
+  TUTORIAL_XML,
+  TUTORIAL_STEP,
+} from "./types";
 
-import tutorials from '../data/tutorials';
+import axios from "axios";
+import { returnErrors, returnSuccess } from "./messageActions";
+
+export const tutorialProgress = () => (dispatch) => {
+  dispatch({ type: TUTORIAL_PROGRESS });
+};
+
+export const getTutorial = (id) => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
+    .then((res) => {
+      var tutorial = res.data.tutorial;
+      existingTutorial(tutorial, getState().tutorial.status).then((status) => {
+        dispatch({
+          type: TUTORIAL_SUCCESS,
+          payload: status,
+        });
+        dispatch(updateStatus(status));
+        dispatch({
+          type: GET_TUTORIAL,
+          payload: tutorial,
+        });
+        dispatch({ type: TUTORIAL_PROGRESS });
+        dispatch(returnSuccess(res.data.message, res.status));
+      });
+    })
+    .catch((err) => {
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "GET_TUTORIAL_FAIL"
+          )
+        );
+      }
+      dispatch({ type: TUTORIAL_PROGRESS });
+    });
+};
+
+export const getTutorials = () => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
+    .then((res) => {
+      var tutorials = res.data.tutorials;
+      existingTutorials(tutorials, getState().tutorial.status).then(
+        (status) => {
+          dispatch({
+            type: TUTORIAL_SUCCESS,
+            payload: status,
+          });
+          dispatch(updateStatus(status));
+          dispatch({
+            type: GET_TUTORIALS,
+            payload: tutorials,
+          });
+          dispatch({ type: TUTORIAL_PROGRESS });
+          dispatch(returnSuccess(res.data.message, res.status));
+        }
+      );
+    })
+    .catch((err) => {
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "GET_TUTORIALS_FAIL"
+          )
+        );
+      }
+      dispatch({ type: TUTORIAL_PROGRESS });
+    });
+};
+
+export const getAllTutorials = () => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/getAllTutorials`)
+    .then((res) => {
+      var tutorials = res.data.tutorials;
+      existingTutorials(tutorials, getState().tutorial.status).then(
+        (status) => {
+          dispatch({
+            type: TUTORIAL_SUCCESS,
+            payload: status,
+          });
+          dispatch(updateStatus(status));
+          dispatch({
+            type: GET_TUTORIALS,
+            payload: tutorials,
+          });
+          dispatch({ type: TUTORIAL_PROGRESS });
+          dispatch(returnSuccess(res.data.message, res.status));
+        }
+      );
+    })
+    .catch((err) => {
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "GET_TUTORIALS_FAIL"
+          )
+        );
+      }
+      dispatch({ type: TUTORIAL_PROGRESS });
+    });
+};
+
+export const getUserTutorials = () => (dispatch, getState) => {
+  axios
+    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/getUserTutorials`)
+    .then((res) => {
+      var tutorials = res.data.tutorials;
+      existingTutorials(tutorials, getState().tutorial.status).then(
+        (status) => {
+          dispatch({
+            type: TUTORIAL_SUCCESS,
+            payload: status,
+          });
+          dispatch(updateStatus(status));
+          dispatch({
+            type: GET_TUTORIALS,
+            payload: tutorials,
+          });
+          dispatch({ type: TUTORIAL_PROGRESS });
+          dispatch(returnSuccess(res.data.message, res.status));
+        }
+      );
+    })
+    .catch((err) => {
+      console.log(err);
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "GET_TUTORIALS_FAIL"
+          )
+        );
+      }
+      dispatch({ type: TUTORIAL_PROGRESS });
+    });
+};
+
+export const updateStatus = (status) => (dispatch, getState) => {
+  if (getState().auth.isAuthenticated) {
+    // update user account in database - sync with redux store
+    axios
+      .put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {
+        status: status,
+      })
+      .then((res) => {})
+      .catch((err) => {
+        if (err.response) {
+          // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL'));
+        }
+      });
+  } else {
+    // update locale storage - sync with redux store
+    window.localStorage.setItem("status", JSON.stringify(status));
+  }
+};
+
+export const deleteTutorial = (id) => (dispatch, getState) => {
+  var tutorial = getState().tutorial;
+  var id = getState().builder.id;
+  const config = {
+    success: (res) => {
+      var tutorials = tutorial.tutorials;
+      var index = tutorials.findIndex((res) => res._id === id);
+      tutorials.splice(index, 1);
+      dispatch({
+        type: GET_TUTORIALS,
+        payload: tutorials,
+      });
+      dispatch(
+        returnSuccess(res.data.message, res.status, "TUTORIAL_DELETE_SUCCESS")
+      );
+    },
+    error: (err) => {
+      dispatch(
+        returnErrors(
+          err.response.data.message,
+          err.response.status,
+          "TUTORIAL_DELETE_FAIL"
+        )
+      );
+    },
+  };
+  axios
+    .delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
+    .then((res) => {
+      res.config.success(res);
+    })
+    .catch((err) => {
+      if (err.response && err.response.status !== 401) {
+        err.config.error(err);
+      }
+    });
+};
+
+export const resetTutorial = () => (dispatch) => {
+  dispatch({
+    type: GET_TUTORIALS,
+    payload: [],
+  });
+  dispatch({
+    type: TUTORIAL_STEP,
+    payload: 0,
+  });
+};
 
 export const tutorialChange = () => (dispatch) => {
   dispatch({
-    type: TUTORIAL_CHANGE
+    type: TUTORIAL_CHANGE,
   });
 };
 
 export const tutorialCheck = (status, step) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
-  var id = getState().tutorial.currentId;
-  var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
-  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === step.id);
+  var id = getState().tutorial.tutorials[0]._id;
+  var tutorialsStatusIndex = tutorialsStatus.findIndex(
+    (tutorialStatus) => tutorialStatus._id === id
+  );
+  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
+    (task) => task._id === step._id
+  );
   tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
     ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-    type: status
+    type: status,
   };
   dispatch({
-    type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
-    payload: tutorialsStatus
+    type: status === "success" ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
+    payload: tutorialsStatus,
   });
+  dispatch(updateStatus(tutorialsStatus));
   dispatch(tutorialChange());
+  dispatch(returnSuccess("", "", "TUTORIAL_CHECK_SUCCESS"));
 };
 
 export const storeTutorialXml = (code) => (dispatch, getState) => {
-  var id = getState().tutorial.currentId;
-  if (id !== null) {
+  var tutorial = getState().tutorial.tutorials[0];
+  if (tutorial) {
+    var id = tutorial._id;
     var activeStep = getState().tutorial.activeStep;
-    var steps = tutorials.filter(tutorial => tutorial.id === id)[0].steps;
-    if (steps[activeStep].type === 'task') {
+    var steps = tutorial.steps;
+    if (steps && steps[activeStep].type === "task") {
       var tutorialsStatus = getState().tutorial.status;
-      var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
-      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === steps[activeStep].id);
+      var tutorialsStatusIndex = tutorialsStatus.findIndex(
+        (tutorialStatus) => tutorialStatus._id === id
+      );
+      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
+        (task) => task._id === steps[activeStep]._id
+      );
       tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
         ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-        xml: code
+        xml: code,
       };
       dispatch({
         type: TUTORIAL_XML,
-        payload: tutorialsStatus
+        payload: tutorialsStatus,
       });
+      dispatch(updateStatus(tutorialsStatus));
     }
   }
 };
 
-
-export const tutorialId = (id) => (dispatch) => {
-  dispatch({
-    type: TUTORIAL_ID,
-    payload: id
-  });
-};
-
 export const tutorialStep = (step) => (dispatch) => {
   dispatch({
     type: TUTORIAL_STEP,
-    payload: step
+    payload: step,
   });
 };
+
+const existingTutorials = (tutorials, status) =>
+  new Promise(function (resolve, reject) {
+    var newstatus;
+    new Promise(function (resolve, reject) {
+      var existingTutorialIds = tutorials.map((tutorial, i) => {
+        existingTutorial(tutorial, status).then((status) => {
+          newstatus = status;
+        });
+        return tutorial._id;
+      });
+      resolve(existingTutorialIds);
+    }).then((existingTutorialIds) => {
+      // deleting old tutorials which do not longer exist
+      if (existingTutorialIds.length > 0) {
+        status = newstatus.filter(
+          (status) => existingTutorialIds.indexOf(status._id) > -1
+        );
+      }
+      resolve(status);
+    });
+  });
+
+const existingTutorial = (tutorial, status) =>
+  new Promise(function (resolve, reject) {
+    var tutorialsId = tutorial._id;
+    var statusIndex = status.findIndex((status) => status._id === tutorialsId);
+    if (statusIndex > -1) {
+      var tasks = tutorial.steps.filter((step) => step.type === "task");
+      var existingTaskIds = tasks.map((task, j) => {
+        var tasksId = task._id;
+        if (
+          status[statusIndex].tasks.findIndex(
+            (task) => task._id === tasksId
+          ) === -1
+        ) {
+          // task does not exist
+          status[statusIndex].tasks.push({ _id: tasksId });
+        }
+        return tasksId;
+      });
+      // deleting old tasks which do not longer exist
+      if (existingTaskIds.length > 0) {
+        status[statusIndex].tasks = status[statusIndex].tasks.filter(
+          (task) => existingTaskIds.indexOf(task._id) > -1
+        );
+      }
+    } else {
+      status.push({
+        _id: tutorialsId,
+        tasks: tutorial.steps
+          .filter((step) => step.type === "task")
+          .map((task) => {
+            return { _id: task._id };
+          }),
+      });
+    }
+    resolve(status);
+  });

src/actions/tutorialBuilderActions.js

@@ -1,24 +1,63 @@
-import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP, BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from './types';
+import {
+  PROGRESS,
+  JSON_STRING,
+  BUILDER_CHANGE,
+  BUILDER_ERROR,
+  BUILDER_TITLE,
+  BUILDER_PUBLIC,
+  BUILDER_DIFFICULTY,
+  BUILDER_REVIEW,
+  BUILDER_ID,
+  BUILDER_ADD_STEP,
+  BUILDER_DELETE_STEP,
+  BUILDER_CHANGE_STEP,
+  BUILDER_CHANGE_ORDER,
+  BUILDER_DELETE_PROPERTY,
+} from "./types";
 
-import data from '../data/hardware.json';
+import data from "../data/hardware.json";
 
 export const changeTutorialBuilder = () => (dispatch) => {
   dispatch({
-    type: BUILDER_CHANGE
+    type: BUILDER_CHANGE,
   });
 };
 
 export const jsonString = (json) => (dispatch) => {
   dispatch({
     type: JSON_STRING,
-    payload: json
+    payload: json,
   });
 };
 
 export const tutorialTitle = (title) => (dispatch) => {
   dispatch({
     type: BUILDER_TITLE,
-    payload: title
+    payload: title,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialPublic = (pub) => (dispatch) => {
+  dispatch({
+    type: BUILDER_PUBLIC,
+    payload: pub,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialDifficulty = (difficulty) => (dispatch) => {
+  dispatch({
+    type: BUILDER_DIFFICULTY,
+    payload: difficulty,
+  });
+  dispatch(changeTutorialBuilder());
+};
+
+export const tutorialReview = (review) => (dispatch) => {
+  dispatch({
+    type: BUILDER_REVIEW,
+    payload: review,
   });
   dispatch(changeTutorialBuilder());
 };
@@ -26,7 +65,7 @@ export const tutorialTitle = (title) => (dispatch) => {
 export const tutorialSteps = (steps) => (dispatch) => {
   dispatch({
     type: BUILDER_ADD_STEP,
-    payload: steps
+    payload: steps,
   });
   dispatch(changeTutorialBuilder());
 };
@@ -34,7 +73,7 @@ export const tutorialSteps = (steps) => (dispatch) => {
 export const tutorialId = (id) => (dispatch) => {
   dispatch({
     type: BUILDER_ID,
-    payload: id
+    payload: id,
   });
   dispatch(changeTutorialBuilder());
 };
@@ -43,14 +82,14 @@ export const addStep = (index) => (dispatch, getState) => {
   var steps = getState().builder.steps;
   var step = {
     id: index + 1,
-    type: 'instruction',
-    headline: '',
-    text: ''
+    type: "instruction",
+    headline: "",
+    text: "",
   };
   steps.splice(index, 0, step);
   dispatch({
     type: BUILDER_ADD_STEP,
-    payload: steps
+    payload: steps,
   });
   dispatch(addErrorStep(index));
   dispatch(changeTutorialBuilder());
@@ -61,7 +100,7 @@ export const addErrorStep = (index) => (dispatch, getState) => {
   error.steps.splice(index, 0, {});
   dispatch({
     type: BUILDER_ERROR,
-    payload: error
+    payload: error,
   });
 };
 
@@ -70,7 +109,7 @@ export const removeStep = (index) => (dispatch, getState) => {
   steps.splice(index, 1);
   dispatch({
     type: BUILDER_DELETE_STEP,
-    payload: steps
+    payload: steps,
   });
   dispatch(removeErrorStep(index));
   dispatch(changeTutorialBuilder());
@@ -81,45 +120,47 @@ export const removeErrorStep = (index) => (dispatch, getState) => {
   error.steps.splice(index, 1);
   dispatch({
     type: BUILDER_ERROR,
-    payload: error
+    payload: error,
   });
 };
 
-export const changeContent = (content, index, property1, property2) => (dispatch, getState) => {
-  var steps = getState().builder.steps;
-  var step = steps[index];
-  if (property2) {
-    if (step[property1] && step[property1][property2]) {
-      step[property1][property2] = content;
+export const changeContent =
+  (content, index, property1, property2) => (dispatch, getState) => {
+    var steps = getState().builder.steps;
+    var step = steps[index];
+    if (property2) {
+      if (step[property1] && step[property1][property2]) {
+        step[property1][property2] = content;
+      } else {
+        step[property1] = { [property2]: content };
+      }
     } else {
-      step[property1] = { [property2]: content };
+      step[property1] = content;
     }
-  } else {
-    step[property1] = content;
-  }
-  dispatch({
-    type: BUILDER_CHANGE_STEP,
-    payload: steps
-  });
-  dispatch(changeTutorialBuilder());
-};
+    dispatch({
+      type: BUILDER_CHANGE_STEP,
+      payload: steps,
+    });
+    dispatch(changeTutorialBuilder());
+  };
 
-export const deleteProperty = (index, property1, property2) => (dispatch, getState) => {
-  var steps = getState().builder.steps;
-  var step = steps[index];
-  if (property2) {
-    if (step[property1] && step[property1][property2]) {
-      delete step[property1][property2];
+export const deleteProperty =
+  (index, property1, property2) => (dispatch, getState) => {
+    var steps = getState().builder.steps;
+    var step = steps[index];
+    if (property2) {
+      if (step[property1] && step[property1][property2]) {
+        delete step[property1][property2];
+      }
+    } else {
+      delete step[property1];
     }
-  } else {
-    delete step[property1];
-  }
-  dispatch({
-    type: BUILDER_DELETE_PROPERTY,
-    payload: steps
-  });
-  dispatch(changeTutorialBuilder());
-};
+    dispatch({
+      type: BUILDER_DELETE_PROPERTY,
+      payload: steps,
+    });
+    dispatch(changeTutorialBuilder());
+  };
 
 export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
   var steps = getState().builder.steps;
@@ -128,34 +169,34 @@ export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
   steps.splice(toIndex, 0, step);
   dispatch({
     type: BUILDER_CHANGE_ORDER,
-    payload: steps
+    payload: steps,
   });
   dispatch(changeErrorStepIndex(fromIndex, toIndex));
   dispatch(changeTutorialBuilder());
 };
 
-export const changeErrorStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
-  var error = getState().builder.error;
-  var errorStep = error.steps[fromIndex];
-  error.steps.splice(fromIndex, 1);
-  error.steps.splice(toIndex, 0, errorStep);
-  dispatch({
-    type: BUILDER_ERROR,
-    payload: error
-  });
-};
+export const changeErrorStepIndex =
+  (fromIndex, toIndex) => (dispatch, getState) => {
+    var error = getState().builder.error;
+    var errorStep = error.steps[fromIndex];
+    error.steps.splice(fromIndex, 1);
+    error.steps.splice(toIndex, 0, errorStep);
+    dispatch({
+      type: BUILDER_ERROR,
+      payload: error,
+    });
+  };
 
 export const setError = (index, property) => (dispatch, getState) => {
   var error = getState().builder.error;
   if (index !== undefined) {
     error.steps[index][property] = true;
-  }
-  else {
+  } else {
     error[property] = true;
   }
   dispatch({
     type: BUILDER_ERROR,
-    payload: error
+    payload: error,
   });
   dispatch(changeTutorialBuilder());
 };
@@ -164,13 +205,12 @@ export const deleteError = (index, property) => (dispatch, getState) => {
   var error = getState().builder.error;
   if (index !== undefined) {
     delete error.steps[index][property];
-  }
-  else {
+  } else {
     delete error[property];
   }
   dispatch({
     type: BUILDER_ERROR,
-    payload: error
+    payload: error,
   });
   dispatch(changeTutorialBuilder());
 };
@@ -180,8 +220,11 @@ export const setSubmitError = () => (dispatch, getState) => {
   // if(builder.id === undefined || builder.id === ''){
   //   dispatch(setError(undefined, 'id'));
   // }
-  if (builder.id === undefined || builder.title === '') {
-    dispatch(setError(undefined, 'title'));
+  if (builder.title === "") {
+    dispatch(setError(undefined, "title"));
+  }
+  if (builder.title === null) {
+    dispatch(setError(undefined, "title"));
   }
   var type = builder.steps.map((step, i) => {
     // media and xml are directly checked for errors in their components and
@@ -189,36 +232,43 @@ export const setSubmitError = () => (dispatch, getState) => {
     step.id = i + 1;
     if (i === 0) {
       if (step.requirements && step.requirements.length > 0) {
-        var requirements = step.requirements.filter(requirement => typeof (requirement) === 'number');
+        var requirements = step.requirements.filter((requirement) =>
+          /^[0-9a-fA-F]{24}$/.test(requirement)
+        );
         if (requirements.length < step.requirements.length) {
-          dispatch(changeContent(requirements, i, 'requirements'));
+          dispatch(changeContent(requirements, i, "requirements"));
         }
       }
       if (step.hardware === undefined || step.hardware.length < 1) {
-        dispatch(setError(i, 'hardware'));
-      }
-      else {
-        var hardwareIds = data.map(hardware => hardware.id);
-        var hardware = step.hardware.filter(hardware => hardwareIds.includes(hardware));
+        dispatch(setError(i, "hardware"));
+      } else {
+        var hardwareIds = data.map((hardware) => hardware.id);
+        var hardware = step.hardware.filter((hardware) =>
+          hardwareIds.includes(hardware)
+        );
         if (hardware.length < step.hardware.length) {
-          dispatch(changeContent(hardware, i, 'hardware'));
+          dispatch(changeContent(hardware, i, "hardware"));
         }
       }
     }
-    if (step.headline === undefined || step.headline === '') {
-      dispatch(setError(i, 'headline'));
+    if (step.headline === undefined || step.headline === "") {
+      dispatch(setError(i, "headline"));
     }
-    if (step.text === undefined || step.text === '') {
-      dispatch(setError(i, 'text'));
+    if (step.text === undefined || step.text === "") {
+      dispatch(setError(i, "text"));
     }
     return step.type;
   });
-  if (!(type.filter(item => item === 'task').length > 0 && type.filter(item => item === 'instruction').length > 0)) {
-    dispatch(setError(undefined, 'type'));
+  if (
+    !(
+      type.filter((item) => item === "task").length > 0 &&
+      type.filter((item) => item === "instruction").length > 0
+    )
+  ) {
+    dispatch(setError(undefined, "type"));
   }
 };
 
-
 export const checkError = () => (dispatch, getState) => {
   dispatch(setSubmitError());
   var error = getState().builder.error;
@@ -227,39 +277,37 @@ export const checkError = () => (dispatch, getState) => {
   }
   for (var i = 0; i < error.steps.length; i++) {
     if (Object.keys(error.steps[i]).length > 0) {
-      return true
+      return true;
     }
   }
   return false;
-}
+};
 
 export const progress = (inProgress) => (dispatch) => {
   dispatch({
     type: PROGRESS,
-    payload: inProgress
-  })
+    payload: inProgress,
+  });
 };
 
 export const resetTutorial = () => (dispatch, getState) => {
-  dispatch(jsonString(''));
-  dispatch(tutorialTitle(''));
-  dispatch(tutorialId(''));
+  dispatch(jsonString(""));
+  dispatch(tutorialTitle(""));
   var steps = [
     {
-      id: 1,
-      type: 'instruction',
-      headline: '',
-      text: '',
+      type: "instruction",
+      headline: "",
+      text: "",
       hardware: [],
-      requirements: []
-    }
+      requirements: [],
+    },
   ];
   dispatch(tutorialSteps(steps));
   dispatch({
     type: BUILDER_ERROR,
     payload: {
-      steps: [{}]
-    }
+      steps: [{}],
+    },
   });
 };
 
@@ -268,16 +316,18 @@ export const readJSON = (json) => (dispatch, getState) => {
   dispatch({
     type: BUILDER_ERROR,
     payload: {
-      steps: json.steps.map(() => { return {}; })
-    }
+      steps: json.steps.map(() => {
+        return {};
+      }),
+    },
   });
   // accept only valid attributes
   var steps = json.steps.map((step, i) => {
     var object = {
-      id: step.id,
+      _id: step._id,
       type: step.type,
       headline: step.headline,
-      text: step.text
+      text: step.text,
     };
     if (i === 0) {
       object.hardware = step.hardware;
@@ -286,19 +336,18 @@ export const readJSON = (json) => (dispatch, getState) => {
     if (step.xml) {
       object.xml = step.xml;
     }
-    if (step.media && step.type === 'instruction') {
+    if (step.media && step.type === "instruction") {
       object.media = {};
       if (step.media.picture) {
         object.media.picture = step.media.picture;
-      }
-      else if (step.media.youtube) {
+      } else if (step.media.youtube) {
         object.media.youtube = step.media.youtube;
       }
     }
     return object;
   });
   dispatch(tutorialTitle(json.title));
-  dispatch(tutorialId(json.id));
+  dispatch(tutorialDifficulty(json.difficulty));
   dispatch(tutorialSteps(steps));
   dispatch(setSubmitError());
   dispatch(progress(false));

src/actions/types.js

@@ -1,32 +1,68 @@
-export const NEW_CODE = 'NEW_CODE';
-export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE';
-export const CREATE_BLOCK = 'CREATE_BLOCK';
-export const MOVE_BLOCK = 'MOVE_BLOCK';
-export const CHANGE_BLOCK = 'CHANGE_BLOCK';
-export const DELETE_BLOCK = 'DELETE_BLOCK';
-export const CLEAR_STATS = 'CLEAR_STATS';
-export const NAME = 'NAME';
+// authentication
+export const USER_LOADING = "USER_LOADING";
+export const USER_LOADED = "USER_LOADED";
+export const AUTH_ERROR = "AUTH_ERROR";
+export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
+export const LOGIN_FAIL = "LOGIN_FAIL";
+export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
+export const LOGOUT_FAIL = "LOGOUT_FAIL";
+export const REFRESH_TOKEN_FAIL = "REFRESH_TOKEN_FAIL";
+export const REFRESH_TOKEN_SUCCESS = "REFRESH_TOKEN_SUCCESS";
 
+export const NEW_CODE = "NEW_CODE";
+export const CHANGE_WORKSPACE = "CHANGE_WORKSPACE";
+export const CREATE_BLOCK = "CREATE_BLOCK";
+export const MOVE_BLOCK = "MOVE_BLOCK";
+export const CHANGE_BLOCK = "CHANGE_BLOCK";
+export const DELETE_BLOCK = "DELETE_BLOCK";
+export const CLEAR_STATS = "CLEAR_STATS";
+export const NAME = "NAME";
 
-export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS';
-export const TUTORIAL_ERROR = 'TUTORIAL_ERROR';
-export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE';
-export const TUTORIAL_XML = 'TUTORIAL_XML';
-export const TUTORIAL_ID = 'TUTORIAL_ID';
-export const TUTORIAL_STEP = 'TUTORIAL_STEP';
-export const JSON_STRING = 'JSON_STRING';
+export const TUTORIAL_PROGRESS = "TUTORIAL_PROGRESS";
+export const GET_TUTORIAL = "GET_TUTORIAL";
+export const GET_TUTORIALS = "GET_TUTORIALS";
+export const GET_USERTUTORIALS = "GET_USERTUTORIALS";
+export const GET_STATUS = "GET_STATUS";
+export const TUTORIAL_SUCCESS = "TUTORIAL_SUCCESS";
+export const TUTORIAL_ERROR = "TUTORIAL_ERROR";
+export const TUTORIAL_CHANGE = "TUTORIAL_CHANGE";
+export const TUTORIAL_XML = "TUTORIAL_XML";
+export const TUTORIAL_ID = "TUTORIAL_ID";
+export const TUTORIAL_STEP = "TUTORIAL_STEP";
+export const JSON_STRING = "JSON_STRING";
 
+export const BUILDER_CHANGE = "BUILDER_CHANGE";
+export const BUILDER_TITLE = "BUILDER_TITLE";
+export const BUILDER_DIFFICULTY = "BUILDER_DIFFICULTY";
+export const BUILDER_PUBLIC = "BUILDER_PUBLIC";
+export const BUILDER_REVIEW = "BUILDER_REVIEW";
+export const BUILDER_ID = "BUILDER_ID";
+export const BUILDER_ADD_STEP = "BUILDER_ADD_STEP";
+export const BUILDER_DELETE_STEP = "BUILDER_DELETE_STEP";
+export const BUILDER_CHANGE_STEP = "BUILDER_CHANGE_STEP";
+export const BUILDER_CHANGE_ORDER = "BUILDER_CHANGE_ORDER";
+export const BUILDER_DELETE_PROPERTY = "BUILDER_DELETE_PROPERTY";
+export const BUILDER_ERROR = "BUILDER_ERROR";
+export const PROGRESS = "PROGRESS";
 
-export const BUILDER_CHANGE = 'BUILDER_CHANGE';
-export const BUILDER_TITLE = 'BUILDER_TITLE';
-export const BUILDER_ID = 'BUILDER_ID';
-export const BUILDER_ADD_STEP = 'BUILDER_ADD_STEP';
-export const BUILDER_DELETE_STEP = 'BUILDER_DELETE_STEP';
-export const BUILDER_CHANGE_STEP = 'BUILDER_CHANGE_STEP';
-export const BUILDER_CHANGE_ORDER = 'BUILDER_CHANGE_ORDER';
-export const BUILDER_DELETE_PROPERTY = 'BUILDER_DELETE_PROPERTY';
-export const BUILDER_ERROR = 'BUILDER_ERROR';
-export const PROGRESS = 'PROGRESS';
+export const VISIT = "VISIT";
+export const LANGUAGE = "LANGUAGE";
+export const PLATFORM = "PLATFORM";
+export const RENDERER = "RENDERER";
+export const SOUNDS = "SOUNDS";
+export const STATISTICS = "STATISTICS";
 
+// messages
+export const GET_ERRORS = "GET_ERRORS";
+export const GET_SUCCESS = "GET_SUCCESS";
+export const CLEAR_MESSAGES = "CLEAR_MESSAGES";
 
-export const VISIT = 'VISIT';
+// projects: share, gallery, project
+export const PROJECT_PROGRESS = "PROJECT_PROGRESS";
+export const GET_PROJECT = "GET_PROJECT";
+export const GET_PROJECTS = "GET_PROJECTS";
+export const PROJECT_TYPE = "PROJECT_TYPE";
+export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";
+
+//board
+export const BOARD = "BOARD";

src/actions/workspaceActions.js

@@ -16,6 +16,22 @@ export const onChangeCode = () => (dispatch, getState) => {
   code.arduino = Blockly.Arduino.workspaceToCode(workspace);
   var xmlDom = Blockly.Xml.workspaceToDom(workspace);
   code.xml = Blockly.Xml.domToPrettyText(xmlDom);
+  var selectedBlock = Blockly.getSelected();
+  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
+  }
+
+
   dispatch({
     type: NEW_CODE,
     payload: code

src/components/Alert.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+
+import withStyles from '@mui/styles/withStyles';
+import { alpha } from "@mui/material/styles";
+
+import Typography from "@mui/material/Typography";
+
+const styles = (theme) => ({
+  alert: {
+    marginBottom: "20px",
+    border: `1px solid ${theme.palette.primary.main}`,
+    padding: "10px 20px",
+    borderRadius: "4px",
+    background: alpha(theme.palette.primary.main, 0.3),
+    color: "rgb(70,70,70)",
+  },
+});
+
+export class Alert extends Component {
+  render() {
+    return (
+      <div className={this.props.classes.alert}>
+        <Typography>{this.props.children}</Typography>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(Alert);

src/components/Blockly/BlocklyComponent.jsx

@@ -21,57 +21,74 @@
  * @author samelh@google.com (Sam El-Husseini)
  */
 
-import React from 'react';
+import React from "react";
 
-import Blockly from 'blockly/core';
-import locale from 'blockly/msg/en';
-import 'blockly/blocks';
-import Toolbox from './toolbox/Toolbox';
+import Blockly from "blockly/core";
+import "blockly/blocks";
+import Toolbox from "./toolbox/Toolbox";
 
-import { Card } from '@material-ui/core';
-
-
-Blockly.setLocale(locale);
+import { Card } from "@mui/material";
+import {
+  ScrollOptions,
+  ScrollBlockDragger,
+  ScrollMetricsManager,
+} from "@blockly/plugin-scroll-options";
 
 class BlocklyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.blocklyDiv = React.createRef();
+    this.toolbox = React.createRef();
+    this.state = { workspace: undefined };
+  }
 
-    constructor(props) {
-        super(props);
-        this.blocklyDiv = React.createRef();
-        this.toolbox = React.createRef();
-        this.state = {workspace: undefined};
+  componentDidMount() {
+    const { initialXml, children, ...rest } = this.props;
+    this.primaryWorkspace = Blockly.inject(this.blocklyDiv.current, {
+      toolbox: this.toolbox.current,
+      plugins: {
+        // These are both required.
+        blockDragger: ScrollBlockDragger,
+        metricsManager: ScrollMetricsManager,
+      },
+      ...rest,
+    });
+    // Initialize plugin.
+
+    this.setState({ workspace: this.primaryWorkspace });
+    const plugin = new ScrollOptions(this.workspace);
+    plugin.init({ enableWheelScroll: true, enableEdgeScroll: false });
+    if (initialXml) {
+      Blockly.Xml.domToWorkspace(
+        Blockly.Xml.textToDom(initialXml),
+        this.primaryWorkspace
+      );
     }
+  }
 
-    componentDidMount() {
-        const { initialXml, children, ...rest } = this.props;
-        this.primaryWorkspace = Blockly.inject(
-            this.blocklyDiv.current,
-            {
-                toolbox: this.toolbox.current,
-                ...rest
-            },
-        );
-        this.setState({workspace: this.primaryWorkspace})
+  get workspace() {
+    return this.primaryWorkspace;
+  }
 
-        if (initialXml) {
-            Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace);
-        }
-    }
+  setXml(xml) {
+    Blockly.Xml.domToWorkspace(
+      Blockly.Xml.textToDom(xml),
+      this.primaryWorkspace
+    );
+  }
 
-    get workspace() {
-        return this.primaryWorkspace;
-    }
-
-    setXml(xml) {
-        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.primaryWorkspace);
-    }
-
-    render() {
-        return <React.Fragment>
-            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}}/>
-            <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
-        </React.Fragment>;
-    }
+  render() {
+    return (
+      <React.Fragment>
+        <Card
+          ref={this.blocklyDiv}
+          id="blocklyDiv"
+          style={this.props.style ? this.props.style : {}}
+        />
+        <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
+      </React.Fragment>
+    );
+  }
 }
 
 export default BlocklyComponent;

src/components/Blockly/BlocklySvg.js

@@ -53,7 +53,6 @@ class BlocklySvg extends Component {
       var css = '<defs><style type="text/css" xmlns="http://www.w3.org/1999/xhtml"><![CDATA[' + cssContent + ']]></style></defs>';
       var bbox = document.getElementsByClassName("blocklyBlockCanvas")[0].getBBox();
       var content = new XMLSerializer().serializeToString(canvas);
-
       var xml = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                   width="${bbox.width}" height="${bbox.height}" viewBox="${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}">
                   ${css}">${content}</svg>`;
@@ -65,7 +64,7 @@ class BlocklySvg extends Component {
   render() {
     return (
       <div
-        style={{display: 'flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
+        style={{display: 'inline-flex', justifyContent: 'center', transform: 'scale(0.8) translate(0, calc(100% * -0.2 / 2))'}}
         dangerouslySetInnerHTML={{ __html: this.state.svg }}
       />
     );

src/components/Blockly/BlocklyWindow.js

@@ -1,24 +1,23 @@
-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 'blockly/msg/de';
-import {De} from './msg/de';
-import BlocklyComponent from './BlocklyComponent';
-import BlocklySvg from './BlocklySvg';
-import * as Blockly from 'blockly/core';
-import './blocks/index';
-import './generator/index';
-import { initialXml } from './initialXml.js';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
 
+import BlocklyComponent from "./BlocklyComponent";
+import BlocklySvg from "./BlocklySvg";
 
+import * as Blockly from "blockly/core";
+import "./blocks/index";
+import "./generator/index";
+import { ZoomToFitControl } from "@blockly/zoom-to-fit";
+import { initialXml } from "./initialXml.js";
+import { getMaxInstances } from "./helpers/maxInstances";
+import { Backpack } from "@blockly/workspace-backpack";
 
 class BlocklyWindow extends Component {
-
   constructor(props) {
     super(props);
     this.simpleWorkspace = React.createRef();
-    Blockly.setLocale(De);
   }
 
   componentDidMount() {
@@ -27,6 +26,7 @@ class BlocklyWindow extends Component {
     this.props.clearStats();
     workspace.addChangeListener((event) => {
       this.props.onChangeWorkspace(event);
+
       // switch on that a block is displayed disabled or not depending on whether it is correctly connected
       // for SVG display, a deactivated block in the display is undesirable
       if (this.props.blockDisabled) {
@@ -34,11 +34,26 @@ class BlocklyWindow extends Component {
       }
     });
     Blockly.svgResize(workspace);
+    const zoomToFit = new ZoomToFitControl(workspace);
+    zoomToFit.init();
+    // Initialize plugin.
+    const backpack = new Backpack(workspace);
+    backpack.init();
   }
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
     var xml = this.props.initialXml;
+    if (props.selectedBoard !== this.props.selectedBoard) {
+       xml = localStorage.getItem("autoSaveXML");
+      // change board
+      if(!xml) xml = initialXml;
+      var xmlDom = Blockly.Xml.textToDom(xml);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // var toolbox = workspace.getToolbox();
+      // workspace.updateToolbox(toolbox.toolboxDef_);
+    }
+ 
     // if svg is true, then the update process is done in the BlocklySvg component
     if (props.initialXml !== xml && !this.props.svg) {
       // guarantees that the current xml-code (this.props.initialXml) is rendered
@@ -46,52 +61,95 @@ class BlocklyWindow extends Component {
       if (!xml) xml = initialXml;
       Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
     }
+    if (props.language !== this.props.language) {
+      // change language
+       xml = localStorage.getItem("autoSaveXML");
+      if (!xml) xml = initialXml;
+       xmlDom = Blockly.Xml.textToDom(xml);
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // var toolbox = workspace.getToolbox();
+      // workspace.updateToolbox(toolbox.toolboxDef_);
+    }
     Blockly.svgResize(workspace);
   }
 
   render() {
     return (
       <div>
-        <BlocklyComponent ref={this.simpleWorkspace}
+        <BlocklyComponent
+          ref={this.simpleWorkspace}
           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'
-          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-            controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
+          readOnly={
+            this.props.readOnly !== undefined ? this.props.readOnly : false
+          }
+          trashcan={
+            this.props.trashcan !== undefined ? this.props.trashcan : true
+          }
+          renderer={this.props.renderer}
+          sounds={this.props.sounds}
+          maxInstances={getMaxInstances()}
+          zoom={{
+            // https://developers.google.com/blockly/guides/configure/web/zoom
+            controls:
+              this.props.zoomControls !== undefined
+                ? this.props.zoomControls
+                : true,
             wheel: false,
             startScale: 1,
             maxScale: 3,
             minScale: 0.3,
-            scaleSpeed: 1.2
+            scaleSpeed: 1.2,
           }}
-          grid={this.props.grid !== undefined && !this.props.grid ? {} :
-            { // https://developers.google.com/blockly/guides/configure/web/grid
-              spacing: 20,
-              length: 1,
-              colour: '#4EAF47', // senseBox-green
-              snap: false
-            }}
-          media={'/media/blockly/'}
-          move={this.props.move !== undefined && !this.props.move ? {} :
-            { // https://developers.google.com/blockly/guides/configure/web/move
-              scrollbars: true,
-              drag: true,
-              wheel: false
-            }}
-          initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
-        >
-        </BlocklyComponent >
-        {this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
+          grid={
+            this.props.grid !== undefined && !this.props.grid
+              ? {}
+              : {
+                  // https://developers.google.com/blockly/guides/configure/web/grid
+                  spacing: 20,
+                  length: 1,
+                  colour: "#4EAF47", // senseBox-green
+                  snap: false,
+                }
+          }
+          media={"/media/blockly/"}
+          move={
+            this.props.move !== undefined && !this.props.move
+              ? {}
+              : {
+                  // https://developers.google.com/blockly/guides/configure/web/move
+                  scrollbars: true,
+                  drag: true,
+                  wheel: true,
+                }
+          }
+          initialXml={
+            this.props.initialXml ? this.props.initialXml : initialXml
+          }
+        ></BlocklyComponent>
+        {this.props.svg && this.props.initialXml ? (
+          <BlocklySvg initialXml={this.props.initialXml} />
+        ) : null}
       </div>
     );
-  };
+  }
 }
 
 BlocklyWindow.propTypes = {
   onChangeWorkspace: PropTypes.func.isRequired,
-  clearStats: PropTypes.func.isRequired
+  clearStats: PropTypes.func.isRequired,
+  renderer: PropTypes.string.isRequired,
+  sounds: PropTypes.bool.isRequired,
+  language: PropTypes.string.isRequired,
+  selectedBoard: PropTypes.string.isRequired,
 };
 
+const mapStateToProps = (state) => ({
+  renderer: state.general.renderer,
+  sounds: state.general.sounds,
+  language: state.general.language,
+  selectedBoard: state.board.board,
+});
 
-export default connect(null, { onChangeWorkspace, clearStats })(BlocklyWindow);
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(
+  BlocklyWindow
+);

src/components/Blockly/blocks/index.js

@@ -1,21 +1,30 @@
-import './loops';
-import './sensebox';
-import './logic';
-import './sensebox-sensors';
-import './sensebox-telegram';
-import './sensebox-osem';
-import './sensebox-web';
-import './sensebox-display';
-import './sensebox-lora';
-import './sensebox-led';
-import './sensebox-sd';
-import './text';
-import './io';
-import './audio';
-import './math';
-import './map';
-import './procedures';
-import './time';
-import './variables';
+import "./loops";
+import "./sensebox";
+import "./logic";
+import "./sensebox-sensors";
+import "./sensebox-telegram";
+import "./sensebox-osem";
+import "./sensebox-web";
+import "./sensebox-display";
+import "./sensebox-motors";
+import "./sensebox-lora";
+import "./sensebox-led";
+import "./sensebox-rtc";
+import "./sensebox-ntp";
+import "./sensebox-ble";
+import "./sensebox-sd";
+import "./mqtt";
+import "./text";
+import "./io";
+import "./audio";
+import "./math";
+import "./map";
+import "./procedures";
+import "./serial";
+import "./time";
+import "./variables";
+import "./lists";
+import "./watchdog";
+import "./webserver";
 
-import '../helpers/types'
+import "../helpers/types";

src/components/Blockly/blocks/io.js

@@ -10,248 +10,271 @@
  *
  * TODO: maybe change this to a "PIN" BlocklyType
  */
-import Blockly from 'blockly/core';
-import { selectedBoard } from '../helpers/board'
-import * as Types from '../helpers/types'
+import Blockly from "blockly/core";
+import { selectedBoard } from "../helpers/board";
+import * as Types from "../helpers/types";
 
-
-Blockly.Blocks['io_digitalwrite'] = {
-    /**
-     * Block for creating a 'set pin' to a state.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DigitalWrite');
-        this.setColour(250);
-        this.appendValueInput('STATE')
-            .appendField(Blockly.Msg.ARD_DIGITALWRITE)
-            .appendField(new Blockly.FieldDropdown(
-                selectedBoard().digitalPins), 'PIN')
-            .appendField(Blockly.Msg.ARD_WRITE_TO)
-            .setCheck(Types.BOOLEAN.checkList);
-        this.setInputsInline(false);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.ARD_DIGITALWRITE_TIP);
-    },
-    /**
-     * Updates the content of the the pin related fields.
-     * @this Blockly.Block
-     */
-    updateFields: function () {
-        Blockly.Arduino.Boards.refreshBlockFieldDropdown(
-            this, 'PIN', 'digitalPins');
-    }
+Blockly.Blocks["io_digitalwrite"] = {
+  /**
+   * Block for creating a 'set pin' to a state.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/DigitalWrite");
+    this.setColour(250);
+    this.appendValueInput("STATE")
+      .appendField(Blockly.Msg.ARD_DIGITALWRITE)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().digitalPins),
+        "PIN"
+      )
+      .appendField(Blockly.Msg.ARD_WRITE_TO)
+      .setCheck(Types.BOOLEAN.checkList);
+    this.setInputsInline(false);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_DIGITALWRITE_TIP);
+  },
+  /**
+   * Updates the content of the the pin related fields.
+   * @this Blockly.Block
+   */
+  updateFields: function () {
+    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "PIN",
+      "digitalPins"
+    );
+  },
 };
 
-Blockly.Blocks['io_digitalread'] = {
-    /**
-     * Block for creating a 'read pin'.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DigitalRead');
-        this.setColour(250);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_DIGITALREAD)
-            .appendField(new Blockly.FieldDropdown(
-                selectedBoard().digitalPins), 'PIN');
-        this.setOutput(true, 'boolean');
-        this.setTooltip(Blockly.Msg.ARD_DIGITALREAD_TIP);
-    },
-    /** @return {!string} The type of return value for the block, an integer. */
-    getBlockType: function () {
-        return Types.BOOLEAN;
-    },
-    /**
-     * Updates the content of the the pin related fields.
-     * @this Blockly.Block
-     */
-    updateFields: function () {
-        Blockly.Arduino.Boards.refreshBlockFieldDropdown(
-            this, 'PIN', 'digitalPins');
-    }
+Blockly.Blocks["io_digitalread"] = {
+  /**
+   * Block for creating a 'read pin'.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/DigitalRead");
+    this.setColour(250);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.ARD_DIGITALREAD)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().digitalPins),
+        "PIN"
+      );
+    this.setOutput(true, "boolean");
+    this.setTooltip(Blockly.Msg.ARD_DIGITALREAD_TIP);
+  },
+  /** @return {!string} The type of return value for the block, an integer. */
+  getBlockType: function () {
+    return Types.BOOLEAN;
+  },
+  /**
+   * Updates the content of the the pin related fields.
+   * @this Blockly.Block
+   */
+  updateFields: function () {
+    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "PIN",
+      "digitalPins"
+    );
+  },
 };
 
-Blockly.Blocks['io_builtin_led'] = {
-    /**
-     * Block for setting built-in LED to a state.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DigitalWrite');
-        this.setColour(250);
-        this.appendValueInput('STATE')
-            .appendField(Blockly.Msg.ARD_BUILTIN_LED)
-            .appendField(new Blockly.FieldDropdown(
-                selectedBoard().builtinLed), 'BUILT_IN_LED')
-            .appendField(Blockly.Msg.ARD_WRITE_TO)
-            .setCheck(Types.BOOLEAN.compatibleTypes);
-        this.setInputsInline(false);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.ARD_BUILTIN_LED_TIP);
-    },
-    /**
-     * Updates the content of the the pin related fields.
-     * @this Blockly.Block
-     */
-    updateFields: function () {
-        Blockly.Arduino.Boards.refreshBlockFieldDropdown(
-            this, 'BUILT_IN_LED', 'builtinLed');
-    },
-    /** @return {!string} The type of input value for the block, an integer. */
-    getBlockType: function () {
-        return Types.BOOLEAN;
-    },
+Blockly.Blocks["io_builtin_led"] = {
+  /**
+   * Block for setting built-in LED to a state.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/DigitalWrite");
+    this.setColour(250);
+    this.appendValueInput("STATE")
+      .appendField(Blockly.Msg.ARD_BUILTIN_LED)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().builtinLed),
+        "BUILT_IN_LED"
+      )
+      .appendField(Blockly.Msg.ARD_WRITE_TO)
+      .setCheck(Types.BOOLEAN.compatibleTypes);
+    this.setInputsInline(false);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_BUILTIN_LED_TIP);
+  },
+  /**
+   * Updates the content of the the pin related fields.
+   * @this Blockly.Block
+   */
+  updateFields: function () {
+    Blockly.Arduino.Boards.refreshBlockFieldDropdown(
+      this,
+      "BUILT_IN_LED",
+      "builtinLed"
+    );
+  },
+  /** @return {!string} The type of input value for the block, an integer. */
+  getBlockType: function () {
+    return Types.BOOLEAN;
+  },
 };
 
-Blockly.Blocks['io_analogwrite'] = {
-    /**
-     * Block for creating a 'set pin' to an analogue value.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/AnalogWrite');
-        this.setColour(250);
-        this.appendValueInput('NUM')
-            .appendField(Blockly.Msg.ARD_ANALOGWRITE)
-            .appendField(new Blockly.FieldDropdown(
-                selectedBoard().pwmPins), 'PIN')
-            .appendField(Blockly.Msg.ARD_WRITE_TO)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.setInputsInline(false);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.ARD_ANALOGWRITE_TIP);
-    },
-    /**
-     * Updates the content of the the pin related fields.
-     * @this Blockly.Block
-     */
-    updateFields: function () {
-        Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, 'PIN', 'pwmPins');
-    },
-    /** @return {!string} The type of input value for the block, an integer. */
-    getBlockType: function () {
-        return Types.NUMBER;
-    },
+Blockly.Blocks["io_analogwrite"] = {
+  /**
+   * Block for creating a 'set pin' to an analogue value.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/AnalogWrite");
+    this.setColour(250);
+    this.appendValueInput("NUM")
+      .appendField(Blockly.Msg.ARD_ANALOGWRITE)
+      .appendField(new Blockly.FieldDropdown(selectedBoard().pwmPins), "PIN")
+      .appendField(Blockly.Msg.ARD_WRITE_TO)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.setInputsInline(false);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_ANALOGWRITE_TIP);
+  },
+  /**
+   * Updates the content of the the pin related fields.
+   * @this Blockly.Block
+   */
+  updateFields: function () {
+    Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, "PIN", "pwmPins");
+  },
+  /** @return {!string} The type of input value for the block, an integer. */
+  getBlockType: function () {
+    return Types.NUMBER;
+  },
 };
 
-Blockly.Blocks['io_analogread'] = {
-    /**
-     * Block for reading an analogue input.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/AnalogRead');
-        this.setColour(250);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_ANALOGREAD)
-            .appendField(new Blockly.FieldDropdown(
-                selectedBoard().analogPins), 'PIN');
-        this.setOutput(true, Types.NUMBER.typeId);
-        this.setTooltip(Blockly.Msg.ARD_ANALOGREAD_TIP);
-    },
-    /** @return {!string} The type of return value for the block, an integer. */
-    getBlockType: function () {
-        return Types.NUMBER.typeId;
-    },
-    /**
-     * Updates the content of the the pin related fields.
-     * @this Blockly.Block
-     */
-    updateFields: function () {
-        Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, 'PIN', 'analogPins');
-    }
+Blockly.Blocks["io_analogread"] = {
+  /**
+   * Block for reading an analogue input.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/AnalogRead");
+    this.setColour(250);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.ARD_ANALOGREAD)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().analogPins),
+        "PIN"
+      );
+    this.setOutput(true, Types.NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.ARD_ANALOGREAD_TIP);
+  },
+  /** @return {!string} The type of return value for the block, an integer. */
+  getBlockType: function () {
+    return Types.NUMBER.typeName;
+  },
+  /**
+   * Updates the content of the the pin related fields.
+   * @this Blockly.Block
+   */
+  updateFields: function () {
+    Blockly.Arduino.Boards.refreshBlockFieldDropdown(this, "PIN", "analogPins");
+  },
 };
 
-Blockly.Blocks['io_highlow'] = {
-    /**
-     * Block for creating a pin state.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Constants');
-        this.setColour(250);
-        this.appendDummyInput()
-            .appendField(
-                new Blockly.FieldDropdown([[Blockly.Msg.ARD_HIGH, 'HIGH'], [Blockly.Msg.ARD_LOW, 'LOW']]),
-                'STATE');
-        this.setOutput(true, Types.BOOLEAN.typeId);
-        this.setTooltip(Blockly.Msg.ARD_HIGHLOW_TIP);
-    },
-    /** @return {!string} The type of return value for the block, an integer. */
-    getBlockType: function () {
-        return Types.BOOLEAN;
-    }
+Blockly.Blocks["io_highlow"] = {
+  /**
+   * Block for creating a pin state.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/Constants");
+    this.setColour(250);
+    this.appendDummyInput().appendField(
+      new Blockly.FieldDropdown([
+        [Blockly.Msg.ARD_HIGH, "HIGH"],
+        [Blockly.Msg.ARD_LOW, "LOW"],
+      ]),
+      "STATE"
+    );
+    this.setOutput(true, Types.BOOLEAN.typeName);
+    this.setTooltip(Blockly.Msg.ARD_HIGHLOW_TIP);
+  },
+  /** @return {!string} The type of return value for the block, an integer. */
+  getBlockType: function () {
+    return Types.BOOLEAN;
+  },
 };
 
-Blockly.Blocks['io_pulsein'] = {
-    /**
-     * Block for measuring the duration of a pulse in an input pin.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.jsonInit({
-            "type": "math_foo",
-            "message0": Blockly.Msg.ARD_PULSE_READ,
-            "args0": [{
-                "type": "input_value",
-                "name": "PULSETYPE",
-                "check": Types.BOOLEAN.compatibleTypes
-            }, {
-                "type": "field_dropdown",
-                "name": "PULSEPIN",
-                "options": selectedBoard().digitalPins,
-            }
-            ],
-            "output": Types.NUMBER.typeId,
-            "inputsInline": true,
-            "colour": 250,
-            "tooltip": Blockly.Msg.ARD_PULSE_TIP,
-            "helpUrl": 'https://www.arduino.cc/en/Reference/PulseIn'
-        });
-    },
-    /** @return {!string} The type of input value for the block, an integer. */
-    getBlockType: function () {
-        return Types.NUMBER.typeId;
-    }
+Blockly.Blocks["io_pulsein"] = {
+  /**
+   * Block for measuring the duration of a pulse in an input pin.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.jsonInit({
+      type: "math_foo",
+      message0: Blockly.Msg.ARD_PULSE_READ,
+      args0: [
+        {
+          type: "input_value",
+          name: "PULSETYPE",
+          check: Types.BOOLEAN.compatibleTypes,
+        },
+        {
+          type: "field_dropdown",
+          name: "PULSEPIN",
+          options: selectedBoard().digitalPins,
+        },
+      ],
+      output: Types.NUMBER.typeName,
+      inputsInline: true,
+      colour: 250,
+      tooltip: Blockly.Msg.ARD_PULSE_TIP,
+      helpUrl: "https://www.arduino.cc/en/Reference/PulseIn",
+    });
+  },
+  /** @return {!string} The type of input value for the block, an integer. */
+  getBlockType: function () {
+    return Types.NUMBER.typeName;
+  },
 };
 
-Blockly.Blocks['io_pulsetimeout'] = {
-    /**
-     * Block for measuring (with a time-out) the duration of a pulse in an input
-     * pin.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.jsonInit({
-            "type": "math_foo",
-            "message0": Blockly.Msg.ARD_PULSE_READ_TIMEOUT,
-            "args0": [{
-                "type": "input_value",
-                "name": "PULSETYPE",
-                "check": Types.BOOLEAN.compatibleTypes
-            }, {
-                "type": "field_dropdown",
-                "name": "PULSEPIN",
-                "options": selectedBoard().digitalPins,
-            }, {
-                "type": "input_value",
-                "name": "TIMEOUT",
-                "check": Types.NUMBER.compatibleTypes
-            }
-            ],
-            "output": Types.NUMBER.typeId,
-            "inputsInline": true,
-            "colour": 250,
-            "tooltip": Blockly.Msg.ARD_PULSETIMEOUT_TIP,
-            "helpUrl": 'https://www.arduino.cc/en/Reference/PulseIn'
-        });
-    },
-    /** @return {!string} The type of input value for the block, an integer. */
-    getBlockType: function () {
-        return Types.NUMBER.typeId;
-    }
+Blockly.Blocks["io_pulsetimeout"] = {
+  /**
+   * Block for measuring (with a time-out) the duration of a pulse in an input
+   * pin.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.jsonInit({
+      type: "math_foo",
+      message0: Blockly.Msg.ARD_PULSE_READ_TIMEOUT,
+      args0: [
+        {
+          type: "input_value",
+          name: "PULSETYPE",
+          check: Types.BOOLEAN.compatibleTypes,
+        },
+        {
+          type: "field_dropdown",
+          name: "PULSEPIN",
+          options: selectedBoard().digitalPins,
+        },
+        {
+          type: "input_value",
+          name: "TIMEOUT",
+          check: Types.NUMBER.compatibleTypes,
+        },
+      ],
+      output: Types.NUMBER.typeName,
+      inputsInline: true,
+      colour: 250,
+      tooltip: Blockly.Msg.ARD_PULSETIMEOUT_TIP,
+      helpUrl: "https://www.arduino.cc/en/Reference/PulseIn",
+    });
+  },
+  /** @return {!string} The type of input value for the block, an integer. */
+  getBlockType: function () {
+    return Types.NUMBER.typeName;
+  },
 };

src/components/Blockly/blocks/lists.js

@@ -0,0 +1,54 @@
+import Blockly, { FieldDropdown } from "blockly/core";
+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.typeName);
+    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.typeName);
+    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/loops.js

@@ -2,7 +2,7 @@
 import Blockly from 'blockly';
 import { getColour } from '../helpers/colour';
 import { getCompatibleTypes } from '../helpers/types'
-
+import * as Types from '../helpers/types';
 
 Blockly.Blocks['controls_whileUntil'] = {
     /**
@@ -16,7 +16,7 @@ Blockly.Blocks['controls_whileUntil'] = {
         this.setHelpUrl(Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL);
         this.setColour(getColour().loops);
         this.appendValueInput('BOOL')
-            .setCheck(getCompatibleTypes(Boolean))
+            .setCheck(getCompatibleTypes('boolean'))
             .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE');
         this.appendStatementInput('DO')
             .appendField(Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO);
@@ -47,24 +47,25 @@ Blockly.Blocks['controls_for'] = {
                 {
                     "type": "field_variable",
                     "name": "VAR",
+                    "defaultType": Types.NUMBER.typeName,
                     "variable": null
                 },
                 {
                     "type": "input_value",
                     "name": "FROM",
-                    "check": getCompatibleTypes(Number),
+                    "check": getCompatibleTypes('int'),
                     "align": "RIGHT"
                 },
                 {
                     "type": "input_value",
                     "name": "TO",
-                    "check": getCompatibleTypes(Number),
+                    "check": getCompatibleTypes('int'),
                     "align": "RIGHT"
                 },
                 {
                     "type": "input_value",
                     "name": "BY",
-                    "check": getCompatibleTypes(Number),
+                    "check": getCompatibleTypes('int'),
                     "align": "RIGHT"
                 }
             ],
@@ -97,12 +98,13 @@ Blockly.Blocks['controls_forEach'] = {
                 {
                     "type": "field_variable",
                     "name": "VAR",
+                    "defaultType": Types.NUMBER.typeName,
                     "variable": null
                 },
                 {
                     "type": "input_value",
                     "name": "LIST",
-                    "check": getCompatibleTypes(Array)
+                    "check": getCompatibleTypes('Array')
                 }
             ],
             "previousStatement": null,
@@ -195,7 +197,7 @@ Blockly.Blocks['controls_repeat_ext'] = {
                 {
                     "type": "input_value",
                     "name": "TIMES",
-                    "check": getCompatibleTypes(Number),
+                    "check": getCompatibleTypes('int'),
                 }
             ],
             "previousStatement": null,

src/components/Blockly/blocks/map.js

@@ -11,40 +11,39 @@
  * TODO: This block can be improved to set the new range properly.
  */
 
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
 
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
-import * as Types from '../helpers/types'
-
-Blockly.Blocks['base_map'] = {
-    /**
-     * Block for creating a the map function.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/map');
-        this.setColour(getColour().math);
-        this.appendValueInput('NUM')
-            .appendField(Blockly.Msg.ARD_MAP)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('FMIN')
-            .appendField(Blockly.Msg.ARD_MAP_FROMMIN)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('FMAX')
-            .appendField(Blockly.Msg.ARD_MAP_FROMMAX)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('DMIN')
-            .appendField(Blockly.Msg.ARD_MAP_TOMIN)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('DMAX')
-            .appendField(Blockly.Msg.ARD_MAP_TOMAX)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.setOutput(true);
-        this.setInputsInline(false);
-        this.setTooltip(Blockly.Msg.ARD_MAP_TIP);
-    },
-    /** @return {string} The type of return value for the block, an integer. */
-    getBlockType: function () {
-        return Types.NUMBER.typeId;
-    }
+Blockly.Blocks["base_map"] = {
+  /**
+   * Block for creating a the map function.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/map");
+    this.setColour(getColour().math);
+    this.appendValueInput("NUM")
+      .appendField(Blockly.Msg.ARD_MAP)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("FMIN")
+      .appendField(Blockly.Msg.ARD_MAP_FROMMIN)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("FMAX")
+      .appendField(Blockly.Msg.ARD_MAP_FROMMAX)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("DMIN")
+      .appendField(Blockly.Msg.ARD_MAP_TOMIN)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("DMAX")
+      .appendField(Blockly.Msg.ARD_MAP_TOMAX)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.setOutput(true);
+    this.setInputsInline(false);
+    this.setTooltip(Blockly.Msg.ARD_MAP_TIP);
+  },
+  /** @return {string} The type of return value for the block, an integer. */
+  getBlockType: function () {
+    return Types.NUMBER.typeName;
+  },
 };

src/components/Blockly/blocks/math.js

@@ -287,7 +287,8 @@ Blockly.Blocks['math_change'] = {
                 {
                     "type": "field_variable",
                     "name": "VAR",
-                    "variable": Blockly.Msg.MATH_CHANGE_TITLE_ITEM
+                    "defaultType": Types.NUMBER.typeName,
+                    "variable": null
                 },
                 {
                     "type": "input_value",

src/components/Blockly/blocks/mqtt.js

@@ -0,0 +1,86 @@
+import * as Blockly from 'blockly/core';
+import { getColour } from '../helpers/colour';
+
+/**
+ * MQTT Blocks
+ */
+
+Blockly.Blocks["sensebox_mqtt_setup"] = {
+    init: function () {
+
+        //this.setTooltip(Blockly.Msg.senseBox_wifi_);
+        this.setHelpUrl('');
+        this.setColour(getColour().mqtt);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_mqtt_init)
+            .appendField(new Blockly.FieldDropdown([["Adafruit IO", 'adafruitio'], ["DIOTY", 'dioty'], ["Other Service", 'custom']]), "service");
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_mqtt_server)
+            .appendField(new Blockly.FieldTextInput("Server"), "server");
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_mqtt_port)
+            .appendField(new Blockly.FieldTextInput("Port"), "port");
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_mqtt_username)
+            .appendField(new Blockly.FieldTextInput("Username"), "username");
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_mqtt_password, "passwordmsg")
+            .appendField(new Blockly.FieldTextInput("Password"), "password");
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_mqtt_init_tooltip);
+    },
+    onchange: function (e) {
+        let service = this.getFieldValue('service');
+        switch (service) {
+            case 'adafruitio':
+                this.getField('server').setValue("io.adafruit.com");
+                this.getField('port').setValue("1883");
+                this.getField('passwordmsg').setValue("Adafruit IO Key");
+                break;
+            case 'dioty':
+                this.getField('server').setValue("mqtt.dioty.co");
+                this.getField('port').setValue("1883");
+                this.getField('passwordmsg').setValue(Blockly.Msg.senseBox_mqtt_password);
+                break;
+
+            case "custom":
+                break;
+            default:
+
+                break;
+        }
+    }
+};
+
+
+Blockly.Blocks["sensebox_mqtt_publish"] = {
+    init: function () {
+        this.setColour(getColour().mqtt);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_mqtt_publish);
+        this.appendValueInput('value')
+            .setCheck(null)
+            .appendField('Feed/Topic')
+            .appendField(new Blockly.FieldTextInput('Name'), 'publishfeed');
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_mqtt_publish_tooltip);
+    }
+};
+
+Blockly.Blocks["sensebox_mqtt_subscribe"] = {
+    init: function () {
+        this.setColour(getColour().mqtt);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_mqtt_subscribe);
+        this.appendDummyInput()
+            .appendField(new Blockly.FieldTextInput('Feedname'), 'subscribefeed');
+        this.setOutput(true, null);
+    }
+};
+

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

@@ -0,0 +1,152 @@
+import * as Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+
+Blockly.Blocks["sensebox_phyphox_init"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_init)
+      .appendField(new Blockly.FieldTextInput("Geräte Name"), "devicename");
+
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_init_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_experiment"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.sensebox_phyphox_createExperiment
+    );
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_experimentTitle)
+      .appendField(new Blockly.FieldTextInput("Experiment Title"), "title");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_experimentDescription)
+      .appendField(
+        new Blockly.FieldTextInput(
+          Blockly.Msg.sensebox_phyphox_experiment_description
+        ),
+        "description"
+      );
+    this.appendStatementInput("view").appendField(
+      Blockly.Msg.sensebox_phyphox_createView
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_graph"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_createGraph)
+      .appendField(Blockly.Msg.sensebox_phyphox_graphLabel)
+      .appendField(new Blockly.FieldTextInput("Label"), "label");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_unitx)
+      .appendField(new Blockly.FieldTextInput("Unit X"), "unitx");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_unity)
+      .appendField(new Blockly.FieldTextInput("Unit Y"), "unity");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_labelx)
+      .appendField(new Blockly.FieldTextInput("Label X"), "labelx");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_labely)
+      .appendField(new Blockly.FieldTextInput("Label Y"), "labely");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_graphStyle)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_phyphox_style_line, "line"],
+          [Blockly.Msg.sensebox_phyphox_style_dots, "dots"],
+        ]),
+        "style"
+      );
+    this.appendValueInput("channel0").appendField(
+      Blockly.Msg.sensebox_phyphox_channel0
+    );
+    this.appendValueInput("channel1").appendField(
+      Blockly.Msg.sensebox_phyphox_channel1
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_graph_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_timestamp"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_phyphox_timestamp);
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_timestamp_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_channel"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_phyphox_channel)
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["1", "1"],
+          ["2", "2"],
+          ["3", "3"],
+          ["4", "4"],
+          ["5", "5"],
+        ]),
+        "channel"
+      );
+
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_channel_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_sendchannel"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendValueInput("value")
+      .appendField(Blockly.Msg.sensebox_phyphox_sendchannel)
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["1", "1"],
+          ["2", "2"],
+          ["3", "3"],
+          ["4", "4"],
+          ["5", "5"],
+        ]),
+        "channel"
+      );
+
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_sendchannel_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_phyphox_experiment_send"] = {
+  init: function () {
+    this.setColour(getColour().phyphox);
+    this.appendStatementInput("sendValues").appendField(
+      Blockly.Msg.sensebox_phyphox_writeValues
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_send_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_phyphox_helpurl);
+  },
+};

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

@@ -1,254 +1,329 @@
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
-import * as Types from '../helpers/types'
-import { FieldSlider } from '@blockly/field-slider';
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+import { FieldSlider } from "@blockly/field-slider";
 
-
-Blockly.Blocks['sensebox_display_beginDisplay'] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_beginDisplay)
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().sensebox);
-        this.setTooltip(Blockly.Msg.senseBox_display_beginDisplay_tip);
-        this.setHelpUrl('https://sensebox.de/books');
-    }
+Blockly.Blocks["sensebox_display_beginDisplay"] = {
+  init: function () {
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_display_beginDisplay
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_display_beginDisplay_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
 };
 
-Blockly.Blocks['sensebox_display_clearDisplay'] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_clearDisplay)
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().sensebox);
-        this.setTooltip(Blockly.Msg.senseBox_display_clearDisplay_tip);
-        this.setHelpUrl('https://sensebox.de/books');
-    }
+Blockly.Blocks["sensebox_display_clearDisplay"] = {
+  init: function () {
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_display_clearDisplay
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_display_clearDisplay_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
 };
 
-Blockly.Blocks['sensebox_display_printDisplay'] = {
-    init: function (block) {
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_printDisplay);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_color)
-            .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_display_white, "WHITE,BLACK"], [Blockly.Msg.senseBox_display_black, "BLACK,WHITE"]]), "COLOR");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_setSize)
-            .appendField(new FieldSlider(1, 1, 4), "SIZE");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
-            .appendField(new FieldSlider(0, 0, 64), "X");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
-            .appendField(new FieldSlider(0, 0, 128), "Y");
-        this.appendValueInput('printDisplay')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_value)
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        let variableName = this.getField('COLOR');
-        console.log(variableName.getValue());
-        this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_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 () {
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_display_plotDisplay)
-        this.appendValueInput("Title", 'Text')
-            .appendField(Blockly.Msg.senseBox_display_plotTitle);
-        this.appendValueInput("YLabel", 'Text')
-            .appendField(Blockly.Msg.senseBox_display_plotYLabel);
-        this.appendValueInput("XLabel", 'Text')
-            .appendField(Blockly.Msg.senseBox_display_plotXLabel);
-        this.appendValueInput("XRange1", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotXRange1);
-        this.appendValueInput("XRange2", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotXRange2)
-        this.appendValueInput("YRange1", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotYRange1);
-        this.appendValueInput("YRange2", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotYRange2);
-        this.setInputsInline(false);
-        this.appendValueInput("XTick", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotXTick);
-        this.appendValueInput("YTick", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotYTick);
-        this.appendValueInput("TimeFrame", 'Number')
-            .appendField(Blockly.Msg.senseBox_display_plotTimeFrame);
-        this.appendValueInput('plotDisplay')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_value)
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_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_show'] = {
-    init: function () {
-
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.sensebox_display_show);
-        this.appendStatementInput('SHOW');
-        this.setTooltip(Blockly.Msg.sensebox_display_show_tip);
-        this.setHelpUrl('');
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    }
-};
-
-Blockly.Blocks['sensebox_display_fillCircle'] = {
-    init: function () {
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.sensebox_display_fillCircle);
-        this.appendValueInput('X')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('Y')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('Radius')
-            .appendField(Blockly.Msg.sensebox_display_fillCircle_radius)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendDummyInput('fill')
-            .appendField(Blockly.Msg.senseBox_display_filled)
-            .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL");
-        this.setInputsInline(false);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    /**
+Blockly.Blocks["sensebox_display_printDisplay"] = {
+  init: function (block) {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_display_printDisplay
+    );
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_display_color)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_display_white, "WHITE,BLACK"],
+          [Blockly.Msg.senseBox_display_black, "BLACK,WHITE"],
+        ]),
+        "COLOR"
+      );
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_display_setSize)
+      .appendField(new FieldSlider(1, 1, 4), "SIZE");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
+      .appendField(new FieldSlider(0, 0, 127), "X");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
+      .appendField(new FieldSlider(0, 0, 63), "Y");
+    this.appendValueInput("printDisplay")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_value)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
+  /**
    * 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'],
+  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_drawRectangle'] = {
-    init: function () {
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.sensebox_display_drawRectangle);
-        this.appendValueInput('X')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('Y')
-            .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('width')
-            .appendField(Blockly.Msg.sensebox_display_drawRectangle_width)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendValueInput('height')
-            .appendField(Blockly.Msg.sensebox_display_drawRectangle_height)
-            .setCheck(Types.NUMBER.compatibleTypes);
-        this.appendDummyInput('fill')
-            .appendField(Blockly.Msg.senseBox_display_filled)
-            .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL");
-        this.setInputsInline(false);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    /**
+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_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
+  /**
    * 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'],
+  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 () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_display_plotDisplay
+    );
+    this.appendValueInput("Title", "Text").appendField(
+      Blockly.Msg.senseBox_display_plotTitle
+    );
+    this.appendValueInput("YLabel", "Text").appendField(
+      Blockly.Msg.senseBox_display_plotYLabel
+    );
+    this.appendValueInput("XLabel", "Text").appendField(
+      Blockly.Msg.senseBox_display_plotXLabel
+    );
+    this.appendValueInput("XRange1", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotXRange1
+    );
+    this.appendValueInput("XRange2", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotXRange2
+    );
+    this.appendValueInput("YRange1", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotYRange1
+    );
+    this.appendValueInput("YRange2", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotYRange2
+    );
+    this.setInputsInline(false);
+    this.appendValueInput("XTick", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotXTick
+    );
+    this.appendValueInput("YTick", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotYTick
+    );
+    this.appendValueInput("TimeFrame", "Number").appendField(
+      Blockly.Msg.senseBox_display_plotTimeFrame
+    );
+    this.appendValueInput("plotDisplay")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_value)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+  },
+  /**
+   * 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_show"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_display_show);
+    this.appendStatementInput("SHOW");
+    this.setTooltip(Blockly.Msg.sensebox_display_show_tip);
+    this.setHelpUrl("");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+};
+
+Blockly.Blocks["sensebox_display_fillCircle"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.sensebox_display_fillCircle
+    );
+    this.appendValueInput("X")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("Y")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("Radius")
+      .appendField(Blockly.Msg.sensebox_display_fillCircle_radius)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendDummyInput("fill")
+      .appendField(Blockly.Msg.senseBox_display_filled)
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL");
+    this.setInputsInline(false);
+    this.setTooltip(Blockly.Msg.senseBox_display_fillCircle_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  /**
+   * 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_drawRectangle"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.sensebox_display_drawRectangle
+    );
+    this.appendValueInput("X")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_x)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("Y")
+      .appendField(Blockly.Msg.senseBox_display_printDisplay_y)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("width")
+      .appendField(Blockly.Msg.sensebox_display_drawRectangle_width)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendValueInput("height")
+      .appendField(Blockly.Msg.sensebox_display_drawRectangle_height)
+      .setCheck(Types.NUMBER.compatibleTypes);
+    this.appendDummyInput("fill")
+      .appendField(Blockly.Msg.senseBox_display_filled)
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "FILL");
+    this.setInputsInline(false);
+    this.setTooltip(Blockly.Msg.senseBox_display_drawRectangle_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  /**
+   * 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"],
 };

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

@@ -1,8 +1,7 @@
 import * as Blockly from 'blockly';
-import { FieldSlider } from '@blockly/field-slider';
 import { getColour } from '../helpers/colour'
 import { selectedBoard } from '../helpers/board'
-
+import * as Types from '../helpers/types'
 
 
 Blockly.Blocks['sensebox_led'] = {
@@ -16,7 +15,7 @@ Blockly.Blocks['sensebox_led'] = {
             .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_on, "HIGH"], [Blockly.Msg.senseBox_off, "LOW"]]), "STAT");
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.senseBox_led_tip);
+        this.setTooltip(Blockly.Msg.senseBox_led_tooltip);
     }
 };
 
@@ -27,18 +26,147 @@ Blockly.Blocks['sensebox_rgb_led'] = {
             .appendField(Blockly.Msg.senseBox_rgb_led)
             .appendField("Pin:")
             .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "PIN");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.COLOUR_RGB_RED)//Blockly.Msg.senseBox_basic_red
-            .appendField(new FieldSlider(255, 0, 255), "RED");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.COLOUR_RGB_GREEN)//Blockly.Msg.senseBox_basic_green
-            .appendField(new FieldSlider(255, 0, 255), "GREEN");
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.COLOUR_RGB_BLUE)//Blockly.Msg.senseBox_basic_green
-            .appendField(new FieldSlider(255, 0, 255), "BLUE");
+
+        this.appendValueInput("COLOR", 'Number')
+            .appendField(Blockly.Msg.senseBox_ws2818_rgb_led_color)
+            .setCheck("Colour");
+        // this.appendValueInput("RED", 'Number')
+        //     .appendField(Blockly.Msg.COLOUR_RGB_RED);//Blockly.Msg.senseBox_basic_red
+        // this.appendValueInput("GREEN", 'Number')
+        //     .appendField(Blockly.Msg.COLOUR_RGB_GREEN);//Blockly.Msg.senseBox_basic_green
+        // this.appendValueInput("BLUE", 'Number')
+        //     .appendField(Blockly.Msg.COLOUR_RGB_BLUE);
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
         this.setTooltip(Blockly.Msg.senseBox_rgb_led_tip);
-        this.setHelpUrl('https://sensebox.de/books');
     }
 };
+
+
+Blockly.Blocks['sensebox_ws2818_led_init'] = {
+    init: function () {
+        this.setColour(getColour().sensebox);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_ws2818_rgb_led_init)
+            .appendField("Port:")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
+        this.appendValueInput("BRIGHTNESS", "brightness")
+            .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_brightness));
+        this.appendValueInput("NUMBER", "number")
+            .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_number));
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_ws2818_rgb_led_init_tooltip);
+    }
+};
+
+Blockly.Blocks['sensebox_ws2818_led'] = {
+    init: function () {
+        this.setColour(getColour().sensebox);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_ws2818_rgb_led)
+            .appendField("Port:")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsRGB), "Port")
+        this.appendValueInput("POSITION", "position")
+            .appendField((Blockly.Msg.senseBox_ws2818_rgb_led_position));
+        this.appendValueInput("COLOR", 'Number')
+            .appendField(Blockly.Msg.senseBox_ws2818_rgb_led_color)
+            .setCheck("Colour");
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_ws2818_rgb_led_tooltip);
+    }
+};
+
+
+Blockly.defineBlocksWithJsonArray([  // BEGIN JSON EXTRACT
+    // Block for colour picker.
+    {
+        "type": "colour_picker",
+        "message0": "%1",
+        "args0": [
+            {
+                "type": "field_colour",
+                "name": "COLOUR",
+                "colour": "#ff0000"
+            }
+        ],
+        "output": "Colour",
+        "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
+        "colour": getColour().sensebox,
+        "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
+        "extensions": ["parent_tooltip_when_inline"]
+    },
+
+    // Block for random colour.
+    {
+        "type": "colour_random",
+        "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
+        "output": "Colour",
+        "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
+        "colour": getColour().sensebox,
+        "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
+    },
+
+    // Block for composing a colour from RGB components.
+    {
+        "type": "colour_rgb",
+        "message0": "%{BKY_COLOUR_RGB_TITLE} %{BKY_COLOUR_RGB_RED} %1 %{BKY_COLOUR_RGB_GREEN} %2 %{BKY_COLOUR_RGB_BLUE} %3",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "RED",
+                "check": Types.getCompatibleTypes('int'),
+                "align": "RIGHT"
+            },
+            {
+                "type": "input_value",
+                "name": "GREEN",
+                "check": Types.getCompatibleTypes('int'),
+                "align": "RIGHT"
+            },
+            {
+                "type": "input_value",
+                "name": "BLUE",
+                "check": Types.getCompatibleTypes('int'),
+                "align": "RIGHT"
+            }
+        ],
+        "output": "Colour",
+        "helpUrl": "%{BKY_COLOUR_RGB_HELPURL}",
+        "colour": getColour().sensebox,
+        "tooltip": "%{BKY_COLOUR_RGB_TOOLTIP}"
+    },
+
+    // Block for blending two colours together.
+    {
+        "type": "colour_blend",
+        "message0": "%{BKY_COLOUR_BLEND_TITLE} %{BKY_COLOUR_BLEND_COLOUR1} " +
+            "%1 %{BKY_COLOUR_BLEND_COLOUR2} %2 %{BKY_COLOUR_BLEND_RATIO} %3",
+        "args0": [
+            {
+                "type": "input_value",
+                "name": "COLOUR1",
+                "check": "Colour",
+                "align": "RIGHT"
+            },
+            {
+                "type": "input_value",
+                "name": "COLOUR2",
+                "check": "Colour",
+                "align": "RIGHT"
+            },
+            {
+                "type": "input_value",
+                "name": "RATIO",
+                "check": "Number",
+                "align": "RIGHT"
+            }
+        ],
+        "output": "Colour",
+        "helpUrl": "%{BKY_COLOUR_BLEND_HELPURL}",
+        "style": "colour_blocks",
+        "tooltip": "%{BKY_COLOUR_BLEND_TOOLTIP}"
+    }
+]);  // END JSON EXTRACT (Do not delete this comment.)
+

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

@@ -1,253 +1,320 @@
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
-
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
 
 /*
 ----------------------------------LoRa--------------------------------------------------
 */
 
-Blockly.Blocks['sensebox_lora_initialize_otaa'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_otaa_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField("Initialize LoRa (OTAA)");
-
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_device_id)
-            .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_app_id)
-            .appendField(new Blockly.FieldTextInput("APP ID"), "APPID");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_app_key)
-            .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_interval)
-            .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
+Blockly.Blocks["sensebox_lora_initialize_otaa"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_init_otaa_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField("Initialize LoRa (OTAA)");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_device_id)
+      .appendField("{")
+      .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID")
+      .appendField("}");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_app_id)
+      .appendField("{")
+      .appendField(new Blockly.FieldTextInput("APP ID"), "APPID")
+      .appendField("}");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_app_key)
+      .appendField("{")
+      .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY")
+      .appendField("}");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_interval)
+      .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
 };
 
-Blockly.Blocks['sensebox_lora_initialize_abp'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField("Initialize LoRa (ABP)");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_nwskey_id)
-            .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_appskey_id)
-            .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_devaddr_id)
-            .appendField(new Blockly.FieldTextInput("DEVADDR"), "DEVADDR");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_interval)
-            .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
-        // this.appendStatementInput('DO')
-        //     .appendField(Blockly.Msg.senseBox_measurements)
-        //     .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
+Blockly.Blocks["sensebox_lora_initialize_abp"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField("Initialize LoRa (ABP)");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_nwskey_id)
+      .appendField("{")
+      .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY")
+      .appendField("}");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_appskey_id)
+      .appendField("{")
+      .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY")
+      .appendField("}");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_devaddr_id)
+      .appendField(new Blockly.FieldTextInput("DEVADDR"), "DEVADDR");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_interval)
+      .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
+    // this.appendStatementInput('DO')
+    //     .appendField(Blockly.Msg.senseBox_measurements)
+    //     .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
 };
 
-Blockly.Blocks['sensebox_lora_message_send'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_message_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendStatementInput('DO')
-            .appendField(Blockly.Msg.senseBox_LoRa_send_message)
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
+Blockly.Blocks["sensebox_lora_message_send"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_message_tooltip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendStatementInput("DO")
+      .appendField(Blockly.Msg.senseBox_LoRa_send_message)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+};
+
+Blockly.Blocks["sensebox_send_lora_sensor_value"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_sensor_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_measurement
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField("Bytes")
+      .appendField(new Blockly.FieldTextInput("2"), "MESSAGE_BYTES");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  /**
+   * 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_lora_message_send"],
 };
 
-Blockly.Blocks['sensebox_send_lora_sensor_value'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_sensor_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_measurement)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField("Bytes")
-            .appendField(new Blockly.FieldTextInput("2"), "MESSAGE_BYTES");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    /**
-     * 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_lora_message_send'],
+Blockly.Blocks["sensebox_lora_ttn_mapper"] = {
+  init: function (block) {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField("TTN Mapper");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField("Fix Type Limit")
+      .appendField(
+        new Blockly.FieldDropdown(
+          [
+            ["0", "0"],
+            ["1", "1"],
+            ["2", "2"],
+            ["3", "3"],
+          ].reverse()
+        ),
+        "dropdown"
+      );
+    // reverse() because i want 3 be be at first and i'm to lazy to write the array again
+    this.appendValueInput("Latitude")
+      .appendField(Blockly.Msg.senseBox_gps_lat)
+      .setCheck(null);
+    this.appendValueInput("Longitude")
+      .appendField(Blockly.Msg.senseBox_gps_lng)
+      .setCheck(null);
+    this.appendValueInput("Altitude")
+      .appendField(Blockly.Msg.senseBox_gps_alt)
+      .setCheck(null);
+    this.appendValueInput("pDOP").appendField("pDOP").setCheck(null);
+    this.appendValueInput("Fix Type").appendField("Fix Type").setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.sensebox_lora_ttn_mapper_tip);
+    this.setHelpUrl(Blockly.Msg.sensebox_lora_ttn_mapper_helpurl);
+  },
 };
 
-Blockly.Blocks['sensebox_lora_cayenne_send'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendStatementInput('DO')
-            .appendField(Blockly.Msg.senseBox_LoRa_send_cayenne)
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    }
+Blockly.Blocks["sensebox_lora_cayenne_send"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendStatementInput("DO")
+      .appendField(Blockly.Msg.senseBox_LoRa_send_cayenne)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
 };
-Blockly.Blocks['sensebox_lora_cayenne_temperature'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_temperature_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_temperature)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_temperature"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_temperature_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_temperature
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_humidity'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_humidity_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_humidity)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_humidity"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_humidity_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_humidity
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_pressure'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_pressure_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_pressure)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_pressure"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_pressure_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_pressure
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_luminosity'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_luminosity_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_luminosity)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_luminosity"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_luminosity_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_luminosity
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_sensor'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_analog_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('Value')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_analog)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_sensor"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_analog_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_analog
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_accelerometer'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gyros_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('X')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_x)
-        this.appendValueInput('Y')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_y)
-        this.appendValueInput('Z')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_z)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_accelerometer"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gyros_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("X").appendField(Blockly.Msg.senseBox_LoRa_cayenne_x);
+    this.appendValueInput("Y").appendField(Blockly.Msg.senseBox_LoRa_cayenne_y);
+    this.appendValueInput("Z").appendField(Blockly.Msg.senseBox_LoRa_cayenne_z);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks['sensebox_lora_cayenne_gps'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gps_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendValueInput('LAT')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lat)
-        this.appendValueInput('LNG')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lng)
-        this.appendValueInput('ALT')
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_alt)
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
+Blockly.Blocks["sensebox_lora_cayenne_gps"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gps_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("LAT").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_lat
+    );
+    this.appendValueInput("LNG").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_lng
+    );
+    this.appendValueInput("ALT").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_alt
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+};
+
+Blockly.Blocks["sensebox_lora_cayenne_concentration"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_concentration_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendValueInput("Value").appendField(
+      Blockly.Msg.senseBox_LoRa_cayenne_concentration
+    );
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };

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

@@ -0,0 +1,144 @@
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import { selectedBoard } from "../helpers/board";
+import { FieldSlider } from "@blockly/field-slider";
+
+/**
+ * Servo Motor
+ * 
+ */
+Blockly.Blocks["sensebox_motors_beginServoMotor"] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_beginServoMotor);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_beginServoMotor_pin)
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "pin")
+            .setAlign(Blockly.ALIGN_RIGHT);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_beginServoMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_beginServoMotor_helpurl);
+    },
+};
+
+Blockly.Blocks["sensebox_motors_moveServoMotor"] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_moveServoMotor);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_moveServoMotor_pin)
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "pin")
+            .setAlign(Blockly.ALIGN_RIGHT);
+        this.appendValueInput("degrees", "Number")
+            .appendField(Blockly.Msg.sensebox_motors_moveServoMotor_degrees)
+            .setAlign(Blockly.ALIGN_RIGHT);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_moveServoMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_moveServoMotor_helpurl);
+    },
+};
+
+
+/**
+ * I2C Motor Board
+ * 
+ */
+Blockly.Blocks["sensebox_motors_I2CMotorBoard_begin"] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_begin);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_I2CMotorBoard_begin_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_I2CMotorBoard_begin_helpurl);
+    },
+};
+
+Blockly.Blocks["sensebox_motors_I2CMotorBoard_moveDCMotor"] = {
+    init: function () {
+        var dropdownOptions = [[Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_left, '1'],
+        [Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_right, '2']];
+
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor)
+            .appendField(new Blockly.FieldDropdown(dropdownOptions), "motor")
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_motor);
+        this.appendValueInput("speed", "Number")
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_speed)
+            .setAlign(Blockly.ALIGN_RIGHT);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_I2CMotorBoard_moveDCMotor_helpurl);
+    },
+};
+
+Blockly.Blocks["sensebox_motors_I2CMotorBoard_stopDCMotor"] = {
+    init: function () {
+        var dropdownOptions = [[Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor_left, '1'],
+        [Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor_right, '2']];
+
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor)
+            .appendField(new Blockly.FieldDropdown(dropdownOptions), "motor")
+            .appendField(Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor_motor)
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_I2CMotorBoard_stopDCMotor_helpurl);
+    },
+};
+
+
+/**
+ * Stepper Motor
+ * 
+ */
+Blockly.Blocks["sensebox_motors_beginStepperMotor"] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_beginStepperMotor);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_beginStepperMotor_pins);
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_RIGHT)
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "in1")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "in2")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "in3")
+            .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPins), "in4");
+        this.setFieldValue("1", "in1");
+        this.setFieldValue("2", "in2");
+        this.setFieldValue("3", "in3");
+        this.setFieldValue("4", "in4");
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_beginStepperMotor_rpm)
+            .appendField(new FieldSlider(3, 1, 3), "rpm");
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_beginStepperMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_beginStepperMotor_helpurl);
+    },
+};
+
+Blockly.Blocks["sensebox_motors_moveStepperMotor"] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.sensebox_motors_moveStepperMotor);
+        this.appendValueInput("steps", "Number")
+            .setAlign(Blockly.ALIGN_RIGHT)
+            .appendField(Blockly.Msg.sensebox_motors_moveStepperMotor_step);
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+        this.setColour(getColour().motors);
+        this.setTooltip(Blockly.Msg.sensebox_motors_moveStepperMotor_tooltip);
+        this.setHelpUrl(Blockly.Msg.sensebox_motors_moveStepperMotor_helpurl);
+    },
+};

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

@@ -0,0 +1,42 @@
+import * as Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+
+Blockly.Blocks["sensebox_ntp_init"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_ntp_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_ntp_init);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_ntp_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_ntp_get"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_ntp_get_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_ntp_get)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_ntp_epochTime, "getEpochTime"],
+          [Blockly.Msg.sensebox_ntp_formattedTimeStamp, "getFormattedTime"],
+        ]),
+        "dropdown"
+      );
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_ntp_get_timestamp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_get_timestamp);
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
+  },
+};

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

@@ -1,112 +1,199 @@
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
 
+import store from "../../../store";
 
-Blockly.Blocks['sensebox_osem_connection'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_osem_connection_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_osem_connection)
-            .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_host, '"ingress.opensensemap.org"'], [Blockly.Msg.senseBox_osem_host_workshop, '"ingress.workshop.opensensemap.org"']]), "host")
-            .appendField('SSL')
-            .appendField(new Blockly.FieldCheckbox("TRUE"), "SSL");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_osem_exposure)
-            .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_osem_stationary, 'Stationary'], [Blockly.Msg.senseBox_osem_mobile, 'Mobile']]), "type");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField("senseBox ID")
-            .appendField(new Blockly.FieldTextInput("senseBox ID"), "BoxID");
-        this.appendStatementInput('DO')
-            .appendField(Blockly.Msg.senseBox_sensor)
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    onchange: function (e) {
+var boxes = store.getState().auth.user
+  ? store.getState().auth.user.boxes
+  : null;
+store.subscribe(() => {
+  boxes = store.getState().auth.user ? store.getState().auth.user.boxes : null;
+});
+var selectedBox = "";
 
-        //Blockly.Blocks.sensebox.getDescendants = blocks;
+Blockly.Blocks["sensebox_osem_connection"] = {
+  init: function () {
+    var ssl = "TRUE";
+    this.setTooltip(Blockly.Msg.senseBox_osem_connection_tip);
+    this.setHelpUrl(Blockly.Msg.senseBox_osem_connection_helpurl);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_osem_connection)
+      .appendField("SSL")
+      .appendField(new Blockly.FieldCheckbox(ssl), "SSL");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_osem_restart)
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "RESTART");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_osem_exposure)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_osem_stationary, "Stationary"],
+          [Blockly.Msg.senseBox_osem_mobile, "Mobile"],
+        ]),
+        "type"
+      );
+    if (!boxes) {
+      this.appendDummyInput()
+        .setAlign(Blockly.ALIGN_LEFT)
+        .appendField("senseBox ID")
+        .appendField(new Blockly.FieldTextInput("senseBox ID"), "BoxID");
+    } else {
+      var dropdown = [];
+      for (var i = 0; i < boxes.length; i++) {
+        dropdown.push([boxes[i].name, boxes[i]._id]);
+      }
+      this.appendDummyInput()
+        .setAlign(Blockly.ALIGN_LEFT)
+        .appendField("senseBox ID")
+        .appendField(new Blockly.FieldDropdown(dropdown), "BoxID");
+    }
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_osem_access_token)
+      .appendField(new Blockly.FieldTextInput("access_token"), "access_token");
+    this.appendStatementInput("DO")
+      .appendField(Blockly.Msg.senseBox_sensor)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.getField("type").setValidator(
+      function (val) {
+        this.updateShape_(val === "Mobile");
+      }.bind(this)
+    );
+  },
+  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);
+    }
 
-    },
-    mutationToDom: function () {
-        var container = document.createElement('mutation');
-        var input = this.getFieldValue('type');
-        this.updateShape_(input);
-        container.setAttribute('type', input);
-        return container;
-    },
-
-    domToMutation: function (xmlElement) {
-        var connections = xmlElement.getAttribute('connections');
-        this.updateShape_(connections);
-    },
     /**
-     * Modify this block to have the correct number of pins available.
-     * @param {boolean}
-     * @private
-     * @this Blockly.Block
+     * List of block types that are loops and thus do not need warnings.
+     * To add a new loop type add this to your code:
+     * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
      */
-    updateShape_: function () {
-        var extraFieldExist = this.getFieldValue('gps');
-        var input = this.getFieldValue('type');
-        if ((input === 'Mobile') && extraFieldExist === null) {
-            this.appendValueInput('lat', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_lat, 'gps');
-            this.appendValueInput('lng', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_lng);
-            this.appendValueInput('altitude', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_alt);
-            this.appendValueInput('timeStamp', 'Number')
-                .appendField(Blockly.Msg.senseBox_gps_timeStamp);
-        }
+    selectedBox = this.getFieldValue("BoxID");
+    if (selectedBox !== "" && boxes) {
+      var accessToken = boxes.find(
+        (element) => element._id === selectedBox
+      ).access_token;
+      if (accessToken !== undefined) {
+        this.getField("access_token").setValue(accessToken);
+      } else {
+        this.getField("access_token").setValue("access_token");
+      }
+    }
+  },
+  updateShape_(isMobile) {
+    if (isMobile) {
+      if (this.getInput("lat") == null) {
+        this.appendValueInput("lat", "Number").appendField(
+          Blockly.Msg.senseBox_gps_lat,
+          "gps"
+        );
+        this.appendValueInput("lng", "Number").appendField(
+          Blockly.Msg.senseBox_gps_lng
+        );
+        this.appendValueInput("altitude", "Number").appendField(
+          Blockly.Msg.senseBox_gps_alt
+        );
+        this.appendValueInput("timeStamp", "Number").appendField(
+          Blockly.Msg.senseBox_gps_timeStamp
+        );
+      }
+    } else {
+      this.removeInput("lat", true);
+      this.removeInput("lng", true);
+      this.removeInput("altitude", true);
+      this.removeInput("timeStamp", true);
+    }
+  },
+  LOOP_TYPES: ["sensebox_interval_timer"],
+};
+Blockly.Blocks["sensebox_send_to_osem"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_send_to_osem_tip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_send_to_osem);
+    if (boxes) {
+      this.appendValueInput("Value")
+        .appendField("Phänomen")
+        .appendField(
+          new Blockly.FieldDropdown(this.generateOptions),
+          "SensorID"
+        );
+    } else {
+      this.appendValueInput("Value")
+        .setAlign(Blockly.ALIGN_LEFT)
+        .appendField("Phänomen")
+        .appendField(new Blockly.FieldTextInput("sensorID"), "SensorID");
+    }
 
-        if (input === 'Stationary' && extraFieldExist !== null) {
-            this.removeInput('lat');
-            this.removeInput('lng');
-            this.removeInput('altitude');
-            this.removeInput('timeStamp');
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+
+  generateOptions: function () {
+    var dropdown = [["", ""]];
+    var boxID = selectedBox;
+    if (boxID !== "" && boxes) {
+      let box = boxes.find((el) => el._id === boxID);
+      if (box !== undefined) {
+        for (var i = 0; i < box.sensors.length; i++) {
+          dropdown.push([box.sensors[i].title, box.sensors[i]._id]);
         }
-    },
-};
-Blockly.Blocks['sensebox_send_to_osem'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_send_to_osem_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_send_to_osem);
-        this.appendValueInput('Value')
-            .setCheck(null)
-            .appendField('Sensor ID')
-            .appendField(new Blockly.FieldTextInput('Sensor ID'), 'SensorID');
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    /**
-  * 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_osem_connection'],
+      }
+      if (dropdown.length > 1) {
+        var options = dropdown.slice(1);
+        return options;
+      } else {
+        return dropdown;
+      }
+    }
+    return dropdown;
+  },
+  /**
+   * 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 () {
+    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);
+    }
+  },
+  /**
+   * List of block types that are loops and thus do not need warnings.
+   * To add a new loop type add this to your code:
+   * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
+   */
+  LOOP_TYPES: ["sensebox_osem_connection"],
 };

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

@@ -0,0 +1,142 @@
+import * as Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+
+Blockly.Blocks["sensebox_rtc_init"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_init);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_init_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_rtc_set"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_set);
+    this.appendValueInput("second").appendField(
+      Blockly.Msg.sensebox_rtc_second
+    );
+    this.appendValueInput("minutes").appendField(
+      Blockly.Msg.sensebox_rtc_minutes
+    );
+    this.appendValueInput("hour").appendField(Blockly.Msg.sensebox_rtc_hour);
+    this.appendValueInput("day").appendField(Blockly.Msg.sensebox_rtc_day);
+    this.appendValueInput("month").appendField(Blockly.Msg.sensebox_rtc_month);
+    this.appendValueInput("year").appendField(Blockly.Msg.sensebox_rtc_year);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_set_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_rtc_set_ntp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendValueInput("time").appendField(Blockly.Msg.sensebox_rtc_set_ntp);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_set_ntp_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_rtc_get"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_rtc_get)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_rtc_hour, "hour"],
+          [Blockly.Msg.sensebox_rtc_minutes, "minutes"],
+          [Blockly.Msg.sensebox_rtc_second, "seconds"],
+          [Blockly.Msg.sensebox_rtc_day, "day"],
+          [Blockly.Msg.sensebox_rtc_month, "month"],
+          [Blockly.Msg.sensebox_rtc_year, "year"],
+        ]),
+        "dropdown"
+      );
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_rtc_get_timestamp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_get_timestamp);
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
+  },
+};
+
+/**
+ *  Internal RTC
+ *
+ */
+
+Blockly.Blocks["sensebox_internal_rtc_init"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_internal_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_internal_rtc_init);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_init_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_set"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendValueInput("time").appendField(
+      Blockly.Msg.sensebox_internal_rtc_set
+    );
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_set_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_get"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.sensebox_internal_rtc_get)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.sensebox_internal_rtc_epoch, "Epoch"],
+          [Blockly.Msg.sensebox_internal_rtc_year, "Year"],
+          [Blockly.Msg.sensebox_internal_rtc_month, "Month"],
+          [Blockly.Msg.sensebox_internal_rtc_day, "Day"],
+          [Blockly.Msg.sensebox_internal_rtc_hour, "Hours"],
+          [Blockly.Msg.sensebox_internal_rtc_minutes, "Minutes"],
+          [Blockly.Msg.sensebox_internal_rtc_seconds, "Seconds"],
+        ]),
+        "dropdown"
+      );
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_get_tooltip);
+  },
+};
+
+Blockly.Blocks["sensebox_internal_rtc_get_timestamp"] = {
+  init: function () {
+    this.setHelpUrl(Blockly.Msg.sensebox_internal_rtc_helpurl);
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.sensebox_internal_rtc_get_timestamp
+    );
+    this.setOutput(true);
+    this.setTooltip(Blockly.Msg.sensebox_internal_rtc_get_timestamp_tooltip);
+  },
+};

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

@@ -1,80 +1,174 @@
-import * as Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
 
+var checkFileName = function (filename) {
+  var length = filename.length;
+  if (length > 8) {
+    alert("dateiname sollte kleiner als 8 Zeichen sein");
+    return filename.slice(0, 8);
+  }
+  return filename;
+};
 
-Blockly.Blocks['sensebox_sd_open_file'] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_sd_open_file)
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(
-                new Blockly.FieldTextInput('Data.txt'),
-                'Filename');
-        this.appendStatementInput('SD')
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().sensebox);
-        this.setTooltip(Blockly.Msg.senseBox_output_safetosd_tip);
-        this.setHelpUrl('https://sensebox.de/books');
+Blockly.Blocks["sensebox_sd_open_file"] = {
+  init: function () {
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_sd_open_file)
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(
+        new Blockly.FieldTextInput("Data", checkFileName),
+        "Filename"
+      )
+      .appendField(".")
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["txt", "txt"],
+          ["csv", "csv"],
+        ]),
+        "extension"
+      );
+    this.appendStatementInput("SD").setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_sd_open_file_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_sd_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_sd_create_file"] = {
+  init: function () {
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_sd_create_file)
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_output_filename)
+      .appendField(
+        new Blockly.FieldTextInput("Data", checkFileName),
+        "Filename"
+      )
+      .appendField(".")
+      .appendField(
+        new Blockly.FieldDropdown([
+          ["txt", "txt"],
+          ["csv", "csv"],
+        ]),
+        "extension"
+      );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_sd_create_file_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_sd_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_sd_write_file"] = {
+  init: function () {
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_sd_write_file)
+      .setAlign(Blockly.ALIGN_LEFT);
+    this.appendValueInput("DATA").setCheck(null);
+    this.appendDummyInput("CheckboxText")
+      .appendField(Blockly.Msg.senseBox_output_linebreak)
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "linebreak");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_sd_write_file_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_sd_helpurl);
+  },
+  /**
+   * 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_sd_open_file"],
 };
 
-Blockly.Blocks['sensebox_sd_create_file'] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_sd_create_file)
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_output_filename)
-            .appendField(
-                new Blockly.FieldTextInput('Data.txt'),
-                'Filename');
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().sensebox);
-        this.setTooltip(Blockly.Msg.senseBox_output_safetosd_tip);
-        this.setHelpUrl('https://sensebox.de/books');
+Blockly.Blocks["sensebox_sd_osem"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.sensebox_sd_osem_tip);
+    this.setHelpUrl(Blockly.Msg.sensebox_sd_helpurl);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.sensebox_sd_osem);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_osem_exposure)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_osem_stationary, "Stationary"],
+          [Blockly.Msg.senseBox_osem_mobile, "Mobile"],
+        ]),
+        "type"
+      );
+    this.appendValueInput("timeStamp", "Number").appendField(
+      Blockly.Msg.senseBox_gps_timeStamp
+    );
+    this.appendStatementInput("DO")
+      .appendField(Blockly.Msg.sensebox_sd_measurement)
+      .setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.getField("type").setValidator(
+      function (val) {
+        this.updateShape_(val === "Mobile");
+      }.bind(this)
+    );
+  },
+
+  updateShape_(isMobile) {
+    if (isMobile) {
+      if (this.getInput("lat") == null) {
+        this.appendValueInput("lat", "Number").appendField(
+          Blockly.Msg.senseBox_gps_lat,
+          "gps"
+        );
+        this.appendValueInput("lng", "Number").appendField(
+          Blockly.Msg.senseBox_gps_lng
+        );
+        this.appendValueInput("altitude", "Number").appendField(
+          Blockly.Msg.senseBox_gps_alt
+        );
+      }
+    } else {
+      this.removeInput("lat", true);
+      this.removeInput("lng", true);
+      this.removeInput("altitude", true);
     }
+  },
 };
 
-Blockly.Blocks['sensebox_sd_write_file'] = {
-    init: function () {
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_sd_write_file)
-            .setAlign(Blockly.ALIGN_LEFT);
-        this.appendValueInput('DATA')
-            .setCheck(null);
-        this.appendDummyInput('CheckboxText')
-            .appendField(Blockly.Msg.senseBox_output_linebreak)
-            .appendField(new Blockly.FieldCheckbox('TRUE'), 'linebreak');
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setColour(getColour().sensebox);
-        this.setTooltip(Blockly.Msg.senseBox_output_safetosd_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_sd_open_file'],
+Blockly.Blocks["sensebox_sd_save_for_osem"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.sensebox_sd_save_for_osem_tip);
+    this.setHelpUrl(Blockly.Msg.sensebox_sd_helpurl);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.sensebox_sd_save_for_osem);
+    this.appendValueInput("Value")
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.sensebox_sd_save_for_osem_id)
+      .appendField(new Blockly.FieldTextInput("sensorID"), "SensorID");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
 };

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

@@ -1,26 +1,33 @@
-import Blockly from 'blockly';
-import { getColour } from '../helpers/colour'
-import * as Types from '../helpers/types'
-import { selectedBoard } from '../helpers/board'
+import Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
+import { selectedBoard } from "../helpers/board";
+import { FieldGridDropdown } from "@blockly/field-grid-dropdown";
 
 /**
  * HDC1080 Temperature and Humidity Sensor
  *
  */
 
-Blockly.Blocks['sensebox_sensor_temp_hum'] = {
+Blockly.Blocks["sensebox_sensor_temp_hum"] = {
   init: function () {
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_temp_hum);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_temp_hum);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_temp, "Temperature"], [Blockly.Msg.senseBox_hum, "Humidity"]]), "NAME");
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_temp, "Temperature"],
+          [Blockly.Msg.senseBox_hum, "Humidity"],
+        ]),
+        "NAME"
+      );
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_temp_hum_tip);
-    this.setHelpUrl('https://edu.books.sensebox.de/de/projekte/diy_umweltstation/temp_und_luftfeuchte.html');
-  }
+    this.setTooltip(Blockly.Msg.senseBox_temp_hum_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_temp_hum_helpurl);
+    this.data = {name: "hdc1080", connection: "I2C"};
+  },
 };
 
 /**
@@ -28,43 +35,66 @@ Blockly.Blocks['sensebox_sensor_temp_hum'] = {
  *
  */
 
-
-Blockly.Blocks['sensebox_sensor_uv_light'] = {
+Blockly.Blocks["sensebox_sensor_uv_light"] = {
   init: function () {
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_uv_light);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_uv_light);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_light, "Illuminance"], [Blockly.Msg.senseBox_uv, "UvIntensity"]]), "NAME");
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_light, "Illuminance"],
+          [Blockly.Msg.senseBox_uv, "UvIntensity"],
+        ]),
+        "NAME"
+      );
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_uv_light_tip);
-    this.setHelpUrl('https://edu.books.sensebox.de/de/projekte/diy_umweltstation/temp_und_luftfeuchte.html');
-  }
+    this.setTooltip(Blockly.Msg.senseBox_uv_light_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_uv_light_helpurl);
+    this.data = {name: "veml6070"};
+  },
 };
 
 /*
 BMX055 Three differen Blocks for Accelerometer, Gyroscope, Compass
 */
 
-Blockly.Blocks['sensebox_sensor_bmx055_accelerometer'] = {
+Blockly.Blocks["sensebox_sensor_bmx055_accelerometer"] = {
   init: function () {
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_bmx055_accelerometer);
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_bmx055_accelerometer
+    );
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_LEFT)
       .appendField(Blockly.Msg.senseBox_bmx055_accelerometer_direction)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_bmx055_accelerometer_direction_x, "X"], [Blockly.Msg.senseBox_bmx055_accelerometer_direction_y, "Y"], [Blockly.Msg.senseBox_bmx055_accelerometer_direction_z, "Z"], [Blockly.Msg.senseBox_bmx055_accelerometer_direction_total, "Total"]]), "VALUE");
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_bmx055_accelerometer_direction_x, "X"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_direction_y, "Y"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_direction_z, "Z"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_direction_total, "Total"],
+        ]),
+        "VALUE"
+      );
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_LEFT)
       .appendField(Blockly.Msg.senseBox_bmx055_accelerometer_range)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_bmx055_accelerometer_range_2g, "0x3"], [Blockly.Msg.senseBox_bmx055_accelerometer_range_4g, "0x5"], [Blockly.Msg.senseBox_bmx055_accelerometer_range_8g, "0x8"], [Blockly.Msg.senseBox_bmx055_accelerometer_range_16g, "0x0C"]]), "RANGE");
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_bmx055_accelerometer_range_2g, "0x3"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_range_4g, "0x5"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_range_8g, "0x8"],
+          [Blockly.Msg.senseBox_bmx055_accelerometer_range_16g, "0x0C"],
+        ]),
+        "RANGE"
+      );
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tip);
-    this.setHelpUrl('https://edu.books.sensebox.de/de/projekte/diy_umweltstation/temp_und_luftfeuchte.html');
-  }
+    this.setTooltip(Blockly.Msg.senseBox_bmx055_accelerometer_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_bmx055_helpurl);
+    this.data = {name: "bmx055"};
+  },
 };
 
 /**
@@ -72,111 +102,112 @@ Blockly.Blocks['sensebox_sensor_bmx055_accelerometer'] = {
  *
  */
 
-Blockly.Blocks['sensebox_sensor_sds011'] = {
+Blockly.Blocks["sensebox_sensor_sds011"] = {
   init: function () {
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_sds011);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_sds011);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_sds011_pm25, "Pm25"], [Blockly.Msg.senseBox_sds011_pm10, "Pm10"]]), "NAME")
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_sds011_pm25, "pm25"],
+          [Blockly.Msg.senseBox_sds011_pm10, "pm10"],
+        ]),
+        "NAME"
+      )
       .appendField(Blockly.Msg.senseBox_sds011_dimension)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_sds011_serial1, "Serial1"], [Blockly.Msg.senseBox_sds011_serial2, "Serial2"]]), "SERIAL");
+      .appendField(
+        new Blockly.FieldDropdown(
+          selectedBoard().serialSensors),
+        "SERIAL"
+      );
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_sds011_tip);
-    this.setHelpUrl('https://edu.books.sensebox.de/de/projekte/diy_umweltstation/temp_und_luftfeuchte.html');
-  }
+    this.setTooltip(Blockly.Msg.senseBox_sds011_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_sds011_helpurl);
+    this.data = {name: "sds011"};
+  },
 };
 
-
 /**
  * BMP280 Pressure Sensor
  *
  */
 
-Blockly.Blocks['sensebox_sensor_pressure'] = {
+Blockly.Blocks["sensebox_sensor_pressure"] = {
   init: function () {
-    var dropdownOptions = [[Blockly.Msg.senseBox_pressure, "Pressure"], [Blockly.Msg.senseBox_temp, "Temperature"], [Blockly.Msg.senseBox_gps_alt, "Altitude"]];
-    var dropdown = new Blockly.FieldDropdown(dropdownOptions, function (option) {
-      var input = (option === 'Pressure') || (option === 'Temperature') || (option === 'Altitude');
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_pressure, "Pressure"],
+      [Blockly.Msg.senseBox_temp, "Temperature"],
+      [Blockly.Msg.senseBox_gps_alt, "Altitude"],
+    ];
+    var dropdown = new Blockly.FieldDropdown(dropdownOptions, function (
+      option
+    ) {
+      var input =
+        option === "Pressure" ||
+        option === "Temperature" ||
+        option === "Altitude";
       this.sourceBlock_.updateShape_(input);
     });
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_pressure_sensor);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_pressure_sensor);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
       .appendField(dropdown, "NAME");
     this.setColour(getColour().sensebox);
     this.setOutput(true, Types.DECIMAL.typeName);
-    this.setTooltip(Blockly.Msg.senseBox_pressure_tip);
-    this.setHelpUrl('https://edu.books.sensebox.de/de/projekte/diy_umweltstation/luftdruck.html');
+    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");
+      }.bind(this)
+    );
   },
-  /**
-   * Parse XML to restore the number of pins available.
-   * @param {!Element} xmlElement XML storage element.
-   * @this Blockly.Block
-   */
-
-  domToMutation: function (xmlElement) {
-    (xmlElement.getAttribute('port'));
-
-  },
-  /**
-   * Create XML to represent number of pins selection.
-   * @return {!Element} XML storage element.
-   * @this Blockly.Block
-   */
-  mutationToDom: function () {
-    var container = document.createElement('mutation');
-    var input = this.getFieldValue('NAME');
-    this.updateShape_(input);
-    container.setAttribute('NAME', input);
-    return container;
-  },
-  /**
-   * Modify this block to have the correct number of pins available.
-   * @param {boolean}
-   * @private
-   * @this Blockly.Block
-   */
-  updateShape_: function () {
-    var extraFieldExist = this.getFieldValue('referencePressure');
-    var input = this.getFieldValue('NAME');
-    if (input === 'Altitude' && extraFieldExist === null) {
-      this.appendDummyInput('extraField')
-        .setAlign(Blockly.ALIGN_RIGHT)
-        .appendField(Blockly.Msg.senseBox_pressure_referencePressure)
-        .appendField(new Blockly.FieldTextInput("1013"), "referencePressure")
-        .appendField(Blockly.Msg.senseBox_pressure_referencePressure_dim);
+  updateShape_(isAltitude) {
+    if (isAltitude) {
+      if (this.getInput("extraField") == null) {
+        this.appendDummyInput("extraField")
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField(Blockly.Msg.senseBox_pressure_referencePressure)
+          .appendField(new Blockly.FieldTextInput("1013"), "referencePressure")
+          .appendField(Blockly.Msg.senseBox_pressure_referencePressure_dim);
+      }
+    } else {
+      this.removeInput("extraField", true);
     }
-
-    if ((input === 'Pressure' || input === 'Temperature') && extraFieldExist !== null) {
-      this.removeInput('extraField');
-    }
-  }
+  },
 };
 
-
 /**
  * BME680 Environmental Sensor
  *
  */
 
-Blockly.Blocks['sensebox_sensor_bme680_bsec'] = {
+Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
   init: function () {
-    var dropdownOptions = [[Blockly.Msg.senseBox_temp, "temperature"], [Blockly.Msg.senseBox_hum, "humidity"], [Blockly.Msg.senseBox_pressure, "pressure"], [Blockly.Msg.senseBox_bme_iaq, "IAQ"], [Blockly.Msg.senseBox_bme_iaq_accuracy, "IAQAccuracy"], [Blockly.Msg.senseBox_bme_co2, "CO2"], [Blockly.Msg.senseBox_bme_breatheVocEquivalent, "breathVocEquivalent"]];
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_bme680);
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_temp, "temperature"],
+      [Blockly.Msg.senseBox_hum, "humidity"],
+      [Blockly.Msg.senseBox_bme_pressure, "pressure"],
+      [Blockly.Msg.senseBox_bme_iaq, "IAQ"],
+      [Blockly.Msg.senseBox_bme_iaq_accuracy, "IAQAccuracy"],
+      [Blockly.Msg.senseBox_bme_co2, "CO2"],
+      [Blockly.Msg.senseBox_bme_breatheVocEquivalent, "breathVocEquivalent"],
+    ];
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_bme680);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
-      .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown")
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown");
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_bme_tip);
-  }
+    this.setTooltip(Blockly.Msg.senseBox_bme_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_bme680_helpurl);
+    this.data = {name: "bme680"};
+  },
 };
 
 /**
@@ -185,14 +216,10 @@ Blockly.Blocks['sensebox_sensor_bme680_bsec'] = {
  *
  */
 
-
-Blockly.Blocks['sensebox_sensor_ultrasonic_ranger'] = {
+Blockly.Blocks["sensebox_sensor_ultrasonic_ranger"] = {
   init: function () {
-
-    var dropdownOptions = [[Blockly.Msg.senseBox_ultrasonic_port_A, 'A'],
-    [Blockly.Msg.senseBox_ultrasonic_port_B, 'B'], [Blockly.Msg.senseBox_ultrasonic_port_C, 'C']];
-    var dropdown = new Blockly.FieldDropdown(dropdownOptions, function (option) {
-      var input = (option === 'A') || (option === 'B') || (option === 'C');
+    var dropdown = new FieldGridDropdown(selectedBoard().digitalPorts, function (option) {
+      var input = option === "A" || option === "B" || option === "C";
       this.sourceBlock_.updateShape_(input);
     });
 
@@ -200,17 +227,26 @@ Blockly.Blocks['sensebox_sensor_ultrasonic_ranger'] = {
     this.appendDummyInput()
       .appendField(Blockly.Msg.senseBox_ultrasonic)
       .appendField(dropdown, "port");
-    this.appendDummyInput('TrigEcho')
+    this.appendDummyInput("TrigEcho")
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_ultrasonic_trigger)
-      .appendField(new Blockly.FieldDropdown(
-        selectedBoard().digitalPins), 'ultrasonic_trigger')
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().digitalPins),
+        "ultrasonic_trigger"
+      )
       .appendField(Blockly.Msg.senseBox_ultrasonic_echo)
-      .appendField(new Blockly.FieldDropdown(
-        selectedBoard().digitalPins), 'ultrasonic_echo');
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().digitalPins),
+        "ultrasonic_echo"
+      );
+    this.appendDummyInput("maxDistance")
+      .appendField(Blockly.Msg.senseBox_ultrasonic_maxDistance)
+      .appendField(new Blockly.FieldTextInput("250"), "maxDistance")
+      .appendField("cm");
     this.setOutput(true, Types.NUMBER.typeName);
-    this.setTooltip(Blockly.Msg.senseBox_ultrasonic_tip);
-    this.setHelpUrl('https://sensebox.de/books');
+    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.
@@ -218,8 +254,7 @@ Blockly.Blocks['sensebox_sensor_ultrasonic_ranger'] = {
    * @this Blockly.Block
    */
   domToMutation: function (xmlElement) {
-    (xmlElement.getAttribute('port'));
-
+    xmlElement.getAttribute("port");
   },
   /**
    * Create XML to represent number of pins selection.
@@ -227,8 +262,8 @@ Blockly.Blocks['sensebox_sensor_ultrasonic_ranger'] = {
    * @this Blockly.Block
    */
   mutationToDom: function () {
-    var container = document.createElement('mutation');
-    var input = this.getFieldValue('port');
+    var container = document.createElement("mutation");
+    var input = this.getFieldValue("port");
     this.updateShape_(input);
     container.setAttribute("port", input);
     return container;
@@ -240,84 +275,310 @@ Blockly.Blocks['sensebox_sensor_ultrasonic_ranger'] = {
    * @this Blockly.Block
    */
   updateShape_: function () {
-    var input = this.getFieldValue('port');
+    var input = this.getFieldValue("port");
     switch (input) {
-      case 'A':
-        this.setFieldValue('1', 'ultrasonic_trigger');
-        this.setFieldValue('2', 'ultrasonic_echo');
+      case "A":
+        this.setFieldValue("1", "ultrasonic_trigger");
+        this.setFieldValue("2", "ultrasonic_echo");
         break;
-      case 'B':
-        this.setFieldValue('3', 'ultrasonic_trigger');
-        this.setFieldValue('4', 'ultrasonic_echo');
+      case "B":
+        this.setFieldValue("3", "ultrasonic_trigger");
+        this.setFieldValue("4", "ultrasonic_echo");
         break;
-      case 'C':
-        this.setFieldValue('5', 'ultrasonic_trigger');
-        this.setFieldValue('6', 'ultrasonic_echo');
+      case "C":
+        this.setFieldValue("5", "ultrasonic_trigger");
+        this.setFieldValue("6", "ultrasonic_echo");
         break;
       default:
         break;
     }
-  }
+  },
 };
 
-
 /**
  * Microphone
  *
  */
 
-Blockly.Blocks['sensebox_sensor_sound'] = {
+Blockly.Blocks["sensebox_sensor_sound"] = {
   init: function () {
     this.setColour(getColour().sensebox);
     this.appendDummyInput()
       .appendField(Blockly.Msg.senseBox_sound)
       .appendField("Pin:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().analogPins), "PIN")
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().analogPins),
+        "PIN"
+      );
     this.setOutput(true, Types.NUMBER.typeName);
-    this.setHelpUrl(Blockly.Msg.senseBox_sound_tip);
-    this.setTooltip('Dieser Sensor mist den Geräuschpegel.');
-  }
+    this.setHelpUrl(Blockly.Msg.senseBox_sound_helpurl);
+    this.setTooltip(Blockly.Msg.senseBox_sound_tooltip);
+  },
 };
 
-
 /**
  * Button
  *
  *
  */
 
-Blockly.Blocks['sensebox_button'] = {
+Blockly.Blocks["sensebox_button"] = {
   init: function () {
     this.appendDummyInput()
       .appendField(Blockly.Msg.senseBox_button)
-      .appendField(new Blockly.FieldDropdown([[Blockly.Msg.senseBox_button_isPressed, "isPressed"], [Blockly.Msg.senseBox_button_wasPressed, "wasPressed"], [Blockly.Msg.senseBox_button_switch, "Switch"]]), "FUNCTION")
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_button_isPressed, "isPressed"],
+          [Blockly.Msg.senseBox_button_wasPressed, "wasPressed"],
+          [Blockly.Msg.senseBox_button_longPress, "longPress"],
+        ]),
+        "FUNCTION"
+      )
       .appendField("Pin:")
-      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPinsButton), "PIN");
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().digitalPinsButton),
+        "PIN"
+      );
     this.setOutput(true, Types.BOOLEAN.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_button_tip);
-    this.setHelpUrl('https://sensebox.de/books');
-  }
+    this.setTooltip(Blockly.Msg.senseBox_button_tooltip);
+    this.getField("FUNCTION").setValidator(
+      function (val) {
+        this.updateShape_(val === "longPress");
+      }.bind(this)
+    );
+  },
+  updateShape_(isLongPress) {
+    if (isLongPress) {
+      if (this.getInput("extraField") == null) {
+        this.appendDummyInput("extraField")
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField(Blockly.Msg.senseBox_button_longPress_time)
+          .appendField(new Blockly.FieldTextInput("1000"), "time")
+          .appendField("ms");
+      }
+    } else {
+      this.removeInput("extraField", true);
+    }
+  },
 };
 
-
 /**
  * SCD30 CO2 Sensor
  *
  */
 
-
-Blockly.Blocks['sensebox_scd30'] = {
+Blockly.Blocks["sensebox_scd30"] = {
   init: function () {
-    var dropdownOptions = [[Blockly.Msg.senseBox_temp, "temperature"], [Blockly.Msg.senseBox_hum, "humidity"], [Blockly.Msg.senseBox_bme_co2, "CO2"]];
-    this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_scd30);
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_scd_co2, "CO2"],
+      [Blockly.Msg.senseBox_temp, "temperature"],
+      [Blockly.Msg.senseBox_hum, "humidity"],
+    ];
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_scd30);
     this.appendDummyInput()
       .setAlign(Blockly.ALIGN_RIGHT)
       .appendField(Blockly.Msg.senseBox_value)
-      .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown")
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown");
     this.setOutput(true, Types.NUMBER.typeName);
     this.setColour(getColour().sensebox);
-    this.setTooltip(Blockly.Msg.senseBox_bme_tip);
+    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");
+    if (dropdown === "temperature" || dropdown === "humidity") {
+      this.setOutput(true, Types.DECIMAL.typeName);
+    } else if (dropdown === "CO2") {
+      this.setOutput(true, Types.NUMBER.typeName);
+    }
+  },
+};
+
+/**
+ * GPS Module
+ *
+ */
+
+Blockly.Blocks["sensebox_gps"] = {
+  init: function () {
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_gps_lat, "latitude"],
+      [Blockly.Msg.senseBox_gps_lng, "longitude"],
+      [Blockly.Msg.senseBox_gps_alt, "altitude"],
+      [Blockly.Msg.senseBox_gps_timeStamp, "timestamp"],
+      [Blockly.Msg.senseBox_gps_speed, "speed"],
+      ["pDOP", "pDOP"],
+      ["Fix Type", "fixType"],
+    ];
+    this.appendDummyInput().appendField("GPS Modul");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField(Blockly.Msg.senseBox_value)
+      .appendField(new Blockly.FieldDropdown(dropdownOptions), "dropdown");
+    this.setOutput(true, Types.NUMBER.typeName);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_gps_tooltip);
+  },
+};
+
+/**
+ * Block for Truebner STM50
+ */
+
+Blockly.Blocks["sensebox_sensor_truebner_smt50"] = {
+  init: function () { 
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_smt50);
+    this.appendDummyInput()
+      .appendField("Port:")
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_value)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_temp, "temp"],
+          [Blockly.Msg.senseBox_soil, "soil"],
+        ]),
+        "value"
+      );
+    this.setOutput(true, Types.NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.senseBox_smt50_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_smt50_helpurl);
+    this.data = {name: "smt50"};
+  },
+};
+
+/**
+ * DS18B20 Watertemperature
+ *
+ */
+
+Blockly.Blocks["sensebox_sensor_watertemperature"] = {
+  init: function () {
+
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_watertemperature)
+      .appendField("Port:")
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+    this.setOutput(true, Types.NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.senseBox_watertemperature_tip);
+    this.data = {name: "ds18b20"};
+  },
+};
+
+/**
+ * Windspeed
+ * removed for now
+
+
+Blockly.Blocks['sensebox_windspeed'] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_windspeed)
+      .appendField("Pin:")
+      .appendField(new Blockly.FieldDropdown(selectedBoard().analogPins), "PIN")
+    this.setOutput(true, Types.DECIMAL.typeName);
   }
 };
+ */
+
+/**
+ * DF Robot Soundsensor
+ */
+
+Blockly.Blocks["sensebox_soundsensor_dfrobot"] = {
+  init: function () {
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_soundsensor_dfrobot)
+      .appendField("Port:")
+      .appendField(new Blockly.FieldDropdown(selectedBoard().digitalPorts), "Port");
+    this.setOutput(true, Types.DECIMAL.typeName);
+    this.setTooltip(Blockly.Msg.senseBox_soundsensor_dfrobot_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_soundsensor_dfrobot_helpurl);
+  },
+};
+
+/**
+ * Infineon DPS310 Pressure Sensor
+ *
+ */
+
+Blockly.Blocks["sensebox_sensor_dps310"] = {
+  init: function () {
+    var dropdownOptions = [
+      [Blockly.Msg.senseBox_pressure, "Pressure"],
+      [Blockly.Msg.senseBox_temp, "Temperature"],
+      [Blockly.Msg.senseBox_gps_alt, "Altitude"],
+    ];
+    var dropdown = new Blockly.FieldDropdown(dropdownOptions, function (
+      option
+    ) {
+      var input =
+        option === "Pressure" ||
+        option === "Temperature" ||
+        option === "Altitude";
+      this.sourceBlock_.updateShape_(input);
+    });
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_sensor_dps310);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_RIGHT)
+      .appendField(Blockly.Msg.senseBox_value)
+      .appendField(dropdown, "NAME");
+    this.setColour(getColour().sensebox);
+    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");
+      }.bind(this)
+    );
+  },
+  updateShape_(isAltitude) {
+    if (isAltitude) {
+      if (this.getInput("extraField") == null) {
+        this.appendDummyInput("extraField")
+          .setAlign(Blockly.ALIGN_RIGHT)
+          .appendField(Blockly.Msg.senseBox_pressure_referencePressure)
+          .appendField(new Blockly.FieldTextInput("1013"), "referencePressure")
+          .appendField(Blockly.Msg.senseBox_pressure_referencePressure_dim);
+      }
+    } else {
+      this.removeInput("extraField", true);
+    }
+  },
+};
+
+/**
+ * Sensirion SPS30 Fine Particular Matter Sensor
+ * added 02.12.2022 
+ */
+
+ Blockly.Blocks["sensebox_sensor_sps30"] = {
+  init: function () {
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_sps30);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_value)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_sps30_1p0, "1p0"],
+          [Blockly.Msg.senseBox_sps30_2p5, "2p5"],
+          [Blockly.Msg.senseBox_sps30_4p0, "4p0"],
+          [Blockly.Msg.senseBox_sps30_10p0, "10p0"],
+        ]),
+        "value"
+      )
+      .appendField(Blockly.Msg.senseBox_sps30_dimension);
+    this.setOutput(true, Types.DECIMAL.typeName);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_sps30_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_sps30_helpurl);
+  },
+};

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

@@ -12,6 +12,7 @@ Blockly.Blocks["sensebox_telegram"] = {
             .appendField("telegram")
             .appendField(new Blockly.FieldTextInput("token"), "telegram_token");
         this.setPreviousStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_telegram_init_tooltip);
         this.setNextStatement(true, null);
     }
 };
@@ -24,6 +25,7 @@ Blockly.Blocks["sensebox_telegram_do"] = {
         this.appendStatementInput("telegram_do");
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
+        this.setTooltip(Blockly.Msg.senseBox_telegram_do_tooltip)
     }
 };
 
@@ -36,6 +38,7 @@ Blockly.Blocks["sensebox_telegram_do_on_message"] = {
             .appendField(Blockly.Msg.senseBox_telegram_message)
             .appendField(new Blockly.FieldTextInput("/message"), 'telegram_message');
         this.appendStatementInput("telegram_do_on_message").setCheck(null);
+        this.setTooltip(Blockly.Msg.senseBox_telegram_message_tooltip)
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
     }
@@ -46,8 +49,10 @@ Blockly.Blocks["sensebox_telegram_send"] = {
         this.setColour(getColour().sensebox);
         this.appendDummyInput().appendField(Blockly.Msg.senseBox_telegram_send);
         this.appendValueInput("telegram_text_to_send").setCheck(null);
+        this.setTooltip(Blockly.Msg.senseBox_telegram_send_tooltip)
         this.setPreviousStatement(true, null);
         this.setNextStatement(true, null);
+
     },
     LOOP_TYPES: ["sensebox_telegram_do_on_message"]
 };

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

@@ -1,58 +1,153 @@
-import Blockly from 'blockly';
-import { getColour } from '../helpers/colour'
+import Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
 
-Blockly.Blocks['sensebox_wifi'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_wifi_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_wifi_connect);
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_wifi_ssid)
-            .appendField(new Blockly.FieldTextInput("SSID"), "SSID");
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_output_password)
-            .appendField(new Blockly.FieldTextInput("Password"), "Password");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    },
-    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: ['arduino_functions'],
-};
-
-Blockly.Blocks['sensebox_startap'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_wifi_tip);
-        this.setHelpUrl('');
-        this.setColour(getColour().sensebox);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_wifi_startap);
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(Blockly.Msg.senseBox_wifi_ssid)
-            .appendField(new Blockly.FieldTextInput("SSID"), "SSID");
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
+Blockly.Blocks["sensebox_wifi"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_wifi_tooltip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_wifi_connect);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_wifi_ssid)
+      .appendField(new Blockly.FieldTextInput("SSID"), "SSID");
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_output_password)
+      .appendField(new Blockly.FieldTextInput("Password"), "Password");
+    this.setHelpUrl(Blockly.Msg.senseBox_wifi_helpurl);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+  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: ["arduino_functions"],
 };
+
+Blockly.Blocks["sensebox_startap"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_wifi_startap_tooltip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_wifi_startap);
+    this.appendDummyInput()
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(Blockly.Msg.senseBox_wifi_ssid)
+      .appendField(new Blockly.FieldTextInput("SSID"), "SSID");
+    this.setHelpUrl(Blockly.Msg.senseBox_wifi_helpurl);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
+};
+
+Blockly.Blocks["sensebox_ethernet"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_ethernet_tooltip);
+    this.setHelpUrl("");
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_ethernet)
+      .appendField(
+        new Blockly.FieldDropdown([
+          [Blockly.Msg.senseBox_ethernet_dhcp, "Dhcp"],
+          [Blockly.Msg.senseBox_ethernet_manuel_config, "Manual"],
+        ]),
+        "dhcp"
+      );
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_ethernet_mac)
+      .appendField(
+        new Blockly.FieldTextInput("0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED"),
+        "mac"
+      );
+
+    this.setHelpUrl(Blockly.Msg.senseBox_ethernet_helpurl);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.getField("dhcp").setValidator(
+      function (val) {
+        this.updateShape_(val === "Manual");
+      }.bind(this)
+    );
+  },
+
+  updateShape_(isManual) {
+    if (isManual) {
+      this.appendDummyInput("ip-field")
+        .appendField(Blockly.Msg.senseBox_ethernet_ip)
+        .appendField(new Blockly.FieldTextInput("192.168.1.100"), "ip");
+      this.appendDummyInput("subnetmask-field")
+        .appendField(Blockly.Msg.senseBox_ethernet_subnetmask)
+        .appendField(new Blockly.FieldTextInput("255.255.255.0"), "subnetmask");
+      this.appendDummyInput("gateway-field")
+        .appendField(Blockly.Msg.senseBox_ethernet_gateway)
+        .appendField(new Blockly.FieldTextInput("192.168.1.1"), "gateway");
+      this.appendDummyInput("dns-field")
+        .appendField(Blockly.Msg.senseBox_ethernet_dns)
+        .appendField(new Blockly.FieldTextInput("8.8.8.8"), "dns");
+    } else {
+      this.removeInput("ip-field", true);
+      this.removeInput("subnetmask-field", true);
+      this.removeInput("gateway-field", true);
+      this.removeInput("dns-field", true);
+    }
+  },
+};
+
+Blockly.Blocks["sensebox_ethernetIp"] = {
+  init: function () {
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_ethernet_ip);
+
+    this.setColour(getColour().sensebox);
+    this.setHelpUrl(Blockly.Msg.senseBox_ethernetIp_helpurl);
+    this.setTooltip(Blockly.Msg.senseBox_ethernet_ip_tooltip);
+    this.setOutput(true, null);
+  }
+};
+
+Blockly.Blocks["sensebox_wifi_status"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_wifi_status_tooltip);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_wifi_status);
+    this.setOutput(true, Types.BOOLEAN.typeName);
+    this.setHelpUrl(Blockly.Msg.senseBox_wifi_status_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_get_ip"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_wifi_ip_tooltip);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_wifi_ip);
+    this.setOutput(true, Types.TEXT.typeName);
+    this.setHelpUrl(Blockly.Msg.senseBox_wifi_ip_helpurl);
+  },
+};
+
+Blockly.Blocks["sensebox_wifi_rssi"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_wifi_rssi_tooltip);
+    this.setColour(getColour().sensebox);
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_wifi_rssi);
+    this.setOutput(true, Types.NUMBER.typeName);
+    this.setHelpUrl(Blockly.Msg.senseBox_wifi_rssi_helpurl);
+  },
+};
+

src/components/Blockly/blocks/sensebox.js

@@ -1,4 +1,36 @@
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
 
+Blockly.Blocks["sensebox_multiplexer_init"] = {
+  init: function () {
+    this.appendDummyInput().appendField(Blockly.Msg.senseBox_multiplexer_init);
+    this.appendValueInput("nrChannels").setCheck(
+      Types.getCompatibleTypes("int")
+    );
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_multplexer_nchannels
+    );
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setInputsInline("true");
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.senseBox_multiplexer_init_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_multiplexer_init_helpurl);
+  },
+};
 
-
-
+Blockly.Blocks["sensebox_multiplexer_changeChannel"] = {
+  init: function () {
+    this.appendDummyInput().appendField(
+      Blockly.Msg.senseBox_multiplexer_changeChannel
+    );
+    this.appendValueInput("Channel").setCheck(Types.getCompatibleTypes("int"));
+    this.setInputsInline("true");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().sensebox);
+    this.setTooltip(Blockly.Msg.sensebox_multiplexer_changeChannel_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_multiplexer_changeChannel_helpurl);
+  },
+};

src/components/Blockly/blocks/serial.js

@@ -0,0 +1,47 @@
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import { selectedBoard } from "../helpers/board";
+
+Blockly.Blocks["init_serial_monitor"] = {
+  init: function () {
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setColour(getColour().serial);
+    this.setHelpUrl("http://arduino.cc/en/Serial/Begin");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.ARD_SERIAL_SETUP)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().serial),
+        "SERIAL_ID"
+      )
+      .appendField(Blockly.Msg.ARD_SERIAL_SPEED)
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().serialSpeed),
+        "SPEED"
+      )
+      .appendField(Blockly.Msg.ARD_SERIAL_BPS);
+    this.setInputsInline(true);
+    this.setTooltip(Blockly.Msg.ARD_SERIAL_SETUP_TIP);
+  },
+};
+
+Blockly.Blocks["print_serial_monitor"] = {
+  init: function () {
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setColour(getColour().serial);
+    this.setHelpUrl("http://www.arduino.cc/en/Serial/Print");
+    this.appendDummyInput()
+      .appendField(
+        new Blockly.FieldDropdown(selectedBoard().serial),
+        "SERIAL_ID"
+      )
+      .appendField(Blockly.Msg.ARD_SERIAL_PRINT);
+    this.appendValueInput("CONTENT");
+    this.appendDummyInput()
+      .appendField(new Blockly.FieldCheckbox("TRUE"), "NEW_LINE")
+      .appendField(Blockly.Msg.ARD_SERIAL_PRINT_NEWLINE);
+    this.setInputsInline(true);
+    this.setTooltip(Blockly.Msg.ARD_SERIAL_PRINT_TIP);
+  },
+};

src/components/Blockly/blocks/time.js

@@ -8,123 +8,135 @@
  *     The arduino built in functions syntax can be found in
  *     http://arduino.cc/en/Reference/HomePage
  */
-import Blockly from 'blockly';
-import { getColour } from '../helpers/colour'
-import * as Types from '../helpers/types'
+import Blockly from "blockly";
+import { getColour } from "../helpers/colour";
+import * as Types from "../helpers/types";
 
-
-Blockly.Blocks['time_delay'] = {
-    /**
-     * Delay block definition
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Delay');
-        this.setColour(getColour().time);
-        this.appendValueInput('DELAY_TIME_MILI')
-            .setCheck(Types.NUMBER.checkList)
-            .appendField(Blockly.Msg.ARD_TIME_DELAY);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MS);
-        this.setInputsInline(true);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_TIP);
-    }
+Blockly.Blocks["time_delay"] = {
+  /**
+   * Delay block definition
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/Delay");
+    this.setColour(getColour().time);
+    this.appendValueInput("DELAY_TIME_MILI")
+      .setCheck(Types.NUMBER.checkList)
+      .appendField(Blockly.Msg.ARD_TIME_DELAY);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MS);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_TIP);
+  },
 };
 
-Blockly.Blocks['time_delaymicros'] = {
-    /**
-     * delayMicroseconds block definition
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DelayMicroseconds');
-        this.setColour(getColour().time);
-        this.appendValueInput('DELAY_TIME_MICRO')
-            .setCheck(Types.NUMBER.checkList)
-            .appendField(Blockly.Msg.ARD_TIME_DELAY);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
-        this.setInputsInline(true);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_MICRO_TIP);
-    }
+Blockly.Blocks["time_delaymicros"] = {
+  /**
+   * delayMicroseconds block definition
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/DelayMicroseconds");
+    this.setColour(getColour().time);
+    this.appendValueInput("DELAY_TIME_MICRO")
+      .setCheck(Types.NUMBER.checkList)
+      .appendField(Blockly.Msg.ARD_TIME_DELAY);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_MICRO_TIP);
+  },
 };
 
-Blockly.Blocks['time_millis'] = {
-    /**
-     * Elapsed time in milliseconds block definition
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
-        this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MILLIS);
-        this.setOutput(true, Types.LARGE_NUMBER.typeId);
-        this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
-    },
-    /** @return {string} The type of return value for the block, an integer. */
-    getBlockType: function () {
-        return Blockly.Types.LARGE_NUMBER;
-    }
+Blockly.Blocks["time_millis"] = {
+  /**
+   * Elapsed time in milliseconds block definition
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/Millis");
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MILLIS);
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
+  },
+  /** @return {string} The type of return value for the block, an integer. */
+  getBlockType: function () {
+    return Blockly.Types.LARGE_NUMBER;
+  },
 };
 
-Blockly.Blocks['time_micros'] = {
-    /**
-     * Elapsed time in microseconds block definition
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Micros');
-        this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_MICROS);
-        this.setOutput(true, Types.LARGE_NUMBER.typeId);
-        this.setTooltip(Blockly.Msg.ARD_TIME_MICROS_TIP);
-    },
-    /**
-     * Should be a long (32bit), but  for for now an int.
-     * @return {string} The type of return value for the block, an integer.
-     */
-    getBlockType: function () {
-        return Types.LARGE_NUMBER;
-    }
+Blockly.Blocks["time_micros"] = {
+  /**
+   * Elapsed time in microseconds block definition
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/Micros");
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MICROS);
+    this.setOutput(true, Types.LARGE_NUMBER.typeName);
+    this.setTooltip(Blockly.Msg.ARD_TIME_MICROS_TIP);
+  },
+  /**
+   * Should be a long (32bit), but  for for now an int.
+   * @return {string} The type of return value for the block, an integer.
+   */
+  getBlockType: function () {
+    return Types.LARGE_NUMBER;
+  },
 };
 
-Blockly.Blocks['infinite_loop'] = {
-    /**
-     * Waits forever, end of program.
-     * @this Blockly.Block
-     */
-    init: function () {
-        this.setHelpUrl('');
-        this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.ARD_TIME_INF);
-        this.setInputsInline(true);
-        this.setPreviousStatement(true);
-        this.setTooltip(Blockly.Msg.ARD_TIME_INF_TIP);
-    }
+Blockly.Blocks["infinite_loop"] = {
+  /**
+   * Waits forever, end of program.
+   * @this Blockly.Block
+   */
+  init: function () {
+    this.setHelpUrl("");
+    this.setColour(getColour().time);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_INF);
+    this.setInputsInline(true);
+    this.setPreviousStatement(true);
+    this.setTooltip(Blockly.Msg.ARD_TIME_INF_TIP);
+  },
 };
 
-Blockly.Blocks['sensebox_interval_timer'] = {
-    init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
-        this.setInputsInline(true);
-        this.setHelpUrl('');
-        this.setColour(getColour().time);
-        this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_interval_timer);
-        this.appendDummyInput()
-            .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(new Blockly.FieldTextInput("10000"), "interval")
-            .appendField(Blockly.Msg.senseBox_interval);
-        this.appendStatementInput('DO')
-            .setCheck(null);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-    }
+// Blockly.Blocks["sensebox_interval_timer"] = {
+//   init: function () {
+//     this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
+//     this.setInputsInline(true);
+//     this.setHelpUrl("");
+//     this.setColour(getColour().time);
+//     this.appendDummyInput().appendField(Blockly.Msg.senseBox_interval_timer);
+//     this.appendDummyInput()
+//       .setAlign(Blockly.ALIGN_LEFT)
+//       .appendField(new Blockly.FieldTextInput("10000"), "interval")
+//       .appendField(Blockly.Msg.senseBox_interval);
+//     this.appendStatementInput("DO").setCheck(null);
+//     this.setPreviousStatement(true, null);
+//     this.setNextStatement(true, null);
+//   },
+// };
+
+Blockly.Blocks["sensebox_interval_timer"] = {
+  init: function () {
+    this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
+    this.setInputsInline(true);
+    this.setHelpUrl("");
+    this.setColour(getColour().time);
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_interval_timer)
+      .appendField(new Blockly.FieldTextInput("Interval"), "name");
+    this.appendDummyInput()
+      .appendField(Blockly.Msg.senseBox_interval_time)
+      .setAlign(Blockly.ALIGN_LEFT)
+      .appendField(new Blockly.FieldTextInput("10000"), "interval")
+      .appendField(Blockly.Msg.senseBox_interval);
+    this.appendStatementInput("DO").setCheck(null);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+  },
 };

src/components/Blockly/blocks/variables.js

@@ -1,43 +1,46 @@
-import Blockly from 'blockly/core';
-import { getColour } from '../helpers/colour';
-import { getCompatibleTypes } from '../helpers/types'
-
-
-Blockly.Blocks['variables_set_dynamic'] = {
-    init: function () {
-
-        // const type = myVar.type;
-        this.setColour(getColour().variables);
-        this.setPreviousStatement(true, null);
-        this.setNextStatement(true, null);
-        this.appendValueInput('VALUE')
-            .appendField('set', 'set')
-            .appendField('', 'type')
-            .appendField(new Blockly.FieldVariable('VAR'), 'VAR')
-            .appendField('to');
-    },
-    onchange: function (e) {
-        let variableID = this.getFieldValue('VAR');
-        let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
-        this.getField('type').setValue(variable.type);
-        this.getInput('VALUE').setCheck(getCompatibleTypes(variable.type));
+import Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+import { getCompatibleTypes } from "../helpers/types";
 
+Blockly.Blocks["variables_set_dynamic"] = {
+  init: function () {
+    // const type = myVar.type;
+    this.setColour(getColour().variables);
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.appendValueInput("VALUE")
+      .appendField(Blockly.Msg.variables_set, Blockly.Msg.variables_set)
+      .appendField("", "type")
+      .appendField(new Blockly.FieldVariable("VAR"), "VAR")
+      .appendField(Blockly.Msg.variables_to);
+  },
+  onchange: function (e) {
+    let variableID = this.getFieldValue("VAR");
+    let variable = Blockly.getMainWorkspace()
+      .getVariableMap()
+      .getVariableById(variableID);
+    if (variable !== null) {
+      this.getField("type").setValue(variable.type);
+      this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
     }
-}
-
-Blockly.Blocks['variables_get_dynamic'] = {
-    init: function () {
-        this.setColour(getColour().variables);
-        this.appendDummyInput()
-            .appendField('', 'type')
-            .appendField(new Blockly.FieldVariable('VAR'), 'VAR');
-        this.setOutput(true);
-    },
-    onchange: function (e) {
-        let variableID = this.getFieldValue('VAR');
-        let variable = Blockly.getMainWorkspace().getVariableMap().getVariableById(variableID)
-        this.getField('type').setValue(variable.type);
+  },
+};
 
+Blockly.Blocks["variables_get_dynamic"] = {
+  init: function () {
+    this.setColour(getColour().variables);
+    this.appendDummyInput()
+      .appendField("", "type")
+      .appendField(new Blockly.FieldVariable("VAR"), "VAR");
+    this.setOutput(true);
+  },
+  onchange: function (e) {
+    let variableID = this.getFieldValue("VAR");
+    let variable = Blockly.getMainWorkspace()
+      .getVariableMap()
+      .getVariableById(variableID);
+    if (variable !== null) {
+      this.getField("type").setValue(variable.type);
     }
-}
-
+  },
+};

src/components/Blockly/blocks/watchdog.js

@@ -0,0 +1,28 @@
+import Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+
+Blockly.Blocks["watchdog_enable"] = {
+  init: function () {
+    this.appendDummyInput()
+      .appendField("Watchdog aktivieren")
+      .appendField(new Blockly.FieldTextInput("10000"), "TIME")
+      .appendField("ms");
+
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().io);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};
+
+Blockly.Blocks["watchdog_reset"] = {
+  init: function () {
+    this.appendDummyInput().appendField("Watchdog zurücksetzen");
+    this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
+    this.setColour(getColour().io);
+    this.setTooltip("");
+    this.setHelpUrl("");
+  },
+};

src/components/Blockly/blocks/webserver.js

@@ -0,0 +1,334 @@
+import Blockly from 'blockly/core';
+import { getColour } from '../helpers/colour';
+import { getCompatibleTypes } from '../helpers/types'
+import * as Types from '../helpers/types';
+
+/** 
+ * Webserver Blocks By Lucas Steinmann
+ *  */
+
+Blockly.Blocks['sensebox_initialize_http_server'] = {
+    init: function () {
+        this.setTooltip(Blockly.Msg.senseBox_init_http_server_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+        this.setColour(getColour().webserver);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_init_http_server);
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField("Port")
+            .appendField(new Blockly.FieldNumber(80), "Port");
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+    },
+    onchange: function (e) {
+        // Is the block nested in a loop?
+        var block = this;
+        do {
+            if (this.LOOP_TYPES.indexOf(block.type) !== -1) {
+                break;
+            }
+            block = block.getSurroundParent();
+        } while (block);
+    },
+    LOOP_TYPES: ['arduino_functions'],
+};
+
+
+Blockly.Blocks['sensebox_http_on_client_connect'] = {
+    init: function () {
+        this.setTooltip(Blockly.Msg.senseBox_http_on_client_connect_tip);
+        this.setColour(getColour().webserver);
+        this.appendDummyInput().appendField(Blockly.Msg.senseBox_http_on_client_connect);
+        this.appendStatementInput('ON_CONNECT');
+        this.setHelpUrl('https://sensebox.de/books');
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+    }
+};
+
+
+Blockly.Blocks['sensebox_http_method'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_method)
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_http_method_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    },
+    getBlockType: function () {
+        return Blockly.Types.TEXT;
+    },
+};
+
+
+Blockly.Blocks['sensebox_http_uri'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_uri)
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_http_uri_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    }
+};
+
+
+Blockly.Blocks['sensebox_http_protocol_version'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_protocol_version)
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_http_protocol_version_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    }
+};
+
+Blockly.Blocks['sensebox_ip_address'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_ip_address);
+        this.setTooltip(Blockly.Msg.senseBox_ip_address_tip);
+        this.setHelpUrl('');
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+    }
+};
+
+Blockly.Blocks['sensebox_http_user_agent'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_user_agent)
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_http_user_agent_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    }
+};
+
+Blockly.Blocks['sensebox_generate_html_doc'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_html_document);
+        this.appendValueInput('HEADER')
+            .setAlign(Blockly.ALIGN_LEFT)
+            .setCheck(getCompatibleTypes('String'))
+            .appendField(Blockly.Msg.senseBox_html_header);
+        this.appendValueInput('BODY')
+            .setAlign(Blockly.ALIGN_LEFT)
+            .setCheck(getCompatibleTypes('String'))
+            .appendField(Blockly.Msg.senseBox_html_body);
+        this.setInputsInline(false);
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_html_document_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    },
+};
+
+Blockly.Blocks['sensebox_generate_http_succesful_response'] = {
+    init: function () {
+        this.setColour(getColour().webserver);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_success);
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_http_success_l2);
+        this.appendValueInput('CONTENT')
+            .appendField(Blockly.Msg.senseBox_http_success_buildhtml)
+            .setCheck(getCompatibleTypes('String'));
+        this.setTooltip(Blockly.Msg.senseBox_http_success_tip);
+        this.setInputsInline(false);
+        this.setHelpUrl('https://sensebox.de/books');
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+    }
+};
+
+Blockly.Blocks['sensebox_generate_http_not_found_response'] = {
+    init: function () {
+        this.setTooltip(Blockly.Msg.senseBox);
+        this.setColour(getColour().webserver);
+        this.appendDummyInput().appendField(Blockly.Msg.senseBox_http_not_found);
+        this.setTooltip(Blockly.Msg.senseBox_http_not_found_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+        this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
+    }
+};
+
+
+Blockly.Blocks['sensebox_general_html_tag'] = {
+    init: function () {
+        this.setTooltip(Blockly.Msg.senseBox_html_general_tag_tip);
+        this.setColour(getColour().webserver);
+        this.appendDummyInput()
+            .appendField("<")
+            .appendField(new Blockly.FieldTextInput("Tag"), "TAG")
+            .appendField(">");
+        this.appendValueInput('DO0')
+            .setCheck(getCompatibleTypes('String'));
+        this.setInputsInline(false);
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setHelpUrl('https://sensebox.de/books');
+        this.setPreviousStatement(false);
+        this.setNextStatement(false);
+        this.setMutator(new Blockly.Mutator(['additional_child']));
+        this.additionalChildCount_ = 0;
+    },
+    /**
+     * Create XML to represent the number of else-if and else inputs.
+     * @return {Element} XML storage element.
+     * @this Blockly.Block
+     */
+    mutationToDom: function () {
+        if (!this.additionalChildCount_) {
+            return null;
+        }
+        var container = document.createElement('mutation');
+        if (this.additionalChildCount_) {
+            container.setAttribute('add_child', this.additionalChildCount_);
+        }
+        return container;
+    },
+    /**
+     * Parse XML to restore the else-if and else inputs.
+     * @param {!Element} xmlElement XML storage element.
+     * @this Blockly.Block
+     */
+    domToMutation: function (xmlElement) {
+        this.additionalChildCount_ = parseInt(xmlElement.getAttribute('add_child'), 10) || 0;
+        this.updateShape_();
+    },
+    /**
+     * Populate the mutator's dialog with this block's components.
+     * @param {!Blockly.Workspace} workspace Mutator's workspace.
+     * @return {!Blockly.Block} Root block in mutator.
+     * @this Blockly.Block
+     */
+    decompose: function (workspace) {
+        var containerBlock = workspace.newBlock('first_child');
+        containerBlock.initSvg();
+        var connection = containerBlock.nextConnection;
+        for (var i = 1; i <= this.additionalChildCount_; i++) {
+            var elseifBlock = workspace.newBlock('additional_child');
+            elseifBlock.initSvg();
+            connection.connect(elseifBlock.previousConnection);
+            connection = elseifBlock.nextConnection;
+        }
+        return containerBlock;
+    },
+    /**
+     * Reconfigure this block based on the mutator dialog's components.
+     * @param {!Blockly.Block} containerBlock Root block in mutator.
+     * @this Blockly.Block
+     */
+    compose: function (containerBlock) {
+        var clauseBlock = containerBlock.nextConnection.targetBlock();
+        // Count number of inputs.
+        this.additionalChildCount_ = 0;
+        var statementConnections = [null];
+        while (clauseBlock) {
+            switch (clauseBlock.type) {
+                case 'additional_child':
+                    this.additionalChildCount_++;
+                    statementConnections.push(clauseBlock.statementConnection_);
+                    break;
+                default:
+                    throw new Error("Unknown block type.");
+            }
+            clauseBlock = clauseBlock.nextConnection &&
+                clauseBlock.nextConnection.targetBlock();
+        }
+        this.updateShape_();
+        // Reconnect any child blocks.
+        for (var i = 1; i <= this.additionalChildCount_; i++) {
+            Blockly.Mutator.reconnect(statementConnections[i], this, 'DO' + i);
+        }
+    },
+    /**
+     * Store pointers to any connected child blocks.
+     * @param {!Blockly.Block} containerBlock Root block in mutator.
+     * @this Blockly.Block
+     */
+    saveConnections: function (containerBlock) {
+        var clauseBlock = containerBlock.nextConnection.targetBlock();
+        var i = 1;
+        while (clauseBlock) {
+            switch (clauseBlock.type) {
+                case 'additional_child':
+                    var inputDo = this.getInput('DO' + i);
+                    clauseBlock.statementConnection_ =
+                        inputDo && inputDo.connection.targetConnection;
+                    i++;
+                    break;
+                default:
+                    throw new Error('Unknown block type.');
+            }
+            clauseBlock = clauseBlock.nextConnection &&
+                clauseBlock.nextConnection.targetBlock();
+        }
+    },
+    /**
+     * Modify this block to have the correct number of inputs.
+     * @private
+     * @this Blockly.Block
+     */
+    updateShape_: function () {
+        // Delete everything.
+        var i = 1;
+        while (this.getInput('DO' + i)) {
+            this.removeInput('DO' + i);
+            i++;
+        }
+        // Rebuild block.
+        for (i = 1; i <= this.additionalChildCount_; i++) {
+            this.appendValueInput('DO' + i, Blockly.Arduino.ORDER_NONE);
+        }
+    }
+};
+
+Blockly.Blocks['first_child'] = {
+    init: function () {
+        this.setColour(getColour().webserver);
+        this.appendDummyInput()
+            .appendField("<Tag>");
+        this.setNextStatement(true);
+        this.setInputsInline(true);
+        this.setTooltip(Blockly.Msg.senseBox_tag_first_mutator_tip);
+        this.contextMenu = false;
+    }
+};
+
+
+Blockly.Blocks['additional_child'] = {
+    init: function () {
+        this.setColour(getColour().webserver);
+        this.appendDummyInput()
+            .appendField("<Tag>");
+        this.setPreviousStatement(true);
+        this.setInputsInline(true);
+        this.setNextStatement(true);
+        this.setTooltip(Blockly.Msg.senseBox_tag_optional_mutator_tip);
+        this.contextMenu = false;
+    }
+};
+
+// Additional Webserver Blocks
+
+Blockly.Blocks['sensebox_web_readHTML'] = {
+    init: function () {
+        this.appendDummyInput()
+            .appendField(Blockly.Msg.senseBox_sd_web_readHTML)
+            .setAlign(Blockly.ALIGN_LEFT);
+        this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.sensebox_web_readHTML_filename)
+            .appendField(new Blockly.FieldTextInput("index.txt"), "FILENAME");
+        this.setOutput(true, Types.TEXT.typeName);
+        this.setColour(getColour().webserver);
+        this.setTooltip(Blockly.Msg.senseBox_output_safetosd_tip);
+        this.setHelpUrl('https://sensebox.de/books');
+    }
+};

src/components/Blockly/generator/generator.js

@@ -24,13 +24,24 @@
 // More on generating code:
 // https://developers.google.com/blockly/guides/create-custom-blocks/generating-code
 
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
+
+import store from "../../../store";
+
+var ota = store.getState().general.platform
+  ? store.getState().general.platform
+  : null;
+store.subscribe(() => {
+  ota = store.getState().general.platform
+    ? store.getState().general.platform
+    : null;
+});
 
 /**
  * Arduino code generator.
  * @type !Blockly.Generator
  */
-Blockly['Arduino'] = new Blockly.Generator('Arduino');
+Blockly["Arduino"] = new Blockly.Generator("Arduino");
 
 /**
  * List of illegal variable names.
@@ -39,49 +50,44 @@ Blockly['Arduino'] = new Blockly.Generator('Arduino');
  * accidentally clobbering a built-in object or function.
  * @private
  */
-Blockly['Arduino'].addReservedWords(
-    // http://arduino.cc/en/Reference/HomePage
-    'setup,loop,if,else,for,switch,case,while,' +
-    'do,break,continue,return,goto,define,include,' +
-    'HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false,' +
-    'interger, constants,floating,point,void,bookean,char,' +
-    'unsigned,byte,int,word,long,float,double,string,String,array,' +
-    'static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead,' +
-    'analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn,' +
-    'pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain,' +
-    'map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead,' +
-    'bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor,' +
-    'bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts',
-    'short',
-    'isBtnPressed'
+Blockly["Arduino"].addReservedWords(
+  // http://arduino.cc/en/Reference/HomePage
+  "setup,loop,if,else,for,switch,case,while," +
+    "do,break,continue,return,goto,define,include," +
+    "HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false," +
+    "interger, constants,floating,point,void,boolean,char," +
+    "unsigned,byte,int,word,long,float,double,string,String,array," +
+    "static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead," +
+    "analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn," +
+    "pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain," +
+    "map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead," +
+    "bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor," +
+    "bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts,short,isBtnPressed"
 );
 
 /**
  * Order of operation ENUMs.
  *
  */
-Blockly['Arduino'].ORDER_ATOMIC = 0; // 0 "" ...
-Blockly['Arduino'].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
-Blockly['Arduino'].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
-Blockly['Arduino'].ORDER_MULTIPLICATIVE = 3; // * / % ~/
-Blockly['Arduino'].ORDER_ADDITIVE = 4; // + -
-Blockly['Arduino'].ORDER_LOGICAL_NOT = 4.4; // !
-Blockly['Arduino'].ORDER_SHIFT = 5; // << >>
-Blockly['Arduino'].ORDER_MODULUS = 5.3; // %
-Blockly['Arduino'].ORDER_RELATIONAL = 6; // is is! >= > <= <
-Blockly['Arduino'].ORDER_EQUALITY = 7; // === !== === !==
-Blockly['Arduino'].ORDER_BITWISE_AND = 8; // &
-Blockly['Arduino'].ORDER_BITWISE_XOR = 9; // ^
-Blockly['Arduino'].ORDER_BITWISE_OR = 10; // |
-Blockly['Arduino'].ORDER_LOGICAL_AND = 11; // &&
-Blockly['Arduino'].ORDER_LOGICAL_OR = 12; // ||
-Blockly['Arduino'].ORDER_CONDITIONAL = 13; // expr ? expr : expr
-Blockly['Arduino'].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
-Blockly['Arduino'].ORDER_COMMA = 18; // ,
-Blockly['Arduino'].ORDER_NONE = 99; // (...)
-
-
-
+Blockly["Arduino"].ORDER_ATOMIC = 0; // 0 "" ...
+Blockly["Arduino"].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
+Blockly["Arduino"].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
+Blockly["Arduino"].ORDER_MULTIPLICATIVE = 3; // * / % ~/
+Blockly["Arduino"].ORDER_ADDITIVE = 4; // + -
+Blockly["Arduino"].ORDER_LOGICAL_NOT = 4.4; // !
+Blockly["Arduino"].ORDER_SHIFT = 5; // << >>
+Blockly["Arduino"].ORDER_MODULUS = 5.3; // %
+Blockly["Arduino"].ORDER_RELATIONAL = 6; // is is! >= > <= <
+Blockly["Arduino"].ORDER_EQUALITY = 7; // === !== === !==
+Blockly["Arduino"].ORDER_BITWISE_AND = 8; // &
+Blockly["Arduino"].ORDER_BITWISE_XOR = 9; // ^
+Blockly["Arduino"].ORDER_BITWISE_OR = 10; // |
+Blockly["Arduino"].ORDER_LOGICAL_AND = 11; // &&
+Blockly["Arduino"].ORDER_LOGICAL_OR = 12; // ||
+Blockly["Arduino"].ORDER_CONDITIONAL = 13; // expr ? expr : expr
+Blockly["Arduino"].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
+Blockly["Arduino"].ORDER_COMMA = 18; // ,
+Blockly["Arduino"].ORDER_NONE = 99; // (...)
 
 /**
  *
@@ -90,102 +96,59 @@ Blockly['Arduino'].ORDER_NONE = 99; // (...)
  * Blockly Types
  */
 
-
-
-
 /**
  * Initialise the database of variable names.
  * @param {!Blockly.Workspace} workspace Workspace to generate code from.
  */
-Blockly['Arduino'].init = function (workspace) {
-    // Create a dictionary of definitions to be printed before the code.
-    Blockly['Arduino'].libraries_ = Object.create(null);
+Blockly["Arduino"].init = function (workspace) {
+  // Create a dictionary of definitions to be printed before the code.
+  Blockly["Arduino"].libraries_ = Object.create(null);
 
-    Blockly['Arduino'].definitions_ = Object.create(null);
+  Blockly["Arduino"].definitions_ = Object.create(null);
 
-    // creates a list of code to be setup before the setup block
-    Blockly['Arduino'].setupCode_ = Object.create(null);
+  // creates a list of code to be setup before the setup block
+  Blockly["Arduino"].setupCode_ = Object.create(null);
 
-    // creates a list of code for the loop to be runned once
-    Blockly['Arduino'].loopCodeOnce_ = Object.create(null)
+  // creates a list of code to be setup before the setup block
+  Blockly["Arduino"].phyphoxSetupCode_ = Object.create(null);
 
-    // creates a list of code for the loop to be runned once
-    Blockly['Arduino'].codeFunctions_ = Object.create(null)
+  // creates a list of code to be setup before the setup block
+  Blockly["Arduino"].loraSetupCode_ = Object.create(null);
 
-    // creates a list of code variables  
-    Blockly['Arduino'].variables_ = Object.create(null)
+  // creates a list of code for the loop to be runned once
+  Blockly["Arduino"].loopCodeOnce_ = Object.create(null);
 
-    // Create a dictionary mapping desired function names in definitions_
-    // to actual function names (to avoid collisions with user functions).
-    Blockly['Arduino'].functionNames_ = Object.create(null);
+  // creates a list of code for the loop to be runned once
+  Blockly["Arduino"].codeFunctions_ = Object.create(null);
 
-    Blockly['Arduino'].variablesInitCode_ = '';
+  // creates a list of code variables
+  Blockly["Arduino"].variables_ = Object.create(null);
 
-    if (!Blockly['Arduino'].variableDB_) {
-        Blockly['Arduino'].variableDB_ = new Blockly.Names(
-            Blockly['Arduino'].RESERVED_WORDS_
-        );
-    } else {
-        Blockly['Arduino'].variableDB_.reset();
-    }
+  // Create a dictionary mapping desired function names in definitions_
+  // to actual function names (to avoid collisions with user functions).
+  Blockly["Arduino"].functionNames_ = Object.create(null);
 
-    Blockly['Arduino'].variableDB_.setVariableMap(workspace.getVariableMap());
+  Blockly["Arduino"].variablesInitCode_ = "";
 
-    // We don't have developer variables for now
-    // // Add developer variables (not created or named by the user).
-    // var devVarList = Blockly.Variables.allDeveloperVariables(workspace);
-    // for (var i = 0; i < devVarList.length; i++) {
-    //     defvars.push(Blockly['Arduino'].variableDB_.getName(devVarList[i],
-    //         Blockly.Names.DEVELOPER_VARIABLE_TYPE));
-    // }
+  if (!Blockly["Arduino"].nameDB_) {
+    Blockly["Arduino"].nameDB_ = new Blockly.Names(
+      Blockly["Arduino"].RESERVED_WORDS_
+    );
+  } else {
+    Blockly["Arduino"].nameDB_.reset();
+  }
 
-    const doubleVariables = workspace.getVariablesOfType('Number');
-    let i = 0;
-    let variableCode = '';
-    for (i = 0; i < doubleVariables.length; i += 1) {
-        variableCode +=
-            'double ' +
-            Blockly['Arduino'].variableDB_.getName(
-                doubleVariables[i].getId(),
-                Blockly.Variables.NAME_TYPE
-            ) +
-            ' = 0; \n\n';
-    }
+  Blockly["Arduino"].nameDB_.setVariableMap(workspace.getVariableMap());
 
-    const stringVariables = workspace.getVariablesOfType('String');
-    for (i = 0; i < stringVariables.length; i += 1) {
-        variableCode +=
-            'String ' +
-            Blockly['Arduino'].variableDB_.getName(
-                stringVariables[i].getId(),
-                Blockly.Variables.NAME_TYPE
-            ) +
-            ' = ""; \n\n';
-    }
+  // We don't have developer variables for now
+  // // Add developer variables (not created or named by the user).
+  // var devVarList = Blockly.Variables.allDeveloperVariables(workspace);
+  // for (var i = 0; i < devVarList.length; i++) {
+  //     defvars.push(Blockly['Arduino'].nameDB_.getName(devVarList[i],
+  //         Blockly.Names.DEVELOPER_VARIABLE_TYPE));
+  // }
 
-    const booleanVariables = workspace.getVariablesOfType('Boolean');
-    for (i = 0; i < booleanVariables.length; i += 1) {
-        variableCode +=
-            'boolean ' +
-            Blockly['Arduino'].variableDB_.getDistinctName(
-                booleanVariables[i].getId(),
-                Blockly.Variables.NAME_TYPE
-            ) +
-            ' = false; \n\n';
-    }
 
-    const colourVariables = workspace.getVariablesOfType('Colour');
-    for (i = 0; i < colourVariables.length; i += 1) {
-        variableCode +=
-            'RGB ' +
-            Blockly['Arduino'].variableDB_.getName(
-                colourVariables[i].getId(),
-                Blockly.Variables.NAME_TYPE
-            ) +
-            ' = {0, 0, 0}; \n\n';
-    }
-
-    Blockly['Arduino'].variablesInitCode_ = variableCode;
 };
 
 /**
@@ -193,81 +156,120 @@ Blockly['Arduino'].init = function (workspace) {
  * @param {string} code Generated code.
  * @return {string} Completed code.
  */
-Blockly['Arduino'].finish = function (code) {
-    let libraryCode = '';
-    let variablesCode = '';
-    let codeFunctions = '';
-    let functionsCode = '';
-    let definitionsCode = '';
-    let loopCodeOnce = '';
-    let setupCode = '';
-    let preSetupCode = '';
-    let devVariables = '\n';
+Blockly["Arduino"].finish = function (code) {
+  let libraryCode = "";
+  let variablesCode = "";
+  let codeFunctions = "";
+  let functionsCode = "";
+  let definitionsCode = "";
+  let phyphoxSetupCode = "";
+  let loopCodeOnce = "";
+  let setupCode = "";
+  let preSetupCode = "";
+  let loraSetupCode = "";
+  let devVariables = "\n";
 
-    for (const key in Blockly['Arduino'].libraries_) {
-        libraryCode += Blockly['Arduino'].libraries_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].libraries_) {
+    libraryCode += Blockly["Arduino"].libraries_[key] + "\n";
+  }
 
-    for (const key in Blockly['Arduino'].variables_) {
-        variablesCode += Blockly['Arduino'].variables_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].variables_) {
+    variablesCode += Blockly["Arduino"].variables_[key] + "\n";
+  }
 
-    for (const key in Blockly['Arduino'].definitions_) {
-        definitionsCode += Blockly['Arduino'].definitions_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].definitions_) {
+    definitionsCode += Blockly["Arduino"].definitions_[key] + "\n";
+  }
 
-    for (const key in Blockly['Arduino'].loopCodeOnce_) {
-        loopCodeOnce += Blockly['Arduino'].loopCodeOnce_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].loopCodeOnce_) {
+    loopCodeOnce += Blockly["Arduino"].loopCodeOnce_[key] + "\n";
+  }
 
-    for (const key in Blockly['Arduino'].codeFunctions_) {
-        codeFunctions += Blockly['Arduino'].codeFunctions_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].codeFunctions_) {
+    codeFunctions += Blockly["Arduino"].codeFunctions_[key] + "\n";
+  }
 
-    for (const key in Blockly['Arduino'].functionNames_) {
-        functionsCode += Blockly['Arduino'].functionNames_[key] + '\n';
-    }
+  for (const key in Blockly["Arduino"].functionNames_) {
+    functionsCode += Blockly["Arduino"].functionNames_[key] + "\n";
+  }
 
+  for (const key in Blockly["Arduino"].setupCode_) {
+    preSetupCode += Blockly["Arduino"].setupCode_[key] + "\n" || "";
+  }
 
+  for (const key in Blockly["Arduino"].loraSetupCode_) {
+    loraSetupCode += Blockly["Arduino"].loraSetupCode_[key] + "\n" || "";
+  }
 
-    for (const key in Blockly['Arduino'].setupCode_) {
-        preSetupCode += Blockly['Arduino'].setupCode_[key] || '';
-    }
-    setupCode = '\nvoid setup() { \n' + preSetupCode + '\n}\n';
-
-    let loopCode = '\nvoid loop() { \n' + loopCodeOnce + code + '\n}\n';
+  setupCode =
+    "\nvoid setup() { \n" + preSetupCode + "\n" + loraSetupCode + "\n}\n";
+  for (const key in Blockly["Arduino"].phyphoxSetupCode_) {
+    phyphoxSetupCode += Blockly["Arduino"].phyphoxSetupCode_[key] + "\n" || "";
+  }
 
+  setupCode =
+    "\nvoid setup() { \n" +
+    preSetupCode +
+    "\n" +
+    phyphoxSetupCode +
+    "\n" +
+    loraSetupCode +
+    "\n}\n";
 
+  let loopCode = "\nvoid loop() { \n" + loopCodeOnce + code + "\n}\n";
+  // only add OTA code if tablet mode is enabled
+  if (ota === true) {
+    code =
+      devVariables +
+      "\n" +
+      "#include <SenseBoxOTA.h>" +
+      "\n" +
+      libraryCode +
+      "\n" +
+      variablesCode +
+      "\n" +
+      definitionsCode +
+      "\n" +
+      codeFunctions +
+      "\n" +
+      Blockly["Arduino"].variablesInitCode_ +
+      "\n" +
+      functionsCode +
+      "\n" +
+      setupCode +
+      "\n" +
+      loopCode;
+  } else {
     // Convert the definitions dictionary into a list.
     code =
-        devVariables +
-        '\n' +
-        libraryCode +
-        '\n' +
-        variablesCode +
-        '\n' +
-        definitionsCode +
-        '\n' +
-        codeFunctions +
-        '\n' +
-        Blockly['Arduino'].variablesInitCode_ +
-        '\n' +
-        functionsCode +
-        '\n' +
-        setupCode +
-        '\n' +
-        loopCode
-        ;
+      devVariables +
+      "\n" +
+      libraryCode +
+      "\n" +
+      variablesCode +
+      "\n" +
+      definitionsCode +
+      "\n" +
+      codeFunctions +
+      "\n" +
+      Blockly["Arduino"].variablesInitCode_ +
+      "\n" +
+      functionsCode +
+      "\n" +
+      setupCode +
+      "\n" +
+      loopCode;
+  }
 
-    // Clean up temporary data.
-    delete Blockly['Arduino'].definitions_;
-    delete Blockly['Arduino'].functionNames_;
-    delete Blockly['Arduino'].loopCodeOnce_;
-    delete Blockly['Arduino'].variablesInitCode_;
-    delete Blockly['Arduino'].libraries_;
-    Blockly['Arduino'].variableDB_.reset();
+  // Clean up temporary data.
+  delete Blockly["Arduino"].definitions_;
+  delete Blockly["Arduino"].functionNames_;
+  delete Blockly["Arduino"].loopCodeOnce_;
+  delete Blockly["Arduino"].variablesInitCode_;
+  delete Blockly["Arduino"].libraries_;
+  Blockly["Arduino"].nameDB_.reset();
 
-    return code;
+  return code;
 };
 
 /**
@@ -276,8 +278,8 @@ Blockly['Arduino'].finish = function (code) {
  * @param {string} line Line of generated code.
  * @return {string} Legal line of code.
  */
-Blockly['Arduino'].scrubNakedValue = function (line) {
-    return line + ';\n';
+Blockly["Arduino"].scrubNakedValue = function (line) {
+  return line + ";\n";
 };
 
 /**
@@ -287,14 +289,14 @@ Blockly['Arduino'].scrubNakedValue = function (line) {
  * @return {string} Arduino string.
  * @private
  */
-Blockly['Arduino'].quote_ = function (string) {
-    // Can't use goog.string.quote since Google's style guide recommends
-    // JS string literals use single quotes.
-    string = string
-        .replace(/\\/g, '\\\\')
-        .replace(/\n/g, '\\\n')
-        .replace(/'/g, "\\'");
-    return '"' + string + '"';
+Blockly["Arduino"].quote_ = function (string) {
+  // Can't use goog.string.quote since Google's style guide recommends
+  // JS string literals use single quotes.
+  string = string
+    .replace(/\\/g, "\\\\")
+    .replace(/\n/g, "\\\n")
+    .replace(/'/g, "\\'");
+  return '"' + string + '"';
 };
 
 /**
@@ -307,43 +309,42 @@ Blockly['Arduino'].quote_ = function (string) {
  * @return {string} Arduino code with comments and subsequent blocks added.
  * @private
  */
-Blockly['Arduino'].scrub_ = function (block, code) {
-    let commentCode = '';
-    // Only collect comments for blocks that aren't inline.
-    if (!block.outputConnection || !block.outputConnection.targetConnection) {
-        // Collect comment for this block.
-        let comment = block.getCommentText();
-        //@ts-ignore
-        comment = comment ? Blockly.utils.string.wrap(
-            comment,
-            Blockly['Arduino'].COMMENT_WRAP - 3
-        ) : null;
-        if (comment) {
-            if (block.getProcedureDef) {
-                // Use a comment block for function comments.
-                commentCode +=
-                    '/**\n' +
-                    Blockly['Arduino'].prefixLines(comment + '\n', ' * ') +
-                    ' */\n';
-            } else {
-                commentCode += Blockly['Arduino'].prefixLines(comment + '\n', '// ');
-            }
-        }
-        // Collect comments for all value arguments.
-        // Don't collect comments for nested statements.
-        for (let i = 0; i < block.inputList.length; i++) {
-            if (block.inputList[i].type === Blockly.INPUT_VALUE) {
-                const childBlock = block.inputList[i].connection.targetBlock();
-                if (childBlock) {
-                    const comment = Blockly['Arduino'].allNestedComments(childBlock);
-                    if (comment) {
-                        commentCode += Blockly['Arduino'].prefixLines(comment, '// ');
-                    }
-                }
-            }
-        }
+Blockly["Arduino"].scrub_ = function (block, code) {
+  let commentCode = "";
+  // Only collect comments for blocks that aren't inline.
+  if (!block.outputConnection || !block.outputConnection.targetConnection) {
+    // Collect comment for this block.
+    let comment = block.getCommentText();
+    //@ts-ignore
+    comment = comment
+      ? Blockly.utils.string.wrap(comment, Blockly["Arduino"].COMMENT_WRAP - 3)
+      : null;
+    if (comment) {
+      if (block.getProcedureDef) {
+        // Use a comment block for function comments.
+        commentCode +=
+          "/**\n" +
+          Blockly["Arduino"].prefixLines(comment + "\n", " * ") +
+          " */\n";
+      } else {
+        commentCode += Blockly["Arduino"].prefixLines(comment + "\n", "// ");
+      }
     }
-    const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
-    const nextCode = Blockly['Arduino'].blockToCode(nextBlock);
-    return commentCode + code + nextCode;
+    // Collect comments for all value arguments.
+    // Don't collect comments for nested statements.
+    for (let i = 0; i < block.inputList.length; i++) {
+      if (block.inputList[i].type === Blockly.INPUT_VALUE) {
+        const childBlock = block.inputList[i].connection.targetBlock();
+        if (childBlock) {
+          const comment = Blockly["Arduino"].allNestedComments(childBlock);
+          if (comment) {
+            commentCode += Blockly["Arduino"].prefixLines(comment, "// ");
+          }
+        }
+      }
+    }
+  }
+  const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
+  const nextCode = Blockly["Arduino"].blockToCode(nextBlock);
+  return commentCode + code + nextCode;
 };

src/components/Blockly/generator/index.js

@@ -1,21 +1,29 @@
-import './generator';
-import './loops';
-import './sensebox-sensors';
-import './sensebox-telegram';
-import './sensebox-osem';
-import './sensebox-web';
-import './sensebox-display';
-import './sensebox-lora';
-import './sensebox-led';
-import './sensebox-sd';
-import './logic';
-import './text';
-import './math';
-import './map';
-import './io';
-import './audio';
-import './procedures';
-import './time';
-import './variables';
-
-
+import "./generator";
+import "./loops";
+import "./sensebox-sensors";
+import "./sensebox-telegram";
+import "./sensebox-osem";
+import "./sensebox-web";
+import "./sensebox-display";
+import "./sensebox-motors";
+import "./sensebox-lora";
+import "./sensebox-led";
+import "./sensebox";
+import "./sensebox-rtc";
+import "./sensebox-ntp";
+import "./sensebox-ble";
+import "./sensebox-sd";
+import "./mqtt";
+import "./logic";
+import "./text";
+import "./math";
+import "./map";
+import "./io";
+import "./audio";
+import "./procedures";
+import "./serial";
+import "./time";
+import "./variables";
+import "./lists";
+import "./watchdog";
+import "./webserver";

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/logic.js

@@ -74,14 +74,14 @@ Blockly.Arduino['controls_if'] = function (Block) {
             conditionCode +
             ') {\n' +
             branchCode +
-            '}';
+            '}\n';
 
         ++n;
     } while (Block.getInput('IF' + n));
 
     if (Block.getInput('ELSE')) {
         branchCode = Blockly.Arduino.statementToCode(Block, 'ELSE');
-        code += ' else {\n' + branchCode + '}';
+        code += ' else {\n' + branchCode + '}\n';
     }
     return code + '\n';
 };
@@ -106,14 +106,14 @@ Blockly.Arduino['controls_ifelse'] = function (Block) {
             conditionCode +
             ') {\n' +
             branchCode +
-            '}';
+            '}\n';
 
         ++n;
     } while (Block.getInput('IF' + n));
 
     if (Block.getInput('ELSE')) {
         branchCode = Blockly.Arduino.statementToCode(Block, 'ELSE');
-        code += ' else {\n' + branchCode + '}';
+        code += ' else {\n' + branchCode + '}\n';
     }
     return code + '\n';
 }
@@ -127,9 +127,6 @@ Blockly.Arduino['logic_negate'] = function (Block) {
 };
 
 
-
-
-
 Blockly.Arduino['switch_case'] = function (block) {
     var n = 0;
     var argument = Blockly.Arduino.valueToCode(this, 'CONDITION',

src/components/Blockly/generator/math.js

@@ -1,5 +1,4 @@
-
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
 
 /**
  * @license Licensed under the Apache License, Version 2.0 (the "License"):
@@ -19,15 +18,15 @@ import * as Blockly from 'blockly/core';
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_number'] = function (block) {
-    // Numeric value.
-    var code = parseFloat(block.getFieldValue('NUM'));
-    if (code === Infinity) {
-        code = 'INFINITY';
-    } else if (code === -Infinity) {
-        code = '-INFINITY';
-    }
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+Blockly.Arduino["math_number"] = function (block) {
+  // Numeric value.
+  var code = parseFloat(block.getFieldValue("NUM"));
+  if (code === Infinity) {
+    code = "INFINITY";
+  } else if (code === -Infinity) {
+    code = "-INFINITY";
+  }
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 
 /**
@@ -37,27 +36,27 @@ Blockly.Arduino['math_number'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_arithmetic'] = function (block) {
-    var OPERATORS = {
-        ADD: [' + ', Blockly.Arduino.ORDER_ADDITIVE],
-        MINUS: [' - ', Blockly.Arduino.ORDER_ADDITIVE],
-        MULTIPLY: [' * ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-        DIVIDE: [' / ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-        POWER: [null, Blockly.Arduino.ORDER_NONE]  // Handle power separately.
-    };
-    var tuple = OPERATORS[block.getFieldValue('OP')];
-    var operator = tuple[0];
-    var order = tuple[1];
-    var argument0 = Blockly.Arduino.valueToCode(block, 'A', order) || '0';
-    var argument1 = Blockly.Arduino.valueToCode(block, 'B', order) || '0';
-    var code;
-    // Power in C++ requires a special case since it has no operator.
-    if (!operator) {
-        code = 'Math.pow(' + argument0 + ', ' + argument1 + ')';
-        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-    }
-    code = argument0 + operator + argument1;
-    return [code, order];
+Blockly.Arduino["math_arithmetic"] = function (block) {
+  var OPERATORS = {
+    ADD: [" + ", Blockly.Arduino.ORDER_ADDITIVE],
+    MINUS: [" - ", Blockly.Arduino.ORDER_ADDITIVE],
+    MULTIPLY: [" * ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+    DIVIDE: [" / ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+    POWER: [null, Blockly.Arduino.ORDER_NONE], // Handle power separately.
+  };
+  var tuple = OPERATORS[block.getFieldValue("OP")];
+  var operator = tuple[0];
+  var order = tuple[1];
+  var argument0 = Blockly.Arduino.valueToCode(block, "A", order) || "0";
+  var argument1 = Blockly.Arduino.valueToCode(block, "B", order) || "0";
+  var code;
+  // Power in C++ requires a special case since it has no operator.
+  if (!operator) {
+    code = "Math.pow(" + argument0 + ", " + argument1 + ")";
+    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+  }
+  code = argument0 + operator + argument1;
+  return [code, order];
 };
 
 /**
@@ -66,90 +65,103 @@ Blockly.Arduino['math_arithmetic'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_single'] = function (block) {
-    var operator = block.getFieldValue('OP');
-    var code;
-    var arg;
-    if (operator === 'NEG') {
-        // Negation is a special case given its different operator precedents.
-        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-            Blockly.Arduino.ORDER_UNARY_PREFIX) || '0';
-        if (arg[0] === '-') {
-            // --3 is not legal in C++ in this context.
-            arg = ' ' + arg;
-        }
-        code = '-' + arg;
-        return [code, Blockly.Arduino.ORDER_UNARY_PREFIX];
+Blockly.Arduino["math_single"] = function (block) {
+  var operator = block.getFieldValue("OP");
+  var code;
+  var arg;
+  if (operator === "NEG") {
+    // Negation is a special case given its different operator precedents.
+    arg =
+      Blockly.Arduino.valueToCode(
+        block,
+        "NUM",
+        Blockly.Arduino.ORDER_UNARY_PREFIX
+      ) || "0";
+    if (arg[0] === "-") {
+      // --3 is not legal in C++ in this context.
+      arg = " " + arg;
     }
-    if (operator === 'ABS' || operator.substring(0, 5) === 'ROUND') {
-        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-            Blockly.Arduino.ORDER_UNARY_POSTFIX) || '0';
-    } else if (operator === 'SIN' || operator === 'COS' || operator === 'TAN') {
-        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-            Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-    } else {
-        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-            Blockly.Arduino.ORDER_NONE) || '0';
-    }
-    // First, handle cases which generate values that don't need parentheses.
-    switch (operator) {
-        case 'ABS':
-            code = 'abs(' + arg + ')';
-            break;
-        case 'ROOT':
-            code = 'sqrt(' + arg + ')';
-            break;
-        case 'LN':
-            code = 'log(' + arg + ')';
-            break;
-        case 'EXP':
-            code = 'exp(' + arg + ')';
-            break;
-        case 'POW10':
-            code = 'pow(10,' + arg + ')';
-            break;
-        case 'ROUND':
-            code = 'round(' + arg + ')';
-            break;
-        case 'ROUNDUP':
-            code = 'ceil(' + arg + ')';
-            break;
-        case 'ROUNDDOWN':
-            code = 'floor(' + arg + ')';
-            break;
-        case 'SIN':
-            code = 'sin(' + arg + ' / 180 * Math.PI)';
-            break;
-        case 'COS':
-            code = 'cos(' + arg + ' / 180 * Math.PI)';
-            break;
-        case 'TAN':
-            code = 'tan(' + arg + ' / 180 * Math.PI)';
-            break;
-        default:
-            break;
-    }
-    if (code) {
-        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-    }
-    // Second, handle cases which generate values that may need parentheses.
-    switch (operator) {
-        case 'LOG10':
-            code = 'log(' + arg + ') / log(10)';
-            break;
-        case 'ASIN':
-            code = 'asin(' + arg + ') / M_PI * 180';
-            break;
-        case 'ACOS':
-            code = 'acos(' + arg + ') / M_PI * 180';
-            break;
-        case 'ATAN':
-            code = 'atan(' + arg + ') / M_PI * 180';
-            break;
-        default:
-            throw new Error('Unknown math operator: ' + operator);
-    }
-    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
+    code = "-" + arg;
+    return [code, Blockly.Arduino.ORDER_UNARY_PREFIX];
+  }
+  if (operator === "ABS" || operator.substring(0, 5) === "ROUND") {
+    arg =
+      Blockly.Arduino.valueToCode(
+        block,
+        "NUM",
+        Blockly.Arduino.ORDER_UNARY_POSTFIX
+      ) || "0";
+  } else if (operator === "SIN" || operator === "COS" || operator === "TAN") {
+    arg =
+      Blockly.Arduino.valueToCode(
+        block,
+        "NUM",
+        Blockly.Arduino.ORDER_MULTIPLICATIVE
+      ) || "0";
+  } else {
+    arg =
+      Blockly.Arduino.valueToCode(block, "NUM", Blockly.Arduino.ORDER_NONE) ||
+      "0";
+  }
+  // First, handle cases which generate values that don't need parentheses.
+  switch (operator) {
+    case "ABS":
+      code = "abs(" + arg + ")";
+      break;
+    case "ROOT":
+      code = "sqrt(" + arg + ")";
+      break;
+    case "LN":
+      code = "log(" + arg + ")";
+      break;
+    case "EXP":
+      code = "exp(" + arg + ")";
+      break;
+    case "POW10":
+      code = "pow(10," + arg + ")";
+      break;
+    case "ROUND":
+      code = "round(" + arg + ")";
+      break;
+    case "ROUNDUP":
+      code = "ceil(" + arg + ")";
+      break;
+    case "ROUNDDOWN":
+      code = "floor(" + arg + ")";
+      break;
+    case "SIN":
+      code = "sin(" + arg + " / 180 * Math.PI)";
+      break;
+    case "COS":
+      code = "cos(" + arg + " / 180 * Math.PI)";
+      break;
+    case "TAN":
+      code = "tan(" + arg + " / 180 * Math.PI)";
+      break;
+    default:
+      break;
+  }
+  if (code) {
+    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+  }
+  // Second, handle cases which generate values that may need parentheses.
+  switch (operator) {
+    case "LOG10":
+      code = "log(" + arg + ") / log(10)";
+      break;
+    case "ASIN":
+      code = "asin(" + arg + ") / M_PI * 180";
+      break;
+    case "ACOS":
+      code = "acos(" + arg + ") / M_PI * 180";
+      break;
+    case "ATAN":
+      code = "atan(" + arg + ") / M_PI * 180";
+      break;
+    default:
+      throw new Error("Unknown math operator: " + operator);
+  }
+  return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };
 
 /**
@@ -161,16 +173,16 @@ Blockly.Arduino['math_single'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {string} Completed code.
  */
-Blockly.Arduino['math_constant'] = function (block) {
-    var CONSTANTS = {
-        'PI': ['M_PI', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-        'E': ['M_E', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-        'GOLDEN_RATIO': ['(1 + sqrt(5)) / 2', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-        'SQRT2': ['M_SQRT2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-        'SQRT1_2': ['M_SQRT1_2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-        'INFINITY': ['INFINITY', Blockly.Arduino.ORDER_ATOMIC]
-    };
-    return CONSTANTS[block.getFieldValue('CONSTANT')];
+Blockly.Arduino["math_constant"] = function (block) {
+  var CONSTANTS = {
+    PI: ["M_PI", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+    E: ["M_E", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+    GOLDEN_RATIO: ["(1 + sqrt(5)) / 2", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+    SQRT2: ["M_SQRT2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+    SQRT1_2: ["M_SQRT1_2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+    INFINITY: ["INFINITY", Blockly.Arduino.ORDER_ATOMIC],
+  };
+  return CONSTANTS[block.getFieldValue("CONSTANT")];
 };
 
 /**
@@ -180,63 +192,72 @@ Blockly.Arduino['math_constant'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_number_property'] = function (block) {
-    var number_to_check = Blockly.Arduino.valueToCode(block, 'NUMBER_TO_CHECK',
-        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-    var dropdown_property = block.getFieldValue('PROPERTY');
-    var code;
-    if (dropdown_property === 'PRIME') {
-        var func = [
-            'boolean ' + Blockly.Arduino.DEF_FUNC_NAME + '(int n) {',
-            '  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods',
-            '  if (n == 2 || n == 3) {',
-            '    return true;',
-            '  }',
-            '  // False if n is NaN, negative, is 1.',
-            '  // And false if n is divisible by 2 or 3.',
-            '  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || ' +
-            '(n % 3 == 0)) {',
-            '    return false;',
-            '  }',
-            '  // Check all the numbers of form 6k +/- 1, up to sqrt(n).',
-            '  for (int x = 6; x <= sqrt(n) + 1; x += 6) {',
-            '    if (n % (x - 1) == 0 || n % (x + 1) == 0) {',
-            '      return false;',
-            '    }',
-            '  }',
-            '  return true;',
-            '}'];
-        var funcName = Blockly.Arduino.addFunction('mathIsPrime', func.join('\n'));
-        Blockly.Arduino.addInclude('math', '#include <math.h>');
-        code = funcName + '(' + number_to_check + ')';
-        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-    }
-    switch (dropdown_property) {
-        case 'EVEN':
-            code = number_to_check + ' % 2 == 0';
-            break;
-        case 'ODD':
-            code = number_to_check + ' % 2 == 1';
-            break;
-        case 'WHOLE':
-            Blockly.Arduino.addInclude('math', '#include <math.h>');
-            code = '(floor(' + number_to_check + ') == ' + number_to_check + ')';
-            break;
-        case 'POSITIVE':
-            code = number_to_check + ' > 0';
-            break;
-        case 'NEGATIVE':
-            code = number_to_check + ' < 0';
-            break;
-        case 'DIVISIBLE_BY':
-            var divisor = Blockly.Arduino.valueToCode(block, 'DIVISOR',
-                Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-            code = number_to_check + ' % ' + divisor + ' == 0';
-            break;
-        default:
-            break;
-    }
-    return [code, Blockly.Arduino.ORDER_EQUALITY];
+Blockly.Arduino["math_number_property"] = function (block) {
+  var number_to_check =
+    Blockly.Arduino.valueToCode(
+      block,
+      "NUMBER_TO_CHECK",
+      Blockly.Arduino.ORDER_MULTIPLICATIVE
+    ) || "0";
+  var dropdown_property = block.getFieldValue("PROPERTY");
+  var code;
+  if (dropdown_property === "PRIME") {
+    var func = [
+      "boolean " + Blockly.Arduino.DEF_FUNC_NAME + "(int n) {",
+      "  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods",
+      "  if (n == 2 || n == 3) {",
+      "    return true;",
+      "  }",
+      "  // False if n is NaN, negative, is 1.",
+      "  // And false if n is divisible by 2 or 3.",
+      "  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || " +
+        "(n % 3 == 0)) {",
+      "    return false;",
+      "  }",
+      "  // Check all the numbers of form 6k +/- 1, up to sqrt(n).",
+      "  for (int x = 6; x <= sqrt(n) + 1; x += 6) {",
+      "    if (n % (x - 1) == 0 || n % (x + 1) == 0) {",
+      "      return false;",
+      "    }",
+      "  }",
+      "  return true;",
+      "}",
+    ];
+    var funcName = Blockly.Arduino.addFunction("mathIsPrime", func.join("\n"));
+    Blockly.Arduino.addInclude("math", "#include <math.h>");
+    code = funcName + "(" + number_to_check + ")";
+    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+  }
+  switch (dropdown_property) {
+    case "EVEN":
+      code = number_to_check + " % 2 == 0";
+      break;
+    case "ODD":
+      code = number_to_check + " % 2 == 1";
+      break;
+    case "WHOLE":
+      Blockly.Arduino.addInclude("math", "#include <math.h>");
+      code = "(floor(" + number_to_check + ") == " + number_to_check + ")";
+      break;
+    case "POSITIVE":
+      code = number_to_check + " > 0";
+      break;
+    case "NEGATIVE":
+      code = number_to_check + " < 0";
+      break;
+    case "DIVISIBLE_BY":
+      var divisor =
+        Blockly.Arduino.valueToCode(
+          block,
+          "DIVISOR",
+          Blockly.Arduino.ORDER_MULTIPLICATIVE
+        ) || "0";
+      code = number_to_check + " % " + divisor + " == 0";
+      break;
+    default:
+      break;
+  }
+  return [code, Blockly.Arduino.ORDER_EQUALITY];
 };
 
 /**
@@ -247,19 +268,30 @@ Blockly.Arduino['math_number_property'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_change'] = function (block) {
-    var argument0 = Blockly.Arduino.valueToCode(block, 'DELTA',
-        Blockly.Arduino.ORDER_ADDITIVE) || '0';
-    var varName = Blockly.Arduino.variableDB_.getName(
-        block.getFieldValue('VAR'), Blockly.Variables.NAME_TYPE);
-    return varName + ' += ' + argument0 + ';\n';
+Blockly.Arduino["math_change"] = function (block) {
+  var argument0 =
+    Blockly.Arduino.valueToCode(
+      block,
+      "DELTA",
+      Blockly.Arduino.ORDER_ADDITIVE
+    ) || "0";
+  var id = block.getFieldValue("VAR")
+  const varName = Blockly.Variables.getVariable(
+      Blockly.getMainWorkspace(),
+      id
+    ).name;
+  // var varName = Blockly.Arduino.nameDB_.getName(
+  //   block.getFieldValue("VAR"),
+  //   Blockly.Variables.NAME_TYPE
+  // );
+  return varName + " += " + argument0 + ";\n";
 };
 
 /** Rounding functions have a single operand. */
-Blockly.Arduino['math_round'] = Blockly.Arduino['math_single'];
+Blockly.Arduino["math_round"] = Blockly.Arduino["math_single"];
 
 /** Trigonometry functions have a single operand. */
-Blockly.Arduino['math_trig'] = Blockly.Arduino['math_single'];
+Blockly.Arduino["math_trig"] = Blockly.Arduino["math_single"];
 
 /**
  * Generator for the math function to a list.
@@ -268,7 +300,7 @@ Blockly.Arduino['math_trig'] = Blockly.Arduino['math_single'];
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_on_list'] = Blockly.Arduino.noGeneratorCodeInline;
+Blockly.Arduino["math_on_list"] = Blockly.Arduino.noGeneratorCodeInline;
 
 /**
  * Generator for the math modulo function (calculates remainder of X/Y).
@@ -276,13 +308,21 @@ Blockly.Arduino['math_on_list'] = Blockly.Arduino.noGeneratorCodeInline;
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_modulo'] = function (block) {
-    var argument0 = Blockly.Arduino.valueToCode(block, 'DIVIDEND',
-        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-    var argument1 = Blockly.Arduino.valueToCode(block, 'DIVISOR',
-        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-    var code = argument0 + ' % ' + argument1;
-    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
+Blockly.Arduino["math_modulo"] = function (block) {
+  var argument0 =
+    Blockly.Arduino.valueToCode(
+      block,
+      "DIVIDEND",
+      Blockly.Arduino.ORDER_MULTIPLICATIVE
+    ) || "0";
+  var argument1 =
+    Blockly.Arduino.valueToCode(
+      block,
+      "DIVISOR",
+      Blockly.Arduino.ORDER_MULTIPLICATIVE
+    ) || "0";
+  var code = argument0 + " % " + argument1;
+  return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };
 
 /**
@@ -291,18 +331,34 @@ Blockly.Arduino['math_modulo'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_constrain'] = function (block) {
-    // Constrain a number between two limits.
-    var argument0 = Blockly.Arduino.valueToCode(block, 'VALUE',
-        Blockly.Arduino.ORDER_NONE) || '0';
-    var argument1 = Blockly.Arduino.valueToCode(block, 'LOW',
-        Blockly.Arduino.ORDER_NONE) || '0';
-    var argument2 = Blockly.Arduino.valueToCode(block, 'HIGH',
-        Blockly.Arduino.ORDER_NONE) || '0';
-    var code = '(' + argument0 + ' < ' + argument1 + ' ? ' + argument1 +
-        ' : ( ' + argument0 + ' > ' + argument2 + ' ? ' + argument2 + ' : ' +
-        argument0 + '))';
-    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+Blockly.Arduino["math_constrain"] = function (block) {
+  // Constrain a number between two limits.
+  var argument0 =
+    Blockly.Arduino.valueToCode(block, "VALUE", Blockly.Arduino.ORDER_NONE) ||
+    "0";
+  var argument1 =
+    Blockly.Arduino.valueToCode(block, "LOW", Blockly.Arduino.ORDER_NONE) ||
+    "0";
+  var argument2 =
+    Blockly.Arduino.valueToCode(block, "HIGH", Blockly.Arduino.ORDER_NONE) ||
+    "0";
+  var code =
+    "(" +
+    argument0 +
+    " < " +
+    argument1 +
+    " ? " +
+    argument1 +
+    " : ( " +
+    argument0 +
+    " > " +
+    argument2 +
+    " ? " +
+    argument2 +
+    " : " +
+    argument0 +
+    "))";
+  return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };
 
 /**
@@ -312,28 +368,26 @@ Blockly.Arduino['math_constrain'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {array} Completed code with order of operation.
  */
-Blockly.Arduino['math_random_int'] = function (block) {
-    var argument0 = Blockly.Arduino.valueToCode(block, 'FROM',
-        Blockly.Arduino.ORDER_NONE) || '0';
-    var argument1 = Blockly.Arduino.valueToCode(block, 'TO',
-        Blockly.Arduino.ORDER_NONE) || '0';
-    var functionName = Blockly.Arduino.variableDB_.getDistinctName(
-        'math_random_int', Blockly.Generator.NAME_TYPE);
-    Blockly.Arduino.setups_['init_rand'] = 'randomSeed(analogRead(0));';
-    Blockly.Arduino.math_random_int.random_function = functionName;
-    var func = [
-        'int ' + Blockly.Arduino.DEF_FUNC_NAME + '(int min, int max) {',
-        '  if (min > max) {',
-        '    // Swap min and max to ensure min is smaller.',
-        '    int temp = min;',
-        '    min = max;',
-        '    max = temp;',
-        '  }',
-        '  return min + (rand() % (max - min + 1));',
-        '}'];
-    var funcName = Blockly.Arduino.addFunction('mathRandomInt', func.join('\n'));
-    var code = funcName + '(' + argument0 + ', ' + argument1 + ')';
-    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+Blockly.Arduino["math_random_int"] = function (block) {
+  var argument0 =
+    Blockly.Arduino.valueToCode(block, "FROM", Blockly.Arduino.ORDER_NONE) ||
+    "0";
+  var argument1 =
+    Blockly.Arduino.valueToCode(block, "TO", Blockly.Arduino.ORDER_NONE) || "0";
+  Blockly.Arduino.setupCode_["init_rand"] = "randomSeed(analogRead(0));";
+  Blockly.Arduino.functionNames_[
+    "math_random_int"
+  ] = `int mathRandomInt (int min, int max) {\n
+      if (min > max) {
+        int temp = min;
+        min = max;
+        max = temp;
+      }
+      return min + (rand() % (max - min + 1));
+    }
+    `;
+  var code = `mathRandomInt(${argument0},${argument1});`;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 
 /**
@@ -342,6 +396,6 @@ Blockly.Arduino['math_random_int'] = function (block) {
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {string} Completed code.
  */
-Blockly.Arduino['math_random_float'] = function (block) {
-    return ['(rand() / RAND_MAX)', Blockly.Arduino.ORDER_UNARY_POSTFIX];
+Blockly.Arduino["math_random_float"] = function (block) {
+  return ["(rand() / RAND_MAX)", Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };

src/components/Blockly/generator/mqtt.js

@@ -0,0 +1,117 @@
+import * as Blockly from "blockly/core";
+/**
+ * MQTT Blocks
+ */
+
+let service;
+
+Blockly.Arduino.sensebox_mqtt_setup = function () {
+  var server = this.getFieldValue("server");
+  var port = this.getFieldValue("port");
+  var username = this.getFieldValue("username");
+  var pass = this.getFieldValue("password");
+  service = this.getFieldValue("service");
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.libraries_["library_adafruitmqtt"] =
+    '#include <Adafruit_MQTT.h> //http://librarymanager/All#Adafruit_MQTT_Library"';
+  Blockly.Arduino.libraries_["library_adafruitmqttclient"] =
+    '#include <Adafruit_MQTT_Client.h>';
+  Blockly.Arduino.definitions_["mqtt_server"] =
+    '#define SERVER      "' + server + '"';
+  Blockly.Arduino.definitions_["mqtt_port"] =
+    "#define SERVERPORT      " + port + "";
+  Blockly.Arduino.definitions_["mqtt_username"] =
+    '#define USERNAME      "' + username + '"';
+  Blockly.Arduino.definitions_["mqtt_pass"] =
+    '#define PASS      "' + pass + '"';
+  Blockly.Arduino.definitions_["wifi_client"] = "WiFiClient client;";
+  Blockly.Arduino.definitions_["mqtt_client"] =
+    "Adafruit_MQTT_Client mqtt(&client, SERVER, SERVERPORT, USERNAME, PASS);";
+  var code = "";
+  return code;
+};
+
+Blockly.Arduino.sensebox_mqtt_publish = function (block) {
+  var feedname = this.getFieldValue("publishfeed");
+  var res = feedname.split("/");
+  var feed_client = res[res.length - 1];
+  var value =
+    Blockly.Arduino.valueToCode(this, "value", Blockly.Arduino.ORDER_ATOMIC) ||
+    '"No Block connected"';
+
+  switch (service) {
+    case "adafruitio":
+      Blockly.Arduino.definitions_["mqtt_" + feed_client + ""] =
+        "Adafruit_MQTT_Publish " +
+        feed_client +
+        ' = Adafruit_MQTT_Publish(&mqtt, USERNAME "/feeds/' +
+        feedname +
+        '");';
+      break;
+    case "dioty":
+      Blockly.Arduino.definitions_["mqtt_" + feed_client + ""] =
+        "Adafruit_MQTT_Publish " +
+        feed_client +
+        ' = Adafruit_MQTT_Publish(&mqtt, "/"USERNAME"/' +
+        feedname +
+        '");';
+      break;
+    case "custom":
+      Blockly.Arduino.definitions_["mqtt_" + feed_client + ""] =
+        "Adafruit_MQTT_Publish " +
+        feed_client +
+        ' = Adafruit_MQTT_Publish(&mqtt, "' +
+        feedname +
+        '");';
+      break;
+    default:
+      break;
+  }
+
+  //Blockly.Arduino.definitions_['mqtt_' + feed_client + ''] = 'Adafruit_MQTT_Publish ' + feed_client + ' = Adafruit_MQTT_Publish(&mqtt, USERNAME "/feeds/' + feedname + '");'
+  Blockly.Arduino.codeFunctions_[
+    "mqtt_connect_function"
+  ] = `// Function to connect and reconnect as necessary to the MQTT server.
+    // Should be called in the loop function and it will take care if connecting.
+void MQTT_connect() {
+      int8_t ret;
+      // Stop if already connected.
+      if (mqtt.connected()) {
+        return;
+      }  
+      while ((ret = mqtt.connect()) != 0) { // connect will return 0 for connected
+           mqtt.disconnect();
+           delay(5000);  // wait 5 seconds
+      }
+}`;
+  Blockly.Arduino.loopCodeOnce_["mqtt_connect"] = "MQTT_connect();";
+  var code = "" + feed_client + ".publish(" + value + ");";
+  return code;
+};
+
+Blockly.Arduino.sensebox_mqtt_subscribe = function (block) {
+  var feedname = this.getFieldValue("subscribefeed");
+  var x = 5,
+    feed_client;
+  feed_client = feedname.substr(feedname.length - x, x);
+  Blockly.Arduino.definitions_["mqtt_" + feed_client + ""] =
+    "Adafruit_MQTT_Subscribe " +
+    feed_client +
+    "= Adafruit_MQTT_Subscribe(&mqtt," +
+    feedname +
+    ");";
+  Blockly.Arduino.codeFunctions_["mqtt_" + feed_client + "callbackFunction"] =
+    `void ` +
+    feed_client +
+    `Callback (double x){
+      Serial.println(x);
+    }`;
+  Blockly.Arduino.setupCode_["mqtt_" + feed_client + "_callback"] =
+    "" + feed_client + ".setCallback(" + feed_client + "Callback);";
+  Blockly.Arduino.setupCode_["mqtt_" + feed_client + "_subscribe"] =
+    "mqtt.subscribe(&" + feed_client + ");";
+  Blockly.Arduino.loopCodeOnce_["mqtt_processPackages"] =
+    "mqtt.processPackets(10);";
+  var code = "";
+  return code;
+};

src/components/Blockly/generator/procedures.js

@@ -1,5 +1,4 @@
-import * as Blockly from 'blockly/core';
-
+import * as Blockly from "blockly/core";
 
 /**
  * Code generator to add code into the setup() and loop() functions.
@@ -7,24 +6,122 @@ import * as Blockly from 'blockly/core';
  * @param {!Blockly.Block} block Block to generate the code from.
  * @return {string} Completed code.
  */
-Blockly.Arduino['arduino_functions'] = function (block) {
-    // Edited version of Blockly.Generator.prototype.statementToCode
-    function statementToCodeNoTab(block, name) {
-        var targetBlock = block.getInputTargetBlock(name);
-        var code = Blockly.Arduino.blockToCode(targetBlock);
-        if (typeof code != 'string') {
-            throw new Error('Expecting code from statement block "' + targetBlock.type + '".');
-        }
-        return code;
+Blockly.Arduino["arduino_functions"] = function (block) {
+  // Edited version of Blockly.Generator.prototype.statementToCode
+  function statementToCodeNoTab(block, name) {
+    var targetBlock = block.getInputTargetBlock(name);
+    var code = Blockly.Arduino.blockToCode(targetBlock);
+    if (typeof code != "string") {
+      throw new Error(
+        'Expecting code from statement block "' + targetBlock.type + '".'
+      );
     }
+    return code;
+  }
 
-    var setupBranch = Blockly.Arduino.statementToCode(block, 'SETUP_FUNC');
-    // //var setupCode = Blockly.Arduino.scrub_(block, setupBranch); No comment block
-    if (setupBranch) {
-        Blockly.Arduino.setupCode_['mainsetup'] = setupBranch;
-    }
+  var setupBranch = Blockly.Arduino.statementToCode(block, "SETUP_FUNC");
+  // //var setupCode = Blockly.Arduino.scrub_(block, setupBranch); No comment block
+  if (setupBranch) {
+    Blockly.Arduino.setupCode_["mainsetup"] = setupBranch;
+  }
 
-    var loopBranch = statementToCodeNoTab(block, 'LOOP_FUNC');
-    //var loopcode = Blockly.Arduino.scrub_(block, loopBranch); No comment block
-    return loopBranch;
+  var loopBranch = statementToCodeNoTab(block, "LOOP_FUNC");
+  //var loopcode = Blockly.Arduino.scrub_(block, loopBranch); No comment block
+  return loopBranch;
+};
+
+Blockly.Arduino["procedures_defreturn"] = function (block) {
+  // Define a procedure with a return value.
+  const funcName = Blockly.Arduino.nameDB_.getName(
+    block.getFieldValue("NAME"),
+    Blockly.Procedures.NAME_TYPE
+  );
+  const branch = Blockly.Arduino.statementToCode(block, "STACK");
+  const returnType = block.getFieldValue("RETURN TYPE") || "void";
+
+  let returnValue =
+    Blockly.Arduino.valueToCode(block, "RETURN", Blockly.Arduino.ORDER_NONE) ||
+    "";
+  if (returnValue) {
+    returnValue = Blockly.Arduino.INDENT + "return " + returnValue + ";\n";
+  }
+  const args = [];
+  for (let i = 0; i < block.argumentVarModels_.length; i++) {
+    args[i] =
+      translateType(block.argumentVarModels_[i].type) +
+      " " +
+      block.argumentVarModels_[i].name;
+  }
+  let code =
+    translateType(returnType) +
+    " " +
+    funcName +
+    "(" +
+    args.join(", ") +
+    ") {\n" +
+    branch +
+    returnValue +
+    "}";
+  code = Blockly.Arduino.scrub_(block, code);
+  // Add % so as not to collide with helper functions in definitions list.
+  Blockly.Arduino.functionNames_["%" + funcName] = code;
+  return null;
+};
+
+function translateType(type) {
+  switch (type) {
+    case "int":
+      return "int";
+    case "String":
+      return "String";
+    case "void":
+      return "void";
+    case "boolean":
+      return "boolean";
+    case "float":
+      return "float";
+    default:
+      throw new Error("Invalid Parameter Type");
+  }
+}
+
+Blockly.Arduino["procedures_defnoreturn"] =
+  Blockly.Arduino["procedures_defreturn"];
+
+Blockly.Arduino["procedures_callreturn"] = function (block) {
+  // Call a procedure with a return value.
+  const funcName = Blockly.Arduino.nameDB_.getName(
+    block.getFieldValue("NAME"),
+    Blockly.Procedures.NAME_TYPE
+  );
+  const args = [];
+  for (let i = 0; i < block.arguments_.length; i++) {
+    args[i] =
+      Blockly.Arduino.valueToCode(
+        block,
+        "ARG" + i,
+        Blockly.Arduino.ORDER_COMMA
+      ) || "null";
+  }
+  const code = funcName + "(" + args.join(", ") + ")";
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino["procedures_callnoreturn"] = function (block) {
+  // Call a procedure with no return value.
+  const funcName = Blockly.Arduino.nameDB_.getName(
+    block.getFieldValue("NAME"),
+    Blockly.Procedures.NAME_TYPE
+  );
+  const args = [];
+  for (let i = 0; i < block.arguments_.length; i++) {
+    args[i] =
+      Blockly.Arduino.valueToCode(
+        block,
+        "ARG" + i,
+        Blockly.Arduino.ORDER_COMMA
+      ) || "null";
+  }
+
+  return funcName + "(" + args.join(", ") + ");\n";
 };

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

@@ -0,0 +1,126 @@
+import * as Blockly from "blockly/core";
+
+Blockly.Arduino.sensebox_phyphox_init = function () {
+  var name = this.getFieldValue("devicename");
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.libraries_["phyphox_library"] = `#include <phyphoxBle.h>`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    "phyphox_start"
+  ] = `PhyphoxBLE::start("${name}");`;
+  var code = ``;
+  return code;
+};
+
+Blockly.Arduino.sensebox_phyphox_experiment = function () {
+  var experimentname = "experiment";
+  var title = this.getFieldValue("title").replace(/[^a-zA-Z0-9]/g, "");
+  var description = this.getFieldValue("description");
+  var branch = Blockly.Arduino.statementToCode(this, "view");
+  Blockly.Arduino.phyphoxSetupCode_[
+    `PhyphoxBleExperiment_${experimentname}`
+  ] = `PhyphoxBleExperiment ${experimentname};`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    `setTitle_${title}`
+  ] = `${experimentname}.setTitle("${title}");`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    `setCategory_senseBoxExperiments}`
+  ] = `${experimentname}.setCategory("senseBox Experimente");`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    `setDescription_${description}`
+  ] = `${experimentname}.setDescription("${description}");`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    `addView_${experimentname}`
+  ] = `PhyphoxBleExperiment::View firstView;\nfirstView.setLabel("Messwerte"); //Create a "view"`;
+  Blockly.Arduino.phyphoxSetupCode_[`addGraph`] = `${branch}`;
+  Blockly.Arduino.phyphoxSetupCode_[
+    `addView_firstview`
+  ] = `${experimentname}.addView(firstView);`; //Attach view to experiment
+  Blockly.Arduino.phyphoxSetupCode_[
+    `addExperiment_${experimentname}`
+  ] = `PhyphoxBLE::addExperiment(${experimentname});`; //Attach experiment to server
+
+  var code = ``;
+  return code;
+};
+
+Blockly.Arduino["sensebox_phyphox_timestamp"] = function () {
+  var code = 0;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino["sensebox_phyphox_channel"] = function () {
+  var channel = parseFloat(this.getFieldValue("channel"));
+  var code = channel;
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino.sensebox_phyphox_sendchannel = function (block) {
+  var channel = this.getFieldValue("channel");
+  var value =
+    Blockly.Arduino.valueToCode(this, "value", Blockly.Arduino.ORDER_ATOMIC) ||
+    "1";
+
+  var code = `float channel${channel} = ${value};\n`;
+  return code;
+};
+
+Blockly.Arduino.sensebox_phyphox_graph = function () {
+  var label = this.getFieldValue("label").replace(/[^a-zA-Z0-9]/g, "");
+  var unitx = this.getFieldValue("unitx");
+  var unity = this.getFieldValue("unity");
+  var labelx = this.getFieldValue("labelx");
+  var labely = this.getFieldValue("labely");
+  var style = this.getFieldValue("style");
+  var channelX =
+    Blockly.Arduino.valueToCode(
+      this,
+      "channel0",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || 0;
+  var channelY =
+    Blockly.Arduino.valueToCode(
+      this,
+      "channel1",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || 1;
+
+  var code = `PhyphoxBleExperiment::Graph ${label};\n`; //Create graph which will plot random numbers over time
+  code += `${label}.setLabel("${label}");\n`;
+  code += `${label}.setUnitX("${unitx}");\n`;
+  code += `${label}.setUnitY("${unity}");\n`;
+  code += `${label}.setLabelX("${labelx}");\n`;
+  code += `${label}.setLabelY("${labely}");\n`;
+  if (style === "dots"){
+    code += `${label}.setStyle("${style}");\n`;
+  }
+  code += `${label}.setChannel(${channelX}, ${channelY});\n`;
+  code += `firstView.addElement(${label});\n`;
+  return code;
+};
+
+Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
+  var branch = Blockly.Arduino.statementToCode(this, "sendValues");
+  var blocks = this.getDescendants();
+  var count = 0;
+  if (blocks !== undefined) {
+    for (var i = 0; i < blocks.length; i++) {
+      if (blocks[i].type === "sensebox_phyphox_sendchannel") {
+        count++;
+      }
+    }
+  }
+  if (count === 5) {
+  }
+  var string = "";
+
+  for (var j = 1; j <= count; j++) {
+    if (string === "") {
+      string += `channel${j}`;
+    } else if (string !== "") {
+      string += `, channel${j}`;
+    }
+  }
+  Blockly.Arduino.loopCodeOnce_["phyphox_poll"] = `PhyphoxBLE::poll();`;
+  var code = `${branch}\nPhyphoxBLE::write(${string});`;
+  return code;
+};

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

@@ -1,92 +1,236 @@
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
 
 /*Display Blocks*/
 Blockly.Arduino.sensebox_display_beginDisplay = function () {
-    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-    Blockly.Arduino.libraries_['library_wire'] = '#include <Wire.h>';
-    Blockly.Arduino.libraries_['library_AdafruitGFX'] = '#include <Adafruit_GFX.h>';
-    Blockly.Arduino.libraries_['library_AdafruitSSD1306'] = '#include <Adafruit_SSD1306.h>';
-    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
-    Blockly.Arduino.definitions_['define_display'] = '#define OLED_RESET 4\nAdafruit_SSD1306 display(OLED_RESET);';
-    Blockly.Arduino.setupCode_['sensebox_display_begin'] = 'senseBoxIO.powerI2C(true);\ndelay(2000);\ndisplay.begin(SSD1306_SWITCHCAPVCC, 0x3D);\ndisplay.display();\ndelay(100);\ndisplay.clearDisplay();';
-    var code = '';
-    return code;
+  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
+  Blockly.Arduino.libraries_["library_wire"] = "#include <Wire.h>";
+  Blockly.Arduino.libraries_["library_AdafruitGFX"] =
+    "#include <Adafruit_GFX.h> // http://librarymanager/All#Adafruit_GFX_Library";
+  Blockly.Arduino.libraries_["library_AdafruitSSD1306"] =
+    "#include <Adafruit_SSD1306.h> // http://librarymanager/All#Adafruit_SSD1306";
+  Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+  Blockly.Arduino.definitions_[
+    "define_display_size"
+  ] = `#define SCREEN_WIDTH 128\n#define SCREEN_HEIGHT 64`;
+  Blockly.Arduino.definitions_["define_display"] =
+    "#define OLED_RESET -1\nAdafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);";
+
+  Blockly.Arduino.setupCode_["sensebox_display_begin"] =
+    "senseBoxIO.powerI2C(true);\ndelay(2000);\ndisplay.begin(SSD1306_SWITCHCAPVCC, 0x3D);\ndisplay.display();\ndelay(100);\ndisplay.clearDisplay();";
+  var code = "";
+  return code;
 };
 
 Blockly.Arduino.sensebox_display_clearDisplay = function () {
-    var code = 'display.clearDisplay();\n';
-    return code;
+  var code = "display.clearDisplay();\n";
+  return code;
 };
 
 Blockly.Arduino.sensebox_display_printDisplay = function () {
-    var x = Blockly.Arduino.valueToCode(this, 'X', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var y = Blockly.Arduino.valueToCode(this, 'Y', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var printDisplay = Blockly.Arduino.valueToCode(this, 'printDisplay', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
-    var size = Blockly.Arduino.valueToCode(this, 'SIZE', Blockly.Arduino.ORDER_ATOMIC) || '1'
-    var color = this.getFieldValue('COLOR');
-    var code = 'display.setCursor(' + x + ',' + y + ');\n';
-    code += 'display.setTextSize(' + size + ');\n';
-    code += 'display.setTextColor(' + color + ');\n';
-    code += 'display.println(' + printDisplay + ');\n';
-    return code;
+  var x = this.getFieldValue("X");
+  var y = this.getFieldValue("Y");
+  var printDisplay =
+    Blockly.Arduino.valueToCode(
+      this,
+      "printDisplay",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || '"Keine Eingabe"';
+  var size = this.getFieldValue("SIZE");
+  var color = this.getFieldValue("COLOR");
+  var code = "display.setCursor(" + x + "," + y + ");\n";
+  code += "display.setTextSize(" + size + ");\n";
+  code += "display.setTextColor(" + color + ");\n";
+  code += "display.println(" + printDisplay + ");\n";
+  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 = '';
-    code += show;
-    code += 'display.display();\n';
-    return code;
+  var show = Blockly.Arduino.statementToCode(block, "SHOW");
+  var code = "";
+  code += show;
+  code += "display.display();\n";
+  return code;
 };
 Blockly.Arduino.sensebox_display_plotDisplay = function () {
-    var YLabel = Blockly.Arduino.valueToCode(this, 'YLabel', Blockly.Arduino.ORDER_ATOMIC) || 'Y'
-    var XLabel = Blockly.Arduino.valueToCode(this, 'XLabel', Blockly.Arduino.ORDER_ATOMIC) || 'X'
-    var Title = Blockly.Arduino.valueToCode(this, 'Title', Blockly.Arduino.ORDER_ATOMIC) || 'Title'
-    var XRange1 = Blockly.Arduino.valueToCode(this, 'XRange1', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var XRange2 = Blockly.Arduino.valueToCode(this, 'XRange2', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var YRange1 = Blockly.Arduino.valueToCode(this, 'YRange1', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var YRange2 = Blockly.Arduino.valueToCode(this, 'YRange2', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var XTick = Blockly.Arduino.valueToCode(this, 'XTick', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var YTick = Blockly.Arduino.valueToCode(this, 'YTick', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var TimeFrame = Blockly.Arduino.valueToCode(this, 'TimeFrame', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var plotDisplay = Blockly.Arduino.valueToCode(this, 'plotDisplay', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
-    Blockly.Arduino.libraries_['library_plot'] = '#include <Plot.h>';
-    Blockly.Arduino.definitions_['define_plot_class'] = 'Plot DataPlot(&display);\n';
-    Blockly.Arduino.variables_['define_plot_class'] = 'const double TIMEFRAME = ' + TimeFrame + ';\n';
-    Blockly.Arduino.setupCode_['sensebox_plot_setup'] = 'DataPlot.setTitle(' + Title + ');\nDataPlot.setXLabel(' + XLabel + ');\nDataPlot.setYLabel(' + YLabel + ');\nDataPlot.setXRange(' + XRange1 + ',' + XRange2 + ');\nDataPlot.setYRange(' + YRange1 + ',' + YRange2 + ');\nDataPlot.setXTick(' + XTick + ');\nDataPlot.setYTick(' + YTick + ');\nDataPlot.setXPrecision(0);\nDataPlot.setYPrecision(0);\n';
-    var code = 'DataPlot.clear();'
-    code += 'double starttime = millis();\ndouble t = 0;\nwhile (t <= TIMEFRAME) {\nt = (millis() - starttime) / 1000.0;\nfloat value = ' + plotDisplay + ';\n';
-    code += 'DataPlot.addDataPoint(t,value);\n}\n';
-    return code;
+  var YLabel =
+    Blockly.Arduino.valueToCode(this, "YLabel", Blockly.Arduino.ORDER_ATOMIC) ||
+    "Y";
+  var XLabel =
+    Blockly.Arduino.valueToCode(this, "XLabel", Blockly.Arduino.ORDER_ATOMIC) ||
+    "X";
+  var Title =
+    Blockly.Arduino.valueToCode(this, "Title", Blockly.Arduino.ORDER_ATOMIC) ||
+    "Title";
+  var XRange1 =
+    Blockly.Arduino.valueToCode(
+      this,
+      "XRange1",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var XRange2 =
+    Blockly.Arduino.valueToCode(
+      this,
+      "XRange2",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var YRange1 =
+    Blockly.Arduino.valueToCode(
+      this,
+      "YRange1",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var YRange2 =
+    Blockly.Arduino.valueToCode(
+      this,
+      "YRange2",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var XTick =
+    Blockly.Arduino.valueToCode(this, "XTick", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  var YTick =
+    Blockly.Arduino.valueToCode(this, "YTick", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  var TimeFrame =
+    Blockly.Arduino.valueToCode(
+      this,
+      "TimeFrame",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || "0";
+  var plotDisplay =
+    Blockly.Arduino.valueToCode(
+      this,
+      "plotDisplay",
+      Blockly.Arduino.ORDER_ATOMIC
+    ) || '"Keine Eingabe"';
+  Blockly.Arduino.libraries_["library_plot"] = "#include <Plot.h>";
+  Blockly.Arduino.definitions_["define_plot_class"] =
+    "Plot DataPlot(&display);\n";
+  Blockly.Arduino.variables_["define_plot_class"] =
+    "const double TIMEFRAME = " + TimeFrame + ";\n";
+  Blockly.Arduino.setupCode_["sensebox_plot_setup"] =
+    "DataPlot.setTitle(" +
+    Title +
+    ");\nDataPlot.setXLabel(" +
+    XLabel +
+    ");\nDataPlot.setYLabel(" +
+    YLabel +
+    ");\nDataPlot.setXRange(" +
+    XRange1 +
+    "," +
+    XRange2 +
+    ");\nDataPlot.setYRange(" +
+    YRange1 +
+    "," +
+    YRange2 +
+    ");\nDataPlot.setXTick(" +
+    XTick +
+    ");\nDataPlot.setYTick(" +
+    YTick +
+    ");\nDataPlot.setXPrecision(0);\nDataPlot.setYPrecision(0);\n";
+  var code = "DataPlot.clear();";
+  code +=
+    "double starttime = millis();\ndouble t = 0;\nwhile (t <= TIMEFRAME) {\nt = (millis() - starttime) / 1000.0;\nfloat value = " +
+    plotDisplay +
+    ";\n";
+  code += "DataPlot.addDataPoint(t,value);\n}\n";
+  return code;
 };
 
 Blockly.Arduino.sensebox_display_fillCircle = function () {
-    let code = '';
-    var x = Blockly.Arduino.valueToCode(this, 'X', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var y = Blockly.Arduino.valueToCode(this, 'Y', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var radius = Blockly.Arduino.valueToCode(this, 'Radius', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var fill = this.getFieldValue('FILL');
-    if (fill === 'TRUE') {
-        code = 'display.fillCircle(' + x + ',' + y + ',' + radius + ',1);\n';
-    }
-    else {
-        code = 'display.drawCircle(' + x + ',' + y + ',' + radius + ',1);\n';
-    }
-    return code;
-}
+  let code = "";
+  var x =
+    Blockly.Arduino.valueToCode(this, "X", Blockly.Arduino.ORDER_ATOMIC) || "0";
+  var y =
+    Blockly.Arduino.valueToCode(this, "Y", Blockly.Arduino.ORDER_ATOMIC) || "0";
+  var radius =
+    Blockly.Arduino.valueToCode(this, "Radius", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  var fill = this.getFieldValue("FILL");
+  if (fill === "TRUE") {
+    code = "display.fillCircle(" + x + "," + y + "," + radius + ",1);\n";
+  } else {
+    code = "display.drawCircle(" + x + "," + y + "," + radius + ",1);\n";
+  }
+  return code;
+};
 
 Blockly.Arduino.sensebox_display_drawRectangle = function () {
-    let code = '';
-    var x = Blockly.Arduino.valueToCode(this, 'X', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var y = Blockly.Arduino.valueToCode(this, 'Y', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var width = Blockly.Arduino.valueToCode(this, 'width', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var height = Blockly.Arduino.valueToCode(this, 'height', Blockly.Arduino.ORDER_ATOMIC) || '0'
-    var fill = this.getFieldValue('FILL');
-    if (fill === 'TRUE') {
-        code = 'display.fillRect(' + x + ',' + y + ',' + width + ',' + height + ',1);\n';
-    }
-    else {
-        code = 'display.drawRect(' + x + ',' + y + ',' + width + ',' + height + ',1);\n';
-    }
-    return code;
-}
+  let code = "";
+  var x =
+    Blockly.Arduino.valueToCode(this, "X", Blockly.Arduino.ORDER_ATOMIC) || "0";
+  var y =
+    Blockly.Arduino.valueToCode(this, "Y", Blockly.Arduino.ORDER_ATOMIC) || "0";
+  var width =
+    Blockly.Arduino.valueToCode(this, "width", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  var height =
+    Blockly.Arduino.valueToCode(this, "height", Blockly.Arduino.ORDER_ATOMIC) ||
+    "0";
+  var fill = this.getFieldValue("FILL");
+  if (fill === "TRUE") {
+    code =
+      "display.fillRect(" + x + "," + y + "," + width + "," + height + ",1);\n";
+  } else {
+    code =
+      "display.drawRect(" + x + "," + y + "," + width + "," + height + ",1);\n";
+  }
+  return code;
+};

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

@@ -3,6 +3,7 @@ import * as Blockly from 'blockly/core';
 Blockly.Arduino.sensebox_led = function () {
     var dropdown_pin = this.getFieldValue('PIN');
     var dropdown_stat = this.getFieldValue('STAT');
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
     Blockly.Arduino.setupCode_['setup_led_' + dropdown_pin] = 'pinMode(' + dropdown_pin + ', OUTPUT);';
     var code = 'digitalWrite(' + dropdown_pin + ',' + dropdown_stat + ');\n'
     return code;
@@ -10,13 +11,62 @@ Blockly.Arduino.sensebox_led = function () {
 
 Blockly.Arduino.sensebox_rgb_led = function () {
     var dropdown_pin = this.getFieldValue('PIN');
-    var red = this.getFieldValue('RED') || '0'
-    var green = this.getFieldValue('GREEN') || '0'
-    var blue = this.getFieldValue('BLUE') || '0'
+    var color = Blockly.Arduino.valueToCode(this, 'COLOR', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
     Blockly.Arduino.libraries_['define_rgb_led' + dropdown_pin] = '#include <Adafruit_NeoPixel.h>\n Adafruit_NeoPixel rgb_led_' + dropdown_pin + ' = Adafruit_NeoPixel(1,' + dropdown_pin + ',NEO_RGB + NEO_KHZ800);\n';
     Blockly.Arduino.setupCode_['setup_rgb_led' + dropdown_pin] = 'rgb_led_' + dropdown_pin + '.begin();';
-
-    var code = 'rgb_led_' + dropdown_pin + '.setPixelColor(0,rgb_led_' + dropdown_pin + '.Color(' + red + ',' + green + ',' + blue + '));\n';
+    var code = 'rgb_led_' + dropdown_pin + '.setPixelColor(0,rgb_led_' + dropdown_pin + '.Color(' + color + '));\n';
     code += 'rgb_led_' + dropdown_pin + '.show();';
     return code;
 };
+
+
+Blockly.Arduino.sensebox_ws2818_led_init = function () {
+    var dropdown_pin = this.getFieldValue('Port');
+    var numPixel = Blockly.Arduino.valueToCode(this, 'NUMBER', Blockly.Arduino.ORDER_ATOMIC) || '1';
+    var brightness = Blockly.Arduino.valueToCode(this, 'BRIGHTNESS', Blockly.Arduino.ORDER_ATOMIC) || '50'
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+    Blockly.Arduino.definitions_['define_rgb_led' + dropdown_pin] = `#include <Adafruit_NeoPixel.h>\n Adafruit_NeoPixel rgb_led_${dropdown_pin}= Adafruit_NeoPixel(${numPixel}, ${dropdown_pin},NEO_GRB + NEO_KHZ800);\n`;
+    Blockly.Arduino.setupCode_['setup_rgb_led' + dropdown_pin] = 'rgb_led_' + dropdown_pin + '.begin();\n';
+    Blockly.Arduino.setupCode_['setup_rgb_led_brightness' + dropdown_pin] = `rgb_led_${dropdown_pin}.setBrightness(${brightness});\n`;
+    return '';
+};
+
+Blockly.Arduino.sensebox_ws2818_led = function () {
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+    var dropdown_pin = this.getFieldValue('Port');
+    var position = Blockly.Arduino.valueToCode(this, 'POSITION', Blockly.Arduino.ORDER_ATOMIC) || '0';
+    var color = Blockly.Arduino.valueToCode(this, 'COLOR', Blockly.Arduino.ORDER_ATOMIC) || '0'
+    var code = `rgb_led_${dropdown_pin}.setPixelColor(${position},rgb_led_${dropdown_pin}.Color(${color}));\nrgb_led_${dropdown_pin}.show();\n`;
+    return code;
+};
+
+
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+
+Blockly.Arduino['colour_picker'] = function (block) {
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+    const rgb = hexToRgb(block.getFieldValue('COLOUR'));
+
+    return [rgb.r + ', ' + rgb.g + ', ' + rgb.b, Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino['colour_random'] = function (block) {
+    return ['random(0, 255), random(0, 255), random(0, 255)', Blockly.Arduino.ORDER_ATOMIC];
+};
+
+Blockly.Arduino['colour_rgb'] = function (block) {
+    Blockly.Arduino.libraries_["library_senseBoxIO"] = "#include <senseBoxIO.h>";
+    const red = Blockly.Arduino.valueToCode(block, 'RED', Blockly.Arduino.ORDER_ATOMIC);
+    const green = Blockly.Arduino.valueToCode(block, 'GREEN', Blockly.Arduino.ORDER_ATOMIC);
+    const blue = Blockly.Arduino.valueToCode(block, 'BLUE', Blockly.Arduino.ORDER_ATOMIC);
+
+    return [red + ', ' + green + ', ' + blue, Blockly.Arduino.ORDER_ATOMIC];
+};