Desktop: Support Windows tiles

[Jackymancs4]

Hello,

On Windows, when Joplin is pinned on the Start Menu, it seems a little out of place, with the unisize icon in the middle of the tile.

This PR make it support the Windows Tile system, right now in it's simplest form.

File nomenclature and icon positioning has been taken from here:
https://docs.microsoft.com/en-us/windows/uwp/design/style/app-icons-and-logos

Visual Manifest from here:
https://github.com/microsoft/vscode/blob/master/resources/win32/VisualElementsManifest.xml

For documentation on the addition to the build configuration
https://github.com/electron-userland/electron-builder/issues/530
and
Application Contents - electron-builder

The color used for the accent background is the darker color found here:
https://github.com/laurent22/joplin/blob/master/Assets/JoplinIcon.svg?short_path=0d334a3

The changes only affect the Windows build artifacts.

Result

Size	Before	After (Firefox for comparison)
Big
Small

[laurent22]

Thanks for the pull request. How did you generate the svg files? I wonder if you could automate the process and generate this and the bitmaps using Tools/generate-images.js?

In general we now use this script to automatically generate Joplin images based on what's in Assets/ImageSources.

[laurent22]

Actually are these svg files used for something, as I don't see them being referenced anywhere?

[Jackymancs4]

Actually are these svg files used for something, as I don't see them being referenced anywhere?

No, they are not directly used anywhere. Since Assets contained other un-referenced files like SquareIcon512.png and SquareIcon1024.png I assumed it was used for general design source materials (like the psd and eps). After exporting them in PNG and manually placing the file in the proper folder, I added the SVGs to provide a template/reference in case a new logo or new design will be needed.

How did you generate the svg files?

I handcrafted them with Inkscape following the visual directives of VS Code and the documentation I linked. I had to tweak a little to get a balanced result.

I wonder if you could automate the process and generate this and the bitmaps using Tools/generate-images.js?

If you mean from Assets/Square150x150Logo.svg I added to ElectronClient/build-win/icons/Square150x150Logo.png, it's doable (sharp can do that). If you mean from Assets/JoplinLetter.svg to ElectronClient/build-win/icons/Square150x150Logo.png it's way harder and not very scalable, but still technically doable.

In general we now use this script to automatically generate Joplin images based on what's in Assets/ImageSources.

Yes, I saw that, but in my opinion the Windows Tile is on the same customisation level of the MacOS Tray Icon Template (ElectronClient/build/icons/macos-16x16Template.png) which (if I understand correctly) is hand made only for the case.

In fact I followed the same paradigm:

OS	Source	destination
Mac	Assets/macOsTemplateIcon16.psd	ElectronClient/build/icons/macos-16x16Template.png
Window	Assets/Square150x150Logo.svg	ElectronClient/build-win/icons/Square150x150Logo.png

[laurent22]

This is a good change, and I'd like to merge it but going forward we'll generate the Joplin icons and logos dynamically and I believe this one can be too. You could add a high resolution version of your image to "ImageSources" (naming it something generic like "SquareNoBackground_150x150.png" for example) and create the two required images from it in generate-images.js

The SVG files you've used as source, feel free to leave them in the Asset dir as they could indeed be useful. If you need some help getting the generate-image script to work feel free to let me know.

[Jackymancs4]

Just one final confirmation before I dive into it.
The small tile is not just a down scaled version of the big one. It has different letter to canvas size proportions to take into account the lack of the title end retain a certain visual balance. Which is also why I had to craft both of them on different svg files.

You could add a high resolution version of your image to "ImageSources" (naming it something generic like "SquareNoBackground_150x150.png" for example) and create the two required images from it in generate-images.js

Because of this, it is not as straightforward as taking the big and making the small.

I could use the two SVG files to generate the two final images, which is my suggested solution.
I could also investigate more thoroughly if complete automation is feasible.

So, can you confirm which course of action I should take?

[laurent22]

The ideal solution if you can would be to have the J only in a png, then to compose the required images from it. So you'd create a completely transparent image, then add the J on top it at the right position, depending on the icon you want to create.

The Sharp lib we use is quite powerful and would allow you to do that relatively easily. https://sharp.pixelplumbing.com/api-composite

[Jackymancs4]

Yes, as a matter of fact I was already working on something similar, with a slightly different technique but that still works and is fairly scalable.

As of now, I'm not totally convinced with the result. I will tweak it a little.
Also, I guess I should remove ElectronClient/build-win/icons files, right?

And finally the screen where I use Windows has a resolution of 1366x768.
Some feedback from someone with a better monitor on the final result is greatly appreciated.

[laurent22]

Also, I guess I should remove ElectronClient/build-win/icons files, right?

No please leave them there. All the dynamically generated images are left in the repo, to make building the project from scratch easier, and because the images rarely change.

[Jackymancs4]

No please leave them there.

Ok, then the PR if ready for review, as after trying different combinations of interpolation kernels and positioning tecniques, I feel this is as good as I can make it to be.

[laurent22]

That's great, thanks @Jackymancs4, that looks good.