Part 12: App icon

The final touch that we should have done earlier is adding an icon. In a NumWorks app, it's quite easy to do: the icon is just a 55×56 PNG file, located in src/icon.png. You can use any tool you want to create it.

Designing the icon

The most complicated part of the icon is creating it. For the purpose of this tutorial, I will use Inkscape, one of the best SVG editor, which I use for almost everything (I still use GIMP for raster image edition, but not for from scratch creation).

Note that creating or reprocessing the icon on GIMP can sometimes lead to better results if you want to avoid blurry edges on your icon.

NumWorks color palette

If you want to make an Epsilon-style icon (similar to the native apps icons), you will need to use a similar color palette. Here are the main colors used by the icons:

Note that some native apps (e.g. Distributions) invert background and foreground colors, probably to create style variations improving diversity.

Some used colors aren't in this palette, like the Settings icon which use pure white for the sliders, and another kind of gray for the background.

Be careful with reusing NumWorks branding, as they may not be happy with people doing so. Most icons were available in Epsilon 15, which was released under a CC BY-NC-SA 4.0 license, so as long as you tell you reused NumWorks' graphical chart, and don't sell your work, you should be fine. However, I'm not a lawyer, and this license isn't compatible with most FOSS licenses (like GPL), so I'm not responsible for anything you do based on these colors.

NumWorks icons design

Most native icons have a 1 pixel shadow at the bottom, creating depth, as if the icon was above the white background, which can be tricky to replicate, especially on darker icons, but is an important part of the final icon.

Older icons used a 3-step gradient in the background, but newer icons seems to prefer a flat background. You can find this on the Grapher, Sequences and Regression icons.

Templates

I won't do a design tutorial, as I'm terrible at design. If you want, here are templates of Upsilon icons and Epsilon (aka native) icons:

I used a small trick to transform the border around the icon into a shadow on the Epsilon version by adding a gradient.

A small tip in case you are lacking ideas for your icon: use SVG Repo, a website containing open-licensed SVG icons. You don't have to directly reuse icons, but reusing some ideas can be helpful.

Snake icon

Based on what I previously explained and this SVG Repo icon, I created an icon for our app. It's not really perfect, but it will be better than our current icon.

The next step is exporting the icon as PNG. In Inkscape, press File → Export (or Shift+Ctrl+E), which will open the export panel. Ensure size is 55×56px, check the output filename then press Export.

In case you are following this tutorial and don't want to use Inkscape, here's the exported PNG icon link: icon.

Adding it to the app

This is quite easy: just replace the src/icon.png file in your app by the exported icon.

Then, simply running make run will be enough to install the app with your new icon on your calculator.

Renaming the generated NWA file

While we are doing branding, we can also change the filename of our app when building it, instead of the default app.nwa. Of course a simple rename will be enough, but having a clear filename by default can be useful.

To do so, simply replace all references to app.nwa or app.bin by snake.nwa and snake.bin, and we're done.

Don't forget to commit your work!

Next time we will increase difficulty over time and some other minor improvements.