[OH3] Main UI Examples

[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.

[BG56 (Bernhard Geis)]

Thank you @Integer (Mike) for providing pages and widgets. I like them. I’m still using my OH2 sitemaps but have already migrated to OH3 and have started to build the model and pages. I’ll use your pages and widgets as starting point. As I’m a beginner with YAML its still difficult to understand all the details of your pages and widgets. Changing the Items is easy but formatting and other things is more difficult to adjust. The images of the weather are not displayed as you can see in the attached screenshot.
The root cause for that might be that you use the condition iconID to build the weather condition icons but OpenWeatherMap provides the condition as icon image … this possibly has changed. Have you adjusted your widget to use the icon images istsaed of the iconID?

[hmerk (Hans-Jörg Merk)]

@BG56

The root cause for that might be that you use the condition iconID to build the weather condition icons but OpenWeatherMap provides the condition as icon image … this possibly has changed. Have you adjusted your widget to use the icon images istsaed of the iconID?

You need the items like he posted earlier. iconID is included in oneCallApi…

[Dest (Giovanni De Stefani)]

Both the icon and the iconID are available also with the Account thing, Go to the channels page and tick Show advanced, it should discover the iconID for every forecasted time interval

[BG56 (Bernhard Geis)]

Thank you @hmerk for your quick reply. I know that I have to use oneCallApi… but iconID is not included only Icon as image … this may have changed … or can it be configured somehow?

[BG56 (Bernhard Geis)]

Thank you @Dest “show advanced” make the difference. Thank you for the solution!

[Integer (Mike P)]

Thanks @hmerk and @Dest for clarification, you were faster than me

@BG56: I see your wind direction is showing in degree. I’m using a SCALE transformation to have cardinal values.

conf/transform/winDir.scale

[0..11.25] = N
]11.25..33.75] = NNO
]33.75..56.25] = NO
]56.25..78.75] = ONO
]78.75..101.25] = O
]101.25..123.75] = OSO
]123.75..146.25] = SO
]146.25..168.75] = SSO
]168.75..191.25] = S
]191.25..213.75] = SSW
]213.75..236.25] = SW
]236.25..258.75] = WSW
]258.75..281.25] = W
]281.25..303.75] = WNW
]303.75..326.25] = NW
]326.25..348.75] = NNW
]348.75..360] = N
[..] = na
NaN="N/A"

PS: your weather forecast looks somewhat as bad as mine