Change font size of label in quick app

[michelds 3]

Hello,

How to simply change de fontsize of a label in a quick app?

Thanks.

 

function QuickApp:knop2()

    self:debug("binary switch turned on")

    self:updateProperty("value", true)

    hub.setGlobalVariable('mailsender', '256')

    label1 = fibaro.getGlobalVariable("mailsender")

    self: updateView ("label1", "text", label1)

  end

[Tomasz Spaleniak 14]

Label presented in QiuckApp is simple text, but if you would like to change it you can use HTML markup and use eg. font, color, size and others

[michelds 3]

Thanks Tomasz, I didn't know that. Go test it out.

[Lode 19]

Can you give an example please ?

[Sankotronic 2,370]

Hello @Lode ,

 

Here is example of printing Sonos zone name in bold text and double size:

Please login or register to see this code.

 

You can also define color. Here is example with green colored ✔︎ OK and red colored ✘︎ Error printed on status label:

Please login or register to see this code.

 

You can also show album art on the label using following code:

Please login or register to see this code.

 

Hope this helps

 

[Lode 19]

@Sankotronic thank you so much !!!

[PeterV959 11]

This is great to know. Can you point me to any information regarding the UI for Fibaro devices? Specifically I would like to examine or change the information being displayed by a thermostat QuickAppChild device and the accompanying temperature device.

 

Thank you

[michelds 3]

 

@Sankotronic thanks,
I had already searched myself, but I typed the html code before the self:updateview.
I'm going to test these examples.

[Lode 19]

On 1/27/2023 at 9:39 AM, Sankotronic said:

Hello @Lode ,

 

Here is example of printing Sonos zone name in bold text and double size:

Please login or register to see this code.

 

You can also define color. Here is example with green colored ✔︎ OK and red colored ✘︎ Error printed on status label:

Please login or register to see this code.

 

You can also show album art on the label using following code:

Please login or register to see this code.

 

Hope this helps

 

Hmm...strange my label shows <font color='#9ACD32'>✔︎ OK</font>

[Sankotronic 2,370]

22 minutes ago, Lode said:

Hmm...strange my label shows <font color='#9ACD32'>✔︎ OK</font>

 

Hi @Lode ,

 

Check your code again.

This is code for font size and color and bold in action just added to my Internet status QA:

Please login or register to see this code.

 

And this is how it looks in browser when reboot is enabled:

Please login or register to see this spoiler.

 

As you can see Yubii still does not support bold text, but colors are displayed from long time ago. It seems that text size is no longer supported, but even before it was not resized in the same way as on browser.

 

 

Edited January 29, 2023 by Sankotronic
typo

[Lode 19]

I just added this line with your code

Please login or register to see this code.

but it still gives me <b><font size='2' color='#9ACD32'>🔄✅️ Reboot enabled</font></b> on the label ??

 

Strange....in the app it looks fine !

 

Update....i have to look in the UI not in the quickapp development interface.

 

Thanks again 😉

 

Edited January 29, 2023 by Lode

[Sankotronic 2,370]

Hi @Lode ,

 

I checked with all my 3 browsers Safari, Firefox and Chrome and shows label in bold color.

You will have to find out why your browser does not show labels with formatting. BTW my HC3 is on stable 5.130.64. What do you see in Yubii app?

[Lode 19]

Hi @Sankotronic

 

Everything looks fine now.

Maybe my update on the previous answer crossed your answer.

Many thanks 😊

Edited January 30, 2023 by Lode

[michelds 3]

This works, thank you for the hints.

Works in Chrome and Yubii.

 

 self:updateView("label1","text","<font size='10'>"..label1.."</font>")

 

 

[Cristi 0]

Yubii Home iOS app 2.0.3 does not show labels with formatting. However same are displayed correctly on web browsers.

Is this a known issue with the app?

[Neo Andersson 230]

On 1/29/2023 at 6:36 PM, Sankotronic said:

 

Hi @Lode ,

 

Check your code again.

This is code for font size and color and bold in action just added to my Internet status QA:

Please login or register to see this code.

 

And this is how it looks in browser when reboot is enabled:

Please login or register to see this spoiler.

@SankotronicI have stumbled upon your post here, and noticed that you are looking for bold text in yubii..actually it is possible..you need to use double <b> tag.. <b><b> sometext </b></b> will give you bold text. We arre using it regularly. See the pic below. The company label, and the room name are all in bold

 

Please login or register to see this attachment.

[Sankotronic 2,370]

Hi @Neo Andersson ,

 

Thank you for the tip. Do you know it there is a way to check with LUA code what mode is selected to display QA in Yubii app introduced with last FW update? The old way mode is slower in Yubii app but shows formatting with one <b>, while the new mode does not and obviously require different code.

 

BTW I like how you show table on the label! 👍

[Neo Andersson 230]

I can't recall which topic it was, but i think @jgab somewhere answered this question. I could't find any indication for this parameter in the base JSON structure of the quickapp, maybe i am blind. I think there is no way to determine, but i am not 100% sure.

[Sankotronic 2,370]

Hi @Neo Andersson ,

 

users can check within LUA code if QA property for "Use the new views in mobile application" is checked or not:

Please login or register to see this code.

 

Since this new view does not support HTML tags it is now at least possible to adapt formatting before printing on QA labels.

 

[Christb 33]

On 5/7/2024 at 9:34 PM, Neo Andersson said:

On 1/29/2023 at 6:36 PM, Sankotronic said:

Please login or register to see this link.

@SankotronicI have stumbled upon your post here, and noticed that you are looking for bold text in yubii..actually it is possible..you need to use double <b> tag.. <b><b> sometext </b></b> will give you bold text. We arre using it regularly. See the pic below. The company label, and the room name are all in bold

 

it seems that using font-weight:bold is also working as per example below for "variable texte":

self:updateView(libel,'text',"<font size="..taille.." color="..couleur.." font-weight:bold>"..texte.."</font>")