The Canvas display and the
IMDV display
both make use of a Canvas Glyph mechanism that provides a declarative specification
for making some drawing in an HTML canvas and its subsequent display.
|
<glyph type>,attr1=value1,attr2=value2,... <glyph type>,... ... <glyph type>,...Where the type can be one of label, circle, rect, image, gauge, 3dbar, axis,tile, vector. e.g.:
3dbar,pos:sw,dx:10,dy:-5,height:100,width:8,baseHeight:5,sizeBy:atmos_temp,sizeByMin:0,sizeByMax:50 label,font:6pt,pos:ne,dx:90,dy:-90,label:Temp: ${atmos_temp}
{Each of these glyphs is positioned within the canvas based on the attributes for the glyph.{display_canvas canvasWidth=100 canvasHeight=100}}
label,pos:c,dx:cw2,dy:ch2,label:Some labelIf you want to have a label that is position in the upper right of a canvas of width and height 100. To do this specify the following. The dy=-90 takes into account the approximate height of the text block.
label,pos:ne,dx:100,dy:-90,label:Some label
fontSize:0px,iconSize:20,canvasWidth:100,canvasHeight:100,font:28px sans-serif,defaultField:pm2.5And Glyphs:
label,pos:c,dx:cw2,dy:-ch2,label:${${_field}} #The circle is colored by the selected field with the given color table and min/max range circle,width:cw-10,height:ch,pos:c,dx:cw2,dy:-ch2,colorBy:${_field},colorTable:airquality,colorByMin:0,colorByMax:300The positioning is as follows: The display of the NWS Weather entries in an IMDV map is defined with: Properties:
iconSize:75,canvasWidth:600,canvasHeight:250,fill:#efefef,borderWidth:2,borderColor:#000,font:bold 36px sans-serifWith Glyphs defined as:
image,pos:nw,dx:10,dy:-ch+10,width:60,height:60,url:/repository/point/noaalarge.png label,pady:5,pos:nw,dx:80,dy:-ch+10,label:${entryname} label,pady:10,pos:n,dx:cw2,dy:-ch+60,font:36px sans-serif,label:${temperature prefixLabel=true} ${windspeed prefixLabel=true} Pressure: ${barometricpressure scale=0.01 decimals=1} mbHere there are 2 labels - the name of the entry and a 3 new line separated field values. This gives:
glyph1="<glyph type>,..." glyph2="<glyph type>,..." ... glyphN="<glyph type>,..."e.g.:
glyph1="3dbar,pos:sw,dx:10,dy:-5,height:100,width:8,baseHeight:5,sizeBy:atmos_temp,sizeByMin:0,sizeByMax:50" glyph2="label,font:6pt,pos:ne,dx:90,dy:-90,label:Temp: ${atmos_temp}"For example, below is a canvas display that shows network statistics for a set of instruments. The display is specified with the following.
... #Ranges for the color table colorByMin="0" colorByMax="720" #define the canvas dimensions canvasWidth=175 canvasHeight=80 #The sw corner of the label is origin.x+60, origin.y-10 #the _colon_ is replace with ":" glyph1="label,pos:sw,dy:-10,dx:60,label:network_colon_ ${network_minutes} data_colon_ ${data_minutes} ldm:${ldm_minutes}" #The sw corner of the first bar is origin.x+10 origin.y #The 3dbar has a width of 8 and a minimum height of 5 #The height of the bar is sizeBy percentage*30 glyph2="3dbar,pos:sw,dx:10,dy:0,height:30,width:8,baseHeight:5,sizeBy:network_minutes,colorBy:network_minutes" glyph3="3dbar,pos:sw,dx:25,dy:0,height:30,width:8,baseHeight:5,sizeBy:data_minutes,colorBy:data_minutes" glyph4="3dbar,pos:sw,dx:40,dy:0,height:30,width:8,baseHeight:5,sizeBy:ldm_minutes,colorBy:ldm_minutes" ...