Dynamic link to svg icon in href in a widget

Apps & Services HABPanel
1

Hi!

I would like to use the state of an item to determine which SVG icon to show in a widget. How is it possible to get an item state in here:

<use xlink:href="/static/Icons/weather.svg#Yr_[ITEM STATE GOES HERE]">

The item in question returns N, S and so on, and my icons in the SVG file are named Yr_N, Yr_S ā€¦

Kind regards,
Anders

2

Two options,
Change your item to be Tr_N, Yr_Nā€¦
Or create a String item and a rule:

rule
when
    Item Item1 changed
then
    svgString = "/static/Icons/weather.svg#Yr_" + Item1.state.toString
    stringItem.sendCommand(svgString)
end
3

Thanks for the quick reply!

What is the correct way to reference the value of svgString in the href?

4

I am not too sureā€¦
Front another thread we have:

<div><span ng-show="itemValue('Lampe')"></span></div>

That seems to call the item value
But I donā€™t have any experience with html :frowning:

5 
<use xlink:href={{itemValue('testURL')}}></use>

Did the trick! Thanks.

If someone has a method of using AngularJS or something similar without creating a new string item, please let me know :slight_smile:

6

Here it is :wink:

<use xlink:href="{{'/static/Icons/weather.svg#Yr_' + itemValue('Condition') }}"></use>

where ā€˜Conditionā€™ is your itemname

Bye Lorenzo

7

Thanks! :kissing_heart:

8

Hi!

I have a similar ā€œproblemā€.
I have created different .svg-files and i want to embed them also according to a itemvalue.
i already achieved that by using:
img src but I lose the ability to format the svgā€™s in my code by doing it this way.
Iā€™d love to use xlink:href but somehow i canā€™t get it to work.
I appended .svg at the end and my link now looks like this:

<use xlink:href="/static/icons/{{itemValue('Condition')}}.svg"></use>

But unfortunately that does not work.

10

maybe you shouldtry:

<use xlink:href="{{'/static/Icons/' + itemValue('Condition') + '.svg' }}"></use>

HTH
Jens

1 Like
11

Thanks i will try it.
But i chose to merge the icons into the one big .svg and go with the solution written above because i feel itā€™s ā€œcleanerā€ :slight_smile:

12

that ā€˜picking one icon, out of a set from only one svg fileā€™-part, is one of the parts in openhab that i donā€™t understand and i donā€™t find examples howto (make one svg file with many svg files in, address the icons, show them) maybe i donā€™t use the right spelling while i searchā€¦
but if i where able to address this i would try:

<use xlink:href="{{ '/static/Icons/' + itemValue('mySVGFile') + 'commandToPickIcon' + itemValue('Condition' }}"></use>

where commandToPickIcon is the Syntax i donā€™t know and in this possible solution i would fill another item (mySVGFile) with the string of the SVG-File to select fromā€¦

13

Hi!

Just follow the link to github and read the instructions. :slight_smile:
He also uploaded a python script to merge several .svgā€™s

after merging you can adress them by using the hashtag.
for example: test.svg#icon1 depending on the item name you define in the single svg.

14

lol, the # is the commandToPickIcon (thanks a lot)
Sure i start read this, but i donā€™t want to install python (i am a typical win user) , thatā€™s why i donā€™t complete reading till the end :frowning:
then this should work:
<use xlink:href="{{ '/static/Icons/' + itemValue('mySVGFile') + '.svg#' + itemValue( 'Condition')}}"></use>

or if you use only one SVG-File:
<use xlink:href="{{ '/static/Icons/mySVGFile.svg#' + itemValue( 'Condition' )}}"></use>

15

i got this working by now, thank you!
You can also merge them manually as i did (< 10 icons).