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

matt1 · December 13, 2020, 2:23am

Thanks for trying to break it down into smaller chunks to understand, however when I try to recreate it, it fails to work. Here is the code after I paste it all back together, done in the widget editor. Any tips why a simple paste together fails to give a working widget?

uid: testWidget
component: f7-card
config:
  title: Chromecast widget example
    - component: f7-block
      config:
        class:
          - padding
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
					# item: =props.prefix+"_Image"
                    url: https://picsum.photos/600/300
                    style:
                      width: 100%
                      height: auto
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-player-controls
                        config:
                          item: =props.prefix+"_MediaControl"
						  artistItem: =props.prefix+"_MediaArtist"
						  trackItem: =props.prefix+"_MediaTitle"
                - component: f7-col
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          item: =props.prefix+"_Volume"
                          min: 0
                          max: 100
                          step: 10
                          unit: %
                          label: true
                      - component: oh-button
                        config:
                          text: Stop
                          iconF7: stop
                          fill: true
                          color: red
                          action: command
                          actionCommand: ON
                          actionFeedback: Media Stopped
                          actionItem: =props.prefix+"_Stop"
                          class:
                            - margin-top
          - component: f7-row
            config:
              class:
                - padding-top
                - justify-content-center
              style:
                border-top: 1px solid lightgray
            slots:
              default:
                - component: Label
                  config:
                    text: YouTube Music
					# text: =props.prefix+"_App"
                    style:
                      font-size: 24px

RGroll · December 13, 2020, 2:38am

Hi @matt1

I updated the post.

I left out the connecting slots over the different chunks there. For your understanding: Each component has slots (mostly all have a ‘default’ one at least, in which other components sits) which defines if a component sits inside another element.

andydukes · December 13, 2020, 3:55am

Hi.
There are a couple of formatting errors in your widget. I got it working with the following changes. I’m not the best coder in the world so you might want to double check; and I could not completely test it without waking the house up!
The main ones being ‘title’ needing to be under config (I think) and the unit on the slider needing to be in quotes as you wanted to use the ‘%’ sign.
Hope this helps.

uid: testWidget
props:
  parameters:
    - label: Prefix
      name: prefix
      required: false
      type: TEXT
timestamp: Dec 13, 2020, 3:44:15 AM
component: f7-card
slots:
  default:
    - component: f7-block
      config:
        title: Chromecast widget example
        class:
          - padding
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: https://picsum.photos/600/300
                    style:
                      width: 100%
                      height: auto
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-player-controls
                        config:
                          item: =[props.prefix + '_MediaControl']
                          artistItem: =[props.prefix + '_MediaArtist']
                          trackItem: =[props.prefix + '_MediaTitle']
                - component: f7-col
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          item: =props.prefix +'_Volume'
                          min: 0
                          max: 100
                          step: 10
                          unit: "%"
                          label: true
                      - component: oh-button
                        config:
                          text: Stop
                          iconF7: stop
                          fill: true
                          color: red
                          action: command
                          actionCommand: ON
                          actionFeedback: Media Stopped
                          actionItem: =props.prefix+"_Stop"
                          class:
                            - margin-top
          - component: f7-row
            config:
              class:
                - padding-top
                - justify-content-center
              style:
                border-top: 1px solid lightgray
            slots:
              default:
                - component: Label
                  config:
                    text: YouTube Music
                    style:
                      font-size: 24px

andydukes · December 13, 2020, 4:07am

HI Again,

Forgot to say; I think you want “_CurrentTrack” and not “_MediaTitle” for the trackItem parameter on the oh-player-controls. I didn’t correct that in my original reply.

matt1 · December 13, 2020, 4:16am

Thank you, it mostly works now. I just wanted it to display all elements, which you have solved that so I can now hopefully learn the secret handshake on how to keep the yaml happy.

presidentio · December 13, 2020, 11:11am

@ysc Could you please provide an example how to override a text color for oh-cell?

Christian_Brosius · December 13, 2020, 1:24pm

Is it already possible to set a background image for the automatically created location-cells by ourselves?

I saw it in the youtube-video from the virtual-meetup and it looks awesome.

Foxejoe · December 13, 2020, 3:25pm

Yes. Have a look here also
https://community.openhab.org/t/openhab-3-0-milestone-4-discussion/109174/2
Just click on the orange pen on the top and than choose the room and set the background image.
very easy

Christian_Brosius · December 13, 2020, 7:13pm

Thank you very much, I missed that one. Went direct from MR3 to MR5

maxwie1093 · December 18, 2020, 1:16pm

anyone tried storing a JSON inside a Item? Was able to read and parse it with JSON.parse but can’t figure it out how to write something back. Have an input (time) field and would like t read the time from Json, change it and store it with the sendbutton option

buschif4 · December 18, 2020, 2:05pm

I was able to write json back to string. You need to stringify the JSON object. Otherwise you will paste the whole object to the item but this is not accepted by an string item.

If you use a ECMA script you can use the following:

events.postUpdate(myItemName, JSON.stringify(myJSONObject))

On GUI pages this is not done out of the box. I used find and replace for this but it is ugly. Maybe in the future there will be a better solution available.

maxwie1093 · December 19, 2020, 6:25pm

Ah thx. Yea already used the JSON stringify but didn’t think about using events.postUpdate ( ).
Im quite new to JavaScript and run in the problem of using a variable/prop inside the JSON.parse callup like

JSON.parse(items.myitem).wz.mo

is my current syntax which works but i want to use a prop insteadof the “wz” to use the widget dynamically. Any hints? (maybe it’s just to late for me and i dont’see the obvious)

Ion3 · December 22, 2020, 3:11pm

How to do it the easy way? I have to place an URL. I’m missing the upload button.

RGroll · December 22, 2020, 3:52pm

No upload button - you have to set the path / url to your image.

If you’re on linux, store your images in ‘/etc/openhab/html/’ and link them with ‘/static/yourimage.png’ or use an external URL.

candiesdoodle · December 23, 2020, 9:47am

Hi @ysc, i have been using the snapshots for past months, and really congrats to all the team to get the final version out
wanted to check if you would have a chance to look at the drop down options for oh-input type widgets, like list items, cards etc. thanks!

ysc · December 23, 2020, 3:07pm

Nope probably not until next year - happy holidays!

candiesdoodle · December 23, 2020, 3:08pm

Thank you. Will use an alternative for now
Happy Holidays!

dirkdirk · December 26, 2020, 12:13am

Hi @hmerk,
I try to color my buttons too.
Your code is working for lights and contacts.

But what is the correct code to change the color with a dimmer light item?

This doesn’t work for me when a dimmer is the item
It looks like it only changes the color of the dimmer slider background, but not the button background.

color: ‘=(items.Flur_eingang.state === “0”) ? “” : “blue”’

Thank you!

hilbrand · December 26, 2020, 7:24am

Lol. What is the status of this ui documentation? Is it ready to be included in the openHAB documentation? Because this thread has completely derailed into a q&a about ui instead of feedback on the documentation.

So either only useful feedback on the documentation page is posted here or this thread should be closed. And if one has a question about the ui open a new topic please.

Confectrician · December 26, 2020, 9:53am

We are rare on documentation contributors as usual.
@rlkoshak is working on additional articles for the beginner tutorial.
So far no onw is working on a port to the docs for this yet.

Maybe closing this for now should be the best option.