Author: mareinsula

About SVG Toolbox

I am finishing the last details to publish the beta release of SVG Toolbox, an app that allows you to render SVG to scalar images with options to create HD and pixelart for games. You can easily change colors and strokes. And can split groups in multiple files.

The first reason I decided to create this app was when I was creating a great SVG with plenty of groups and I wanted to change all from dark to light. There is no option to do that easily so with this is pretty easy.

complexsvg

The same for strokes, sometimes I need to adjust some of them for bigger sizes and I wanted to set exact values for every stroke.

Then after creating the big one with its grids I wanted to export each one separated and then I will export each to a PNG, so finally you can do all with the app saving a lot of time.

What I realize during the development, is the second reason is you can render SVG to create pixel art and HD art assets for games and content. Because rendering SVG it is easy and quick to design assets and then export. Also if you change them the will be render pixel perfect again without the complexity of doing by hand.

Some examples:

mountains.png

dott3bike.png

I have implemented some shaders like make dithering, I will release in a near future after the first beta.

And finally and really important I am now on Patreon, I will include there a lot of more in progress, tips, docs about how to use apps, development, creation and more. So any help is welcome!

 

Advertisements

Desktop Color Information App

(Update: Now with Alt+T supports Top Most Window ON/OFF)

This desktop app is a tool to get information about colors while you move the cursor and capturing pressing control. Works in multiple monitor configuration and shows an approximation of the name based in the Hue value:

(Contrast ratio values are also working)

capturecolorstopmost.gif

Keep control down to capture colors and press shift to pause capturing.

Download

—————————
Checksum information
—————————
Name: ColorInfoTool.zip
Size: 20920 bytes (0 MB)
CRC64: 12FC99E1ADFA43AA

In progress SVG tools pack app

This post is simply to show to animations and renders in pixel perfect about a tool I am preparing

(4th Update: Fills and non-filled strokes) I have solved some issues and discovered Inkscape make child translations in fills so… I have to implement that. Here an example of Super Mario World I want to use it in Construct to check a minimap.

smw.png

(3rd Update: Shaders, Now it is possible to add shaders I am creating like dithering and banding) Here it is the example of dithering, view at full size:

ditherexamplesscaled.png

(2nd Update: ANIMATION, I was able to catch the transformations in SVG groups and apply intervals to create animations, that can be saved in JSON (for instance) and be applied to different vector files) Just save the states for each animation and can be rendered with different resolutions from pixel art to HD.

Full size : https://mareinsula.files.wordpress.com/2017/04/gb4.gif

gb4.gif

