Mobile App For Esphome Devices On The Example Of Led Control

About the project

An ESP32-based Wi-Fi controller for addressable LED strips is controlled via a mobile application as well as other methods such as voice commands, a phone call, and a Telegram bot. This controller is just an example of an ESP32-based smart device with ESPHome firmware, for which a modern mobile application is available.

Project info

Difficulty: Easy

Platforms: AndroidApple

Estimated time: 3 hours

License: GNU General Public License, version 3 or later (GPL3+)

Items used in this project

Hardware components

ESP32 DevKit board ESP32 DevKit board x 1
5x5 SMD clock button 5x5 SMD clock button x 1
micro USB connector micro USB connector x 1
JST 3-PIN connector with a wire for connecting the LED strip JST 3-PIN connector with a wire for connecting the LED strip x 1

Software apps and online services

2Smart Cloud 2Smart Cloud

Hand tools and fabrication machines

Soldering iron Soldering iron x 1
Screwdriver Screwdriver x 1

Story

Controller board assembly

All technical materials on creating a controller, including a printed circuit board project, can be found on the 2Smart Cloud GitHub. First, you need to use the Gerber project to order or make your board.

Let’s assemble the controller using the board and necessary components:

Controller firmware

After assembling the device, you just need to flash it and start using it for its intended purpose. You can use the SDK-based firmware code from GitHub, but there is an alternative, and this is ESPHome.

In many cases, ESPHome is a fairly functional tool. Its main advantage is simplicity. Using ESPHome, it will be easier for you to modify the firmware and add new functionality — for example, connect additional sensors and create a smart multitool.

We are using a simple LED controller as an example. You can connect any ESPhome-based device and will have access to all further mentioned features.

Documentation and ready-made examples for ESPHome will help you write the code. We used such sources:

After selecting the appropriate lines of code, we added controller effects and included support for the Reset button and Wi-Fi signal sensor in the firmware.

