Interfejs oraz oprogramowanie urządzenia - suwak

Dodanie suwaka

Następnym krokiem jest dodanie suwaka, który pozwoli ustawić zadaną temperaturę dla wszystkich termostatów w centrali.

1. Wróć do edycji urządzenia, klikając w ikonę trzech kropek w prawym górnym rogu, a następnie wybierz Edycja.

2. Kliknij dwukrotnie przycisk Dodaj wiersz, aby dodać dwa nowe wiersze przeznaczone na elementy potrzebne do sterowania temperaturą.

3. Do pierwszego z dodanych wierszy dodaj nową kolumnę, aby móc umieścić dwa elementy tekstowe obok siebie. Po dodaniu struktura powinna wyglądać następująco:
   
   

4. W pierwszym wierszu, w obu kolumnach, dodaj nowe elementy typu Tekst.

   • W pierwszym elemencie tekstowym edytuj pole Wartość, wpisując:
     Temperatura zadana
     Pozostałe parametry pozostaw bez zmian.

   • W drugim elemencie tekstowym uzupełnij:

     • Nazwa elementu: target_temperature_text

     • Wartość: 21.0℃
       Pozostałe parametry pozostaw bez zmian.
       
       

5. W drugim wierszu dodaj nowy element typu Suwak. Wybierz wersję suwaka z przyciskami plus i minus, zmieniając typ suwaka strzałką.
   
   

6. Kliknij na suwak, aby wejść do jego edycji i uzupełnij następujące parametry:

   • Nazwa elementu: target_temperature_slider

   • Wartość: 21

   • Wartość maksymalna: 35

   • Wartość minimalna: 5

   • Wartość kroku: 0.1

   • Nazwa funkcji: onTargetChange

7. Kliknij Dodaj do kodu, a następnie Zapisz.

8. Aby elementy były dobrze rozmieszczone, ustaw wyrównania:

   • Pierwszy wiersz, pierwsza kolumna: wyrównanie lewy środek

   • Pierwszy wiersz, druga kolumna: wyrównanie prawy środek

   • Drugi wiersz: wyrównanie środek

9. Kliknij Zapisz konfigurację.

10. Po zapisaniu układ widżetu powinien wyglądać następująco:
    
    

Dodanie obsługi suwaka w kodzie

Kolejnym krokiem jest dodanie obsługi suwaka w callbacku, aby po zmianie wartości suwaka:

• zaktualizować tekst wyświetlany nad suwakiem, pokazując aktualnie ustawioną temperaturę,

• ustawić zadaną temperaturę na wszystkich termostatach w centrali.

Cały kod callbacka odpowiedzialny za te działania wygląda następująco:

-- callback dla suwaka zadanej temperatury
-- w argumencie newValue znajduje się nowa wartość suwaka
function CustomDevice:onTargetChange (newValue, element)
   -- pobranie elementu tekstowego z wyświetlaną wartością nad suwakiem i przypisanie do zmiennej
   -- do pobrania używamy funkcji getElement do której podajemy nazwę elementu
   local textElement = self:getElement("target_temperature_text")


   -- ustawienie wartości w elemencie tekstowym, wykorzystana jest funkcja formatująca tekst na podstawie podanych argumentów
   -- w tym przypadku wartości liczbowej suwaka
   textElement:setValue("value", string.format("%.1f℃", newValue))


   -- iterujemy wszystkie urządzenia wirtualne i sprawdzamy czy typ to termostat
   for _, dev in pairs(virtual) do


       if dev:getValue("type") == "thermostat" then


           -- urządzenie jest termostatem, ustawiamy temperaturę zadaną
           -- temperatura zadana trzymana w termostacie to wartość w stopniach celsjusza x10
           -- dlatego wartość pobraną z suwaka musimy pomnożyć przez 10
           dev:setValue("target_temperature", newValue * 10)


       end
   end
end

W podglądzie edycji kodu widzimy nowo dodany fragment, który odpowiada za obsługę suwaka (zaznaczony na poniższym zrzucie):

Po zapisaniu konfiguracji możemy przetestować urządzenie.

Po przesunięciu suwaka wartość wyświetlana nad nim powinna się zmienić, a zadana temperatura zostanie ustawiona na wszystkich termostatach podłączonych do centrali.