Question on widgets

hello everyone

is it possible in a custom widget to show items image?

for example, from the kodi binding a item with the thumb.

Image mykodi_thumb “thumb” { channel=“kodi:kodi:b832c3e34e:thumbnail” }

the value of the item is

data:image/jpeg;base64,/9j//gAQTGF2YzU4LjE4LjEwMAD/2wBDAAgEBAQEBAUFBQUFBQYGBgYGBgYGBgYGBgYHBwcICAgHBwcGBgcHCAgICAkJCQgICAgJCQoKCgwMCwsODg4RERT/xADSAAACAgMBAAAAAAAAAAAAAAAABQQGAwECBwEAAQUBAQAAAAAAAAAAAAAAAAUEAwIBBgcQAAEDAwIDAwcFCwoCCgIDAQIBAwQFABITIgYRMkJSFGIxMwdyIyFDkqIVgnPTFpNRsjUks0HU0qPCdDRTYXHDY4NUtBeEJeKRRIHwxPKUVTZGZBEAAQMDAQQFBgkJBgUFAQAAAwACBBMFARIjMhEGIlMzQxRjUkJzIYNigrJykyQxFZIH8OKio8PC0lHTs0RBNTQloXHyYRZkJrHxwf/AABEIAOEBkAMBIgACEQADEQD/2gAMAwEAAhEDEQA/ALF++y1dD4ni1Xky6iR5afBWy2ia/wC1n2vIPf7Q7raXVLjcOa3pIssssWossssQiyyyxCLLLLEIssssQiyyyxCLLLLEIssssQi8clxxphw2xzIU5onV+ZvL2A33kvXwsRnpNUuNSKZJESGZU64qoKkNM0I0RMhy9ObjeJf7PjzPd

but when i try to show it, with

component: f7-page
config:
background: “=items[props.thumb].state”

he doesnt shows the image.

Try:

component: oh-image
config:
  item: =items[props.thumb]
1 Like

sry i edited my post.

i mean the background in a f7 page.

component: f7-page
config:
style:
background: “=props.thumb”

is there any reasonable documentation somewhere where the individual components and their settings are explained?

I have been trying to create widgets myself for some time, but without a docu this is simply not possible and nonsensical.

You can try it with an F7 card with the style background image: = progs.item.

no, that doesnt works.

but iam back at my image problem.

  • component: f7-col
    slots:
    default:
    - component: oh-image
    config:
    item: “=items[props.item].state”
    style:
    width: 100%
    height: auto

why he doesnt shows me my picture ? i tried everything?

Hey @marc1310

there are multiple articles in this forum for the used f7-components - you also have tooltips in the editor for the most of the components and the configuration properties that each component have. Especially usefull for the oh-specific components as they might have additional settings that are not documented at a single place currently.

I mentioned some of these sources here, if you’re interested.

Image items does not populate the base64 encoded string they hold (only some basic information of the image-type and size will be returned) as their state. So accessing the state inside a css background-image won’t work.

AFAIK, the only way to access these encoded images dynamically from items, is to add the it to a image-component and call it via the ‘item’ config property.


@ysc Is there a reason why the string isn’t populated as item state? Maybe it’d be useful to make this encoded string available to reuse it in cases like this?!


Besides the messed up YAML structure (which is most likely related to the wrong code fence selection), you try to access the state of the item here and not the name of the item itself.

To get the item name from a prop, you have to do it this way:

component: f7-card
slots:
  default:
    - component: oh-image
      config:
        item: =props.item
        style:
          width: 100%
          height: auto
2 Likes

Thank you for your detailed reply.

now I’ve got it.

I have two more questions, maybe you can help me.

I try to show another small picture on the big picture, is that possible? the red rectangle.

widget

and I try to display the running time, for that I have to divide the sec / 60.

here is my code :

component: f7-card
config:
style:  
slots:
  default:
    - component: f7-block
      config:
        class:
          - no padding
          - no margin
      slots:
        default:
          - component: f7-col
        
            slots:
              default:
                - component: oh-image
                  config:
                    item: =props.item
                    style:
                      width: 100%
                      height: auto
                - component: f7-row
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.title].state
                          style:
                            font-size: 35px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.duration].state + " (Minuten)"
                          style:
                            font-size: 20px
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-player-controls
                        config:
                       
                          item: =props.mediacontrol

Yes to both - you could encapsulate both images inside a f7-block and assigning absolute positioning to the 2nd image.

To work with calculations inside of widgets you could use the very basic javascript’esque implementation of the Math function.

