Sonoff NSPanel by ITead - Smart Scene Wall Switch based on ESP32 and custom Nextion Touch Screen Panel Display (non-Pro variant)

Wait… what?? Just bought 6 of these to fit my EU sockets.

Edit: My EU Sockets are 68mm. No worries :sweat_smile:

Standard EU sockets are 68mm, which it what they are designed for.

1 Like

I’ve just added a sensor to read an outdoor temperature sensor from HA. It reads it when it first boots but then not again. Anyone know how to refresh it every 5 minutes or something?

Something like this should work, substitute with your own sensor :slight_smile:

text_sensor:
  - platform: homeassistant
    id: sonos_media_title
    entity_id: sensor.sonos_livingroom_currently_playing
    on_value:
      # Push it to the display
      then:
        - lambda: 'id(disp1).set_component_text_printf("infobar", "%s", x.c_str());'
1 Like

Thought I’d share what I have added from @marcfager files. 20220109_024035_1_1

8 Likes

OK so I received the NS panel today and as expected the existing integration picks up and can control the 2 physical switches with no flashing needed. So far the only way I have been able to trigger a HA automation is by using a Sonoff switch or plug with nothing connected to it. The panel toggles that and then the HA automation runs based on the switch/plug state change. Works great but not ideal as you need a spare physical switch for each widget/automation, but it does work for anyone that doesn’t want to flash it just yet.

My NSPanel project deployed!

What code did you use?

I don’t use temperature but show CO2 and it updates when the HA entity updates.

Beautiful!! any chance you could share your files?? I simply love it.

  # Grab current temperature from Home Assistant
  - platform: homeassistant
    id: outside_temperature
    entity_id: sensor.garden_sensor_temperature
    attribute: temperature
    on_value:
      # Push it to the display
      then:
        - lambda: 'id(disp1).set_component_text_printf("tempoutside", "%.1f ""\xb0""C", id(outside_temperature).state);'

This is what I have now and that seems to be updating. This was already in there to update the current temp as measure by the panel but I’m not bothered by that at the moment so I just changed it to suit.

1 Like

It is a lot of work but it is comming along nicely :slight_smile:
Still need to create the weather screen but the icon on the main changes with the actual weather.
Also the home status icon is changing when the home status changes
Also need to make the page for the curtains
The announce screen you can push the button if the soup is ready and it announce over the google home speakers in the house,







The code can be found here on Github

12 Likes

Very nice work on all those buttons!

Have anybody set a slider? ex for led strip with brithness?

1 Like

Really useful!

Couple of questions…

1. If I run your HMI file through the debugger in the Nextion Editor, I can’t see how the buttons have “states” if they’re turned on and off. How are you handling that?

Sussed that one. Need to send the component ID on touch AND release.

  1. Extending Q1, what happens to a button if you change something outside your NSPanel? For example, if you set the home status to away through Home Assistant, how are you telling your panel to light up the image of the car?

So far, so good. This is my home screen. At the moment, it just controls three input_booleans, one for each mode the house might be in, in home assistant which are used for conditions in Node-RED. E.g. If motion is detected in the bedroom, switch the lights on unless “Night mode” is on. In HA, I have it so that only one of these can be on at any one time.

So I have the buttons on here controlling the input_booleans in HA fine. But if one gets changed in any other way then I can’t work out how to update the button states in Nextion.

  1. In the hmi editor you have the touch event and touch release event and you need to tick the box then it will send a command to esphome and this you can use.
    You need to make sure the page_id and component_id for your button
  - platform: nextion
    name: $device_name Thermostat up
    page_id: 6
    component_id: 9

