ESPHome configuration example to create an animated clock using the Neopixel 60 LED ring

esphome_neopixel_clock_effect.yaml

Moved to https://github.com/markusressel/ESPHome-Analog-Clock

Working for 24 LEDs or 60 LEDs. The hour hand moves gradually, not in steps

update: added binary sensor status

substitutions:
  num_leds: "24"

esphome:

  name: clock_ring
  platform: ESP8266
  board: d1_mini
  on_boot:
    priority: -10
    then:
      - light.turn_on: 
          id: light_ring
          brightness: 50%
          effect: Clock
wifi:
  ssid: !secret esp_ssid
  password: !secret esp_pwd

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Clock ring FB AP"
    password: "KrkP6DgTsPlo"

captive_portal:

# Enable logging
logger:

# Enable Home Assistant API
api:
  password: !secret esp_key

ota:
  password: !secret esp_key

time:
  - platform: homeassistant
    id: ha_time

globals:
  - id: clock_brightness
    type: byte
    restore_value: yes
    initial_value: '255'
  - id: clock_indicators_enabled
    type: bool
    restore_value: yes
    initial_value: 'true'
  - id: clock_seconds_enabled
    type: bool
    restore_value: yes
    initial_value: 'true'

binary_sensor:
  - platform: status
    name: "Clock status"
    id: status_clock

switch:
  - platform: template
    name: "Clock Indicators"
    icon: mdi:progress-clock
    lambda: !lambda |-
      return id(clock_indicators_enabled);
    turn_on_action:
      globals.set:
        id: clock_indicators_enabled
        value: 'true'
    turn_off_action: 
      globals.set:
        id: clock_indicators_enabled
        value: 'false'
  - platform: template
    name: "Clock Seconds"
    icon: mdi:update
    lambda: !lambda |-
      return id(clock_seconds_enabled);
    turn_on_action:
      globals.set:
        id: clock_seconds_enabled
        value: 'true'
    turn_off_action: 
      globals.set:
        id: clock_seconds_enabled
        value: 'false'

light:
  - id: light_ring
    internal: False
    platform: neopixelbus
    type: GRB
    variant: WS2812
    pin: GPIO3
    num_leds: "${num_leds}"
    name: "LED Ring"
    color_correct: [90%, 90%, 90%]
    effects:
      - addressable_lambda:
          name: "Clock"
          update_interval: 32ms
          lambda: |-

            static boolean initialized;
            static ESPColor clock_ring_colors [60];
            if (initialized == false) {
              std::fill_n(clock_ring_colors, it.size(), ESPColor::BLACK);
              initialized = true;
            }

            auto time = id(ha_time).now();
            if (!time.is_valid()) {
              return;
            }

            // calculate led indices
            int second_idx = (int) ( (time.second * it.size()) / 60);
            int minute_idx = (int) ( it.size() * (time.minute * 60 + time.second) / 3600);
            int hour_idx = (int) ( it.size() * ( (time.hour % 12) * 60 + time.minute) / 720);
            int hour_inc_min_idx = hour_idx + (int) (((float) time.minute / 12) * (it.size() / 60));

            // fade out old colors
            for (int i = 0; i < it.size(); i++) {
              ESPColor old_color = clock_ring_colors[i];
              
              // fade out color
              int amount = 5;
              int red = old_color.red;
              int green = old_color.green;
              int blue = old_color.blue;
              int white = old_color.white;

              if (red < amount) { red = 0; } else { red -= amount; }
              if (green < amount) { green = 0; } else { green -= amount; }
              if (blue < amount) { blue = 0; } else { blue -= amount; }
              ESPColor new_color = ESPColor(red, green, blue, 0);

              clock_ring_colors[i] = new_color;
            }

            int indicator_brightness = id(clock_brightness) / 3;
            ESPColor indicator_color = ESPColor(indicator_brightness, indicator_brightness, indicator_brightness);

            // calculate colors
            ESPColor second_color = ESPColor(0, 0, id(clock_brightness));

            ESPColor minute_color = ESPColor(0, id(clock_brightness), 0);
            if (minute_idx == second_idx) {
              minute_color += second_color;
            }

            ESPColor hour_color = ESPColor(id(clock_brightness), 0, 0);
            if (hour_inc_min_idx == minute_idx) {
              // if seconds are also the same this will already contain the second color
              hour_color += minute_color;
            } else if (hour_inc_min_idx == second_idx) {
              hour_color += second_color;
            }

            if (id(clock_indicators_enabled)) {
              for (int i = 0; i < it.size(); i += (int) ((float) it.size() / 12)) {
                clock_ring_colors[i] = indicator_color;
              }
            }

            // set colors
            if (id(clock_seconds_enabled)) {
              clock_ring_colors[second_idx] = second_color;
            }
            clock_ring_colors[minute_idx] = minute_color;
            clock_ring_colors[hour_inc_min_idx] = hour_color;

            // apply colors to light
            for (int i = 0; i < it.size(); i++) {
              it[i] = clock_ring_colors[i];
            }

      - addressable_rainbow:
          name: "Rainbow Spinner"
          speed: 8
          width: "${num_leds}"
      - addressable_rainbow:
          name: "Rainbow Fader"
          speed: 3
          width: "${num_leds}"
      - random:
          name: "Random Slow"
          transition_length: 30s
          update_interval: 30s

