Build Your First Heisenware App

Copy the app from our demo and learn how to build faster with Heiseware.

Video

Create a new app

1. Log in to your Heisenware account

2. Click on Apps

3. Click on the + to add a new app

4. Choose an App Name

5. Upload an App Icon

6. Open the App Builder

Connect data sources

HTTP

1. Drag and drop the HTTP get node on the canvas
2. Configure the function:

URL

http://www.randomnumberapi.com/api/v1.0/random

Parameters

min: 50
max: 100
count: 5

1. Trigger the function.

2. Add a JSONata modifier to the function and enter the average function:

$average($)

OPC UA

1. Create an OPC UA client with the OPC UA create node.
2. Call the client Demo or use any other name you like.

3. Trigger the function.

4. 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

1. Trigger the connect function

2. Check the connection with the isConnected node

3. Use the clients readNode node and configure it with the following node ID:

ns=2;i=10846

1. Add a JSONata modifier to the function and extract the value with:

value.value

Alternatively to step 7 and 8, you can also use the readVariableValue node to get right to the value.

Configure data flow

Combine data points

1. Drag and drop the combine function on to the canvas.

2. 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.

3. Trigger the combine function

4. Add a JSONata modifier to the function and enter the sum function:

$sum($)

1. Set the readNode trigger and the get function trigger to every 10s.

2. 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.

3. Test your logic using the test mode. Wait at least 10 seconds to see data.

Record historic data

1. Add a recorder to the modifier behind the combine function.
2. Call the recorded data point demo_data or use any other name you like.

3. Start the test mode for a minute or so to record some data.

Build user interface

Visualize live data

1. Upload your logo or any other image to the resources.
2. Drag and drop the image onto the UI builder.
3. Pick a circular gauge from the display widgets and click in the UI builder to place it.
4. Configure start and end value (0 to 500) and the color sections of the circular gauge.

5. Connect the modifier of the combine function to the circular gauge with drag and drop. Make sure to select the circular gauge first.

6. Start the test mode and see the data coming.

Visualize recorded data

1. Click on the database icon of the recorder to auto generate the InfluxDB read node.
2. Within the read function, change the tail value to 10.

3. Trigger the read function.

4. Create a new page with right-click in the pages panel on the first page and a click on New Page.
5. Configure the apps main menu using the navigation builder. Rename pages and add icons if you like.
6. Select the new page.

7. Add a chart widget to the page.
8. Connect the output of the read function (array) to the chart with drag and drop. Make sure to select the circular gauge first.

9. Resize and configure the chart.

10. Add a button and configure it.
11. Connect read function trigger and button.

12. Test your logic using the test mode.

Adjust all screens

1. Choose the preview of rotated phone, tablet, rotated tablet or desktop.
2. Adjust all widgets size and position for each screen.

Modify app theme

1. Open the theme editor.
2. Pick a base theme.

3. Pick a default theme or configure your own theme.

Publish and open the app

1. Click on deploy.
2. Scan the QR code to open the app on your phone or click the URL to open the desktop version of your app.

3. Optionally install the app on your device.