search

elax46 / custom-brand-icons

Custom brand icons for Home Assistant
https://elax46.github.io/custom-brand-icons/
Other
837 stars 90 forks source link

Feature Request: TTF for openHASP #609

Closed NODeeJay closed 6 months ago

NODeeJay commented 6 months ago

Well, it's not really a bug report and not a new icon request either.

I am using openHASP for small touch screens and to use all MD icons from Home Assistant I added MDI as a true type font, since openHASP only brings a subset of MDI (around 100 icons).

Over time many icons in HA got replaced with better ones from this repo. Now, to be able to use this repo also on openHASP displays I would need a TTF of those icons. It seems pictogrammers build this with every release but I did not find any script building a font out of all icons, just the general builder for a webfont.

Do you have any easy solution to also build a true tyep font on release?

Thanks, Alex

elax46 commented 6 months ago

@NODeeJay Hi, it's something I already had in mind to do but I hadn't yet found automatic tools. Here's a zip file with a generation of the icons in ttf. In the zip you will find a demo.html file that shows you the icon and related code. At the moment I don't know why the icons are not displayed in the demo.html. but I think the font should work let me know, thanks

NODeeJay commented 6 months ago

Wow, gracie mille! I see you updated it a couple of minutes ago in the iconfinder branch, I take it from there since I was not able to find it in the dev tree. I test it and report back.

elax46 commented 6 months ago

yes it is an experimental branch as I will be updating the dev branch soon. let me know if it works, I don't know why but in the demo.html the icons are not visible

NODeeJay commented 6 months ago

At least something I can contribute, and sadly, without the icons displayed it does not work for my purpose. In my case on Windows I installed the TTF and restarted the browser, this also solved it for MDI (installing MDI, then restarting the browser).

  1. download the zip

  2. extract the TTF file and install the TT font to the Windows font store (double click, install)

  3. rename the same file to cbi.ttf (since openHASP may encounter a file name length issue and wants all lowercase)

  4. copy cbi.ttf via FTP or the file browser to the openHASP device

  5. open a browser of choice (important, have it closed while installing the font file, or close it afterwards, that the new font can be used)

  6. drag 'n drop demo.html into it or double click on the html file in the explorer

  7. choose the icon and copy the undefined box under it image

  8. paste this as text to the openHASP entry like this image Please note when you also use MDI: The MDI box looks a bit different in the file editor, as if there is a space pre- and appended image

  9. choose as text font cbi and the size, e.g. cbi32 (since it is a TTF it will scale up and down nicely) e.g. {"page":01,"id":47,"obj":"label","x":165,"y":148,"w":70,"h":70,"text_color":"#FFF","text_font":"cbi32","text":"","align":"center"} important is "text_font":"cbi32","text":""

  10. the first time after you uploaded the font file you need to restart the openHASP device, otherwise just save and "Reload Pages"

Et voila: IMG_20240402_222124 (Large)

Optional: If you send the icon from the HA addon for openHASP, copy/paste it the same way like this image

Since this is a much more comfortable approach (basically copy/paste after the font installation) than the suggested solutions with either the JSON payload or the RAW payload (see https://openhasp.haswitchplate.com/0.7.0/design/fonts/#encoding) thank you very much for your effort to produce the font!

elax46 commented 6 months ago

thanks for your feedback, I had understood that if the icons are not displayed on the demo.html page they do not work. Let's see if I can resolve the issue for the ttf package

NODeeJay commented 6 months ago

At first it failed with the issue in the FF console donwloadable font: rejected by sanitizer and also in Chromium based ones. I read a bit about, e.g. https://www.seanmcp.com/articles/fix-downloadable-font-rejected-by-sanitizer-error-in-firefox/ which brought me to the idea to install the font, since every installed font in Windows is used before any additional font would be used. As this resolved it for me, and actually I do absoluetely not have anything against MDI and CBI available in Word and other apps which I can easily print for IKEA scene buttons, as labels with the P-Touch or even use in FreeCad for 3d printed buttons, I consider this - incl. installing the TTF to the font store - a great solution for my use case.

And yes, the point 7/8 is to copy over the icon from the demo page as it is, but when the font is installed the icons show up and I can copy it w/o issues