From SmartCore Wiki
Jump to: navigation, search

Presentation library is a javascript library, utilizing HTML5 graphics capabilities. There are no image files involved and no dependencies.

The primary intentions with this library, is to to present anything to the user, in the most user friendly way, with a minimum of effort, on the programmers behalf. Secondary to minimise the mixture of functionality and makeup. (At the moment support includes numbers and arrays of numbers, and fulfil the requirements of presenting sensordata. There are currently no support for input)

In many cases a graphical presentation or just a few significant digits, is the most efficient way to present a piece of data. Also the use of color and form, increases the users overview at a glance, assisting to filter out the lesser relevant information.

The function

The usage is simple. Put a tag in your HTML, like a DIV or canvas tag. Give it an ID attribute as id="important_number". In your javascript code you place a call to the present function:

 present(string <tag ID>,scalar og array <value(s)> [,string <format>] [, function <callback>]])

The format string is only required with the first call, to a specific tag ID. If format options are absent in following calls, it's presumed that it's an update of the value. Consequently avoiding useless redrawing of stationary graphics.

The callback function if defined, is intended for receiving user inputs, in a later versions. The callback function only needs to be present in the initial call to a tag ID.

Example 1. Display a number:

Let have a look at some code.

!!! Install a source code viewer here!!!

<syntaxhighlight lang="javascript">

 <!DOCTYPE HTML>
 <html>
   <head>
     <script type="text/javascript" src="plib.js" /></script>
   </head>
   
   <body>
   </body>
   
   <script>
     present("number",87.6789789);
   </script>
 </html> 

</syntaxhighlight>

result:

88


This will simply display the number with the default two significant digits. Not much magic there.

Example 2. Display a temperature:

Numbers usually represents something. like a temperatur. It's not just a number. it has a special meaning. Adding a prefix, often clarifies reading. And for good measure; let's increase accuracy.

It's done by adding a format string to the function call.

<syntaxhighlight lang="javascript" >

 <!DOCTYPE HTML>
 <html>
   <head>
     <script type="text/javascript" src="plib.js" /></script>
   </head>
   
   <body>
   </body>
   
   <script>
     var format = "prefix=\u00B0C precision=3";
     present("number",87.678971896789,format);
   </script>
 </html> 

</syntaxhighlight>

Result

88°C

Now that's no big deal. It will display the number with 3 significant digits and a prefix.

Example 3. Graphic display

Let use some graphics for effect. Change the tag to a canvas tag (Only HTML5) and add the keyword "bar" to the format string:

<syntaxhighlight lang="javascript" > <!DOCTYPE HTML>

 <html>
   <head>
     <script type="text/javascript" src="plib.js" /></script>
   </head>
   
   <body>
     <canvas id="number"></canvas>
   </body>
   
   <script>
     var format = "bar color=tempin";
     present("number",87.67899,format);
   </script>
 </html> 

</syntaxhighlight> Result:

Error creating thumbnail: File missing

You can size and style the canvas as you like.

To get a gauge instead of a bar, change the word "bar" to "gauge" You can change the scale color, top and bottom of scale values etc. Have a look at the full list of options #Format Options

Example 4. Graph display

It's also quite simple to display a simple graph.

<syntaxhighlight lang="javascript" ><!DOCTYPE HTML>

 <html>
   <head>
     <script type="text/javascript" src="plib.js" /></script>
   </head>
   
   <body>
       <canvas id="graph"></canvas>
   </body>
   
   <script>
     var format = "graph color=water low=0 high=250 prefix=cm bgcolor=water bgcolorlow=10";
     var val={};
     val.y=[50,60,80,85,105,95,105,120,156,175,170]
     val.x=[-100,-50,0,50,100,150,200,250,300,350,400]
     present("graph",val,format);
   </script>
 </html> 

</syntaxhighlight>

Result:

Error creating thumbnail: File missing

Format Options

Format options is a string of flags and key=value pairs, separated by a space.

Graphical setting only have meaning, when the output tag is a canvas tag.

Display type flags
<default> Numeric display 123
bar Bar gauge display
Error creating thumbnail: File missing
gauge Gauge (dial) display
Error creating thumbnail: File missing
graph Display an array of numbers as a graph or plot
Error creating thumbnail: File missing


Numeric scale boundaries
high=<n> The maximum scale value
low=<n> The minimum scale value (Make high-low divisible with 5 to get nice round numbers)
xhigh=<n> graph: Maximum x scale value
xlow=<n> graph: Minimum x scale value
show_value Show value on a graphic display (bar or gauge)
prefix=<string> Prefix attached to the value shown with show_value
precision=<n> Number of significant digits


Color settings where c is either a predefined color gradient or a color code in the format of #RGB or #RRGGBB
color=<n> Text color
bgcolor=<n> Background color
hand-color=<n> Text color
colorhigh=<n> Text color
colorlow=<n> Text color
bgcolorhigh=<n> Text color
bgcolorlow=<n> Text color
color=<n> Text color
color=<n> Text color
Predefined scale color gradients
tempout Temperatur scale outdoor Scalecolors.png
tempin Temperatur scale outdoor
tempwater Water temperature
tempboiler Water boiler temperature
pressure Pressure scale blue white red
water water level scale
light light (rainbow roygcbp)
brightness dark to light
process bluish yellow reddish
humidity air humidity 0 - 100% Rh
filter Pollution state white brown black 0 - 100%
bgr blue green red
byr blue yellow red
gyr green yellow red
rgr red green red
rwr Red white red
bwr Blue white red