Flashing the Sonoff NSPanel with ESPHome - how to get a custom UI for Home Assistant!

Поділитися
Вставка
  • Опубліковано 15 сер 2024
  • Here's how to put ESPHome on a Sonoff NSPanel, opening up the ability to custom design your own touchscreen Home Assistant control panel. Links below:
    00:00 Introduction
    03:00 Unboxing
    06:07 Factory firmware demo
    10:59 Opening it up
    16:53 Installing ESPHome
    19:02 ESPHome Configuration
    21:18 Flashing the NSPanel
    24:46 Home Assistant integration
    26:26 Making a custom UI with Nextion Editor
    32:41 Uploading the TFT file
    37:57 Testing the custom interface
    44:37 Outroduction
    🔗 Useful links 🔗
    ‣ Sonoff NSPanel: amzn.to/34fqZ5y
    ‣ USB to TTL adapter: amzn.to/3qHKdZa
    ✓ Sample files
    ‣ My demo YAML and HMI files: github.com/mas...
    ✓ Software
    ‣ Home Assistant: home-assistant.io
    ‣ ESPHome: esphome.io
    ‣ Nextion Editor: nextion.tech/n...
    ‣ OpenHASP: haswitchplate....
    ✓ Touch Displays
    ‣ Sonoff NSPanel (US model): amzn.to/34fqZ5y
    ‣ Lanbon L8 (US model): amzn.to/3sV8w8N
    ‣ HA SwitchPlate HASPone: github.com/HAS...
    ✓ Tools and equipment
    ‣ USB to TTL adapter: amzn.to/3qHKdZa
    ‣ Breadboard alligator clip jumpers: amzn.to/3HpU6kX
    ‣ Dupont jumpers: amzn.to/3zfr2JS
    ‣ Pin headers: amzn.to/3sQAHpk
    ‣ 4-pin I2C cables: amzn.to/3JworA5
    ‣ Assorted Dupont connectors: amzn.to/3mNOg52
    ‣ Crimp tool for Dupont connectors: amzn.to/3Hn2TE6
    ‣ Silicone wires (convenient for bench testing): amzn.to/3Hpr1pG
    ‣ Ferrules: amzn.to/3mO13UU
    ‣ Hex crimper for ferrules: amzn.to/32QlJ7G
    ‣ WAGO wire connectors: amzn.to/3ELDke8
    ‣ Precision screwdriver set: amzn.to/3FM5w1L
    ‣ Cliff Quicktest (US model): amzn.to/3zic85B or www.newark.com...
  • Навчання та стиль