(Update: I had to add the tentacle just to see how it cool looks, on the right original, on the left traced from http://www.adventuregamestudio.co.uk/forums/index.php?topic=35026.0 )

link to the gif: https://mareinsula.files.wordpress.com/2017/04/tentacle.gif

tentacle.gif

cowboy.gif

gb.gif

What do you think, will help for developers, designers @juanpaexpedite

Windows 10 IoT 15043, First Impressions

The Windows 10 IoT 15043 Insider Preview is awesome, it was released about a month ago, but I have no time to test it until now and because I have not seen any screenshot about the new device portal and information about the release, I think is a must show the news :

portal.JPG

First impressions

The wireless adapter does not work pretty well, so I decided to continue via Ethernet (might be is an issue in my configuration).

Now a few interesting screenshots from different sections including a paired device in the Bluetooth section. Later I will test if it works.

This slideshow requires JavaScript.

Now let’s deploy the Games Time Machine store package into the great Raspberry Pi 3:

installing.JPG Adding the dependencies and the certificate from the [AppName]_test folder works great. Before launching the app change the resolution from the device portal and restart the RPI3.

Ouch, when I restarted appeared a rainbow gradient filling the screen, then changed to green vertical gradients. So I had to set up the device again, at least the IoT Dashboard saved the 15043 ISO. I also tried 800×600 and it crashes.

Games Time Machine

Before trying to change the resolution, I launched the app, and the animated logo screen worked pretty well, the lines moved correctly but Win2D animations are not working for the shadows.

Just to test how it works the app in a better resolution, I installed the W10 IoT 14393, it’s a huge improvement, so big that Games Time Machine crashes in 14393.

oldmanager

So let’s go back to the 15043 and check if it is possible to set a higher resolution.

Configuration

If we take a look to the 14393 EFIESP, there is a file called config.txt and I set to 1024×768, I did not found that value, but might be the hdmi_mode=16.

init_uart_clock=16000000
kernel_old=1
safe_mode_gpio=8
max_usb_current=1
gpu_mem=32
hdmi_force_hotplug=1
core_freq=250
framebuffer_ignore_alpha=1
framebuffer_swap=1
disable_overscan=1
hdmi_group=2
display_rotate=0
hdmi_mode=16

Let’s reinstall the 15043 and check the changes, now the appearance is really more professional:

# For more options and information see
# http://www.raspberrypi.org/documentation/configuration/config-txt.md
# Some settings may impact device functionality. See link above for details
# GPU Firmware SHA256 checksum: 7CE2EF13CDD77F1782FFFF98533572503DF4B46765966CC7E18F6C6455B9623A
# kernel.img SHA256 checksum: 6C82C8720BE4EFB2951BDC01FA187B0B659227033EB7D7DB5ACA6324FD644D7F
# kernel.img git commit ID: f6706f4bd3b10c8294589f45082c8bdc4c50be59

#
# Boot
#
init_uart_clock=16000000    # Set UART clock to 16Mhz
kernel_old=1                # Load kernel.img at physical memory address 0x0
safe_mode_gpio=8            # A temp firmware limitation workaround
max_usb_current=1           # Enable maximum usb current

#
# Memory
#
gpu_mem=32                  # Set VC to 32MB, ARM DRAM to (1008-32)MB
hdmi_force_hotplug=1        # Enable HDMI display even if it is not connected (640x480)

#
# Overclocking
#
core_freq=250               # Frequency of GPU processor core in MHz

#
# Video
#
framebuffer_ignore_alpha=1  # Ignore the alpha channel for Windows.
framebuffer_swap=1          # Set the frame buffer to be Windows BGR compatible.
disable_overscan=1          # Disable overscan
hdmi_group=2                # Use VESA Display Mode Timing over CEA
hdmi_cvt 800 480 60 6 0 0 0 # Add custom 800x480 resolution (group 2 mode 87)

The correct link  is the following: raspberry configuration. and information about the video configuration here. There you see the parameter hdmi_mode=16 is the same I set in the 14393 release, so let’s remove hdmi_cvt and add that mode…..🐱‍👤

It is running! It took a loooong time until the ‘Welcome to Windows 10 IoT Core’ appeared (and more after reinstalling it N times since I began the post.) Here the screenshot:

Screenshot_2017-03-11_10-21-55.jpg

Multimedia

I was not able to make the app pass the splash screen using the package I sent to the store, so I decided to avoid the intro page, the ads, and debug directly to the platforms. After a while copying files…🐱‍👓…and installing missing frameworks…finally!

Now we have a better resolution, let’s deploy GamesTimeMachine again and test music, video, screenshots, animations, etc.

The animation of the platform selected was made using Win2D and it is working pretty well. I really love Windows 10 IoT on the Raspberry Pi 3 when are friends:

The full size gallery goes pretty smooth, the music plays fine (using the wired headphones, the HDMI neither the Bluetooth headphones are working), and the TV mode works!! so it has the gallery playing with the music and the voice talking about the game, with smooth transitions!

Trying to play a video make it crash and appear the BSOD, so it might be because the Codecs, who knows, in the future when we have some documentation we will be able to know how to proceed.

Now I will set the app in TV mode, just to listen a bit of Zelda and remember the first games.

Interesting article? Donate on the right, it is pretty easier than finding the configuration of video to make the Pi3 do not crash :).

More cool posts soon @juanpaexpedite and of course you can grab Games Time Machine from the Store.

And a last note, I tried to install both releases in my new Raspberry Pi Zero W v1.1 but it did not work. I will search for more info what we can do for that amazing miniature.

 

 

 

 

 

 

 

 

 

NET Standard Mobile LOB: Prism, EFCore Sqlite and Validation UWP [1]