Working for 24 LEDs or 60 LEDs. The hour hand moves gradually, not in steps

update: added binary sensor status

Thanks for the share with a code that is working ;) Flashed my system here and works perfect (y)

Hello,

I have a strange problem. I live in the Europe/Brussels timezone, I added this to the time: component, when I check the time in the esphome log of this device it displays the correct time, but on the clock display it show the time +1 hour.

Anyone who has also this 'problem'? (I can change this by selecting the Europe/Belfast timezone, but it is a strange thing to do)

Regards
Dirk

This is really cool, just finished implementing it! Made me order a 60 Led ring for this!

Added some functionality and please note you must define a time source, which isn't defined in the original.

big YAML chunk...

I was looking for a code with the ESP32, thank you for your sharing, however, when I load the program, I can no longer use the OTA, in the clear the wifi does not work. I have tried loading other programs and have no problem with the wifi. Do you know what can cause this in your code? thanks

EDIT: removed big yaml c&p for better readability

hello my friends can someone help me
okay? I want one track every hour

Interested in adding an offset, as I've a picture frame that could make a nice clock, but the first LED is at the bottom left. Rather than being a ring, it's a rectangular frame with 144 LEDs ...

Any ideas on an easy way to do this? Thanks

You should look into the latest release of EspHome. https://next.esphome.io/components/display/addressable_light.html On Friday, May 14, 2021, 07:55:25 AM EDT, elyobelyob ***@***.***> wrote: @elyobelyob commented on this gist. Interested in adding an offset, as I've a picture frame that could make a nice clock, but the first LED is at the bottom left. Any ideas on an easy way to do this? Thanks — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Very nice! Working fine with latest ESPHome version 2021.12.3.

@markusressel would you mind adding a license to the code? I have a 3d printed case and dedicated PCB which I'd like to put into a repository at some point. It would be great if the code setup based on this version could be added too.

@t-paul Thx for asking, looks great!

Not sure how I can add a license to a gist, but you can consider it CC0.
Attribution would be appreciated, but is not required.

Feel free to post a link to your repository here. If it gets more traction I would love to see this become the new place for maintaining and improving this gist.

@markusressel cool, thanks! I suppose the comment is already enough.