This is done in the yaml code on the esp module.
If the status changes you call for another picture to be shown in that place

      int status_home=26; //home button on page home status
      if (id(home_status).state == "Thuis") {
        status_home=27;
      } else if (id(home_status).state == "Weg") {
        status_home=26;
      } else if (id(home_status).state == "Vakantie") {
        status_home=26;
      } else if (id(home_status).state == "Slapen") {
        status_home=26;
      }
      id(disp1).send_command_printf("home_status.home.pic=%i", status_home);
      id(disp1).send_command_printf("home_status.home.pic2=%i", status_home);
      
      int status_away=28; //away button on page home status
      if (id(home_status).state == "Thuis") {
        status_away=28;
      } else if (id(home_status).state == "Weg") {
        status_away=29;
      } else if (id(home_status).state == "Vakantie") {
        status_away=28;
      } else if (id(home_status).state == "Slapen") {
        status_away=28;
      }
      id(disp1).send_command_printf("home_status.away.pic=%i", status_away);     
      id(disp1).send_command_printf("home_status.away.pic2=%i", status_away);    
      
      int status_sleep=30; //sleep button on page home status
      if (id(home_status).state == "Thuis") {
        status_sleep=30;
      } else if (id(home_status).state == "Weg") {
        status_sleep=30;
      } else if (id(home_status).state == "Vakantie") {
        status_sleep=30;
      } else if (id(home_status).state == "Slapen") {
        status_sleep=31;
      }
      id(disp1).send_command_printf("home_status.slapen.pic=%i", status_sleep);      
      id(disp1).send_command_printf("home_status.slapen.pic2=%i", status_sleep); 
      
      int status_vacation=32; //vacation button on page home status
      if (id(home_status).state == "Thuis") {
        status_vacation=32;
      } else if (id(home_status).state == "Weg") {
        status_vacation=32;
      } else if (id(home_status).state == "Vakantie") {
        status_vacation=33;
      } else if (id(home_status).state == "Slapen") {
        status_vacation=32;
      }
      id(disp1).send_command_printf("home_status.vacation.pic=%i", status_vacation);       
      id(disp1).send_command_printf("home_status.vacation.pic2=%i", status_vacation);
2 Likes

Thank you! I think your reply crossed with my edit. I’ll give that a try for Q2 now.

This feels like a hacking session or design sprint at work :slight_smile:

I did see you did find the answer for the first question :+1:
I have been working on this all day good thing it was raining all day

1 Like

Yaml, HMI, tft and images available here

edit: update yaml to include @crlogic work on syncing states on display with home assistant

I think you could save a lot of time and effort. Might be too late. I’m using just 2 images of 480px x 320px for my panel. One has everything off, one has everything on.

Set the STA to “crop image”. When you set picc and picc2 on a button that is, say 100px x 100px then it will only visually change the 100 x 100 section like using the crop image. It would save you having to slice all your screens into little buttons and your code will always be the same. I’m just testing the theory so I could be wrong. That’s how it seems to be working for me though.

Off
Off

On
On


To read the input_booleans I use for the"house mode" in HA. I have 3 for day, evening and night which just change the behaviour of a load of Node-RED flows. Returns “on” of “off”:

#This is the first icon for sunrise
  - platform: homeassistant
    id: day_mode
    entity_id: input_boolean.day_mode

Then, under the display section:

# This section looks at the text sensor above (day_mode) and sets the images used for a button with the STA set to "crop image"  
    lambda: |-
      int status_day=0;
      if (id(day_mode).state == "off") {
        status_day=0;
      } else if (id(day_mode).state == "on") {
        status_day=1;
      }
      id(disp1).send_command_printf("page0.b0.picc=%i", status_day);
      id(disp1).send_command_printf("page0.b0.picc2=%i", status_day);

So, b0 is the button with the STA set to “crop image”. It’s 100px x 100px. I’m just using the 2 images above. off is image id 0. on is image id 1. When the state of an input_boolean changes to on, for example, the display just shows the 100px x 100px section from the “on” image making it look like only that image has changed.

I might be teaching everyone to suck eggs with this but, if I write it down, It’ll stick in my head. I’ve tested it on my live box and it seems to work. I’m loathe to do too much as it’s the middle of the night, If I mess up and the bedroom lights go on my other half will be in here VERY quickly to let me know :grinning_face_with_smiling_eyes:

1 Like