[{"element_type":"text","content":"\n        \u003ch1\u003eBeautiful Flat Icons\u003c/h1\u003e\n\u003cp\u003eThis is a set of free and open sourced icon graphics published by Nick Roach to the website elegantthemes.com.\u003c/p\u003e\n\u003ch2\u003e\u003ca href=\"https://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free\" target=\"_blank\"\u003eLink to Beautiful Flat Icons\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eOn the page click the \"Download The Package\" link. Or use the button below which I've linked to the same URL.\u003c/p\u003e\n      ","metadata":{}},{"element_type":"button","content":"https://www.elegantthemes.com/downloads/circle-icons.zip","metadata":{"class":"btn btn-large btn-block btn-primary","button_type":"primary","target":"_self","zip_folder":"false"}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003ch2\u003eLicense\u003c/h2\u003e\n\u003cp\u003eThe icons are licensed under the \u003ca href=\"https://www.gnu.org/licenses/gpl-2.0.html\" target=\"_blank\"\u003eGPL-2.0 License\u003c/a\u003e which permits their usage in personal and commercial projects.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003ch2\u003eIncluded Formats\u003c/h2\u003e\n\u003cp\u003eWithin the download there two different styles of the icons in all of the following formats:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eAdobe Illustrator \u003cstrong\u003e.ai\u003c/strong\u003e\n\u003c/li\u003e\n\u003cli\u003eEncapsulated PostScript \u003cstrong\u003e.eps\u003c/strong\u003e\n\u003c/li\u003e\n\u003cli\u003ePDF \u003cstrong\u003e.pdf\u003c/strong\u003e\n\u003c/li\u003e\n\u003cli\u003ePortable Network Graphics \u003cstrong\u003e.png\u003c/strong\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eFor use with CircuitPython we use PNG, BMP, or GIF images. So we could use the included PNG images however we may want to do some further manipulation depending on your use case. There are two included PNG files are 64px by 64px and 128px by 128px. Those are fairly large by the standards of most typical display sizes used by CircuitPython devices.\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eThe PNG files in the download are RGB color mode. We do have support for that in CircuitPython, but transparency isn't supported with them at this time.\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eFor the above reasons I wanted to scale the images down and convert them to indexed color mode.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003ch2\u003eScaling The Icons With Inkscape\u003c/h2\u003e\n\u003cp\u003eI opted to use the Adobe Illustrator .ai files to scale the icons. Since these are vector graphics it means we should be able to scale them without much loss of detail. Open the \u003cstrong\u003e.ai\u003c/strong\u003e file of your choice in Inkscape. Zoom way out so that you can use the selector tool to draw a box around all of the icons. They're all in a big horizontal row so you'll need to zoom out quite far and make a very wide box to encompass all of them.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/117/original/inkscape_select_all_icons.png?1724621019","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eOnce all of the icons are selected use the resize controls on the top bar to set the height to your desired size. Ensure that the locked icon is enabled so that changes to the height or width will affect the other too. Since we have 1 big row we can simply update the height to the new desired size and rely on the locked aspect ratio to change the width for us.\u003c/p\u003e\n\u003cp\u003eI elected to scale the icons down to 32px by 32px. So I'm going to set the height to 32px.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/118/original/inkscape_resize.png?1724621250","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eI set the height to 32px and then pressed enter.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/119/original/inkscape_resize_32.png?1724621359","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eIf you zoom back in it will look like the icons are all messed up now becaues the background \"pages\" that they sit on don't get resized along with them. \u003cem\u003e\u003cstrong\u003eDon't Worry!\u0026nbsp;\u003c/strong\u003e\u003c/em\u003eWe're going to export it in a way that will still split up the icons into individual png files.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/120/original/inkscape_looks_messed_up.png?1724621476","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eNext press File -\u0026gt; Export.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/121/original/inkscape_file_export.png?1724621536","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eThat will open up export panel on the right side of the screen.\u003c/p\u003e\n\u003cp\u003eClick on the 'Batch Export' tab.\u003c/p\u003e\n\u003cp\u003eThen click on 'Layers'\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/122/original/inkscape_export_layers.png?1724632646","metadata":{"caption":""}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eI like to create a directory named after the page and icon size like \"\u003cstrong\u003epage_1_32px/\u003c/strong\u003e\" or similar. The file select box just above the export button will select where the generated files are going to be saved to. Click the browse icon and select the directory created, or wherever you'd like to save the exported PNG files.\u003c/p\u003e\n\u003cp\u003eClick the 'Save' button.\u003c/p\u003e\n\u003cp\u003eLeave the default values in the export dialog, click the 'OK' button.\u003c/p\u003e\n\u003cp\u003eIt will export all of the png image files into the selected location.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003ch2\u003eConvert to Indexed Color Mode\u003c/h2\u003e\n\u003cp\u003eThese images are exported in the RGB color mode, CircuitPython supports it, but not with transparency at this time. So I wanted to convert them into indexed color mode PNGs. We can use python PIL to do this.\u003c/p\u003e\n\u003cp\u003eInstall PIL with:\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"code","content":"pip install pillow","metadata":{"language":"auto","linenums":false}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eNow we can use a simple python script to loop over all files in a directory for any images that are found load them with PIL and convert them to the indexed color mode and then save a converted copy.\u003c/p\u003e\n\u003cp\u003eMake a directory to output the converted images into\u003c/p\u003e\n      \n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"code","content":"mkdir converted","metadata":{"language":"auto","linenums":false}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n        \u003cp\u003e\u003cstrong\u003econvert_to_indexed.py\u003c/strong\u003e\u003c/p\u003e\n      \n\n\n\n\n\n","metadata":{}},{"element_type":"code","content":"import os\nfrom PIL import Image\n\nfor file in os.listdir(\"./\"):\n    if file.endswith(\".png\"):\n        print(file)\n        img = Image.open(file)\n        converted = img.convert(mode=\"P\",  palette=Image.ADAPTIVE)\n        converted.save(f\"converted/{file}\")","metadata":{"language":"python","linenums":false}},{"element_type":"text","content":"\n  \n  \n  \n  \n        \u003cp\u003ecreate a copy of this python script in the directory with all of the RGB versions of the PNGs that were exported from Inkscape.\u003c/p\u003e\n\u003cp\u003eRun it with the command:\u003c/p\u003e\n      \n\n\n\n","metadata":{}},{"element_type":"code","content":"python convert_to_indexed.py","metadata":{"language":"auto","linenums":false}},{"element_type":"text","content":"\n  \n        \u003cp\u003eThe converted, now indexed color mode, PNG image files will be saved into the \u003cstrong\u003econverted/\u0026nbsp;\u003c/strong\u003edirectory.\u003c/p\u003e\n\u003cp\u003eThese resized and converted images are now ready to be used with \u003ccode\u003eadafruit_imageload\u003c/code\u003e and \u003ccode\u003epalette.make_transparent(0)\u003c/code\u003e.\u003c/p\u003e\n      \n","metadata":{}}]