I have created a new SCADA symbol in Thingsboard. It is an icon of a door and should change color when you click on it.
When I got everything working in my preview, I expected it to work on the dashboard as well. However, that was not the case. I used the console to log what happened. Both logs, that of the preview and that of the dashboard, show the same entries. The only difference is that the status is checked immediately when the preview is opened, which does not happen with the dashboard. Either way, the dashboard does not change its appearance.
Preview logs: SCADA symbol preview logs
Preview appearance: closed door (startingpoint) opened door (after click)
Dashboard logs: SCADA symbol dashboard logs
Dashboard appearance: colorless door
this is the state render function:
> console.log('state render function was called');
> console.log('current doorStatus: ' + ctx.values.doorStatus);
> var status = ctx.values.doorStatus;
> var color = status ? ctx.properties.colorOpen : ctx.properties.colorClosed;
> element.attr({fill: color});
this is my on click action:
> console.log("registered click");
> var status = ctx.values.doorStatus;
> console.log("current doorStatus: " + status);
> var action = status? 'closeDoor' : 'openDoor';
> ctx.api.callAction(event, action, undefined, {
> next: () => {
> console.log(action + " was called");
> ctx.api.setValue('doorStatus', !status );
> console.log('doorStatus was set to ' + ctx.values.doorStatus);
> },
> error: () => {
> });
Just found a way to make the changes visible in the dashboard as well.
First of all, let me say that I don't really understand why my code didn't work, as I used the existing scada symbols as a guide. I also adjusted the logging a bit and was able to see that the value stored for the color actually changed, even though the appearance didn't.
Fortunately, I was still able to get it to work by using element.css('fill', color); instead of element.attr({ fill: color });.