Icon Helper

[Mariusthvdb]

on the icon helper: In my setup, the icons are not filled out, nor does the html code in Dillinger show anything but the link

I take it thats because I am editing it locally, and within the repo?
or am I not doing things as they are supposed to....

the `repo does show correctly:

[arallsopp]

Dillinger is using strict markdown, whereas GitHub lets you use image tags. Unfortunately, there’s not really any other solution in native markdown that lets you specify a size for an image.

If your images are all the same size now as part of your workflow, I can just back this out and make it use markdown as before.

Do you have a development environment, btw? I mean, can you host web files on your local host? Or run a php script?

[Mariusthvdb]

guess I should look at that again yes, had it before, but never got the hang of it. any specific needs for this I should take into consideration?

btw, did you check the images now, Isnt that much better to view?

also, some of the custom icons are a bit off, compared to the mdi material standards and guidelines. I guess we should try to keep up that as much as possible.

[Mariusthvdb]

just discovered when previewing as pdf , it does show all the icons correctly:
https://dillinger.io/factory/fetch_pdf

[arallsopp]

You can now choose to generate the table as pure markdown (with native image sizing) or with icons as image tags, which specify 24px.

[Mariusthvdb]

btw, this is a quick and dirty way to test the icons the library. Havent given it a thought for a decluttering, out auto-entities yet. Maybe thats not possible. Anyways, would be cool if the icon helper could also blurb this? Thinking about adding a tooltip with the icon name:

    - type: grid
      columns: 6
      cards:
        - type: custom:button-card
          icon: cil:apple-homepod
        - type: custom:button-card
          icon: cil:apple-homepod-mini
        - type: custom:button-card
          icon: cil:cellphone-iphone
        - type: custom:button-card
          icon: cil:laptop-mac
        - type: custom:button-card
          icon: cil:desklamp-on
        - type: custom:button-card
          icon: cil:delete-alert
        - type: custom:button-card
          icon: cil:delete-alert-outline
        - type: custom:button-card
          icon: cil:dishwasher-silverware
        - type: custom:button-card
          icon: cil:earth-alert
        - type: custom:button-card
          icon: cil:earth-vibrate
        - type: custom:button-card
          icon: cil:home-broken
        - type: custom:button-card
          icon: cil:home-broken-outline
        - type: custom:button-card
          icon: cil:home-export-no-roof-outline
        - type: custom:button-card
          icon: cil:home-import-no-roof-outline
        - type: custom:button-card
          icon: cil:home-climate
        - type: custom:button-card
          icon: cil:home-climate-outline
        - type: custom:button-card
          icon: cil:home-pulse
        - type: custom:button-card
          icon: cil:light-switch
        - type: custom:button-card
          icon: cil:shutter-0
        - type: custom:button-card
          icon: cil:shutter-1
        - type: custom:button-card
          icon: cil:shutter-2
        - type: custom:button-card
          icon: cil:shutter-3
        - type: custom:button-card
          icon: cil:shutter-4
        - type: custom:button-card
          icon: cil:ikea-death-star
        - type: custom:button-card
          icon: cil:table-cylinder-lamp
        - type: custom:button-card
          icon: cil:uplighter
        - type: custom:button-card
          icon: cil:uplighter-2-way
        - type: custom:button-card
          icon: cil:sun-angle
        - type: custom:button-card
          icon: cil:sun-angle-variant
        - type: custom:button-card
          icon: cil:thermometer-empty
        - type: custom:button-card
          icon: cil:thermometer-full

bare bones tooltip:

[arallsopp]

I can generate that in the helper, yes. Will take a look when I’m at my machine.

Thanks for the source. Makes it much easier.

[Mariusthvdb]

this is even better:

    - type: custom:auto-entities
      card_param: cards
      card:
        type: grid
        columns: 6
      filter:
        template: |
          [{% for i in ['apple-homepod','apple-homepod-mini','cellphone-iphone','laptop-mac',
                        'desklamp-on','delete-alert','delete-alert-outline',
                        'dishwasher-silverware','earth-alert','earth-vibrate','home-broken',
                        'home-broken-outline','home-export-no-roof-outline',
                        'home-import-no-roof-outline','home-climate','home-climate-outline',
                        'home-pulse','light-switch',
                        'shutter-0','shutter-1','shutter-2','shutter-3','shutter-4',
                        'ikea-death-star','table-cylinder-lamp','uplighter','uplighter-2-way',
                        'sun-angle','sun-angle-variant','thermometer-empty','thermometer-full'] %}
               {{
                { 'type': 'custom:button-card',
                  'icon': 'cil:' + i,
                  'tooltip': i
                }
              }},
          {% endfor %}]

or with entities:

    - type: custom:auto-entities
      card:
        type: entities
        title: Test Custom icons
        state_color: true
      filter:
        template: |
          [{% for i in ['apple-homepod','apple-homepod-mini','cellphone-iphone','laptop-mac',
                        'desklamp-on','delete-alert','delete-alert-outline',
                        'dishwasher-silverware','earth-alert','earth-vibrate','home-broken',
                        'home-broken-outline','home-export-no-roof-outline',
                        'home-import-no-roof-outline','home-climate','home-climate-outline',
                        'home-pulse','light-switch',
                        'shutter-0','shutter-1','shutter-2','shutter-3','shutter-4',
                        'ikea-death-star','table-cylinder-lamp','uplighter','uplighter-2-way',
                        'sun-angle','sun-angle-variant','thermometer-empty','thermometer-full'] %}
               {{
                { 'entity':'input_boolean.test',
                  'icon': 'cil:' + i,
                  'name': i
                }
              }},
          {% endfor %}]

so that would leave us with the need for a list of names only ;-)

[arallsopp]

It might be possible to host this generator page, so that you can just point your browser at a URL and have it load up. That could allow us to manipulate localstorage to persist settings, but I think the repo needs github pages enabled.

When I read 'https://towardsdatascience.com/simple-guide-to-hosting-project-on-github-aebf6f3c6f97' it suggests there's a settings icon, but I don't see that. Perhaps its only there for you? If you can enable pages and set it to the main branch and build folder, perhaps we can access it here?

[Mariusthvdb]

not sure what all of that means just yet, but I did enable 'pages' and set it to main. when you have a moment, please check.

[arallsopp]

Thanks for enabling pages. The helper is now accessible here: https://mariusthvdb.github.io/custom-icons/docs/build/helper.html.
I'll see whether it lets us get at localstorage (a browser cache that lets me store files for use between visits) as that will simplify working with the initial json file.

[Mariusthvdb]

wow, thats perfect! Ive just tested it with the full list and all icons show!
even remains in cache...

only 'issue' with it it shows a whole lot of white space before the json:

[arallsopp]

Yeah, that’s a layout issue. The two items in the row are different heights. I might just make the input json full width, and have the rest underneath it. Should be ok on smaller screens.

[arallsopp]

Good stuff. I’d hoped it would.

Without a server to persist these things, it’s probably a good idea to copy your input JSON over the sample.json in docs. In the future, we could read that file on startup.

[Mariusthvdb]

I already have done that, its here https://github.com/Mariusthvdb/custom-icons/blob/main/docs/json/custom-icons.json

[arallsopp]

You can load from that link now, by clicking the big blue button in the helper.

And yes, you're right. This needs a UX overhaul, as the layout is getting very tall!

[arallsopp]

Oh! Good stuff. Thanks!

…

On Mon, 16 May 2022 at 15:28, Marius ***@***.***> wrote: I already have done that, its here https://github.com/Mariusthvdb/custom-icons/blob/main/docs/json/custom-icons.json — Reply to this email directly, view it on GitHub <#16 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AASZDGHLH53CPY3NM2ZTKR3VKJLQRANCNFSM5V5P7T4A> . You are receiving this because you commented.Message ID: ***@***.***>

[arallsopp]

Right. Updated with new UX. Now we are using a tabbed layout in the helper

Tab 1: Input JSON and column choice.
Tab 2: Generated Markdown
Tab 3: Sample Dashboard YAML
Tab 4: HTML table preview (which still doesn't care for two icons per row).

I also put the buttons to the top of each section, so that you don't have to scroll quite so far.

[Mariusthvdb]

Hey Andy,

Hope you're doing well!

took me some time to update several icons, and today was forced because HA dev deleted 2 icons I used myself ;-)

so, Ive added these to the repo and resources already and launched an update.
trying to update the table, I run into trouble though. Ive manually added them to the json, but if I click 'load from repo' it doesnt do that...

what am I doing wrong?

[arallsopp]

In the icon finder, you mean?

[Mariusthvdb]

Well, I mean the helper. I load that, then click Get from repo, and then it just doesnt see the lines I added to the .json file.

Ive just c&p it manually, and then it does build the table, but I now see it doest load the icons properly for those (and cooker-hood-alt)..

Must be my memory failing me here...
would appreciate a double check by you though ...

[arallsopp]

Oh, and I know exactly what you mean about not doing it often. Only for me, it's even more frustrating as I'm the one who wrote the code that I can't remember how to use 😆

[arallsopp]

@Mariusthvdb, you may have to remind me of the URL for that helper. I can't remember where it is or what it is supposed to do :)

Is it in this repo, or mine?

[Mariusthvdb]

On the move now so just a quick reply:

https://mariusthvdb.github.io/custom-icons/docs/build/helper.html

[arallsopp]

To test, I've looked through your recent commit and identified two icons that I can see were added one hour ago:

• https://github.com/Mariusthvdb/custom-icons/blob/main/docs/svgs/tablet-ipad-legacy.svg
• https://github.com/Mariusthvdb/custom-icons/blob/main/docs/svgs/laptop-windows.svg

Both seem to show up:

Is it just that the github.io url updates slightly slower than the main repo, as I've not made any change and that seems to include the latest icons. Or are there other icons that are missing?

[Mariusthvdb]

yes the missing icons was a mistake of mine, I had not added them in the svgs folder yet....

[arallsopp]

Does the URL of the helper still tell you the asset its trying to load for the external libraries, eg:
https://arallsopp.github.io/hass-hue-icons/docs/build/tester/iconfinder.html?library=https://cdn.jsdelivr.net/gh/Mariusthvdb/custom-icons/custom-icons.js

If it does, its that cdn link that's wrong. You can change it to any publicly accessible version of your script, eg:
https://arallsopp.github.io/hass-hue-icons/docs/build/tester/iconfinder.html?library=https://mariusthvdb.github.io/custom-icons/custom-icons.js

[arallsopp]

(and if that is what's wrong with it, I'll just amend my code so that the iconfinder points at that location by default)

[arallsopp]

Think I'm chasing the wrong thing. You're talking about the other helper tool, and this comment is a better answer: #16 (reply in thread).

Sorry, was on mobile and it didn't unfurl the thread to let me see context until I was on a bigger screen.

[Mariusthvdb]

I really dont understand what happend just now. I manually edited the json file to be 2 lines of icons.
Next clicked Get from repo, and it filled out just nicely.

it wouldn't do that before...

please let it rest for now, all seems to be well now ;-)

[arallsopp]

I really dont understand what happend just now. I manually edited the json file to be 2 lines of icons.

Next clicked Get from repo, and it filled out just nicely.

it wouldn't do that before...

I think the pages version of a repo (anything at GitHub.io) follows the code updates with a little lag. Probably just give GitHub time to notice. :)

[Mariusthvdb]

yeah, right ;-) hehe

on the cheat sheet, I have this link

[Icon Library Cheat Sheet](https://arallsopp.github.io/hass-hue-icons/docs/build/tester/iconfinder.html?library=https://mariusthvdb.github.io/custom-icons/custom-icons.js&map=CUSTOM_ICONS_MAP)

is that map=CUSTOM_ICONS_MAP really required? I just clicked the link in your answer few posts above #16 (comment) and that also works?

[arallsopp]

Perfect. Thanks. I’ll take a look

…

On Fri, 22 Jul 2022 at 12:03, Marius ***@***.***> wrote: On the move now so just a quick reply: https://mariusthvdb.github.io/custom-icons/docs/build/helper.html — Reply to this email directly, view it on GitHub <#16 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AASZDGA6FAQYYUXU77Y62QTVVJ5XLANCNFSM5V5P7T4A> . You are receiving this because you commented.Message ID: ***@***.***>