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

Insert Component – wstawia komponent więcej poniżej
Insert Chart – dodaje wykres do wyświetlania historii zmiennych więcej tutaj

Wstawianie komponentu

Komponent do wstawienia
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
Komponent posiada konfigurację ( każdy komponent inną)
Komponenty do ustawiania wartości zmiennej mają typ name, który służy do ustalenia nazwy zmiennej którą zmieniaja
Nazwę zmiennej możemy wybrać z istniejących już zmienny
Podgląd kodu komponentu – nie można zmieniać służy jedynie do podglądu źródła
Jak komponent będzie wyglądał po wstawieniu
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

Połączenie websocketowe czyli naszej strony z systemem remoteme.org (ikona 4)
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)
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:

<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

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

<variable component="button" type="BOOLEAN" style="background-color:yellow" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" style="background-color:yellow" name="led" label="something something" ></variable>

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ę:

<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

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)

$( document ).ready(function() {
	if (RemoteMe.thiz==undefined){
		remoteme = new RemoteMe();
		remoteme.directWebSocketConnectionConnect();
	}
	replace();

$( document ).ready(function() {

if (RemoteMe.thiz==undefined){

remoteme = new RemoteMe();

remoteme.directWebSocketConnectionConnect();

}

replace();

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

function addButton(selector){
	var prop = readProperties(selector);
	var element = $(`<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label}	</button>`);
	remoteme.getVariables().observeBoolean(prop.name,x=>{
		if (x){
			$(element).addClass("mdl-button--accent");
		}else{
			$(element).removeClass("mdl-button--accent");
		}
	});
	if (!prop.disabled){
		$(element).click(()=>{
			var value=!$(element).hasClass("mdl-button--accent");
			remoteme.getVariables().setBoolean(prop.name,value);
		});
	}
	replaceComponent(selector,element);
	componentHandler.upgradeElement(	element.get()[0]);
}

function addButton(selector){

var prop = readProperties(selector);

var element = $(`<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label} </button>`);

remoteme.getVariables().observeBoolean(prop.name,x=>{

if (x){

$(element).addClass("mdl-button--accent");

}else{

$(element).removeClass("mdl-button--accent");

}

});

if (!prop.disabled){

$(element).click(()=>{

var value=!$(element).hasClass("mdl-button--accent");

remoteme.getVariables().setBoolean(prop.name,value);

});

}

replaceComponent(selector,element);

componentHandler.upgradeElement( element.get()[0]);

}

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.

xMin minimalna wartość wysyłana jako pierwsza wartość zmiennej ( gdy element znajduję się maksymalnie po lewej stronie lub gdy jest włączony invertX po stronie prawej)
xMin maksymalna wartość wysyłana jako pierwsza wartość zmiennej ( gdy element znajduję się maksymalnie po prawej stronie lub gdy jest włączony invertY po stronie lewej)
yMin minimalna wartość wysyłana jako druga wartość zmiennej ( gdy element znajduję się maksymalnie po na dole lub na górze gdy jest włączona opcja invertY)
yMin maksymalna wartość wysyłana jako druga wartość zmiennej ( gdy element znajduję się maksymalnie po na górze lub na dole gdy jest włączona opcja invertY)
invertX – opisane powyzej
invertY- opisane powyzej

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

requiredMouseDown – wysyła dane jedynie gry w czasie poruszania myszką lewy przycisk jest wciśnięty (dla przesuwania palcami jest ignorowany)
reset – po zwolnieniu przycisku myszki, oderwaniu palca – wraca do cetnralnej pozycji ((X_min+X_max) /2) i ((Y_min+Y_max) /2)

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.

label – etykieta przycisku
xRange – wartość rotacji w osi poziomej dla której komponent wyśle maksymalną, minimalną wartość ( większa wartość bardziej trzeba obrócić telefon żeby wysłać graniczne wartości osi X)
yRange – wartość rotacji w osi pionowej dla której komponent wyśle maksymalną, minimalną wartość ( większa wartość bardziej trzeba obrócić telefon żeby wysłać graniczne wartości osi Y)

Więcej o bibliotece javascript tutaj