Positioning text/icons on dashboard

[Ian Eagland]

Hi

With help from the forum I gave learnt how to display icons using the text node on a dashboard. I would now like to control exactly where these icons appear.

I assume I must use the template node. I have googled and experimented but have got lost. Can any one point me to an example flow that uses positioning html.

Regards

Ian

[Colin Law]

Can you not get what you want just by setting the sizes and ordering
of the elements and inserting fillers if necessary to provide blank
space?

Colin

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups
> "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to node-red+u...@googlegroups.com.
> To post to this group, send email to node...@googlegroups.com.
> Visit this group at https://groups.google.com/group/node-red.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/node-red/da11c58c-f2af-45bf-94b0-33dbd47a6dd8%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Ian Eagland]

Hi

All my attempts at that have failed, I think because there is also a gauge on the dashboard. I was hoping there would be a way of positioning the text/icon at a specific absolute or relative screen position.

[Colin Law]

Describe *exactly* what you are trying to do, maybe a sketch would be
a good idea.

Colin

On 26 January 2017 at 19:18, Ian Eagland <ianea...@gmail.com> wrote:
> Hi
>
> All my attempts at that have failed, I think because there is also a gauge on the dashboard. I was hoping there would be a way of positioning the text/icon at a specific absolute or relative screen position.
>

> --
> http://nodered.org
>
> Join us on Slack to continue the conversation: http://nodered.org/slack
> ---
> You received this message because you are subscribed to the Google Groups "Node-RED" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

> To post to this group, send an email to node...@googlegroups.com.

> Visit this group at https://groups.google.com/group/node-red.

> To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/e2dd6e51-4945-4f50-a2c7-9f2a0caa5a5f%40googlegroups.com.

[steve rickus]

Well, any html element can be positioned within the page using CSS styling such as:

<div style='position: fixed; left: 100px; top: 50px; z-index: 100;'>
...your text/icon here...
</div>

Have you tried any of those?

N.B. removing an element from the page flow like that will likely upset the rest of the dashboard layout -- and probably the developers as well ;*)

--

Steve

[Ian Eagland]

Thanks Steve

That has pointed me in the right direction. If I use:-

<div style='position: fixed; left: 800px; top: 200px; z-index: 100;'>

<p>The number is</p>

</div>

This displays  "The number is" in the position I want the icon.

For the moment I cannot find out how to display the msg.payload where "The number is".

I have tried {{msg.payload}} In just about every combination I can think of but nothing appears!

Is there a simple way to get the msg.payload to display?

[steve rickus]

Try using something like this in the ui_template node:

<div style="position: fixed; left 500px; top: 600px;">
    <p ng-bind-html="msg.payload"></p>
</div>

Or you can just bind the payload value to the div element directly, if that's all you are trying to show in that element.

But if you wanted to put the payload value into something like the value of a button, you would have to use the other syntax:

<div style="position: fixed; left 800px; top: 200px;">

    <button value="{{msg.payload}}" ng-bind-html="msg.payload"></button>
</div>

I'm pretty sure there are a few other angular binding tricks that I've seen on this mailing list, too. Happy searching!

[Ian Eagland]

Many thanks.

The fog is clearing and I am making progress.

I have also learnt it does upset the rest of the dashboard layout!

However I have achieved what I wanted on one dashboard on one device.

I look forward to the day that the dashboard elements have positional control.

Regards

Ian

 

On Thursday, 26 January 2017 17:18:59 UTC, Ian Eagland wrote:

[Dave C-J]

Ian,

without a better idea of what you are trying to achieve it'll be hard to help you - other than to fix the positions permanently like you have.

Can you give us a screenshot segment of the before and after so we possibly help ?

[steve rickus]

Ha, a bit of Deja Vu there -- i remember people pining for positional control when HTML was first being developed for the WWW.

