Introduction

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.

 

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” – these messages we call 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 these kind of¬† messages at remoteme.org we call¬†UserSyncMessage
  • There are libraries which helps you to communicate with the postman. below javascript example

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

    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

    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, and host it for free at remoteme.org cloud. The pages  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 using some ESP

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/socket/webRTC connections, through these connections remoteme.org is sending and receiving messages from Your 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

source code Arduino library   Javascript library

also Check QuickStart here and here

Finally, we will control our led through the internet by some html website

 

What is needed

  • arduino with esp8266
  • led diode
  • resistor
  • button
  • knowledge how to program your Arduino¬†¬†tutorial

Connections and how it will work

  • connections

  • 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

Setup remoteme.org and arduino

before You start read quickstart about html and arduino

additional libraries (also all libraries described here)

  • RBD_Timer by Alex Taujenis

  • RBD_Button by Alex Taujenis

 

Checking connections

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

 

Final Arduino program

donaload it from here

Before You program your devices, there is few lines You have to fill:

  • 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 from token tab in remoteme.org

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

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

 

function description 

How it works

We need to create object remoteMe we will use it to communicate with our webpage.

The TOKEN constant is the token from Tokens tab, 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

1001 is the deviceId of our future webpage

setup() function

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

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

it means we need two-way communication

and registers our device at app.remoteme.org. After calling this function device will be visible on device Tab, with given name

How it works. Web page will send the message to the device, and this function at Arduino will be run:

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

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:

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

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

more about RemoteMeMessages utils You can read here: RemoteMeMessagesUtils

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

 

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

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

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

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

And click “Send” button

The diode at Arduino will be changed each time we send the message ūüôā

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.

WebPage

at arduino ino we have, thats why our webpage deivceiId should be 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

Create new WebPage “New Device” -> “New WebPage” and fill as below

 

 

Now lets add files into our webPage open this

then drag three files (index.html, script.js ,styles.css )to your webPage into “Drop Your files here”

code analyze

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

most important parameters

creating WebSocket connection automatically

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

and

point function after the state of connection changed

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

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

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

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

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

let’s open our webpage

and we will see:

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.

 

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

 

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

remoteme.org  FanPage 

Cheers,

Maciek