[SOLVED] Customize Blocks code/using string template

Is there a way to add my own blocks or customize the code for the behaviours of some of the blocks I use?

I want a block similar that of the heatmap, but everytime a device reports a particular value of an attribute, make a popup or change the colour of the spot on the heatmap until the attribute is no longer that value.

Eg. Device 1’s temperature is now below 10 degrees C so change the colour of that device’s spot on the map to blue.


There’s currently not a way to customize the heatmap block, but the GPS history block can be used in this way. You can change the icon of the markers based on the value of an attribute.

Changing heatmap color is a cool idea. We’ll investigate adding the ability to change the color of the heatmap based on state data.

We do also provide the external website block, which allows you to host any custom visualization in an iframe. We use Mapbox for our maps, so you could implement the visualization directly until a customization from us is available.

I looked into using the GPS history Block and it is close to what I am looking for. However, is there a way to display the attributes of my device in the popup rather than the Handlebar variables?
I can’t seem to access my temperature value. Is this not possible?


Looks like you just need to remove body from the handlebar variable. Change {{ data.body.temperature }} to {{ data.temperature }}.

That doesn’t seem to do anything.

The underlying issue is that the temperature attribute was not reported at the same time as the location. The history map works by placing a point for every state payload that includes location information. The popup can then be customized to show other attribute data included on that same payload.

It appears as though your devices are reporting temperature and location separately, which means there’s no other data available on the payloads that have the location data.

There are two work-arounds:

  1. Have the device report temperature every time it reports location so that they are both together in the same payload.
  2. In the workflow that’s handling the location information, you can grab the most recent temperature using the gauge query node and simply report the same temperature again in the device state node you’re already using to report location.

Both of these options will solve the primary goal, which is to get location and temperature reporting on the same payload.

I’m having some trouble setting up the gauge query node. The payload path I made doesn’t appear.
Even if I use a pre-defined path such as data.query, it still doesn’t work. What is it that I’m doing wrong?

OK I got the node working but I can’t access it through the popup template?

More images! :sweat_smile::

Now that you have it available on the workflow payload, you’ll need to use a device state node to record the value on the device itself. You likely already have a device state node that is recording location. You can just add another entry on that node to save data.tempA.value onto the temperature attribute on the device.

OK so I’ve added tempA and tempE attributes to my devices and then after configuring the gauge query, I’ve set the device state node and set the attribute states to {{data.tempA}} and {{data.tempE}}.
But I’m still not getting any temperature values on the pop up.
I’ll wait another 30min (since GPS only reports in every hour).

Now that it’s reported a few times, have you had success getting those values on the popup?

No luck unfortunately. :confused:

When the GPS reports in every hour this is the payload:

But the block doesn’t show the temperature value.

The workflow payload and the variables available in the GPS block are different things. Workflows can be triggered by all sorts of things, even unrelated to devices. In your example, it’s being triggered by a webhook, so the workflow payload is whatever was sent over the webhook.

The GPS block pulls data from the device state. The variables available in the GPS block are always the attributes of a device (i.e. data.<attribute-name>). In order to get values from the workflow payload onto a device, they must first be recorded using the device state node.

The root issue is this workflow is being invoked with temperature and location separately, so the attributes are being recorded to the device at separate times. So when the GPS history block displays a location point, there is simply no temperature data at that moment in time available to display.

In the above screenshot, it also looks like you’re using a gauge query to grab the previous temperature on every webhook, even if the payload includes a new temperature. You’ll need a conditional to check if the payload includes location, and if does, only then get the previous temperature. Then you need to record both location and temperature at the same time using a device state node.

Ok I’ve changed my workflow so it:

  1. checks to see if payload contains temperature or location
  2. If its location then create a gauge query to grab the last temperature from the device
  3. Set the device state for the device which reported in (I have 2 devices, deviceA and deviceE, monitoring the temperature of 2 different environments. Which is why I need the ‘is device…’ conditional nodes so that the correct device state can be updated).

Again my payload shows the correct data but I can’t access it in the blocks.

The problem may be that the other device attributes aren’t in ‘block’ format:
i.e. Attributes like ‘temperature’ and ‘lat’/‘long’ are variables, but tempA and tempE have become blocks where the gauge query node created the ‘time’ and ‘value’ variables. I don’t know how to use Handlebars to access the value variable in the tempA/E attributes, in the dashboard blocks.

Still not seeing the temperature on the GPS history block popup.

I’ve used store value and get value nodes and now the attributes tempE and tempA are appearing in the payload.

Have I written my handlebar code correctly?

I checked out your workflow. The issue is that you’re using data.temperature instead of data.body.temperature in the two Store Value nodes. This means nothing is being saved since data.temperature doesn’t exist on the current workflow payload. Then later when location is reported and it uses Get Value, there’s nothing there. You can view/debug current values using the “Storage” tab on the bottom right (some values are auto-generated by our nodes, so you may see some values that you didn’t create, but those can be ignored).