Introduction

My first idea was creating the environment with Xamarin but at the moment you cannot compile .NET Standard with Xamarin Forms, I will update the articles when the bugs go away.

Until then I decided to create an NET Standard library that in a near future will be the same for the Xamarin Forms project.

This article makes me really happy because it has been a long way until here, and when NET Standard 2.0 get released our C# world will enter in a new dimension, I assure that.

Situation

At the moment if you are in the world of PCL, and if you have tried to do something with Entity Framework Core Sqlite (EFCSqlite), its development goes directly to NET Standard without having a PCL release. So its being developed for the future.

So the option is right clear for the LOB project, create a NET Standard library that has to contain EFCoreSqlite, Prism.Core, Prism.Windows and System.ComponentModel.Annotations all working together.

And what we do it now? NET Standard 1.4 is the recommended version to use with UWP projects until the release of the 2.0. and with a magic tricks I will show you next you can mix all those libraries in one place.

New solution

Let’s create a new UWP project using .NET Framework 4.6.1:

newuwpproject.JPG

I always use 14393 for UWP on both target and min, but in theory you can use the option you need.

Now let’s create the LOB .NET Standard library:

newstandardproject.JPG

Now comes the first trick, adding fallbacks to .NET Standard to allow adding .NET PCL ‘specific’ libraries.

Unload the Marketing.LOB project and edit the csproj, add the fallbacks like the following:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netstandard1.4</TargetFramework>
    <PackageTargetFallback>$(PackageTargetFallback);portable-monoandroid10+monotouch10+net45+win+win81+wp8+wpa81+xamarinios10</PackageTargetFallback>
    <PackageTargetFallback>$(PackageTargetFallback);uap10.0</PackageTargetFallback>
  </PropertyGroup>

</Project>

If you want you can download from the Nuget library the latest versions or add below the Property Group section, another section:

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="1.1.1" />
    <PackageReference Include="Prism.Core" Version="6.2.0" />
    <PackageReference Include="Prism.Windows" Version="6.0.2" />
    <PackageReference Include="System.ComponentModel.Annotations" Version="4.3.0" />
  </ItemGroup>

And now compile and it works!. Great

Models

Let’s create a Client really basic model in properties but cool in implementation, create a folder Models in the LOB project and the class Client:

 public class Client : ValidatableBindableBase
    {
        #region Properties
        public int ClientId { get; set; }

        private string name;
        [Required(AllowEmptyStrings = false, ErrorMessage = "NotEmpty")]
        public string Name
        {
            get { return name; }
            set
            {
                SetProperty(ref name, value);
            }
        }

        private string details;
        [NotMapped]
        public string Details
        {
            get { return details; }
            set { SetProperty(ref details, value); }
        }
        #endregion
    }

see that? It is a Prism ValidatableBindableBase with ComponentModel DataAnontations cool! And as you can see I set the Id to ClientId to be automatic with EFCSqlite for the following article.

ViewModel

I have made an effort to keep it pretty simple, create a ViewModels folder in the LOB project and here are the needs of the implementation:

  • Is Loading field (avoids need to validate and show for instance ‘NotEmpty’ in required field textblock).
  • Property Error Event handler to refresh the validation.
  • a Create Command to create the client using EF.
  • a validation method ‘CanCreate’ that checks if it is loading and errors.
public class ClientFormViewModel : BindableBase
    {
        #region Properties and Fields
        public Client Client { get; set; }

        public DelegateCommand Create { get;  }

        private bool isloading = true;
        #endregion

        #region Constructor
        public ClientFormViewModel()
        {
            Client = new Client();
            Create = new DelegateCommand(CreateClient, CanCreate);
            Client.PropertyChanged += Client_PropertyChanged;
            Client.ErrorsChanged += Client_ErrorsChanged;
        }
        #endregion

        #region Validation
        private void Client_ErrorsChanged(object sender, DataErrorsChangedEventArgs e)
        {
            Create.RaiseCanExecuteChanged();
        }

        private void Client_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            Create.RaiseCanExecuteChanged();
        }

        private bool CanCreate()
        {
            if (isloading)
            {
                isloading = false;
                return false;
            }

            return Client.Errors.Errors.Count == 0;
        }
        #endregion

        private void CreateClient()
        {
            //To be continue in the next post
        }

    }

