From e7a3260d3dc8c3cf2f737766f5a79d9b71509d13 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Sun, 12 May 2024 20:15:06 -0400 Subject: [PATCH 1/6] docs: adding single project usages --- doc/using-uno-resizetizer.md | 57 ++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index 22f50430..b4c0db58 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -95,6 +95,36 @@ During the creation of your `svg` file, please remember to make the `ViewBox` bi ### 4. Configuring the project to use generated app icon +# [**Single Project Based Solution**](#tab/singleproject) +In the single project structure, you will configure your app icon directly in the .csproj file, streamlining the setup across all platforms. + +* Create an `Icons` folder within your project under the `Assets` directory and add your icon files there. For example, place your `iconapp.svg` and its corresponding `appconfig.svg` in the `Assets\Icons` folder. +* Open your `MyApp.csproj` file and add the following XML block to include the UnoIcon directly, which simplifies managing multiple project heads: + +```xml + + + +``` +This configuration automatically applies across all target platforms included in the single project structure. +## Utilizing SDK Properties +For basic adjustments, such as changing the icon's foreground color or applying a common modification across platforms, you can use SDK properties. This method is simpler and reduces the need for extensive XML configurations: + +```xml + + Assets\Icons\appconfig.svg + #FF0000 + +``` + +In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. + +* `UnoIconBackgroundFile`: Sets the background image file for the icon. +* `UnoIconForegroundFile`: Sets the foreground image file for the icon. +* `UnoIconForegroundScale`: Adjusts the scaling of the icon's foreground. +* `UnoIconBackgroundColor`: Sets the background color of the icon. # [**Class Library Based Solution**](#tab/classlib) * Create an `Icons` folder inside the Base project, and add the files related to the app icon there. @@ -217,6 +247,33 @@ Next, some adjustments are needed on `Android`, `Windows (WinUI)`, `WebAssembly` * `Color`: It's the background color that will be used to fill the empty space on the final SplashScreen asset. The default value is `#FFFFFF` (white). ### 5. Configuring the project to use generated splash screen +# [**Single Project Based Solution**](#tab/singleproject) +* Create a `SplashScreen` folder within the `Assets` directory of your project and add your splash screen files there. For example, you might include a `splash_screen.svg` file in the Assets\SplashScreen folder. +* Open your `MyApp.csproj` file and add the following XML block. This setup will apply the splash screen configuration to all platforms included in the single project: + +```xml + + + +``` +## Utilizing SDK Properties +* To facilitate easier customization, such as adjusting the base size or color of the splash screen, you can leverage SDK properties: +```xml + + Assets\SplashScreen\splash_screen.svg + 128,128 + #512BD4 + +``` +In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. + +* `UnoSplashScreenFile`: Specifies the image file for the splash screen. +* `UnoSplashScreenBaseSize`: Sets the base size for the splash screen image. +* `UnoSplashScreenColor`: Determines the background color of the splash screen. + +This setup ensures that the splash screen settings are centralized, simplifying the maintenance and updating process. # [**Class Library Based Solution**](#tab/classlib) From 257ecc266d823a8f413ab9db2ea5fca906f17f2a Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Sun, 12 May 2024 20:21:34 -0400 Subject: [PATCH 2/6] docs: fixing typo --- doc/using-uno-resizetizer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index b4c0db58..b4dc3670 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -267,7 +267,7 @@ Next, some adjustments are needed on `Android`, `Windows (WinUI)`, `WebAssembly` #512BD4 ``` -In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. +In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your splash screen. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. * `UnoSplashScreenFile`: Specifies the image file for the splash screen. * `UnoSplashScreenBaseSize`: Sets the base size for the splash screen image. From 7443725d013efa79643383794dd1b5485528b30e Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Mon, 13 May 2024 13:06:43 -0400 Subject: [PATCH 3/6] docs: resolving PR comments --- doc/using-uno-resizetizer.md | 55 +++++++++++++++--------------------- 1 file changed, 22 insertions(+), 33 deletions(-) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index b4dc3670..a046a81b 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -96,20 +96,19 @@ During the creation of your `svg` file, please remember to make the `ViewBox` bi ### 4. Configuring the project to use generated app icon # [**Single Project Based Solution**](#tab/singleproject) -In the single project structure, you will configure your app icon directly in the .csproj file, streamlining the setup across all platforms. -* Create an `Icons` folder within your project under the `Assets` directory and add your icon files there. For example, place your `iconapp.svg` and its corresponding `appconfig.svg` in the `Assets\Icons` folder. -* Open your `MyApp.csproj` file and add the following XML block to include the UnoIcon directly, which simplifies managing multiple project heads: - -```xml - - - -``` -This configuration automatically applies across all target platforms included in the single project structure. +* When you create a new Uno Platform application, an `Icons` folder is automatically generated under the `Assets` directory. This folder contains `icon.svg` and `icon_foreground.svg` files. +* You can simply replace these files with your custom icons while retaining the file names, or you can customize the icon configuration using SDK properties if different names or additional configurations are needed. +* This configuration automatically applies across all target platforms included in the single project structure. ## Utilizing SDK Properties + +The Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. + +* `UnoIconBackgroundFile`: Sets the background image file for the icon. +* `UnoIconForegroundFile`: Sets the foreground image file for the icon. +* `UnoIconForegroundScale`: Adjusts the scaling of the icon's foreground. +* `UnoIconBackgroundColor`: Sets the background color of the icon. + For basic adjustments, such as changing the icon's foreground color or applying a common modification across platforms, you can use SDK properties. This method is simpler and reduces the need for extensive XML configurations: ```xml @@ -118,13 +117,8 @@ For basic adjustments, such as changing the icon's foreground color or applying #FF0000 ``` +This setup ensures that the icon settings are centralized, simplifying the maintenance and updating process. -In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. - -* `UnoIconBackgroundFile`: Sets the background image file for the icon. -* `UnoIconForegroundFile`: Sets the foreground image file for the icon. -* `UnoIconForegroundScale`: Adjusts the scaling of the icon's foreground. -* `UnoIconBackgroundColor`: Sets the background color of the icon. # [**Class Library Based Solution**](#tab/classlib) * Create an `Icons` folder inside the Base project, and add the files related to the app icon there. @@ -248,18 +242,18 @@ Next, some adjustments are needed on `Android`, `Windows (WinUI)`, `WebAssembly` ### 5. Configuring the project to use generated splash screen # [**Single Project Based Solution**](#tab/singleproject) -* Create a `SplashScreen` folder within the `Assets` directory of your project and add your splash screen files there. For example, you might include a `splash_screen.svg` file in the Assets\SplashScreen folder. -* Open your `MyApp.csproj` file and add the following XML block. This setup will apply the splash screen configuration to all platforms included in the single project: +* When you create a new Uno Platform application, a `Splash` folder is automatically generated under the `Assets` directory. This folder contains `splash_screen.svg` file. +* You can simply replace these files with your custom splash screen while retaining the file names, or you can customize the splash screen configuration using SDK properties if different names or additional configurations are needed. +* This configuration automatically applies across all target platforms included in the single project structure. -```xml - - - -``` ## Utilizing SDK Properties -* To facilitate easier customization, such as adjusting the base size or color of the splash screen, you can leverage SDK properties: +The Uno Platform SDK exposes several properties that simplify the customization of your splash screen. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. + +* `UnoSplashScreenFile`: Specifies the image file for the splash screen. +* `UnoSplashScreenBaseSize`: Sets the base size for the splash screen image. +* `UnoSplashScreenColor`: Determines the background color of the splash screen. + +To facilitate easier customization, such as adjusting the base size or color of the splash screen, you can leverage SDK properties: ```xml Assets\SplashScreen\splash_screen.svg @@ -267,11 +261,6 @@ Next, some adjustments are needed on `Android`, `Windows (WinUI)`, `WebAssembly` #512BD4 ``` -In addition to the direct XML configurations, the Uno Platform SDK exposes several properties that simplify the customization of your splash screen. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. - -* `UnoSplashScreenFile`: Specifies the image file for the splash screen. -* `UnoSplashScreenBaseSize`: Sets the base size for the splash screen image. -* `UnoSplashScreenColor`: Determines the background color of the splash screen. This setup ensures that the splash screen settings are centralized, simplifying the maintenance and updating process. From 0d2513fbe947aa032763799793372983ddaa7349 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Mon, 13 May 2024 15:18:48 -0400 Subject: [PATCH 4/6] docs: adding platform specific customization + Using SVG Images vs PNG Images with SVG underneath --- doc/using-uno-resizetizer.md | 67 ++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index a046a81b..cd046376 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -358,7 +358,74 @@ Next, some adjustments are needed on `Android`, `Windows`, and `iOS`. > Feel free to delete old assets related to the splash screen. ----- +## Platform-Specific Customization +The Uno Resizetizer SDK allows for detailed control over how assets are rendered on different platforms. This can be particularly useful for properties such as icon and splash screen backgrounds, which may need to vary between platforms due to design or visibility concerns. +#### Customizing Background Colors Per Platform +For properties like BackgroundColor, which might need different values per platform (for example, transparent backgrounds on Windows and WASM but a solid color on iOS and Android), you can specify platform-specific properties in your project file: +```xml + + + #FFFFFF + + + #000000 + #FF0000 + Transparent + Transparent + +``` +This setup demonstrates setting a default background color that is overridden on specific platforms. Adjust the conditions to match your project's target frameworks as defined in your project files or SDK documentation. + +#### Applying Platform-Specific Scale +Similarly, if you want to apply different scaling factors for the icon foreground across platforms, use the platform-specific properties: + +```xml + + + 0.5 + + + 0.6 + 0.4 + 0.3 + 0.55 + +``` +## Using SVG Images vs PNG Images with SVG underneath +The Uno Platform allows for flexible image handling through direct SVG use or through asset generation via Uno.Resizetizer. Understanding when to use each approach can optimize your app's performance and visual quality. + +#### Direct SVG Usage +When to Use: + +* You require vector graphics to be scalable without loss of quality. +* Your app needs to dynamically change aspects of the image, such as color or size, at runtime. +#### How to Implement: + +* Set the build action of your SVG file to Content. +* Reference the SVG file directly in the Image control's Source property. +```xml + +``` +[Using Svg Images](https://platform.uno/docs/articles/features/svg.html?tabs=singleproject) + +#### Using Uno.Resizetizer for SVG to PNG Conversion +When to Use: + +* You need raster graphics to optimize performance on platforms where SVG rendering might be less efficient. +* Your app targets multiple platforms and requires consistent image rendering across all. + +How to Implement: + +* Set the build action of your SVG file to UnoImage. +* Uno.Resizetizer will generate PNG assets at various scales. +* Reference the generated PNG in the Image control's Source property. +```xml + +``` +[Using Uno Resizetizer ](https://platform.uno/docs/articles/external/uno.resizetizer/doc/using-uno-resizetizer.html?tabs=classlib%2CAndroid#unoimage) + +Choosing between direct SVG usage and PNG conversion with Uno.Resizetizer depends on your specific application needs. Consider factors such as platform target, performance requirements, and how you plan to manipulate the images within your app. ## Sample App Example A sample app is available [here](https://github.com/unoplatform/uno.resizetizer/tree/main/samples/NewTemplate) as an example for all the previous steps detailed above. From c79935fbc9925e4ccb8eb569e108287bb5498149 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Tue, 14 May 2024 10:08:42 -0400 Subject: [PATCH 5/6] docs: resolving PR comments --- doc/using-uno-resizetizer.md | 46 +++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index cd046376..4e42a0a1 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -100,6 +100,7 @@ During the creation of your `svg` file, please remember to make the `ViewBox` bi * When you create a new Uno Platform application, an `Icons` folder is automatically generated under the `Assets` directory. This folder contains `icon.svg` and `icon_foreground.svg` files. * You can simply replace these files with your custom icons while retaining the file names, or you can customize the icon configuration using SDK properties if different names or additional configurations are needed. * This configuration automatically applies across all target platforms included in the single project structure. + ## Utilizing SDK Properties The Uno Platform SDK exposes several properties that simplify the customization of your app icon. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. @@ -109,7 +110,7 @@ The Uno Platform SDK exposes several properties that simplify the customization * `UnoIconForegroundScale`: Adjusts the scaling of the icon's foreground. * `UnoIconBackgroundColor`: Sets the background color of the icon. -For basic adjustments, such as changing the icon's foreground color or applying a common modification across platforms, you can use SDK properties. This method is simpler and reduces the need for extensive XML configurations: +For basic adjustments, such as changing the icon's foreground color or applying a common modification across platforms, you can use SDK properties: ```xml @@ -127,7 +128,7 @@ This setup ensures that the icon settings are centralized, simplifying the maint ```xml ``` @@ -247,6 +248,7 @@ Next, some adjustments are needed on `Android`, `Windows (WinUI)`, `WebAssembly` * This configuration automatically applies across all target platforms included in the single project structure. ## Utilizing SDK Properties + The Uno Platform SDK exposes several properties that simplify the customization of your splash screen. These properties allow you to easily adjust key aspects like the base size, color, and icon files without detailed XML changes, making your development process more streamlined. * `UnoSplashScreenFile`: Specifies the image file for the splash screen. @@ -256,7 +258,7 @@ The Uno Platform SDK exposes several properties that simplify the customization To facilitate easier customization, such as adjusting the base size or color of the splash screen, you can leverage SDK properties: ```xml - Assets\SplashScreen\splash_screen.svg + Assets\SplashScreen\custom_splash_screen.svg 128,128 #512BD4 @@ -358,9 +360,12 @@ Next, some adjustments are needed on `Android`, `Windows`, and `iOS`. > Feel free to delete old assets related to the splash screen. ----- + ## Platform-Specific Customization The Uno Resizetizer SDK allows for detailed control over how assets are rendered on different platforms. This can be particularly useful for properties such as icon and splash screen backgrounds, which may need to vary between platforms due to design or visibility concerns. -#### Customizing Background Colors Per Platform + +### Customizing Background Colors Per Platform + For properties like BackgroundColor, which might need different values per platform (for example, transparent backgrounds on Windows and WASM but a solid color on iOS and Android), you can specify platform-specific properties in your project file: ```xml @@ -368,11 +373,11 @@ For properties like BackgroundColor, which might need different values per platf #FFFFFF - - #000000 - #FF0000 - Transparent - Transparent + + #000000 + #FF0000 + Transparent + Transparent ``` This setup demonstrates setting a default background color that is overridden on specific platforms. Adjust the conditions to match your project's target frameworks as defined in your project files or SDK documentation. @@ -385,18 +390,20 @@ Similarly, if you want to apply different scaling factors for the icon foregroun 0.5 - - 0.6 - 0.4 - 0.3 - 0.55 + + 0.6 + 0.4 + 0.3 + 0.55 + ``` ## Using SVG Images vs PNG Images with SVG underneath The Uno Platform allows for flexible image handling through direct SVG use or through asset generation via Uno.Resizetizer. Understanding when to use each approach can optimize your app's performance and visual quality. -#### Direct SVG Usage -When to Use: +### Direct SVG Usage + +#### When to Use: * You require vector graphics to be scalable without loss of quality. * Your app needs to dynamically change aspects of the image, such as color or size, at runtime. @@ -409,13 +416,14 @@ When to Use: ``` [Using Svg Images](https://platform.uno/docs/articles/features/svg.html?tabs=singleproject) -#### Using Uno.Resizetizer for SVG to PNG Conversion -When to Use: +### Using Uno.Resizetizer for SVG to PNG Conversion + +#### When to Use: * You need raster graphics to optimize performance on platforms where SVG rendering might be less efficient. * Your app targets multiple platforms and requires consistent image rendering across all. -How to Implement: +#### How to Implement: * Set the build action of your SVG file to UnoImage. * Uno.Resizetizer will generate PNG assets at various scales. From f885565e10127b0ede1ca3d0c02cdb21742773c8 Mon Sep 17 00:00:00 2001 From: Kunal22shah Date: Wed, 22 May 2024 14:23:46 -0400 Subject: [PATCH 6/6] docs: fixing typo --- doc/using-uno-resizetizer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/doc/using-uno-resizetizer.md b/doc/using-uno-resizetizer.md index 4e42a0a1..563f32a8 100644 --- a/doc/using-uno-resizetizer.md +++ b/doc/using-uno-resizetizer.md @@ -114,7 +114,7 @@ For basic adjustments, such as changing the icon's foreground color or applying ```xml - Assets\Icons\appconfig.svg + Assets\Icons\customicon.svg #FF0000 ``` @@ -128,7 +128,7 @@ This setup ensures that the icon settings are centralized, simplifying the maint ```xml ```