Komponenty

Zapoznaj się najpierw z podstawowymi informacjami na temat stron internetowych 

Dodawanie komponentów i sterowanie nimi przez stronę internetową to najprostszy sposób na sterowanie urządzeniami i wyświetlanie wiadomości/ zmienmnych ustawionych przez nie.

Żeby dodać stronę i móc dodawać do niej komponenty wybieramy w zakładce Devices wybieramy New a nasptępnie new webPage. W oknie które się poajwi wpisujemy standardowo nazwę urządzenia i Id i zostawiamy template który jest ustawiony “Component Starter”

Następnie klikamy na index.html i wybieramy opcję “Edit with wizard”

 

Pojawi się okno

Okno jest dosyć proste mamy podgląd strony, i możemy też edytować jej źródła co jest pomocne w usuwaniu komponentów i reorganizowanie ich

And You have two buttons

Wstawianie komponentu

  1. Komponent do wstawienia
  2. Komponenty służące do zmiany stanu zmiennej, mają ustawiony typ zmiennej który mogą zmieniać, np button ma tylko typ boolean, ale już pole tesktowe może zmieniac liczby integers, float czy text
  3. Komponent posiada konfigurację ( każdy komponent inną)
  4. Komponenty do ustawiania wartości zmiennej mają typ name, który służy do ustalenia nazwy zmiennej którą zmieniaja
  5. Nazwę zmiennej możemy wybrać z istniejących już zmienny
  6. Podgląd kodu komponentu – nie można zmieniać służy jedynie do podglądu źródła
  7. Jak komponent będzie wyglądał po wstawieniu
  8. Wstawia komponent na stronę

Po wstawieniu komponentu widzimy cały podgląd strony, i możemy edytować jej źródła

Komponent statusu połączenia

Jest to inny typ komponentu służy do pokazywania stanu połączeń naszej strony internetowej

  1. Połączenie websocketowe czyli naszej strony z systemem remoteme.org (ikona 4)
  2. Połączeni bezpośrednie z jednym lub więcej naszych połączeń – wczasie generaownie kodu do ESP opcja direct connection musi być włączona (ikona 5)
  3. Camera – jeżeli jest połączenie webRTC (między innymi przesył obrazu)  (ikona 6)

Ten komponent nie wpływa na połaczenia ale jedynie wyświetla ich status

Edytowanie źródła

Żeby zobaczyć źródło strony wybieramy source

Jest to kod html, najciekawszym miejscem są komponenty wyglądają one tak:

Do tych komponentów możesz dodawać własne style np:

Albo klasy których definicja snajduję się w pliku styles.css.

W źródłach możesz też przestawiać i usuwać komponenty. Komponentu korzystają z material Design Lite , a to oznacza że możesz dodawać własne komponenty bazujące na nich – np karty, tabele itd

Co się dzieje “pod spodem”

jak pewnie zauważyłeś komponenty dodane mają formę:

bilbioteka remoteme zamienia te komponenty na komponenty z MaterialDesignLite i podpina do nich odpowiednie zdarzenia. Scrypt który odpowaiada za zamiane tych komponentów to remoteMeComponent.js

W pliku na początku wołamy funkcję replace( która zamienia komponenty)

na przykąłdzie addButton zobaczmy jak takie zastępowanie wygląda. Komponent <variable>  jest zastępowany poprzez:

czyli na początek wstawia w miejsce <variable> przycisk

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label} </button>

Następnie są dodawane zdarzenia, jak np co zrobić z komponentem jeżęli zmieni się określona zmienna, i zmiana wartości zmiennej np po kliknięciu

Jeżeli chcesz dodać własne komponenty to zachowaj standard mojego kodu i zrób forka repository  . I Jak dodasz fajne komponenty daj mi znać to zmerguje Twoje zmiany żeby inny też mogli z nich korzystać

 

Więcej o bibliotece javascript tutaj