Is there any way to have a popover open with a long press?

Add-ons UIs
1

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?

2

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.

1 Like
3

Awesome! I am on 3.3M3 so all set to go. I’ll report back on my progress.

4

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)

5

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.

  1. 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.
  2. 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.
1 Like
6

I have actually tried in oh3.4 to implement the taphold action but nothing happens.
The syntax is accepted, but when I keep pressed the cell nothing happens.
Here’s the yaml code

component: oh-cell
config:
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: gLuci_Tavolo_Soggiorno_Switch
  actiontaphold: popup
  actiontapholdModal: widget:white_light_v1
  actiontapholdModalConfig:
    brightness: gLuci_Tavolo_Soggiorno_Bright
    header: Configura lampada soggiorno
    temperature: gLuci_Tavolo_Soggiorno_WTemp
  color: blue
  footer: luci tavolo
  header: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ? 'Click per
    spegnere' : 'Click per accendere'"
  icon: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ?
    'f7:lightbulb_fill' : 'f7:lightbulb'"
  title: "=items.gLuci_Tavolo_Soggiorno_Switch.state === 'ON'  ? 'Accese' : 'Spente'"

What am I doing wrong?

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

7

Hi @Lionello_Marrelli Did you get anywhere with this? I am trying to taphold_actionPage and navigate elsewhere but I keep just getting the same popup and it’s not navigating.

component: oh-label-cell
config:
  action: toggle
  actionCommand: ON
  actionCommandAlt: OFF
  actionItem: Garage_Thermostat_Mode
  taphold_actionPage: page:Garage_Heating
  color: "=(items.Garage_Thermostat_Mode.state == 'ON') ? 'orange' : 'grey'"
  footer: ='Setpoint'+':'+' '+items. Garage_Thermostat_Setpoint.state
  item: Garage_Thermostat_Mode
  label: "=(items.Garage_Thermostat_Mode.state == 'ON') ? \"Requesting\" : \"Not
    Requesting\""
  on: true
  subtitle: ='Garage Air'+' '+items.GarageSonoff_GarageTemperature.state
  title: Garage Thermostat
slots: null

I get this standard popup

Screenshot 2023-02-19 at 14.47.23
Screenshot 2023-02-19 at 14.47.23683×684 13.3 KB

I would think it is probably something I am doing wrong, maybe something to do with the slots?
I’ve been following this LINK

8

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.

9

Are there any plans to introduce the taphold function for cells and not only cards? Or is there some limitation not allowing this enhancement?

10

Simply use your oh-cell and add an oh-button in its default slot
100% width, and transparent color)
Then both tap and tapnhold are available

11

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?

12

No limitations, as I understand it: Taphold action on oh-label-card and oh-button by tarag · Pull Request #1313 · openhab/openhab-webui · GitHub

Don’t know if anyone intends an expansion, but this PR was from @tarag so maybe he could comment on that.

13

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?

component: oh-cell
config:
  title: oh-Cell 1
  header: header
  subtitle: subtitle
  footer: footer
slots:
  default:
    - component: oh-button
      config:
        width: 100%
        color: transparent
        text: Button
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: gLuci_Tavolo_Soggiorno_Switch
        taphold_action: popup
        taphold_actionModal: widget:white_light_v1
        taphold_actionModalConfig:
          brightness: gLuci_Tavolo_Soggiorno_Bright
          header: Configura Luci Tavolo soggiorno
          temperature: gLuci_Tavolo_Soggiorno_WTemp
14

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.

15

.

He already did. Have a look here

I know what you mean. I also like the nice style of an expanded card. Then go for oh-label-card which also supports taphold. It is hidden in the advanced config menu.

16

Set the cell’s expandable property to false.

17

Actually, adding expandable: false to the oh-cell config does not allow the button to appear and no action is performed on click or long-click.

In any case, let me thank you (@JustinG and @Oliver2 ) for all your suggestions.

18

Sorry, forgot to add that you’ll also have to move the button from the default slot to the background slot

19

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

20

Yep, that shouldn’t be a problem.

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.