No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Background für splash screens in Icon Genie

    Framework
    1
    2
    239
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      Clareon last edited by

      Hello Quasarians,

      I like the Icon Genie ! It is great, that I don’t have to think about, what file types and what sizes I have to have for a web application (pwa included). (Latest Version of icon genie cli is installed.)

      The background picture for splash screens is something I don’t understand. Splash screens have diverent sizes (width and height). I can give only one single background picture to icon genie. I get splash screens with my background picture but the picture is not scaled to the size of the splash screen. The picture ist placed centered in the splash screen.

      What I have looked for is: my background picture lined up at the lower edge of the splash screen and scaled to the width of the splash screen. The rest of the splash screen filled with background color and if the background icon ratio is >0 the centered icon placed upon.

      In general it would be great, if icon genie gets some more config params for the splash screens, perhaps these:

      background-align: center | left | right | bottom | top
background-scale: width | height | both

      It would be great, if someone will have a look on that.

      Thank you.

      1 Reply Last reply Reply Quote 0
      • C
        Clareon last edited by

        SOLVED (work around): Back ground for splash screens in Icon Genie

        The task: Get all necessary splash screens from one single background picture with icon genie where all splash screens show the same picture.

        The Interaction with icon genie: Icon Genie places a background picture centered in the middel of the splash screen. Too large pictures are not scaled down and will therefore be clipped. Pictures that are to small in height will be scaled up to have min. the height of the splash screen. Same for the width. Up scaling is done with the same factor in x and y direction.
        Because splash screens have different height to width ratio there will be some clipping of the (scaled) background picture.
        You must provide a background picture with your visible content in the center part and margins around that may be clipped away for some splash screens.

        The work around:

        1. Create a picture with the smallest height of all splash screens (in portrait mode this is 1136 px) and with approx. 900 px width. (It is the smallest height because icon genie only scales up but never scales down.)
        2. Fill the picture with your splash screen background color.
        3. Place your content in this picture and center it horizontaly. Your visible content should not have more than 500 px width. The left and right margin of aprox. 200px will be clipped off by icon genie in some splash screen formats.
          If you want icon genie to place the app icon on top of your background picture you should have an empty area in the center so that the icon not interfere with your background.

        Your background picture therefore is 900 px width and 1136 px height. The part, that is visible in all splash screens is 500 px width and 1136 px height.

        The width of the background picture of approx. 900 px and the visible part of 500 px is a little experimental. You may calculate these widths as follows:

        1. Get the largest height to width ratio of all splash screens (in portrait mode this is 2.17 from 1125 x 2436).
        2. Get the factor for scaling the background picture up in height: 1136 --> 2436, that is 2.14 = 2436/1136.
        3. After scaling up, the visible part of your background picture is 1125 px in width. That is the width of the splash screen with largest ratio from step 1.
        4. Get the visible width of your background picture by scaling down the width 1125 / 2.14 = 526 px. (This is little more than the 500 px but it is ok to have a little margin to the edge of the display.)
        5. Get the smallest height to width ratio of all splash screens (in portrait mode this is 1.33 from 2048 x2732).
        6. Your background picture should be at least 1136 / 1.33 = 854 px in width. More doesn’t matter. (This is little less than the 900 px but it is ok to have a little more pixels in width for rounding and clipping.)

        With a little more width of the background picture and a little less width of the visible content it is easier to get a working background picture in the first attempt.

        This way I got my splash screens with a bottom line of text and logo and with an overlayed scaled and centered app icon out of a single background picture.

        Have nice splash screens !

        1 Reply Last reply Reply Quote 2
        • First post
          Last post