|
Bars Indicator
The Indicator Bars may be used to show relative level of a value, lighting ‘LEDs’ from the bottom to the top. This is an implementation of the Canvas Control and uses features of it. This will only summarize this particular use of it.
The Indicator Bars utilizes images indicators/BAR_Vert_Grn-0.png to indicators/BAR_Vert_Grn-10.png (with choices for other colors as well) with scaling from 0 to 100, such that from 0 to 100 for its value property, the bars will light indicating the relative value by showing the correctly indexed image. So, for the indexMin and indexMax 0 and 10 are used. For the indexScaleMin and indexScaleMax, 0 to 100 is used. To set to indicate over another range, simply change the index scale values.
The update value is set to [ain0] which will update the control’s value property when analog data arrives. This will cause the image to be updated over a range of 0 to 100.
Note that the end-user may develop their own indexes images as well for personalized controls. Please see Portable Interface Development for making interface packages portable.
7-Segment Indicator
The 7-Segment Indicator may be used to show relative level of a value, lighting ‘LEDs’ from the bottom to the top. This is an implementation of the Canvas Control and uses features of it. This will only summarize this particular use of it.
The Indicator Bars utilizes images indicators/7seg-0.jpg to indicators/7seg-9.jpg with scaling from 0 to 100, such that it ranges from 0 to 100 for its value property, the segments will light up, indicating the relative value by showing the correctly indexed image. So, for the indexMin and indexMax 0 and 9 are used. For the indexScaleMin and indexScaleMax, 0 to 100 is used. To set to indicate over another range, simple change the index scale values.
The update value is set to [ain0] which will update the control’s value property when analog data arrives. This will cause the image to be updated over a range of 0 to 100.
To create a multi-digit display, create 2 controls, set their index scale to range from 0 to 9, so that 1 will show 1, 2 shows 2, etc.
For the 1’s place, use the Update Value of:
{ mod([ain0],10) } Use modulus of 10 to leave only 1’s place
For the 10’s place, use the Update Value of:
{ mod(round([ain0]/10 - 0.5,0) ,10) } Divide by 10 and subtract 0.5 so it doesn’t round up, round to 0 decimal places, take the modulus of 10 again to leave only 1’s place.
Additional digits may be done to 100’s, etc, but dividing by 100, etc. for their update values.
Note that if a decimal is desired, a drawing instruction may be used to draw a red filled circle at the desired location.
<load>@7seg-10.drawFilledCircle 92,77,15,RED // use event code to place decimal when loading with constant drawing
Ovals Indicator
The Ovals indicator is another implementation of the Canvas Control which uses incoming data of [ain0], [ain1] and [ain2] to draw Ovals setting the width, height and rotation of the Ovals respectively. This is a nice example of using real-time data for a visualization effect.
Using Event Code of:
<analog>!this.drawOval 50,50,[ain0],[ain1],[YELLOW],20,[ain2]
This code will run when analog data arrives. For the control, the width (ain0), should be 0 to 100, height (ain1), 0 to 100, and rotation (ain2), 0 to 360 (may exceed or go negative). The 20 is the drawing width. This could be adapted to be a data value as well. The color, instead of yellow, can use decimal values from data from 0 to 16.5 million (RGB range of hex 0x000000 to 0xFFFFFF) to allow changing colors as well. Or change the X,Y coordinates as well! Enjoy!
Math can be performed to scale the date, such as using { [ain0] / 10 } for a range of 0 to 1000.
A property, maxDrawings, sets the number of drawings to be saved before deleting the oldest. This allows for some visual history as the oval are drawn without overwhelming the control area. It is set to 20 by default.
Thermometer Indicator
The Thermometer is one more implementation of the Canvas Control. This uses a background image of the thermometer and uses the incoming value of [ain0] to scale the data to draw the ‘filled stem’ image to the correct height. It is configured for an incoming range of 0 to 100 for values.
The mapConstrain post-fix operation below will take the incoming data, [ain0], and scale values from 0 to 100 the stem Y coordinates of the 90 to 1. The temperature range is easily changed by setting 0 100 to a range such as 32 212. The result of the operation are constrained and will not exceed 90 and 1 to ensure drawing stay within the desired range. More information on post-fix math operations.
The Event Code:
// scale value from range of 0 to 100 to range of 90 to 1 to fit Y coordinates of stem
<analog>!this.value={:: [ain0] 0 100 90 1 mapConstrain }
// draw the filled stem using the calculated top to the bulb at 91.
<analog>!this.drawImage 40,[this.value],60,91,/indicators/therm_fill.jpg
Note that the maxDrawings property value is set to 1 to keep only the last stem drawing in memory.
What animated indicators can you create?
|
.png){kind=spacer}
