Any way to get labels on icons! #9

Bluhme1 · 2024-06-15T21:05:24Z

Bluhme1
Jun 15, 2024

Great firmware.
Trying to customize the lights and sensor icons in the subpages to control and show values from entities in HA.
How can text-labels be assigned to the individual icons?
/Lars

Answered by Bluhme1

Jun 17, 2024

Great. Thank you. After hours of tinkering on a rainy Sunday I got a result that I am very fond of. And at the same time I get slowly better in using Esphome.
I have screens suited for my purpose and I can show the value of sensors (temperatures) from HA and also turn on and off lights from HA. And make the icons change color after the state :-).
Suddenly the gadget (S3) becomes useful.

I live in Denmark and would like the weekdays in the save screen to show in Danish. Can I do that?

And a stupid question, perhaps. When I try to comment-out lines that I would like to remove from the screen but like to keep in the event that I am going to use them later, I get a compilation error - saying …

View full answer

BigBobbas · 2024-06-15T22:16:10Z

BigBobbas
Jun 15, 2024
Maintainer

Hi there ,
if you copy the print line of the icon. and paste it below it ( just to keep them below it. The icon is defined by the "/U000xxxx" you can add the text you wish in between the " " on the copied line , replacing the icon code. You will also need to change the font type. so the whole thing would look like below

          it.printf(20, 120, id(icon_font_80), blue, "\U000F075E"); # icon
          it.printf(20, 120, id(my_font3), blue, "Living Room");  # label

you may need to change the co-ordinates to line it up. in this case 20 = start at pixel 20 from left(max of 320) and 120 is from the top out of (max of 240)
I hope that helps
Cheers
Rob

1 reply

Bluhme1 Jun 17, 2024
Author

Great. Thank you. After hours of tinkering on a rainy Sunday I got a result that I am very fond of. And at the same time I get slowly better in using Esphome.
I have screens suited for my purpose and I can show the value of sensors (temperatures) from HA and also turn on and off lights from HA. And make the icons change color after the state :-).
Suddenly the gadget (S3) becomes useful.

I live in Denmark and would like the weekdays in the save screen to show in Danish. Can I do that?

And a stupid question, perhaps. When I try to comment-out lines that I would like to remove from the screen but like to keep in the event that I am going to use them later, I get a compilation error - saying something of "if"

E.g.
it.printf(20, 75, id(icon_font_80), light_blue,"\U000F1322");
it.printf(120, 75, id(icon_font_80), light_blue,"\U000F1322");
it.printf(220, 75, id(icon_font_80), light_blue, "\U000F1322");

well. Thank you for a great job

/Lars

Answer selected by BigBobbas

BigBobbas · 2024-06-17T18:18:53Z

BigBobbas
Jun 17, 2024
Maintainer

HI Lars , I’m really pleased that you are finding the box useful! They really are quite good. I’m not sure if it is possible to change the language, but I will have a look into this and let you know, if it can be done. The display lines are in a ‘lambda’ and uses c++ rather than yaml. In order to comment out lines you would add // rather than # so it would look like this //it.printf(20, 75, id(icon_font_80), light_blue,"\U000F1322"); I hope that helps, and I will let you know about the weekdays. Thanks for your support. Rob From: Lars Bluhme ***@***.***> Sent: Monday, June 17, 2024 5:55 PM To: BigBobbas/ESP32-S3-Box3-Custom-ESPHome ***@***.***> Cc: BigBobbas ***@***.***>; Comment ***@***.***> Subject: Re: [BigBobbas/ESP32-S3-Box3-Custom-ESPHome] Any way to get labels on icons! (Discussion #9) Great. Thank you. After hours of tinkering on a rainy Sunday I got a result that I am very fond of. And at the same time I get slowly better in using Esphome. I have screens suited for my purpose and I can show the value of sensors (temperatures) from HA and also turn on and off lights from HA. And make the icons change color after the state :-). Suddenly the gadget (S3) becomes useful. I live in Denmark and would like the weekdays in the save screen to show in Danish. Can I do that? And a stupid question, perhaps. When I try to comment-out lines that I would like to remove from the screen but like to keep in the event that I am going to use them later, I get a compilation error - saying something of "if" E.g. it.printf(20, 75, id(icon_font_80), light_blue,"\U000F1322"); it.printf(120, 75, id(icon_font_80), light_blue,"\U000F1322"); it.printf(220, 75, id(icon_font_80), light_blue, "\U000F1322"); well. Thank you for a great job /Lars — Reply to this email directly, view it on GitHub <#9 (reply in thread)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/BD4EBKP2NWN5JFCJVZI2KYTZH4IEXAVCNFSM6AAAAABJL7LKCOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TOOJXGAYDS> . You are receiving this because you commented. <https://github.com/notifications/beacon/BD4EBKMTU46ZSKBPWMGY5UTZH4IEXA5CNFSM6AAAAABJL7LKCOWGG33NNVSW45C7OR4XAZNRIRUXGY3VONZWS33OINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQASV6ZC.gif> Message ID: ***@***.*** ***@***.***> >

