Fix/hintboxes

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

@@ -219,7 +219,7 @@ Blockly.Blocks["sensebox_display_show"] = {
     this.appendDummyInput().appendField(Blockly.Msg.sensebox_display_show);
     this.appendStatementInput("SHOW");
     this.setTooltip(Blockly.Msg.sensebox_display_show_tip);
-    this.setHelpUrl("");
+    this.setHelpUrl(Blockly.Msg.senseBox_display_helpurl);
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
   },

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

@@ -105,6 +105,12 @@ Blockly.Blocks["sensebox_ws2818_led"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2818_rgb_led_tooltip);
+    if (selectedBoard().title === "MCU-S2") {
+      this.setHelpUrl(Blockly.Msg.senseBox_ws2818_rgb_led_helpurl);
+    }
+    else {
+      this.setHelpUrl(Blockly.Msg.senseBox_ws2818_rgb_led_helpurl_2);
+    }
   },
 };
 
@@ -224,6 +230,7 @@ Blockly.Blocks["sensebox_ws2812_matrix_init"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_init_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
   },
 };
 
@@ -254,6 +261,9 @@ Blockly.Blocks["sensebox_ws2812_matrix_text"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_print_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
+
   },
 };
 
@@ -282,6 +292,8 @@ Blockly.Blocks["sensebox_ws2812_matrix_drawPixel"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_draw_pixel_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
   },
 };
 
@@ -298,6 +310,8 @@ Blockly.Blocks["sensebox_ws2812_matrix_clear"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_clear_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
   },
 };
 
@@ -317,6 +331,8 @@ Blockly.Blocks["sensebox_ws2812_matrix_showBitmap"] = {
     this.setPreviousStatement(true, null);
     this.setNextStatement(true, null);
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_show_bitmap_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
   },
 };
 
@@ -340,6 +356,8 @@ Blockly.Blocks["sensebox_ws2812_matrix_bitmap"] = {
       );
     this.setOutput(true, "Bitmap");
     this.setTooltip(Blockly.Msg.senseBox_ws2812_rgb_matrix_bitmap_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
   },
 };
 
@@ -358,6 +376,8 @@ Blockly.Blocks["sensebox_ws2812_matrix_custom_bitmap"] = {
     this.setTooltip(
       Blockly.Msg.senseBox_ws2812_rgb_matrix_custom_bitmap_tooltip,
     );
+    this.setHelpUrl(Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl);
+
   },
 };
 
@@ -875,6 +895,7 @@ Blockly.defineBlocksWithJsonArray([
     output: "Bitmap",
     colour: getColour().sensebox,
     tooltip: Blockly.Msg.senseBox_ws2812_rgb_matrix_draw_bitmap_tooltip,
-    helpUrl: "",
+    helpUrl: Blockly.Msg.senseBox_ws2812_rgb_matrix_helpurl,
+
   },
 ]);

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

