Aegis: Icon packs

[alexbakker]

We've recently been thinking some more about how to improve icon support in Aegis. Lots of users have been using krisu5's icon
pack as a source for icons in Aegis. The icon pack is great, but it's a bit of a pain for users to use, and that's Aegis' fault. To make the experience better, we want to introduce support for icon packs.

The idea is that creators of icon packs format their releases in the standard way described in this proposal, so that Aegis can read and use them.

This way, we can keep the maintenance of icons packs and Aegis itself separate, while also offering users the ability to use/create icon packs without being forced to use the one provided by the app.

@krisu5 We'd appreciate your feedback on this.

The format

Icon packs are .ZIP archives with a collection of icons and a pack.json file. The icon pack definition is a JSON file, formatted like the example below. All icon packs have a name, a UUID, a version and a list of icons. The version number is incremented when a new version of the icon pack is released. The UUID is randomly generated once and stays the same across different versions.

{
    "uuid": "e77dbfb5-30d6-468d-bf74-37f07734bcf5",
    "name": "Kristian's Icon Pack",
    "version": 1,
    "icons": [
        {
            "filename": "services/Google.png",
            "category": "Services",
            "issuer": [ "google" ]
        },
        {
            "filename": "services/Blizzard.png",
            "category": "Gaming",
            "issuer": [ "blizzard", "battle.net" ]
        }
    ]
}

Every icon definition contains the filename of the icon file, relative to the root of the .ZIP archive. Icon definitions also have a list of strings that the Issuer field in Aegis is matched against for automatic selection of an icon for new entries. Matching is done in a case-insensitve manner. There's also a category field.

The following image formats are supported, in order of preference:

| Name | MIME | Extension |
|:-----|:--------------|:----------|
| SVG | image/svg+xml | .svg |
| PNG | image/png | .png |
| JPEG | image/jpeg | .jpg |

Any files in the .ZIP archive that are not the pack.json file or referred to in the icons list are ignored. Such files are not extracted when importing the icon pack into Aegis.

Changes to Aegis' vault format

Supporting multiple image formats also means that we have to make a small change to Aegis' vault format. Aegis currently only stores and expects JPEG images. We'd have to introduce a new icon_mime field for entries to store the MIME type of the icon. When loading older vaults, entries that do not have that field will try to parse the icon as JPEG.

I previously proposed moving icons out of the vault file entirely in #134, but that would be a much larger change, and has stalled improvements to our icon support. We can revisit if that's still desirable later.

We may also have to increment the vault format version, because previous versions of Aegis will no longer be able to load vaults with these changes.

Using icon packs in Aegis

Users can download an icon pack from the internet and import it into Aegis through the settings menu. Aegis extracts the icon pack to icons/{uuid}/{version}, relative to its internal storage directory. So for the example icon pack above, that'd be:
icons/e77dbfb5-30d6-468d-bf74-37f07734bcf5/1.0. If it has an old version of the icon pack, it will be removed after successful extraction of the newer version.

After that, Aegis will start proposing icons for new entries if the issuer matches with one of the icons in the pack. We'll also have an icon selection dialog, where all of the icons in the pack appear. When the user selects an icon, it is copied and stored in the vault file.

[krisu5]

All of this sounds great to me, this is pretty good compromise.

What happens if there's multiple icons for same service, like variation and alternative icons? My suggestion is to show all the icons that match issuer at the top of icon selection list, then show the rest.

Also if possible, maybe also have category value for cataloging the icons.

Here's some ugly mockups (not in Android design standard at all, but you get gist of it).

* (alphanumerical order)

[alexbakker]

Categories are a good idea! I've added a field for it to the specification. We may not make use of that field right away, to keep the initial version of the icon selection view simple, but we'll make it more complete as we go. I like your mockups, they're clean and simple.

What happens if there's multiple icons for same service, like variation and alternative icons? My suggestion is to show all the icons that match issuer at the top of icon selection list, then show the rest.

Yeah, that's probably a good way to handle that.

[LeBaux]

This is one of the features found in https://github.com/andOTP/andOTP I miss. Since there are thousands of services and websites, please start with the most notorious, such as most popular social media, GitHub/lab and such.

[krisu5]

This is one of the features found in https://github.com/andOTP/andOTP I miss. Since there are thousands of services and websites, please start with the most notorious, such as most popular social media, GitHub/lab and such.

Icons aren't internally integrated like andOTP with this proposal. This just makes using icon packs like mine for example easier to use. My icon pack has covered most of the popular services (that has 2FA support) and has almost 260 icons.

Also weakness of andOTP system is the waiting time: you need to wait new app version every time you request a icon. With this current / new system, you can enable the new icon as soon as the icon files (SVG, PNG) is released.

[alexbakker]

I've submitted a draft PR that adds support for icon packs: #539. There's still work to do (on the design, especially), so this will not make it into a release of the app as is. Most of the functionality should already work, so I'm submitting this now so that people can start testing their icons packs.

@krisu5 If you'd like, you can start doing some preparation and testing to create your releases in the agreed icon pack format. I added a gen-icon-pack command to aegis-tools, perhaps that could be of use to get you started: https://github.com/alexbakker/aegis-tools/blob/91a36670c81436b83c049b4dd77b222e927e1a94/aegis_tools/__init__.py#L28-L58

[krisu5]

@krisu5 If you'd like, you can start doing some preparation and testing to create your releases in the agreed icon pack format. I added a gen-icon-pack command to aegis-tools, perhaps that could be of use to get you started: https://github.com/alexbakker/aegis-tools/blob/91a36670c81436b83c049b4dd77b222e927e1a94/aegis_tools/__init__.py#L28-L58

Sorry for late response, I tried this script last month and today and same problem happens: it doesn't scan folder where script is launched. Maybe I'm missing something?

...\aegis-icons\SVG> aegis-tools gen-icon-pack --output test.zip
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\allocinã©.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\citroã«n.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\dassaultsystã¨mes.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\let’sencrypt.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\macy’s.svg'
[Errno 2] No such file or directory: "C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\mcdonald's.svg"
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\metrodelaciudaddemã©xico.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\mã©trodeparis.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\micro:bit.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\pokã©mon.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\rtã‰.svg'
[Errno 2] No such file or directory: 'C:\\Users\\Kristian\\AppData\\Roaming\\Python\\Python38\\site-packages\\aegis\\simple-icons\\icons\\å\xa0koda.svg'

[alexbakker]

@krisu5 No worries! Yeah, that script just generates an Aegis icon pack based on simple-icons. As I don't know how you want to organize things, I just meant that it could serve as a starting point for you to write a script for your icon repository. Let me know if you need help.

[eloyesp]

While icon-packs sounds great for most popular sites, it does not solve the issue for less popular sites. I think that if you are already adding support for mime-types, another good option is making it easy to use favicons that are supported almost everywhere.

The most simple interface for this, is using just any web page and download the favicon there.

Does it makes sense?

[krisu5]

I think that if you are already adding support for mime-types, another good option is making it easy to use favicons that are supported almost everywhere.

Biggest problem with this is that app wouldn't be offline only anymore. The app is made for most paranoid privacy users in mind, so it doesn't have any online features because of that.

Second is favicons 90% of the cases are too small, often small as 16px by 16px. Yes there are different types of favicons and webapp icons whatnot, but at worse it's pixelized mess that nobody wants.

And if people want icon for less popular site, just ask (I'm admin of aegis-icons). I make the icons, sometimes as fast as one hour of leaving issue.

[WingofaGriffin]

I am curious if, given the upcoming support for SVG vector images, it might make sense to bundle in aegis-icons as a "default" option for people who don't want to upload zip files now that the file size of the icons will be for the most part negligible. I understand the concern of keeping the projects separate, but would this not be something a git submodule would be able to handle? It's a tough balance between ease of use for users who want a plug and play solution, and fine tuned control for power users. This would also eliminate the concern of needing to manually update your icon packs.

[alexbakker]

I am curious if, given the upcoming support for SVG vector images, it might make sense to bundle in aegis-icons as a "default" option for people who don't want to upload zip files now that the file size of the icons will be for the most part negligible.

Yeah, I think this is something we could consider doing.

[alexbakker]

I spent some more time working on icon pack support today. Here's a prebuilt APK of the latest version of #539: https://alexbakker.me/u/e0k365wut0.apk. And an icon pack to test with: https://alexbakker.me/u/y0j0945odm.zip (generated using aegis-tools). It contains 1472 icons, all from the simple-icons project, randomly put into a list of categories. You can import the icon pack through "Settings -> Manage icons packs". It's not very pretty yet, but I think most of the functionality (except for search) we want is there now.

@krisu5 Did you get a chance to write something to generate a pack for your icon project? If you need some help, let us know.

[krisu5]

@krisu5 Did you get a chance to write something to generate a pack for your icon project? If you need some help, let us know.

TBH, I don't have coding skills to do a script. 😅 I can use command line tools, but not program them.

[alexbakker]

That's fine, I'll open a PR in your repo sometime this week with a simple base script and we can work it out from there.

[krisu5]

Sure, thanks!

[AbramTTP]

Ah, I just saw this issue. I last contributed to Krisu's repo for simple icons months ago.

I have this app that you all can refer to. It is a subscription manager named "Subby" available on Google Play.

Apparently they pre-load a list of icons in the app and lets you choose as you add or edit an entry.

It has a request button that allows you to input the service name and link, and it will convert to an email automatically to the devs for sending.

The simplistic styles of icons the app uses is very similar to Krisu's set.