Dokumentacja Avtek Sign - Avtek Sign Documentation

Spis treści

Zmodyfikuj kod Odtwarzacza
Utwórz formularz konfiguracyjny UI dla Odtwarzacza

Większość Odtwarzaczy wymaga pewnego rodzaju opcji konfiguracyjnych. Konfiguracja może się różnić dla każdej instancji Odtwarzacza (czyli za każdym razem, gdy używasz Odtwarzacza).

W przypadku naszego prostego Odtwarzacza Zegara przyjmijmy, że chcemy dodać następujące opcje konfiguracyjne:

Rozmiar czcionki zegara: podaj dokładny rozmiar czcionki w pikselach (Integer)
Pokaż sekundy: opcja wyświetlania części sekund zegara lub jej wyłączenia (Boolean)

Aby dodać te opcje do Odtwarzacza, należy wykonać 3 czynności:

Zmodyfikuj kod Odtwarzacza, aby akceptował wartości konfiguracyjne.
Dodaj funkcję init_widget(config) odtwarzacza, którą odtwarzacz wywołuje, gdy aplikacja zakończył ładowanie i przekazuje parametry konfiguracyjne JSON.
Ułatw konfigurowanie poprzez specyfikację formularza UI, aby można było utworzyć formularz edytujący te opcje dla instancji Odtwarzacza.

Zmodyfikuj kod Odtwarzacza

Zmodyfikuj kod Odtwarzacza w następujący sposób:

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>

Utwórz formularz konfiguracyjny UI dla Odtwarzacza

Aby umożliwić konfigurowanie Odtwarzacza, musisz dostarczyć szczegółową specyfikację pól konfiguracyjnych. W tym celu korzystasz z JSON Schema. Po prostu wklej tekst JSON Schema do pola tekstowego.

Do 2 wartości konfiguracyjnych potrzebujemy teraz,

wartość „schema” definiuje edytory dla każdego z pól,
wartość „fields” jest opcjonalna i określa kolejność, w jakiej pola pojawią się w formularzu.

Poniżej znajduje się JSON Schema do wykorzystania:

Konfiguracja UI

{
  "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"
    }
  }
}