6 Replies Latest reply on Jul 11, 2017 12:11 PM by kerrishotts

    HTML5 + resources folder from HYPE3

    BBDDan Level 1

      Hi guys,

      Im new to creating apps and have built and output an interactive book and I plan to use phonegap to spew out something for multi platform app stores.

      My head is swimming a bit as to how I go from the HTML file plus resource library that HYPE vomitted onto my Mac folder to something PhoneGap build will accept, I realise this is possibly a big question but any help or prods in the right direction would be great, I've looked at ionic as a way of integrating what I already have to create something PhoneGap will accept but don't know if I even need it?

      Please help oh enlightened ones!

      Dan

        • 1. Re: HTML5 + resources folder from HYPE3
          kerrishotts Adobe Community Professional

          I'm not familiar with Hype, so would you mind sharing the structure that it created? A screenshot or output from "tree" from your terminal would help immensely.

          • 2. Re: HTML5 + resources folder from HYPE3
            BBDDan Level 1

            Hi,

            thanks for the reply.

            Essentially it outputs a single HTML file plus a *.hypresources folder containing all the artwork/music etc on a single level if you choose to 'export as HTML5 folder'. The other options are 'Dashboard/iBooks Author widget' or PNG sequences.

            So there are things missing or in need of renaming, here is a screen shot of the first part of the html file:

            hype output screengrab.jpeg

            Hope that helps?

            Thanks

            Dan

            • 3. Re: HTML5 + resources folder from HYPE3
              kerrishotts Adobe Community Professional

              First, rename your HTML file to "index.html".

               

              Next, create a config.xml in the same folder. I'm going to go off the examples in the documentation, but hopefully this will help:

               

              <?xml version="1.0" encoding="UTF-8" ?>

              <widget xmlns   = "http://www.w3.org/ns/widgets"

                  xmlns:gap   = "http://phonegap.com/ns/1.0"

                  id          = "com.BBDDan.TheDrumables.Part1"

                  versionCode = "10"

                  version     = "1.0.0" >

                <name>The Drumables Part 1</name>

                <description>

                    Your app's description

                </description>

                <author href="https://your.domain.com" email="you@your.domain.com">

                    Your name

                </author>

                <platform name="ios">

                  <!-- iPhone 6 / 6+ -->

                  <icon src="icon-60@3x.png" width="180" height="180" />

                  <!-- iPhone / iPod Touch  -->

                  <icon src="icon-60.png" width="60" height="60" />

                  <icon src="icon-60@2x.png" width="120" height="120" />

                  <!-- iPad -->

                  <icon src="icon-76.png" width="76" height="76" />

                  <icon src="icon-76@2x.png" width="152" height="152" />

                  <icon src="icon-83.5@2x.png" width="167" height="167" />

                  <!-- Settings Icon -->

                  <icon src="icon-small.png" width="29" height="29" />

                  <icon src="icon-small@2x.png" width="58" height="58" />

                  <icon src="icon-small@3x.png" width="87" height="87" />

                  <!-- Spotlight Icon -->

                  <icon src="icon-40.png" width="40" height="40" />

                  <icon src="icon-40@2x.png" width="80" height="80" />

                  <icon src="icon-40@3x.png" width="120" height="120" />

               

                  <!-- iPhone and iPod touch -->

                  <splash src="Default.png" width="320" height="480" />

                  <splash src="Default@2x.png" width="640" height="960" />

                  <!-- iPhone 5 / iPod Touch (5th Generation) -->

                  <splash src="Default-568h@2x.png" width="640" height="1136" />

                  <!-- iPhone 6 -->

                  <splash src="Default-667h@2x.png" width="750" height="1334" />

                  <splash src="Default-Portrait-736h@3x.png" width="1242" height="2208" />

                  <splash src="Default-Landscape-736h@3x.png" width="2208" height="1242" />

                  <!-- iPad -->

                  <splash src="Default-Portrait.png" width="768" height="1024" />

                  <splash src="Default-Landscape.png" width="1024" height="768" />

                  <!-- Retina iPad -->

                  <splash src="Default-Portrait@2x.png" width="1536" height="2048" />

                  <splash src="Default-Landscape@2x.png" width="2048" height="1536" />

                </platform>

                <platform name="android">

               

                  <icon src="ldpi.png" qualifier="ldpi" />

                 <icon src="mdpi.png" qualifier="mdpi" />

                 <icon src="hdpi.png" qualifier="hdpi" />

                 <icon src="xhdpi.png" qualifier="xhdpi" />

                 <icon src="xxhdpi.png" qualifier="xxhdpi" />

                 <icon src="fr-xxhdpi.png" qualifier="fr-xxhdpi" />

                 <splash src="ldpi.png" qualifier="ldpi" />

                 <splash src="mdpi.png" qualifier="mdpi" />

                 <splash src="hdpi.png" qualifier="hdpi" />

                 <splash src="xhdpi.png" qualifier="xhdpi" />

                 <splash src="fr-xhdpi.png" qualifier="fr-xhdpi" />

                 <splash src="portrait-xxhdpi.png" qualifier="port-xxhdpi" />

                 <splash src="landscape-xxhdpi.png" qualifier="land-xxhdpi" />

                </platform>

                <!-- and any other platforms you need -->

              </widget>

               

              3. Add the images referenced in the config.xml file (These will need to be in the same directory as currently specified, or you can make your own directories and update the config.xml paths as appropriate). There are a lot of services online that will take a single icon and spit out all the various sizes. The same is true for splash screens as well. Whatever splash/icons are missing will likely have PhoneGap's substituted as a default (which will get you rejected from the Apple app store).

               

              4. Use PhoneGap Build. You can zip up your entire folder and upload it to PhoneGap Build and get builds back after a few minutes. You will need an iOS provisioning profile if you want to get iOS builds back.

               

              Does that help any?

              • 4. Re: HTML5 + resources folder from HYPE3
                BBDDan Level 1

                Hi Kerrishots,

                 

                that's great, thanks very much. I'll add the icon & splash images referenced.

                 

                I have PhoneGap Build so I'll get to that!

                 

                It need to be in landscape really but I guess anyone using it will recognise that or I can look on how to force that on  the forum.

                 

                Once again, thanks for your help, that's brilliant!

                 

                Dan

                • 5. Re: HTML5 + resources folder from HYPE3
                  BBDDan Level 1

                  Hi again,

                   

                  just a quick one, how do I add the folder of the icons and splash screens to the config.xml file so I can keep them in their neat folders rather than just dump each icon/splash into the main resources folder I already have everything in on one level?

                   

                  Thanks

                   

                  Dan

                  • 6. Re: HTML5 + resources folder from HYPE3
                    kerrishotts Adobe Community Professional

                    The typical pattern is something like this:

                     

                    project-root/

                       res/

                           icons/

                               android/

                                   android PNGs

                               ios/

                                   iOS PNGs

                           splash/

                               android/

                                   android PNGs

                               ios/

                                   iOS PNGs

                     

                    Then you can just use a relative path (from the location of your config.xml) to reference the desired asset. You'll want to add a ".pgbomit" file just underneath res/ so that the assets aren't copied twice (no harm if they are, but it just means you take up more room than is necessary on your user's device).