2D view of Astro Pi SenseHAT

COPYRIGHT

@@ -4,18 +4,6 @@ Source: https://github.com/RaspberryPiFoundation/editor-ui
 Files: *
 Copyright: 2021-2025 Raspberry Pi Foundation <web@raspberrypi.org>
 License: Apache-2.0
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-  .
-    http://www.apache.org/licenses/LICENSE-2.0
-  .
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-
 
 Files: apps/scratch-frame
 Copyright: 2025 Raspberry Pi Foundation <web@raspberrypi.org>
@@ -29,6 +17,27 @@ Files: public/pygal.js
 Copyright: 2014 bzwheeler, trinket.io and other contributors <https://github.com/trinketapp/pygal.js>
 License: MIT
 
+Files: src/assets/icons/material_symbols/*
+Copyright: Google LLC
+License: Apache-2.0
+Comment:
+  Icons obtained from Google Material Symbols:
+    - Font library: <https://fonts.google.com/icons>
+    - Upstream source: https://github.com/google/material-design-icons
+
+License: Apache-2.0
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  .
+    http://www.apache.org/licenses/LICENSE-2.0
+  .
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
 License: AGPL-3.0
   This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
   .

cypress/e2e/missionZero-wc.cy.js

@@ -25,7 +25,7 @@ it("defaults to the visual output tab", () => {
   );
 });
 
-it("renders the astro pi component on page load", () => {
+it("renders the 3D astro pi component on page load", () => {
   getSkulptRunner().should("contain", "yaw");
 });
 
@@ -42,6 +42,17 @@ it("loads the sense hat library", () => {
   getResults().should("contain", '"isErrorFree":true');
 });
 
+it("switches between 3D and 2D visuals", () => {
+  getSkulptRunner().should("contain", "yaw");
+  getSkulptRunner()
+    .findByRole("button", { name: "Zoom in to 2D view" })
+    .click();
+  getSkulptRunner().should("not.contain", "yaw");
+  getSkulptRunner()
+    .findByRole("button", { name: "Zoom out to 3D view" })
+    .click();
+});
+
 it("sets initial criteria correctly", () => {
   runCode("");
 

cypress/e2e/spec-wc-skulpt.cy.js

@@ -157,10 +157,10 @@ describe("Running the code with skulpt", () => {
   });
 
   it("does not render astro pi component on page load", () => {
-    getSkulptRunner().should("not.contain", "yaw");
+    getSkulptRunner().should("not.contain", "Zoom in to 2D view");
   });
 
-  it("renders astro pi component if sense hat imported", () => {
+  it("renders 3D astro pi component if sense hat imported", () => {
     runCode("import sense_hat");
 
     getSkulptTabByName("Visual output").click();

public/translations/en.json

@@ -226,6 +226,12 @@
     "newTab": "Preview in new tab",
     "preview": "preview",
     "senseHat": {
+      "view": {
+        "toggleTo2D": "Zoom in to 2D view",
+        "toggleTo3D": "Zoom out to 3D view",
+        "resetOrientation": "Reset Astro Pi orientation",
+        "description": "2D zoomed view of the Astro Pi 8 by 8 Sense HAT LED matrix"
+      },
       "controls": {
         "colour": "colour",
         "humidity": "humidity",

src/assets/stylesheets/AstroPiModel.scss

@@ -7,6 +7,7 @@
   flex-flow: column;
 
   &-model {
+    position: relative;
     display: flex;
     flex-flow: column;
     max-block-size: 50%;
@@ -43,7 +44,6 @@
       }
 
       &__reset-btn {
-        flex: 1;
         display: flex;
         margin-inline-start: auto;
         svg {
@@ -56,6 +56,67 @@
         }
       }
     }
+    &-view-controls {
+      position: absolute;
+      inset-inline: 0;
+      display: flex;
+      flex-direction: row-reverse;
+      padding-block-start: 0.5rem;
+      margin: 0 var(--space-1);
+
+      button {
+        background-color: var(--rpf-white);
+        inline-size: 2rem;
+        block-size: 2rem;
+        border-radius: 0.25rem;
+        border: 1px solid var(--rpf-white);
+        font-family: var(--editor-font-family-sans-serif);
+        font-weight: 500;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    &-2d {
+      display: flex;
+      justify-content: center;
+      padding-block-start: var(--space-0-5);
+      flex: 1;
+    }
+    &-2d-matrix {
+      padding: 1%;
+      display: grid;
+      background-color: darkgrey;
+      grid-template-columns: repeat(8, 1fr);
+      grid-template-rows: repeat(8, 1fr);
+      gap: 1%;
+      aspect-ratio: 1 / 1;
+      max-block-size: 100%;
+      max-inline-size: 100%;
+
+      &__led-housing {
+        display: flex;
+        background-color: #c9cacd;
+        border-width: 2px 2px 2px 1px;
+        border-style: solid;
+        justify-content: center;
+        align-items: center;
+        border-block-start-color: #cfcfcf;
+        border-inline-start-color: lightgrey;
+        border-block-end-color: #cfcfcf;
+        border-inline-end-color: grey;
+      }
+      &__led-bulb {
+        box-sizing: border-box;
+        block-size: 90%;
+        inline-size: 90%;
+        // controls the led circle
+        border-width: 0.5px;
+        border-style: solid;
+        border-color: grey;
+        border-radius: 25%;
+      }
+    }
   }
 
   &-controls {

src/components/AstroPiModel/AstroPiModel.jsx

@@ -1,16 +1,36 @@
-import React from "react";
 import "../../assets/stylesheets/AstroPiModel.scss?inline";
 import Simulator from "./Simulator";
+import Simulator2d from "./Simulator2d";
 import Sk from "skulpt";
 import AstroPiControls from "./AstroPiControls/AstroPiControls";
 import OrientationPanel from "./OrientationPanel/OrientationPanel";
+import ViewModeControls from "./ViewModeControls";
 import { useEffect, useState } from "react";
 import { resetModel, updateRTIMU } from "../../utils/Orientation";
 import { useSelector } from "react-redux";
 import { defaultMZCriteria } from "../../utils/DefaultMZCriteria";
+import { rotate, rotationClockwise90degrees } from "../../utils/senseHatUtils";
 
-const AstroPiModel = () => {
+const B = [207, 207, 207];
+const W = [235, 235, 235];
+const SMILEY_FACE = rotate(
+  rotationClockwise90degrees,
+  // prettier-ignore
+  [
+    B, B, B, B, B, B, B, W,
+    B, B, B, B, B, B, B, B,
+    W, W, W, B, B, W, W, W,
+    W, B, W, B, B, W, B, W,
+    W, W, W, B, B, W, W, W,
+    B, B, B, B, B, B, B, B,
+    B, B, W, B, B, W, B, B,
+    B, B, W, W, W, W, B, B
+  ],
+);
+
+const AstroPiModel = ({ initialIs3d = true }) => {
   const project = useSelector((state) => state.editor.project);
+  const [is3d, setIs3d] = useState(initialIs3d);
   const [orientation, setOrientation] = useState([0, 90, 0]);
   const resetOrientation = (e) => {
     resetModel(e);
@@ -58,9 +78,7 @@ const AstroPiModel = () => {
       start_motion_callback: () => {},
       stop_motion_callback: () => {},
     };
-    for (var i = 0; i < 64; i++) {
-      Sk.sense_hat.pixels.push([0, 0, 0]);
-    }
+    Sk.sense_hat.pixels = SMILEY_FACE;
   }
 
   useEffect(() => {
@@ -75,11 +93,19 @@ const AstroPiModel = () => {
   return (
     <div className="sense-hat">
       <div className="sense-hat-model">
-        <Simulator updateOrientation={setOrientation} />
-        <OrientationPanel
-          orientation={orientation}
-          resetOrientation={resetOrientation}
-        />
+        <>
+          {is3d && (
+            <>
+              <Simulator updateOrientation={setOrientation} />
+              <OrientationPanel
+                orientation={orientation}
+                resetOrientation={resetOrientation}
+              />
+            </>
+          )}
+          <ViewModeControls is3d={is3d} setIs3d={setIs3d} />
+          {!is3d && <Simulator2d />}
+        </>
       </div>
 
       {/* <!-- Full sensor controls --> */}