Your First Heisenware App
Copy the app from our demo and learn how to build faster with Heiseware.
Video
Create a new app
Log in to your Heisenware account
Click on Apps
Click on the + to add a new app
Choose an App Name
Upload an App Icon
Open the App Builder
Connect data sources
HTTP
Drag and drop the HTTP
getFunction on the canvasConfigure the Function:
Trigger the Function.
Add a JSONata modifier to the Function and enter the average Function:
OPC UA
Create an OPC UA client with the OPC UA
createFunction.Call the client
Demoor use any other name you like.Trigger the Function.
Connect to an OPC UA server using the
connectFunction from within the client just created. You can use the following public server:
Trigger the
connectFunctionCheck the connection with the isConnected Function
Use the clients readNode Function and configure it with the following node ID:
Add a JSONata Modifier to the Function and extract the value with:
Alternatively to step 7 and 8, you can also use the readVariableValue Function to get right to the value.
Configure data flow
Combine data points
Drag and drop the combine Function on to the canvas.
Connect the Modifier of the
getFunction with argument 1 of the combine Function and the Modifier of the readNode Function with argument 2 of the combine Function.Trigger the combine Function
Add a JSONata Modifier to the Function and enter the sum Function:
Set the readNode trigger and the
getFunction Trigger toevery 10s.Set the combine trigger to
on input changeby drag and drop of each of the Functions arguments (or just one of them) on the Trigger.Test your logic using the test mode. Wait at least 10 seconds to see data.
Record historic data
Add a Recorder to the Modifier behind the combine Function.
Call the recorded data point
demo_dataor use any other name you like.Start the test mode for a minute or so to record some data.
Build user interface
Visualize live data
Upload your logo or any other image to the resources.
Drag and drop the image onto the Frontend Builder.
Pick a circular gauge from the display widgets and click in the Frontend Builder to place it.
Configure start and end value (0 to 500) and the color sections of the circular gauge.
Connect the Modifier of the combine Function to the circular gauge with drag and drop. Make sure to select the circular gauge first.
Start the test mode and see the data coming.
Visualize recorded data
Click on the database icon of the Recorder to auto generate the InfluxDB
readFunction.Within the
readFunction, change thetailvalue to 10.Trigger the
readFunction.Create a new page with right-click in the pages panel on the first page and a click on
New Page.Configure the apps main menu using the navigation builder. Rename pages and add icons if you like.
Select the new page.
Add a chart widget to the page.
Connect the output of the
readFunction (array) to the chart with drag and drop. Make sure to select the circular gauge first.Resize and configure the chart.
Add a button and configure it.
Connect
readFunction Trigger and button.Test your logic using the test mode.
Adjust all screens
Choose the preview of rotated phone, tablet, rotated tablet or desktop.
Adjust all widgets size and position for each screen.
Modify app theme
Open the theme editor.
Pick a base theme.
Pick a default theme or configure your own theme.
Publish and open the app
Click on deploy.
Scan the QR code to open the app on your phone or click the URL to open the desktop version of your app.
Optionally install the app on your device.
Last updated
Was this helpful?