CURVE_FROM_PARAM_OVER_TIME
This element can be used to create custom curves based on the variations of a parameter: the curve represents the evolution of the parameter over time.
Attributes brief detailed show all inherited
Examples
The following example creates a curve from param and allows changing various things on the fly:

- <!-- demo param -->
- <PARAM id="demo_param" min="-10" max="10" default="0" />
- <!-- curve from param over time -->
- <CURVE_FROM_PARAM_OVER_TIME id="curve_demo" param_id="demo_param" duration_ms="10000" refresh_time_ms="50"/>
- <!-- controls -->
- <ROW spacing="20">
- <PARAM_TEXT_CONTROL param_id="demo_offset" content="Offset: {value}"/>
- <PARAM_TEXT_CONTROL param_id="curve_demo.refresh_time_ms" content="refresh_time_ms: {value}"/>
- <PARAM_TEXT_CONTROL param_id="curve_demo.paused" />
- </ROW>
- <!-- display the curve on a graph -->
- <PNS_LCD_GROUP_BOX>
- <!-- grid -->
- <GRID id="grid_1" width="100%" height="100%" x_positions_count="11" x_subdiv_count="1" y_positions_count="3" y_subdiv_count="3" color="#CCCCCC" subdiv_color="#999999" origin_color="#FFFFFF" line_width="2" subdiv_line_width="1" origin_line_width="3" x_param_info_id="curve_demo.x_info" y_param_info_id="curve_demo.y_info" opacity="0.2" />
- <!-- first graph for the line (stroke) -->
- <CURVE_GRAPH curve_id="curve_demo" width="500" height="200" color="#327ca3" graph_style="stroke" opacity="1" line_width="4" />
- <!-- second line for the opaque bargraph -->
- <CURVE_GRAPH curve_id="curve_demo" width="500" height="200" color="#327ca3" graph_style="bargraph" opacity="0.2" line_width="4" />
- <!-- horizontal ruler -->
- <RULER id="graph_ruler_x" orientation="horizontal" width="100%" value_suffix="false" param_info_id="curve_demo.x_info" color="#AAAAAA" value_format=".1" content="{value}" positions_count="11" font_escapement="0" text_h_align="center" v_offset="0" v_align="bottom" h_offset="-1" font_size="12" />
- <!-- vertical ruler -->
- <RULER id="graph_ruler_y" orientation="vertical" height="100%" width="50" value_suffix="false" param_info_id="curve_demo.y_info" color="#999999" value_format=".1" content="{value}" positions_count="3" font_escapement="0" text_v_align="top" h_align="left" text_h_align="left" h_offset="3" v_offset="0" font_size="12"/>
- </LAYER_STACK>
- </PNS_LCD_GROUP_BOX>
- <!-- demo logic -->
- <PARAM id="demo_offset" min="-5" max="5" default="0" />
- <SCRIPT script="double demo_val = 0;" />
- <TIMER id="forever_timer" refresh_time_ms="5" />
- <ACTION_TRIGGER event_id="forever_timer.elapsed"
- script="
- demo_param = demo_offset + sin(demo_val)*5;
- demo_val+=0.04;
- " requires="demo_param;demo_offset;" />
If you want to clear the curve every time it's "unpaused", you can use trick like this (slightly change refresh_time_ms which causes curve to start all over).
- <!-- trick to clear the curve every time its unpaused -->
- <ACTION_TRIGGER event_id="curve_demo.paused.value_changed" condition_formula="curve_demo.paused==0" script="curve_demo.refresh_time_ms = curve_demo.refresh_time_ms+rand(-0.00000001, 0.00000001)" requires="curve_demo.refresh_time_ms" />
Related elements
See CURVE_GRAPH, FORMULA_CURVE, GRID, RULER, CURVE, CURVE_LINK, CANVAS.
Comments
Please, authorize to view and post comments.