Because You’ve open this tutorial I guess You want to know how to control Your Arduino by the browser. At the movie, I’ve shown little demo what I’ve made. Later in this tutorial, I will write more about whats going on in the movie, and why it working.

Step 1: Remoteme.org

I want to introduce to You remoteme.org system which offers You multiple options to control your Arduino through the internet, and also allows hosting your own webpage which will send messages to your devices. For example, You can build the rasbperryPi robot with FPV .But we will start with something simpler – blinking led over the internet

What remoteme.org offers to

You The main goal of the system is to connect all your devices (Rpi, Arduino, web pages) into one service bus, to explain you as simple as possible I have some trivial real-life example – postman

Imagine remoteme.org system as a postman. Our postman knows all of your devices and recognizes them by deviceId. DeviceId is also the device address.
If device A wants to send a message to deviceB it put an array of bytes into an envelope and at the envelope, itself writes deviceId, so the postman knows where this message delivers
the postman can deliver two kinds of letters:
- Asynchronous one – this is kind of message which we send and don’t wait for the response. The example of this kind of message could be “turn on the light”, “turn right” – this messages we called at the system UserMessage
- Synchronous messages – it’s like calling functions which return state, You send a message and wait for the response. This kind of message You can use for example to get the temperature from some sensor or ask if the diode is lighting this messages at remoteme.org we call UserSyncMessage
There are libraries which helps you to communicate with the postman. below javascript example 1

remoteme.sendUserMessageByFasterChannel (123,[1,1,2,3,5,8]);

at above code, we send the array of bytes (1,1,2,3,5,8) to the device with id 123

remoteme.sendUserSyncMessageWebSocket(123,[6],function(data){ 
	printTemperature(data[0]); 
});

and here we will send number 6 in the array, and as return we expect to get the temperature from some sensor

And how to process messages and reponse to synchronous one. This time Arduino example of code

void setup() {
  ...
  remoteMe.setUserMessageListener(onUserMessage);
  remoteMe.setUserSyncMessageListener(onUserSyncMessage);
...
}
void onUserSyncMessage(uint16_t senderDeviceId, uint16_t dataSize, uint8_t* data, uint16_t &returnDataSize, uint8_t *&returnData) {
    if (data[0]==6){
    returnDataSize=1;
    returnData=(uint8_t*)malloc(dataSize);
    returnData[0]=readTemperature();
    
  }
}
void onUserMessage(uint16_t senderDeviceId, uint16_t dataSize, uint8_t *data) {
   doSomething();
  
}

At setup function we set what functions will be called when messages comes into arduino, in the following part I will show excatly how to use it.

Also at the remoteme.org, You can write your own webpages to communicate with your devices. The pages then You can open at any browser, of course after login.

Additional remoteme.org gives You the possibility to save data in the database – I will show how to do that in another tutorial

Also, You can run some scripts at the remoteme.org server itself – for example, through this scripts You can connect some weather system took forecast for next days, and send some simple data as temperature or rainfall directly to Arduino which displays at some LCD screen

To send messages to devices You can also use rest Api – this kind of operations I will show at next tutorials. At current one, we will focus on blinking led through the internet

At the beginning You need at remoteme.org our own account (it’s free), then You have to generate your own token, and by this token, communicate with the system, So You have sure nobody without your permission will send data to your devices or open your sites. Each token has the name, the name helps You to recognize your token (later You can remove tokens and then all URLs generated with this token will be invalid)

What remoteme.org doing under the hood

Our devices are making with remoteme.org websocket connections, through these connections remoteme.org is sending and receiving messages from You devices, webPages. Of course, to made connections, You need the token which will connect your devices only to Your account. All these connections You are doing using libraries:

documentation

ArduinoLibrary

Javascript Library

Step 2: Connections ,what Is Needed

What is needed

arduino with esp8266led
diode
resistor
button
knowledge how to program your Arduino tutorial

Step 3: How Its Going to Work