If you want to make it more obvious, you could add some comment lines at the beginning or end of the yaml file (I think this uses # as comment character) similar to what we did with our advent calendar scripts.

            // calculate led indices
            int second_idx = (int) ( (time.second * it.size()) / 60);
            int minute_idx = (int) ( it.size() * (time.minute * 60 + time.second) / 3600);
            int hour_idx = (int) ( it.size() * ( (time.hour % 12) * 60 + time.minute) / 720);
            int hour_inc_min_idx = hour_idx + (int) (((float) time.minute / 12) * (it.size() / 60));

@rocob @markusressel Small correction: last line should divide bij 24 else the hour-hand moves 10 leds instead of 5 per hour

           int hour_inc_min_idx = hour_idx + (int) (((float) time.minute / 24) * (it.size() / 60));

When compiling this example, I get al lot of warnings of ESPColor being deprecated, like:
warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead.
Have no idea how to edit the code to repair this. Anyone any clue how to do this? Appreciated!

INFO Reading configuration /config/esphome/wemos_7219_8x7_led_01.yaml...
INFO Generating C++ source...
INFO Compiling app...
Processing 7219-8x7-led (board: d1_mini; framework: arduino; platform: platformio/espressif8266 @ 3.2.0)
--------------------------------------------------------------------------------
HARDWARE: ESP8266 80MHz, 80KB RAM, 4MB Flash
LDF: Library Dependency Finder -> https://bit.ly/configure-pio-ldf
Dependency Graph
|-- <ESPAsyncTCP-esphome> 1.2.3
|-- <ESPAsyncWebServer-esphome> 2.1.0
|   |-- <ESPAsyncTCP-esphome> 1.2.3
|   |-- <Hash> 1.0
|   |-- <ESP8266WiFi> 1.0
|-- <DNSServer> 1.1.1
|-- <ESP8266WiFi> 1.0
|-- <ESP8266mDNS> 1.2
|-- <AsyncMqttClient-esphome> 0.8.6
|   |-- <ESPAsyncTCP-esphome> 1.2.3
|-- <SPI> 1.0
|-- <ArduinoJson> 6.18.5
|-- <NeoPixelBus> 2.6.9
|   |-- <SPI> 1.0
Compiling /data/7219-8x7-led/.pioenvs/7219-8x7-led/src/main.cpp.o
/config/esphome/wemos_7219_8x7_led_01.yaml: In lambda function:
/config/esphome/wemos_7219_8x7_led_01.yaml:149:44: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  149 |             static ESPColor clock_ring_colors [60];
      |                                            ^
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:151:61: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  151 |               std::fill_n(clock_ring_colors, it.size(), ESPColor::BLACK);
      |                                                             ^~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:168:18: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  168 |               ESPColor old_color = clock_ring_colors[i];
      |                  ^~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:180:18: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  180 |               ESPColor new_color = ESPColor(red, green, blue, 0);
      |                  ^~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:186:16: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  186 |             ESPColor indicator_color = ESPColor(indicator_brightness, indicator_brightness, indicator_brightness);
      |                ^~~~~~~~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:189:16: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  189 |             ESPColor second_color = ESPColor(0, 0, id(clock_brightness));
      |                ^~~~~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:191:16: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  191 |             ESPColor minute_color = ESPColor(0, id(clock_brightness), 0);
      |                ^~~~~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
/config/esphome/wemos_7219_8x7_led_01.yaml:196:16: warning: 'using ESPColor = struct esphome::Color' is deprecated: esphome::light::ESPColor is deprecated, use esphome::Color instead. [-Wdeprecated-declarations]
  196 |             ESPColor hour_color = ESPColor(id(clock_brightness), 0, 0);
      |                ^~~~~~~~~~
In file included from src/esphome.h:27,
                 from src/main.cpp:3:
src/esphome/components/light/addressable_light.h:20:7: note: declared here
   20 | using ESPColor ESPDEPRECATED("esphome::light::ESPColor is deprecated, use esphome::Color instead.", "v1.21") = Color;
      |       ^~~~~~~~
Linking /data/7219-8x7-led/.pioenvs/7219-8x7-led/firmware.elf
RAM:   [====      ]  43.6% (used 35708 bytes from 81920 bytes)
Flash: [=====     ]  49.3% (used 514489 bytes from 1044464 bytes)
Building /data/7219-8x7-led/.pioenvs/7219-8x7-led/firmware.bin
esp8266_copy_factory_bin(["/data/7219-8x7-led/.pioenvs/7219-8x7-led/firmware.bin"], ["/data/7219-8x7-led/.pioenvs/7219-8x7-led/firmware.elf"])
========================= [SUCCESS] Took 12.73 seconds =========================
INFO Successfully compiled program.

@rocob @markusressel Small correction: last line should divide bij 24 else the hour-hand moves 10 leds instead of 5 per hour

           int hour_inc_min_idx = hour_idx + (int) (((float) time.minute / 24) * (it.size() / 60));

The code line you reference and the text you write don't match up.
The hour_inc_min_idx is used to advance the "hour indicator" by tiny amounts, even if not a full hour has passed.
Dividing by 24 wouldn't make sense on an analog, 12 hour clock.
Not sure what you want to achieve there.

FYI: Since collaboration, progression and maintenance is really hard in a gist, I will move this to:

https://github.com/markusressel/ESPHome-Analog-Clock

For anyone interested: Please open Issues/PRs over there (when I am done) 🤓

Thx for all the input from you guys, I have reworked, updated and improved the template based on your suggestions (and my own improvements).

Special thx to @rocob @ronytomen

@markusressel No problem! Now remake the clock.. :)

@ronytomen what do you mean by "remake"? Anything specific you would like to see? 😄

So I am tinkering with ESPHome and have neopixels. My issue is that there is no guidance on what to install as far as libraries and where to specifically install them. It seems that the documentation is designed to have me spend days just on that issue. Can you help out, please?

That is the most surprising statement about ESPHome as I found it's one of the best documented projects I've seen. For actually setting up the hardware a more specialized tutorial (e.g. from Adafruit) might be more appropriate but then going to https://esphome.io/ and walking through the "Getting Started" - "using the command line" should get an initial setup running without too much fuzz.

When I search an ESPHome integration and this is the statement:

"It is very similar to the FastLED Light platform. In fact, most addressable lights are supported through both light platforms. The difference is that they use different libraries: while the fastled platform uses the FastLED library, this integration uses the NeoPixelBus library internally."
it does not state that the libraries are already installed. I had to search out numerous sources and finally found a youtube video. This is frustrating because I am trying to figure out how to install a library that is already preinstalled.

In all normal use cases you don't need to install anything when running ESPHome except esphome itself. Your only input is the yaml file which declares what you want to use and the ESPHome build process will take care of all the dependencies. Don't try to make things more difficult than they are, my advice would be:

1. Really follow the "Getting started" steps on the esphome website (don't invent other steps, really follow what's explained there with the first simple example and get that working)
2. Maybe join one of their platforms if you still have questions, this here is not a general esphome support page

In all normal use cases you don't need to install anything when running ESPHome except esphome itself. Your only input is the yaml file which declares what you want to use and the ESPHome build process will take care of all the dependencies. Don't try to make things more difficult than they are, my advice would be:

1. Really follow the "Getting started" steps on the esphome website (don't invent other steps, really follow what's explained there with the first simple example and get that working)
2. Maybe join one of their platforms if you still have questions, this here is not a general esphome support page

Nothing in the "Getting Started" section that states if the neopixel libraries come pre-installed. That is what I was asking about since this topic was about creating a clock using neopixels and esphome.