Don't have android readily available to verify, but can confirm this is the exact issue seen on iOS. (With the 9 -> 10 gauges) .
iOS === 
gauges and that's it for today.
I will investigate it deeply.
Very strange and sad case.
1 Like
Actually it does not load on my imac with Safari either (well maybe didnt wait longer than 1 minute).
On Chrome it works, I see that the node will load the js file for every gauge (doesnt have to be a problem), but are the gauges instanciated or does it create complete new ones ?
1 Like
Very likely. No proof yet but one to investigate.
1 Like
And the issue is solved in version 0.1.38
Many thanks to @afelix helping me out with device testing.
2 Likes
Have this problem too (only on a few gauges and when disabling them the rest works fine).
I was happy when you report tht the issue is fixed!
But sorry not for me.
- side still stopped loading
- after deleting the cache still nothing happens
- only one of two gauges (progress 1-100%) works
- the second "Leistung" always blocking, as a single one or together with the first (The only "real" difference is perhaps the dots?)
... tested again. Now the "Leistung" works but not together with the "Progress" one. I think this happens randomly. And needs to delete the cache to work (sometimes) at all.
This one with 6 gauges allways worked and still works without any problems
Sorry I can't find any reason or reproducible steps
Does not sound actually as same issue. Tell me more about the platform and/or the way you are using the node-red.
Sure:
IPhone Xs running iOS 13.4.1 running Safari.
All works (fine) on Win 10
chrome:
Edge (I dont use so I dont take care)
firefox:
Even when I erase the fa-bolt same problem
The flow is simple only showing Homie-MQTT values:
Don't know if the flow is usefull (I:m using the homie nodes):
[{"id":"4b1b34b9.ac39ec","type":"homie-convention-device","z":"25cbe481.e10bec","broker":"3840d6b5.4291da","name":"","deviceID":"Brunnenpumpe","nodeID":"Energy","propertyID":"Power","topic":"Brunnenpumpe/Energy/Power","infoAttributes":true,"infoTiming":true,"infoError":true,"addLabel":"none","labelTopic":false,"labelPayload":true,"labelName":"","uiPlaceName":"","uiNode":"none","uiControlDropdown":true,"uiControlMinMax":true,"uiColor1":"#ffffff","uiBgColor1":"#ffffff","uiColorON":"#ffffff","uiColorOFF":"#ffffff","uiColorPredicted":"#ffffff","uiUseColorPredicted":false,"uiColorPredictedOff":"#ffffff","uiUseColorPredictedOff":false,"uiFormat":false,"uiTooltip":"","uiIcon1":"","uiIconON":"","uiIconOFF":"","uiSwitchPredicted":false,"uiSwitchColorPredictedON":"#aaaaaa","uiSwitchColorPredictedOFF":"#aaaaaa","uiSwitchIconPredictedON":"fa-toggle-on","uiSwitchIconPredictedOFF":"fa-toggle-off","uiFormatColor":"homieString","settable":false,"x":215,"y":1564,"wires":[["c682748c.a8b268"],[]]},{"id":"7caf27e8.5ed9e8","type":"homie-convention-device","z":"25cbe481.e10bec","broker":"3840d6b5.4291da","name":"","deviceID":"Brunnenpumpe","nodeID":"Relais","propertyID":"switch","topic":"Brunnenpumpe/Relais/switch","infoAttributes":true,"infoTiming":true,"infoError":true,"addLabel":"custom","labelTopic":true,"labelPayload":false,"labelName":"Wasserwerk","uiPlaceName":"","uiNode":"uiSwitch","uiControlDropdown":true,"uiControlMinMax":true,"uiColor1":"#ffffff","uiBgColor1":"#ffffff","uiColorON":"#ec0000","uiColorOFF":"#ffffff","uiColorPredicted":"#ffffff","uiUseColorPredicted":false,"uiColorPredictedOff":"#ffffff","uiUseColorPredictedOff":false,"uiFormat":false,"uiTooltip":"","uiIcon1":"","uiIconON":"","uiIconOFF":"","uiSwitchPredicted":false,"uiSwitchColorPredictedON":"#aaaaaa","uiSwitchColorPredictedOFF":"#aaaaaa","uiSwitchIconPredictedON":"fa-toggle-on","uiSwitchIconPredictedOFF":"fa-toggle-off","uiFormatColor":"homieString","settable":false,"x":205,"y":1462,"wires":[["1ff7d5be.f2d2ea"],[]]},{"id":"1ff7d5be.f2d2ea","type":"ui_switch","z":"25cbe481.e10bec","name":"Wasserwerk","label":"","tooltip":"","group":"3e7e8988.d303e6","order":6,"width":"2","height":"1","passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":512,"y":1428,"wires":[["7caf27e8.5ed9e8"]]},{"id":"c53046dc.d126e8","type":"ui_dropdown","z":"25cbe481.e10bec","name":"Program","label":"Programm","tooltip":"Select Sprinkler Program","place":"Select program","group":"3e7e8988.d303e6","order":1,"width":"6","height":"1","passthru":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"program","x":502,"y":1173,"wires":[["69ef478b.bbb0e8"]]},{"id":"42184438.6ec6cc","type":"ui_button","z":"25cbe481.e10bec","name":"Start","group":"3e7e8988.d303e6","order":2,"width":"1","height":"1","passthru":false,"label":"","tooltip":"Sprinklerprogramm starten","color":"","bgcolor":"","icon":"play_circle_outline","payload":"start","payloadType":"str","topic":"command","x":492,"y":1224,"wires":[["3a5b23fb.c561ac"]]},{"id":"8bc9d61a.376508","type":"ui_button","z":"25cbe481.e10bec","name":"Stop","group":"3e7e8988.d303e6","order":3,"width":"1","height":"1","passthru":false,"label":"","tooltip":"Sprinklerprogramm stoppen","color":"","bgcolor":"","icon":"stop","payload":"stop","payloadType":"str","topic":"command","x":492,"y":1275,"wires":[["3a5b23fb.c561ac"]]},{"id":"28b58dc3.a040b2","type":"ui_button","z":"25cbe481.e10bec","name":"Pause","group":"3e7e8988.d303e6","order":4,"width":"1","height":"1","passthru":false,"label":"","tooltip":"Sprinklerprogramm starten","color":"","bgcolor":"","icon":"pause_circle_outline","payload":"pause","payloadType":"str","topic":"command","x":492,"y":1326,"wires":[["3a5b23fb.c561ac"]]},{"id":"84c84c4f.e3c3f","type":"ui_button","z":"25cbe481.e10bec","name":"Next","group":"3e7e8988.d303e6","order":5,"width":"1","height":"1","passthru":false,"label":"","tooltip":"Nächster Sprinkler","color":"","bgcolor":"","icon":"skip_next","payload":"next","payloadType":"str","topic":"command","x":492,"y":1377,"wires":[["3a5b23fb.c561ac"]]},{"id":"69ef478b.bbb0e8","type":"homie-convention-device","z":"25cbe481.e10bec","broker":"3840d6b5.4291da","name":"","deviceID":"Node-RED","nodeID":"sprinklerSystem","propertyID":"program","topic":"Node-RED/sprinklerSystem/program","infoAttributes":true,"infoTiming":true,"infoError":true,"addLabel":"none","labelTopic":false,"labelPayload":true,"labelName":"","uiPlaceName":"","uiNode":"uiDropdown","uiControlDropdown":true,"uiControlMinMax":true,"uiColor1":"#ffffff","uiBgColor1":"#ffffff","uiColorON":"#ffffff","uiColorOFF":"#ffffff","uiColorPredicted":"#ffffff","uiUseColorPredicted":false,"uiColorPredictedOff":"#ffffff","uiUseColorPredictedOff":false,"uiFormat":false,"uiTooltip":"","uiIcon1":"","uiIconON":"","uiIconOFF":"","uiSwitchPredicted":false,"uiSwitchColorPredictedON":"#aaaaaa","uiSwitchColorPredictedOFF":"#aaaaaa","uiSwitchIconPredictedON":"fa-toggle-on","uiSwitchIconPredictedOFF":"fa-toggle-off","uiFormatColor":"homieString","settable":false,"x":218,"y":1224,"wires":[["c53046dc.d126e8"],[]]},{"id":"3a5b23fb.c561ac","type":"homie-convention-device","z":"25cbe481.e10bec","broker":"3840d6b5.4291da","name":"","deviceID":"Node-RED","nodeID":"sprinklerSystem","propertyID":"command","topic":"Node-RED/sprinklerSystem/command","infoAttributes":true,"infoTiming":true,"infoError":true,"addLabel":"none","labelTopic":false,"labelPayload":true,"labelName":"","uiPlaceName":"","uiNode":"uiDropdown","uiControlDropdown":true,"uiControlMinMax":true,"uiColor1":"#ffffff","uiBgColor1":"#ffffff","uiColorON":"#ffffff","uiColorOFF":"#ffffff","uiColorPredicted":"#ffffff","uiUseColorPredicted":false,"uiColorPredictedOff":"#ffffff","uiUseColorPredictedOff":false,"uiFormat":false,"uiTooltip":"","uiIcon1":"","uiIconON":"","uiIconOFF":"","uiSwitchPredicted":false,"uiSwitchColorPredictedON":"#aaaaaa","uiSwitchColorPredictedOFF":"#aaaaaa","uiSwitchIconPredictedON":"fa-toggle-on","uiSwitchIconPredictedOFF":"fa-toggle-off","uiFormatColor":"homieString","settable":false,"x":796,"y":1224,"wires":[[],[]]},{"id":"41a23fc4.6cc2c","type":"ui_artlessgauge","z":"25cbe481.e10bec","group":"3e7e8988.d303e6","order":9,"width":0,"height":0,"name":"Progress","icon":"fa-clock-o","label":"Progress","unit":"%","layout":"linear","decimals":"1","differential":false,"minmax":false,"colorTrack":"#555555","colorFromTheme":true,"property":"payload","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":100,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":502,"y":1513,"wires":[]},{"id":"ae37fc26.14e13","type":"homie-convention-device","z":"25cbe481.e10bec","broker":"3840d6b5.4291da","name":"","deviceID":"Node-RED","nodeID":"sprinklerSystem","propertyID":"progress","topic":"Node-RED/sprinklerSystem/progress","infoAttributes":true,"infoTiming":true,"infoError":true,"addLabel":"none","labelTopic":false,"labelPayload":true,"labelName":"","uiPlaceName":"","uiNode":"none","uiControlDropdown":true,"uiControlMinMax":true,"uiColor1":"#ffffff","uiBgColor1":"#ffffff","uiColorON":"#ffffff","uiColorOFF":"#ffffff","uiColorPredicted":"#ffffff","uiUseColorPredicted":false,"uiColorPredictedOff":"#ffffff","uiUseColorPredictedOff":false,"uiFormat":false,"uiTooltip":"","uiIcon1":"","uiIconON":"","uiIconOFF":"","uiSwitchPredicted":false,"uiSwitchColorPredictedON":"#aaaaaa","uiSwitchColorPredictedOFF":"#aaaaaa","uiSwitchIconPredictedON":"fa-toggle-on","uiSwitchIconPredictedOFF":"fa-toggle-off","uiFormatColor":"homieString","settable":false,"x":235,"y":1513,"wires":[["41a23fc4.6cc2c"],[]]},{"id":"c682748c.a8b268","type":"ui_artlessgauge","z":"25cbe481.e10bec","group":"3e7e8988.d303e6","order":9,"width":0,"height":0,"name":"Power","icon":"fa-bolt","label":"Leistung","unit":"Watt","layout":"linear","decimals":"0","differential":false,"minmax":false,"colorTrack":"#555555","colorFromTheme":true,"property":"payload","sectors":[{"val":0,"col":"#82c880","t":"min","dot":0},{"val":500,"col":"#00aa00","t":"sec","dot":4},{"val":700,"col":"#ce0000","t":"sec","dot":4},{"val":800,"col":"#ce0000","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":492,"y":1547,"wires":[]},{"id":"3840d6b5.4291da","type":"homie-convention-broker-config","z":"","mqtt-host":"192.168.2.14","mqtt-port":"1883","usetls":false,"name":"mosquitto@home","homieName":"Node-RED","homieFriendlyName":"Node Red @ home","homieRoot":"homie","storeGlobal":true},{"id":"3e7e8988.d303e6","type":"ui_group","z":"","name":"Bewässerung","tab":"23f4d58e.4acb7a","order":4,"disp":true,"width":"6","collapse":false},{"id":"23f4d58e.4acb7a","type":"ui_tab","z":"","name":"Garten","icon":"fa-leaf","order":1,"disabled":false,"hidden":false}]
v0.1.39 available. Improvements on areas where animations may fail. Can't say if it helps but worth of try.
I can count exactly 9 gauges based on that what you have shown. You may be use some more?
Or do you use also https://flows.nodered.org/node/node-red-contrib-ui-level node somewhere in your project? If so, it also has update you should take in.
If not, I just have no clue why ...
Sorry to say - the update didn`t helped to solve the issue.
And yes, There are ui-level nodes on the same tab:
As I workaround I use ui-level for these two linear gauges, no problem.
And Yes again, The Tab with 7 gauges work with no problem.
Could it be that a msg.payload=0 on the problematic tab cause the problem? Power is most of the time 0? Only an Idea.
Now I have too many confusing inputs that I cant make any sense of it.
Cant understand what is not working and with what equipment. From last image I can guess it is from desktop and I see that those gauges work well.
Gauge with label "Leistung" is showing 0 watt, from your flow I saw that it is configured to show integer values, min value is 0 and that 0 is perfectly shown. (if the input for that moment was 0 of course.)
So this setup works?? (on desktop, browser unknown)
What exactly is not working?
Tried it again, no change, it is slow on preparing the animations, if you check the rail-profiler in chrome, it gives warnings on the task durations.
Looking at the js library, isn't it a bit heavy for displaying 2 types of graphs ? On code-pen I found a light js version, same functionality.
Sorry to be unclear. The screenshot of my last message showing the complete tab on a desktop browser (chrome).
When I use ui-level it looks like this on safari on iOS (iPhone Xs) All fine:
But when I use artless-gauge it works fine on chrome/win 10:
But donât finish loading with a permanent X button (right from the url) or stops loading (with an reload button) on iOS:
or even crash safari on iOS after around 10sec (back to home screen). As the same could happen when you re-open safari you have not much time to close the "problematic" tab.
I can use ui-level, no problem - but artless-gauge looks so much nicer 
Thank you. Now it is clear. I'll investigate, but certainly takes time.
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
