Just asking.
I need an icon to use that will indicate a machine has booted.
Well, you can maybe stack some icons but hardly they talk exactly "has booted"
1 Like
Argh!
I am going in circles trying to get this working and I don't know why.
So, taking on your suggestion - mostly - I am trying to get it working and am just not getting it to work.
This is the flow:
Top one works, bottom one doesn't.
[{"id":"a815de11.c69078","type":"inject","z":"8bb4de19.f72c88","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":2030,"y":130,"wires":[["d87c51d5.942928"]]},{"id":"d87c51d5.942928","type":"function","z":"8bb4de19.f72c88","name":"","func":"\nmsg = {payload:'<span class=\"fa-stack\"><i class=\"fa fa-camera fa-stack-1x\"></i><i class=\"fa fa-ban fa-stack-2x\"></i></span>'};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2200,"y":130,"wires":[["77176ec.ced2a1","1401c110.a4807f"]]},{"id":"77176ec.ced2a1","type":"ui_button","z":"8bb4de19.f72c88","name":"","group":"53792891.774238","order":16,"width":"2","height":"2","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":2370,"y":130,"wires":[[]]},{"id":"1401c110.a4807f","type":"debug","z":"8bb4de19.f72c88","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":2390,"y":170,"wires":[]},{"id":"e090497.a72cb38","type":"function","z":"8bb4de19.f72c88","name":"","func":"msg = {payload:'<span class=\"fa-stack\"><i class=\"fa-rotate-right fa-stack-1x\"></i><i class=\"fa-check fa-stack-2x\"></i></span>'};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2200,"y":170,"wires":[["77176ec.ced2a1","1401c110.a4807f"]]},{"id":"41708a40.d08c1c","type":"inject","z":"8bb4de19.f72c88","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":2030,"y":170,"wires":[["e090497.a72cb38"]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]
I'm suspicious it is the rotate-right.
I'll try it now actually.
All I get/see is 8 when I try the one I am trying to construct.
I really don't like asking for help on such silly/petty things, but it seems something is conspiring to make my life difficult.
BTW, they were Font Awesome icons? I can't resolve the loop arrow in the last one.
I get the check.
Oh, just for clarity, this is a comparison of the two lines:
<span class="fa-stack"><i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x"></i></span>
<span class="fa-stack"><i class="fa-rotate-right fa-stack-1x"></i><i class="fa-check fa-stack-2x"></i></span>
I'll share just when I reach the computer.
1 Like
(Oh, I am stupid!)
I forgot/missed the leading fa on the icon names.
But the sizes are still not correct.
One is normal size and one is either large or x2. Not sure which.
msg = {payload:'<span class="fa-stack"><i class="fa fa-rotate-right fa-stack-1x"></i><i class="fa fa-check fa-stack-2x"></i></span>'};
return msg;
Ah! More stuff discovered. (Again: silly me)
The stack-2x isn't the position on/in the stack, but the size also!
So, got most of it working, but the check seems to be at/in the wrong place - maybe because the rotate right is 2x size.
So how do I move the check a bit to the right so it is centred as it is/was with your post?
Where do you try to display it? Button? Share the bit of flow maybe...
.. I have already discarded the things I made ...
[{"id":"1abc5373.b82a0d","type":"inject","z":"8bb4de19.f72c88","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":2030,"y":260,"wires":[["d27db351.d2b8c"]]},{"id":"d27db351.d2b8c","type":"function","z":"8bb4de19.f72c88","name":"","func":"\nmsg = {payload:'<span class=\"fa-stack\"><i class=\"fa fa-rotate-right fa-stack-2x\"></i><i class=\"fa fa-cogs fa-stack-1x\"></i></span>'};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2200,"y":260,"wires":[["32b9e074.2b8f2","77176ec.ced2a1"]]},{"id":"77176ec.ced2a1","type":"ui_button","z":"8bb4de19.f72c88","name":"","group":"53792891.774238","order":16,"width":"1","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":2500,"y":220,"wires":[[]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]
(I'm thinking of using other symbols/icons now) No offence. Just in playing with them, my mine is seeing things differently and I .......
Anyway.... How do I make the two icons with the same centre so they are better done.
The button forces some styles so the stacking goes wrong. But there is ways to get things done as always ...
[{"id":"1abc5373.b82a0d","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":370,"y":1180,"wires":[["d27db351.d2b8c"]]},{"id":"d27db351.d2b8c","type":"function","z":"7ee51301.a9185c","name":"","func":"\nmsg = {payload:'<span class=\"fa-stack\"><i class=\"fa fa-repeat fa-rotate-180 fa-stack-2x centerStackedIcon\"></i><i class=\"fa fa-check fa-stack-1x centerStackedIcon\"></i></span>'};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":1180,"wires":[["77176ec.ced2a1"]]},{"id":"77176ec.ced2a1","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"53792891.774238","order":16,"width":"1","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":840,"y":1140,"wires":[[]]},{"id":"dbc8a476.1095c8","type":"ui_template","z":"7ee51301.a9185c","group":"53792891.774238","name":"add class frome here to your dashboard styles","order":1,"width":0,"height":0,"format":"<style>\n .centerStackedIcon {\n vertical-align: middle;\n width: 100% !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":640,"y":1060,"wires":[[]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]
1 Like
You are the best.
Those commands are still way out of my scope of knowledge. Though once I have seen them, they seem ..... obvious. (shrug)
To further make my own life complicated, as I am stacking icons on top of each other, I'm guessing the style: color="green" won't work either.
I'm just seeing the stock colour and want to set different colours to different icons.
I think the inline styles are somehow eaten on deploy, no matter you add, it will not added. But classes work. So make class with color for text and add to desired icon
[{"id":"1abc5373.b82a0d","type":"inject","z":"7ee51301.a9185c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":370,"y":1180,"wires":[["d27db351.d2b8c"]]},{"id":"d27db351.d2b8c","type":"function","z":"7ee51301.a9185c","name":"","func":"\nmsg = {payload:'<span class=\"fa-stack\"><i class=\"fa fa-repeat fa-rotate-180 fa-stack-2x centerStackedIcon\"></i><i class=\"fa fa-check fa-stack-1x centerStackedIcon greenText\"></i></span>'};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":1180,"wires":[["77176ec.ced2a1"]]},{"id":"77176ec.ced2a1","type":"ui_button","z":"7ee51301.a9185c","name":"","group":"53792891.774238","order":16,"width":"1","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":840,"y":1140,"wires":[[]]},{"id":"dbc8a476.1095c8","type":"ui_template","z":"7ee51301.a9185c","group":"53792891.774238","name":"add class frome here to your dashboard styles","order":1,"width":0,"height":0,"format":"<style>\n .centerStackedIcon {\n vertical-align: middle;\n width: 100% !important;\n }\n .greenText{\n color:#00ff00;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":640,"y":1060,"wires":[[]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]
1 Like
Ok, I kinda shot myself in the foot there.
The colour was an example. I want it to be able to be sent in the message so I can have one of the icons (stacked) one colour and the second icon another colour to help it be more understandable rather than just two white icons stuck on top of each other.
SORRY!
Ok, got it.
With you now.
Shall scurry off and see what mess I can make. I think you have given me enough to get done what I want.
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