Each time we pressed the button
- diode change state
- arduino sends to the Arduino actual led state
- webpage receive the message and redraw diode image
When the page is refreshed its asking Arduino for actual diode state and displays the state at the browser
When we pressed diode on the webpage
- the webpage is sending the message to the Arduino
- arduino change diode state
- arduino sends the message with actual diode state

At the movie You can see exactly how it’s going to work, webpage itself is opened at three browsers and all of them shows You actual diode state all the time and allows You to turn on/off the diode

Step 4: Additional Libraries

To make your code compile You need some libraries

WebSockets by Markus Sattler
ArduinoHttpClient by Arduino
RBD_Timer by Alex Taujenis
RBD_Button by Alex TaujenisE
ESP8266WiFi by Iven Grokhotkov

At the screens You can check If You have proper libraries installed

Step 5: Remoteme.org Library

While writing this tutorial remoteme.org libraries are not available at public Arduino repository, so we have to install it manually from the zip
Download package from Github from here
then add it as a .zip library:

At the screen You can find how to add zip

Step 6: Check If Remoteme Is Installed Corectly

Check if in your sketch management Remoteme.org is visible

Step 7: Checking Connections

The program below does nothing more than change diode state each time button is pressed

Just install at arduino the program from attachement

blinkingLed.ino
Download

Step 8: Sign Up to Remoteme.org

open app.remoteme.org
SignUp tab and fill required fields
Click SignUp and system will create Your account and log You in

Step 9: Create Token

The token is used to authorize your communication with remoteme.org, Using Your token You have sure You will send messages to your devices, and nobody except You will send messages to your devices

At the left open Token Tab
Click “new Token” button, then fill name of the token (right now it doesn’t matter what You out inside it can be “Token1”) then click OK

Step 10: Check If Token Appears

at the token tab You should see Your new created token If You dont see it refresh the page

Step 11: Final Arduino Program

At the attachement is final arduino program, Paste it to Arduino IDE but do not upload to arduino yet. At the next steps I will described what have to be filled

finalArduinoProgram.ino
Download

Step 12: Filling Fields

#define WIFI_NAME ""
#define WIFI_PASSWORD ""
#define DEVICE_ID 203
#define DEVICE_NAME "diodeWithButtonArduino"
#define TOKEN "~267_ZxoWtJ)0ph&2c"

WIFI_NAME – Wifi name
WIFI_PASSWORD – wifi password
DEVICE_ID deviceId is also a device address at the remoteMe system in our case it’s 203
DEVICE_NAME name of the device which will be registered at system
TOKEN – token we generate before

After filling this fields You can upload the program to Arduino and run it.

Step 13: Checking If Arduino Appears at Device Tab

When we go to the device tab we will see that our device is already added and green icon means the device is connected right now

Step 14: Code Analyze

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

We need to create object remoteMe we will use it to communicate with our webpage.
The TOKEN constant is the token we generate at the previous step, DEVICE_ID is deviceId of our Arduino in our case it’s 203, using this address we will send messages from the webpage into Arduino there is also

#define WEBPAGE_DEVICE_ID 1001

1001 is the deviceId of our future webpage

setup() function

WiFiMulti.addAP(WIFI_NAME, WIFI_PASSWORD);
while (WiFiMulti.run() != WL_CONNECTED) {
	delay(100);
}

we connect to Wifi and waits for the connection to establish.

remoteMe.setUserMessageListener(onUserMessage);
remoteMe.setUserSyncMessageListener(onUserSyncMessage);

we set which function will be called when the message comes to Arduino

remoteMe.setupTwoWayCommunication();

it means we need two-way communication

remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);

As You can see we don’t read what was sent at the message. The function changeDiodeState is called always after receiving any message.

void changeDiodeState(   ) {
	currentState= !currentState;
	digitalWrite(LEDpin, currentState?HIGH:LOW);
	uint16_t returnDataSize = 1;
	uint8_t *data = (uint8_t*)malloc(returnDataSize);
	
	uint16_t pos = 0;
	RemoteMeMessagesUtils::putUint8(data, pos, currentState?1:0);
	remoteMe.sendUserMessage(WEBPAGE_DEVICE_ID, data, returnDataSize);
}

