WebPage Components

Before you read this page please read general information about webPages

Easiest way to build your own control page is to use predefined components. To do that after you add webpage with default template “Component Starter”.

Click on “index.html”.  You will be able to add one of the components by choosing edit With wizard

New window appears:

This webPage is quiet simple, You have preview of your webPage both rendered, and source code.

And you have two buttons

Insert Component

  1. Component to insert
  2. Components to set variables such button has variable type to steer, Button can control only one variable type – Boolean, but components like textField can control other types of variables such string, double, integer, etc. Here you can choose what type of variable you want to control with this component
  3. Component has configuration, its based on component
  4. Component to set variables has “name” where you specify what variable you want to control, if  you put name of variable which doesn’t exist it will create a new one.
  5. You can choose variable from already created components. It will show you window with variables with current variable type chosen
  6. Preview of component to insert. Its just preview so you get familiar with code 😉
  7. How component looks like after insert
  8. Insert component into the page

After insert component you have whole page preview. Its fully working components and you can check how it works.

Status component

This component shows you connection status with your webPage

  1. Show webSocket connection – it will be selected if there is websocket connection between your webpage and RemoteMe system (icon 4)
  2. Direct connection with your device in local network is established. It means all messages to your device will be sent directly to it (icon 5)
  3. Camera – if connected device is a Raspberry Pi and its camera is connected 6 icon will be selected

This component doesn’t affect to connection itself just shows status

 

Source editing

In source tab in “Edit with wizard” window you have source of the webpage

Your components looks like this:

The first thing you can do with your component to add a style into it for example

Or add a class, where class is specified at your style.css file.

In sources you also rearrange components. Components are based on material Design Lite , so it means you can use other components from this library like adding cards, layouts to rearrange your components etc.

What happens under the hood (advanced)

As you noticed creator is just adding components in form

RemoteMe javascript is replacing these components to the MaterialDesignLite and connect html events into this. The file which is doing this is here as remoteMeComponent.js

Javascript starts by calling this function:

Its setting up RemoteMe main class (more about this class here ) TODO add link

and then it is calling function replace() this function is replacing our <variable>  with material design lite code take a look on creating button:

first its insert

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label} </button>

instead of <variable>

Similar replacements is made for any other components.

Then it connects events to this component using remoteMe class. So instead of putting components using wizard you can just add your components directly into your html page and add events using your javascript file.

 

Description of some components

Button, CheckBox, Switcher

Steruje zmienna typu Boolean, ma dwa stany które odpwiednio sterują wybraną zmienną

Slider

Controls the Integer, Integer_2, Integer_3 type variable, depending on the selected variable there will be one, two or three sliders with the same minimum and maximum values specified by min and max

Div (only read)

Creates a Div element based on the given template where {name} is replaced with the variable name and {value} with its value.

Joystick (only write)

Creates an element with a dot element in the middle, controls the Integer_2 type variable with the mouse or a finger movements. When clicked – the starting position is set and the values to be sent are measured from the inclination from it.

Status

It does not control any variables but displays the status of websocket connections, direct connection, and camera (webRTC) depending on the options selected. After clicking on a given icon, disconnection occurs when the connection is active, while for an inactive connection – attempt to reconnect. By default, it is displayed in the upper right corner

Camera Mouse Track

Operation and configuration as for the joystick component. The component attaches events to the video component (if it exists). Sets the variable when you click the component with the video preview as well as when you move the mouse over the component

Camera Mouse Track

Operation and configuration as for the joystick component. The component attaches events to the smartphone gyro, Centers position is determined when the button is activated, the values are sent only when the button is active.

 

If  you want to extend components list please fork repository. I will add it into repositories so others users can use it 🙂 . Please keep standards from remoteMeComponents.js files.

About advanced javascript/ html programming please read here