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.

 

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