Using openHASP with Node-Red

[thatkide]

My screens are 320X480 and 800X400, I really like the idea of a dynamic screen. I've been playing around with different layouts and while they work I would like for them to be able to control a great deal without looking too overbearing.

[smcgann99]

That was my design philosophy "look" like a light switch but with a lot of hidden functionality.

I settled on a page per room, for basic functions, but then any number of tabs on each page for extra functions. Also I use the first tab name as a label for the page, as it saves some more screen space

The visible tab is highlighted in bright white. Clicking the scene tab name then slides in another set of controls.
As you can see from earlier posts, any extra requirements are being done via popups. These are triggered without the need of extra buttons where possible, by using e.g. a long press.
For example, a long press on a colour capable light shows the colour slider popup.

I plan to have a detail weather page triggered by pressing the weather icon, maybe even the clock etc...
I added 4 buttons at the bottom as place holders right at the start, but have only used 2 so far
And I might even get rid of them altogether, which would recover some valuable screen space

[smcgann99]

Which looks best ?

• With footer menu
• No footer menu

The menu can be selected by pressing the clock, if no footer is shown, so it doesn't really impact usability, extra advantage is other buttons can be bigger.

Downside / Upside - people who do not know this can only operate the basic controls

Feedback welcome

[thatkide]

I do like the idea of people not knowing about the extra stuff and just using the basic items shown. I have my paging setup that way. I added a slider object to the top boarder and that allows me to get to pages where I don't have a navigation button for.

[smcgann99]

So you prefer the navigation buttons over a "hidden" drop down menu then ?
Did you ever try the earlier demo with your larger screens ?

I don't expect it to work 100% correctly yet, but it would be useful to see how it turns out, so I can see what still needs to be fixed up.

[smcgann99]

My latest widget is an "alarm" panel.

It provides a basic framework to display messages from an existing alarm flow, and handles mode selection and pin entry via my pinpad widget.

This information is passed back to the alarm flow, so it can be armed disarmed etc. The new state any instructions and countdown timers etc can then be passed back to the widget as required.

With and without the footer menu

[smcgann99]

In tandem with the changes I made to the "page layout" file,

Hasp["1"].page[0].tab[0].btn[0].value_str - too complex or run of the mill?

I have decided to stick with this layout format as it seems to work well. In efforts to further reduce the need for data entry, I have added functionality to read a "props" property in each level of the hierarchy. This means that something like "btnStyle" can be added at the top level and will be applied to every button on that particular screen, without needing to enter it anywhere else. But it can also be set at different levels, then it applies to items below that level. If set on page the…

I have added the ability to override aspects of the auto formatting code. These can be set in the props values and modify the way that the buttons are arranged.

By default based on a given container size, X number of buttons are arranged to fit into a grid of x columns by y rows. If this is not symmetrical then by default it creates more columns than rows.

This behaviour can now be switched around so there are more rows than columns.

While I was doing this I thought I might as well add the ability to specify a fixed number of rows or columns and just calculate the unspecified value. This simple change actually makes a big difference to how the screens look and allows more personalisation, than the original fixed layout routine.

Some examples of the same button screen but in different arrangements.

Some not overly practical, but then there is also container size, spacing and margins to play with

[smcgann99]

@thatkide

I really like the idea of a dynamic screen

I have done a lot of work on the layout, so it now scales all of the content to different screen sizes.

It not easy to test as I only have 480x480 screens, so if you want to be a guinea pig let me know

[smcgann99]

Just experimenting with extending the "button" styles. This layout is using 3 new styles based on openHASP widgets - Label, Button-Matrix and Slider.

While the layout code was designed for buttons, in theory any single object can be used, to create the extra width I forced the layout to use 1 column.

This allows for control of e.g. some blinds, with the matrix allowing quick control for open close and some pre-set values and the slider allowing fine control and current position feed back.

It's not even released yet and even I'm already abusing the code

However more in keeping with my popup strategy, I'm also looking at creating a dedicated popup for cover controls -

Just for fun, the rolling hills of Teletubbyland

[yogy]

Short first test, short reply, imported in node red in a docker container
Changed to 800x480
I've got the page with time etc.
6 buttons page filled.

