Chrome Serial API, 2. Teil

Im ersten Teil haben wir in die Programmierung der seriellen Schnittstelle mit JavaScript unter Chrome eingeführt und beendeten den Artikel mit einem seriellen Monitor. Das Ganze könnte noch schicker etwas schicken aussehen und praktisch wäre es darüberhinaus, Daten auch an den Arduino zu senden.

Um die potenziellen Möglichkeiten aufzuzeigen, wird die Web-App um einen Slider erweitert, der auf dem Bildschirm exakt die aktuelle Position des Schiebereglers auf dem Esplora anzeigt. Alle Beispiele finden Sie in unserem zum Download angebotenen Archiv. Ferner wird es zwei weitere UI-Elemente geben. Mit einem ColorPicker lässt sich die Farbe der RGB-LED setzen und mit einer weiteren Dropdown-Box kann man die Frequenz des Tons einstellen, den der Lautsprecher des Esplora ausgeben soll.

Folgerichtig enthält die erweiterte Datei main.html (im Archiv-Ordner AdvancedSample) drei weitere Elemente mit den IDs slider, rgbled und frequency.

<label>
        Slider:
        <input id="slider" type="range" min="0"
        max="1023" value="1023" disabled="true">
</label>
<label>
        RGB LED Color:
        <input id="rgbled" type="color">
</label>
<label>
        Tone:
        <select id="frequency">
          <option value="0">Off</option>
          <option value="31">B0</option>
          ...
          ...
        </select>
</label>

Auch sensors.js muss angepasst werden. Allerdings müssen der Datei aufgrund des Programmiermodells fast nur Funktionen hinzugefügt werden. Der bisherige Code bleibt weitestgehend unberührt.

Die einfachste Erweiterung ist die Abbildung des Schiebereglers auf dem Bildschirm. Hierzu wird in processReadBuffer der aktuelle Wert des Reglers ausgelesen (es ist das fünfte Element in den Sensor-Daten) und in das slider-Element kopiert.

function processReadBuffer() {
  var attr = readBuffer.split(DELIMITER);
  if (attr.length == SENSOR_NUMBER) {
  setRawData(readBuffer);
  var intAttr = attr.map(function(x) { return parseInt(x); });
  document.getElementById('slider').value = 1023 - intAttr[4];
  }
}

Zu beachten ist dabei, dass die Regler-Position etwas unglücklich kodiert ist. Steht der Regler ganz links, liefert der Arduino den Wert 1023. Steht er ganz rechts, wird 0 zurückgegeben. Also muss der Sensor-Wert von 1023 subtrahiert werden, um ihn korrekt auf dem Bildschirm darstellen zu können.

Ähnlich einfach liessen sich auch die Werte des Analog-Joysticks, der digitalen Taster und des Beschleunigungssensors in die Anwendung integrieren. Dem Einsatz des Esplora als Gamepad für Browserspiele steht also nichts entgegen.