Build 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 get node on the canvas
Configure the function:
URL
http://www.randomnumberapi.com/api/v1.0/random
Parameters
min: 50
max: 100
count: 5
Trigger the function.
Add a JSONata modifier to the function and enter the average function:
$average($)
OPC UA
Create an OPC UA client with the OPC UA create node.
Call the client
Demo
or use any other name you like.Trigger the function.
Connect to an OPC UA server using the connect node from within the client just created. You can use the following public server:
opc.tcp://opcua.demo-this.com:51210/UA/SampleServer
Trigger the connect function
Check the connection with the isConnected node
Use the clients readNode node and configure it with the following node ID:
ns=2;i=10846
Add a JSONata modifier to the function and extract the value with:
value.value
Configure data flow
Combine data points
Drag and drop the combine function on to the canvas.
Connect the modifier of the get function 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:
$sum($)
Set the readNode trigger and the get function trigger to
every 10s
.Set the combine trigger to
on input change
by 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_data
or 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 UI builder.
Pick a circular gauge from the display widgets and click in the UI 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 read node.
Within the read function, change the
tail
value to 10.Trigger the read function.
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 read function (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 read function 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