@@ -127,7 +127,7 @@ Blockly.Blocks["sensebox_osem_connection"] = {
 Blockly.Blocks["sensebox_send_to_osem"] = {
   init: function () {
     this.setTooltip(Blockly.Msg.senseBox_send_to_osem_tip);
-    this.setHelpUrl("");
+    this.setHelpUrl(Blockly.Msg.senseBox_osem_connection_helpurl);
     this.setColour(getColour().sensebox);
     this.appendDummyInput().appendField(Blockly.Msg.senseBox_send_to_osem);
     if (boxes) {

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

@@ -329,6 +329,7 @@ Blockly.Blocks["sensebox_tof_imager"] = {
       .appendField(dropdown, "dropdown");
     this.setOutput(true, Types.NUMBER.typeName);
     this.setTooltip(Blockly.Msg.sensebox_tof_imager_tooltip);
+    this.setHelpUrl(Blockly.Msg.sensebox_tof_imager_helpurl);
     this.getField("dropdown").setValidator(
       function (val) {
         this.updateShape_(val === "DistanzBM");
@@ -478,6 +479,7 @@ Blockly.Blocks["sensebox_gps"] = {
     this.setOutput(true, Types.NUMBER.typeName);
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_gps_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_gps_helpurl);
   },
 };
 
@@ -702,6 +704,7 @@ Blockly.Blocks["sensebox_esp32s2_light"] = {
     this.setOutput(true, Types.DECIMAL.typeName);
     this.setColour(getColour().sensebox);
     this.setTooltip(Blockly.Msg.senseBox_esp32_photodiode_tooltip);
+    this.setHelpUrl(Blockly.Msg.senseBox_esp32_photodiode_helpurl);
     this.data = { name: "Photodiode" };
   },
 };

src/components/Blockly/msg/de/sensebox-display.js

@@ -8,6 +8,7 @@ export const DISPLAY = {
 
 **Anschluss:** I2C
 `,
+
   senseBox_display_clearDisplay_tooltip:
     "Löscht die Anzeige auf dem Display. Sollte immer zu Begin oder am Ende der Endlosschleife aufgerufen werden.",
   senseBox_display_clearDisplay: "Display löschen",

src/components/Blockly/msg/de/sensebox-led.js

@@ -10,6 +10,8 @@ export const LED = {
   senseBox_ws2818_rgb_led_init_tooltip: `Schließe die RGB-LED an einen der **digital/analog Ports** an. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. `,
   senseBox_ws2818_rgb_led_color: `Farbe`,
   senseBox_ws2818_rgb_led_number: `Anzahl`,
+  senseBox_ws2818_rgb_led_helpurl: 'https://docs.sensebox.de/docs/hardware/accessoires/rgb-led-esp32',
+  senseBox_ws2818_rgb_led_helpurl_2: 'https://docs.sensebox.de/docs/hardware/accessoires/rgb-led',
 
   /**
    * Color
@@ -75,4 +77,5 @@ export const LED = {
     `0x29B3, 0x74DA, 0x74DA, 0x74DA, 0x0000, 0x0000, 0x0000, 0xB5B6, 0x0000, 0x0000, 0x29B3, 0x29B3, 0x29B3, 0x0000, 0x0000, 0x0000,   // 0x0060 (96) pixels}`,
   senseBox_ws2812_rgb_matrix_draw_bitmap: `Male eine eigene Bitmap`,
   senseBox_ws2812_rgb_matrix_draw_bitmap_tooltip: `Wähle anzuzeigende Farben für die einzelnen Pixel aus.`,
+  senseBox_ws2812_rgb_matrix_helpurl: 'https://docs.sensebox.de/docs/hardware/accessoires/led-matrix',
 };

src/components/Blockly/msg/de/sensebox-osem.js

@@ -4,7 +4,7 @@ export const OSEM = {
    */
   senseBox_osem_connection_tip:
     "Verwende diesen Block, um deine senseBox mit der openSenseMap zu verbinden. Registriere deine senseBox auf der openSenseMap und trage die IDs und den API-Schlüssel ein. Verwende anschließend den Block ***Sende Messwert an die openSenseMap*** und die Sensor-ID, um die Messwerte zu übertragen.",
-  senseBox_osem_connection_helpurl: "https://www.opensensemap.org/",
+  senseBox_osem_connection_helpurl: "https://docs.sensebox.de/docs/editors/blockly/blocks/web/opensensemap",
   senseBox_send_to_osem_tip:
     "Sende mit diesem Block Messwerte an die openSenseMap. Verwende pro Messwert einen Block und trage die zugewiesene Sensor ID ein",
   senseBox_send_to_osem: "Sende Messwert an die openSenseMap",

src/components/Blockly/msg/de/sensebox-sensors.js

@@ -24,14 +24,14 @@ export const SENSORS = {
   senseBox_sensor_dps310: "Luftdruck-/Temperatursensor (DPS310)",
   senseBox_sensor_dps310_tooltip:
     "Schließe den Sensor an einen der **I2C-Anschlüsse** an. Der Sensor gibt dir den Messwert für den Luftdruck in hPa. Um die korrekte Höhe über NN zu berechnen benötigt der Sensor einen aktuellen Referenzwert.",
-  senseBox_sensor_dps310_helpurl: "",
+  senseBox_sensor_dps310_helpurl: "https://docs.sensebox.de/docs/hardware/sensors/luftdruck-temperatur",
 
   /**
    * Mikro
    */
   senseBox_sound: "Mikrofon",
-  senseBox_sound_tip:
-    "Schließe den Sensor über das Breadbord an einen der **analog/digital** Ports an. Gibt den Messwert des Mikrofons in Volt zurück",
+  senseBox_sound_tooltip:
+    "Schließe den Sensor über das Breadbord an einen der **Analog/Digital** Ports an. Gibt den Messwert des Mikrofons in Volt zurück",
   senseBox_sound_helpurl: "https://docs.sensebox.de/hardware/sensoren-mikro/",
 
   /**
@@ -116,7 +116,7 @@ Wenn die maximale Distanz überschritten wird, wird ein Wert von **O** ausgegebe
 
 **Beachte:** Das GPS Modul benöigt beim ersten Verwenden relativ lange (ca. 5-10 Minuten) bis es deinen Standort gefunden hat!
 `,
-  senseBox_gps_helpurl: "https://docs.sensebox.de/hardware/sensoren-gps/",
+  senseBox_gps_helpurl: "https://docs.sensebox.de/docs/hardware/accessoires/gps/",
 
   /**
    * Windspeed
@@ -129,7 +129,7 @@ Wenn die maximale Distanz überschritten wird, wird ein Wert von **O** ausgegebe
    */
   senseBox_soundsensor_dfrobot: "Soundsensor (DF Robot)",
   senseBox_soundsensor_dfrobot_tooltip:
-    "Schließe den Sensor an einen der **digital/analog Ports** an. Der Sensor gibt dir den Messwert in dB mit einer Nachkommastelle",
+    "Schließe den Sensor an einen der **Digital/Analog Ports** an. Der Sensor gibt dir den Messwert in dB mit einer Nachkommastelle",
   senseBox_soundsensor_dfrobot_helpurl:
     "https://docs.sensebox.de/hardware/sensoren-lautstaerke/",
   /*
@@ -185,7 +185,7 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
   senseBox_sds011_serial1: "Serial1",
   senseBox_sds011_serial2: "Serial2",
   senseBox_sds011_helpurl:
-    "https://docs.sensebox.de/hardware/sensoren-feinstaub/",
+    "https://docs.sensebox.de/docs/hardware/sensors/feinstaub-sds011/",
 
   /**
    * Button
@@ -215,7 +215,7 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
   senseBox_sps30_tooltip:
     "Dieser Block gibt dir den Messwert des Sensirion SPS30 Feinstaubsensor. Schließe den Feinstaubsensor an einen der **I2C** Anschlüssen an. Im Dropdown Menü zwischen PM1.0, PM2.5, PM4.0 und PM10 auswählen. Der Messwert wird dir als **Kommazahl** in µg/m3",
   senseBox_sps30_helpurl:
-    "https://docs.sensebox.de/hardware/sensoren-feinstaub/",
+    "https://docs.sensebox.de/docs/hardware/sensors/feinstaub-sps30/",
 
   /**
    * Photodiode MCUS2(ESP32)
@@ -224,8 +224,16 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
   senseBox_esp32_photodiode: "Lichtintensität",
   senseBox_esp32_photodiode_tooltip:
     "Die Photodiode misst Lichtintensität. Der ausgegebene Wert ist eine **Ganzzahl** zwischen 0 und 4095. Je höher der Wert, desto heller ist die Umgebung.",
-
+    senseBox_esp32_photodiode_helpurl:"https://docs.sensebox.de/docs/hardware/sensors/photodiode",
+
   /**
+   * MPU6050 */  
+  senseBox_mpu6050_tooltip: "Der MPU6050 ist ein Beschleunigungs- und Gyroskopsensor. Schließe den Sensor an einen der I2C Anschlüsse an. Der Sensor gibt dir die Beschleunigung in m/s² und die Winkelgeschwindigkeit in °/s zurück.",
+  senseBox_mpu6050_helpurl:"https://docs.sensebox.de/docs/hardware/sensors/mpu6050/",
+
+
+
+  /** 
    * ToF Imager
    *
    */
@@ -236,4 +244,5 @@ Die Messwerte für Temperatur, Luftfeuchtigkeit und Luftdruck können direkt ver
   sensebox_distance_bitmap: "8x8 Distanzen als Bitmap (für LED-Matrix)",
   sensebox_tof_imager_max_distance: "Maximal messbare Distanz ",
   sensebox_tof_imager_max_distance_unit: "cm",
+  sensebox_tof_imager_helpurl: "https://docs.sensebox.de/docs/hardware/sensors/tof",
 };

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

@@ -322,6 +322,7 @@ export const UI = {
    */
 
   tooltip_viewer: "Hilfe",
+  tooltip_moreInformation_02: "Informationen zum Block",
   tooltip_moreInformation: "Mehr Informationen",
   tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen",
 

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

@@ -317,6 +317,7 @@ export const UI = {
 
   tooltip_viewer: "Help",
   tooltip_moreInformation: "More information",
+  tooltip_moreInformation_02: "Information about the Block",
   tooltip_hint: "Select a Block to show the hint",
 
   /**

src/components/CodeEditor/Sidebar.js

@@ -5,7 +5,6 @@ import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import Typography from "@mui/material/Typography";
-import { LibraryVersions } from "../../data/versions.js";
 import { useMonaco } from "@monaco-editor/react";
 import { Button } from "@mui/material";
 import SerialMonitor from "./SerialMonitor.js";
@@ -34,6 +33,27 @@ const Sidebar = () => {
       });
   };
 
+  const [libraries, setLibraries] = React.useState([]);
+  React.useEffect(() => {
+    const fetchLibraries = async () => {
+      const { data } = await axios.get(
+        `${process.env.REACT_APP_COMPILER_URL}/libraries`,
+        {
+          params: {
+            format: "json",
+          },
+        }
+      );
+      const myLibs = data.installed_libraries
+        .map(({ library }) => library)
+        .filter((lib) => lib.location == "user")
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+      setLibraries(myLibs);
+    };
+    fetchLibraries();
+  }, []);
+
   return (
     <div>
       {"serial" in navigator ? (
@@ -128,15 +148,16 @@ const Sidebar = () => {
             style={{
               overflow: "auto",
               width: "100%",
+              height: "100%",
               padding: "1rem",
             }}
           >
             <p>{Blockly.Msg.codeeditor_libraries_text}</p>
-            {LibraryVersions().map((object, i) => {
+            {libraries.map((library, i) => {
               return (
-                <p>
-                  <a href={object.link} target="_blank" rel="noreferrer">
-                    {object.library} {object.version}
+                <p key={library.name + i}>
+                  <a href={library.website} target="_blank" rel="noreferrer" >
+                    {library.name} {library.version}
                   </a>
                 </p>
               );

src/components/CodeViewer.js

@@ -108,7 +108,7 @@ class CodeViewer extends Component {
     var curlyBrackets = "{ }";
     var unequal = "<>";
     return (
-      <Card style={{ height: "100%", maxHeight: "60vH" }} ref={this.myDiv}>
+      <Card style={{ height: "100%", maxHeight: "50vH" }} ref={this.myDiv}>
         <Accordion
           square={true}
           style={{ margin: 0 }}