How to Show kodi current playing rating stars in habpanel?

Apps & Services HABPanel
,
1

So there is a new thing in kodi and is userrating of currently playing media.

My question is where to start for showing 10 stars and shinning userrating number of stars in habpanel?

I can do SVG and html but I do not know how to start an développement of my design
Here is my current display:

Annotation 2020-03-14 092532
Annotation 2020-03-14 0925321318×747 192 KB

2

You could use the dynamic icons?

What does the Item look like in openHAB2?

Is it just a number?

3

Yhep, Numeric number from -1 to 10 and it’s new channel from Openhab 2 Version 2.5…

I’ve start something today from this exemple from w3schools

I’ll be back on this topic when I’ve success or have other problems…

Dynamic icons is for Openhab classic UI… I’m talking about HabPanel design here :blush:

1 Like
4

I’m not entirely sure that it doesn’t apply to HabPanel too

I haven’t tried it, but it’s possible.

The other option would be to create a widget ?

5

So here I go how I’ve done this in my custom widget:

image
image1327×753 133 KB

  • First of all getting the value from this item is an numerical and it show with 1 traling digit like 8.0 for a 8 stars ratted media
  • Second Number 10 is seen like a 1 so: 10.0 = 1 and 10 from the perspective of angularJS. Not sure how to fix that… but I’v manage some workaround…

Here my html angular code:

<div class="insertStarRating" >
  <!-- {{itemValue(config.gmanmedia_cpRating,true) | number:0}} -->
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 1)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 2)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 3)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 4)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 5)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 6)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 7)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 8)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) >= 9)?'yellow':'gray'}" >&#9734;</span>
  <span ng-style="{color: (itemValue(config.gmanmedia_cpRating) > 9)?'yellow':'gray'}" >&#9734;</span>
</div>
  • So what is commented out is my current playing user rating from my Kodi and it can be filtered to show without trailing digit but it’s not the real value returned to be used…
  • For 10 star rated media I’ve put >9 for it to be true because >= doesn’t see 10.0 Numerical value :thinking:

Next step is to make it usable with ng-click for us to be able to rate from my touch panel

1 Like