Giter VIP home page Giter VIP logo

sonoff-nspanel-with-esphome's Introduction

Sonoff NSPanel with ESPHome and Home Assistant

In this Github repo you can find my Sonoff NSPanel config with ESPHome and Home Assistant.
This config is based on the NSPanel-MF config from marcfager, with the color picker config from MMMZZZZ.
I want to thank everyone on the Unofficial Nextion Discord, I couldn't have done this without you!
Last but not least, huge thanks to Chris Masto for all his hard work. It was him who got me started with the Nextion Editor, after the amazing Youtube video's!

What is included in my NSPanel configuration

  • Dashboard with weather data, indoor temperature, outdoor temperature
  • Lights page, where you can tap to toggle the light and long-press to get a detailed overview of the light
  • Light detail page, where you can set brightness, color and color temperature
  • Media page, where you can select a playlist, view the current playing song and artist, and control the music (work in progress)
  • Thermostat page, with the option to view/control the temperature inside the house
  • Power monitor page, where you can see the current usage and daily usage (work in progress)
  • Swipe navigation. With a control centre if you swipe down, where you can control the brightness and screen timeout
  • Screen saver, with the option to change the timeout (1-10 minutes)
  • Alarm page, which is being displayed while the home alarm is active (may be used later as an alarm arm/disarm page)
  • Notifications! You can send a notification from Home Assistant to the NSPanel, which then plays a sound and displays the notification on the screen

Remarks

Some parts (especially entity IDs) are in Dutch, but I tried to write as much as possible in English. All comments inside the configuration files are in English.
I tried to write as much comments as possible, because this can help you understand the configuration. If you still don't understand anything, please let me know! This can be done under the Discussions tab.
Because I'm running two Home Assistant instances (one test and one production), I can't use the homeassistant service directly inside the ESPHome config. Because that way it will toggle the light twice and thus not do anything. That's why I only defined the binary sensors inside ESPHome and did all the automation inside Home Assistant.
To make sure that all data on the display is being updated, I'm using a template switch called nextion_init. All values are only being send to the display after this switch is turned on. Switch will automatically turn on once the API has an active connection.

Installation

See masto's Youtube video for details on how to do this

  1. Install and configure ESPHome. You need to change the TFT URL to fit your situation
  2. Flash the NSPanel with the ESPHome firmware
  3. Compile the Nextion HMI to a TFT file
  4. Upload your custom TFT to a webserver (can be Home Assistant)
  5. Add the NSPanel ESPHome as an integration to Home Assistant
  6. Flash the Nextion display with your custom firmware. This can be triggered from within Home Assistant, with the TFT Upload button
  7. Add the automations to Home Assistant

Pictures

Dashboard
Livingroom
Lightdetails
Media
Thermostat
Settings
Notification

To-do list

  • Create nicer UI elements. The slider doesn't really fit the theme, but main focus was getting it to work technically
  • Configure the media page, currently it can only do play/pause and volume up/down
  • Send the current page to ESPHome, so ESPHome knows which page is currently active. This can be useful when sending a notification
  • Display CO2 livingroom value on the dashboard/livingroom page
  • Maybe change the rendered color field into a static image
  • Maybe change the color temperature buttons into a slider
  • Maybe create an equipment page, to control the vacuum robot and other equipment

sonoff-nspanel-with-esphome's People

Contributors

tyzzyt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.