HA SwitchPlate HASPone: DIY In-Wall Touchscreen Home Assistant Controller

Share your Projects!
1417

There have been a few questions about how to use the FontAwesome icons. The project documentation now covers the topic here. From the docs:

FontAwesome (“FA”) icons are now included with HASP in fonts 6-10 ( Noto Sans fonts). To use these, open the FontAwesome Cheat Sheet, browse to any of the “Solid”, “Regular”, or “Brands” pages, highlight the icon in your browser, and then paste the result into your automation or the Nextion editor. The result in your editor should look like this: 

When sent to your LCD with the appropriate font selected (again, only fonts 6-10), the icon should show up as seen on the Cheat Sheet. You can also mix text and icons in the same string.

https://i.imgur.com/dpWWpMq.gif(image larger than 3072KB)

1 Like
1418

Has anyone got a good way of turning on (turning up backlight level) the screen on touch? I don’t want the screen to be on 24/7 and until I see a nicely integrated motion sensor, a timeout & ‘wake on touch’ seems to be the go.

The only problem I see is the switchplate doesn’t present a sensor for ‘touch’ to HA, my other worry is it’ll just activate the action on the screen currently, though that could potentially mitigated by a backlight condition.

EDIT:

Came across this handy automation, thanks Zonko16!

1 Like
1419

See also thsp and thup from the Nextion Instruction Set.

-t 'hasp/plate01/command/json' -m '["thsp=60", "thup=1"]'

1420

I can’t remember which one, but one of those commands thsp or thup is persistent and even if you were to cycle power on the device, maintains the backlight level. This bit me once when I thought I had a failed screen that wouldn’t turn on. I had to go in through the nextion editor, connect the display over serial, and send it a brightness command of 100 to get it back. Even re-downloading the project/firmware did not clear the zero brightness.

1421

I gotchu fam:

614×602 29.2 KB

another solution: -t 'hasp/plate01/command/json' -m '["thsp=0", "thup=0", "dims=100"]'

1 Like
1422

is there any difference with the beta version?

1423

Yes, if you were running v0.40 beta you will want to re-deploy w/ the release version.

1426

I’ve got the new version working fine. I use the examples and modify them to my needs. On the status page, using nws or dark_sky, I get a big A wearing a hat in between the Celsius temperature and the symbol. Does anyone have suggestions why or how to get rid of it?

1427

That’s a pretty good sign that you haven’t yet updated the LCD firmware. Go the web admin page on the device and scroll down to the bottom, there should be some device information listed there. Of interest are the following two values:

HASP Version: 0.40
LCD Version: 2

If you don’t see LCD Version 2, go to the “update firmware” page and select “Update LCD from URL”.

1428

Thanks luma. That explains why I couldn’t get the icons to work as well!

1 Like
1429

Very interested in this project, and it seems, a little late to the party. I searched around the internet and could not find a good answer to this: Has anyone designed a single “switch plate” just for the LCD so it could be flush-mounted to a wall by itself? This would allow you to remote mount the power supply / other PCB in a nearby box. By separating the components, you would not need an empty wall cavity directly behind where you mount the LCD, or no wall cavity at all if you ran the wire on the wall surface as well. It would also be easier to patch the holes if you decide to move/remove it. My specific application would be to attach the control PCB to an existing 12v power supply on top of my kitchen cabinets, and run 18/4 wire down an adjacent wall to the display. I haven’t dug into it, but it might also be possible to use the different sizes of LCDs offered by Nextion. Thanks everyone!

1430

I like the updates… Things are still complicated for the standard user. How do I connect my Nest thermostat to page 9? I see the dummy entries show up as states, but how do I make it work with what I have? Do I have to remove all the dummy stuff?

1431

It all done in the automations

if HA can see the nest and control it then the switchplate can do it

you mite have to change some bits inside the hasp_plate01_p9_hvac.yaml to meet your needs

1432

Just navigate to config —> packages —> switchplate folder with your favorite file browser (samba share etc).
Find the page 9 HVAC. And then open it in a text editor. Do a control f and find all instances of the thermostat.MQTT (forgot the exact name of the dummy thermostat) and replace it with thermostat.nest (whatever the name of yours is).
It’ll pretty much work out of the box. I had to change “temperature” to “temperature_current” with my ecobee to show the current thermostat temp as well.
I don’t know if it was just me or not but the temps were opposite what I would expect. That is the heat on top was my AC setting and the AC on bottom was my heat settings so I just changed the colors and the icon in front of them to switch them around.

1433

I wish there were comments in each of the “page YAMLS” that had better notes. Perhaps a section at the top that explains the proper way to edit each of the YAML files to make it work in your setup.

For HVAC, I edited the file: hasp_plate_p9_hvac.yaml I changed climate.mqtt_hvac to climate.thermostat for the Nest.

The heat and cool up and down arrows now just say “NO.” I can get the arrows to show up, when I change the nest to the mode: auto. I would rather not do that. When I get the arrows to appear, when I press up and down, there is no response.

When my thermostat is set to auto, my temperature values are also switched. How do you change the icons and color? That sounds hard…

Lastly, I noticed when the thermostat is in auto, and the heat comes on, the temperature value says “NO.”

Thanks for your help!

climate.mqtt_hvac (Dummy States)

