Jak dać kontrolę nad swoimi urządzeniami użytkownikom -

Bez kategorii Maciej 16 sierpnia 2019

Jak dać kontrolę nad swoimi urządzeniami użytkownikom

W tym kursie opiszę jak pozwolić użytkownikom ( osobom z odpowiednim linkiem ) sterować naszymi urządzeniami. Dodatkowo możemy przyznawać użytkownikom punkty ( kredyty ) i ustalać im czas w czasie którego mogą kontrolować urządzenie. Kredyty i punkty mogą być zwiększane poprzez kredyty ( który nasi goście mogą wpisać żeby podładować swoje konto). Przy wybranej akcji decydujemy ile punktów ma być odjęte gościowi.

Do sterowania urządzeniami goście będą używali strony internetowej którą mogą otworzyć na dowolnym urządzeniu.

W przykładzie pokaże też jak obok przycisków do sterowania diodami ( bo diodami będziemy sterować ) umieścić streaming Youtube, żeby goście mogli zobaczyć, że faktycznie miganie diodami działa.

Podobnie można sterować np samochodem z FPV wtedy z użyciem wbudowanego protokołu WebRTC użytkownik który steruje będzie miał minimalny (poniżej 250ms) opóźnienie w podglądzie video.

Dodanie strony WWW

po zarejestrowaniu w systemie RemoteMe https://app.remoteme.org/Tworzymy nową stronę internetową – strona ta będzie służyła do sterowania dwoma diodami LED i będzie również przez kolory przycisków pokazywała stan diód.

W zakładce Devices klikamy “New Device” -> “New webPage” i uzupełniamy okienko:

następnie otwieramy belke urządzenia klikamy na index.html i wybieramy “Edit with wizard” a następnie “Insert Component” ponieważ chcemy dodać przycisk wybieramy button i uzupełniamy resztę komponentów:

name : jak się nazywa nasza zmienna która będzie przechowywać i wysyłać stan przycisku do urządzenia

label – napis na przycisku

min Guest credit to trigger ile punktów minimum musi mieć gość żeby mógł kliknąć na przycisk.

Więcej w artukułach o stronie WWW w Remoteme, komponentach i trybie gościa

Po wciśnięciu przycisku Insert dodamy kolejny przycisk led 2 do sterowania led2 :

Po kliknięciu Insert i zamknięciu kreatora możemy kliknąć na index.html i wybrać opcje “Open in new tab”. Na naszej stronie będą dwa przyciski:

W jednym z koljenych kroków dodamy podgląd video z YouTube’a

Po kliknięciu w przyciski stan się zmieni ale informacja o tym nie trafia jeszcze do ESP. Dodajmy go zatem:

Dodanie ESP

Do ESP podpinamy diody do pinów D1 i D2 i przez oporniki łączymy do GND

Podobnie jak stronę internetową żeby dodać urządzenie ESP w zakładce Devices klikamy New Device następnie "New Network Device":

po dodaniu urządzenia z jego “Burger” menu wybieramy Code generator Wizard

wybieramy led1 i led2 i koniecznie zaznaczamy opcję Guest support

przechodzimy przez następne kroki gdzie możemy spisać nazwę sieci hasło ( nie obowiązkowe potem możemy uzupełnić w arduino IDE)

W ostanim kroku ściągamy wygenerowany kod źródłowy który będzie wyglądał jak poniżej

#define WIFI_NAME "Your wifi name"
#define WIFI_PASSWORD "Your wifi password"
#define DEVICE_ID 2
#define DEVICE_NAME "ESP for guests"
#define TOKEN "~520710_5fjcasddhcy"


#include <RemoteMe.h>
#include <RemoteMeSocketConnector.h>
#include <ESP8266WiFi.h>



RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR COMFORTABLE VARIABLE SET *********************

