I’ve got some spare time and looking to create a custom widget. Just thought I’d check if what I’m imagining is even possible before I waste my spare time! I’ve made a few custom widgets before, but they have been very simple. I also need a long press to be recognised distinctly from a quick tap, and my reading suggests that can’t be done in MainUI,
I want to come up with something to control my lights similar to the controls in the iOS Home App. Basically a button that you can tap to toggle the light on and off, which can also be held to reveal a slide control. I find this to be an elegant solution in the Home App and would really like to do something similar in OH3/MainUI. I would also like to do something similar to control my blinds - tap to open/shut, long press to reveal a slide control to choose height exactly.
Does anyone have any suggestions, or should I just forget about this idea?
You just have to be using a recent enough version (3.3 milestone 3, I believe) and this feature is available in a limited capacity. You will find that for a few components (I think it’s currently limited to buttons and cards) that have the action series of properties now also have that same series of properties available with the prefix taphold. These actions respond to long clicks in mobile environments and right clicks in desktop environments. So you would make a button with a regular toggle action and a popup taphold action.
I am also looking for this way of controlling my lights in the overview page: did you find these taphold properties documented somewhere?
(I looked into the documentation pages and in the milestones release notes, but I was unable to find anything)
They are new enough that they have not made it into the docs yet, as far as I know. However, very little documentation is required.
They are exactly the same as the regular actions so any configuration for the regular actions applies to the taphold actions and this also means you can just use the action documentation under any of the standard action components.
Using the MainUI widget editor, ctrl + space, under a config heading brings up the available options and you will see them and all the sub-options listed for the components where you can use them.
Edit: Nothing appears in logs.
Edit 2: possibly it must be enabled somewhere? See link
Edit3: I figured out that taphold is only possible for buttons and cards, not generic cells. The right syntax is written in the docs
Slots are not the problem. The two problems are 1) you are trying to use the taphold actions on an oh-label-cell and this function is not available there, 2) even if it were available, you have not completely defined the taphold action, you have only used the taphold_actionPage. Just like with the regular action, you need to actually tell it which kind of action you want it to perform using taphold_action or it won’t know to look for the correct additional properties.
Thanks @JustinG for the kick in the right direction! I’m still messing about finding my way around OH pages.
Just to echo @Lionello_Marrelli about if taphold could be made available for these page cell elements. I am guessing there is something fundamental that doesn’t allow for this?
I tried to follow your suggestions and I obtain a popup offering a button that responds differently to short and long click. Not exactly what happens to cards, but very close.
Is there some other option to set, in order to have the action and taphold action being done immediately?
I think I get what you are suggesting thanks @Oliver2 I just lack to knowledge to apply it. For now, I have found another way, by adding the controls I need into the popup slots from the page I am trying to navigate to.
You have to make sure that your button covers the whole space of the containing cell.
add border: solid 1px red to the button’s style and see where your button is. @JustinG Justin, do you think the button still responds to a tap or tapnhold if it resides in the background slot?
Try also to add height: 100% to the button
Alas, there’s a <div> element that doesn’t have a set height between the card and the button, so height: 100% will not work, you’ll have to make that height: 120px which is the fixed height of the cell.