Full code from our example:

  1. light:
  2. - platform: fastled_clockless
  3. chipset: WS2812B
  4. pin: 18
  5. num_leds: 300
  6. rgb_order: GRB
  7. name: FastLED WS2812 Light
  8. id: light_rgb
  9. effects:
  10. - random: null
  11. - pulse:
  12. name: "Fast Pulse"
  13. transition_length: 0.5s
  14. update_interval: 0.5s
  15. - strobe: null
  16. - addressable_scan:
  17. move_interval: 50ms
  18. scan_width: 4
  19. - addressable_random_twinkle:
  20. twinkle_probability: 20%
  21. progress_interval: 100ms
  22. - addressable_color_wipe: null
  23. - addressable_rainbow: null
  24. - addressable_fireworks:
  25. name: Fireworks Effect With Custom Values
  26. update_interval: 32ms
  27. spark_probability: 10%
  28. use_random_color: false
  29. fade_out_rate: 120
  30. binary_sensor:
  31. - platform: gpio
  32. id: led_switch
  33. pin:
  34. number: GPIO5
  35. mode: INPUT_PULLUP
  36. inverted: true
  37. name: Led switch
  38. on_click:
  39. then:
  40. - light.toggle: light_rgb
  41. - platform: gpio
  42. id: change_effect
  43. pin:
  44. number: GPIO4
  45. mode: INPUT_PULLUP
  46. inverted: true
  47. name: Change effect
  48. on_click:
  49. then:
  50. - lambda: !<!lambda> |-
  51. uint32_t total = id(light_rgb)->get_effects().size();
  52. uint32_t curr_idx = 0;
  53. uint32_t i = 0;
  54. std::string curr_effect = id(light_rgb)->get_effect_name();
  55. auto call = id(light_rgb)->turn_on();
  56.  
  57. // set first effect in list
  58. if (strcasecmp(curr_effect.c_str(), "none") == 0) {
  59. call.set_effect(1);
  60. call.perform();
  61.  
  62. return;
  63. }
  64.  
  65. for (auto *effect : id(light_rgb)->get_effects()) {
  66. i++;
  67. if (strcasecmp(effect->get_name().c_str(), curr_effect.c_str()) == 0)
  68. curr_idx = i;
  69. }
  70.  
  71. if (curr_idx == total) {
  72. call.set_effect(0);
  73. } else {
  74. call.set_effect(curr_idx + 1);
  75. }
  76.  
  77. call.perform();
  78. - platform: reset_sensor
  79. pin:
  80. number: GPIO0
  81. mode: INPUT_PULLUP
  82. inverted: true
  83. name: Reset button
  84. filters:
  85. - delayed_on: 1s
  86. sensor:
  87. - platform: wifi_signal
  88. name: WiFi1 Signal
  89. update_interval: 30s
  90. id: wifi_config

    To use a ready-made firmware code to create a device, first of all, you need to create a new product in the 2Smart Cloud developer account:

    1. Log in to the platform – https://cloud.2smart.com/.
    2. On the “Products” page, click “Add Product”.

    3. Select the microcontroller – ESP32.

    4. Click "Add Firmware" and select the ESPHome base.

    5. Paste the controller firmware code into a Configuration field and click Save button.
    6. There are two firmware versions for ESPHome-based devices in 2Smart Cloud: test and production.

      Test firmware is only for prototype testing. Its unfamiliarity is that the code contains technical data that is not necessary on the end-user’s device. These are parameters for connecting to the platform and interacting with it. For example, your Wi-Fi network credentials.


      Production firmware is the version that is installed on devices that will go on sale. Its code no longer contains any Wi-Fi credentials and the device is connected to the platform using a standard pairing method from the end-user’s account.

    7. Click "Build Firmware” for the test device. Enter the credentials of your Wi-Fi network – they will be transmitted to the device in the test firmware code for a quick Internet connection.

    8. Wait until the firmware building is completed. Click "Download".

    9. Connect the controller to the computer using a USB cable.
      Attention! Disconnect the LED strip from the controller before proceeding with the flashing!
    10. Unpack the downloaded archive, and enter the folder with the received files. Flash the device using Mac OS, Linux, or Windows device.
    11. After completing the firmware installation process, return to the platform – the device will connect to it automatically. The successful connection is indicated by a green indicator and the Ready status in the "Device Status" field.

    12. Click "Add Layout" to open the mobile application emulator. Configure the interface of the mobile application to control the device.

    13. Install the 2Smart Cloud mobile application (iOS | Android)  and log in with the same username and password that you used to register in the developer's account.
    14. Your new device is already displayed in the app. Please test the functionality of all widgets.

    15. Return to the platform and click "Build Firmware" for the production device. The final version of the firmware will be built. Download the archive.

    16. Click "Publish", and the product will be available to you and your users for pairing with a mobile device.
    17. Flash the device with production firmware similar to the test firmware. Do not forget to clear the memory of the microcontroller beforehand.
      Attention! Disconnect the LED strip from the controller before proceeding with the flashing!
    18. Return to the mobile application, and log in with any parameters as a regular user.
    19. Click the "Add Device" button on the "Devices" screen – the pairing procedure will start.

    20. After the pairing is completed, your LED strip controller is displayed on the Devices screen. Make sure you can control it from your smartphone screen.

    Mobile app features

    Here are the additional benefits of each 2Smart Cloud device available out of the box:

    • Easy and fast integration with Siri and Google Assistant. You can use custom voice commands, shortcuts, and other features of the built-in assistants.

    • Device management using a free phone call.
    • Device management using a Telegram bot.
    • Sharing the device with other users.

    The mobile application and all its additional features are free. You can configure its interface to suit your needs and make changes to the interface at any time.

    Results

    We have created a LED strip controller without programming and using assembler programs. The firmware code for ESPHome was written according to the documentation for this base. We just took ready-made examples and used them on our device.

    Similarly, you can create any other ESP-based device and use ESPHome to write the firmware. By connecting such a device to the 2Smart Cloud, you will be able to use pairing with a mobile application and take full advantage of the platform.

    The 2Smart Cloud free plan allows you to connect up to 20 devices to the platform. If you need more, we offer a reasonable pricing. And if necessary, our experts will also share with you in-depth expertise in the field of IoT.

    Code

    ESPHome LED Controller

    Credits

    Leave your feedback...