# Using openHASP with Node-Red

**URL:** <https://discourse.nodered.org/t/using-openhasp-with-node-red/81457>\
**Category:** General\
**Created:** [20 September 2023 15:06 UTC](https://discourse.nodered.org/t/using-openhasp-with-node-red/81457 "2023-09-20T15:06:47Z")\
**Posts on this page:** 1\
**Showing post:** 47

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [20 February 2024 19:20 UTC](https://discourse.nodered.org/t/using-openhasp-with-node-red/81457/47 "2024-02-20T19:20:47Z")

</div>

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?](https://discourse.nodered.org/t/hasp-1-page-0-tab-0-btn-0-value-str-too-complex-or-run-of-the-mill/85091/16):
>
> 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.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f866cb992afddead58f9d9ed5b03112d4ca4182.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58373bc669a22ff00c350e7252186849d11f5423.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b3550975e0e275cdedfa0166be4e793ec1f5ca75.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/867b6327c027e0f4dedd99406627764e54d77bdf.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/151c6e85d696b51d7005422ee241b14d9491728f.png) ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/9/c9b5f37c26e61e71d063281136b53e0e0dde71db.png)

---

_[View the full topic](https://discourse.nodered.org/t/using-openhasp-with-node-red/81457)._