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 – inserts components to control your devices
- Insert Chart – insert chart with historical variable values. more here

Insert Component

Component to insert
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
Component has configuration, its based on component
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.
You can choose variable from already created components. It will show you window with variables with current variable type chosen
Preview of component to insert. Its just preview so you get familiar with code 😉
How component looks like after insert
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

Show webSocket connection – it will be selected if there is websocket connection between your webpage and RemoteMe system (icon 4)
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)
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:

<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

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

<variable component="button" type="BOOLEAN" style="background-color:yellow" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" style="background-color:yellow" name="led" label="something something" ></variable>

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

<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

1	<variable component="button" type="BOOLEAN" name="led" label="something something" ></variable>

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:

$( document ).ready(function() {
	if (RemoteMe.thiz==undefined){
		remoteme = new RemoteMe();
		remoteme.directWebSocketConnectionConnect();
	}
	replace();

$( document ).ready(function() {

if (RemoteMe.thiz==undefined){

remoteme = new RemoteMe();

remoteme.directWebSocketConnectionConnect();

}

replace();

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:

function addButton(selector){
	var prop = readProperties(selector);
	var element = $(`<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label}	</button>`);
	remoteme.getVariables().observeBoolean(prop.name,x=>{
		if (x){
			$(element).addClass("mdl-button--accent");
		}else{
			$(element).removeClass("mdl-button--accent");
		}
	});
	if (!prop.disabled){
		$(element).click(()=>{
			var value=!$(element).hasClass("mdl-button--accent");
			remoteme.getVariables().setBoolean(prop.name,value);
		});
	}
	replaceComponent(selector,element);
	componentHandler.upgradeElement(	element.get()[0]);
}

function addButton(selector){

var prop = readProperties(selector);

var element = $(`<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ${prop.disabled?'disabled':''}>${prop.label} </button>`);

remoteme.getVariables().observeBoolean(prop.name,x=>{

if (x){

$(element).addClass("mdl-button--accent");

}else{

$(element).removeClass("mdl-button--accent");

}

});

if (!prop.disabled){

$(element).click(()=>{

var value=!$(element).hasClass("mdl-button--accent");

remoteme.getVariables().setBoolean(prop.name,value);

});

}

replaceComponent(selector,element);

componentHandler.upgradeElement( element.get()[0]);

}

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.

xMin the minimum value sent as the first value of the variable (when the dot element is on the left or the invertX is on the right)
xMin the maximum value sent as the first value of the variable (when the dot element is at the maximum on the right side or when invertY is on the left side)
yMin the minimum value sent as the second value of the variable (when the dot element is located at the bottom or at the top when the invertY option is enabled)
yMin the maximum value sent as the second value of the variable (when the dot element is located at the top or bottom when the invertY option is enabled)
invertX – described above
invertY- described above

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

requiredMouseDown – sends only data when the left button is pressed (for moving fingers is ignored)
reset – after releasing the mouse button, detaching the finger – set variable to center position ((X_min + X_max) / 2) and ((Y_min + Y_max) / 2)

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.

label – button label
xRange – value of rotation in the horizontal axis for which the component will send the maximum, minimum value (higher value more you have to turn the phone to send max min values of the X axis)
yRange – value of rotation in the vertical axis for which the component will send the maximum, minimum value (higher value more you have to turn the phone to send max min values of the Y axis)

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