SVG Icons - with Matrix Theme

dastrix80 · September 7, 2018, 5:53am

Hi All

Has anyone been successful in bundling in new icons ? Im struggling to get this icon into AppIcons.svg, other icons load in inside this file.

Using this in HabPanel

<symbol id="ps4">

                <path d="M443.985,280.831c0-1.639-1.328-2.968-2.967-2.969l-14.185-0.009v-53.262c0-6.982-3.867-9.472-7.486-9.472
                        c-4.839,0,0.306-2.32-103.92,61.689c-7.71,4.728-6.111,11.55,3.406,11.55l88.849,0.012v5.559c0,1.641,1.33,2.969,2.971,2.969
                        c17.979,0,16.181,1.49,16.181-8.535C445.542,288.363,443.985,289.775,443.985,280.831z M407.7,277.836h-73.508l73.508-45.259
                        V277.836z"/>
                <path d="M164.474,215.118H71.515c-1.639,0-2.969,1.33-2.969,2.969v4.565c0,1.64,1.33,2.969,2.969,2.969h87.29
                        c6.416,0,10.097,4.35,10.097,11.936s-3.68,11.938-10.097,11.938h-70.17c-11.452,0-20.089,9.581-20.089,22.287l0.006,22.146
                        c0,1.64,1.33,2.968,2.969,2.968H84.68c1.639,0,2.969-1.329,2.969-2.969v-22.146c0-7.045,3.844-11.78,9.564-11.78h67.262
                        c14.509,0,23.522-8.592,23.522-22.424C187.996,223.724,178.983,215.118,164.474,215.118z"/>
                <path d="M319.254,215.972c-0.557-0.557-1.313-0.87-2.102-0.87l-50.739,0.01c-14.509,0-23.522,8.601-23.522,22.445v36.897
                        c0,7.58-3.68,11.929-10.097,11.929h-47.616c-1.639,0-2.969,1.33-2.969,2.969v4.575c0,1.641,1.33,2.969,2.969,2.969h53.276
                        c14.521,0,23.538-8.596,23.538-22.433v-36.918c0-7.587,3.678-11.938,10.089-11.938h45.073c1.639,0,2.969-1.33,2.969-2.969
                        C320.123,217.919,320.356,217.075,319.254,215.972z"/>
                <path d="M492.498,155.046H273.501c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5h218.998c2.482,0,4.5,2.019,4.5,4.5
                        v67.063c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.499-7.5v-67.063C511.999,163.795,503.25,155.046,492.498,155.046z"/>
                <path d="M504.5,269.113c-4.143,0-7.5,3.358-7.5,7.5v60.839c0,2.482-2.018,4.5-4.5,4.5H19.501c-2.481,0-4.5-2.018-4.5-4.5V174.548
                        c0-2.481,2.019-4.5,4.5-4.5h218.997c4.143,0,7.5-3.358,7.5-7.5c0-4.142-3.357-7.5-7.5-7.5H19.501
                        C8.749,155.046,0,163.795,0,174.548v162.905c0,10.754,8.749,19.501,19.501,19.501h472.998c10.753,0,19.501-8.749,19.501-19.501
                        v-60.839C512,272.471,508.643,269.113,504.5,269.113z"/>

</symbol>

rlkoshak · September 7, 2018, 3:43pm

To add your own custom icons you need to just drop them into the conf/icons/classic folder. If they are to be dynamic icons they need to follow the rules defined here.

To use SVG icons you need to make sure svg is selected in PaperUI -> Configuration -> Settings.

dastrix80 · September 7, 2018, 9:07pm

Hi Rich

Im talking specifically with the custom theme, which combines the svg’s into a another file and references them using xref:

Cheers

rlkoshak · September 7, 2018, 9:25pm

I’ve seen no documentation or reference indicating that is possible with OH.

zolakk · September 7, 2018, 11:14pm

