Flutter webview

package.json

@@ -32,7 +32,7 @@
     "axios": "^0.28.0",
     "blockly": "^11.1.1",
     "file-saver": "^2.0.5",
-    "framer-motion": "^5.6.0",
+    "framer-motion": "^6.5.1",
     "markdown-it": "^12.3.2",
     "mnemonic-id": "^3.2.7",
     "moment": "^2.29.4",

src/components/Blockly/BlocklyComponent.jsx

@@ -108,7 +108,11 @@ class BlocklyComponent extends React.Component {
         <Card
           ref={this.blocklyDiv}
           id="blocklyDiv"
-          style={this.props.style ? this.props.style : {}}
+          style={
+            this.props.style
+              ? this.props.style
+              : { height: "100%", width: "100%" }
+          }
         />
         <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
         <Snackbar

src/components/Blockly/BlocklyWindow.jsx

@@ -76,7 +76,7 @@ class BlocklyWindow extends Component {
 
   render() {
     return (
-      <div>
+      <>
         <BlocklyComponent
           ref={this.simpleWorkspace}
           style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
@@ -130,7 +130,7 @@ class BlocklyWindow extends Component {
         {this.props.svg && this.props.initialXml ? (
           <BlocklySvg initialXml={this.props.initialXml} />
         ) : null}
-      </div>
+      </>
     );
   }
 }

src/components/BoardSelector.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { Button, Menu, MenuItem } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMicrochip, faCaretDown } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * BoardSelector component for selecting MCU board type.
+ * Props:
+ * - selectedBoard: string ("mcu", "mini", or "esp32")
+ * - setBoard: function to set the selected board
+ */
+class BoardSelector extends React.Component {
+  constructor(props) {
+    super(props);
+    this.mcuRef = React.createRef();
+    this.state = {
+      anchorElBoard: null,
+    };
+  }
+
+  handleOpenMenu = () => {
+    this.setState({ anchorElBoard: this.mcuRef.current });
+  };
+
+  handleCloseMenu = () => {
+    this.setState({ anchorElBoard: null });
+  };
+
+  handleSelectBoard = (event) => {
+    this.props.setBoard(event.currentTarget.getAttribute("value"));
+    this.handleCloseMenu();
+  };
+
+  render() {
+    const { selectedBoard } = this.props;
+    return (
+      <div style={{ padding: "12px" }}>
+        <Button
+          style={{
+            textTransform: "none",
+            cursor: "pointer",
+            alignItems: "center",
+            alignContent: "center",
+            background: "transparent",
+            color: "inherit",
+            fontWeight: "bold",
+            border: "2px solid white",
+            borderRadius: "25px",
+          }}
+          ref={this.mcuRef}
+          onClick={this.handleOpenMenu}
+          startIcon={<FontAwesomeIcon icon={faMicrochip} />}
+          endIcon={<FontAwesomeIcon icon={faCaretDown} />}
+        >
+          {selectedBoard === "mcu"
+            ? "MCU"
+            : selectedBoard === "mini"
+              ? "MCU:mini"
+              : "MCU-S2"}
+        </Button>
+        <Menu
+          anchorEl={this.state.anchorElBoard}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "center",
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "center",
+          }}
+          open={Boolean(this.state.anchorElBoard)}
+          onClose={this.handleCloseMenu}
+        >
+          <MenuItem value="mcu" onClick={this.handleSelectBoard}>
+            MCU
+          </MenuItem>
+          <MenuItem value="mini" onClick={this.handleSelectBoard}>
+            MCU:mini
+          </MenuItem>
+          <MenuItem value="esp32" onClick={this.handleSelectBoard}>
+            MCU-S2
+          </MenuItem>
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default BoardSelector;

src/components/Content.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
 
 import * as Blockly from "blockly/core";
 import { De } from "./Blockly/msg/de";
@@ -34,6 +35,10 @@ class Content extends Component {
   }
 
   render() {
+    const { location } = this.props;
+    if (location && location.pathname === "/minimal") {
+      return <Routes />;
+    }
     return (
       <div className="wrapper">
         <Navbar />
@@ -47,11 +52,12 @@ class Content extends Component {
 
 Content.propTypes = {
   language: PropTypes.string.isRequired,
+  minimal: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
   language: state.general.language,
   board: state.board.board,
 });
 
-export default connect(mapStateToProps, null)(Content);
+export default connect(mapStateToProps, null)(withRouter(Content));

src/components/MinimalHome.jsx

@@ -0,0 +1,159 @@
+import { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { clearStats, workspaceName } from "../actions/workspaceActions";
+import * as Blockly from "blockly/core";
+import BlocklyWindow from "./Blockly/BlocklyWindow";
+import store from "../store";
+import { setPlatform, setRenderer } from "../actions/generalActions";
+import BoardSelector from "./BoardSelector";
+import { setBoard } from "../actions/boardAction";
+
+class MinimalHome extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      initialXml: localStorage.getItem("autoSaveXML"),
+    };
+  }
+
+  componentDidMount() {
+    store.dispatch(setRenderer("zelos"));
+    window.localStorage.setItem("ota", true);
+    store.dispatch(setPlatform(false));
+    // Listen for messages from Flutter
+    window.addEventListener("message", this.handleFlutterMessage);
+  }
+
+  componentDidUpdate(props) {
+    /* Resize and reposition all of the workspace chrome (toolbox, trash,
+    scrollbars etc.) This should be called when something changes that requires
+    recalculating dimensions and positions of the trash, zoom, toolbox, etc.
+    (e.g. window resize). */
+    const workspace = Blockly.getMainWorkspace();
+    Blockly.svgResize(workspace);
+  }
+
+  componentWillUnmount() {
+    this.props.clearStats();
+    this.props.workspaceName(null);
+    window.localStorage.removeItem("ota");
+    window.removeEventListener("message", this.handleFlutterMessage);
+  }
+
+  handleFlutterMessage = (event) => {
+    // You may want to check event.origin for security in production
+    try {
+      const data =
+        typeof event.data === "string" ? JSON.parse(event.data) : event.data;
+      if (data && data.action === "triggerCompile") {
+        this.handleCompileFromFlutter();
+      }
+    } catch (e) {
+      // Ignore invalid JSON
+    }
+  };
+
+  handleCompileFromFlutter = async () => {
+    try {
+      // Simulate some work (replace with your actual logic)
+      const board =
+        this.props.selectedBoard === "mcu" ||
+        this.props.selectedBoard === "mini"
+          ? "sensebox-mcu"
+          : "sensebox-esp32s2";
+
+      const response = await fetch(`${this.props.compilerUrl}/compile`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          sketch: this.props.arduinoCode,
+          board,
+        }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || "Compilation failed");
+      }
+      if (data.data.id) {
+        const result = {
+          status: "success",
+          message: "Compile finished",
+          sketchId: data.data.id,
+          board: board,
+        };
+        window.FlutterChannel.postMessage(JSON.stringify(result));
+        return;
+      }
+    } catch (e) {
+      const result = {
+        status: "error",
+        message: e.message || "An error occurred",
+      };
+      window.FlutterChannel.postMessage(JSON.stringify(result));
+      return;
+    }
+  };
+
+  onChange = () => {
+    this.setState({ codeOn: !this.state.codeOn });
+    const workspace = Blockly.getMainWorkspace();
+    // https://github.com/google/blockly/blob/master/core/blockly.js#L314
+    if (workspace.trashcan && workspace.trashcan.flyout) {
+      workspace.trashcan.flyout.hide(); // in case of resize, the trash flyout does not reposition
+    }
+  };
+
+  render() {
+    return (
+      <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+          }}
+        >
+          <BoardSelector
+            selectedBoard={this.props.selectedBoard}
+            setBoard={this.props.setBoard}
+          />
+        </div>
+        <div style={{ flex: 1 }}>
+          <BlocklyWindow
+            initialXml={this.state.initialXml}
+            selectedBoard={
+              this.props.selectedBoard === "mcu" ||
+              this.props.selectedBoard === "mini"
+                ? "sensebox-mcu"
+                : "sensebox-esp32s2"
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+MinimalHome.propTypes = {
+  platform: PropTypes.bool.isRequired,
+  arduinoCode: PropTypes.string.isRequired,
+  board: PropTypes.string.isRequired,
+  compilerUrl: PropTypes.string.isRequired,
+  setBoard: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  platform: state.general.platform,
+  arduinoCode: state.workspace.code.arduino,
+  selectedBoard: state.board.board,
+  compilerUrl: state.general.compiler,
+});
+
+export default connect(mapStateToProps, {
+  clearStats,
+  workspaceName,
+  setBoard,
+})(MinimalHome);