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ć

Opis niektórych komponentów

Button, CheckBox, Switcher

Steruje zmienna typu Boolean, ma dwa stany które odpwiednio sterują wybraną zmienną

Slider

Steruje zmienna typu Integer, Integer_2, Integer_3, w zależności od wybranej zmiennej pojawią się jeden, dwa lub trzy slidery o tych samych minimalnych i maksymalnych wartościach określonych przez min i max

Div (tylko odczyt zmiennej)

Tworzy element  Div na podstawie podanego wzorca (w polu template) gdzie {name} jest zastępowane nazwą zmiennej, a {value} jej wartością.

Joystick (tylko zapis zmiennej)

Tworzy element z mniejszym elementem w środku, steruje zmienną typu Integer_2 przy pomocy myszki lub palca w smartphonie. Przy kliknięciu – ustalana jest pozycja wyjściowa i od wychylenia od niej są mierzone wartości do wysłania.

Status

nie steruje żadną zmienna wyświetla natomiast status połączeń websocketowych, direct connection, i camera (webRTC) w zależności od wybranych opcji. Po kliknięciu na daną ikonkę następuje rozłączenie gdy połączenie jest aktywne, natomiast dla nie aktywnego połaczenia – próba ponowego połączenia. Domyślnie wyświetla się w prawym górnym rogu

Camera Mouse Track

Działanie i konfiguracja jak dla komponent joystick. Komponent podpina zdarzenia pod komponent video (jeżeli istnieje). Ustawia zmienna po kliknięciu dotknięciu elementu z podglądem video jak również w czasie przesuwania palcem, myszką po komponencie

Camera Mouse Track

Działanie i konfiguracja jak dla komponent joystick. Komponent podpina zdarzenia pod żyroskop smartphona, Centra pozycja jest ustalana w momencie aktywowania przycisku, wartości są wysyłane jedynie, gdy przycisk jest aktywny.

 

 

Więcej o bibliotece javascript tutaj