hvac_modes: auto, off, cool, heat, dry, fan_only
min_temp: 55
max_temp: 95
target_temp_step: 1
fan_modes: auto, low, medium, high
preset_modes: none, away
current_temperature: null
temperature: 72
target_temp_high: 76
target_temp_low: 68
fan_mode: null
preset_mode: null
friendly_name: MQTT HVAC
supported_features: 27

climate.thermostat (Nest Thermostat)

hvac_modes: auto, heat, cool, off
min_temp: 50
max_temp: 90
fan_modes: on, auto
preset_modes: none, away, eco, Away and Eco
current_temperature: 72
temperature: 72
target_temp_high: null
target_temp_low: null
fan_mode: auto
hvac_action: idle
preset_mode: none
friendly_name: Thermostat 
supported_features: 27

UPDATE: “NO” for the temps was due to the thermostat putting NULL values in the attributes when not running auto cold / heat mode.

1434

How did you change the colors and the icon font image to switch the temps? I’ve tried looking everywhere from Nextion to searching the code.

I was able to get the rest of this to work, I actually removed my nest. I’ve been wanting to remove cloud based IOT devices. I had to do all the steps you mentioned above. I believe my slowness issues were due to the fact that pressing the up or down arrows had to go to the nest cloud to update and that was extremely slow.

It also looks like for this to work “out of the box” you have to have your thermostat set in auto cold / heat mode. If you just want it to work with on heat or cold mode, I guess you would need to modify something else?

1435

Color properties have a “.pco”, “.bco”, “.pco2”, and “.bco2” extension, you can find most of the HVAC color attributes here. Your point about better comments in the code is well taken, that makes a lot of sense and I’ll get to working on that.

The “mode” selection for your thermostat is set by the component in Home Assistant. This automation cycles through the available modes as Home Assistant understands them.

1436

Sorry you didn’t answer what I was looking for. I want to know how to change the logo on the HVAC screen. I want to reverse the fire and cold logo.

1437

I’ve added my code below with the colors and icons switched but in the interest of teaching a man to fish:

If you look in the documentation @luma has documented all of the resources that you need. Here they are:

  1. An understanding of the screen and which button is which number so you know where to look to change the elements of the button. This can be found here. I always keep these diagrams up for reference. For instance if you want to modify the baclground color of the up arrow you would look at the diagram and the top most up arrow would be p9 b7 for page 9 button 7. Then you would change the bco to the color of your choice.
    If you wanted to change the color of the “AC” number then you would look at the diagram identify it to be p9 b9 and change the pco which is the foreground color of the text.
    To know what the pco bco etc means refer to NEXTION documentation here
    Here is part of that page:
<font> is the number of the Resource Font
<pco> is the foreground color of text (Color Constant or 565 color value)
<bco> is a) background color of text, or b) picid if <sta> is set to 0 or 2

  1. Knowing NEXTION color codes so that you can identify which colors are which and change them to whatever you’d like. The NEXTION editor can be found here

  2. Pasting in the icons that you’d like in the places that you like. Since everywhere that you see icons it shows a small square, you’ll have to go to the fontawesome cheatsheet and grab the icon that you want (copy the icon itself not the word next to it) and paste it in the YAML. The cheatsheet can be found here

It’s all found in this area of the page 9 YAML at the top.

    action:
      - service: mqtt.publish
        data:
          topic: "hasp/kitchen/command/json"
          payload_template: >-
            ["p[9].b[4].font=6","p[9].b[4].txt=\"Mode\"",
            "p[9].b[5].font=6",
            "p[9].b[6].font=10","p[9].b[6].ycen=2",
            "p[9].b[7].font=7","p[9].b[7].bco=63488","p[9].b[7].txt=\"\"",
            "p[9].b[8].font=7","p[9].b[8].bco=31","p[9].b[8].txt=\"\"",
            "p[9].b[9].font=10","p[9].b[9].pco=31","p[9].b[9].ycen=2",
            "p[9].b[10].font=7","p[9].b[10].bco=63488","p[9].b[10].txt=\"\"",
            "p[9].b[11].font=7","p[9].b[11].bco=31","p[9].b[11].txt=\"\"",
            "p[9].b[12].font=10","p[9].b[12].pco=63488","p[9].b[12].ycen=2"]
      - service: mqtt.publish
        data:
          topic: "hasp/kitchen/command/p[9].b[5].txt"
          payload_template: '"{{ states("climate.thermostat")|replace("fan_only","Fan")|replace("_"," ")|title }}"'
      - service: mqtt.publish
        data:
          topic: "hasp/kitchen/command/p[9].b[6].txt"
          payload_template: '"  {{ state_attr("climate.thermostat", "current_temperature") }}°"'
      - service: mqtt.publish
        data:
          topic: "hasp/kitchen/command/p[9].b[9].txt"
          payload_template: '" {{ state_attr("climate.thermostat", "target_temp_high") }}°"'
      - service: mqtt.publish
        data:
          topic: "hasp/kitchen/command/p[9].b[12].txt"
          payload_template: '" {{ state_attr("climate.thermostat", "target_temp_low") }}°"'
1 Like
1438

Whoops, you’re right I completely misunderstood! Finding the icons is a bit of a pain because they won’t render correctly in your editor so everything looks like a square box. Instead, follow the advice from @jmyler12 above and check out the map of button IDs for each page.

There you’ll find that p[9].b[9] and p[9].b[12] are the buttons you are interested in. The .txt attribute sets the text to be displayed on that button. The lines where this happens are below: