Request for customizable buttons

[Prof_Techno]

So, some time ago, I created a button to manage the heating, but I don’t exactly remember how I did it, probably with a fake device or something like that.

Looking back, I find the graphical result isn’t great. I think that today, it might be possible to do something cleaner, if it doesn’t already exist in an integration.

The idea would be to have an integration that allows easily creating customizable buttons: choosing the icon, the type of button, its functionality, and the associated actions.

In my case, it’s a button for the heating, but it could be used for many other things. Incidentally, my current button uses a sound icon even though it controls the heating!

A tool like this would allow creating commands tailored to your needs simply, without having to tinker and struggle as I had to do at the time, even though I had fortunately received a lot of help on the forum!

Does a solution of this type already exist, or would there be interest in developing a dedicated integration?

[lmilcent]

That’s a good idea, it could be a bit more user-friendly. I’ll see if we can address the need with an external module or not.

[lmilcent]

I’m going to test a module development for this need. Depending on your feedback, we’ll see about the updates and whether it’s really more user-friendly than a virtual device.

[Prof_Techno]

@lmilcent

it’s really more user-friendly than a virtual device

I’m ready to test with pleasure! For now, I’ve disabled the scene linked to the button, but if I had to do it again, I wouldn’t be able to do it alone without help.

This would therefore be an opportunity to test and see if I can recreate it easily.

[lmilcent]

The module is ready to test: Virtual Buttons v0.1.1, GitHub - LM1LC3N7/gladys-virtual-buttons: Gladys Assistant external integration to create virtual buttons and switches easily (push button, switch, timed switch) with a dashboard widget. · GitHub

It will arrive in the store at the next indexer run; in the meantime, “Install from GitHub” works with this link.

To recreate your heating button:

1. Integrations → Virtual Buttons → Configuration → Add a button: name “Heating”, one of the three types (push button, switch, or timed switch that returns to off after N minutes), the flame icon, a color, and confirmation if you want.
2. Discovery tab: click Add to Gladys on the button card.
3. Create the scene that acts: trigger “state change” on the button, then the action on your heating. The guide details each screen: gladys-virtual-buttons/docs/fr.md at main · LM1LC3N7/gladys-virtual-buttons · GitHub
4. Add the Buttons widget to the dashboard (4 buttons per widget).

Two remarks:

• The button does nothing on its own; it’s the scene that acts. Its state is not that of the real heating.
• For heating, I recommend a push button with confirmation (or the timed switch) rather than a simple switch: a “turn everything off” or the assistant could toggle a switch.

And if you just want to launch a scene with a nice icon, without integration: create the scene, choose an icon for it (flame…), then place it in the dashboard’s “Quick Actions” box.

It has only run in automated tests, never on a real installation: let me know if you can recreate it on your own, and what’s not working.

[Prof_Techno]

Hi

I’m testing on my return, I’m taking a weekend off

Thanks

[lmilcent]

Most popular Home Assistant integrations → candidates for Gladys external integrations

A new integration, Virtual Buttons v0.1.1: GitHub - LM1LC3N7/gladys-virtual-buttons: Gladys Assistant external integration to create virtual buttons and switches easily (push button, switch, timed switch) with a dashboard widget. · GitHub It allows you to create your own buttons from the Gladys configuration screen, with a name, an icon, a color, and an optional confirmation, then trigger a scene when you press it. Three types: push button, stored switch, and switch that automatically returns t…

Tested at my place and it seems to work well! Let me know if any button types are missing for your needs.

[Prof_Techno]

Hi there!

So, I’m going to be a bit demanding, because I don’t necessarily know what’s possible or not. It’s up to you to sort through my requests, whether they’re relevant or completely crazy!

I’ve tested all the buttons in virtual mode and honestly, it’s great! It allowed me to create something very quickly that would have taken me a lot of time before. A big thank you for that!

I have a few ideas for improvement:

1. Icon selection

When creating a button, the icon is chosen solely based on text. It would be nice to be able to see the icons directly to know what they look like before making a choice.

We could even imagine adding new ones in the future, for example in ICO format.

2. A multi-position button

I would like a button that allows you to choose from several positions, a bit like a heating selector.

For example, I could have several positions:

• Position 1: turn off all the thermostats in the house.
• Position 2: automatic mode on all thermostats.
• Position 3: forced operation.
• Position 4: vacation mode.

Of course, each position would trigger a scene that performs the corresponding actions.

For the design, we could imagine a horizontal slider (like a volume control) or even a round rotary button, like a selector that you turn to choose your mode. (or both)

3. A round on/off button

Another nice type of button would be a round button, with just the on/off symbol. The operation would be similar to that of a classic switch, but with a different design.

4. Other shapes and designs

We could also imagine other button styles, for example a play button for music.

I know that in these last cases, it’s mostly aesthetic and that it doesn’t change the functionality. But I think the visual aspect is important in home automation: being able to customize your commands would make the dashboards more pleasant and more intuitive.

That’s it for my little ideas! Some may be complicated to implement, but I think it can give some leads. Thanks again for the work done, because the current result is already really great!

[lmilcent]

That’s great, thanks for your super detailed feedback!

I see what can be done, but I think there will be some limitations related to Gladys since it’s an external module. I’ll get back to you soon.

[lmilcent]

Thank you @Prof_Techno for this very complete feedback, it’s exactly what was needed!

It’s in the v0.1.2: Release v0.1.2 · LM1LC3N7/gladys-virtual-buttons · GitHub (update from the catalog, your current buttons remain unchanged).

What’s done

• Multi-position button: a new type « Selector », from 2 to 4 named positions (for example Stop, Auto, Forced On, Vacation). In the Buttons widget, each position is a button and the current position is highlighted. For the scene: « Device state change » trigger on the selector, « equal » operator, then the name of the position; one scene per position. You can rename a position without breaking its scenes. However, moving a position or inserting one in the middle is refused, because it would change the scenes silently: we always add at the end.
• Icon selection: the list goes to 50 icons, each with a descriptive name (on/off, switch, play, pause, radiator, frost protection, bed, meal…). To see them before choosing, add the new « Icons » widget to the dashboard: it displays 10 per page, with their name in the list.

What’s not possible from an external integration

An external integration does not draw anything itself: it sends buttons, values, and icons, and it’s Gladys that displays them, always in the same way. Therefore:

• no slider or rotary button (Gladys has them for real devices, lights, volume or thermostat, but a virtual button should not pretend to be one of them): the selector replaces them;
• no round button or other shapes: a button from the widget is always a pill. For an on/off, the « On / Off » icon with the red color gets close;
• no custom icon (ICO, PNG) on a button: Gladys only accepts icons from its own library.

These last two points would require an evolution of Gladys itself, not of the integration.

Like the first version, it has only run on a test installation: let me know if you can make your heating selector, and what’s not working.

[Prof_Techno]

@lmilcent

• errupteur, lecture, pause, radiateur, hors-gel, lit, repas…). To see them before choosing, add the new « Icons » widget to the dashboard: it displays 10 per page, with their name in the list.

Hi!

First of all, I’m happy that these features now exist! Thanks for the changes and the responsiveness.

I have a few remarks after looking at all this:

- The multi-position selector: it would be great to be able to go up to 6 positions instead of 4, especially to manage the 6 orders of the radiator’s pilot wire.

- The choice of icons: it’s great to have this possibility! However, it would be even more practical to be able to directly visualize the icons at the time of button configuration. Currently, you have to create the « Icons » widget, choose the one you like, and then go back to the button configuration. It works, but being able to make your choice directly at this point would be simpler.

- Links with scenes: I haven’t tested this part yet. I’m waiting for the PR that will allow me to manage schedules directly on the thermostats before I start testing.

- The slider and the rotary button: I may have explained this point poorly. The idea would be to replace the current method, which consists of creating virtual buttons, with a simpler system directly in your integration, like in the image. I was thinking of a horizontal slider, since we can already achieve this result with the current buttons, or a rotary selector to choose a mode, rather than having simple dots. The goal would be to make the creation and use of these commands simpler and more visual.

Example of what I’ve already managed to do with a lot of help:

from memory I went through an mqtt thing

That’s it for my feedback!

[lmilcent]

Thanks @Prof_Techno! It’s in the v0.1.3 : Release v0.1.3 · LM1LC3N7/gladys-virtual-buttons · GitHub

6 positions : a selector can now have up to 6 positions, so all 6 pilot wire commands pass (Comfort, Comfort -1, Comfort -2, Eco, Frost Protection, Off). You can add positions to the end of an existing selector with « Modify a button » : your scenes continue to work.
In the « Buttons » widget, a card only has space for 4 dots. A 5 or 6 position selector therefore takes up a single dot : you press on it and a list opens to choose the position (you need Gladys 5.2 or newer). In the « Devices » box of a room, the positions are displayed as buttons, or as a dropdown list when space is lacking.

Icons in the form : unfortunately not possible. In Gladys, an integration form choice only has a name, not an image; the thermostat mode screens are made by Gladys itself for its own devices. The « Icons » widget remains the way to see them. Small tip : an emoji at the beginning of a position’s name is displayed everywhere ( Comfort, Frost Protection…).

Slider or rotary button : also not possible. Gladys only shows a slider for real devices (light, volume, shutter…) and only has a round dial for thermostats; using it would make your button look like a lamp or a radiator, and a « turn everything off » could affect it. The closest thing is the list : the one in the widget for 5 or 6 positions, and the dropdown list in the « Devices » box.

Let me know if this works for you!

[cursor-bot]

Hi @Prof_Techno!

The dashboard buttons are the Virtual Buttons (lmilcent) external integration. Version 0.1.1 is in the catalog, and 0.1.2 followed on this thread.

