OH4: oh-clock-card empty since OH4.1.M2

Setup, Configuration and Use Migration
, ,
1

Hi All

Since updating to Oh4.1.0.M2 (and subsequent SNAPHOT) my working clock widget is empty:

image

The code that has worked till now is:

uid: clock_widget
tags: []
props:
  parameterGroups: []
timestamp: Jul 5, 2021, 1:15:40 PM
component: oh-clock-card
config:
  showDate: true
  dateFormat: LL
  datePos: below

Any suggestions please?
Thanks
mark

EDIT: Made a workaround:

image

component: oh-cell
slots:
  background:
    - component: f7-block
      config:
        style:
          display: flex
          justify-content: center
          flex-wrap: wrap
          flex-direction: column
      slots:
        default:
          - component: oh-clock
            config:
              style:
                font-size: 35px
                font-weight: 700
                align-self: center
          - component: oh-clock
            config:
              showDate: true
              dateFormat: LL
              datePos: below
              format: DD MMMM YYYY
              style:
                font-size: 30px
                align-self: center
2

Iā€™m pretty sure there is an issue open for this. But double check in the openhab-webuis repo.

3

Thatā€™s odd. The clock card itself hasnā€™t changed in a long time.

Do you see any browser errors when you try to load the page with the clock card?

4

Thanks Justin.

If I refresh the widget in Developer Tools I get 11111.log (11.8 KB)

Not sure if that helps.

I cleared the console before and this is just what happens for each refresh

5

Thanks, Nothing I can find.

6

It does.

app.d5c5405e0e32e7d7d326.js:7 TypeError: Cannot read properties of undefined (reading 'startsWith')
    at r.config (app.d5c5405e0e32e7d7d326.js:1:53176)
    at fn.get (app.d5c5405e0e32e7d7d326.js:7:26678)
    at fn.evaluate (app.d5c5405e0e32e7d7d326.js:7:27828)
    at r.config (app.d5c5405e0e32e7d7d326.js:7:29687)
    at r.<anonymous> (app.d5c5405e0e32e7d7d326.js:7:1049892)
    at e._render (app.d5c5405e0e32e7d7d326.js:7:35314)
    at r.a (app.d5c5405e0e32e7d7d326.js:7:68190)
    at fn.get (app.d5c5405e0e32e7d7d326.js:7:26678)
    at fn (app.d5c5405e0e32e7d7d326.js:7:26596)
    at app.d5c5405e0e32e7d7d326.js:7:68204

Iā€™m pretty sure that narrows down the error to a line from a recent PR (#2094), so thatā€™s consistent with this error being new even if the clack card didnā€™t change.

I donā€™t see why the oh-clock-card should be returning an undefined value for componentType but maybe @florian-h05 can work it out.

1 Like
7

I also donā€™t see a reason for this, and as long as the other cards work, I doubt that my PR is the cause of the problem.

Can you please check the stack trace when running the dev server? This way we get file names and lines for the source code.

8

No your PR isnā€™t the problem, I just meant that your PR is the recent change that made the problem in the clock card evident.

Looking through the dev logs, the error is, indeed in the clock card. It turns out it is not the clock card componentType, however, that is causing the error, but the cardā€™s call of the oh-clock That returns an undefined componentType.

vue.esm.js:628 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'startsWith')"

found in

---> <OhClock> at src/components/widgets/system/oh-clock.vue
       <F7Col>
         <F7Row>
           <F7CardContent>
             <F7Card>
               <OhClockCard> at src/components/widgets/standard/oh-clock-card.vue
                 <GenericWidgetComponent> at src/components/widgets/generic-widget-component.vue
                   <F7Block>
                     <GenericWidgetComponent> at src/components/widgets/generic-widget-component.vue
                       <F7Col>
                         <F7Row>
                           <F7Block>
                             <F7PageContent>
                               <F7Page>
                                 <WidgetEdit> at src/pages/developer/widgets/widget-edit.vue
                                   <F7View>
                                     <F7App>
                                       <App> at src/components/app.vue
                                         <Root>

It looks to me that it is because the card calls oh-clock with a context that doesnā€™t match the standard form of the context in other cases:

Should be:

<oh-clock :context="{ component: { component: 'oh-clock', config: {} }}" :style="{ 'font-size': config.dateFontSize || '1vw', 'font-weight': config.dateFontWeight || 'normal' }" :format="config.dateFormat" />

Because Iā€™ve got it up already, I can put in a PR for the fix.

Edit:

2 Likes
9

Is there a way to include the fix manually? Or do I have to wait for the next Milestone Release? I am using the clock widget on 3 Displays and it is very important for my setup.

Does Milestone Release 4.1.0-M1 work with the clock widget or do I have to role back to the latest stable release?

10

My experience is that the oh-clock-card still works on OH 4.1.0.M1, and was only affected after I installed M2.

The fix was merged into yesterdays SNAPSHOT, though I have not tested as yet. Planned to try today.

EDIT: Just upgraded test system to openHAB 4.1.0 Build #368 and oh-clock-card is working again.

1 Like