The function above is also called when the button at Arduino is pressed. This function besides changing the diode state is sending new state to the webpage:

uint16_t returnDataSize = 1;
uint8_t *data = (uint8_t*)malloc(returnDataSize);

at the only byte at the message, we put there 1 or 0 based on current diode state.

uint16_t pos = 0;
RemoteMeMessagesUtils::putUint8(data, pos, currentState?1:0);

function putUint8 has parameters:

the array where we will save our data, which will be sent
position to where the data (in this case uint8_t ) will be put at the array. Pos parameter is given as reference so after write number, it’s increasing by number memory size. In this case, its increased by 1 but we have several similar functions like put float, double, string
and the last parameter 0 if the diode is not lighting and 1 if its on

a shorter version of saving parameter to the array will look like

uint16_t returnDataSize = 1;
uint8_t *data = (uint8_t*)malloc(returnDataSize);
data [0]= currentState?1:0

more about RemoteMeMessages utils You can read here: RemoteMeMessagesUtils

and at the end, we send the message to the webpage.

remoteMe.sendUserMessage(WEBPAGE_DEVICE_ID, data, returnDataSize);

Below is a function which is run when the webpage is asking for current diode state

void onUserSyncMessage(uint16_t senderDeviceId, uint16_t dataSize, uint8_t* data, uint16_t &returnDataSize, uint8_t *&returnData) {
	returnDataSize = 1;
	returnData = (uint8_t*)malloc(returnDataSize);
	Serial.println("received sync message");
	uint16_t pos = 0;
	RemoteMeMessagesUtils::putUint8(returnData, pos, currentState ? 1 : 0);
}

The data we want to return we are putting to returnData, and at the returnDataSize we put the size of data we want to send back.
similar like at function to send state here we put the only one byte which represents diode state and the last

function is loop()

void loop() {
	remoteMe.loop();
	if (button.onPressed()) {
		changeDiodeState();
	}
}

remoteMe.loop(); <– it’s checking if there are any messages waiting to process, checking device state, and do some more things – everything that this function is doing You can check at libraries source code.

If You haven’t program your Arduino yet You can do that now

Step 15: Sending Messages

Now we are ready to save messages to the Arduino. Our Arduino at the devices tab should be visible and has green link icon it means the device is connected right now. Because we don’t have our webpage yet, we will use build in functionality to send messages to our device.

at the device belt click single message icon then

3 we need to fill sender device- we have just one device so we choose this one
4 messages, as You remember from Arduino onUserMessage implementation we ignore all data sent to Arduino so it doesn’t matter what we will put here
click “Send” button

The diode at Arduino will be changed each time we send the message :)

Step 16: Checking Diode State Response

We can also test syncUserMessage, so let’s ask our Arduino about diode state. To do that click on device belt icon with two conversations and then fill window:

After click “Send” at the place [6] we will get the response from arduino. 1 if led is ON and 0 if it’s not.
Between pressing send button by clicking on Arduino button You can change diode state and check if Arduino is returning proper number.

Step 17: WebPage

#define WEBPAGE_DEVICE_ID 1001

Finally, we will create our page to control Arduino. at Arduino we set that diode state will be sent to the device with id 1001 so webpage has to have this deviceId

name of adding webPage has to be unique
4 deviceID in our case it has to be 1001
5 we choose the sketch, the empty sketch will create for us 3 files at the newly added webpage (index.html, script.js, styles.css)
6 let’s make it active
7 click Submit to create webpage device

After creating webpage it will be visible on devices tab.

Step 18: Edit Index.html

Lets edit index.html file. to do that expand webPage belt by clicking “1” marked on the screen. then click at index.html page and at context menu open.

Paste there content of file whcih is in attachement index.zip . At zip is index.html unfortunetly instructables return me "Internal server error" when I'm trying to upload it

index.zip
Download

Step 19: Index.html Analyze

