Icon packs
alexbakker opened this issue · 39 comments
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.
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)
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.
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.
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.
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 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-packcommand 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'
@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.
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?
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.
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.
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.
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 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.
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.
Sure, thanks!
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.
We spent some more time working on this today.
I see the:
"@alexbakker alexbakker mentioned this issue 26 days ago
Automatically get the icon from the url by parsing the favicon #667 "
Just to clarify that, no, Subby do not fetch the icons online over the URL for favicons. It is just simply sending the links for developers to manually refer to the media page or the main page of the product and design their icons before the next app release.
We spent some more time working on this today.
This looks good!
@krisu5 We've merged icon pack support and may create an alpha or beta release soon. Are you ready to attach Aegis-compatible ZIP files to your releases on GitHub?
@krisu5 We've merged icon pack support and may create an alpha or beta release soon. Are you ready to attach Aegis-compatible ZIP files to your releases on GitHub?
Yeah, I can make pack as pre-release after I have completed current requests.
Test version of the icon pack released: https://github.com/aegis-icons/aegis-icons/releases/tag/2021-04-10 (this version is now removed, check latest release instead)
OFC, I'm not sure yet if this pack works with upcoming preview version.
We've released v2.0-beta1 with support for icon packs! Please let us know if you see any issues. You can use aegis-icons or aegis-simple-icons as icon packs to test with.
OFC, I'm not sure yet if this pack works with upcoming preview version.
It does!
I added the icon pack to the preview version of Aegis but it doesn't show the icons.
What does "it doesn't show the icons" mean, specifically? Does the dialog not show up when you tap the icon in the entry editing screen? And which icon pack did you import?
Doesn't show the icons means I literally don't see them in the list of 2fa codes. Is the entry editing screen the one that lets you add a new icon pack? If so, tapping it does nothing. I downloaded the above linked "aegis-icons" pack; specifically the latest release there. I also installed thel inked 2.0 beta. Went to settings, icon packs, clicked add, selected the ZIP file for the icon pack. It shows up in the list of icon packs. Went back to the main screen, no icons.
Importing an icon pack does not automatically set icons on your existing entries. Long press on an entry in the main screen and tap the Edit icon in the menu that appears at the top. You're now in the entry editing screen. Tap the icon. Does it show the icon selection dialog?
You need to manually add them, it doesn't detect and automatically add the icons to 2FA entries.
After adding the icon pack, do steps 2 & 3 of this guide.
EDIT: Alex seems to be quicker then me, but if you need visual guide, see the link.
Yes it seems to work if I do it manually. But really I have to do it one by one? I have like 30 of these.
I think there needs to be a batch option. For example, a button to select all entries and another button to "reset" their icons to the icon pack.
EDIT: And thank you for the help.
Yes it seems to work if I do it manually. But really I have to do it one by one? I have like 30 of these.
I think there needs to be a batch option. For example, a button to select all entries and another button to "reset" their icons to the icon pack.
Currently, yes. Not sure if this changes in the future (not dev), but I think one possible reason for not doing automatically is that there's some icons that have multiple versions (background variation for black / AMOLED theme, black logo color variation for icons that has bright background and alternative logo icons).
But really I have to do it one by one? I have like 30 of these
Yeah, if you already have a bunch of entries, assigning icons is bit inconvenient currently. Perhaps we'll add a bulk option in the future. Like @krisu5 said though, due to the fact that users may have multiple icons packs (and multiple icon variants inside those), Aegis would not always be able to guess the exact desired icon.
Proper version of the icon pack released for Aegis 2.0, as it's coming out of beta soon.
https://github.com/aegis-icons/aegis-icons/releases/tag/2021-05-24
But really I have to do it one by one? I have like 30 of these
...Perhaps we'll add a bulk option in the future. ...
I have many entries that are for the same servic. (i.e. gmail for myself, as well as other family members)
When the user selects multiple entries, the [edit] icon goes away. Perhaps enable edit, but only allow the icon to be changed. That would be a good compromise. I would think that might be fairly easy to implement... Just a variation of the edit screen for when multiple entries are selected.
Edit: The same edit screen could allow changing the Group of multiple entries too.
Are there any plans to integrate the icons in the app? At least the most popular ones. Google, Steam, Github, Facebook and so on. Most people downloading Aegis from the google play store (normal users who are told that Aegis is better than Google Authenticator because it's FOSS) won't go on github to see how to download the icons and add them manually.
@youdontneedtoknow22 Maybe, see: #509 (comment). No decision on that yet.
@alexbakker Any objections to me opening a new issue to track "automatic icon setting" separately so you can lock this one? I have a feeling people will continue to bump this issue requesting that. I think it's a separate discussion now that icon support is implemented. I think this thread has gotten too long and it's getting difficult to find information here.
Most people downloading Aegis from the google play store (normal users who are told that Aegis is better than Google Authenticator because it's FOSS) won't go on github to see how to download the icons and add them manually.
There's link to my icon pack in the "icon packs" setting page. Based of aegis-icons's view count, many have found the icons there (5x to 8x times more views then before).
Any objections to me opening a new issue to track "automatic icon setting" separately so you can lock this one? I have a feeling people will continue to bump this issue requesting that. I think it's a separate discussion now that icon support is implemented. I think this thread has gotten too long and it's getting difficult to find information here.
I think that would be the best, specially that this is closed for some time now.
I have opened user story #773 to track the automatic/batch icon assignment to existing entries. I respectfully ask anyone with further comment on this specific feature to do so over there.
Developers, please feel free to lock this issue to prevent further discussion and encourage those with meaningful contributions to visit the linked issue for further comment.
Thank you Aegis team for introducing this wonderful feature!