[OH3] Main UI Examples

[Integer (Mike P)]

@Daniel_O

Are you all just running a rule/script when a scene button is pressed?

But then, how do you handle a scene being “active” or not? Do you disable the others first, or do you just fire off the new commands, never mind if the contradict a previous scene?

I know what you mean

At the moment for example Morgen, Abend, Nacht are really “stupid buttons”. I have a SceneItem and if you press “Morgen” SceneItem receives command 1. Then a rule is triggered and the light will change to defined brightness in the rule, afterwards SceneItem will be updated directly to 0.
Scene “Tag” is the same, but considers more condition (for example the illuminance outside). And according this condition my blinds will go up and light turned off, etc… So, you have to press “Tag” maybe later in the day, if I like to open the blinds, because the first time it was too dark outside.

If you plan to stay active you have to check also if there was some user interaction on physical buttons. Until now, it was to much work for me . But it is planned. My user interface is now actually finished but still pretty dumb. So the big work is still to come.

[Daniel_O]

I thought about using metadata to define an item beloging to a certain scene. Then when I the item receives a command from “another source”, you could disable all the scenes that an item belongs to.
and on the other hand I could disable all other scenes once a new scens receives a command. But then there are scenes that don’t overlap at all, so you’d have to consider for that. Either way will result in a lot of custom rules. I’m not there yet with my setup (still working on my presence rules), but already having this on my mind

[rbuurveld (Rob Buurveld)]

I think I’m pretty much at the same stage as Mike; pretty far with the user interface but the scenes don’t have any intelligence behind them. For example my “Movie Start” item starts a scene, switches on the media center and lights (some on, some off, some dimmed) and then switches of the item again. It’s very much stand-alone though, doesn’t look at any current settings. I’m using a basic setup in Node-RED for this:

You’re both bringing up a lot of the same questions I’m looking at with scenes interacting with other scenes and how that affects the settings for an item. I’m looking at adding properties to items (for example a light color and brightness for day, evening and night, responsive to motion or not, etc.).

This is just a rough draft for how to set properties from a user point of view, have not implemented these properties yet and have no idea yet on how to have scenes interact with the item properties and each other.

[Marijn_Oudijk]

@Integer

Thermostat
With set temperature and heating control:

I love this widget !!!
One question, the arrow-up / down, are they supposed to change the set-temperature? When I copied your code it takes me to a graph with the temperatures / humidity

[Integer (Mike P)]

OO… you are right, thanks! … since I’ve added the oh-link component, I’ve never tried the the arrows to change the set temperature. Please change the last line of the yaml:

From:

          width: 100%

To:

          width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "

I updated the original post aswell.

[Tallman]

Very nice widgets !
Unfortunately it is not displayed correctly in a panel-like page, do you know how to get rid of the margin at the top?

[Marijn_Oudijk]

@Integer

width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' "

Done!
Solved

[Integer (Mike P)]

Hey @Tallman, hmm looks like you are trying to insert the widget code directly into the page yaml code?

I’ve tried to insert the widgets in Cells, Row/Columns and Masonry, should work.

[Tallman]

OK there it works, I meant the layout with a fixed width (similar to Habpanel).

[Integer (Mike P)]

Okey, thanks for clarification. Then you are running already OH 3.1 M3 build? I‘m currently running the stable OH 3.0.1 installation.

If you find out, what‘s wrong with the widget in the fixed grid layout, plz share it here. Maybe a good preparation, when I will update to 3.1 stable.

Thx!

[boconnor (Brad O'Connor)]

Thank you for posting these examples. I have been struggling with the documentation and examples like these are exactly what I needed.

[SWE1008 (Simon Weimar)]

Can you Tell me which App you use on your iPad? Just Safari oder do you use another one?

[Stouni (Steiner)]

Hello Mike,

how did you solve that with the windows and the closed blinds? Did you put the devices in groups? And how do you find out the number of windows or closed blinds?

[wars (Ward)]

@Integer

Room Card:

uid: Card_room_12
tags: []
props:
  parameters:
    - context: item
      description: select group for status lights
      label: Item
      name: status
      required: false
      type: TEXT
slots:
  content:
    - component: f7-block
      slots:
        default:
          - component: f7-chip
            config:
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              visible: "=props.status ? true : false"
              text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''"
              iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
              iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
              iconSize: 18
         ```

I realy love your widgets! But I’ve a question regarding the status of the light: I suppose you do this via the Group Settings of an item? When I select SUM for Aggregation Function it give me a decimal value when I have dimmed light included in this group. Do you have another way?

[Integer (Mike P)]

Blinds

@Stouni

how did you solve that with the windows and the closed blinds? Did you put the devices in groups? And how do you find out the number of windows or closed blinds?

My widget is not 100% correct with the blinds. I’ve put the rollershuter-items into a group with SUM aggregation. In the widget there is a floor operation. If now two blinds are closed by 51% each (SUM: 1.02), the widget will show only 1 complete closed blind.
Other possibility it to add a new Switch-Item to the Rollershutter-Control-channel (see picture):

And then put all Switch-Items into a Group with SUM aggregation.

Lights

@wars

I realy love your widgets! But I’ve a question regarding the status of the light: I suppose you do this via the Group Settings of an item? When I select SUM for Aggregation Function it give me a decimal value when I have dimmed light included in this group. Do you have another way?

For my lights, I’m using the Hue Binding. The binding provides two different channels for ON/OFF and Dimmer. I’ve put all Switch-Items into one group, (with SUM aggregation). If you only have dimmer-items or channels in your binding, you can proceed the same way as with the blinds above by adding a second switch-item to the dimmer-channel.

Hope this helps both of you!?

[Integer (Mike P)]

@SWE1008

Can you Tell me which App you use on your iPad? Just Safari oder do you use another one?

I’m currently using Kiosk+ App (‎Kiosk+ on the App Store (apple.com)). But I’m tesing right know another app called kiosker.io (Kiosker.io | The most flexible and modern fullscreen browser for iOS)

Kiosker app has a 7 day trial version (there are two different apps, the one with the trial is a monthly paid solution, the other is a on-time-buy-app (‎Kiosker Pro: Web Kiosk on the App Store (apple.com)). If I decide to use kiosker, I will buy the one-time-buy version. (here in switzerland it costs 29.90 swiss francs).

Looks quite good by now. Cool feature in kiosker is the screensaver with the clock (I’m not sure if I want to pay 30 bugs only for the clock ;), let’s see if there are some other advantages.

[SWE1008 (Simon Weimar)]

That was really helpful. Thank you. The Kiosk+ App is exactly that what i was looking for.

[maxmaximax (Marcus)]

Hey @Integer

@Integer

Current weather

Thunder/strikes: which source provides this data for your location?

[Integer (Mike P)]

Hey Marcus!

I‘m using this weather station.

The All New Tempest Weather System

[maxmaximax (Marcus)]

Looks like a really smart weather station
Thanks for sharing.