0 replies

BigBobbas · 2024-06-19T13:19:51Z

BigBobbas
Jun 19, 2024
Maintainer

Hello again,
I have been looking into a ways to incorporate days of weeks and months to allow them to be changed easily dependant on what the user would like displayed. Thanks for your suggestion. I hope that the below will solve this for you. Firstly you need to copy and paste the list of days and months into the 'substitutions' section at the very top of the config. so it looks like so

substitutions:
  name: esp32-s3box-3
  friendly_name: ESP32-S3-Box-3
####################################################################
#### change the micro wake word to be used on the line below   #####
####      options are okay_nabu, hey_jarvis, alexa             #####
####################################################################
  micro_wake_word_model: okay_nabu
####################################################################
####  Days and months ####
## Change the values on the right to match your locale ##
  monday: Monday
  tuesday: Tuesday
  wednesday: Wednesday
  thursday: Thursday
  friday: Friday
  saturday: Saturday
  sunday: Sunday
  
  jan: January
  feb: February
  mar: March
  apr: April
  may: May
  jun: June
  jul: July
  aug: August
  sept: September
  oct: October
  nov: November
  dec: December

Everything on the righthand side is what will be displayed on the screen, so you can basically type anything.

secondly I have made a couple of changes to the saver page, so you can just copy and paste the entire block below, overwriting the current config.

       - id: saver_page
       lambda: |-
         it.fill(Color::BLACK);
         
         const char *days[] {"{${sunday}","${monday}","${tuesday}","${wednesday}","${thursday}","${friday}","${saturday}"};
         it.printf(165, 10, id(my_font3), light_blue, TextAlign::RIGHT, days[id(ha_time).now().day_of_week - 1]);
         
         it.strftime(180, 10, id(my_font3), light_blue, "%d", id(ha_time).now());
         
         const char *months[] {"{${jan}","${feb}","${mar}","${apr}","${may}","${jun}","${jul}","${aug}","${sept}","${oct}","${nov}","${dec}"};
         it.printf(220, 10, id(my_font3), light_blue, TextAlign::LEFT, months[id(ha_time).now().month - 1]);
         
         
         it.strftime(160, 85, id(my_fontseg2), TextAlign::CENTER, "%H :%M", id(ha_time).now());
         it.printf(160, 180, id(my_fontseg2), light_blue, TextAlign::CENTER, "%.f°C", id(s3temp).state);

I hope that all works ok for you, let me know if you need any help.
All the best
Rob

0 replies

youkorr · 2024-06-19T13:46:41Z

youkorr
Jun 19, 2024

Hello I have a compilation problem with this code

id: saver_page
lambda: |-
it.fill(Color::BLACK);

const char *days[] {"{${sunday}","${monday}","${tuesday}","${wednesday}","${thursday}","${friday}","${saturday}"};
it.printf(165, 10, id(my_font3), light_blue, TextAlign::RIGHT, days[id(ha_time).now().day_of_week - 1]);

