Avtek Sign Dokumentation
EN PL DE

Inhaltsverzeichnis

Die meisten Apps erfordern in der Regel Konfigurationsoptionen. Diese Konfiguration kann für jede Instanz Ihrer App unterschiedlich sein (d.h. jedes Mal, wenn Sie Ihre App verwenden).

Für unsere Simple Clock App nehmen wir an, wir wollen die folgenden Konfigurationsoptionen hinzufügen:

  • Clock-Schriftgröße: geben Sie die genaue Schriftgröße in Pixel an (Integer)
  • Sekunden anzeigen: eine Option, um die Sekundenanzeige der Uhr anzuzeigen oder nicht (Boolean)

Um diese Optionen Ihrer App hinzuzufügen, müssen Sie 3 Dinge tun:

  1. Den App-Code anpassen, um die Konfigurationswerte zu akzeptieren.
  2. Eine init_widget(config)-Funktion hinzufügen, die der Player aufruft, wenn die App fertig geladen ist und die JSON-Konfigurationsparameter übergibt.
  3. Eine UI-Formulardefinition bereitstellen, damit Sie ein Formular zur Bearbeitung dieser Optionen für Ihre App-Instanzen erstellen können.

App-Code anpassen

Passen Sie den App-Code wie folgt an:

index.html

<!DOCTYPE html>
<html>
<head>
<script>

var use_seconds = true;
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = 0
    m = checkTime(m);
	txtEl = document.getElementById('txt')

	if(use_seconds){
		s = today.getSeconds();
    	s = checkTime(s);
		txtEl.innerHTML = h + ":" + m + ":" + s;
	}
	else{
    	txtEl.innerHTML = h + ":" + m;
	}
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function init_widget(config) {
		if (!config) {
			return;
		}
	
		if("clock_font_size" in config){
			var pixels = config.clock_font_size + "px"
			document.getElementById('txt').style.fontSize = pixels;
		}

		if("use_seconds" in config){
			use_seconds = config.use_seconds;
		}
		
		startTime()
		
}
</script>
</head>
<body>

<div id="txt" style="font-size: 48px"></div>

</body>
</html>

UI-Konfigurationsformular für Ihre App bereitstellen

Um die Konfiguration Ihrer App zu ermöglichen, müssen Sie eine detaillierte Spezifikation Ihrer Konfigurationsfelder bereitstellen.

Für die beiden Konfigurationswerte benötigen wir jetzt,

  • der „schema“-Wert definiert die Editoren für jedes Ihrer Felder,
  • der „fields“-Wert ist optional und definiert die Reihenfolge, in der die Felder im Formular erscheinen.

Hier ist das JSON-Schema zur Verwendung:

UI-Konfiguration

{
  "fields": [
    "clock_font_size",
    "use_seconds"
  ],
  "schema": {
    "clock_font_size": {
      "editorAttrs": {
        "max": 999,
        "min": 1,
        "step": 1
      },
      "title": "Clock Font Size",
      "type": "Number",
      "validators": [
        "required",
        "number"
      ]
    },
    "use_seconds": {
      "title": "Use Seconds",
      "type": "Checkbox"
    }
  }
}