I’ve had issues in the past where I couldn’t get the icon to display after adding it to appicons.svg due to it being out of the viewport that the theme uses. The viewport is kind of like a cropped view, so if your image doesn’t fall into that part of the image file you won’t see it. I’ve also had the old version before the addition being stuck in the browser cache, so clearing the cache might just be the ticket too.

If you open the file in a vector editor like inkscape helps a lot with troubleshooting these kinds of issues, you can then see if it’s showing on top of the pile of other icons and if not you can drag and resize as necessary in a visual way. I always also work on a copy of my appicons.svg file when doing this just in case I accidentally mess something up.

Edit: @rlkoshak, OP is referring to this if you are curious: Matrix theme for Habpanel

rlkoshak · September 8, 2018, 1:30am

Added the HABpanel read and moved to the HABpanel section so more of the appropriate people will see it now and in the future.

dastrix80 · September 8, 2018, 9:46pm

Hi @zolakk i installed inkcsape, how do you mean you find see if its showing on top of a pile of other icons?

yes ive had cache issues, so thats an easy fix!

dastrix80 · September 8, 2018, 10:50pm

Further zolakk, i think i got what you meant about the viewport.

If the code has 0 ,0 , 440, 110 that means its 440 pixels wide by 110 high. If i open a SVG icon, and resize, you can see its far off where it should be. So i adjusted the height etc to effectively centre it like this:

However, when you edit the file to copy the code into the Appicons.svg there so much stuff in there I’m not even sure what I need?

See below of what Inkscape exported when i saved the resized svg

zolakk · September 9, 2018, 6:23pm

That’s kind of tough, but what I would try is create a new < g > < /g > block with the ID you want in the appicons.svg file and copy and paste everything below the yellow highlighted lines into your new block and test that.

dastrix80 · September 9, 2018, 9:12pm

Ill give it a go! thanks!

dastrix80 · September 10, 2018, 6:19am

That didnt really do anything. Its not entirely clear to me how to resize these things or make them work!

zolakk · September 10, 2018, 3:54pm

What happens if you open the appicons.svg with the newly added icon in inkscape? You should see it there as a layer and may have to relocate/resize it there too

dastrix80 · September 10, 2018, 9:03pm

Hmm i dont see any layers in there I downloaded the github version again, opened it, i dont see layers

zolakk · September 10, 2018, 10:52pm

Sorry, after double checking I misspoke because I was working from memory. Objects (Object -> Objects… menu) is what I meant to say. For example, here’s what mine looks like in Inkscape Objects

dastrix80 · September 12, 2018, 8:42am

Ah.

This blows my mind. I create a 440x110 picture, put my icon in and it still displays weird!! why is this so god damn hard!

zolakk · September 12, 2018, 5:24pm

It’s not terribly difficult once you figure it out, but the “figuring it out” is the hard part. Instead of trying to explain through words, here is step by step what I did to integrate that PS4 logo into my AppIcons.svg file. Hopefully that clears up the confusion.

Open your AppIcons file, go to the bottom between the final < /g > and < /svg > tag and add an empty line
Add a new < g > and < /g > block with id=ps4 (or whatever you want to call it)
Open your source svg file, select all the < g > and < /g > tags that have data

PS4-Step1.png1118×822 92.3 KB
Copy and paste that into your newly created < g id=“ps4” > < /g > block

PS4-Step4.png433×834 47.8 KB
Save and open the file in InkScape, it should look like this
Resize it so it fits in the box with all the other icon “mess”. This box is what the “viewbox” is targeting in HabPanel
Drag it wherever in the area you want it to be.
Save it, copy it into your /etc/openhab2/html/matrix-theme folder (this maps to /static/matrix-theme in HabPanel). Reference it like so. Note the #ps4 tag at the end is case sensitive and has to match the ID you added into the AppIcons EXACTLY

PS4-Step8.png988×269 34.1 KB
There you have it!
In case you don’t feel like messing around with it yourself, here’s the svg file I used to do the above

dastrix80 · September 12, 2018, 10:51pm

legend! Thanks will follow the steps tonght Thank you!