Allow guests control your devices -

EN Maciej 16 August 2019

Allow guests control your devices

In this tutorial, I will describe how you can let users (people with the appropriate link) control your devices. In addition, we can give users points (credits) and set the time, during which they can control the device. Credits/points can be increased through coupons (which our guests can enter to top up their account). With the selected action we decide how many points are to be deducted from the guest credits.

To control devices, guests will use a website that they can open on any device.

In the example, I will also show you how to place YouTube streaming next to the LED control buttons (because we will control the LEDs) so that guests can see the LED at work.

Similarly, you can control a car with FPV using the built-in WebRTC protocol, the user who controls will have a minimum (less than 250ms) delay in the video preview.

Adding a website

after registering in the RemoteMe system https://app.remoteme.org/ We are creating a new website – this page will be used to control two LEDs and will also show the status of the LEDs through the colors of the buttons.

In the Devices tab, click “New Device” -> “New webPage” and fill the information in the window:

then open the device bar, click on index.html and select “Edit with wizard” and then “Insert Component” because we want to add a button, select the button and complete the rest of the components as follows:

name: what is the name of our variable that will store and send the button state to the device

label: the inscription on the button (name to be displayed)

min Guest credit to trigger how many points a guest must have to be able to click on the button.

More in the articles about the website in Remoteme, components and guest mode

After pressing the Insert button we will add another led 2 button to control led2:

After clicking Insert and closing the wizard, we can click on index.html and select “Open in new tab“. There will be two buttons on our site:

In one of the next steps we will add a YouTube video preview

After clicking on the buttons the status will change but the information about it does not get to ESP yet. Let’s add it so the LED states are sent to ESP device:

Adding ESP

Connect the LEDs to the D1 and D2 pins to ESP and connect to GND via resistors

To add an ESP device in the Devices tab, click on New Device then "New Network Device":

after adding the device from its “Burger” menu, select the Code generator Wizard

we choose led1 and led2 and we must check the Guest support option

we go through the next steps where we can write the network name and password (not obligatory. we can complete it in the arduino IDE)

In the last step, we download the generated source code that will look like this

#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

More about generating code in RemoteMe, and here about the mechanism of variables in RemoteMe

What you need to know now is that when you click on the page in the “Led 1” button, the function on Arduino void onLed1Change will be called (boolean b, uint16_t sessionId, uint16_t identifier, uint16_t credit, uint16_t time) with the parameters:

b – current button status
sessionId – guest session ID
identifier – key identifier
credit – how many loans our guest has
time – how much time our guest has time (in seconds)

in this function, we will change the LED status and take credit points from the guest:

 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

}

more about the functions in the RemoteMe library documentation and in the documentation about the functions in guest mode

similarly, we complete the second function and set pins D1 and D2 as outputs, the whole code looks like this:

#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();

}

After uploading to our ESP (don’t forget to add the RemoteMe library in arduinoIDE) when we open the website with the buttons we will be able to control the LEDs.

Turn on guest mode

Now we need to turn on guest mode – i.e. simply generate an access key – such a key will contain a link when clicked, our guest will get access to the page and be able to control the device.

To do this, click the plus key icon

in the window that appears, we do not change anything and click submit

A link will be generated to view it, click the link icon next to the key:

and the generated link can be opened in another browser or in incognito mode – to check what happens when the link opens our guest (the point is that the browser does not overwrite the session of our logged in user).

As you will notice, only one guest can be on the site at a time for a specific time limit, to change this, click the mode icon in the guest settings

and in the window that appears, select the option multiple guests at the same time

now our guests can be on the site any time and there can be several of them at once.

Here is what is on the guest page before logging into the correct page

Clicking on the page open in another browser will notice that after clicking our credit points decrease. We can top up credit points by generating coupons more about generating and using coupons here

Adding YouTube Preview

This involves injecting YouTube from YouTube with our transmission to the index.html page

Click the index.html file then edit ...

and in the window that appears, we add an iframe with a video preview in my case, after the injection, the source of the page looks like this:

...
<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>

the open page looks like this

of course you can change it at your discretion after all it’s your site :).

Also, don’t forget to change the content of welcome.html finish.html and error.html to display useful information.

Summary

I hope that the example presented by me is quite simple and at the same time gives an insight into the way RemoteMe allows users to control your devices and interact with them.

I encourage you to like the Facebook Page where you can ask questions or be informed about latest updates.

Cheers,

Maciej

Articles