Feat: add app blockly version

cypress/e2e/embedded.cy.js

@@ -0,0 +1,93 @@
+/// <reference types="cypress" />
+
+describe("Embedded Blockly Page Tests", () => {
+  it("[Embedded] visits the embedded page", () => {
+    cy.visit("/embedded");
+    cy.url().should("include", "/embedded");
+  });
+
+  it("[Embedded] displays Blockly workspace", () => {
+    cy.visit("/embedded");
+    cy.get(".blocklySvg", { timeout: 10000 }).should("exist");
+  });
+
+  it("[Embedded] displays iPad toolbar", () => {
+    cy.visit("/embedded");
+    cy.get(".embedded-toolbar", { timeout: 10000 }).should("exist");
+    // Share, Reset icons exist
+    cy.get(".embedded-toolbar svg.fa-share-nodes").should("exist");
+    cy.get(".embedded-toolbar svg.fa-share").should("exist");
+
+    // Select a board so Compile button becomes available
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").should("exist");
+  });
+
+  it("[Embedded] displays workspace name component", () => {
+    cy.visit("/embedded");
+    cy.get(".embedded-toolbar").find("div").should("exist");
+  });
+
+  it("[Embedded] displays device selection", () => {
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).should("exist");
+    cy.get('img[alt="Sensebox MCU"]').should("exist");
+    cy.get('img[alt="Sensebox Mini"]').should("exist");
+  });
+
+  it("[Embedded] compiles code", () => {
+    cy.intercept({ method: "POST", pathname: "/compile" }).as("compile");
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 8000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").parents("button").click();
+    cy.wait("@compile", { responseTimeout: 30000, requestTimeout: 30000 })
+      .its("response.statusCode").should("eq", 200);
+  });
+
+  it("[Embedded] opens reset dialog", () => {
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 8000 }).click();
+    cy.get(".embedded-toolbar svg.fa-share").parents("button").click();
+    cy.get('[role="dialog"]', { timeout: 5000 }).should("exist");
+  });
+
+  it("[Embedded] displays toolbox with search", () => {
+    cy.visit("/embedded");
+    cy.get(".blocklyToolbox", { timeout: 10000 }).should("exist");
+    cy.get('input[type="search"]').should("exist");
+  });
+
+  it("[Embedded] marks toolbox xml as embedded mode", () => {
+    cy.visit("/embedded");
+    cy.get('xml#blockly').should("have.class", "embedded-mode");
+  });
+
+  it("[Embedded] uses tablet mode for compilation with embedded-specific text", () => {
+    cy.intercept({ method: "POST", pathname: "/compile" }).as("compile");
+
+    cy.visit("/embedded");
+    cy.get('img[alt="Sensebox ESP"]', { timeout: 10000 }).click();
+    cy.get(".embedded-toolbar svg.fa-clipboard-check").parents("button").click();
+
+    cy.wait("@compile", { responseTimeout: 30000, requestTimeout: 30000 })
+      .its("response.statusCode").should("eq", 200);
+
+    cy.get('[role="dialog"]', { timeout: 10000 }).should("exist");
+
+    // Verify embedded mode specific elements
+    cy.get('[role="dialog"]').should("contain.text", "Gehe zum Übertragungs-Tab");
+    cy.get('[role="dialog"]').should("contain.text", "Over-The-Air Übertragung");
+    cy.get('[role="dialog"]').should("contain.text", "Der Code wurde erfolgreich kompiliert");
+    cy.get('[role="dialog"]').should("contain.text", "Klicke den unteren Button um zum Übertragungs-Tab zu gelangen");
+
+    // Verify stepper configuration
+    cy.get('[role="dialog"]').within(() => {
+      cy.get('.MuiStep-root').should("have.length", 2);
+      cy.get('.MuiStep-root').first().should("contain.text", "Kompilieren");
+      cy.get('.MuiStep-root').last().should("contain.text", "Übertragen");
+      cy.get('.MuiStepLabel-label').should("not.contain.text", "Herunterladen");
+      cy.get('a[href*="blocklyconnect-app://"]').should("exist");
+    });
+  });
+
+});

src/App.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import { Router } from "react-router-dom";
+import { Router, Route, Switch } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
 import { Provider } from "react-redux";
@@ -17,6 +17,9 @@ import {
 } from "@mui/material/styles";
 
 import Content from "./components/Content";