inline void setLed1(boolean b) {remoteMe.getVariables()->setBoolean("led1", b); }
inline void setLed2(boolean b) {remoteMe.getVariables()->setBoolean("led2", b); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************

void onLed1Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {
	if (sessionId!=0) {
		remoteMe.sendDecreaseGuestKeyCreditMessage(sessionId, 3, 4);//lets decrease credit and time
	}
}
void onLed2Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {
	if (sessionId!=0) {
		remoteMe.sendDecreaseGuestKeyCreditMessage(sessionId, 3, 4);//lets decrease credit and time
	}
}




void setup() {

	WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

	while (WiFi.status() != WL_CONNECTED) {
		delay(100);
	}

	remoteMe.getVariables()->observeBoolean("led1" ,onLed1Change);
	remoteMe.getVariables()->observeBoolean("led2" ,onLed2Change);

	remoteMe.setConnector(new RemoteMeSocketConnector());
	remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
}


void loop() {
	remoteMe.loop();
}

#define WIFI_NAME "Your wifi name"

#define WIFI_PASSWORD "Your wifi password"

#define DEVICE_ID 2

#define DEVICE_NAME "ESP for guests"

#define TOKEN "~520710_5fjcasddhcy"

#include <RemoteMe.h>

#include <RemoteMeSocketConnector.h>

#include <ESP8266WiFi.h>

RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR COMFORTABLE VARIABLE SET *********************

inline void setLed1(boolean b) {remoteMe.getVariables()->setBoolean("led1", b); }

inline void setLed2(boolean b) {remoteMe.getVariables()->setBoolean("led2", b); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************

void onLed1Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {

if (sessionId!=0) {

remoteMe.sendDecreaseGuestKeyCreditMessage(sessionId, 3, 4);//lets decrease credit and time

}

void onLed2Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {

if (sessionId!=0) {

remoteMe.sendDecreaseGuestKeyCreditMessage(sessionId, 3, 4);//lets decrease credit and time

}

void setup() {

WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

while (WiFi.status() != WL_CONNECTED) {

delay(100);

}

remoteMe.getVariables()->observeBoolean("led1" ,onLed1Change);

remoteMe.getVariables()->observeBoolean("led2" ,onLed2Change);

remoteMe.setConnector(new RemoteMeSocketConnector());

remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);

}

void loop() {

remoteMe.loop();

}

Więcej o generowaniu kodu w RemoteMe, a tutaj o mechaniżmie zmiennych w RemoteMe

Co teraz musicie wiedzieć to to, że jak klkniecie na stronie w przycisk “Led 1” zostanie wywołana funkcja na Arduino void onLed1Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) z parametrami:

b – aktualny stan przycisku
sessionId – identyfikator sesji gościa
identifier – identyfikator klucza
credit – ile nasz gość ma jeszcze kredytów
time – ile nasz gość ma jeszcze czasu (w sekundach)

w funkcji ten zmienimy zatem stan LEDa oraz odejmiemy gościowi punkty kredytu:

 digitalWrite(D1, b?HIGH:LOW);
  if (sessionId!=0) {
    remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 1, 0);//lets decrease credit and time
  }

digitalWrite(D1, b?HIGH:LOW);

if (sessionId!=0) {

remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 1, 0);//lets decrease credit and time

}

więcej o funkcjach w dokumentacji bilbioteki RemoteMe oraz w dokumentacij o funkcjach w trybie gościa

podobnie uzupełniamy drugą funkcję i ustawiamy piny D1 i D2 jako wyjścia cały kod wygląda następująco:

#define WIFI_NAME "Your wifi name"
#define WIFI_PASSWORD "Your wifi password"
#define DEVICE_ID 2
#define DEVICE_NAME "ESP for guests"
#define TOKEN "~520710_5fjcRlWZShcy"


#include <RemoteMe.h>
#include <RemoteMeSocketConnector.h>
#include <ESP8266WiFi.h>



RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR COMFORTABLE VARIABLE SET *********************

inline void setLed1(boolean b) {remoteMe.getVariables()->setBoolean("led1", b); }
inline void setLed2(boolean b) {remoteMe.getVariables()->setBoolean("led2", b); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************

void onLed1Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {
  digitalWrite(D1, b?HIGH:LOW);
  if (sessionId!=0) {
    remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 1, 0);//lets decrease credit and time
  }
}
void onLed2Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {
  digitalWrite(D2, b?HIGH:LOW);
  if (sessionId!=0) {
    remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 2, 0);//lets decrease credit and time
  }
}




void setup() {
  pinMode(D1, OUTPUT);
  pinMode(D2, OUTPUT);
  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
  }

  remoteMe.getVariables()->observeBoolean("led1" ,onLed1Change);
  remoteMe.getVariables()->observeBoolean("led2" ,onLed2Change);

  remoteMe.setConnector(new RemoteMeSocketConnector());
  remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
}


void loop() {
  remoteMe.loop();
}

#define WIFI_NAME "Your wifi name"

#define WIFI_PASSWORD "Your wifi password"

#define DEVICE_ID 2

#define DEVICE_NAME "ESP for guests"

#define TOKEN "~520710_5fjcRlWZShcy"

#include <RemoteMe.h>

#include <RemoteMeSocketConnector.h>

#include <ESP8266WiFi.h>

RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);

//*************** CODE FOR COMFORTABLE VARIABLE SET *********************

inline void setLed1(boolean b) {remoteMe.getVariables()->setBoolean("led1", b); }

