WebPage Components

Before 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 add webpage with default template “Component Starter”.

Then after click at index.html You will be able to add one of the components by chooseing edit With wizard

New window appears:

this webPage is quiet simple, You have preview of your webPage both rendered, and sourcecode.

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 contorl other types of variables such string, double, integer. 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 We specified what variable You want to control, if You put name of variable which deosnt exists it will create
  5. You can choose variable from already created components. It will show You window with variables with current variable type choosed
  6. Preview of component to insert. Its jsut preview so You got familiar with code 😉
  7. How component looks like after insert
  8. Insert compoennt 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 connections status with your webPage

  1. Show webSocket connection – it will be selected if there is websocket connection between our 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 RasbperryPi and there camera connected 6 icon will be selected

This component doesn’t affect to connection itself jsut 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 rearange components. Components are based on material Design Lite , so it means You can use other components from this library like adding cards, layouts to rearange your components.

What happen under the hood (advanced)

As You noticed creator just adding components in form

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

Javascript start by calling this function:

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

and then 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 its connect events to this component using remoteMe class. So instead of putting compoennts using wizard You can jsut 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