it.strftime(180, 10, id(my_font3), light_blue, "%d", id(ha_time).now());

const char *months[] {"{${jan}","${feb}","${mar}","${apr}","${may}","${jun}","${jul}","${aug}","${sept}","${oct}","${nov}","${dec}"};
it.printf(220, 10, id(my_font3), light_blue, TextAlign::LEFT, months[id(ha_time).now().month - 1]);

it.strftime(160, 85, id(my_fontseg2), TextAlign::CENTER, "%H :%M", id(ha_time).now());
it.printf(160, 180, id(my_fontseg2), light_blue, TextAlign::CENTER, "%.f°C", id(s3temp).state);

7 replies

youkorr Jun 19, 2024

it was me who made a copy and paste mistake

youkorr Jun 19, 2024

Do you have the same problem as me as soon as it detects me it does not go back to standby 30% is turned off

BigBobbas Jun 19, 2024
Maintainer

I have been re-working this , so hopefully will be solved soon. I am also going to try and change the behaviour of the home button to toggle between saver on or off from the home screen

youkorr Jun 19, 2024

Great work I love what you do

youkorr Jun 19, 2024

Is it possible to incorporate a room temperature, humidity, Pm25 in the future

youkorr · 2024-06-19T17:35:20Z

youkorr
Jun 19, 2024

I try to integrate the temperature of a room and the humidity but the display and suppose

     it.strftime(160, 85, id(my_fontseg2), TextAlign::CENTER, "%H :%M", id(ha_time).now());
     it.printf(160, 180, id(my_fontseg2), red, TextAlign::CENTER, "%.f°C", id(liv_temp).state);
     it.printf(160, 180, id(my_fontseg2), blue, TextAlign::CENTER, "%.f°C", id(liv_hum).state);

2 replies

BigBobbas Jun 19, 2024
Maintainer

          it.printf(80, 180, id(my_font4), red TextAlign::CENTER, "%.f°C", id(liv_temp).state);
          it.printf(240, 180, id(my_font4), light_blue, TextAlign::CENTER, "%.f%%", id(liv_hum).state);

try that , i cant test at the moment but should be close

BigBobbas Jun 19, 2024
Maintainer

my bad , missing comma ... lol glad it works

youkorr · 2024-06-19T19:51:11Z

youkorr
Jun 19, 2024

 thank you very much it works, a comma is missing after the red

it.printf(80, 180, id(my_font4), red,TextAlign::CENTER, "%.f°C", id(liv_temp).state);
it.printf(240, 180, id(my_font4), light_blue, TextAlign::CENTER, "%.f%%", id(liv_hum).state);

0 replies

youkorr · 2024-06-19T22:26:41Z

youkorr
Jun 19, 2024

Error update esphome 2024.6.0

1 reply

BigBobbas Jun 20, 2024
Maintainer

#13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Any way to get labels on icons! #9

{{title}}

Replies: 7 comments 11 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Any way to get labels on icons! #9

Replies: 7 comments · 11 replies

BigBobbas Jun 15, 2024 Maintainer

Bluhme1 Jun 17, 2024 Author

BigBobbas Jun 17, 2024 Maintainer

BigBobbas Jun 19, 2024 Maintainer

BigBobbas Jun 19, 2024 Maintainer

BigBobbas Jun 19, 2024 Maintainer

BigBobbas Jun 19, 2024 Maintainer

BigBobbas Jun 20, 2024 Maintainer

Replies: 7 comments 11 replies

BigBobbas
Jun 15, 2024
Maintainer

Bluhme1 Jun 17, 2024
Author

BigBobbas
Jun 17, 2024
Maintainer

BigBobbas
Jun 19, 2024
Maintainer

BigBobbas Jun 19, 2024
Maintainer

BigBobbas Jun 19, 2024
Maintainer

BigBobbas Jun 19, 2024
Maintainer

BigBobbas Jun 20, 2024
Maintainer