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

Good questions all around… but sadly HASP itself won’t do either of the things above :frowning:

If you need to switch a load in the box while also controlling the rest of the house, these things are cheap and tiny and should be able to fit in the box with the HASP for most people. If not, it may also be positioned in the light fixture itself.

The ESP8266 is WiFi only, so no ethernet and thus no PoE, but a PoE splitter + the DC power option available on the HASP PCB would allow you to power the project via PoE. Network will still happen over WiFi in that situation, PoE would be for power only.

@luma Thanks for the Answers! I appreciate @luma all you do for the HA community.

Hey - thanks for this awesome setup! Just got my first one almost working - everything is connected and talking, but the lovelace dashboard wasn’t created - so i can’t hit the 1st time setup.
Tried manually creating a few ways but none work, may just be syntax on my part but i’ve tried copying the hasp_plate01_lovelace.txt into various places and got no where.

I ran the bash command, which has created all the entities, automations, scenes etc - just no lovelace.

How can i create these, or what have i done wrong?

Any feedback, much appreciated.

1 Like

Hey man I really need to update the docs! So what you need to do is to grab that lovelace configuration and then paste it into your “raw” UI config.

From the Hass web UI:

  1. click the “⋮” icon in the top-right
  2. select “Configure UI”
  3. click the “⋮” icon in the top-right again
  4. select “Raw configuration editor”
  5. paste your lovelace configuration from hasp_plate01_lovelace.txt at the end of this file
  6. click the X icon on the top-left to close the Raw configuration editor
  7. click the X icon on the top-left again to close the Configure UI

Hey @luma - thanks for this.

I had done that last night and it created a blank dashboard - re-done it now and it’s worked.
Must’ve been my error somewhere - apologies.

Thanks again!

1 Like

Couple more questions i’m afraid. Got it mostly up & running however.

Im using a slightly larger screen, so have gone through and expanded the individual items in the Nextion File - the front page is fine now although i’ve had issues where it looks mis-aligned and icons missing. The text is too small, but i think i know how to fix this - reimporting larger fonts? Should be fine.

Where i get out of my depth is on the rest of the pages.
Most have odd icons (alarm page, media player etc) do i need to set these explicitly - or does this suggest one of my autotions has failed to set these items?

On the media player - i get track title, no artists, and the buttons don’t seem to work.
Pics:

Really looking forward to cracking this and getting a few around the house.
If it’s helpful to anyone - here is the Nextion File for the 3.5" screen NX4024T035
https://gofile.io/d/8ojW8k

Got the front-page displaying correctly now (photo in album) do i need to create new automations to respond to these events, the ones in place currently are locked to editing in the gui?

This is going to get pretty deep pretty quickly for you as the new display is going to require touching nearly every automation in the package.

For example, the “Lights On” text is in button p[1]/b[4]. If you want to change the size of that text, you need to modify the font being used. This is done in the existing automation here.

From that example:

	    action:
      - service: mqtt.publish
        data:
          topic: "hasp/plate01/command/json"
          payload_template: '["p[1].b[4].font=7","p[1].b[5].font=7","p[1].b[6].font=7","p[1].b[7].font=7"]'

There we’ve set the font for that button to font 7. Check out the table of available fonts in the project here.

There we see that font 7 is Noto Sans Regular 48 point. If you want that text to be bigger, change that to font 8 which will be Noto Sans Regular 64 point.

Then… go do that everywhere else. It’s going to be a project…

For the media player, take a look here. You need to rename the media player entities to match your own system for that to function.

1 Like

Ok - i think that all makes sense.
Will give it a go.

Thanks again.

1 Like

Have most of it understood and working now, but not able to get icons to draw on p2 or p3.
P1 icons display fine, but i see those sent without the xstrg.
Any ideas on how i can troubleshoot this? The text is updating fine.

Have a smaller screen arriving sunday to match the project, but still i’d like to understand whats going wrong here and try and fix it.