Beside some errors about gear that i do not have (degrees/ tasmota I got errors in the debug

3/2/2024, 6:00:01 PMnode: Create Button Pagesfunction : (warn)
"haspOptions plate missing"

3/2/2024, 6:00:01 PMnode: Create Button Pagesfunction : (error)
"TypeError: Cannot read properties of undefined (reading 'page')"

3/2/2024, 6:35:55 PMnode: Add Page zero and widgetsfunction : (warn)
"Scale x:1.6666666666666667 y:1"

3/2/2024, 6:49:53 PMnode: Update Haspfunction : (warn)
"no matching button espresso/POWER"

3/2/2024, 6:29:49 PMnode: jsonlmsg : string[110]
"failed to write to file: Error: ENOENT: no such file or directory, open '/home/pi/.node-red/my-data/jsonl.txt'"

I created the file (my-data/jsonl.txt) in the docker nodered data dir but i'm not sure of the home/pi part is correct.
The error stayed afrer restart.

Short in time now, return later.

[smcgann99]

Sounds like you didn't change the topic on the "plate" to "1", which is what is setup in the flow.

So you are seeing some warnings related to the fact that there is no setup for "plate".

If you got some default screen contents that's good.

Also from "no matching button espresso/POWER" I assume you are using Tasmota firmware on some devices - that's handy as they can be setup easily in the page layout by adding the topics

Can you post a screen shot so I can see how it rendered please ?

[smcgann99]

@yogy

3/2/2024, 6:29:49 PMnode: jsonlmsg : string[110]
"failed to write to file: Error: ENOENT: no such file or directory, open '/home/pi/.node-red/my-data/jsonl.txt'"

You can either disable this node or set the file path to somewhere appropriate for your setup. It's only really there for debugging, at the moment

@yogy

3/2/2024, 6:00:01 PMnode: Create Button Pagesfunction : (error)
"TypeError: Cannot read properties of undefined (reading 'page')"

Looks like I forgot to deal with that particular error if there is missing data, but nothing to worry about.

[yogy]

@smcgann99

Sounds like you didn't change the topic on the "plate" to "1", which is what is setup in the flow.

No sir, i had change the "host" name to 1

The scrolling popup window when pressing the time is not always responsive, or too responsive
I had the device hanging completely and has to be restarted by pulling the plug.
No restart possible from node red or the webpage from the device.

Can you post a screen shot so I can see how it rendered please ?

here you go:

[smcgann99]

@yogy EDIT I have the same screen as you now, so will test with that.

Thanks a lot that's really helpful, the only issue I can see with the layout is the scaling on the blind screen and the alarm button text which is an easy fix.

@yogy

"haspOptions plate missing"

Since the warning gives the topic "plate" it must have come from the device, perhaps you didn't restart the screen after changing it ?

@yogy

"TypeError: Cannot read properties of undefined (reading 'page')"

I can't seem to replicate this error - Can you detail any changes that you made to the theme or layout functions in the "green" group. - Perhaps post you modified versions so I can test with them ?

@yogy

The scrolling popup window when pressing the time is not always responsive, or too responsive

Could you perhaps explain what happens in a bit more detail, not sure if this is a touch screen issue with your screen or something else ?

@yogy

I had the device hanging completely and has to be restarted by pulling the plug.
No restart possible from node red or the webpage from the device.

Again if you could explain in a bit more detail please, also can you confirm the hasp firmware version you are using.

Not restarting from node-red could be a topic issue, since the restart inject is set to "1" and it seems at some point at least, your device was still using plate.

Again thanks for your feedback

PS there is a screen shot button on the openHasp web page, which makes sharing the images easier.

[bwims]

This is brilliant! I hope to get it working.

I've only just got into OpenHasp, so I'm starting small.

I have tried deleting a page from pages.jsonl and adding it via NR, but have failed so far.
I used your early example as a model as follows:

msg.topic = "hasp/plate01/command"

msg.payload = [
    {
    	"page": 4,
    	"id": 1,
    	"obj": "btn",
    	"text": "Timer",
    	"x": 80,
    	"y": 160,
    	"w": 80,
    	"h": 30
    }
]

return msg;

Then after a reboot, the page is not there.

I think I must have missed something critical!
[Edit]
This is what I see on the Telnet log

#[17:05:55.747][90100/106400 15][53948/54128 1] MQTT RCV: = [{"page":4,"id":1,"obj":"btn","text":"Timer","x":80,"y":160,"w":80,"h":30}]

Thanks!

B.

[bwims]

Looks like V7 needs a trailing "/" after the msg.topic "command".

Solved!

B.

[smcgann99]

I haven't needed a "/" on the end, with any version including the latest release firmware ?

Perhaps something else was wrong.

Which post are you referring to, as this project has moved on a lot

[bwims]

Hi!

Thanks for replying.
Huh! It seems you are right! I don't know what I did but all seems to work now!

I used your post here as a guide.

I was misled by a change in the documentation:

For V7 under MQTT Commands it says

MQTT Topics~
hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen

(Note trailing slash)

Whereas for V6 it says

For MQTT, you can use either:

hasp//command topic with payload =<parameter(s)>
...

(Note lack of trailing slash)

Oh well. Progress is progress!

While I am here, could I ask if you have any NR expamples for producing popups?

Thanks!

B.

[smcgann99]

Sure take a look at this post -

Using openHASP with Node-Red

This is the flow so far if anyone would like to give it a try and provide some feed back. haspflow.zip.txt (35.7 KB) Remove the .txt extension and then unzip. Copy the text and import into NR. Set all MQTT nodes to your own server. On the hasp device go to HASP Design and choose Material Dark theme, then in MQTT settings set the hostname (topic) to "1". Reboot hasp and hopefully you should see some content In NR there a a green coloured group, the Setup Pages Layout contains a large …

[Steve-Mcl]

@bwims

For V7 under MQTT Commands it says

MQTT Topics~
hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen

(Note trailing slash)

I agree it is misleading but in full context, i beleive it means you should add to the end:

hasp/plate01/command/ is for sending commands to the screen hasp/plate01/state/ is for receiving updates from the screen

So the topic depends on the direction of the data flow.

Sending a message to topic hasp/plate01/command/p1b2.val with payload 25 would be a valid command. You can send a test MQTT message with a standalone program like MQTT Explorer or mosuito_pub.

... e.g. hasp/plate01/command/p1b2.val

EDIT:
Re-reading - it seems they may actually do mean add a trailing slash to differenciate screen from button/object topics

EDIT2:
Re-reading again - I am confused!