Searchable HTML overview of existing icons #29

tfc · 2022-09-30T09:49:09Z

Hi,

in order to have it easier selecting icons from this great plantuml icon font sprites library, i created myself a nice little HTML overview of all items that are available in this runner:

The overview is generated with a python script that can be rerun anytime if the icon collection is extended
It might be a nice addition to this library/github repo if the generated output would be shared online (e.g. github pages feature).
I can help doing that but i wanted to ask if there is interest in this at all.

The python script:

#!/usr/bin/env python3

import os


def all_puml_files_iterator(root_dir):
    return (
        os.path.join(dp, f)
        for dp, dn, filenames in os.walk(root_dir)
        for f in filenames
        if os.path.splitext(f)[1] == ".puml"
    )


def get_folder_and_name(puml_file_path):
    relpath = os.path.relpath(puml_file_path)
    return os.path.dirname(relpath), os.path.splitext(os.path.basename(relpath))[0]


paths_and_names = map(get_folder_and_name, all_puml_files_iterator("."))

items_dict = {}
for path, name in paths_and_names:
    items_dict[path] = items_dict.get(path, []) + [name]
items_dict.pop("")

print(
    """
<html>
  <head>
    <title>Plantuml Icon Font Sprites Overview</title>
    <style>
    .cards {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .card {
      flex: 0 0 200px;
      margin: 10px;
      border: 1px solid #ccc;
      box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    }
    .card img {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      display: block;
      padding-top: 10px;
    }
    .card .text {
      padding: 0 20px 10px;
    }
    pre {
      font-size: small;
    }
    </style>
  </head>
  <body>
"""
)

for folder, names in items_dict.items():
    print(
        f"""
    <h1>Folder "{folder}"</h1>
    <main class="cards">
"""
    )
    for name in names:
        print(
            f"""
      <article class="card">
        <img src="{folder}/{name}.png">
        <div class="text">
          <h2>{name}</h2>
          <pre>
!include common.puml
!include {folder}/{name}.puml</pre>
        </div>
      </article>
"""
        )

    print(
        """
    </main>
    <hr/>
"""
    )

print(
    """
  </body>
</html>
"""
)

mihaigalos · 2022-10-31T17:19:28Z

Hi @tfc, this is awesome. Please open a PR so that the maintainers can review and merge it.

mihaigalos · 2022-10-31T17:30:54Z

btw: please tag me in the PR so I can also contribute / improve if I see anything.
I would open it myself, the glory is however yours! 😄

Also, I suggest the following diff to also show the macro to be used:

diff --git a/genicons.py b/genicons.py
index 095d14b..9a35f7e 100644
--- a/genicons.py
+++ b/genicons.py
@@ -1,5 +1,13 @@
 
     for name in names:
+        with open(folder+"/"+name+".puml", 'r') as searchfile:
+            for line in searchfile:
+                r=re.search('.*!define (.*?)\((.*)',line)
+                macro=""
+                if r:
+                    macro = r.group(1)
+                    break
+
         print(
             f"""
       <article class="card">
@@ -8,7 +16,10 @@
           <h2>{name}</h2>
           <pre>
 !include common.puml
-!include {folder}/{name}.puml</pre>
+!include {folder}/{name}.puml
+"""+ macro +
+"""
+</pre>
         </div>
       </article>
 """

Result:

Usage: python3 genicons.py > index.html && firefox index.html See: tupadr3#29

tfc · 2022-11-02T09:41:59Z

Oh, interesting. What do i need the macros for? I just use the titles of these items in my plantum descriptions (i.e. moon_25 and not WEATHER_MOON_25)

mihaigalos · 2022-11-02T16:12:58Z

The titles are the *.puml files where the sprite is defined.
The macros are how to actually use them in PlantUML code.

Example:
This uses the DEV2_SSH_ORIGINAL_WORDMARK defined there to produce that PlantUML diagram.

tupadr3 · 2024-05-09T19:46:18Z

@tfc I integrated it into the project. Take a look at index.html

mihaigalos added a commit to mihaigalos/plantuml-icon-font-sprites that referenced this issue Oct 31, 2022

Add script for generating a webpage with all icons

16cb89f

Usage: python3 genicons.py > index.html && firefox index.html See: tupadr3#29

tupadr3 closed this as completed May 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Searchable HTML overview of existing icons #29

Searchable HTML overview of existing icons #29

tfc commented Sep 30, 2022 •

edited

Loading

mihaigalos commented Oct 31, 2022

mihaigalos commented Oct 31, 2022 •

edited

Loading

tfc commented Nov 2, 2022

mihaigalos commented Nov 2, 2022

tupadr3 commented May 9, 2024

Searchable HTML overview of existing icons #29

Searchable HTML overview of existing icons #29

Comments

tfc commented Sep 30, 2022 • edited Loading

mihaigalos commented Oct 31, 2022

mihaigalos commented Oct 31, 2022 • edited Loading

tfc commented Nov 2, 2022

mihaigalos commented Nov 2, 2022

tupadr3 commented May 9, 2024

tfc commented Sep 30, 2022 •

edited

Loading

mihaigalos commented Oct 31, 2022 •

edited

Loading