Its very simple webpage it’s creating rounded div, calls setup(method from secipt.js and make some code imports

var arduinoId=203;

above variable is deviceId for our Arduino. we will use it at javascript code

var thisDeviceId=####deviceId#;

this is something special. This ####deviceId# will be replaced by remoteme.org to 1001 because this is our webpage deviceId.

Step 20: Script.js

Edit script.js file. We open the file to edit similar like we process index.html page, and paste the code from attachement

script.js
Download

Step 21: Script.js Code Analyze

var remoteme;
function setup(){
	remoteme = new RemoteMe({
		automaticlyConnectWS: true,
		automaticlyConnectWebRTC:false,
		webSocketConnectionChange: webSocketConnectionChange,
		webRTCConnectionChange: undefined,
		onUserMessage: onUserMessage,
		mediaConstraints: {'mandatory': {'OfferToReceiveAudio': false, 'OfferToReceiveVideo': false}}
	});
}

we created variable remoteMe and we init it, more about parameters You find here and here

most important parameters:

automaticlyConnectWS: true,

creating WebSocket connection automatically

onUserMessage: onUserMessage,

point what function will be called when the Arduino sends something to our webpage

webSocketConnectionChange: webSocketConnectionChange,

point function after the state of connection changed

function webSocketConnectionChange(state){
	if (state==WebsocketConnectingStatusEnum.CONNECTED){
		remoteme.sendUserSyncMessageWebSocket(arduinoId,[],function(data){
			var data = new RemoteMeData(data);
			changeDiode(data.popUint8());
		});
	}
}

after WebSocket connection is established we asked Arduino for current diode state

remoteme.sendUserSyncMessageWebSocket

the first parameter is Arduino deviceId, then empty array – because doesn’t matter what will be inside messages, at the end functions which will be called after getting response from Arduino

function(data){
      var data = new RemoteMeData(data);
      changeDiode(data.popUint8());
   }

we took the first byte of return data then based on that turn on/off the diode

function changeDiode(state){
	$("#led").css("background-color",state==0?"white":"red");
}

also when we pressed the button at Arduino it will send the message which at javascript site we will receive by this function

function onUserMessage(sender,data){
	var data = new RemoteMeData(data);
	changeDiode(data.popUint8())
}

similar to a previous function we read first byte and change diode state.

Step 22: Open Web Page

Step 23: Chaning Led State

after click on this circle state of the diode will be changed.

You can also refresh the webpage and see if it shows proper diode state.

Step 24: Open WebPage in Mobile Phone

Now we can open our webpage using phone mobile. Instead of login into remoteme.org system, we will prepare special link which will display our webpage without login, based on tokens:

click at index.html then “get anonymous link…” , then QR icon and scan QR code.

at your mobile, You will see the same webpage, and You can play with it

Step 25: Summary

I hope that I have brought you closer to the idea of Arduino control via the internet, and explained the remoteme.org system. The system is still developing, so if You have any ideas, questions, or just want to help just follow FB remoteme.org fan page and contact me

source code here

at next tutorial something more complicated:

weather station
or reading temperature and saving into database
camera live preview

I didn’t decided yet

Introduction: Control Esp8266 Over Internet

Step 1: Remoteme.org

What remoteme.org offers to

What remoteme.org doing under the hood

Step 2: Connections ,what Is Needed

Step 3: How Its Going to Work

Step 4: Additional Libraries

Step 5: Remoteme.org Library

Step 6: Check If Remoteme Is Installed Corectly

Step 7: Checking Connections

Attachments

Step 8: Sign Up to Remoteme.org

Step 9: Create Token

Step 10: Check If Token Appears

Step 11: Final Arduino Program

Attachments

Step 12: Filling Fields

Step 13: Checking If Arduino Appears at Device Tab

Step 14: Code Analyze

Step 15: Sending Messages

Step 16: Checking Diode State Response

Step 17: WebPage

Step 18: Edit Index.html

Attachments

Step 19: Index.html Analyze

Step 20: Script.js

Attachments

Step 21: Script.js Code Analyze

Step 22: Open Web Page

Step 23: Chaning Led State

Step 24: Open WebPage in Mobile Phone

Step 25: Summary