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?
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
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.
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
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…
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)
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
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.
Understandable - thanks for the info!
hello,
@crnjan
this not works, when .displaystate is empty he dont usw the .state, he says “undefined”
text: =Math.round(items[props.duration].state / 60) + " Minuten " + " ᛫ " +items[props.rating].displayState || items[props.rating].state
@RGroll
have you perhaps a idea why he shows me the scrollbar on the right side of the widget?
my code
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:
visible: =items.myKodi_showtitle.state !== "UNDEF"
text: =items[props.tvshowtitle].state
style:
font-size: 35px
- component: f7-row
slots:
default:
- component: Label
config:
text: =items[props.title].state
style:
font-size: 20px
width: 100%
- component: f7-col
slots:
default:
- component: Label
config:
text: =items[props.genre].state
style:
font-size: 16px
- component: Label
config:
text: =Math.round(items[props.duration].state / 60) + " Minuten " + " ᛫ " +items[props.rating].state || items[props.rating].displayState
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```
text: =Math.round(items[props.duration].state / 60) + " Minuten " + " ᛫ " + (items[props.rating].displayState || items[props.rating].state)
okay i found the problem.
hello,
i only get the actually position of a movie or episode in secons, i try to format it in hr:mm (Hour:Minutes).
i try it with a rule, but that is to much because the progress changes every second. Perhaps someone has a idea?
rule "progress - neues Format"
when
Item myKodi_currenttime changed
then
val totalSecs = (myKodi_currenttime.state as Number).intValue
val min = (totalSecs / 60) % 60
val hrs = (totalSecs / (60*60)) % 24
val txt = (myKodi_currenttime)
myKodi_currenttime_formated.postUpdate(String::format("%02d:%02d", hrs, min))
logWarn("formatierter fortschritt", "" +myKodi_currenttime_formated.state)
end
If that is too much then there is something wrong with your setup. It should be able to do that calculation in milliseconds, not a second or more. So the fact that it changes every second should not be a concern.
What type is myKodi_currenttime? If you can use Number:Time then all you need to use is %1$th:%1$tM:%1$ts
and it will convert the seconds to HH:MM:SS for you I think (if it can be longer than 24 hours you’ll need to add %1$td
. If it can be longer than 31 days you’ll need to use a transformation.
You could also use a JavaScript transformation, but if your rule can’t keep up, the transform won’t be able to keep up either.