1. Home
  2. Docs
  3. Documentation
  4. Quick Start
  5. WebPage

WebPage

At the beginning create account at remoteme.org

You can use the website to control your devices, unlike other solutions, in remoteMe you have full control over the sources of your website

RemoteMe.org allows you to host small websites in the cloud and use them to communicate with IoT devices. Types of files that can be hosted in the cloud are .html, .js, .css, .png, .gif, the maximum file size is 100KB (if you need a larger limit, contact remoteMe and it will be assigned to you), there is no limit on the number of files, or transfer.

Create Your first RemoteMe website

All our websites, devices, scripts are visible as devices in the “Devices” tab on the left. Each device has its own name and a unique deviceId. DeviceId is also the device’s address and we use it when we want to send a message to a specific device

On the left, open the “Devices” tab,then on the right top click at “New Device” and  “New WebPage”

  1. The name of the device – visible only to us
  2. DeviceId – the address of the device must be unique
  3. Template – ready solutions
  4. Whether the device should be active

Supplement by entering the name “my first web page”, deivceId: 1, template- “simpleArduinoMessage”

after clicking “Submit” , we get:

This is one of our devices

  1. Device type
  2. Is the device connected
  3. DeviceId – the address
  4. device name
  5. Edition
  6. Sending a message
  7. Sending a synchronous message (the one on which the answer is waiting)
  8. Delete the device and all its files
  9. Expanding the device card

Expand the device card

  1. The device’s file management panel
  2. Data for access via FTP
  3. Creating a new file
  4. Area where we can drag files (from a local computer (folders are also supported), or from github)
  5. Files – we have files because during the creation of the page we chose “template”
  6. Temporary access to the device (discussed in another article)

Creating a File

Let’s create a new file. Click the icon of the new file “marked No. 3”. and  enter the name “hello.html”

The empty file will be created. Click on it:

  1. Opens the file for editing
  2. Deletes the file
  3. Changes the file name
  4. Opens the file in the browser in a new tab
  5. Generates links to access without logging in

Let’s click 1 to edit the file

Fill the file with:

After saving and closing the edit window, open the file in the new tab. By clicking on “Open in new Tab”

We can freely modify our site, and create similarly new files. For now, delete the file hello.html from the file manager

Access files via FTP

This step is optional, however it is the most convenient option when creating a new page and editing a lot of files. Thanks to synchronization via FTP after saving the file to the local computer it is automatically sent to the server

Click the FTP button, the data to be connected will be displayed to us

then You get

then in the program, eg WinSCP or similar, fill in the details of the new connection

after connecting, we open the locations in the left window where we want to save files and then synchronize (1), and enable the change observation options (2):

After synchronization, we open file locations in your favorite IDE and after saving, our files will be updated on the server.

Sending messages to the page

Usually, messages to the site will send by one of our devices, but as part of learning about the system will show how to send information to the website / device via remoteMe.org it is useful in the testing phase

Let’s open the file index.html in the new tab

This is a simple example of a page for sending / receiving messages. At the top there is a button to connect to the RemoteMe system “web Socket” it is green means that the site has connected to the RemoteMe application. On the list of devices we will also have a green connection icon:

Return to our website, after clicking on the “Web Socket” button, the RemoteMe link will disconnect and go gray. This is because this  function is connected to the button:

Additionally during the initialization of the library to remoteMe:

We have provided the “webSocketConnectionChange” function to be called when the connection status changes. The function looks like this:

And this is the function that changes the color of our button.

Now receive the message, at the initialization of the remoteme object:

we indicated two functions:

  • onUserMessage – is called when a message arrives to the page
  • onUserSyncMessage – is called when an asynchronous message arrives to the page – this function must return the value which is passed to the sender device

The implementation of the function looks like this:

After receiving a regular message, we will write it to the textarea (unless the first byte of it is 1 then we write in the alert), and when a synchronous message comes, we will return the number that came multiplied by 3.

Let’s test the action:

Button 1 sends a regular message, a button 2 that we expect the answer to.

Send a regular message (click 1)

  1. The sender of the message – just the recipient’s id appears in the parameter of the receiving function as sender
  2. A text message for sending
  3. Same message as in field 2 but in hexadecemal form

fill in the fields:

after clicking submit, the typed text will appear in the textarea.

edit the Hex field by typing 1 at the beginning:

now the alert  will be displayed on our website because:

Here we wrap the message with an object that will help us to read bytes of the message:

and then we compare the first byte as it is equal to 1 displaying the alert.

We send a synchronous message identically, but here’s the answer:

the number 702 was returned, so our site correctly multiplied the number of 234

Anonymous access to the web site

To be able to view our website we must be logged in to our remoteme.org account, it is not too safe when we want to share our website with our friends, or conveniently open it on a mobile phone. There are also other possibilities to display the page, the most convenient of which are anonymous links:

Click on index.html and choose the “anonymous link” option – it will display a link after opening which we will have access to our site without logging in

  1. Name of the token from which the link was generated (if we do not want the link to work longer, we deactivate  or remove the token in the tokens tab)
  2. link
  3. Copy the link to the clipboard
  4. View QR code link – a useful option when you do not want to rewrite the address on your mobile phone
  5. just scan it with your phone and open it

  6. open the link in the new tab

Warning : based  of the token which is displayed in the link, the person who has access to it can also open our other websites (that is why we give them to people we trust). There is another option to send anonymous addresses to pages, but I will discuss it in another article

 

The next step will be connecting arduino to our remoteMe.