Difference between revisions of "Datalogger"

From HSYCO
Jump to navigation Jump to search
Line 1: Line 1:
[[Category:INCOMPLETE]][[Category:UI Objects]]
+
{{UI Object Header}}
 +
Works in combination with the data logger function to present a collection of data using time-based statistical charts.
 +
This object automatically adapts the graphical layout and size of the charts based on the overall object's size. The default presentation can be customized using several optional attributes.
 +
 
 +
[[File:UI Object datalogger.png]]
 +
 
 +
== Parameters ==
 +
*'''id''': the object's ID, used by UISets. Required
 +
*'''position''': the object's position. Use the pixels or rows and columns coordinates format
 +
*'''size''': the chart's area's width and height
 +
*'''label''': the values axis label
 +
*'''attributes''': list of UI attribute ids and values defining the chart's aspect and data. Setting this parameter is the same as setting each UI attribute with a UISet
 +
 
 +
== Syntax ==
 +
(datalogger <id>; <pos>; <width>; <height>; <label>; <attributes>)
 +
E.g.
 +
(chart!chart1 x3y187; 312; 180; (type=line; values=0,10,24,12,7,35,42,1,23,4))
 +
 
 +
== UI Attributes ==
 +
{{UI Object Attributes (Common)}}
 +
=== Datalogger attributes ===
 +
{| class="wikitable"
 +
!Name
 +
!Value
 +
!Description
 +
|-
 +
 
 +
|rowspan="2"|mode
 +
|live
 +
|Live mode
 +
|-
 +
|browser
 +
|Browser mode
 +
|-
 +
 
 +
|slot
 +
|number
 +
|Show a specific slot, from 0 to the number of slots-1
 +
|-
 +
 
 +
|rowspan="3"|scale
 +
|year
 +
|
 +
|-
 +
|month
 +
|
 +
|-
 +
|day
 +
|
 +
|-
 +
 
 +
|rowspan="4"|browserscale
 +
|year
 +
|
 +
|-
 +
|month
 +
|
 +
|-
 +
|day
 +
|
 +
|-
 +
|hour
 +
|
 +
|-
 +
 
 +
|browserdate
 +
|date and time, in the "yyyymmddhh" format
 +
|
 +
|-
 +
 
 +
|rowspan="3"|controls
 +
|tabs
 +
|
 +
|-
 +
|toolbar
 +
|
 +
|-
 +
|none
 +
|
 +
|-
 +
 
 +
|rowspan="2"|panel
 +
|true
 +
|Show background panel
 +
|-
 +
|false
 +
|Hide background panel
 +
|-
 +
 
 +
|rowspan="2"|multichart
 +
|true
 +
|
 +
|-
 +
|false
 +
|
 +
|-
 +
 
 +
|presentvaluecolor
 +
|A color that applies to all present values
 +
|-
 +
 
 +
|pastvaluecolor
 +
|A color that applies to all past values
 +
|-
 +
 
 +
|rowspan="5"|type
 +
|bars
 +
|Draw bars
 +
|-
 +
|gauge
 +
|Draw a gauge, for charts with a single value. Use with the "value" attribute
 +
|-
 +
|points
 +
|Draws points
 +
|-
 +
|line
 +
|Draws a line connecting the values
 +
|-
 +
|spline
 +
|Draws a spline connecting the values
 +
|-
 +
 
 +
|valuelabelcolor
 +
|CSS color
 +
|Value label's color
 +
|-
 +
 
 +
|rowspan="3"|valuelabeltype
 +
|inside
 +
|Value labels are shown inside (if "type" is bars, points or gauge) or over (if "type" is line or spline)
 +
|-
 +
|outside
 +
|Value labels are shown above or below
 +
|-
 +
|popup
 +
|Value labels are shown on mouseover, or on touch (if on a touch-enabled device)
 +
|-
 +
 
 +
|notches
 +
|value
 +
|number of notches on the x-axis (for vertical charts) or on the y-axis (for horizontal charts)
 +
|-
 +
|axiscolor
 +
|CSS color
 +
|axis color
 +
|-
 +
 
 +
|notchcolor
 +
|CSS color
 +
|color of the axis notches
 +
|-
 +
 
 +
|labelcolor
 +
|CSS color
 +
|color of the axis and bars labels
 +
|-
 +
 
 +
|thresholds
 +
|comma-separated list of values
 +
|List of values at which to display a line (threshold)
 +
|-
 +
 
 +
|thresholdcolor
 +
|CSS color
 +
|Color of threshold lines
 +
|-
 +
 
 +
|thresholdcolors
 +
|comma-separated list of CSS colors
 +
|List of colors of threshold lines, one value each line
 +
|-
 +
 
 +
|}
 +
 
 +
{{Note:CSS Color}}

Revision as of 16:03, 27 January 2014

Note  For a description and a complete list of UI Objects, see UI Objects.

Works in combination with the data logger function to present a collection of data using time-based statistical charts. This object automatically adapts the graphical layout and size of the charts based on the overall object's size. The default presentation can be customized using several optional attributes.

File:UI Object datalogger.png

Parameters

  • id: the object's ID, used by UISets. Required
  • position: the object's position. Use the pixels or rows and columns coordinates format
  • size: the chart's area's width and height
  • label: the values axis label
  • attributes: list of UI attribute ids and values defining the chart's aspect and data. Setting this parameter is the same as setting each UI attribute with a UISet

Syntax

(datalogger <id>; <pos>; <width>; <height>; <label>; <attributes>)

E.g.

(chart!chart1 x3y187; 312; 180; (type=line; values=0,10,24,12,7,35,42,1,23,4))

UI Attributes

Common attributes

Name Value Description
pos x<x>y<y> Position specified as x/y coordinates. E.g. x-5y10
visible true Default. Show the object
false Hide the object
blink true | slow Blink the object at a slow speed
fast Blink the object at a fast speed
false Stop the blinking
opacity 0.0 ... 1.0 Object opacity from 0 (not visible) to 1 (fully visible)
rotation 0 ... 360 Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner

Datalogger attributes

Name Value Description
mode live Live mode
browser Browser mode
slot number Show a specific slot, from 0 to the number of slots-1
scale year
month
day
browserscale year
month
day
hour
browserdate date and time, in the "yyyymmddhh" format
controls tabs
toolbar
none
panel true Show background panel
false Hide background panel
multichart true
false
presentvaluecolor A color that applies to all present values
pastvaluecolor A color that applies to all past values
type bars Draw bars
gauge Draw a gauge, for charts with a single value. Use with the "value" attribute
points Draws points
line Draws a line connecting the values
spline Draws a spline connecting the values
valuelabelcolor CSS color Value label's color
valuelabeltype inside Value labels are shown inside (if "type" is bars, points or gauge) or over (if "type" is line or spline)
outside Value labels are shown above or below
popup Value labels are shown on mouseover, or on touch (if on a touch-enabled device)
notches value number of notches on the x-axis (for vertical charts) or on the y-axis (for horizontal charts)
axiscolor CSS color axis color
notchcolor CSS color color of the axis notches
labelcolor CSS color color of the axis and bars labels
thresholds comma-separated list of values List of values at which to display a line (threshold)
thresholdcolor CSS color Color of threshold lines
thresholdcolors comma-separated list of CSS colors List of colors of threshold lines, one value each line
A CSS color can be specified as
  • hex value: #<rr><gg><bb> E.g. #FF1010
  • color name: red, blue, white...
  • as rgb: rgb(<r>,<g>,<b>) E.g. rgb(255,30,30)
  • as rgba: rgba(<r>,<g>,<b>,<alpha>) E.g. rgba(255,30,30,0.5)