The home for Uno.Resizetizer, an image resizting tooling for Uno Platform apps
Home Page: https://platform.uno
License: Other
Based on the work from @redth from the .NET team, Uno.Resizetizer uses SVG and PNG files to generate images for all resolutions needed for your .NET 6+ apps. It is available for applications running with Uno Platform on iOS, Android, mac Catalyst, Gtk/WPF and WebAssembly target.
To get started with Uno Platform, follow our guides, and get started with Resizetizer with our documentation!
Rename the Maui names for something Uno like.
As mentioned here
During the implementation of the Android appicon, I realised an odd behavior regarding the UnoImage. If you clean all the project git clean -xdf and run it, the images will not be found. But in the next incremental builds the app will be able to find the images. It could be an ordering issue on the MSBuild pipeline?
Should be fixed after the appicon android PR be merged
The value is parsed with the culture of the regional configuration of the machine.
The value is parsed with invariant culture. So "0.65" is 65%.
Assuming your regional configuration is English - United States (or another in which the symbol of the decimal separator is the dot).
Create a new project with the Uno Visual Studio Extension.
In base.props check UnoIcon item has ForegroundScale="0.65".
Launch Windows head, the icon should be seen properly in the taskbar.
4, Change machine regional configuration to Spanish - Spain.
Sign out & sign back in for changes to apply machine wide.
Open the solution and rebuild the windows head.
Launch Windows head, the icon in the taskbar is a blank background.
In base.props change ForegroundScale value to 0,65 (with a comma).
Rebuild the windows head.
Launch Windows head, the icon should be seen properly in the taskbar.
Nuget Package:
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
I think the problem is located here. It should use the overload with IFormatProvider and pass CultureInfo.InvariantCulture.
Today we support the Link metadata on UnoImage, the user can set it and use it on your app.
For UnoIcon and UnoSplashScreen the user can set it, but the build will fail. We should prevent in code the usage of Link on those items and show a warning
Create new app using Blank preset in Wizard
Build and run WASM - correct splash screen image appears (just Uno logo)
Stop, then build and run again
Correct splash should always be displayed
Create new app using dotnet new
dotnet new unoapp -preset blank -o CheckSplashApp
Open app in Visual Studio
Wait for "reload" message to appear (it may not, so can ignore this step if it doesn't) and click reload
Set Wasm target as start project
Rebuild wasm target
Run wasm target without debugging -> this will launch app with correct splash screen
Close browser
Rebuild the class library not the wasm project
Run wasm target without debugging -> this will launch app with the wrong splash screen
Splash screen PNG files are not being generated in all heads when UnoSplashScreen Include attribute is the same SVG file as UnoIcon but with a Link attribute. This has different behaviors on each head:
APT2062 failed linking references and APT2260 resource drawable/splash_screen not found.I think it should generate the PNG files in all heads based on the filename that is in the Link attribute. It is not uncommon that the splash screen is the same vector file as the application icon.
At minimum, a validation error or warning provided by uno.resizetizer saying that doing that is not supported (the same way it signals when the is more than on UnoSplashScreen item).
iconapp.svg and rename appconfig.svg to iconapp.svgbase.props and modify UnoSplashScreen so the Include attribute is the same as UnoIcon. Also add Link="splash_screen.svg" to UnoSplashScreen and remove ForegroundFile of UnoIcon.bin and obj folders of all heads are deleted and delete them manually if not.Nuget Package:
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
See comment in PR: #15 (comment)
Currently all icons are generated in the Images folder in the package
Icons should be generated and added to the package in the same folder that the source image was in. Eg if the source file was in the MyIcons folder, the generated files should be found in the MyIcons folder in the application package
The App icon is showing a bit zoomed for the Android as well as IOS , I will also attach the screenshot of both the platform
IOS
Android
App Icon should have been shown clearly and fit but unfortunately it is not
<UnoIcon Include="$(MSBuildThisFileDirectory)Icons\iconapp.svg"
ForegroundFile="$(MSBuildThisFileDirectory)Icons\appconfig.svg"
Color="#FFFFFF" />
Nuget Package: uno.resizetizer
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
Relevant plugins:
https://github.com/unoplatform/uno.resizetizer/blob/main/doc/using-uno-resizetizer.md
SplashScreen folder inside the Base projectSplashScreen instead of ``Splash` to matchSplashscreen is not displaying the correct image size even when specifying BaseSize (here the icon should be 50*50 for example)
Windows
WASM
Splashscreen should have the correct size following the BaseSize we specified in the code
<UnoSplashScreen Include="$(MSBuildThisFileDirectory)SplashScreen\splashscreen.svg"
BaseSize="50,50"
Color="#FFFFFF" />
Nuget Package: uno.resizetizer
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
Create a step on CI, to see if the images are copied to the right location on bin folder
Want to avoid developers having to manually set the Icon property on the ApplicationAttribute
[global::Android.App.ApplicationAttribute(
Label = "@string/ApplicationName",
**Icon = "@mipmap/icon"**, ..... )]
The only thing a developer should have to do is to include . Everything else should be automatically set
During the build process the pwa manifest isn't generate correctly, looks like to be a timing issue, since it's correct generate when the debugger is attached.
BackgroundColor needs to be explicitly set in the package.appxmanifest
BackgroundColor should be set based on the Color property set on the UnoSplashScreen element
Currently:
Would be nice to remove JsonHelper class in place of using JsonNode to edit json
Change to relative paths
uno.resizetizer/samples/NewTemplate/Directory.Build.props
Lines 30 to 31 in f00fafd
Actually, Resizetizer creates a json file for the pwamanifest, the extension should be whatever is the original file.
At this point it should be json or webmanifest, so the fix is to grab the extension of the existing file and apply it to the generated one
Today, our validations task #81 is split per project, we should merge them into one .target file for better modification and visibility.
Other enhancements:
Forcing a rebuild on Mobile project prevents Android app from being able to be deployed with following errors:
12:59:43:995 APT2260: resource drawable/splash_screen (aka com.companyname.UnoApp1:drawable/splash_screen) not found.
12:59:43:996 APT2260: resource drawable/splash_screen (aka com.companyname.UnoApp1:drawable/splash_screen) not found.
12:59:43:996 APT2260: resource drawable/splash_screen (aka com.companyname.UnoApp1:drawable/splash_screen) not found.
12:59:43:996 APT2260: resource drawable/splash_screen (aka com.companyname.UnoApp1:drawable/splash_screen) not found.
12:59:43:996 APT2062: failed linking references.
No errors and successful deploy/run
Nuget Package:
Package Version(s):
Affected platform(s):
Visual Studio:
Relevant plugins:
We should make sure the Resizetizer will not re-generated images for the same assets. This way we can improve performance.
reference:
It's known that each Platform has its own guidelines for handling app icons. In general, Resizetizer can generate assets for both Idioms (mobile and desktop), but it lacks some intrinsic guidelines, where we can't infer if the user will deliver an asset following the guidelines or not. To better illustrate the scenario will be used Android and Windows.
The svg used by this first sample is one that respects the guidelines for mobile Idiom. That means the foreground is centered and there's padding, represented by the fact the svg image is smaller than the ViewBox. The assets used are in the zip file below.
The dimensions of the Foreground assets are:
svg width="456" height="456"
viewBox="0 0 912 912"
The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"
As you can see, we just have to add the padding on the Foreground file.
On mobile we will have the following result:
As you can see the Uno logo is centered and there's a padding around it.
For Windows the result is different, because of that extra size on ViewBox the Uno logo becomes very smaller, you can see the result at image below:
The svg used by this second sample is one that doesn't respect the guidelines for mobile Idiom. That means the foreground is not centered and there's no padding. The assets used are in the zip file below.
The dimensions of the Foreground assets are:
svg width="450" height="450"
viewBox="0 0 50.369617 49.826836"
The dimensions of the Background assets are:
svg width="456" height="456"
viewBox="0 0 456 456"
On mobile we will have the following result:
As you can see the Uno logo fills all the icon space horizontally and vertically. The padding is not respected.
Otherwise, for Windows the result is different, it looks good because the Uno logo is centered and the icon is bigger than before. You can see the result in image below:
If needed the user can specify the scale of the Foreground asset, increasing or reducing its size. Something like this:
<UnoIcon Include="$(MSBuildThisFileDirectory)Icons\iconapp.svg"
ForegroundFile="$(MSBuildThisFileDirectory)Icons\appconfig.svg"
Color="#00000000"
ForegroundScale="0.65"/>This can work for some cases, but there are cases where the Foreground just disappears, and it has to do with the content position inside the svg file, I couldn't find a good metric for that with the svg that I've available, so that will be a more empiric way to test and resize the app icon.
We can infer that assets will not have the padding, so we can add it during the resizing process. And we can do that per platform, which will give us more control over asset generation. The question here is, should this padding be added implicitly or should we add a new property to the UnoIcon item? Something like AddPadding="true", where the padding will be implicitly added by Resizetizer defaults, or per platform, something like, WindowsPadding= "10" and AndroidPadding="20" where the user can specify the padding value for each platform if doesn't specify the value will be 0.
We can infer that the asset will have a padding, so on Desktop idioms we can increase the scale of the generated ForegroundFile, that way the icon will not too small.
Instead of trying to apply those paddings on Resizetizer code (which uses Skia to renderer the image) we can use what the platform gives to us, on android, we can adjust the inset property and that will be aligned with their units. So the xml for the adaptive-icon will be:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground>
<inset
android:drawable="@drawable/ic_launcher_foreground"
android:inset="16%" />
</foreground>
</adaptive-icon>For more context and other points of view, you can see this issue on .NET MAUI repo: dotnet/maui#11295
And this one on Flutter's repo: fluttercommunity/flutter_launcher_icons#96
Android target framework of mobile head does not compile when Color attribute is not present in UnoSplashScreen.
Android target framework of Mobile head compiles when Color attribute is not present in UnoSplashScreen.
Create a Uno Platform project with the Visual Studio Extension.
Go to base.props and remove Color attribute of UnoSplashScreen.
Compile Mobile head.
APT2061 failed linking resources
and
APT2260 resource: color/uno_splash_color.
compiler errors happen.
Nuget Package:
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
Resource name should be [Assembly].Packageappx.manifest
Create new app using unoapp target
Build and run Skia target
Nuget Package:
Package Version(s):
Affected platform(s):
Visual Studio:
Relevant plugins:
Any UnoImage is being duplicated in the target platform package when it's defined in a class library (ie new solution structure)
The image appears in the root folder and in a classlibrary sub folder
eg
If you have in class library MyAppLibrary this will appear at
MyImages\Test.png (and other scales)
and at
MyAppLibrary\MyImages\Test.png
Should only appear at
MyAppLibrary\MyImages\Test.png
Create app using the extension template, build and run
16:53:51:223 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-100.png : warning XA0101: @(Content) build action is not supported
16:53:51:223 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-125.png : warning XA0101: @(Content) build action is not supported
16:53:51:223 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-150.png : warning XA0101: @(Content) build action is not supported
16:53:51:275 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-200.png : warning XA0101: @(Content) build action is not supported
16:53:51:275 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-300.png : warning XA0101: @(Content) build action is not supported
16:53:51:275 1>obj\Debug\net7.0-android\resizetizer\r\Assets\Icons\back.scale-400.png : warning XA0101: @(Content) build action is not supported
No warnings
In order to have the Pwa manifest in the right location at the right time we have to set some extra properties, as you can see here
https://github.com/unoplatform/uno.resizetizer/blob/main/src/.nuspec/Uno.Resizetizer.targets#L486-L490
One of the solutions will be to use an Item instead and set the Link and TargetPath
NR: General comment - I think when detailing each platform we should be very specific about the image sizes that we need to generate for splash, icon, etc. Remember that this will form the spec for what we're going to be using resizitizer for - if you're calling resizitizer, what output dimensions are you going to be requesting.
This file will discuss the guidelines for Splash screens and App icons across Android and iOS platforms. Then it will discuss the Resizetizer and ideas on how to make the work of creating those components easier for developers.
From android docs the elements that compose the Splash Screen should be defined by XML resources in the Android Manifest. And these elements are:
And the Splash screen dimensions should be:
For Android <12 we need to include a splashscreen.xml file that defines the layout of the splash screen for legacy support. If we still support old targets.
Android also supports animated splash screens, but you need to define those in Animated Vector Drawable (AVD) XML format. I believe it's out of the scope right now and can be investigated in the future as an enhancement.
Apple doesn't have a requirement for Splash Screen as Android does, in general, is just a page that fills the entire device screen and you can set whatever you want there. The guidelines say to be a representation of the App's first-page layout, but normally apps use to present the same splash screen as Android, with a company icon.
From docs the Splash Screen should be an image file using a format that's supported by Windows Imaging Component, like BMP, GIF, JPEG, PNG, or TIFF format.
But there's no specification about the size.
From android docs the icon can assume different shapes, visual effects, and user theming. It's called Adaptive icons. The icon design requirements are:
And the adaptive icon is represented by XML.
From apple docs the app you can see the guideline changes across devices, so here the focus will be on iOS and iPadOS.
From the Specifications section, the icon should follow these guidelines:
The assets are represented by a JSON file, containing the name and location of each icon size.
From gnome docs the app icons are drawn in canvas with 128x128 area, but the space shouldn't be filled. In order to generate the icons, we must follow these guidelines:
From this source the icon can be .svg, so we don't need to care about sizing, the OS will do that for us, or .png in this case we need to provide different files using the required sizes. From the PDF file, chapter 3 section 1.
If you use bitmap icons, you’ll need to provide several files with different resolutions. The most important one for applications and file types is a 48 × 48 pixel square, and 16, 32 and 64 pixel square shapes are also common
For WPF we've a large set of icon sizes, but focusing on application icons we should provide the following sizes, for the current mode:
And the following sizes for the Classic mode:
All apps should be of type .ico.
Today we can use the MauiResizetizer on Uno images and that pretty much works, the splash screen and icons partially work, probably some adjustments on our end will make it compatible.
So the first spec is to use the Resizetizer NuGet package, today the highest version that works at Uno is 6.0.101-preview.11.2349. Newer versions didn't compile, maybe Uno uses an old .net6 version? Not sure yet.
The assets can live inside the Shared project, inside the assets folder, and then get into the right place through MSBuild tasks. We can split the type using folders inside the asset, like Images, AppIcon, SplashScreen, Fonts, etc and use wild cards to control their meaning.
We also need an MSBuild property for those assets, so I'll use the Resizetizer as a reference.
For Images we will have something like:
<MauiImage Include="Assets/Images/myImg.svg BaseSize="100x100" TintColor="#FF0000" />
Assets/Images/*For icons:
<MauiIcon Include="Assets\AppIcon\appicon.svg" ForegroundFile="Assets\AppIcon\appiconfg.svg" Color="#512BD4" />
For Splash screen:
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
The asset resizing scales based on the BaseSize property value, if a value isn't provided we can use the default asset size. Let's use iOS as a sample since it's simple. For iOS we have 3 sizes, there's the normal size then @2x and @3x, that's two times the base size and 3 times the base size, respectively. So the tooling should grab the BaseSize and generate assets that are x1, x2, and x3 its value.
For Android, it will work the same, but we've more scales to work.
I can see two options for Uno to add this feature as a public API.
Using the risizetizer we can see better what we need to change, in our template and build tasks to support it and work with the .NET MAUI team to add features and hooks that can be used by Uno projects. Like adding support, out of the box, for wasm, Linux, and other targets.
If we go on this path, I suggest using a pattern of no naming the MSBuild properties, following a convention of having Uno as a prefix, something like:
And we can keep the same MSBuild properties, with different names if needed.
In order to make our task more stable and solid we should add some validators to check if we're genereting the expected files
something like this:
It will break the build if a specific asset is not found in the output.
In the new template, we've this scenario. We must make Windows works as all platforms
<!-- This works on Windows -->
<Image
Width="300"
Height="300"
Source="ms-appx:///NewTemplate.NugetTest/Images/dotnet_bot2.png" />
<!-- This works everywhere but Windows -->
<Image
Width="300"
Height="300"
Source="Images\\dotnet_bot2.png" />Right now for 4.9, we make sure that ForegroundScale will have a variation per platform but still uses the Skia code to re-scale the asset. We've an opportunity to make this even more platform-specific, handling that using whatever the platform exposes to us.
On Android, for example, we can do that inside the splash drawable xml file, using the android:inset attribute, so we can create this xml when user specifies the AnroidForegroundScale:
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@color/ic_launcher_background"/>
<foreground>
<inset
android:drawable="@drawable/ic_launcher_foreground"
android:inset="16%" />
</foreground>
</adaptive-icon>And we can extend that for platforms that exposes ways to customize the app icon
Those are the results of the testing of Uno.Resizetizer Version="0.31.0-dev.95"
Sample project:
Resizetizer_Nuget.zip
Uno.Wasm.Bootstrap and Uno.Wasm.Bootstrap.DevServer packages to 7.0.11. Change the manifest to be .webmanifest and add that on webconfig and remove the icons values on that manifest)Uno.Wasm.Bootstrap and Uno.Wasm.Bootstrap.DevServer packages to 7.0.11. Change the manifest to be .webmanifest and add that on webconfig and remove the icons values on that manifest)When running the android platform for the TubePlayer project the splashscreen should be shown only once but wiredly it is showing us the SplashScreen twice. You can refer to below photo for more details.
The middle logo when running the android platform should be only one but it is two.
<UnoSplashScreen
Include="$(MSBuildThisFileDirectory)SplashScreen\splashscreen.svg"
BaseSize="110,110"
Color="#FFFFFF" />
Nuget Package: uno.resizetizer
Package Version(s): 1.0.2
Affected platform(s):
Visual Studio:
Relevant plugins:
Create new application using latest unoapp template, which should include icon and splashscreen (once unoplatform/uno.extensions#1272 has merged). Build and run the WASM, GTK or WPF targets. They will run successfully but the icon and/or splashscreen images are either incorrect or not shown.
Force a rebuild on the targets and then run in order to correct icon/splash image
All targets should build and run successfully the first time after solution creation
Currently the XSAppIconAssets property has to be set in the plist eg
This should be automatically added to the plist by resizetizer
The .ico file is being created for WinUI but isn't being set on the ApplicationIcon property, so results in the default icon
For handling Images, all platforms use the UWP pattern since we've Uno tasks to handle that at each platform level. So, we can remove code from .targets and tasks that handles it.
For appIcon we need to it per platform because we don't have Uno tasks to handle that, so we need to keep existing code and implement new features.
[ ] Remove unnecessary code
Change to "-200" for x2 image
Nuget Package:
Package Version(s):
Affected platform(s):
Visual Studio:
Relevant plugins:
I'm not too sure, but we might be missing including uno_splash_image.xml in AndroidResource
linked to: #59
The manifest file that's in the root of the distribution folder (for older browsers that don't look for the link element in the index.html) needs to be updated to include the icons
There's currently a limitation in the Uno code that prevents the location of the manifest file from being updated to a path that's not relative to the project (ie can't be in obj folder).
Since we don't follow the same pattern as .NET MAUI to handle images assets (is specific per platform) the UnitTests now are failing, but it's a false negative, since it's working for us.
So we need to map and fix all the failing unit tests and make sure the tests are testing correctly
On mobile targets the resizetizer task generates the images for the same .svg twice.
this shouldn't happen and it should be generated just once.
Right now, WinUI creates splash assets in a very specific way and it causes issues with the naming because it adds the SplashScreen suffix on the asset, so for example, if the user adds splash_screen.svg the generated will be splash_screenSplashScreen, that works for windows but will fail for Skia targets that use the Package.appxmanifest.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.