Building Pages in the OH3 UI: documentation draft (1/3)

Is it possible to create pages with textfiles stored in the configuration folder, like it is/was possible with sitemaps?
Someting like pages/overview.page or something like that?

no. Just like with HABPanal, the configs get saved in userdata. There is currently no support and I donā€™t think any is planned to create a language and config parser for Pages. But as with anything, Iā€™m sure if someone steps up to build something like that it would not be rejected.

Where exactly is it stored?
So for openhab3 it is not possible to copy my needed files to my directory? For openhab 2 I could just clone my git repo with all my things, items, rules, sitemaps and so on to my folder and most of it was working. In openhab I have to recreate all my pages?

$USERDATA/jsondb along with everything else that is done through the REST API.

No one is saying that. You just need to include the folders in $USERDATA as part of your git repo. Exclude cache, tmp, jsondb/backups, and probably persistence. If you want to capture your full OH config, you should be saving those files and folders anyway.

I do this myself. All the files in the remaining folders I mention, including those in jsondb are text files too and therefore very git friendly.

And Iā€™m not just saying this theoretically. It is literally how I configuration control my own openHAB 2 and openHAB 3 deployment too. To redeploy I check out my configs from my personal git server.

Ok, thank you for the information.

I just changed some values in my jsondb/uicomponents_ui_page.json as those are the pages and changed some values. But when I check the yaml in the UI then there are still the old values. Is there any action necessary? Even after a restart the values are the old ones.

You do not want to edit the JSONDB manually while OH is running. OH doesnā€™t reload those files when they change and will write out to those files on any changes through the REST API. So you need to make sure OH is not running if you want to edit the JSONDB manually.

1 Like

Ok, I stopped openhab, changed the file and started it. But no change in the UI.
I even deleted the file /var/lib/openhab/jsond/uicomponents_ui_page.json , cleaned the cache and started but the pages are still visible in the UI.

I havenā€™t looked into how Pages are stored but I think they are stored in at least one other JSONDB file in that folder. Iā€™m pretty sure widgets are stored separately.

Also, the Overview Page is automatically generated. You canā€™t delete it.

1 Like

I believe these JSON DB files are restored from the ones in the ā€œbackupā€ directory (userdata/jsondb/backup) automatically if theyā€™re missing.

So if you delete it youā€™ll have to delete the backup as well.

Yes you are right. Now Iā€™ve understood the behavior. Thank you for your information.

Is it possible to open pages in fullscreen? Iā€™ve created a great Dashboard and I want to have this on a wallmounted tablet but without the openhab menu bar on the left side. If i try to open the page in a new tab it only says: Problem accessing /page/page_b9a60713e4. Reason: Not Found.

Looking for your answers and best regards
Flo

No, that is not possible.
There has already an issue been filed to optionaly remove the leftside navigation on tablets.
@ysc, any update on this ?

merged 7 hours ago

4 Likes

Just saw the little pin after upgrading to S2065.
Great as usual :+1::+1::+1::+1::+1:

How do you delete a sitemap in pages? I have only a save option in the top right corner.

You should have a select option, when nothing is focussed:

2 Likes

Also Ctrl+click on the list to select, if you have a keyboard.

1 Like

It looks like I have an issue with my page.
It looks like the following:

config:
  label: Weihnachtsbaum
  sidebar: true
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-list-card
                      config: {}
                      slots:
                        default:
                          - component: oh-list-item
                            config:
                              title: none
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: none
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: snake
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: snake
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: waves
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: waves
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: snow
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: snow
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: rainbow
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: rainbow
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: fireworks
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: fireworks
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: tinkle
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: tinkle
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: updown
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: updown
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: vintage
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: vintage
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: collide
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: collide
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: strobe
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: strobe
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: sparkles
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: sparkles
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: carnival
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: carnival
                              listButton: true
                          - component: oh-list-item
                            config:
                              title: glow
                              action: command
                              actionItem: Licht_Weihnachtsbaum_Effect
                              actionCommand: glow
                              listButton: true
                          - component: oh-colorpicker-item
                            config:
                              title: Farbe
                              item: Licht_Weihnachtsbaum_Color
                              modules:
                                - wheel
                                - palette
                          - component: oh-list-item
                            config: {}
masonry: null

So when I click on any of the list items everything looks fine.

2020-12-14 00:21:29.342 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Effect' received command glow

2020-12-14 00:21:29.345 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Effect' predicted to become glow

2020-12-14 00:21:29.346 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Effect' changed from strobe to glow

2020-12-14 00:21:31.106 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Effect' received command sparkles

2020-12-14 00:21:31.112 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Effect' predicted to become sparkles

2020-12-14 00:21:31.114 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Effect' changed from glow to sparkles

But when I select a color in the oh color picker item palette 1 time: this happens a lot of times:

2020-12-14 00:21:42.845 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:42.849 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:43.047 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:43.048 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:43.266 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:43.267 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:43.478 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:43.483 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:43.674 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:43.675 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:43.882 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:43.887 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:44.089 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:44.090 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

2020-12-14 00:21:44.289 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 0,85,72

2020-12-14 00:21:44.293 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 0,85,72

So it is not stopping sending the color again and again.

After toggling the on off button it sometimes stops. But when I then try to send an event via the list item it is sending the color directly after sending the effect:

2020-12-14 00:24:15.731 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Effect' received command waves

2020-12-14 00:24:15.736 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Effect' predicted to become waves

2020-12-14 00:24:15.737 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Effect' changed from none to waves

2020-12-14 00:24:15.745 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Color' changed from 115,85,72 to 114.99565117875945,85,72

2020-12-14 00:24:15.757 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 114,85,72

2020-12-14 00:24:15.761 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 114,85,72

2020-12-14 00:24:15.762 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Color' changed from 114.99565117875945,85,72 to 114,85,72

2020-12-14 00:24:15.772 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 114,85,72

2020-12-14 00:24:15.775 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 114,85,72

2020-12-14 00:24:15.780 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 114,85,72

2020-12-14 00:24:15.787 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 114,85,72

2020-12-14 00:24:15.789 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Color' changed from 114,85,72 to 113.9958800640879,85,72

2020-12-14 00:24:15.798 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Effect' changed from waves to none

2020-12-14 00:24:15.970 [INFO ] [smarthome.event.ItemCommandEvent    ] - Item 'Licht_Weihnachtsbaum_Color' received command 114,85,72

2020-12-14 00:24:15.975 [INFO ] [rthome.event.ItemStatePredictedEvent] - Item 'Licht_Weihnachtsbaum_Color' predicted to become 114,85,72

2020-12-14 00:24:15.976 [INFO ] [marthome.event.ItemStateChangedEvent] - Item 'Licht_Weihnachtsbaum_Color' changed from 113.9958800640879,85,72 to 114,85,72

So it is not possible to send an event again because it will be overwritten by the color.

When I then try to change the event value of my Item Licht_Weihnachtsbaum_Effect in Settings - Items it will also be overwritten by the color.

How could this be resolved?

@ysc Should I open an issue in github or is this not possible as this is currently under development? Maybe you are also already aware of this bug

I just reproduced it with some Hue lights, in factā€¦ thatā€™s bad indeed. Iā€™ll have a look at it. It doesnā€™t happen every time, though, but I got the same problem as you once.

1 Like