КОМЕНТАРІ • 225

  • @ChrisMasto
    @ChrisMasto  2 роки тому +35

    I started a Wiki on GitHub where we can collect useful links, tips and tricks, etc. Feel free to contribute to it: github.com/masto/NSPanel-Demo-Files/wiki

    • @TradieTrev
      @TradieTrev 2 роки тому +1

      You legend! There's so many possibilities with this device! My mind goes straight to gutter and I'm going to have titty girls on mine hahaha

    • @ricardoramirez-ue5li
      @ricardoramirez-ue5li Рік тому

      Great stuff at the wiki!
      & a million thanks for sharing all this :)

  • @thisfeatureisbad
    @thisfeatureisbad 2 роки тому +12

    THIS IS WHAT I WAS WAITING FOR 2 MONTHS, the custom UI. 😍 Sorry for caps.

  • @EngineerK
    @EngineerK 2 роки тому +13

    You have a great pace with how you present, not wasting time on trivial stuff. Good job. I think we need lovelace-mini for this device.

  • @qbranchrg
    @qbranchrg 12 днів тому

    Superb, thank you. This has helped me to make the decision to use an NSPanel for my home display. I already use ESPhome for my own ESP32 / ESP8266 boards, so this is perfect!

  • @jordancoleman1608
    @jordancoleman1608 2 роки тому +22

    Fantastic video, and great timing for my two NSPanels that just arrived. Looking forward to getting them connected to Home Assistant with custom UIs. Thanks!

    • @andybgrant33
      @andybgrant33 2 роки тому +4

      Oh boy. I can see GUI development becoming quite the rabbit hole. Can't wait!

    • @michiganmitten
      @michiganmitten 2 роки тому

      Same here! Thankyou! Great video walkthrough!

    • @jasongoldenberg973
      @jasongoldenberg973 2 роки тому +1

      i am playing with these too jordan!.. you running HA at home? I cant fit all my code on one page, which is your must have!

  • @schulz461
    @schulz461 Рік тому +1

    Absolutely amazing video! I have no intention of ever using this product, and I find most other home automation tutorials to be either extremely slow and boring, or, too quickly paced with little or poor explanation of what was actually done.
    You explained everything perfectly and I look forward to watching your future content!
    THANK YOU! ❤

  • @tedev
    @tedev 2 роки тому

    omg. i admire your patience man. i am a software developer and when i saw this video i was like "no way. i am not doing all that just to make a poorly-made wall-monitor-switch useful!
    but ... as i said. good work. i believe it was very detailed

  • @NathanOKane
    @NathanOKane 2 роки тому +6

    Great job! I've grown to like esphome over tasmota at this point. I really wish stuff like this could be more approachable, but with the way you organized the video I can follow it. Looking forward to trying this with similar products.

  • @cam_DA_Hawkdriver
    @cam_DA_Hawkdriver 2 роки тому

    Good video! I bought two for a house I’m building and wanted more info after I received them. I stumbled upon your channel. Now, I’m waiting for your next video that makes this thing prettier after you custom load with ESP Home.

  • @Dean_Smith
    @Dean_Smith 2 роки тому +9

    What a great walk through - Thank you very much ! I have my Kickstarter EU version on the bench. Torn between keeping the Sonoff HMI and waiting for the ESPHome component to implement all the Widget functionality, or diving in with the Nextion Editor. Now if only Sonoff would go the whole way and release their HMI and we could amend the default with the nice graphics !

    • @TheMoistpotato
      @TheMoistpotato 2 роки тому +1

      Same here, i just got mine today, and currently just having it idle using the stock eweelink firmware. It will be great once these becoming more widespread and all the ESPhome/tasmota features/goodies become implemented.. I basically for now just want the stock UI with the realtime weather, time, and room temp. but eventually would like some slick customization.
      Vids like this though are great that there is hope to fully unlocking and enjoying these LCD smart switch units. I definitely want to put these in all my rooms considering that once we put open flashed firmware, these units basically become a local lifetime unit without worrying about shutdown cloud services.

    • @marl0wd
      @marl0wd Рік тому

      @@TheMoistpotato @Dean Smith I know this is from a year ago, do you know if ESPhome has now implemented the widgets for home assistant? Wondering if you can now use the stock GUI but add devices / scenes from other sources (not ewelink)?

  • @sekt1953
    @sekt1953 2 роки тому

    Just one more thing:
    Your documentation on github is great, keep it up.
    Thanks

  • @tankgrrl
    @tankgrrl Рік тому

    This was a fantastic video. Thanks! I have two panels set up now and, after braving Nextion Editor and my anti-virus freaking out over one of its files, I got some nice displays set up. Thanks!!!

  • @ThAt0n36Uy
    @ThAt0n36Uy 2 роки тому +2

    Really enjoyed this informative video, been waiting for someone to go in depth on this device and custom firmwares. I would definitely look forward to any future videos on this exact subject in the future if you're so inclined.

    • @ChrisMasto
      @ChrisMasto  2 роки тому +3

      I plan to do one about the Lanbon L8 with OpenHASP, since that may be a better choice to avoid fighting with the Nextion Editor.

  • @stephenwatson2509
    @stephenwatson2509 2 роки тому +4

    Great to see progress on these! The form factor looks perfect a couple of bottoms for the frequent items and soft buttons for the less frequent. Throw in 2 built in relays and a temp sensor is almost just a bonus. I hope they get certified for Australian market.

  • @TwanJaarsveld1
    @TwanJaarsveld1 2 роки тому

    Simply the best video about the NSpanel

  • @sven1858
    @sven1858 2 роки тому +1

    Great video - thanks for this, being able to flash these panels makes me realise the potential for these 👍👍
    {i've never looked at ESP home before}

  • @tjalkuip
    @tjalkuip 2 роки тому

    Don't comment that often, but here I am : great video, thanks!

  • @JanicekTrnecka
    @JanicekTrnecka 2 роки тому

    Hmm, finally a panel that can be "easily" added to HA and fully customized. I am definitely going to order one and try my luck with it.

  • @ddean3732
    @ddean3732 2 роки тому

    Keep grinding Chris... Don't give up. Great vid!

  • @calebjpryor
    @calebjpryor 2 роки тому

    Sonoff Needs Software Panel.. AKA NSPanel. :D. I'm glad to see you present a solution for a product looking for one. the EWW app as I call it is really not good. I'm very happy to hear you call out it as a downside.

  • @andybgrant33
    @andybgrant33 2 роки тому +1

    This was excellent. Thank you for the great reference.

  • @clairerovic
    @clairerovic 2 роки тому

    Late to the game, will order some panels today. How much fun, this will be.
    Looking at this video I might be forced to change my 20+ Tasmota devices to ESPHome.

  • @OdisHarkins
    @OdisHarkins 2 роки тому

    Great job love the detail, excited to see somthing other than a tablet hanging from the wall for HA

  • @NoiseEverywhere
    @NoiseEverywhere 10 місяців тому

    Thank you for this video. I'll try to use the Esphome configuration 'concept' on a different panel.

  • @AnisKadri
    @AnisKadri 2 роки тому

    Great video! Very funny at times too :) Thanks for sharing this.

  • @Lmoooo
    @Lmoooo 2 роки тому

    Thank you for a great tutorial! Got me started with my custom HMI and HA integration. Great work!

  • @shadowpuck99
    @shadowpuck99 2 роки тому

    thank you for posting this video - i now have some new hardware to check out! thank you also for posting the tools and such that you are using.

  • @MarionMakarewicz
    @MarionMakarewicz 2 роки тому +1

    What a sweet project. Thanks for the detailed instructions. Definitely something I'd like to look into.

  • @boomsig9069
    @boomsig9069 2 роки тому +1

    Awesome tutorial! Was looking for a light switch display solution that works with HA for my entrance way. Thanks for sharing!

  •  2 роки тому

    Awesome Video and very well explained! Just got mine, and this weekend will be fun! Thank you! Cheers!

  • @mrmike1972
    @mrmike1972 2 роки тому

    Cool, I just bought a couple panels, downloaded all the software. Can't wait to try it out.

  • @krelis77
    @krelis77 2 роки тому

    That cable out of a PC is a analog audio cable which must be connected from your cd-rom drive to your intern soundcard back in the days. Nice topic 👍💪

  • @scpowered
    @scpowered 2 роки тому

    Awesome! Gives me motivation to get back to work on my home automation setup!

  • @PM13501
    @PM13501 2 роки тому

    Great video with lots of details!!

  • @qwarlockz8017
    @qwarlockz8017 2 роки тому

    What what a great video! you did a spectacular job taking a cool piece of hardware and showing how it can be totally customized! Brilliant. Seems like it is a bit raw still. Maybe someone will come out with a cool integration a bit more like lovelace. But this was cool!

  • @kevinbodell5092
    @kevinbodell5092 2 роки тому

    Great video! I have 4 nspanels and have not jumped into setting this up with home assistant, but now I will be. Your video save me a lot of time, thanks! Would love to see your final screen for use with home assistant.

  • @ChrisS-oo6fl
    @ChrisS-oo6fl 2 роки тому

    Thank you! More videos like this will definitely warrant a sub.

  • @PaulMorley1
    @PaulMorley1 2 роки тому

    Fantastic video. Thank you so much for all the effort. This has definitely inspired me to buy one of these panels.

  • @SurfSailKayak
    @SurfSailKayak 2 роки тому

    Thanks for showing this off. I may have to pickup one to play.

  • @jenslyn42
    @jenslyn42 2 роки тому

    Great video!
    If/when this gets a bit cheaper I'm definitely going to try this too!

  • @jflecool
    @jflecool 2 роки тому

    Very good video cant wait to receive mine and watch your video again!!

  • @UnaKarlsen
    @UnaKarlsen 2 роки тому

    Excellent work! Thank you so much for sharing. I look forward to trying this in my own setup in the not too distant future.

  • @robotron3000
    @robotron3000 2 роки тому

    Fantastic attention to detail, super inspiring!

  • @fonte935
    @fonte935 2 роки тому

    Awesome, thank you! Looks both fun and maddening at the same time, but a great learning opportunity for sure.

  • @AmonReich
    @AmonReich 2 роки тому

    Thank you ❤️
    Best quote: Like in a cooking show I ve prepared something 🤣 👨‍🍳🥧🍽️🥘🍽️

  • @mikesmods317
    @mikesmods317 2 роки тому

    Absolutely great video thank you very much for posting it I’ve been thinking about getting with these this makes the decision for me

  • @seadbutkovic8014
    @seadbutkovic8014 2 роки тому

    Thank you so much for this Tutorial

  • @shaneduffy4853
    @shaneduffy4853 2 роки тому

    Great video - thanks for the content would love to see more like this on your channel

  • @kamilosxd678
    @kamilosxd678 2 роки тому

    Amazing video - exactly what I wanted!!!

  • @etiennedeklerk
    @etiennedeklerk 2 роки тому

    oh wow nice. This is awesome, thanks for the vid. !

  • @FelixMoBu
    @FelixMoBu 2 роки тому

    I had an eye on this things for a few months and your video made me bying one. I only use Hue devices and I am hoping to make this thing a 'friend of Hue' by my self ^^

  • @Nicktals
    @Nicktals 6 місяців тому

    Using this as a project to try and learn esphome, as a bit of a HA noob. 🤞

  • @MegaUndertaker3
    @MegaUndertaker3 2 роки тому

    excellent job! keep up the good work!

  • @stronati
    @stronati 2 роки тому

    Great video and marvellous guide. Thanks a lot.

  • @pista01slk
    @pista01slk 2 роки тому

    Excellent video! Well done!

  • @chrisgardner4144
    @chrisgardner4144 2 роки тому

    Thank you, that was hard !!!

  • @alconaft4343
    @alconaft4343 2 роки тому

    Awesome video, has ordered for myself for test.

  • @Lup3r
    @Lup3r 2 роки тому

    Great video, I learned a lot! Thank you for the tutorial

  • @aswinramachandran
    @aswinramachandran 2 роки тому

    Thank you Christopher

  • @marcoernst22
    @marcoernst22 2 роки тому

    Excellent tut. Thanks!

  • @rmbr
    @rmbr 2 роки тому

    Excellent video, thank you very much for it!

  • @geneliverman6827
    @geneliverman6827 2 роки тому

    Awesome job, this is super helpful!

  • @jmorris644
    @jmorris644 2 роки тому

    Thanks so much for this video. It gets me everywhere with the exception of my final 2 steps. I do not use HA so I need to research how to load tft files using Tasmota and I also need to figure out how to send the actions via MQTT.

  • @JBR.1974
    @JBR.1974 2 роки тому

    thanks for the video...really enjoyed seeing your steps...and has given me lots of ideas....subscribed too so looking forward to your future videos

  • @Poundy
    @Poundy 2 роки тому

    interesting looking device, thanks for doing the vid!

  • @jspafford
    @jspafford 2 роки тому

    I’ve been seeing this thing around and was curious. Exactly what I expected. I wish apple would make this but with a better screen and iOS. That would be amazing. $99 price point. You could justify that because it’s buying into their ecosystem. The pods and Apple TV and all the accessories.

  • @stevechilvers5631
    @stevechilvers5631 2 роки тому +1

    Thank you for this video. Managed to download my own screens and integrated into home assistant in a couple of hours. I did get stuck at one point but looked at your GIThub and noticed I was missing the dependency to the github assume this is for the nexition support as I was seeing communication errors before I added this.

  • @tincanpete
    @tincanpete 2 роки тому

    Super helpful, thanks!!!

  • @corypechon
    @corypechon 2 роки тому

    Excellent video!

  • @thisfeatureisbad
    @thisfeatureisbad 2 роки тому +1

    You can set the 2 buttons to do something else by going into the scenes and add a smart device after pressing the physical button. But, I would like to see that thing in the ESPHome or a Tasmota to control the Sonoff light bulbs.

    • @ChrisMasto
      @ChrisMasto  2 роки тому +1

      Thanks! I only spent 30 seconds with their app, so I probably missed a lot of features it has. I knew I had no plans to keep it around.

  • @VAKUL-DC
    @VAKUL-DC 2 роки тому

    Thanks for the tutorial.

  • @nilsbebelaar
    @nilsbebelaar 2 роки тому +3

    Amazing video, works like a charm! Do you know what Nextion screen model the EU version uses, or how I can find out which version to select in the Nextion Editor?

    • @nilsbebelaar
      @nilsbebelaar 2 роки тому +6

      I just realized that even though the US version looks bigger, the EU version uses the same screen type, positioned in landscape.

  •  8 місяців тому

    And how to use a signal cable insted of wifi from device. So we have a fail safe if wifi going down.

  • @jeffeberl12
    @jeffeberl12 2 роки тому

    I wish there were more people doing portrait designs. I want to eventually make my own HMI, but I would like to have a decent HMI to start with that is in portrait mode. Most resources are for the landscape EU version, and even your newer videos have moved to the landscape mode.

  • @chrislauyp
    @chrislauyp Рік тому

    thanks Chris

  • @SidYoung-au
    @SidYoung-au Рік тому

    10A relay but 2A tracks... you could add thicker wiring but best to use a Contactor, just to be safe.

  • @riens3881
    @riens3881 2 роки тому

    Nice! Thank you 🙏🏼

  • @billysgeo
    @billysgeo 2 роки тому +1

    you can get a nice 7" used tablet for $100 and have this functionality + much more

    • @ChrisMasto
      @ChrisMasto  2 роки тому

      Just a few reasons why that might not be a direct equivalent:
      * Form factor doesn't work as a switch replacement
      * No physical buttons
      * Doesn't control loads
      * More complex interface, have to deal with kiosk browsers etc.
      * Mounting more complex to avoid unsightly USB cable
      * Battery swelling issues if charging isn't managed (or batteries removed)
      I also have a tablet where it makes sense and I like it for that application. But it's not the same at all.

  • @slarti4242
    @slarti4242 2 роки тому +2

    Thank you very much, this helped a lot with my 2 early bird units. Does anyone have any clue how sonoff have implemented the swipe to change page in their UI?

    • @ChrisMasto
      @ChrisMasto  2 роки тому +2

      Don't know how they did it, but here's an example from the excellent unofficial forum: unofficialnextion.com/t/how-to-implement-swipe-up-down-using-sendxy/1383/3
      It gives some feel for the level of hackery you have to go through to get a Nextion to do anything outside of its basic functionality. I would guess that the Sonoff custom UI is thousands and thousands of lines of spaghetti code.

  • @joaquimribeiro2819
    @joaquimribeiro2819 2 роки тому

    Excellent thanks !

  • @martynaslukas4340
    @martynaslukas4340 Рік тому

    All good, but i hesitated to back them up on crowd fund just because they have only black option... Would love to have white one. Have a bunch of sonoff devices with esphome flashed

  • @mogenslundjepsen5158
    @mogenslundjepsen5158 2 роки тому

    Thanks for sharing

  • @serhioromano
    @serhioromano 2 роки тому

    If I flash this panel with tasmota, will I still be ably to flash with TFT?

  • @theZ3r0CooL
    @theZ3r0CooL Рік тому

    I was going to attach headers but I feared they wouldn’t fit under the lid as the existing 8 were in a cutout. So I pushed female duponts onto headers passed through the underside. You also don’t have to attach to that ic, just short IO to ground and hold the reset button on the bottom on the board near the thermistor while powering and connecting the serial UART to usb.

  • @treestuffer
    @treestuffer 6 місяців тому

    Great video! could I use the interface to create a puzzle for a door lock keypad as part of an escape room?

  • @elesjuan
    @elesjuan 2 роки тому

    Thank you very much for putting the time into this video. I was considering buying one of these for my HA setup, but after seeing how you have to create touch interfaces... I'm good.... Hard pass. 😳

  • @Daniel-vd4mk
    @Daniel-vd4mk 2 роки тому +1

    Good job man, unfortunately they didn't included a must have proximity sensor on this device , is like they have no brain lol

  • @dankarization
    @dankarization 2 роки тому

    I was shocked knowing you can actually flash this thing

  • @theZ3r0CooL
    @theZ3r0CooL 2 роки тому

    You can build it into a range hood and if you forget to turn on the fan, the heat will turn it on for you

  • @5mxg
    @5mxg 2 роки тому

    Thanks!

  • @skaramicke
    @skaramicke 6 місяців тому

    15:49 I've been unable to measure continuity between two pins pushed deep into the holes on my smaller version NSPanel so I doubt that "metal" is conductive. It's perhaps a metal plastic RF shield that has the plastic side facing the board?

    • @ChrisMasto
      @ChrisMasto  6 місяців тому +1

      Better safe than sorry?

  • @MrBobWareham
    @MrBobWareham Рік тому

    I love Sonoff hardware, but I could not put up with Ewelink so sold all my Sonoff hardware and would not use again so thanks.

  • @TecSanento
    @TecSanento 2 роки тому

    You could use this to power the valve of the floor heating system for that room

  • @highlights6844
    @highlights6844 Рік тому

    i keep getting "Failed to initialize. Try resetting your device or holding the BOOT button" although all pins are plugged in correctly to soldered headers, including the "io0-gnd"

  • @Madeyalookdomoz
    @Madeyalookdomoz Рік тому

    Any idea how i push through different HMI files to multiple NSPanels? Development tools only seems to push it to one Panel

  • @evanmoore7631
    @evanmoore7631 5 місяців тому

    When I update the YAML file wirelessly after updating the tft upload it just keeps repeating Nextion is not connected and won't finish the update. Any tips?

  • @Bartek2OO219
    @Bartek2OO219 2 роки тому

    Nice video!

  • @Robbrown92
    @Robbrown92 Рік тому

    mine is stuck on the splash screen on boot and wont load into the display, it now spams in the logs nextion is not connected

  • @RaphaelLorenzetoAbreu
    @RaphaelLorenzetoAbreu 2 роки тому

    Hello, awesome video! I`m just stuck trying to upload the tft to my nspanel. Everytime I run the service I get the log that it is "[nextion_upload:175]: Requesting URL ..." then the display reboots and comes back to the original screen. Did anyone had this issue??

  • @sansopheakh6943
    @sansopheakh6943 Місяць тому

    Can we use Wake Word on NSPanel without Tasker App?