component: f7-card
slots:
  default:
    - component: f7-block
      config:
        class:
          - no padding
          - no margin
      slots:
        default:
          - component: f7-col
        
            slots:
              default:
                - component: f7-block
                  config:
                    class:
                      - no-padding
                      - no-margin
                  slots:
                    default:
                    - component: oh-image
                      config:
                        item: =props.item
                        style:
                          width: 100%
                          height: auto
                      slots:
                    - component: oh-image
                      config:
                        item: YOUR_SECOND_IMAGE_ITEM
                        style:
                          position: absolute
                          bottom: 16px
                          left: 16px
                
                - component: f7-row
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.title].state
                          style:
                            font-size: 35px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.duration].state / 60)  + " (Minuten)"
                          style:
                            font-size: 20px
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-player-controls
                        config:
                       
                          item: =props.mediacontrol

image

1 Like

okay, that works well.

now i try da add a slider that shows me the progress, when i make a “slider-card” it works. but under my widget the slder dont moves.

have you a idea?

THX

 - component: f7-col
                  slots:
                    default:
                      - component: oh-slider
                        config:
                        item: =items.myKodi_ctp

Same thing as above - you’re trying to access the items state and not the item name itself.

It’s sufficient to use the item name here.

item: myKodi_ctp

I’d recommend you to have a look in the library of already created widgets and try to adapt what you see. Like Sonos player widget, Multiroom audio widget or Spotify widget as all of them uses the components that should suit your needs.

okay, thats right but i tested this and it wont work.

item: =props.progress
item: mykodi_ctp

maybe because the item is a number with many numbers after the decimal point?

the value of the item is for example

43.367347717285156

i tried

 =Math.round(items[props.progress].state)

then i get rounded numbers, for example 45, but the slider dont moves.

This shouldn’t be a problem.

It might possible that you’ve to define a min and max value as well as a step, like this:

- component: oh-slider
  config:
    min: 0
    max: 100
    step: 1
    item: =props.progress

And I’ll try to come ahead of the question that might follow here… :stuck_out_tongue:

It seems you wanna use this as a slider for the elapsed / remaining time of the media you’re playing (which is obviously dynamic for each movie) - to do so, you could try to grab the max config parameter dynamically.

You need at least the length of the movie (as well as the elapsed time here and set these as the max value, with something like:

item: =props.progress
min: 0
max: =Number(items.movieLength.state)

:slight_smile: IT works well without the min and Max.

I tried to put a star icon directly in front of the 7 (f7-icon) on the screenshot, in the widget editor it is suitable but not when I open it on the mobile phone or on the overview page.

I think that’s because of the position. but i don’t know how to adjust them.

component: f7-card
slots:
  default:
    - component: f7-block
      config:
        class:
          - no padding
          - no margin
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: f7-block
                  config:
                    class:
                      - no-padding
                      - no-margin
                  slots:
                    default:
                      - component: oh-image
                        config:
                          item: =props.item
                          style:
                            width: 100%
                            height: auto
                      - component: oh-image
                        config:
                          visible: =items.myKodi_mediatype.state == "movie"
                          item: =props.thumb
                          style:
                            position: absolute
                            bottom: 16px
                            width: 16%
                            height: 40%
                            left: 16px
                      - component: oh-image
                        config:
                          visible: =items.myKodi_mediatype.state == "episode"
                          item: =props.thumb
                          style:
                            position: absolute
                            bottom: 16px
                            width: 40%
                            height: 40%
                            left: 16px
                     
                - component: f7-row
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =items[props.title].state
                          style:
                            font-size: 30px
                      - component: f7-icon
                        config:
                          f7: star_fill
                          size: 28
                          color: red
                          style:
                            position: absolute
                            bottom: 24%
                            left: 92%
                      - component: Label
                        config:
                          text: =Math.round(items[props.rating].state)
                          style:
                            font-size: 30px
                - component: f7-col
                  slots:
                    default:
                      - component: Label
                        config:
                          text: =Math.round(items[props.duration].state / 60)  + " (Minuten)"
                          style:
                            font-size: 16px
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          item: =props.progress
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: oh-player-controls
                        config:
                          item: =props.mediacontrol
                         ```

then i found a problem with the dispay state.

here my item

Number myKodi_rating "rating [%.1f]" 

then i use displaystate to show me the redesignd item with only one number after the point.

=items[props.rating].displayState

that works fine, until the rating is a 8.0 or 2.0 or 3.0 or 4.0. then the displaystate is empty only when the rating item has more then 2 numbers after the point it works.

exmaple, that works with displaystate

7.699999809265137

this doesnt works

8.0

here is a result of the rating item, when the rating is a for example 8.0

{ "state": "8.0" }```

there is no displaystate.
=items[props.rating].displayState || items[props.rating].state
1 Like

okay, I could have guessed that too. Thank you

I think that’s how the implementation of the state handling for the image items is made, I suppose to avoid ending up with long base64 data in your logs, and the SSE connections, which isn’t ideal.

1 Like

Understandable - thanks for the info!