Arcs are often used for gauges and methods of showing some kind of level of data or progress. This tutorial will walk you through how to handle incoming data using Storyboard IO, and use that data to display an increase or decrease using a gauge made with arcs.
The gauge will consist of 2 arcs. The bottom arc will be used as the shell of the gauge, to show the total amount of data that the gauge represents. The second arc will sit on top and be situated so that it sits within the outer shell. This is the arc that will be updated using the incoming data, to show the gauge’s current level.
Create a new control by right clicking on your layer and selecting Add > Control > Arc, or by dragging in an arc control from the Palette. Change the size of the control to make the arc as large as you want it.
Now add another arc render extension to the control by pressing the + button. Shrink the size and adjust the position of the render extension so that it sits centered within the first one. You can adjust the end angle to see what it will look like at different levels.
Tie the end angle to a variable, since that is what we will be adjusting, using the incoming data.
This event can just be temporary for testing, or you can create the final event for your application now. The important thing is to first plan out what kind of data you will be sending to update the gauge. You may choose to send the exact level of whatever you are measuring, be that speed or gas level or air pressure. Since it is better to keep most calculations on the backend in order to keep the UI as simple as possible, we are going to send a direct percentage. This will be sent as an unsigned integer, between 0 and 100.
Now that the event is created, add a listener for it at the app level (right click on the app name at the top of the Application Model). Set it to trigger a Lua function.
Define your event channel if you have not done that yet. Click on the Simulator Configurations icon.
Select greio in the plugin options and set the Channel Name.
Close the dialog to save the setting.
Open up the script editor and create the function that you named earlier. You can do this by finding the event in the Actions view for the app level (Click on the app in the Application Model), or by right-clicking in the Scripts view.
Gather the level from the incoming mapargs event data, and print it out to ensure that the level is coming through properly.
--- @param gre#context mapargs function cb_gauge_update(mapargs) local ev_data = mapargs.context_event_data local level = ev_data.level print(level) end
Run the app and open the Storyboard IO tab. Select your event from the dropdown menu and slide the slider to ensure that the proper values are being printed in the Console.
Now set some constants for your min and max gauge angles. In this case, they would be 180 and 360.
local MIN_ANGLE = 180 local MAX_ANGLE = 360
Now comes the math to determine the angle of the gauge. Since the percentage is being sent through directly, the math becomes fairly simple.
local angle = ((level/100) * (MAX_ANGLE - MIN_ANGLE)) + MIN_ANGLE
Use gre.set_value to update the End Angle variable.
gre.set_value("Layer.arc_base.end_angle", angle)
Run the app and use the slider in Storyboard IO to update the gauge. You should now see the arc update in the app, staying within the bounds of the gauge.