Cancel
Showing results for 
Search instead for 
Did you mean: 

VFC: creating "loading...." sign for startuo of application

Experimenter
Experimenter

If you build a VFC flow with some charts and gauges displaying some tie series data,

then you will have some "dead time" after startup until you will see the first data.

My idea was to setup some kind of "loading...." sign which shoud disapear after the first data received.

Any suggestions?

I thought I could just take a text label, but I was not able so far to change the label on runtime.

3 REPLIES 3

Re: VFC: creating "loading...." sign for startuo of application

Experimenter
Experimenter

You can play with template:

 

[{"id":"805bd946.232788","type":"ui_chart","z":"8a62177.455f6e8","name":"","group":"94b4a2dc.957c1","order":0,"width":0,"singleBrowser":false,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":790,"y":340,"wires":[[]],"_type":"node"},{"id":"836a5a4f.09a368","type":"generate","z":"8a62177.455f6e8","name":"","from":"","datetimepickerFrom":"","to":"","datetimepickerTo":"","parameterout":"parameter","period":"10","mode":"relative","basisUnit":"minute","framesPerBasisUnit":"10","numberOfDecimalPlaces":"3","signals":"[{\"signal\":\"sine\",\"amplitude\":1,\"frequency\":1,\"phase\":0,\"offset\":0,\"start\":0,\"stop\":1,\"excludeStart\":false,\"excludeStop\":false}]","signal":"","amplitude":"","frequency":"","phase":"","offset":"","start":"","stop":"","formula":"+","x":620,"y":340,"wires":[["805bd946.232788"]]},{"id":"556ef2a0.c5c87c","type":"ui_ui_control","z":"8a62177.455f6e8","name":"","x":280,"y":340,"wires":[["9b8e49e8.ccde78","94cbface.3673d8"]]},{"id":"9b8e49e8.ccde78","type":"delay","z":"8a62177.455f6e8","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":440,"y":340,"wires":[["836a5a4f.09a368"]]},{"id":"94cbface.3673d8","type":"ui_template","z":"8a62177.455f6e8","group":"94b4a2dc.957c1","name":"","order":0,"width":0,"singleBrowser":false,"height":0,"format":"<style>\n    .nr-dashboard-chart: {\n        position: relative;\n    }\n    .waiting {\n      display: inline-block;\n      width: 64px;\n      height: 64px;\n      position: absolute;\n      top: 50%;\n      left: calc(50% - 32px);\n    }\n    .waiting:after {\n      content: \" \";\n      display: block;\n      width: 46px;\n      height: 46px;\n      margin: 1px;\n      border-radius: 50%;\n      border: 5px solid #eee;\n      border-color: #eee transparent #eee transparent;\n      animation: waiting 1.2s linear infinite;\n    }\n    @keyframes waiting {\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n</style>\n<script>\n    function checkLoading() {\n        window._checkLoadingInited = true;\n        \n        let found = !$('.chart').length;\n        let charts = $('.chart');\n        charts.each(a => {\n            let $waiting = $(charts[a]).parent().find('.waiting');\n            if (charts[a].style.display !== 'block') {\n                !$waiting.length && $(charts[a]).parent().prepend('<div class=\"waiting\"></div>');\n                found = true;\n            } else {\n                $waiting.length && $waiting.remove();\n            }\n        });\n        \n        found && setTimeout(checkLoading, 1000);\n    }\n    \n    !window._checkLoadingInited && checkLoading();\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":444.60003662109375,"y":413.20001220703125,"wires":[[]],"_type":"node"},{"id":"94b4a2dc.957c1","type":"ui_group","z":"","name":"Default","tab":"7eb10133.d0882","disp":true,"width":"6","collapse":false,"_type":"config"},{"id":"7eb10133.d0882","type":"ui_tab","z":"","name":"Home","icon":"dashboard","_type":"config"}]

2019-03-29 11_34_02-VFC Dashboard.png

Re: VFC: creating "loading...." sign for startuo of application

Experimenter
Experimenter

Hey Marc, I've also run into the issues with the "dead time". I put together some nodes that should automatically load data when a new session connects to the dashboard:


[ { "id": "f54543eb.6c30d", "type": "tab", "label": "socketManagement", "disabled": false, "info": "" }, { "id": "2d8331b9.be1d8e", "type": "function", "z": "f54543eb.6c30d", "name": "socketManagement", "func": "var socketIDs = flow.get('socketIDs')||[];\n\nvar reload = true;\nvar i;\nfor (i = 0; i < socketIDs.length; i++) \n{ \n if (socketIDs[i]['socketid'] === msg.socketid)\n {\n reload = false;\n }\n}\nif (reload === true)\n{\n var dict = {\"socketid\":msg.socketid,\"time\"Smiley Very Happyate.now()};\n socketIDs.push(dict);\n console.warn(socketIDs);\n flow.set('socketIDs',socketIDs);\n return msg;\n}", "outputs": 1, "noerr": 0, "x": 290, "y": 40, "wires": [ [] ] }, { "id": "3cde327.e5f3fce", "type": "function", "z": "f54543eb.6c30d", "name": "socketCleanser", "func": "var socketIDs = flow.get('socketIDs')||[];\n\nvar i;\nfor (i = 0; i < socketIDs.length; i++) \n{ \n if ((socketIDs[i]['time'] + 86400000) > Date.now())\n {\n socketIDs.splice(i,1)\n }\n //socketIDs.splice(i,1)\n}\nflow.set('socketIDs',socketIDs);", "outputs": 1, "noerr": 0, "x": 300, "y": 100, "wires": [ [] ], "_type": "node" }, { "id": "b9b26730.3f92b8", "type": "inject", "z": "f54543eb.6c30d", "name": "", "topic": "", "payload": "", "payloadType": "date", "repeat": "3600", "crontab": "", "once": false, "properties": "", "timezone": "utc", "betweentimesunit": "m", "x": 130, "y": 100, "wires": [ [ "3cde327.e5f3fce" ] ] }, { "id": "672f91bb.3961b", "type": "ui_ui_control", "z": "f54543eb.6c30d", "name": "", "x": 100, "y": 40, "wires": [ [ "2d8331b9.be1d8e" ] ] } ]

The UI control node triggers whenever someone changes tabs or initially loads the dashboard. A unique session ID gets passed to the socketManagement function, and if that sessionID doesn't exist yet, a msg gets passed through socketManagement. This is where you will need to attach read timeseries nodes for all your variables.

The other 2 nodes are used to clean up the session IDs that are 24 hours old, it runs once an hour. I've also attached a screenshot of how we're using it

Re: VFC: creating "loading...." sign for startuo of application

Experimenter
Experimenter
That is great. Thank You.