openHASP: An MQTT driven Touchscreen / Scene controller

Thank you.

Edit, interesting. A really nice start.

image
is there anyway to adjust the ‘Awake brightness’ value from an MQTT command?
just thinking this would be nice to adjust based on if night or day.

Hi’
In earlier versions, you could set this with the ‘startdim’ command (config/hasp)
Not sure if this is supported in later versions. I can’t get it to work in v0.6.3-dev

Hi - simple question; why do I have the name of my plate on the top left corner?
Where is it coming from, how do I get rid of it?

plate01

Post your pages.jsonl - it’s no doubt in there somewhere.

I’m still at the ‘tutorial’ stage, ha!

{"page":1,"id":4,"obj":"label","x":175,"y":5,"h":30,"w":45,"text":"00.0","align":2,"bg_color":"#2C3E50"}
{"page":1,"id":5,"obj":"label","x":220,"y":5,"h":30,"w":45,"text":"°C","align":0,"bg_color":"#2C3E50"}
{"page":1,"id":6,"obj":"label","x":3,"y":5,"h":30,"w":62,"text":"00:00","align":0,"bg_color":"#2C3E50"}
plate01:
  objects:
    - obj: "p1b4"
      properties:
        "text": "{{ states('sensor.ble_temperature_outdoor') }}"
    - obj: "p1b6"
      properties:
        "text": "{{ states('sensor.time') }}"

I’m using the D32Pro V2 and the Lolin 2.4" TFT.

Where is that picture from? It doesn’t appear to be an actual screen.

From the web interface, but it’s on the physical screen as well.

Anything on page 0?

I don’t have a page 0; that’s the entire pages.jsonl content.

Mystery to me!

Ha, you and me both!
Thanks anyway!

OK so I got rid of it by using a different example as a starting point. Who knows!

Anyway; I now have the below, which is functional; but how do I enlarge the icon?
This display will (almost) solely be used to indicate whether the garage door is open or closed, so I would like it approx half the total screen size.
open
closed

plate01:
  objects:
    - obj: "p0b1"  # temperature label on all pages
      properties:
        "text": '{{ states("sensor.ble_temperature_outdoor") }}°C'
    - obj: "p0b6"  # time label on all pages
      properties:
        "text": "{{ states('sensor.time') }}"
    - obj: "p1b2"  # light-switch toggle button
      properties:
        "text": '{{ "\uF2D4" if is_state("sensor.garage_door", "open") else "\uF2D3" | e }}'
        "text_color": "{{ '#09e01f' if is_state('sensor.garage_door', 'closed') else '#eb3434' }}"
{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":240,"h":30,"text":"openHASP","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}
{"page":1,"id":2,"obj":"label","x":10,"y":40,"w":150,"h":150,"text":"\uF11D","text_font":64,"align":1}
{"page":0,"id":1,"obj":"label","x":175,"y":5,"h":30,"w":62,"text":"00.0°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":6,"obj":"label","x":3,"y":5,"h":30,"w":62,"text":"00:00","align":0,"bg_color":"#2C3E50","text_color":"#FFFFFF"}

Changing the text size or width/height does nothing useful.
Any ideas?
Thanks!

48pt is the largest font size - valid sizes are: 16, 24, 32 and 48pt (and the 8pt default font).

Try 48 and see how big it looks.

You can either use an actual image instead of the built-in fonts, or in the latest dev version there is option to add your own custom font.

What device are you using and does your ESP32 have PSram? It need the required memory to store the image/font.

Thanks, yeah might have to look at an image instead.
Changing font sizes didn’t help, in fact it got to the point they went smaller like they were compressing to fit.

I’m using the Lolin D32 Pro V2. Not sure about the ram - total noob - will have to look it up!
Thanks!

Thanks - the image solution works great!!
Have left some space free for something else down the bottom.
This will go by my front door; as the garage is downstairs and I am tired of running down to see if the kids left it open!
Turns out the /littlefs is the inbuilt storage directory, although it is just uploaded to what appears to be the root directory ( / ) on the D32.

open snip
closed snip

For the sake of any other total noobs like me (and for some closure) this is what I came up with:

plate01:
  objects:
    - obj: "p0b1"  # temperature label on all pages
      properties:
        "text": '{{ states("sensor.ble_temperature_outdoor") }}°C'

    - obj: "p0b6"  # time label on all pages
      properties:
        "text": "{{ states('sensor.time') }}"

    - obj: "p1b14" # Garage door icon
      properties:
        "src": "{{ '/littlefs/Garage-' + states('sensor.garage_door') + '.png' }}"
{"page":1,"id":1,"obj":"btn","x":0,"y":0,"w":240,"h":30,"text":"openHASP","value_font":22,"bg_color":"#2C3E50","text_color":"#FFFFFF","radius":0,"border_side":0}

{"page":1,"id":14,"obj":"img","src":"/littlefs/openhasp_dummy_img.png","auto_size":1,"w":200,"x":20,"y":35}
{"page":0,"id":1,"obj":"label","x":175,"y":5,"h":30,"w":62,"text":"00.0°C","align":2,"bg_color":"#2C3E50","text_color":"#FFFFFF"}
{"page":0,"id":6,"obj":"label","x":3,"y":5,"h":30,"w":62,"text":"00:00","align":0,"bg_color":"#2C3E50","text_color":"#FFFFFF"}

And these were the 200x200 .png images I used:
Garage-closed
Garage-open
(Plus a blank 200 x 200 for the ‘dummy’ image)

Thanks all!!

3 Likes

That dev board does have lots of PSram and flash so no worries there then.

Good to see you got it working. That looks great! The only thing I would advise is to use L:/ as the root path instead of the legacy path /littlefs/ (L: stands for littlefs flash partition) as it is a bit more efficient.

Thanks for that, updated :slight_smile:

Mine arrived today. Will post in the weekend.