Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23235] Windows: Splash screen on Win 10 mobile doesn't look right - horizontal bands of mismatched color above/below

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-04-21T13:55:16.000+0000
Affected Version/sRelease 5.3.0
Fix Version/sRelease 5.3.0
ComponentsTooling, Windows
Labelsqe-5.3.0
ReporterHarry Bryant
AssigneeChristopher Williams
Created2016-04-19T14:49:22.000+0000
Updated2016-04-25T17:56:54.000+0000

Description

Description

When launching an app on win 10 mobile with a classic project, the default SplashScreen.png from our templates is used. However, this uses a landscape image on a vertical screen and results in the image looking both too small to read and having large black horizontal bars on top and bottom (letterbox TV style). Ideally the splash screen should have our logo centered and the red color filling the screen.

Attachments

FileDateSize
wp_ss_20160420_0002[1].png2016-04-20T22:52:20.000+000054908

Comments

  1. Christopher Williams 2016-04-19

    Looks like one issue is that we offer no way for the user to specify the background color to use for their splash screen on Win 10 and Win 8.1 Store apps. I believe we'll need a way to specify that in the tiapp.xml file.
  2. Christopher Williams 2016-04-19

    https://msdn.microsoft.com/en-us/windows/uwp/launch-resume/add-a-splash-screen Looks like for Win 10 we should be providing a 1152 x 1920 image for the phone, and a 1240 x 600 (or is it 620 x 300?) for desktop? The docs are at odds with their own screenshots and samples, which use a 620 x 300 for desktop, and a 480 x 800 for phone. Looking at VS 2015's package manifest, it is looking for: 2480 x 1200 (scale 400) SplashScreen.scale-400.png 1240 x 600 (scale 200) SplashScreen.scale-200.png 930 x 450 (scale 150) SplashScreen.scale-150.png 775 x 375 (scale 125) SplashScreen.scale-125.png 620 x 300 (scale 100) SplashScreen.scale-100.png
  3. Christopher Williams 2016-04-19

    To test overriding the splash screen background color, add this section to your tiapp.xml: 
       <windows>
     <manifest>
       <Applications>
         <Application>
           <VisualElements>
             <SplashScreen BackgroundColor="#00ff00" />
           </VisualElements>
         </Application>
       </Applications>
     </manifest>
   </windows>
    This will set the splash screen background color to green, and it becomes very obvious where the image ends and the "background" begins. The xml is a bit much, but mirrors the XML used in Windows Package.appxmanifest file. I was looking for a way to let user's effectively override arbitrary sections of that file when we generate it. For now, I only hooked in to allow overriding the splash screen background color, the logo ForegroundText and the logo BackgroundColor. Most of the other properties are populated through placing the right DefaultIcon.png and app name/description in your tiapp.
  4. Christopher Williams 2016-04-19

    https://github.com/appcelerator/titanium_mobile/pull/7951 https://github.com/appcelerator/titanium_mobile_windows/pull/636 The first PR is to add loads.defaultsdeep as an npm package inside node_modules in the SDK so that the second PR can make use of it. The second PR adds some more scaled versions of the splash screen for win10 and win8.1&& store; but also provides the ability to override some XML values in the generated Package.appxmanifest file for a given platform/sdk version. The aim is to allow the user to use the exact same Xml structure in their tiapp.xml as they would in a Package.appxmanifest from MS. I didn't extend this to every tag/attribute, but the ones we can't currently override by other means (i.e. the logos get generated from DefaultIcon.png, the app name/description from tiapp values). With this change you should be able to override the logo fg text, logo bg color and splash bg color. The values below match our defaults if you don't override, so change them to test it out: 
       <windows>
     <manifest>
       <Applications>
         <Application>
           <VisualElements BackgroundColor="transparent" ForegroundText="light">
             <SplashScreen BackgroundColor="#b41100" />
           </VisualElements>
         </Application>
       </Applications>
     </manifest>
   </windows>
    You can use hex values for colors, or one of the named colors from: https://msdn.microsoft.com/en-us/library/windows/apps/br211467.aspx I can't find docs on the ForegroundText values, I've seen 'light' and 'dark' in samples, though.
  5. Josh Longton 2016-04-20

    I am able to reproduce this issue. !wp_ss_20160420_0002[1].png|thumbnail! Tested on: Microsoft Lumia 640 (10) Microsoft Simulator (10) Windows 10 Studio: 4.6.0.201604190855 Ti SDK: 5.3.0.v20160420090405 Appc NPM: 4.2.5-3 App CLI: 5.3.0-27 Node v4.4.3 *Reopening Ticket*
  6. Christopher Williams 2016-04-20

    The change was only done on master/5.4.0 branch. If [~emerriman] is OK with back porting to 5_3_X, I can do that...
  7. Christopher Williams 2016-04-21

    Merged to 5_3_X, waiting on a build of the SDK on 5_3_X now...
  8. Josh Longton 2016-04-25

    Verified as fixed, The splash screen is displayed correctly. Tested on: Microsoft Lumia 640 (10) Windows Simulator (10) Windows 10 Studio: 4.6.0.201604210304 Ti SDK: 5.3.0.v20160421080259 Appc NPM: 4.2.5-3 App CLI: 5.3.0-36 Node v4.4.3 *Closing Ticket.*

JSON Source