I have a feeling you are fighting an uphill battle there. For myself, I would prefer more dev effort on fluid/flexible UI page layouts that don't require loads of CSS tricks to position elements where you need them. Things like node-red-dashboard and material-design have come a long way in codifying the common use cases, and giving the end-users intuitive and consistent look-and-feel, which should only get better with time.

[Ian Eagland]

Hi

I am trying to position icons for when using the dashboard on phones as the screens are so small. I have already discovered the problem of using absolute positioning which I now know does not work. Different results on different phones.

This is what I get using dashboard text nodes:-

I achieved that with this flow:-

[{"id":"ea6778ed.ef0bc8","type":"ui_gauge","z":"f5f9407b.cddaf","name":"","group":"de838777.ef0258","order":0,"width":"0","height":"0","gtype":"donut","title":"","label":"","format":"{{value | number:2}}","min":"-5","max":"30","colors":["#54ffff","#ff7530","#ca3838"],"x":590,"y":120,"wires":[]},{"id":"fd2f1e53.9e935","type":"trigger","z":"f5f9407b.cddaf","op1":"OK","op2":"H B Fail","op1type":"str","op2type":"str","duration":"2","extend":true,"units":"min","reset":"","name":"","x":390,"y":300,"wires":[["8b93ba4b.ba30d8"]]},{"id":"24aa95c9.918faa","type":"function","z":"f5f9407b.cddaf","name":"Translate msg","func":"var msg2 = { payload:\"DC\" };\nif ((msg.payload)==(\"16on\"))\n{\n    msg.payload = \"<i class=\\\"fa fa-circle fa-2x nr-dashboard-ok\\\"></i>\" ;\n   return [msg, msg2];\n   }\n   else\n   if ((msg.payload)==(\"16off\"))\n{\n   msg.payload = \"<i class=\\\"fa fa-circle fa-2x nr-dashboard-error\\\"></i>\" ;\n\n    return [msg, msg2];\n   }\n","outputs":"2","noerr":0,"x":620,"y":220,"wires":[["6ca0ae04.0b1ce"],[]]},{"id":"8b93ba4b.ba30d8","type":"function","z":"f5f9407b.cddaf","name":"Translate msg","func":"var msg2 = { payload:\"HB\" };\nif ((msg.payload)==(\"OK\"))\n{\n    msg.payload = \"<i class=\\\"fa fa-thumbs-up fa-2x nr-dashboard-ok\\\"></i>\" ;\n    return [msg, msg2];\n  \n  \n   }\n   else\n   {\n     msg.payload = \"<i class=\\\"fa fa-thumbs-down fa-2x nr-dashboard-error\\\"></i>\" ;\n return [msg, msg2];\n   }\n","outputs":"2","noerr":0,"x":640,"y":300,"wires":[["ad247b32.566298"],[]]},{"id":"22729433.95a5ec","type":"inject","z":"f5f9407b.cddaf","name":"","topic":"","payload":"OK","payloadType":"str","repeat":"26","crontab":"","once":false,"x":210,"y":300,"wires":[["fd2f1e53.9e935"]]},{"id":"d6304159.c09a4","type":"inject","z":"f5f9407b.cddaf","name":"","topic":"","payload":"16on","payloadType":"str","repeat":"","crontab":"","once":false,"x":210,"y":220,"wires":[["24aa95c9.918faa"]]},{"id":"ee6c236f.c4d5e","type":"inject","z":"f5f9407b.cddaf","name":"","topic":"","payload":"8","payloadType":"num","repeat":"","crontab":"","once":true,"x":190,"y":120,"wires":[["ea6778ed.ef0bc8"]]},{"id":"6ca0ae04.0b1ce","type":"ui_text","z":"f5f9407b.cddaf","group":"de838777.ef0258","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"col-center","x":890,"y":200,"wires":[]},{"id":"ad247b32.566298","type":"ui_text","z":"f5f9407b.cddaf","group":"de838777.ef0258","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"col-center","x":900,"y":300,"wires":[]},{"id":"de838777.ef0258","type":"ui_group","z":"","name":" ","tab":"6e3be070.6273f","disp":true,"width":"6"},{"id":"6e3be070.6273f","type":"ui_tab","z":"","name":"Test2","icon":"dashboard"}]

