OH4 Hide components on small screen devices

Mark_VG · May 10, 2023, 9:28am

Hi All

Is there a “simple” expression that could be used to “hide” content for example on an oh-cell when the screen size is small to prevent overflows etc?

My use case would be with the following oh-cell

This displays perfectly on a larger screen, however on a device etc the result is less than pretty:

So My idea was to simply use the visible: ... expression to not display the extra information on small screens. Just don’t know what I could use in the expression or if this even at all possible.

JustinG · May 10, 2023, 2:58pm

You’re on OH4 so your widget expressions have access to the screen object:

In this case you probably just want visible to be some simple boolean involving the viewAreaWidth property.

visible: =(screen.viewAreaWidth >= 800)

If the problem really is between desktop and mobile devices, however, then the other option may just be to use the device object with has a desktop property that is true if the viewer agent is a desktop browser and false if it is a mobile browser.

visible: =device.desktop

Schmendrax · November 4, 2023, 6:15pm

Hi there,
unfortunatly, both expressions are not working for me to display widgets only on screens above a certain size. Can anybody confirm that “screen.viewAreaWidth” is actually working within the OpenHab App ?
If I simply try to display/read-out the value returned by this expression in the customer widget’s editor, a plausible value fitting to my Desktop screen (~3000) is shown, however opening the Main UI on the tablet/phone via the app consinstently returns a 0 and hence kind of explains why I am not succesful limiting the widget’s appearence to large screens.

Any ideas ?

Best regards,
Hendrik

Mark_VG · November 4, 2023, 6:51pm

The following works for me:

    - component: f7-block
      config:
        style:
          height: 25px
          margin: 0
          padding: 0
          position: absolute
          top: 12px
          width: 100%
        visible: =(screen.viewAreaWidth >= 1800)

JustinG · November 4, 2023, 9:44pm

Which app?

Schmendrax · November 5, 2023, 10:46am

Strange, definitly not working for me:

in the custom widget preview it is working and if I reseize the browser windows i can make it vanish depending on the size
in the browser Main UI it is always hidden, no matter the size of the browser window
in the Open Hab Android App as well always hidden, even if opening it on a big tablet screen

Attached some screenshots:

Print-out of the screen.viewAreaWidth to a label element with the following command:
2023-11-05 11_42_41-openHAB

Custom Widget Preview…size is presented and responsive to re-scaling of the browser:

Browser Main UI…number is always zero and the component with which I am testing (oh-clock card) and to which I applied the expression you stated is always hidden:
2023-11-05 11_43_24-openHAB

Are there any other settings that I am not aware of, in order to allow the screen.viewAreaWidth to be filled with a value, since I noticed that the value is always 0 (except in the custom widget preview).

Mark_VG · November 5, 2023, 11:02am

Maybe share your YAML code in code fences?
Which page are you doing this on? I have seen some odd behavior on the Overview page. Maybe try on a different page to test?

EDIT: The following works for me on the Overview Page , though the layout of the oh-clock-card needs some work. I have tested in browser and using the Android APP:

component: oh-cell
config: {}
slots:
  background:
    - component: Label
      config:
        style:
          align-self: center
        text: =screen.viewAreaWidth
    - component: oh-clock-card
      config:
        dateFontSize: 25px
        dateFontWeight: 500
        dateFormat: LL
        datePos: below
        showDate: true
        style:
          margin: 0
          padding: 0
        timeFontSize: 35px
        timeFontWeight: 700
        visible: =(screen.viewAreaWidth >= 360)

Schmendrax · November 5, 2023, 12:50pm

uid: Time Widget
tags: []
props:
  parameters:
    - description: "| Toggle if you want to hide on smartphone view"
      label: Hide on Small Screen
      name: HideOnSmallScreen
      required: true
      type: BOOLEAN
      groupName: General
  parameterGroups:
    - name: General
      label: General Settings
timestamp: Nov 4, 2023, 8:18:00 PM
component: f7-card
config:
  #thats what I want to achieve, since it is not working I take step by step approach:
  #visible: "=props.HideOnSmallScreen === true && screen.viewAreaWidth <= 568px ? false : true"
  style:
    background-color: rgb(40,40,40)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
    height: 280px
    margin-left: 5px
    margin-right: 5px
slots:
  content:
    - component: f7-block
      config:
        style:
          padding-left: 15px
          padding-right: 15px
          width: 100%
          position: absolute
      slots:
        default:
          - component: Label
            config:
              style:
                font-size: 20px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
                padding-bottom: 15px
              text: =screen.viewAreaWidth
          - component: oh-clock-card
            config:
              visible: =(screen.viewAreaWidth >= 480)
              background: rgb(40,40,40)
              dateFontSize: 30px
              dateFontWeight: normal
              dateFormat: dddd, D. MMMM
              datePos: above
              noShadow: true
              outline: false
              showDate: true
              style:
                padding-top: -100px
              timeFontSize: 60px
              timeFontWeight: bold
              timeFormat: HH:mm:ss
    - component: oh-link
      config:
        action: popup
        actionModal: ='page:' + props.page
        style:
          left: 0px
          position: absolute
          padding-top: 10px
          width: 100%

Mark_VG · November 5, 2023, 1:03pm

That seems to work on my system. All I have done is change the (screen.viewAreaWidth >= line to refer to 360.

How are you calling this widget?

I used an Personal Widget on the overview page as follows:

component: widget:Test_Time_Widget
config: {}

Schmendrax · November 5, 2023, 1:53pm

Hi Mark,

I thought it worked, but no After reloading the page it vanishes always, doesn’t matter on which device or browser or OH android app…so if I add the expression “visible: =(screen.viewAreaWidth >= 360)” the widget never shows

component: widget:Schmendrax_Time
config:
  text_header: --- hier kommt Uhr und Datum ---
  visible: =(screen.viewAreaWidth >= 360)

Mark_VG · November 5, 2023, 2:31pm

Mine works on all the different browsers etc I tried. Even with your last option of hiding the entire widget, not just the oh-clock-card

Not sure if this could be a version issue? I am on a recent SNAPSHOT, prior to OH 4.1.M3. Otherwise I am out of ideas - Sorry.

Schmendrax · November 5, 2023, 3:26pm

K, I am on 4.0.3 Release Build…maybe that really is the problem. I will try again after the official update is coming and then will comment again whether that solved it
Thanks Mark !

Oliver2 · November 6, 2023, 5:41pm

seems to be related to this:

Schmendrax · January 2, 2024, 5:03pm

Yes, I can confirm that it is resolved with the openHAB 4.1 release build