Sidebar
admin:managing_pages
Table of Contents
Managing Pages
Pages are created from the sidebar. Once you have created a page, administrators will find a button below the content that will allow you to add it to your page library.
They are managed from the admin page, where they can be modified or deleted.
Each page can be assigned to a particular combination of customer and location (or alternatively, you can assign it to all users). This helps control who has access to them, as not all pages will be relevant to everyone - and in fact, pages may include some confidential information.
WARNING
A word of warning - unlike the easy-to-create charts, pages are quite complex to create.
You'll need to create a custom web-page that will be displayed to your users. Normally this would require someone who has a good knowledge of HTML to help create the custom page.
Your partner or Optrix may be able to assist in setting up a custom page for you, if you don't have anyone in-house with the experience to do so. Custom pages such as maps are relatively easy to create for someone with web development experience.
Preparing Your Page
First, create a bare-bones HTML file for your custom page.
This page must include….
- A <head> tag, with a <title> and an optional <style> section.
- A <body> tag, with the visible content of your page
You must also avoid certain tools and behaviours - for more information, see page inclusions and restrictions.
Embedding Values
Once you have the page looking the way you want, it's time to make it work.
Everytime you have the measurement name in square brackets (ie [Tank One Level]), rAware will replace that text with the actual measurement value.
This does not just apply to content text - it applies to the entire HTML document, so this will also change any javascript or styles.
Note that if you have two measurements with the same name, you can prepend the device name to make specify exactly which unit you mean.
For example, if you have a measurement called 'Main Tank Level' on device 'IO1', and another 'Main Tank Level' on device 'IO2', you can use the line [IO1.Main Tank Level].
There are also techniques to transform page values, for when you're using the measurements for styles rather than as human-readable text.
Ignoring Units
By default, the units of measurement are included after the value. If you wish to use the value alone with no measurements, add a '^' character at the end of the line.
Adding the Page
To add the page, click on “Upload a new Page” button on the sidebar.
You'll be given two options.
Your page can be external (hosted on your website), in which case you'll need to fill in the 'URL' field to point at a publically-accessible copy of your page. This is a common solution when your in-house web developer is maintaining the page, since any changes can be done on your end and don't need to be updated in rAware.
You page can also be internal, in which case you can upload the HTML file to the rAware servers and we will store it for you.
Note that when you upload the page, the file name you submit it from is used as a unique ID for the page. Thus if you upload the same filename twice, it will overwrite your EXISTING file with that name.
If you are creating a number of similar pages, please ensure you create a unique filename for each.
Example
The following is example HTML - a custom page showing the temperature (as text), wind speed (as text), humidity (as a bar-chart) and wind direction (as an image of an arrow, rotated to point in the correct direction).
<html>
<head>
<!-- The TITLE must appear, as it is used to name the page -->
<title>Weather Station A14</title>
</head>
<body>
<p>
<!-- Here we are placing the human-readable value of 'Temperature' into a span so it can be read -->
<label>Temperature:</label> <span>[Temperature]</span>
</p>
<p>
<!-- Here we are making sure the value comes from device A14 -->
<label>Wind Speed:</label> <span>[A14.Wind Speed]</span>
</p>
<p>
<div style="background-color: green; width: 204px; height: 20px; padding: 2px;">
<!-- In this case, we are loading the width of the bar from the 0-100% value of 'Humidity' - times 2, since our bar graph is 200px long -->
<div style="background-color: red; width: [Humidity^*2]px; height: 100%;">
</div>
</div>
</p>
<p>
<!-- Here we are using transforms to rotate our image to suit the wind direction, which is measured in degrees. Note that we still include the '^' to remove units -->
<img src="myimage.png" style="-ms-transform: rotate([Wind Direction^]deg); -webkit-transform: rotate([Wind Direction^]deg); transform: rotate([Wind Direction^]deg);"/>
</p>
</body>
</html>
admin/managing_pages.txt · Last modified: 2015/07/31 03:31 by sharding
Page Tools
