add display shield info

Author: thomasjball

.astro/content-modules.mjs

@@ -6,8 +6,8 @@ export default new Map([
 ["src/content/docs/apps/microbit-robot.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapps%2Fmicrobit-robot.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/apps/microdata.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fapps%2Fmicrodata.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/extensions/display-shield-ext.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fextensions%2Fdisplay-shield-ext.mdx&astroContentModuleFlag=true")],
-["src/content/docs/getting-started/display-shields.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Fdisplay-shields.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/getting-started/intro.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Fintro.mdx&astroContentModuleFlag=true")],
+["src/content/docs/getting-started/display-shields.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fgetting-started%2Fdisplay-shields.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/resources/docs.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fresources%2Fdocs.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/resources/api.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fresources%2Fapi.mdx&astroContentModuleFlag=true")],
 ["src/content/docs/resources/tutorials.mdx", () => import("astro:content-layer-deferred-module?astro%3Acontent-layer-deferred-module=&fileName=src%2Fcontent%2Fdocs%2Fresources%2Ftutorials.mdx&astroContentModuleFlag=true")]]);

.astro/data-store.json

@@ -37,7 +37,7 @@ export default defineConfig({
           label: "Getting Started",
           items: [
             { label: "What is the BBC Micro:bit?", link: "/getting-started/intro/" },
-            { label: "Display shield overview", link: "/getting-started/display-shields/" },
+            { label: "Display shields", link: "/getting-started/display-shields/" },
           ],
         },
         {

astro.config.mjs

@@ -3,44 +3,55 @@ title: Display Shield
 description: Create stunning visual displays with your micro:bit
 ---
 
-The Display Shield is a powerful graphics library and toolkit for creating beautiful visual effects on your micro:bit.
+The [MakeCode display shield extension](https://makecode.microbit.org/pkg/microbit-apps/display-shield) allows you to use any of the MakeCode Arcade shields with the [MakeCode for the micro:bit](https://makecode.microbit.org) or [MakeCode for Calliope](https://makecode.calliope.cc/) editors.
 
 ## Features
 
-- **Rich Graphics**: Render images, text, and animations
-- **Multiple Pixel Modes**: Support for different color depths and display modes
-- **Animation Support**: Create smooth, frame-based animations
-- **Easy API**: Simple yet powerful functions for drawing shapes and text
-- **Performance Optimized**: Efficient rendering for smooth gameplay
+- **simulator support**
+- access to the color display and buttons on the shield
+- Bitmap abstraction with numerous drawing primitives (draw line, circle, square, etc)
+- Bitmaps also can be created using the built-in image editor in MakeCode
 
 ## Getting Started
 
-1. Import the Display Shield library in your micro:bit project
-2. Initialize the display with your preferred settings
-3. Start drawing shapes, text, and images
-4. Create interactive graphics with sprite support
-
-## Example Code
-
-```python
-from display_shield import *
-
-# Create a display
-display = Display()
-
-# Draw a rectangle
-display.draw_rect(2, 2, 1, 1, color=True)
-
-# Show the display
-display.show()
+- Open https://makecode.microbit.org/
+- Create a new project
+- Add an extension via the “Extensions” item in the gear wheel (upper right)
+- Click the “Lights and Display” button, as shown below
+- Select the display shield extension, as shown below
+
+![extension dialog](../../../assets/extension-dialog.png)
+
+## Plot the accelerometer values as time series
+
+Copy this program into the JavaScript editor to plot the
+instantaneous values of the micro:bit's 3-axis accelerometer
+on the display shield screen:
+
+```javascript
+let x = 0, old_x = 0
+let y = 0, old_y = 0
+let z = 0, old_z = 0
+let t = 0
+basic.forever(function () {
+    x = Math.map(input.acceleration(Dimension.X), -1024, 1024, 120, 0)
+    y = Math.map(input.acceleration(Dimension.Y), -1024, 1024, 120, 0)
+    z = Math.map(input.acceleration(Dimension.Z), -1024, 1024, 120, 0)
+    screen().drawLine(t, x, t - 1, old_x, 3)
+    screen().drawLine(t, y, t - 1, old_y, 4)
+    screen().drawLine(t, z, t - 1, old_z, 5)
+    t = t + 1
+    if (t == 160) {
+        screen().scroll(-1, 0)
+        t = 159
+    }
+    old_x = x
+    old_y = y
+    old_z = z
+})
 ```
 
-## Documentation
-
-For detailed API documentation and more examples, check out the [Display Shield repository](https://github.com/microbit-apps/display-shield).
-
 ## Learn More
 
-- [Tutorials](/resources/tutorials/)
-- [API Reference](/resources/api/)
+- [API reference and examples](https://makecode.microbit.org/pkg/microbit-apps/display-shield)
 - [GitHub Repository](https://github.com/microbit-apps/display-shield)

src/assets/extension-dialog.png

@@ -1,9 +1,9 @@
 ---
-title: Display Shield Overview
-description: Learn about the display shields for the BBC micro:bit
+title: Display Shields for the micro:bit
+description: Learn about the display shields for the micro:bit
 ---
 
-There are a variety of display shields available for the BBC micro:bit 
+There are a variety of display shields available for the BBC micro:bit (version 2)
 that enhance its capabilities by providing a color display and additional
 buttons. The microbit slots into the shield using its edge connector.
 The display shields have a variety of uses:

src/assets/mbit-front-back.png

@@ -7,7 +7,7 @@ The [BBC micro:bit](https://microbit.org/) is a small, programmable microcompute
 designed to help you learn how computers work. It's perfect 
 for beginners and experienced programmers alike.
 
-![BBC micro:bit](../../../assets/mbit-v2.png)
+![BBC micro:bit](../../../assets/mbit-front-back.png)
 
 ## Key Features