You create a push button, a switch, or a timed button, with a widget, without going through a fake MQTT device. It’s suitable for a heating button that launches a scene.

Integrations → « Virtual Buttons ». The update is done from the catalog: the buttons already created remain in place.

I’m moving this topic to « Delivered Requests ». If there’s still a case that doesn’t fit, open a new topic: it will be easier to follow.

[Prof_Techno]

@cursor-bot

catalogue, and 0.1.2 followed on this thread.

You create a pusher, a switch or a timed button, with a widget, without going through a fake MQTT device. It is suitable for a heating button that launches a scene.

Integrations → « Virtual Buttons ». The update is done from the catalogue: the buttons already created remain in place.

I am filing this topic under « Delivered Requests ». If there is still a case that does not fit, open a new topic: it will be simpler to s

Good but we need to be able to finish the tests, thank you

[pierre-gilles]

I moved the topic to Configuration and I reopened the topic

[Prof_Techno]

For now, as a temporary solution, I will make a separate request to add tabs or other types of controls directly in the integrations. I think it’s important to have different types of buttons depending on the integration and its use.

However, I think there are still two small bugs.

• The number at the top right: as you can see in the screenshot, a « 4 » appears at the top right. I don’t know where it comes from. Maybe it’s related to the number of configured buttons?

• The position selection: an error appears on the third line when choosing to place a button in position 2 while position 1 is still free. I know it’s a bit silly to make this mistake, but it would be good to display a more explicit message to help the user understand the problem and correct their inattention.

Thanks for the work

[lmilcent]

Thanks @Prof_Techno for these two feedbacks, you were right on both. It’s fixed in v0.1.4: Release v0.1.4 · LM1LC3N7/gladys-virtual-buttons · GitHub

The « 4 » at the top right: that was the name of the current position of your selector, displayed alone without saying what it was. This line disappears. For a selector with 5 or 6 positions, the dot now displays « name: position » (for example « test selector: 4 »). For 2 to 4 positions, the current position is already visible on the checked dot.

The empty button 1: you can now fill in the boxes in any order you want, and leave some empty; the widget displays the chosen buttons in order. If no box is filled, it clearly states this instead of a technical error.

Small tip: as the name of a selector with 2 to 4 positions is no longer displayed above the dots, give a title to the widget (for example « Living room heating ») if you have several.

And good idea to make a separate request for sliders and other types of controls: it’s an evolution of Gladys itself, it would benefit all integrations.

[Prof_Techno]

Well, it’s perfect, no more issues with the two bugs!

However, visually, it’s not very clear whether the switch is in the ON or OFF position. It would be great to have a color code, for example green for ON and red for OFF, with the possibility of customizing the colors.

By the way, this possibility could be interesting for all types of buttons.

Same remark for the Tempo button: red to indicate that it is activated, it’s not necessarily the color I would have chosen. A green or a customizable color would be more meaningful.

As I write these lines, I think that a customizable color for each selector or button would really be a plus. We could thus harmonize the colors with those of the Gladys thermostats or with the rest of the installation.

To be seen what is technically possible, but I find that this would be a beautiful improvement, both aesthetically and practically!

The annoying service is sorry

[lmilcent]

Thanks @Prof_Techno, you’re not annoying at all: it was a real gap! It’s in v0.1.5: Release v0.1.5 · LM1LC3N7/gladys-virtual-buttons · GitHub (it will arrive in the store at the next indexer update).

You can now see if a switch is on

• Each switch (including timed ones) has an indicator line above the buttons: its colored icon, its name, and the status in plain text, « On » or « Off ».
• By default, the indicator is green when on and gray when off. You can choose these two colors for each switch (green and red, for example), in « Add a button » or « Edit a button »: fields « Indicator on » and « Indicator off ».
• A switch that is on also has a checkmark on its button: the status is never read only by the color.
• For a timed switch, the indicator shows the remaining time: « On · 25 min ».

The red of the Tempo

Nothing required it: it’s the color chosen when the button was created (« Danger (red) »). With « Edit a button », you can change it to blue or gray, and choose a green indicator.

What Gladys does not allow (yet)

• The button itself cannot be green: for a button that triggers an action, Gladys only offers blue, gray, or red. The « active » green only exists for buttons directly linked to a device, which cannot ask for confirmation or toggle. Hence the indicator next to it.
• No free color: Gladys offers six colors to widgets (green, blue, light blue, orange, red, gray). On the light theme, light blue and orange are quite pale: prefer green, blue, red, or gray for indicators.
• Selectors keep the color of their button. The current position is already highlighted by its color and a checkmark.

A free color for the buttons would be an evolution of Gladys itself, like the sliders: it would fit well in your separate request.

Buttons already created get the indicator with the default colors, without having to do anything.

If you have a moment:

1. Does the indicator make the status readable enough on your dashboard, in light and dark mode?
2. Does « On · 25 min » on the timer suit you?

Thanks again for your feedback, it makes the integration much better!