Now the validation is linked to the canexecute property of the Create Command.

View

Add the reference of the LOB project in the UWP project and create a folder Views and a Page ‘ClientFormView’.

In this case to simplify I add the viewmodel in the following way:

public sealed partial class ClientFormView : Page
    {
        public ClientFormViewModel ViewModel { get; } = new ClientFormViewModel();

        public ClientFormView()
        {
            this.DataContext = ViewModel;
            this.InitializeComponent();
        }
    }

Inside the Grid of the XAML the following stack panel:

 <StackPanel MaxWidth="360">
            <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Text="Client"/>
            <TextBox Header="Name" x:Name="ClientName" Text="{Binding Client.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock Text="{Binding Client.Errors[Name][0]}" Foreground="Red" HorizontalAlignment="Right" />

            <TextBox Header="Details" x:Name="ClientDetails" Text="{Binding Client.Description, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />

            <Button Command="{x:Bind ViewModel.Create}" Content="Create" HorizontalAlignment="Right" Margin="0,12,0,0"/>
        </StackPanel>

Pretty simple and effective. Until compiled binding has features like not crashing when references are null I have to use classic binding.

Remove the MainPage and make the App rootframe navigate to the new View. Run it and test it writing some text (the button will be enabled) and now delete the text (the button will be disable and the error information will appear).

Here ends the first part of the article. In summary now we can use the standard libraries to make it work without need of workarounds.

In the next chapter I will explain the implementation of EF Core SQLite, creating the database and clients.

Hope you find the article fascinating as I see and if you want, on the right pane, you can donate for some coffee and tea.

Grab the source example from github-mark-64px

Know all about my progress at @juanpaexpedite, hope you enjoy the article.

UWP Grid view, 1st: the Tile Size

Introduction

There is no documentation on how the tiles in the start menu and the start screen are rendered, we see them everyday and we create apps with tiles everywhere, but adjusting the size makes me every time doubt about what value should they have or how to find it.

Source

To make the analysis, to know if the tile has a clip, is scaled, etc. I created the following png I used as the tile of an app:

square150x150logo-scale-200

Screenshots

To analyze the values of the tile sizes, I created screenshots from several desktops with different resolutions and I analyzed png mobile screenshots from different sources. After composing you have the following (always using no compression):

tilesizes

We realize that the tile is not clipped at all, it is always scaled. Also if you watch the screen with zoom you will appreciate the differences rendering the text, images, etc.

Interesting the tile size in desktop is always 100 real pixels in any resolution when the scale of the screen is 100%, and 125 real px in 125%. The logic is really easy to understand.

Now in mobile, we have 229 real pixels, where does this value come from?

Tile size in mobile

There are some basic rules that make appear this value:

  1. In this case we suppose the grid has 3 tiles width, each tile has Xt pixels.
  2. The base width for every mobile device is 360, all the sizes are multiple of that.
  3. The space on the sides (Xo) has to be bigger or equal to the space between tiles (Xi).

Applying the rules:

mobiletilesize.png

For a 360 width, the tile size (Xt) is 114, the space between (Xi) is 4 and Xo is 5.

A mobile phone with 720 pixels width is 2 times 360, that means double sizes, at least in theory, After making some screenshots and comparing you see there are some variations.

To finish this part, Here is the table with all the values I calculated for different mobile screen sizes:

mobilegrid.png

The formula is pretty accurate and is valid to help us to calculate the tile size for the grid view I will describe in the following post, because it has some tricks than just the rule I show here.

Grab the full screen resolution PDF with all the data: Tile sizes PDF

Here is the end of the first part, now it is explained in detail, in the next post I will details the size for a tile in an app inside a GridView control and why not simply use a VariableSizedGridView, it implies performance, virtualization and more.

Enjoy the article? Tips welcome

More about the UWP world, tips and tricks soon, enjoy @juanpaexpedite

Wrap Lottie in UWP Apps

