Font awesom icons - stuck. (Stacking)

Trying_to_learn · 10 June 2024 09:16

Looked here first:

Used the bottom one with the camera.

This is what I had and it works.

msg.payload = '<font color = yellow ><i class="fa fa-signing fa-flip-horizontal fa-2x"></i></font>';

This doesn't

msg.payload = '<font color = yellow > <span class="fa-stack"> <i class="fa fa-ban fa-2x fa-stack-1x"></i> <i class="fa-signing fa-2x fa-stack-2x"></i></span></font>';

Yes, I've removed the flip-horizontal.
Trying to find which part is making it not work.

I would also like to make the ban red.... But for now... I am not remembering things as well as i would like.

Where's the illusive elephant?

TotallyInformation · 10 June 2024 09:24

Not sure about your main question. But I can say that use of  is not recommended. Simply add style="color:yellow" to the  tag. That should fix your colour problem.

Trying_to_learn · 10 June 2024 09:26

I'm guessing it is old code that I learnt way back when I first started.

And double checking, that link I posted doesn't have it either.

This is what the line has become ITMT - though I don't know it is nice to post it in light of what you said.
(Of course it still doesn't work)
msg.payload = ' ';

I'll give what you said a try and report back.

Trying_to_learn · 10 June 2024 09:32

With this line:

msg.payload = '<span class="fa-stack"><i style="color:yellow" class="fa-signing fa-2x fa-stack-1x"></i> <i class="fa fa-ban fa-2x fa-stack-2x" style="color:Tomato"></i> </i></span></font>';

I get (picture)

Screenshot from 2024-06-10 19-29-26

So I'm guessing somewhere I have a lot of CSS stuff working.

But if I do all the styling in the line, that is LOCAL to that ..... button node.
(Alas the text node doesn't allow background colour setting.)

Taking a step back:
The ban is working.
The signning isn't.

but in the alternate line:
msg.payload = '';

works.

To maybe give a bigger picture here is the code and the button node:

[{"id":"832865263b1462a2","type":"function","z":"235f16ee6e459f2c","name":"Week check","func":"const timestamp = msg.payload\nconst weekno = Math.floor((timestamp + 345_600_000) / 604_800_000)\nconst result_ = Number(weekno) % 2\nif (result_ == 0) {\n    msg.payload = '<font color = yellow ><i class=\"fa fa-signing fa-flip-horizontal fa-2x\"></i></font>';\n    msg.flag = \"Wash\";\n    return msg;\n}\nelse\n{\n//    msg.payload = ' ';\n    msg.payload = '<span class=\"fa-stack\"><i style=\"color:yellow\" class=\"fa-signing fa-2x fa-stack-1x\"></i> <i class=\"fa fa-ban fa-2x fa-stack-2x\" style=\"color:Tomato\"></i> </i></span></font>';\n    msg.flag = \" \";\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1420,"y":4700,"wires":[["4e26090847259a9b","63e667ec355471b7"]]},{"id":"63e667ec355471b7","type":"ui_button","z":"235f16ee6e459f2c","name":"","group":"a71318e04a2701e3","order":14,"width":"1","height":"1","passthru":false,"label":"{{msg.payload}}","tooltip":"","color":"","bgcolor":"#333333","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":1580,"y":4700,"wires":[[]]},{"id":"a71318e04a2701e3","type":"ui_group","name":"Special days","tab":"94541d8e64761d52","order":5,"disp":true,"width":"6","collapse":true,"className":""},{"id":"94541d8e64761d52","type":"ui_tab","name":"Messages","icon":"volume-up","order":13,"disabled":false,"hidden":false}]

TotallyInformation · 10 June 2024 09:40

fa-signing - seems to be an invalid entry. So that is probably the problem. You will want to make sure that it is part of the Fontawesome v4 library and not a later version.

Trying_to_learn · 10 June 2024 09:43

Ok, thanks.

But...
(sorry)

(Stupid question)

I'm not making spelling mistake with the name?

But if the result is the opposite, and the other line is true:
I get the icon.

Which is confusing to me.

EDIT!

I'm missing the first fa !!??

Should be fa fa-signing......

I had only fa signing.....

Please check.

OH, but!

Colours not working.

function node complete code:

const timestamp = msg.payload
const weekno = Math.floor((timestamp + 345_600_000) / 604_800_000)
const result_ = Number(weekno) % 2
if (result_ == 0) {
    msg.payload = '<font color = yellow ><i class="fa fa-signing fa-flip-horizontal fa-2x"></i></font>';
    msg.flag = "Wash";
    return msg;
}
else
{
    msg.payload = '<span class="fa-stack"><i style="color:yellow" class="fa fa-signing fa-flip-horizontal fa-2x fa-stack-1x"></i> <i style="color:Tomato" class="fa fa-ban fa-2x fa-stack-2x"></i> </i></span></font>';
    msg.flag = " ";
}
return msg;

So as is, the first one works and it IS yellow.

But in the (now) second case, I am now seeing both icons (stacked) but they are both white.

TotallyInformation · 10 June 2024 09:53

Your link shows fa-sign-language, not fa-signing - however, both appear to work (now I fixed my own error!)

This works:

<span class="fa-stack" style="color:red;">
  <i class="fa fa-ban fa-2x fa-stack-1x"></i>
  <i class="fa fa-signing fa-2x fa-stack-2x"></i>
</span>

As does this which may be even better for you.

<span class="fa-stack">
  <i class="fa fa-ban fa-2x fa-stack-1x" style="color:red;"></i>
  <i class="fa fa-signing fa-2x fa-stack-2x" style="color:yellow;"></i>
</span>

Better still:

<span class="fa-stack">
    <i class="fa fa-signing fa-2x fa-stack-1x" style="color:yellow;"></i>
    <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
</span>

Trying_to_learn · 10 June 2024 10:09

I'll swap the stack positions so the ban is on top.

Ok, it's got weird.
It worked the first time and not subsequent times.
So I've stuffed something up.

Quick question though:
style = "color:red;"

~~;??~~

I'm sure it worked.

Now I am not getting colours.

And I can put all those 4 lines into one as msg.payload = '<your code>

That is:
msg.payload = ' '

TotallyInformation · 10 June 2024 14:44

Seems like an interaction with other code to me.

I am using UIBUILDER to test (of course!) rather than Dashboard but it should still work the same. Here was my final code:

        <div>
            <span class="fa-stack">
                <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
                <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
            </span>
        </div>

This appears to be working consistently.

However, I am now questioning why you are sending this in a message? Why not have it in your front-end code and simply turn it on when needed?

Check the browser dev tools to look for console errors AND check the elements page to make sure that the resulting HTML is actually what you think it is. And check the specific element against its CSS to see if something is overriding the CSS settings.

Trying_to_learn · 10 June 2024 20:44

Sorry, you lost me.

I've posted the code that controls which message is sent.

It checks if the week is odd or even numbered.

If odd, sends the hand.

If even, sends them but with a ban sign over the top.

(The actual odd/even: I'm not sure which is which.)

It is being sent as msg.payload to a button node set to receive {{msg.payload}} in the label field.

Ok, found a slight problem.
The button node had the background color field filled in with #333333.
Deleted, but no change.

Also, seems I was wrong wrt stacked icons.
I can't find any case now on 3 machines that have it.

I was sure I had it.

I'll have to check my MAIN machine.
But that has about 30 pages (GUI) so it is going to take a while.

Sorry

Did some digging. Found an example!
But it uses a template node and all the code is in there.
Not sent to it.

If I copy the template and put your code it in on the desired machine, it works.
(PROBLEM)
I can't change the symbol.

Other thing noticed:
If I send it as a message, it is monochrome.

FURTHER TESTING

If I put two template nodes and have one with the hands and the other with your code they BOTH work 100%

So now I have to try and work out what is preventing the node accept a msg.payload and displaying it correctly.

To be clear: This needs to be in the template node to pares the message:
<div ng-bind-html="msg.payload"></div>

Steve-Mcl · 10 June 2024 21:33

Why not simply add both sets of html to the template and & use payload to show 1 & hide the other.

Sending html is archaic and unmaintainable and as you have found, problematic.

Trying_to_learn · 10 June 2024 21:35

Thanks @Steve-Mcl .

Alas as I am not doing this all the time I don't know/remember how to do it.

So if I am using a template node (seems the only way I can get it working) would you please show me an example of how to do this?

Trying_to_learn · 10 June 2024 22:09

This is what I understand to this point in time.

<style>
    .wash
    {
        <i class="fa fa-signing fa-flip-horizontal fa-2x" style="color:yellow"></i>
    }
    .nowash
    {
        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>
    }
</style>

That sets the two definitions

But now I fall apart as I don't know the magic to parse the {{payload}} and display the relevant style.

TotallyInformation · 11 June 2024 11:28

So you could simply have everything already in place so you don't have to keep sending HTML all the time. Just send it once in your ui_template and turn it on/off by just changing the class from a hidden to a visible style. This is the HTML way, not constantly sending more and more HTML to all the connected clients.

Actually, you only need 1 set of HTML, just turn on/off the bits you need. That's one of the great strengths of CSS and classes.

Trying_to_learn · 11 June 2024 20:42

Yes, I sort of understand the idea.

But the mechanics of doing that.....

That last post is 'css' - I'm guessing.

And it won't do the job, but MAY be the start of it.

Doing it with HTML... That's a whole other ball game.
I've never really done anything with it and even less knowledgeable.

Help please.

Just to show I'm not dumping it on anyone:

let week = msg.payload
if (week == 0)
{
    //
    <i class="fa fa-signing fa-flip-horizontal fa-2x"style="color:yellow"></i>
})
else
if (week == 1)
{
    //
    <span class="fa-stack"><i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x"style="color:yellow;"></i><i class="fa fa-ban fa-2x fa-stack-2x"style="color:red;"></i></span>
}

But it doesn't quite work.

I get the icon but also a lot of text.

TotallyInformation · 12 June 2024 01:43

Not sure of the exact mechanism for setting CSS Classes with Dashboard 2 (if that is what you are using). But in general all you need is 1 set of html:

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

And a css class:

.hidden {
  display: none;
}

Then just add the hidden class to the second 

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="hidden fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

With standard VueJS, you can make any attribute dynamic using v-bind or simply : as in:

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i v-bind:class="somejsvariable" style="color:red;"></i>

Now you control the 2nd icon using a JavaScript variable that you set as a data variable in VueJS to make it responsive.

I think that's the way anyway, been a while since I used VueJS.

Trying_to_learn · 12 June 2024 03:04

I don't even what what vueJS is.

And I am using the original dashboard. Not the new fuse one.

TotallyInformation · 12 June 2024 14:50

Ah, sorry, I made the wrong assumption. D2 uses the VueJS v3 front-end framework. D1 uses the AngularJS v1.

AnglularJS also has the ability to have dynamic attributes. I think you can just use mustaches inside the attribute value? Been a long time since I did anything serious with Anglular though I'm afraid.

Maybe:

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i class="{{isHidden}} fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

Where isHidden is a variable. (all untried I'm afraid).

Steve-Mcl · 12 June 2024 15:45

or: <i ng-if="showBan" class="fa fa-ban

and send a message with showBan true / false

Trying_to_learn · 13 June 2024 06:35

Thanks @Steve-Mcl and @TotallyInformation.

Alas I shall have to admit I am still not understanding.

Steve,
I'm taking it that your or line continues on how Julian said - yes?

So I used two inject nodes.

msg.showBan = true and msg.showBan = false

Nothing happens.

Oh, the code - for clarity:

<span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-if="showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

Topic		Replies	Views
Icon stacking problem Dashboard	17	1126	26 December 2018
Font Awesom Icon stacking Dashboard	6	747	3 September 2018
Simple show awesome icon on screen General	6	1873	18 October 2019
Material design icons vs font awesome Dashboard	46	12120	18 June 2020
(Brain failure) Need help understanding why it isn't working General	21	665	4 August 2020

Font awesom icons - stuck. (Stacking)

EDIT!

OH, but!

Sorry

FURTHER TESTING

Related topics