What I would like to see on the phone is something like this:-

I achieved that with this flow but while it works on the PC it does not produce the same result on a phone :-

[{"id":"7d2d057.b09eefc","type":"ui_gauge","z":"d0773c63.d4c7f","name":"","group":"3783f3d7.c8f38c","order":0,"width":"0","height":"0","gtype":"donut","title":"","label":"","format":"{{value | number:2}}","min":"-5","max":"30","colors":["#54ffff","#ff7530","#ca3838"],"x":510,"y":320,"wires":[]},{"id":"bde52cde.111c6","type":"trigger","z":"d0773c63.d4c7f","op1":"OK","op2":"H B Fail","op1type":"str","op2type":"str","duration":"2","extend":true,"units":"min","reset":"","name":"","x":310,"y":500,"wires":[["1a9c7148.63545f"]]},{"id":"ff85f115.ad9a4","type":"function","z":"d0773c63.d4c7f","name":"Translate msg","func":"var msg2 = { payload:\"DC\" };\nif ((msg.payload)==(\"16on\"))\n{\n    msg.payload = \"<i class=\\\"fa fa-circle fa-2x nr-dashboard-ok\\\"></i>\" ;\n   return [msg, msg2];\n   }\n   else\n   if ((msg.payload)==(\"16off\"))\n{\n   msg.payload = \"<i class=\\\"fa fa-circle fa-2x nr-dashboard-error\\\"></i>\" ;\n\n    return [msg, msg2];\n   }\n","outputs":"2","noerr":0,"x":540,"y":420,"wires":[["de26d72d.e2c508"],["c897e6ef.817648"]]},{"id":"1a9c7148.63545f","type":"function","z":"d0773c63.d4c7f","name":"","func":"var msg2 = { payload:\"HB\" };\nif ((msg.payload)==(\"OK\"))\n{\n    msg.payload = \"<i class=\\\"fa fa-thumbs-up fa-2x nr-dashboard-ok\\\"></i>\" ;\n    return [msg, msg2];\n  \n  \n   }\n   else\n   {\n     msg.payload = \"<i class=\\\"fa fa-thumbs-down fa-2x nr-dashboard-error\\\"></i>\" ;\n return [msg, msg2];\n   }\n","outputs":"2","noerr":0,"x":530,"y":500,"wires":[["3194a4cc.2ea9cc"],["d16bc8ec.497768"]]},{"id":"de26d72d.e2c508","type":"ui_template","z":"d0773c63.d4c7f","group":"3783f3d7.c8f38c","name":"","order":0,"width":0,"height":0,"format":"<div style=\"position: fixed; left 900px; top: 120px;\">\n    <p ng-bind-html=\"msg.payload\"></p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":800,"y":400,"wires":[[]]},{"id":"3194a4cc.2ea9cc","type":"ui_template","z":"d0773c63.d4c7f","group":"3783f3d7.c8f38c","name":"","order":0,"width":0,"height":0,"format":"<div style=\"position: fixed; left 900px; top: 180px;\">\n    <p ng-bind-html=\"msg.payload\"></p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":800,"y":480,"wires":[[]]},{"id":"c897e6ef.817648","type":"ui_template","z":"d0773c63.d4c7f","group":"3783f3d7.c8f38c","name":"","order":0,"width":0,"height":0,"format":"<div style=\"position: fixed; left 900px; top: 100px;\">\n    <p ng-bind-html=\"msg.payload\"></p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":800,"y":440,"wires":[[]]},{"id":"d16bc8ec.497768","type":"ui_template","z":"d0773c63.d4c7f","group":"3783f3d7.c8f38c","name":"","order":0,"width":0,"height":0,"format":"<div style=\"position: fixed; left 900px; top: 160px;\">\n    <p ng-bind-html=\"msg.payload\"></p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":800,"y":520,"wires":[[]]},{"id":"b9d55965.ef1778","type":"inject","z":"d0773c63.d4c7f","name":"","topic":"","payload":"OK","payloadType":"str","repeat":"26","crontab":"","once":false,"x":130,"y":500,"wires":[["bde52cde.111c6"]]},{"id":"2d24b000.96758","type":"inject","z":"d0773c63.d4c7f","name":"","topic":"","payload":"16on","payloadType":"str","repeat":"","crontab":"","once":false,"x":130,"y":420,"wires":[["ff85f115.ad9a4"]]},{"id":"97432a7a.19ed28","type":"inject","z":"d0773c63.d4c7f","name":"","topic":"","payload":"8.5","payloadType":"num","repeat":"","crontab":"","once":true,"x":110,"y":320,"wires":[["7d2d057.b09eefc"]]},{"id":"3783f3d7.c8f38c","type":"ui_group","z":"","name":" ","tab":"92840fb0.05067","disp":true,"width":"6"},{"id":"92840fb0.05067","type":"ui_tab","z":"","name":"Test1","icon":"dashboard"}]