NOTE: This is an example on how to achieve showing Lottie examples in a webview. In the future I will make a library with animation methods, loading, configuration, etc.

lottietransparent

What is all about?

The design of apps in Windows 10 it’s a bit Dark and Light world. At the beginning since Windows Phone 7 it was about performance and lack of resources and templates. All my icons were solid white in that age.

These days we can start using multicolor svg icons and also animations. The typical animations are about changing the opacity, position, scale, color but never the shape of an Element. In part is because it is not an easy work to do but there is an After Effects plugin+library that is the source of all this movement: Bodymovin

When I started to see flat animations vector based in several websites and after reading that were based on Bodymovin appeared to me Lottie which is a native version of this javascript library it get me a bet out of the game. The reason is because XAML is powerful but is not complete, it does not have the power to change shapes, grow lines, etc.

Testing Lottie files in Bodymovin

Lottie is only for Android and IOS, so in order to make it work in UWP the only way is make it work in a webview using Bodymovin, so first let’s get files.

There is a new website LottieFiles (I get to that with the issue Path animations from Tamás Deme)  containing the json animation files ready to work with Lottie. The first question here is are compatible, hopefully yes, at least the files I’ve tested.

Lottie Transparency

Now we have a file, for instance lottie logo json, I had to understand the logic of that file to make it transparent, first I make an screenshot and the color was RGB (0,209,193) after several trials I discovered the colors are written from 0 to 1, so 209/256 it is about 0.82 in this case the background is

{
  "ty": "fl",
  "fillEnabled": true,
  "c": { "k": [ 0, 0.82, 0.76, 1 ] },
  "o": { "k": 1 },
  "nm": "Fill 1"
},

Now to make it transparent I set the “0”: { “k” : 1 } to 0, easy to find, isn’t it?.

Html transparency and scrollbars

By default the Webview control make appear a vertical scrollbar and it is not transparent, to solve all that

<html style="width: 100%;height: 100%;overflow: hidden;">
...
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">

Take care of that, it might be useful for many situations.

The library

How do we place the Bodymovin library running on a UWP from the file. Well after several trials, I found you have to use ms-appx.web, but it was not working, so I was looking for a way to debug that. You can do that with the following:

debugscript

If you set the debugger to Script, you can debug the Webview until you find the correct path, in this case:

 <script src="ms-appx-web:///Data/bodymovin.js"></script>

Where the file is content and copy always. with all of that adjustments, the code will look like:

<!DOCTYPE html>
<html style="width: 100%;height: 100%;overflow: hidden;">
<head>
    <script src="ms-appx-web:///Data/bodymovin.js"></script>
</head>
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">
<div style="width:100%;height:100%;background-color:transparent" id="bodymovin"></div>
<script>
        var animData = { container: document.getElementById('bodymovin'), renderer: 'svg', loop: true, autoplay: true, animationData: animationdata };
        var anim = bodymovin.loadAnimation(animData);
    </script>
</body>
</html>

In next versions, I will make the code with configuration about when to start, looping, etc.

 The Webview

This part is piece of cake, what I did is replace the parameter in ‘animdata’ with the json. In theory is possible to read as src, but at the moment cannot make it work.

private async void InitializeLottie()
{
    var html = await BMManager.GetTemplate();
    var jsonuri = "ms-appx:///Data/lottie_logo_1.json";
    var data = await BMManager.ReadData(jsonuri);
    html = html.Replace("animationdata", data);
    WebView web = new WebView { DefaultBackgroundColor = Colors.Transparent };
    LayoutRoot.Children.Add(web);
    await Task.Delay(1000);
    web.NavigateToString(html);
}

With that after loading the page you will have the cool animation on your app!.

So here is a base to add svg animations into a UWP app.

Next Steps

There are plenty of steps to do from here, testing more jsons, making Composition animations with the webview to view how it behaves (pixilation, flickering). Making a complete library with animation control, etc.

Source code

You can download and try the example:  github-mark-64px

In my case, I’m using Windows 10, 15031. If it works also in your mobile, please share if it works, thank you @juanpaexpedite

If you find it useful, help me to continue, Tips welcome, it really helps!