+import EmbeddedBlockly from "./components/EmbeddedBlockly";
+import RouteHandler from "./components/RouteHandler";
+import EmbeddedRoute from "./components/Route/EmbeddedRoute";
 import { setCompiler } from "./actions/generalActions";
 
 const theme = createTheme({
@@ -44,7 +47,10 @@ const theme = createTheme({
 
 class App extends Component {
   componentDidMount() {
-    store.dispatch(loadUser());
+    // Only call loadUser() if not on embedded route
+    if (window.location.pathname !== '/embedded') {
+      store.dispatch(loadUser());
+    }
     // set initial compiler
     store.dispatch(setCompiler(import.meta.env.VITE_INITIAL_COMPILER_URL));
   }
@@ -56,8 +62,16 @@ class App extends Component {
         <ThemeProvider theme={theme}>
           <Provider store={store}>
             <Router history={customHistory}>
+              <RouteHandler />
               <ErrorBoundary>
-                <Content />
+                <Switch>
+                  <EmbeddedRoute path="/embedded" exact>
+                    <EmbeddedBlockly />
+                  </EmbeddedRoute>
+                  <Route path="/">
+                    <Content />
+                  </Route>
+                </Switch>
               </ErrorBoundary>
             </Router>
           </Provider>

src/actions/generalActions.js

@@ -6,6 +6,7 @@ import {
   STATISTICS,
   PLATFORM,
   COMPILER,
+  EMBEDDED_MODE,
 } from "./types";
 
 export const visitPage = () => (dispatch) => {
@@ -58,3 +59,10 @@ export const setCompiler = (compiler) => (dispatch) => {
     payload: compiler,
   });
 };
+
+export const setEmbeddedMode = (isEmbedded) => (dispatch) => {
+  dispatch({
+    type: EMBEDDED_MODE,
+    payload: isEmbedded,
+  });
+};

src/actions/types.js

@@ -52,6 +52,7 @@ export const RENDERER = "RENDERER";
 export const SOUNDS = "SOUNDS";
 export const STATISTICS = "STATISTICS";
 export const COMPILER = "COMPILER";
+export const EMBEDDED_MODE = "EMBEDDED_MODE";
 
 // messages
 export const GET_ERRORS = "GET_ERRORS";

src/components/Blockly/BlocklyComponent.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
 
 import * as Blockly from "blockly/core";
 import "./blocks/index";
 import "@/components/Blockly/generator/index";
 
 import Toolbox from "./toolbox/Toolbox";
+import EmbeddedToolbox from "./toolbox/EmbeddedToolbox";
 import { reservedWords } from "./helpers/reservedWords";
 import Snackbar from "../Snackbar";
 
@@ -26,6 +28,7 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
   const blocklyDivRef = useRef(null);
   const toolboxRef = useRef(null);
   const [workspace, setWorkspace] = useState(undefined);
+  const isEmbedded = useSelector((state) => state.general.embeddedMode);
 
   const [snackbar, setSnackbar] = useState({
     open: false,
@@ -36,14 +39,24 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
 
   // Inject Blockly once on mount
   useEffect(() => {
-    const ws = Blockly.inject(blocklyDivRef.current, {
+    const blocklyOptions = {
       toolbox: toolboxRef.current,
       plugins: {
         blockDragger: ScrollBlockDragger,
         metricsManager: ScrollMetricsManager,
       },
       ...rest,
-    });
+    };
+
+    // Only apply mobile layout options when in embedded mode
+    if (isEmbedded) {
+      blocklyOptions.horizontalLayout = true;
+      blocklyOptions.toolboxPosition = 'end';
+      // Ensure toolbox icon sprites and other assets load correctly in embedded view
+      blocklyOptions.media = '/media/blockly/';
+    }
+
+    const ws = Blockly.inject(blocklyDivRef.current, blocklyOptions);
 
     setWorkspace(ws);
 
@@ -93,12 +106,28 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
       ws?.dispose();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isEmbedded]);
+
+  const cardStyle = useMemo(() => {
+    return isEmbedded ?{
+      height: "100%",
+      width: "100%",
+    } : {};
+  }, [isEmbedded]);
 
   return (
     <>
-      <Card ref={blocklyDivRef} id="blocklyDiv" style={style ? style : {}} />
-      <Toolbox toolbox={toolboxRef} workspace={workspace} />
+      <Card
+        ref={blocklyDivRef}
+        id="blocklyDiv"
+        style={style ? style : cardStyle}
+        className={isEmbedded ? "embedded-mode" : ""}
+      />
+      {isEmbedded ? (
+        <EmbeddedToolbox toolbox={toolboxRef} workspace={workspace} />
+      ) : (
+        <Toolbox toolbox={toolboxRef} workspace={workspace} />
+      )}
       <Snackbar
         open={snackbar.open}
         message={snackbar.message}

src/components/Blockly/BlocklyWindow.jsx

@@ -11,6 +11,7 @@ import { ZoomToFitControl } from "@blockly/zoom-to-fit";
 import { Backpack } from "@blockly/workspace-backpack";
 import { initialXml } from "./initialXml.js";
 import { getMaxInstances } from "./helpers/maxInstances";
+import { EMBEDDED_BLOCKLY_CONFIG, DEFAULT_BLOCKLY_CONFIG } from "../../config/embeddedConfig";
 
 import BlocklySvg from "./BlocklySvg";
 
@@ -24,13 +25,15 @@ export default function BlocklyWindow(props) {
   const sounds = useSelector((state) => state.general.sounds);
   const language = useSelector((state) => state.general.language);
   const selectedBoard = useSelector((state) => state.board.board);
+  const isEmbedded = useSelector((state) => state.general.embeddedMode);
 
   const {
     svg,
     blockDisabled,
     blocklyCSS,
     initialXml: initialXmlProp,
     zoomControls,
+    zoom,
     grid,
     move,
     readOnly,
@@ -134,40 +137,49 @@ export default function BlocklyWindow(props) {
 
   // Compute zoom/grid/move config with sensible defaults
   const zoomConfig = useMemo(
-    () => ({
-      controls: zoomControls !== undefined ? zoomControls : true,
-      wheel: false,
-      startScale: 1,
-      maxScale: 3,
-      minScale: 0.3,
-      scaleSpeed: 1.2,
-    }),
-    [zoomControls],
+    () => {
+      if (zoom !== undefined) return zoom;
+
+      // Use embedded config for embedded mode, default config otherwise
+      const baseConfig = isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.zoom : DEFAULT_BLOCKLY_CONFIG.zoom;
+
+      return {
+        ...baseConfig,
+        controls: zoomControls !== undefined ? zoomControls : baseConfig.controls,
+      };
+    },
+    [zoom, zoomControls, isEmbedded],
   );
 
   const gridConfig = useMemo(
-    () =>
-      grid !== undefined && !grid
-        ? {}
-        : {
-            spacing: 20,
-            length: 1,
-            colour: "#4EAF47", // senseBox-green
-            snap: false,
-          },
-    [grid],
+    () => {
+      if (grid === undefined || grid === false) return {};
+
+      if (typeof grid === "object") return grid;
+
+      return isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.grid : DEFAULT_BLOCKLY_CONFIG.grid;
+    },
+    [grid, isEmbedded],
   );
 
   const moveConfig = useMemo(
-    () =>
-      move !== undefined && !move
-        ? {}
-        : { scrollbars: true, drag: true, wheel: true },
-    [move],
+    () => {
+      if (move === undefined || move === false) return {};
+
+      if (typeof move === "object") return move;
+
+      return isEmbedded ? EMBEDDED_BLOCKLY_CONFIG.move : DEFAULT_BLOCKLY_CONFIG.move;
+    },
+    [move, isEmbedded],
   );
 
+  const containerStyles =isEmbedded ? {
+    height: "100%",
+    width: "100%"
+  } : {};
+
   return (
-    <div>
+    <div style={containerStyles}>
       <BlocklyComponent
         style={svg ? { height: 0 } : blocklyCSS}
         readOnly={readOnly !== undefined ? readOnly : false}
@@ -193,6 +205,7 @@ BlocklyWindow.propTypes = {
   blocklyCSS: PropTypes.object,
   initialXml: PropTypes.string,
   zoomControls: PropTypes.bool,
+  zoom: PropTypes.object,
   grid: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   move: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   readOnly: PropTypes.bool,

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

@@ -429,6 +429,9 @@ export const UI = {
   goToApp_text:
     "Der Code wurde erfolgreich kompiliert! Klicke den unteren Button um zur senseBox:connect App zu gelangen und die Übertragung des Sketches fertigzustellen!",
   goToApp_title: "Over-The-Air Übertragung",
+  goToApp_embedded: "Gehe zum Übertragungs-Tab",
+  goToApp_text_embedded:
+    "Der Code wurde erfolgreich kompiliert! Klicke den unteren Button um zum Übertragungs-Tab zu gelangen und die Übertragung des Sketches fertigzustellen!",
 
   transfer_headline: "Datei übertragen",
   transfer_subline:

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

@@ -424,6 +424,9 @@ export const UI = {
   goToApp_text:
     "The code has been compiled successfully. Start with the transfer by clicking on the button below, redirecting you to the senseBox:connect App ! ",
   goToApp_title: "Over-The-Air Transfer",
+  goToApp_embedded: "Go to Transfer Tab",
+  goToApp_text_embedded:
+    "The code has been compiled successfully. Click the button below to go to the transfer tab and complete the sketch transfer!",
 
   transfer_headline: "Transfer file",
   transfer_subline: "Drag the file from your downloads folder to the senseBox",