On Thursday, 26 January 2017 17:18:59 UTC, Ian Eagland wrote:

[Dave C-J]

So the default group width is 6 units... So why not try...

Set your text widgets to size 1x1, and the gauge to 5x5. Then arrange them in the order text,gauge, text. As we fill left to right, then down. 

sent from phone

[Cor Bosman]

I can sort of see the OPs wish, as I think the gauges leave a lot of white space. Perfect for an icon or something. I wanted to put a weather icon there but because I dont like absolutely positioned icons I opted to solve it differently. Still, I would have loved to just put an icon in the white space around the gauge.

[Cor Bosman]

Actually, looking at the gauge. What if you didnt fill in the title, the gauge would actually move up leaving minimal white space at the top. Then you can add your own row above it with icons and a title without leaving so much white space.

[Ian Eagland]

Thanks to Dave C-J

I had not realised you could reorder in the dashboard groups (Doh!). I think I had tried every possible combination of widget sizes without success.

Using his suggestion I can get a maximum of three icons down the left hand side.

Like Cor I would like to be able to use the white space or minimise white space. Don't get me wrong, I think the dashboard and node red are brilliant. Its just that on a phone the space is so restricted and I am guessing that in the future if not already most user interaction will be phones. 

On Thursday, 26 January 2017 17:18:59 UTC, Ian Eagland wrote:

[Dave C-J]

Those were just examples. You can make the gauge smaller if you wish. I think 2x2 is about the smallest I would go to in reality. If you went 4x4 you could put 1x1 widgets down either side etc... 

And phone screens keep getting bigger ;-)

[Cor Bosman]

But wouldnt it be possible to remove all the whitespace on top if you dont provide a title?  Look at the difference. I dont see a way to do this in css unfortunately.

[Dave C-J]

Aha. That is a different thought. Makes sense. Please raise an issue so we don't forget.

[Bart Butenaers]

Hi guys,

I want to build a dashboard similar to this example:

I have no clue at all how to accomplish this kind of layouting:

• Do I have to create a series of template nodes, each with a fixed hardcoded position (like in Steve's answer) somehow?
• This is a rather old post, so perhaps this is now possible via the dashboard config screens somehow?
• Others ....

Thanks !!!

Bart Butenaers

[Nick O'Leary]

Hi Bart,

Just a case of setting the various widget sizes correctly so the layout generates that result.

Create a single Group - with its size set to 6 units wide.

Then, the widgets are added to the group in the following order (you can use the dashboard sidebar to reorder the widgets in a group:

- ui_template - the sun icon - set to 2x2 size

- ui_text (rain prop) set to 2x1

- ui_text (rain) set to 2x1

- ui_text (humidity) set to 2x1
- ui_text (pressure) set to 2x1
- ui_chart set to 6x4

Nick

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.

Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/985d6e39-7320-4664-8dbe-1a5903fbdc78%40googlegroups.com.

[Bart Butenaers]

Hi Nick,

Thanks !!!! Your screenshot looks exactly like what I want to achieve.

Could you please share your flow, because I cannot produce the same result...

This is what I have done:

• Add a new group to some tab in the dashboard tree:

• Set the group width to 6 units:

• Create a series of dashboard widgets (ui_template, ui_text and ui_graph), with the sizes you have specified:

 

 

[{"id":"879e2ae6.60d268","type":"ui_text","z":"bfc6829d.e238f","group":"f1d07146.d7f86","order":0,"width":"2","height":"1","name":"","label":"Rain prob","format":"{{msg.payload}}","layout":"col-center","x":600,"y":300,"wires":[]},{"id":"8d74e9a4.3b13a8","type":"ui_template","z":"bfc6829d.e238f","group":"f1d07146.d7f86","name":"Whether icon","order":0,"width":"2","height":"2","format":"<p style=\"font-size:48px\"> <i class=\"wi wi-owm-01d\"></i> </p>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610,"y":260,"wires":[[]]},{"id":"482c14ee.452d4c","type":"ui_text","z":"bfc6829d.e238f","group":"f1d07146.d7f86","order":0,"width":"2","height":"1","name":"","label":"Rain","format":"{{msg.payload}}","layout":"col-center","x":590,"y":340,"wires":[]},{"id":"aac5597b.ca9368","type":"ui_text","z":"bfc6829d.e238f","group":"f1d07146.d7f86","order":0,"width":"2","height":"1","name":"","label":"Humidity","format":"{{msg.payload}}","layout":"col-center","x":600,"y":380,"wires":[]},{"id":"abdd408c.b0acb","type":"ui_text","z":"bfc6829d.e238f","group":"f1d07146.d7f86","order":0,"width":"2","height":"1","name":"","label":"Pressure","format":"{{msg.payload}}","layout":"col-center","x":600,"y":420,"wires":[]},{"id":"944fcce2.3ebb8","type":"ui_chart","z":"bfc6829d.e238f","name":"Last 24 hours temp","group":"f1d07146.d7f86","order":0,"width":"6","height":"4","label":"Last 24 hours temp","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":630,"y":460,"wires":[[],[]]},{"id":"f1d07146.d7f86","type":"ui_group","z":"","name":"Wheather","tab":"f136a522.adc2a8","order":2,"disp":true,"width":"6","collapse":false},{"id":"f136a522.adc2a8","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

• But my dashboard looks like this (wrong order and no margins between the widgets):
  

 

Kind regards,

Bart

[Nick O'Leary]

Hi Bart,

Sorry, I discarded the flow once I got the screenshot.

A couple tips:

I see you have the widgets in the right order in the sidebar. Try reordering them to some other sequence, then put them back in the expected order. That should nudge their 'order' properties to be correct - in your exported flow they all have an order of 0.

The border etc was achieved by simply setting the dashboard to a custom theme and changing the group background colour. You can also tweak the sizes used, but I didn't for my example.

Hope that helps,

Nick

--

http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/bf0031e5-c7b9-46de-af76-175df00a91a4%40googlegroups.com.

[Bart Butenaers]

Hi Nick,

I have reordered the widgets in the sidebar, and afterwards ordered them again in the original sequence.

Then indeed the 'order' numbers in the export will nicely increment (1 to 6) and it looks fine now:

Didn't realize that a custom layout can be realized so easily with the Node-Red dashboard, withouth having to start coding.

Must admit that I'm still impressed by the power of Node-Red ...

Thanks for the very quick support !!!

Bart