inline void setLed2(boolean b) {remoteMe.getVariables()->setBoolean("led2", b); }

//*************** IMPLEMENT FUNCTIONS BELOW *********************

void onLed1Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {

digitalWrite(D1, b?HIGH:LOW);

if (sessionId!=0) {

remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 1, 0);//lets decrease credit and time

}

void onLed2Change(boolean b, uint16_t sessionId,uint16_t identifier, uint16_t credit, uint16_t time) {

digitalWrite(D2, b?HIGH:LOW);

if (sessionId!=0) {

remoteMe.sendDecreaseGuestKeyCreditAndTimeMessage(sessionId, 2, 0);//lets decrease credit and time

}

void setup() {

pinMode(D1, OUTPUT);

pinMode(D2, OUTPUT);

WiFi.begin(WIFI_NAME, WIFI_PASSWORD);

while (WiFi.status() != WL_CONNECTED) {

delay(100);

}

remoteMe.getVariables()->observeBoolean("led1" ,onLed1Change);

remoteMe.getVariables()->observeBoolean("led2" ,onLed2Change);

remoteMe.setConnector(new RemoteMeSocketConnector());

remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);

}

void loop() {

remoteMe.loop();

}

Po wgraniu do naszego ESP (nie zapomnijcie dodać biblioteki RemoteMe w arduinoIDE ) jak otworzymy stronę WWW z przyciskami będziemy wstanie sterować diodami.

Włączenie trybu gościa

Teraz musimy włączyć tryb gościa – czyli po prostu wygenerować klucz dostępu – taki klucz będzie zawierać link po kliknięciu którego nasz gość dostanie dostęp do strony i będzie wstanie sterować urządzeniem.

w tym celu klikamy ikonkę klucza z plusem

w oknie które się pojawi niczego nie zmieniamy i klikamy submit

Zostanie wygenerowany link żęby go podejrzeć klikamy na ikonkę linka przy kluczu:

a wygenerowany link możemy otworzyć w innej przeglądarce lub w trybie incognito – żeby sprawdzić co się stanie gdy link otworzy nasz gość ( chodzi o to żeby przeglądarka nie nadpisała sesji naszego zalogowanego użytkownika).

Jak zauważycie teraz na stronie może przebywać tylko jeden gość naraz przez określony limit czasowy, żeby to zmienić przy ustawieniach gościa klikamy ikonkę trybu

a w oknie które się pojawi zaznaczamy opcję multiple guests at the same time

teraz nasi goście mogą przebywać na stronie dowolny czas i może ich być kilku naraz.

Tutaj opisane jest co znajduję się na stronie gościa przed zalogowaniem się do właściwej strony

Klikając na stronę otwartą w innej przeglądarce zauważymy że po kliknięciu maleją nasze punkty kredytu. Możemy doładować punkty kredytu generując kupony więcej o generowanie i wykorzystywaniu kuponów tutaj

Dodawanie podglądu Youtube

Polega to na wstrzyknięciu iframa z Youtuba z naszą transmisją do strony index.html

Klikamy na plik index.html następnie edit...

i w okienku które się pojawi dodajemy iframe z podglądem wideo w moim przypadku po wstrzyknięciu źródło strony wygląda następująco:

...
<body style="overflow:hidden">
	<script>
		var thisDeviceId=####deviceId#;
		var raspberryPiDeviceId=####raspberrypideviceid#;
	</script>

	<div style="margin:10px;height: calc( 100% - 20px)">
		<variable  component="button"  type="BOOLEAN"  name="led1" label="led 1"  minCreditForRental=1 ></variable>
		<variable  component="button"  type="BOOLEAN"  name="led2" label="led 2"  minCreditForRental=2 ></variable> 
		<div style="width:100%; height:calc(100% - 120px )">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/FuFat_3NoRk" frameborder="0" allowfullscreen></iframe>
		</div>
	</div>
</body>

...

var thisDeviceId=####deviceId#;

var raspberryPiDeviceId=####raspberrypideviceid#;

</script>

</div>

</body>

otwarta strona wygląda następująco

oczywiście możecie ją zmieniać wedle uznania w końcu to Wasza strona :).

Nie zapomnijcie również zmienić treść plików welcome.html finish.html i error.html żeby wyświetlać gościom przydatne informacje.

Podsumowanie

Mam nadzieje, że przykład zaprezentowany przeze mnie jest dość prosty i jednocześnie daje wgląd w sposób jaki RemoteMe pozwala użytkownikom na sterowanie Waszymi urządzeniami i interakcje z nimi.

zachęcam do polubienie FB projektu gdzie możecie zadawać pytanie czy być informowani o aktualny kursach

Pozdrawiam,

Maciej

Artykuły