Custom Widget with percentage output

Setup, Configuration and Use Widgets
1

I created my own widget for showing the level of something.
I have for example different temperature sensors with different output.
One sensor gives as battery state: high, middle and low
Another sensor gives as battery state: ON and OFF
Another sensor gives as battery state: percentage value (for example 85%)

If i want to set the icon by state, all are working except the percentage items. I tried many ways to get it work, but i can’t find a soultion.

              f7: "=(items[props.item_4].state === 'OFF') ? props.icon_high : (items[props.item_4].state === 'high') ? props.icon_high : (Number.parseFloat(item_4.state) >= '60') ? props.icon_high : (items[props.item_4].state === 'middle') ? props.icon_medium : (Number.parseFloat(item_4.state) >= '25') ? props.icon_medium : (items[props.item_4].state === 'ON') ? props.icon_low : (items[props.item_4].state === 'low') ? props.icon_low : (Number.parseFloat(item_4.state) < '25') ? props.icon_low : '?'"

Any ideas how to get it working with percentage output?

I would also like to move the state at the end of the card:
openHAB

But it don’t want to work:

slots:
        default:
          - component: f7-icon
            config:
              style:
                margin-top: 6px
              f7: "=(items[props.item_4].state === 'OFF') ? props.icon_high : (items[props.item_4].state === 'high') ? props.icon_high : (Number.parseFloat(item_4.state) >= '60') ? props.icon_high : (items[props.item_4].state === 'middle') ? props.icon_medium : (Number.parseFloat(item_4.state) >= '25') ? props.icon_medium : (items[props.item_4].state === 'ON') ? props.icon_low : (items[props.item_4].state === 'low') ? props.icon_low : (Number.parseFloat(item_4.state) < '25') ? props.icon_low : '?'"

Any help would be very nice. Btw. i’m not good in programming :slight_smile:
Thank you.

2

Welcome to the forums.

No one starts off good at programming. For most people, trying and asking questions is how you get good at it.

There are two problems with this part of the expression. First, it’s important for both you and your program to know what type of information you are dealing with. Standard options include string (an arbitrary sequence of letters, numbers, or other characters) and number (a meaningful sequence of numeric characters only indicating some actual value). In order for a program to know which type of information you want it to work with, there are ways for your to indicate specifically. In this case (and in many programming languages) putting anything between ' ' or " " is the way you specify that the information is a string and that it should not be considered a numerical value. So, '60' is the character sequence '6' followed by '0' which is not the same as the number 60.

When you want to see if two things are the same “word” (character sequence) you compare two strings just as you have done with the working parts of your expression.

items[some_item_name].state always returns a string and you are testing to see if that string is the character sequence 'high'.

But, for the percentage, you want to compare whether one numerical value is the same (or more or less than) some reference value. This means you need to have numbers and not strings on both sides of the comparison. Number.parseFloat converts a string with numerical characters into a number which is why you use it to change the state string to a value. But then you compare that number to the string '60', when you want to compare it to the number 60.

The second problem is the input of the parseFloat method. item_4.state is not meaningful to the expression. It is not a number (it has more than just numerical characters), and it is not a string (it is not enclosed by ' '), so the expression believes it must be the name of a variable or function. There is, however no variable by that name so the expression just decides that the value is undefined.

You have properly referenced the state string for item_4 in other parts of the expression using the items and props objects. You must do the same thing here. props.item_4 returns whatever value you defined in the widget properties: in this case clear the name string of an item. And, as above, items[some_item_name].state is how you get the state string of an item in the widget expressions.

Put those both together and the test for whether the state of the item set to item_4 is greater than 60% would be:

Number.parseFloat(items[props.item_4].state) >= 60
3

Wow, thank you for this good explaination :slight_smile:
It is finally working, thank you.