Alarm Clock

[Bcukier]

I have been using HA as an alarm clock — triggering music on the sonos, lights, etc… I wanted to see if I could use the Box3 as my alarm clock. Managed to put this together:

and ‘home page’:

Huge thanks to Rob for the bigbobbas code — I couldn’t have come close to figuring this out without the the hard work and guide he put together. Code below if interested:

Display:

  - 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_gray, TextAlign::RIGHT, days[id(ha_time).now().day_of_week - 1]);
     
     it.strftime(180, 10, id(my_font3), light_gray, "%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_gray, TextAlign::LEFT, months[id(ha_time).now().month - 1]);
     
     it.strftime(155, 85, id(my_fontseg2), blue, TextAlign::CENTER, "%l :%M", id(ha_time).now());
     it.printf(160, 141, id(my_font3), lime, TextAlign::CENTER, id(calxxx).state.c_str());

     if(id(alarm_on).state == "playing") {
           it.filled_rectangle(20,170,280,55,red);
           it.printf(160,197, id(my_font3), white, TextAlign::CENTER, "Stop Alarm");
     } `

and a few sensors to take in the information from homeassistant:

`text_sensor:

• platform: homeassistant
  id: calxxx
  entity_id: sensor.nextalarm
  internal: true

• platform: homeassistant
  id: alarm_on
  entity_id: media_player.roam
  internal: true
  `

and for the alarm time, I’m pulling that from a calendar in home assistant. I am using a template in HA to convert to text from an array:

{{ "Alarm: " + state_attr('calendar.alarm_mbr','start_time') | as_timestamp() | timestamp_custom('%a %-I:%M %p') }}

[BigBobbas]

Oh that looks great! Nice work. And thank you for doing exactly what I set out to achieve. To provide a foundation for people to make it their own, and it looks like you have done exactly that. 🙏 and thank you for sharing how you have done it too. ❤️

Hopefully in time with community feedback and 'Great Tips' such as yours, we can build up a good base of enhancements and awesome features, giving everyone the resources to customise these great little devices... as they are totally underused as 'just a voice assistant' They can be a full on HA control and info display only limited by imagination 😉

Best wishes and keep the ideas flowing.

Rob

[youkorr]

Good evening, I found what you did nice. Is the stop alarm button functional? Because I don't see it on the code you provided, thank you.

[Bcukier]

The stop alarm button just triggers a script on Home Assistant:

 - platform: touchscreen
    page_id: saver_page
    id: ss_wake
    internal: true
    x_min: 0
    x_max: 320
    y_min: 150
    y_max: 240
    on_click:
      min_length: 10ms
      max_length: 500ms
      #### BC
      then:
        - homeassistant.service:
            service: script.mbr_pause_alarm
        - script.execute: saver_enabled 

The actual alarm functionality is detailed here:
https://community.home-assistant.io/t/bedside-ha-alarm-clock/741173

[youkorr]

Just a question I am very interested to know how you do to put the icons in the 240X240 screen do you do it with software?
This will save me from struggling
thank you
x_min:
x_max:
y_min:
y_max:

[Bcukier]

The S3 screen is 320 x 240. Figure out the size of the grid you want and the midpoint in each square. The TextAlign::CENTER formatting will put it in the center.

Rob has some great info about how to do this and change the icons here:

https://github.com/BigBobbas/ESP32-S3-Box3-Custom-ESPHome/blob/main/instructions/make%20it%20your%20own.md#the-display

So for the page above, this is the code:

    pages:
      - id: idle_page ##### home page ######
        lambda: |-  
          it.fill(id(black));

          it.fill(id(black));
          if(id(api_connection) == true) {
                  it.printf(15, 5, id(icon_font_55), blue, "\U000F07D0");      
          } else {
                  it.printf(15, 5, id(icon_font_55), red, "\U000F087B");
          }
          if(id(wifi_connection) == true) {
                  it.printf(80, 5, id(icon_font_55), lime, "\U000F16BD");      
          } else {
                  it.printf(80, 5, id(icon_font_55), red, "\U000F16BC");
          }
          if(id(time_remaining_0).state == "0:00:00"){
          it.printf(135, 5, id(icon_font_55), red, "\U000F0150");
          } else {
          it.printf(135, 5, id(icon_font_55), lime, "\U000F0150");
          }
          if(id(mute_switch).state) {
                 it.printf(190, 5, id(icon_font_55), red, "\U000F0581"); 
          } else {
                 it.printf(190, 5, id(icon_font_55), lime, "\U000F057E"); 
          }
          it.printf(250, 5, id(icon_font_55), light_blue, "\U000F1C6F");

         
          it.printf(53, 105, id(icon_font_80), blue, TextAlign::CENTER, "\U000F0FD2");
          it.printf(53, 135, id(bc_font), white, TextAlign::CENTER, "Evening");
          it.printf(170, 105, id(icon_font_80), blue, TextAlign::CENTER, "\U000F081C" );
          it.printf(170, 135, id(bc_font), white, TextAlign::CENTER, "Suite off");
          it.printf(276, 105, id(icon_font_80), blue, TextAlign::CENTER, "\U000F1251");
          it.printf(276, 135, id(bc_font), white, TextAlign::CENTER, "House on");


          it.printf(53, 195, id(icon_font_80), blue, TextAlign::CENTER, "\U000F1A46");
          it.printf(53, 225, id(my_font), white, TextAlign::CENTER, "House off");
          it.printf(170, 195, id(icon_font_80), blue, TextAlign::CENTER, "\U000F18FB");
          it.printf(170, 225, id(my_font), white, TextAlign::CENTER, "Kids home");
          it.printf(276, 195, id(icon_font_80), white, TextAlign::CENTER, "\U000F005A");
          it.printf(276, 225, id(my_font), white, TextAlign::CENTER, "Next page");

This is a page with a 3x4 grid (and the icons go yellow when on):

      - id: page2
        lambda: |-  
          it.fill(id(black));

          it.printf(53, 40, id(icon_font_80), blue, TextAlign::CENTER, "\U000F050F");
          it.printf(53, 75, id(bc_font), white, TextAlign::CENTER, "%.f°F", id(s3temp).state);
          it.printf(170, 40, id(icon_font_80), blue, TextAlign::CENTER, "\U000F0581" );
          it.printf(170, 75, id(bc_font), white, TextAlign::CENTER, "Sonos off");
          if(id(state_outdoor).state == "on") {
                it.printf(276, 40, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F0405");
          } else {
                it.printf(276, 40, id(icon_font_80), blue, TextAlign::CENTER, "\U000F0405");
          }
          it.printf(276, 75, id(bc_font), white, TextAlign::CENTER, "Outside");
          
          if(id(state_lsconce).state == "on") {
                it.printf(53, 120, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F091C");
          } else {
                it.printf(53, 120, id(icon_font_80), blue, TextAlign::CENTER, "\U000F091C");
          }
          it.printf(53, 150, id(my_font), white, TextAlign::CENTER, "Left Sconce");

          if(id(state_mbr2hh).state == "on") {
                it.printf(170, 120, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F07FE");
          } else {
                it.printf(170, 120, id(icon_font_80), blue, TextAlign::CENTER, "\U000F07FE");
          }
          it.printf(170, 150, id(my_font), white, TextAlign::CENTER, "Wall");

          if(id(state_rsconce).state == "on") {
                it.printf(276, 120, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F091C");
          } else {
                it.printf(276, 120, id(icon_font_80), blue, TextAlign::CENTER, "\U000F091C");
          }
          it.printf(276, 150, id(my_font), white, TextAlign::CENTER, "Right Sconce");

          if(id(state_mbrcb).state == "on") {
                it.printf(53, 200, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F091D");
          } else {
                it.printf(53, 200, id(icon_font_80), blue, TextAlign::CENTER, "\U000F091D");
          }
          it.printf(53, 230, id(my_font), white, TextAlign::CENTER, "Center");
          
          if(id(state_mbr4hh).state == "on") {
                it.printf(170, 200, id(icon_font_80), yellow, TextAlign::CENTER, "\U000F179B");
          } else {
                it.printf(170, 200, id(icon_font_80), blue, TextAlign::CENTER, "\U000F179B");
          }        
          it.printf(170, 230, id(my_font), white, TextAlign::CENTER, "Ceiling");]

[youkorr]

Thank you but I am on a project of a numeric keypad to trigger my alarm with Rob's custom projection I had no problem but to identify the keys from 1 to 9 and arm and disarm I struggle a lot any help I am a taker thank you

[youkorr]

[youkorr]

Ok thanks I was able to get them working