simulator add bme680

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

@@ -189,9 +189,9 @@ Blockly.Blocks["sensebox_sensor_pressure"] = {
 Blockly.Blocks["sensebox_sensor_bme680_bsec"] = {
   init: function () {
     var dropdownOptions = [
-      [Blockly.Msg.senseBox_temp, "temperature"],
-      [Blockly.Msg.senseBox_hum, "humidity"],
-      [Blockly.Msg.senseBox_bme_pressure, "pressure"],
+      [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"],

src/components/Blockly/generator/arduino/sensebox-sensors.js

@@ -313,13 +313,13 @@ bsec_virtual_sensor_t sensorList[13] = {
     }
     `;
     switch (dropdown_name) {
-      case "temperature":
+      case "Temperature":
         code = "bmeTemperatur";
         break;
-      case "humidity":
+      case "Humidity":
         code = "bmeHumidity";
         break;
-      case "pressure":
+      case "Pressure":
         code = "bmePressure";
         break;
       case "IAQ":

src/components/Blockly/generator/simulator/sensebox-sensors.js

@@ -40,6 +40,16 @@ Blockly.Generator.Simulator.forBlock["sensebox_esp32s2_light"] = function () {
   return [code, Blockly.Generator.Simulator.ORDER_ATOMIC];
 };
 
+
+
+Blockly.Generator.Simulator.forBlock["sensebox_sensor_bme680_bsec"] = function () {
+  Blockly.Generator.Simulator.modules_["sensebox_sensor_bme680_bsec"] = "sensebox_sensor_bme680_bsec";
+
+  var dropdown_name = this.getFieldValue("dropdown");
+  var code = `read${dropdown_name}BME680()`;
+  return [code, Blockly.Generator.Simulator.ORDER_ATOMIC];
+}
+
 Blockly.Generator.Simulator.forBlock["sensebox_sensor_truebner_smt50_esp32"] = function () {
   Blockly.Generator.Simulator.modules_["senseBox_smt50"] = "senseBox_smt50";
 

src/components/Simulator/flow.jsx

@@ -18,6 +18,7 @@ import WaterTemp from "./nodes/watertemp";
 import SMT50 from "./nodes/smt50";
 import store from "../../store";
 import photodiode from "./nodes/photodiode";
+import bme680 from "./nodes/bme680";
 import scd30 from "./nodes/scd30";
 import dps310 from "./nodes/dps310";
 
@@ -28,6 +29,7 @@ const nodeTypes = {
   senseBox_display: Display,
   senseBox_waterTemp: WaterTemp,
   sensebox_esp32s2_light: photodiode,
+  sensebox_sensor_bme680_bsec: bme680,
   senseBox_smt50: SMT50,  
   sensebox_scd30: scd30,
   sensebox_sensor_dps310: dps310

src/components/Simulator/init/index.js

@@ -2,6 +2,7 @@ import initDisplay from "./display";
 import initDom from "./dom";
 import initLogAndAlert from "./log";
 import initNeopixel from "./neopixel";
+import initBME680 from "./sensors/bme680";
 import initDPS310 from "./sensors/dps310";
 import initHDC1080 from "./sensors/hdc1080";
 import initLightUv from "./sensors/lightUv";
@@ -19,6 +20,7 @@ export default function initSimulator(interpreter, globalObject) {
   initLightUv(interpreter, globalObject);
   initNeopixel(interpreter, globalObject);
   initPd(interpreter, globalObject);
+  initBME680(interpreter, globalObject);
   initSMT50(interpreter, globalObject);
   initSCD30(interpreter, globalObject);
   initDPS310(interpreter, globalObject);

src/components/Simulator/init/sensors/bme680.js

@@ -0,0 +1,63 @@
+export default function initBME680(interpreter, globalObject) {
+    // Define readBME680Temperature function
+    var wrapper = function readTemperatureBME680() {
+      return document.getElementById("temp-bme680-slider").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readTemperatureBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+
+    // Define readBME680Humidity function
+    var wrapper = function readHumidityBME680() {
+      return document.getElementById("humidity-bme680-slider").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readHumidityBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+
+    // Define readBME680Pressure function
+    var wrapper = function readPressureBME680() {
+      return document.getElementById("pressure-bme680-slider").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readPressureBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+
+    // Define readBME680IAQ function
+    var wrapper = function readIAQBME680() {
+      return document.getElementById("iaq-bme680-slider").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readIAQBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+
+
+
+    // Define readBME680CO2Equivalent function
+    var wrapper = function readCO2EquivalentBME680() {
+      return document.getElementById("co2-bme680-slider").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readCO2EquivalentBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+
+    // Define readBME680BreathVOCEquivalent function
+    var wrapper = function readBreathVOCEquivalentBME680() {
+      return document.getElementById("voc-slider-bme680").value;
+    };
+    interpreter.setProperty(
+      globalObject,
+      "readBreathVOCEquivalentBME680",
+      interpreter.createNativeFunction(wrapper),
+    );
+  }

src/components/Simulator/nodes/bme680/index.jsx

@@ -0,0 +1,25 @@
+import React, { memo } from "react";
+import SensorGraphic from "./bme680.png";
+import SensorNode from "../../uiComponents/SensorNode";
+
+const BME680 = ({ data }) => {
+  // Für Temperatur und Luftfeuchte:
+
+  const sensorConfigBME680 = [
+    { id: "temp-bme680", emoji: "🌡️", label: "Temperatur (°C)", min: -20, max: 50, step: 0.5, initial: 20 },
+    { id: "humidity-bme680", emoji: "💧", label: "Luftfeuchte (%)", min: 0, max: 100, step: 1, initial: 50 },
+    { id: "pressure-bme680", emoji: "🌬️", label: "Luftdruck (hPa)", min: 800, max: 1100, step: 1, initial: 1013 },
+    { id: "iaq-bme680", emoji: "🏭", label: "IAQ (0-500)", min: 0, max: 500, step: 1, initial: 250 },
+    { id: "co2-bme680", emoji: "🏭", label: "CO2-Äquivalent (ppm)", min: 0, max: 5000, step: 1, initial: 2500 }
+    ];
+
+  return (
+    <SensorNode
+      title="BME680"
+      sensors={sensorConfigBME680}
+      imageSrc={SensorGraphic}
+    />
+  );
+};
+
+export default memo(BME680);

src/components/Simulator/uiComponents/SensorNode.jsx

@@ -1,18 +1,18 @@
-import React, { memo, useEffect, useState } from "react";
+import React, { memo, useState } from "react";
 import { Handle, Position } from "@xyflow/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/free-solid-svg-icons";
 
 const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
-  // Initialwerte für alle Sensoren festlegen
+  // Initial values for all sensors
   const initialValues = sensors.reduce((acc, sensor) => {
     acc[sensor.id] = sensor.initial !== undefined ? sensor.initial : sensor.min;
     return acc;
   }, {});
 
   const [values, setValues] = useState(initialValues);
   const [showOverlay, setShowOverlay] = useState(false);
-  const [isHovered, setIsHovered] = useState(false); // Hover-State
+  const [isHovered, setIsHovered] = useState(false);
 
   const handleChange = (id) => (e) => {
     setValues({ ...values, [id]: Number(e.target.value) });
@@ -23,13 +23,11 @@ const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
       style={{
         position: "relative",
         maxWidth,
-        background: "#1b7d1066", // Transparenter Hintergrund (#669933)
+        background: "#1b7d1066", // Transparent background
         borderRadius: "10px",
         overflow: "hidden",
         fontSize: "1.2rem",
-        // Übergang für den Hover-Effekt
         transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
-        // Veränderte Eigenschaften bei Hover
         transform: isHovered ? "scale(1.03)" : "scale(1)",
         boxShadow: isHovered ? "0 8px 15px rgba(0, 0, 0, 0.3)" : "none",
         cursor: "pointer",
@@ -38,7 +36,7 @@ const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
       onMouseLeave={() => setIsHovered(false)}
       onClick={() => setShowOverlay(!showOverlay)}
     >
-      {/* Titel */}
+      {/* Title */}
       <span
         style={{
           textAlign: "center",
@@ -52,43 +50,44 @@ const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
         {title}
       </span>
 
-      {/* Bild, das bei Klick das Overlay öffnet */}
+      {/* Image that opens the overlay when clicked */}
       <img
         src={imageSrc}
         alt="Sensor Graphic"
         style={{
           width: "100%",
           display: "block",
-          pointerEvents: "none", // Bild selbst ist nicht klickbar, sondern das ganze Div
+          pointerEvents: "none",
         }}
       />
 
-      {/* Overlay mit den Slidern */}
+      {/* Overlay with the sliders */}
       {showOverlay && (
         <div
           style={{
             position: "absolute",
             bottom: "0",
             left: "0",
             right: "0",
+            height: "300px",         // Fixed height for the container
             padding: "15px",
-            background: "#1b7d10b3", // Transparenter Hintergrund (#669933)
+            background: "#1b7d10b3",  // Transparent background
             display: "flex",
             flexDirection: "column",
             gap: "15px",
+            overflowY: "auto",       // Enable vertical scrolling
           }}
-          // Verhindert, dass Klicks im Overlay das Schließen sofort wieder auslösen
           onClick={(e) => e.stopPropagation()}
         >
-          {/* Schließen-Button */}
+          {/* Close button */}
           <div
             style={{
               position: "absolute",
               top: "10px",
               right: "15px",
               cursor: "pointer",
               fontWeight: "bold",
-              color: "#ffcc33", // Farbe für den Schließen-Button
+              color: "#ffcc33",
               fontSize: "1.5rem",
               userSelect: "none",
               zIndex: 2,
@@ -130,7 +129,7 @@ const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
                     onChange={handleChange(sensor.id)}
                     style={{
                       width: "100%",
-                      accentColor: "#00cccc", // Slider-Farbe
+                      accentColor: "#00cccc",
                     }}
                   />
                   <span
@@ -149,15 +148,7 @@ const SensorNode = ({ title, sensors, imageSrc, maxWidth = "250px" }) => {
           ))}
         </div>
       )}
-      {/* {/* <Handle
-        type="target"
-        position={Position.Left}
-        style={{
-          width: "1.5rem",
-          height: "1.5rem",
-          backgroundColor: "#ffcc33",
-        }}
-      /> */}
+
       <Handle
         type="source"
         position={Position.Right}