Adds print(), printcenter() and showdataview() blocks to print text and visualize data (#29)

* add print and dataview blocks, add ger localization

* make all blocks english, improve dataview block, translation fixes, add calliope mini in description, remove radio and microphone from dependencies

* steamline js function call to screen().showDataView(..), update documentation in readme

* Update README.md

Author: fabianhugo

README.md

@@ -1,6 +1,6 @@
-# Display shield MakeCode extension for BBC micro:bit
+# Display shield MakeCode extension for BBC micro:bit and Calliope mini
 
-This MakeCode extension allows you to use any of the MakeCode Arcade shields with the MakeCode for BBC micro:bit editor. 
+This MakeCode extension allows you to use any of the MakeCode Arcade shields with the MakeCode for BBC micro:bit or MakeCode for Calliope editor. 
 The extension provides access to the color display and buttons on the shield, and has
 a Bitmap abstraction with numerous drawing primitives
 (draw line, circle, square, etc).
@@ -21,6 +21,12 @@ Five Arcade (display) shields for the micro:bit V2 are available on the market t
 ![more MakeCode Arcade shields](https://github.com/microbit-apps/display-shield/blob/master/assets/shields2.png?raw=true)
 
 
+## Arcade shields for the Calliope mini V3
+* [TINYSUPERLAB's GameKit Shield](https://shop.tinysuperlab.com/products/gamekit): No assembly required. Battery holder on the back. Jacdac compatible.
+
+![gamekit-calliope-mini-3](https://github.com/user-attachments/assets/8b0a923e-4297-4a91-ac62-8e150d269ed6)
+
+
 ## Simulator support
 
 As shown below, the extension provides a simulator for the display,
@@ -207,6 +213,29 @@ screen().fillCircle(10, 10, 8, 2)
 screen().drawCircle(10, 10, 8, 5)
 ```
 
+### Text
+There are three functions for drawing text onto a bitmap (including the screen):
+
+- `print(text, x, y, color?, font?)` — prints text starting at the given (x, y) coordinate.
+- `printCenter(text, y, color?, font?)` — prints text horizontally centered at the given y coordinate.
+- `showDataView(headline, label1?, value1?, label2?, value2?, label3?, value3?, color?, backgroundColor?, offset?, font?)` — displays a headline and up to three label/value pairs in a two-column layout, useful for showing sensor data or statistics. Labels or headlines without any string will not be printed. Using offset and a transparent background color, several calls of `showDataView(...)` can be combined to show 6 or more parameters in total.
+
+Here are examples in TypeScript using the `screen()` bitmap:
+
+```ts
+// 1) print — draw text at a specific position
+screen().print("Score: 123", 4, 4, 1) // x=4, y=4, color index 1
+
+// 2) printCenter — draw text centered horizontally
+screen().printCenter("Game Over", 50, 2) // centered at y=50, color index 2
+
+// 3) showDataView — display a headline and data pairs
+screen().showDataView("Stats", "Temp", 22, "Light", 55, "Sound", 49)
+```
+
+These helpers use built-in bitmapped fonts. You can explicitly pass a font (such as `bitmaps.font8` or `bitmaps.font12`) to control text size.
+
+
 ### Bitmap
 
 Let's dig into bitmaps, which you can create yourself (the screen is represented by a bitmap, as we have seen already). A bitmap is some number of rows and columns of color pixels that make up rectangular picture. A _pixel_ is a single point of color inside the bitmap. A bitmap has a fixed height (number of rows) and width (number of columns). When a bitmap is declared, or created, the height and width are specified either by the _layout_ of the bitmap or as parameters to its `create` method.
@@ -485,5 +514,6 @@ screen().drawTransparentBitmap(orangeBox, 32, 32)
 # Supported targets
 
 - for PXT/microbit
+- for PXT/calliopemini
 
 <script src="https://makecode.com/gh-pages-embed.js"></script><script>makeCodeRender("{{ site.makecode.home_url }}", "{{ site.github.owner_name }}/{{ site.github.repository_name }}");</script>

_locales/de/display-shield-jsdoc-strings.json

@@ -0,0 +1,77 @@
+{
+  "Bitmap.clone": "Gibt eine Kopie der aktuellen Bitmap zurück",
+  "Bitmap.drawBitmap": "Zeichnet die angegebene Bitmap auf die aktuelle Bitmap",
+  "Bitmap.drawCircle": "Zeichnet einen leeren Kreis",
+  "Bitmap.drawCircle|param|c": "Die Farbe zum Zeichnen des Kreises",
+  "Bitmap.drawCircle|param|cx": "Die Mittelpunkt-X-Koordinate des Kreises",
+  "Bitmap.drawCircle|param|cy": "Die Mittelpunkt-Y-Koordinate des Kreises",
+  "Bitmap.drawCircle|param|r": "Der Radius des Kreises",
+  "Bitmap.drawLine": "Zeichnet eine Linie",
+  "Bitmap.drawRect": "Zeichnet ein leeres Rechteck",
+  "Bitmap.drawTransparentBitmap": "Zeichnet die angegebene Bitmap mit transparentem Hintergrund auf die aktuelle Bitmap",
+  "Bitmap.equals": "Gibt wahr zurück, wenn die angegebene Bitmap mit dieser Bitmap übereinstimmt, ansonsten falsch.",
+  "Bitmap.fill": "Füllt die gesamte Bitmap mit einer bestimmten Farbe",
+  "Bitmap.fillCircle": "Füllt einen Kreis",
+  "Bitmap.fillCircle|param|c": "Die Farbe zum Zeichnen des Kreises",
+  "Bitmap.fillCircle|param|cx": "Die Mittelpunkt-X-Koordinate des Kreises",
+  "Bitmap.fillCircle|param|cy": "Die Mittelpunkt-Y-Koordinate des Kreises",
+  "Bitmap.fillCircle|param|r": "Der Radius des Kreises",
+  "Bitmap.fillRect": "Füllt ein Rechteck",
+  "Bitmap.flipX": "Spiegelt die Pixel horizontal in der aktuellen Bitmap",
+  "Bitmap.flipY": "Spiegelt die Pixel vertikal in der aktuellen Bitmap",
+  "Bitmap.getPixel": "Liest eine Pixelfarbe aus",
+  "Bitmap.mapRect": "Ersetzt Farben in einem Rechteck",
+  "Bitmap.print": "Druckt Text auf die Bitmap an der angegebenen Position",
+  "Bitmap.print|param|text": "Der zu druckende Text",
+  "Bitmap.print|param|x": "Die X-Koordinate",
+  "Bitmap.print|param|y": "Die Y-Koordinate",
+  "Bitmap.print|param|color": "Die Textfarbe",
+  "Bitmap.print|param|font": "Die zu verwendende Schriftart",
+  "Bitmap.printCenter": "Druckt Text mittig auf die Bitmap",
+  "Bitmap.printCenter|param|text": "Der zu druckende Text",
+  "Bitmap.printCenter|param|y": "Die Y-Koordinate",
+  "Bitmap.printCenter|param|color": "Die Textfarbe",
+  "Bitmap.printCenter|param|font": "Die zu verwendende Schriftart",
+  "Bitmap.replace": "Ersetzt eine Farbe in einer Bitmap durch eine andere",
+  "Bitmap.scroll": "Jedes Pixel in der Bitmap wird um (dx,dy) verschoben",
+  "Bitmap.setPixel": "Setzt eine Pixelfarbe",
+  "bitmaps": "Bitmap-Manipulationsblöcke",
+  "bitmaps._bitmap": "Eine Bitmap",
+  "bitmaps._bitmap|param|bitmap": "die Bitmap",
+  "bitmaps.create": "Erstellt eine neue leere (transparente) Bitmap",
+  "bitmaps.height": "Gibt die Höhe einer Bitmap zurück",
+  "bitmaps.width": "Gibt die Breite einer Bitmap zurück",
+  "bmp": "Tagged Bitmap-Literal-Konverter",
+  "context.eventContext": "Ruft den aktuellen Ereigniskontext ab, falls vorhanden",
+  "context.onIdle": "Registriert eine Funktion, die ausgeführt wird, wenn das Gerät im Leerlauf ist",
+  "context.popEventContext": "Entfernt den aktuellen Ereigniskontext und stellt Handler wieder her, falls ein vorheriger Kontext vorhanden ist",
+  "context.pushEventContext": "Fügt einen neuen Ereigniskontext hinzu und löscht alle Handler",
+  "controller": "Zugriff auf Spielsteuerung",
+  "controller.Button.addEventListener": "Fügt einen Ereignishandler hinzu, der ausgelöst wird, wenn das angegebene Ereignis für diese Taste ausgelöst wird. Handler, die mit dieser Methode hinzugefügt werden,\nstehen nicht im Konflikt mit Ereignissen, die über onEvent hinzugefügt wurden. Derselbe Handler kann nicht mehrmals für dasselbe Ereignis hinzugefügt werden.",
+  "controller.Button.addEventListener|param|handler": "Der Code, der ausgeführt werden soll, wenn das Ereignis ausgelöst wird",
+  "controller.Button.isPressed": "Gibt an, ob die Taste gerade gedrückt ist",
+  "controller.Button.onEvent": "Führt Code aus, wenn eine Taste gedrückt, losgelassen oder gehalten wird",
+  "controller.Button.pauseUntil": "Pausiert, bis eine Taste gedrückt oder losgelassen wird",
+  "controller.Button.removeEventListener": "Entfernt einen mit addEventListener registrierten Ereignishandler",
+  "controller.Button.removeEventListener|param|handler": "Der zu entfernende Handler",
+  "controller.onShieldEvent": "Führt Code aus, wenn Shield abwesend/vorhanden ist",
+  "controller.pauseUntilAnyButtonIsPressed": "Pausiert das Programm, bis eine Taste gedrückt wird",
+  "controller.setRepeatDefault": "Konfiguriert das Timing des Tastenwiederholungsereignisses für alle Controller-Tasten",
+  "controller.setRepeatDefault|param|delay": "Anzahl der Millisekunden von dem Drücken der Taste bis zum Start des Wiederholungsereignisses, z.B.: 500",
+  "controller.setRepeatDefault|param|interval": "Minimale Anzahl von Millisekunden zwischen Aufrufen des Tastenwiederholungsereignisses, z.B.: 30",
+  "helpers.imageShowDataView": "Zeigt eine Datenansicht mit Überschrift und bis zu drei Namen-Werte-Paaren",
+  "helpers.imageShowDataView|param|img": "Die Bitmap, auf der gezeichnet werden soll",
+  "helpers.imageShowDataView|param|headline": "Die Überschrift",
+  "helpers.imageShowDataView|param|label1": "Das erste Label",
+  "helpers.imageShowDataView|param|value1": "Der erste Wert",
+  "helpers.imageShowDataView|param|label2": "Das zweite Label",
+  "helpers.imageShowDataView|param|value2": "Der zweite Wert",
+  "helpers.imageShowDataView|param|label3": "Das dritte Label",
+  "helpers.imageShowDataView|param|value3": "Der dritte Wert",
+  "helpers.imageShowDataView|param|color": "Die Textfarbe",
+  "helpers.imageShowDataView|param|backgroundColor": "Die Hintergrundfarbe",
+  "helpers.imageShowDataView|param|offset": "Vertikaler Versatz in Pixeln",
+  "helpers.imageShowDataView|param|font": "Die zu verwendende Schriftart",
+  "screen": "Ruft die Bildschirm-Bitmap ab",
+  "shieldhelpers.registerSim": "Registriert den Simulator, um Tastendrücke zu empfangen"
+}

_locales/de/display-shield-strings.json

@@ -0,0 +1,75 @@
+{
+  "Bitmap.clone|block": "klone $this",
+  "Bitmap.drawBitmap|block": "zeichne $from in $this bei x $x y $y",
+  "Bitmap.drawCircle|block": "zeichne Kreis in $this bei cx $cx cy $cy Radius $r in Farbe $c",
+  "Bitmap.drawLine|block": "zeichne Linie in $this von x $x0 y $y0 bis x $x1 y $y1 in Farbe $c=colorindexpicker",
+  "Bitmap.drawRect|block": "zeichne Rechteck in $this bei x $x y $y Breite $w Höhe $h in Farbe $c=colorindexpicker",
+  "Bitmap.drawTransparentBitmap|block": "zeichne $from transparent in $this bei x $x y $y",
+  "Bitmap.equals|block": "$this ist gleich Bitmap $other",
+  "Bitmap.fillCircle|block": "fülle Kreis in $this bei cx $cx cy $cy Radius $r in Farbe $c",
+  "Bitmap.fillRect|block": "fülle Rechteck in $this bei x $x y $y Breite $w Höhe $h in Farbe $c=colorindexpicker",
+  "Bitmap.fill|block": "fülle $this mit $c=colorindexpicker",
+  "Bitmap.flipX|block": "spiegele $this horizontal",
+  "Bitmap.flipY|block": "spiegele $this vertikal",
+  "Bitmap.getPixel|block": "$this Farbe bei x $x y $y",
+  "Bitmap.printCenter|block": "schreibe $text in Mitte von $this bei y $y in Farbe $color=colorindexpicker || und Schrift $font",
+  "Bitmap.print|block": "schreibe $text in $this bei x $x y $y in Farbe $color=colorindexpicker || und Schrift $font",
+  "Bitmap.replace|block": "ändere Farbe in $this von $from=colorindexpicker zu $to=colorindexpicker",
+  "Bitmap.scroll|block": "scrolle $this um x $dx y $dy",
+  "Bitmap.setPixel|block": "setze $this Farbe bei x $x y $y auf $c=colorindexpicker",
+  "ControllerButton.A|block": "{id:controller}A",
+  "ControllerButton.B|block": "{id:controller}B",
+  "ControllerButton.Down|block": "runter",
+  "ControllerButton.Left|block": "links",
+  "ControllerButton.Right|block": "rechts",
+  "ControllerButton.Up|block": "hoch",
+  "ControllerButtonEvent.Pressed|block": "gedrückt",
+  "ControllerButtonEvent.Released|block": "losgelassen",
+  "ControllerButtonEvent.Repeated|block": "wiederholt",
+  "ControllerShieldEvent.Absent|block": "abgesteckt",
+  "ControllerShieldEvent.Present|block": "angesteckt",
+  "bitmaps._bitmap|block": "$bitmap",
+  "bitmaps._create|block": "erstelle Bitmap Breite $width Höhe $height",
+  "bitmaps._font12|block": "große Schrift",
+  "bitmaps._font5|block": "kleine Schrift",
+  "bitmaps._font8|block": "mittlere Schrift",
+  "bitmaps.create|block": "erstelle Bitmap Breite $width Höhe $height",
+  "bitmaps.height|block": "$bitmap Höhe",
+  "bitmaps.width|block": "$bitmap Breite",
+  "bitmaps|block": "Bitmaps",
+  "context|block": "Kontext",
+  "controller.A|block": "{id:controller}A",
+  "controller.Button.isPressed|block": "ist $this **Taste** gedrückt",
+  "controller.Button.onEvent|block": "wenn $this **Taste** $event",
+  "controller.B|block": "{id:controller}B",
+  "controller.down|block": "runter",
+  "controller.left|block": "links",
+  "controller.menu|block": "Menü",
+  "controller.onShieldEvent|block": "wenn Shield $event",
+  "controller.right|block": "rechts",
+  "controller.up|block": "hoch",
+  "controller|block": "Tasten",
+  "drawing|block": "Bildschirm",
+  "helpers.imageShowDataView|block": "zeige Datenansicht in $img=theScreen Überschrift $headline $label1 $value1 $label2 $value2 $label3 $value3||Farbe $color=colorindexpicker Hintergrund $backgroundColor=colorindexpicker Versatz $offset Schrift $font",
+  "screen|block": "Bildschirm",
+  "shieldhelpers.shieldPresent|block": "Shield vorhanden?",
+  "shieldhelpers|block": "Shield-Helfer",
+  "{id:category}Bitmap": "Bitmap",
+  "{id:category}Bitmaps": "Bitmaps",
+  "{id:category}Config": "Konfiguration",
+  "{id:category}Context": "Kontext",
+  "{id:category}Control": "Steuerung",
+  "{id:category}Controller": "Tasten",
+  "{id:category}Drawing": "Bildschirm",
+  "{id:category}Helpers": "Helfer",
+  "{id:category}Scene": "Szene",
+  "{id:category}Shieldhelpers": "Shield-Helfer",
+  "{id:category}Texteffects": "Texteffekte",
+  "{id:category}__screen_internal": "__screen_internal",
+  "{id:category}__screenhelpers": "__screenhelpers",
+  "{id:group}Compare": "Vergleichen",
+  "{id:group}Create": "Erstellen",
+  "{id:group}Drawing": "Zeichnen",
+  "{id:group}Text": "Text",
+  "{id:group}Transformations": "Transformationen"
+}

controllerbutton.ts

@@ -34,13 +34,12 @@ enum ControllerButton {
 }
 
 enum ControllerShieldEvent {
-    // block="absent"
+    //% block="absent"
     Absent = 3042,
-    // block="present"
+    //% block="present"
     Present = 3043,
 }
 
-
 namespace controller {
     export class Controller {
         constructor(no: number, v: any) { }

ns.ts

@@ -2,12 +2,15 @@
  * Access to game controls
  */
 //% weight=5 color="#D54322" icon="\uf11b"
+//% block="Controller"
 //% blockGap=8
 namespace controller {
 
 }
 
 //% weight=4 icon="\uf03e" color="#007090"
+//% block="Drawing"
+//% groups=['Drawing', 'Create', 'Transformations', 'Compare', 'Text']
 namespace drawing {
 
 }

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "makecode": "^1.3.0",
+    "pxt-calliopemini": "^8.1.9",
     "pxt-microbit": "^7.1.9"
   }
 }

pxt.json

@@ -1,11 +1,9 @@
 {
     "name": "display-shield",
-    "version": "1.0.9",
-    "description": "Display shield extension for MakeCode micro:bit",
+    "version": "1.1.2",
+    "description": "Display shield extension for MakeCode micro:bit and Calliope mini",
     "dependencies": {
         "core": "*",
-        "radio": "*",
-        "microphone": "*",
         "bitmap": "*",
         "fonts": "*"
     },
@@ -56,7 +54,9 @@
         "docs/is-pressed.md",
         "docs/draw-bitmap.md",
         "docs/draw-circle.md",
-        "tutorials/getting-started.md"
+        "tutorials/getting-started.md",
+        "_locales/de/display-shield-jsdoc-strings.json",
+        "_locales/de/display-shield-strings.json"
     ],
     "testFiles": [
         "test.ts"