Depends heavily upon how you are drawing icons on pages 2 and 3. On page 1 the icons are part of the main text string applied to the button itself. That’s nice and easy, and works great if the text font and left/right justification are going to be the same as the icon.

On pages 2 and 3 you’ll find examples of how to place icons arbitrarily, which means they can be any size or in any position on the screen. That’s great, but it also needs special handling because those icons will be overwritten as soon as any element underneath them on the screen is refreshed, which happens a lot.

From the p2 example automations:

# This is a really goofy approach to doing things.  Page 2 provides 4 buttons
# which can display text.  A single text field can have a single font size
# and left/right/center justification.  On this page, I want text of various
# sizes right aligned, with icons of the same size left-aligned.  There isn't
# any way to make both of those things work in a single text field in Nextion.
#
# So... what we do here is call the Nextion command `xstr` to place text
# arbitrarily on the screen.  With this command we can use the FontAwesome
# code points of the included fonts to put icons anywhere we want!
#
# However, this approach has a lot of problems which we then need to handle:
# * Icons placed w/ `xstr` only apply to the current page, so only attempt
#   this while Page 2 is active.
# * Any button interaction (press, release, new text, new color, etc) 
#   overwrites the icon, so we need to catch these events and put the icon
#   back on top.
# * The events we capture take time for the Nextion to process, so insert a
#   1 msec delay command which will allow the Nextion to fully process the
#   prior event.

You can see the examples of how all this is being handled in the p2/p3 automations. It’s kind of a pain in the neck but it does have the benefit of allowing you to declare any icon to be in any place on the screen and do it all from Home Assistant without modifying the HMI.

1 Like

How can i show an Entity Value in a Button?
for example: sensor.klima_energymeter_active_power
in Button p3.b5

This bit shows an example of sending the temperature to a button.

If you’d like some help working on your automations, the best approach is to share the code you have right now, and then people here can review and maybe point you in the right direction.

i got it working now, thanks

  # Display PV Energy on HASP when updated in Home Assistant
  - alias: hasp_plate01_p3_UpdatePVEnergy
    trigger:
      platform: time_pattern
      # Matches every minute
      seconds: 0
    condition:
      - condition: state
        entity_id: "binary_sensor.plate01_connected"
        state: "on"
    action:
      - service: mqtt.publish
        data:
          topic: "hasp/plate01/command/p[3].b[5].txt"
          payload_template: '"PV   {{states.sensor.switch_nas_energy_power.state}}W"'
1 Like

Hi luma, or anyone else that can help
Have you thought of modifying buttons 1-3 to rather do Previous Page, Home Page, Next Page for example rather than pointing to a specific page? As I understand it, and please correct me if I’m wrong, you can only select 1 of 3 pages now as set up in the UI Page Selection screen.
I’m very new to HAS and not a programmer at all although I can follow it (sort of) and understand a little bit.
By the way, @luma, thank you for this project and all the time and effort you put in as well as sharing with everyone!

Hi, so first of all thanks a lot @luma for this great project!
Finished my “Desktop” switchplate

Stand and display are held by magnets.

STL Files : https://www.thingiverse.com/thing:4567813

6 Likes

WOW that is sexy! Great build @soap!

1 Like

Ok, so, eventually got it working after figuring out the correct syntax. Knew I had to add or subtract 1 from the value of the active page state.

action:
      - service: input_number.set_value
        data_template:
          entity_id: "input_number.hasp_master_console_activepage"
          value: "{{states('input_number.hasp_master_console_activepage')|int + 1}}"

Trying to get my HAswitchplate going, when I go to the ip giving by device, it ask for username and password to sign in. I can not remember what it is.

Has it ever been successfully configured? If it is able to connect to MQTT, you can tell it to factory reset over MQTT by sending an empty message on the topic hasp/plate01/command/factoryreset. If it has an admin password assigned and no connection to MQTT, then you’re going to have to reflash as there are no backdoors that I’m aware of.

Thank you I will need to reflash since mqtt is not working.