Connect IQ: Datenfeld im Simulator in echter Feldgröße und mit Beispieldaten testen

Für einen Garmin Edge 1050 habe ich zwei Connect-IQ-Datenfelder geschrieben, die ihre Werte per Handy-Nachricht bekommen. Auf dem Gerät sitzen sie nebeneinander in halber Breite, etwa 240 × 157 Pixel. Um das Layout zu prüfen, wollte ich nicht jedes Mal Rad und Handy brauchen. Im Simulator zeigte das Feld aber nur „ECLIPS: warte auf Handy“, und die Feldgröße hängt dort vom gewählten Layout ab. Ich wollte drei Dinge sehen: echte Werte, die echte Größe und mehrere Zustände auf einen Blick.

Die Lösung

Eine Kopie des Projekts wird zur Testvariante: onUpdate wird in drawField umbenannt. Ein neues onUpdate setzt Beispielwerte, zeichnet das Feld in eine BufferedBitmap der echten Feldgröße und legt mehrere Zustände untereinander auf den Bildschirm.

    function onUpdate(dc as Graphics.Dc) as Void {
        width = dc.getWidth();

    function onUpdate(dc as Graphics.Dc) as Void {
        dc.setColor(Graphics.COLOR_DK_GRAY, Graphics.COLOR_DK_GRAY); dc.clear();
        var states = [
            {"SOC"=>"84%","iBat"=>"-350 mA","FL"=>"1","RL"=>"1","stage"=>"2","Chg"=>"0, 0"},
            {"SOC"=>"62%","iBat"=>"+293 mA","FL"=>"1","RL"=>"0","stage"=>"1","Chg"=>"3, 1"},
            {"SOC"=>"100%","iBat"=>"5 mA","FL"=>"0","RL"=>"1","stage"=>"4","Chg"=>"0, 0"}];
        for (var k = 0; k < states.size(); k++) {
            values = states[k]; lastData = _secs;
            var bb = Graphics.createBufferedBitmap({:width=>240, :height=>157}).get() as Graphics.BufferedBitmap;
            drawField(bb.getDc());
            dc.drawBitmap(0, k * 165, bb);
        }
    }

    function drawField(dc as Graphics.Dc) as Void {
        width = dc.getWidth();

Bauen und im Simulator starten:

monkeyc -f monkey.jungle -d edge1050 -o feld-demo.prg -y developer_key
monkeydo feld-demo.prg edge1050

Das Ergebnis sind drei Zustände des Felds in Originalgröße untereinander: Entladen mit beiden Lichtern, Laden mit Tagfahrlicht, voller Akku nur mit Rücklicht. So sieht man sofort, ob dreistellige Werte noch passen und ob Texte abgeschnitten werden.

Warum das funktioniert

Die Zeichenroutine fragt Breite und Höhe über dc.getWidth() und dc.getHeight() ab. Der Zeichenkontext einer BufferedBitmap hat genau die Größe der Bitmap. Die Routine „glaubt“ also, sie sei ein Feld von 240 × 157 Pixeln. Die Werte setzt die Testvariante direkt, die Handy-Kommunikation wird gar nicht gebraucht.

Stolperfallen

• Die Testvariante nur in einer Kopie bauen, nie die echte App so ausliefern.
• Der Simulator zeichnet hier mit hellem Hintergrund, auf dem Edge ist es nachts schwarz. Farben, die auf Weiß verschwinden, brauchen einen Rahmen.
• Screenshots des Fensters per PrintWindow klappten bei mir nur für die erste App nach dem Start des Simulators zuverlässig. Für die zweite App habe ich den Simulator neu gestartet.
• Graphics.getFontAscent() ist eine Modulfunktion, nicht dc.getFontAscent(). Sonst meldet der Compiler „Cannot find symbol“.
• Der Simulator ersetzt das Gerät nicht: Was hier läuft, kann auf dem Edge trotzdem anders aussehen, zum Beispiel bei der Größe der Zahlenschriften.