The ubuntu-html5-theme on the RTM image does not work

[XiaoGuo, Liu]

I have a project at the following location:

bzr branch lp:~liu-xiao-guo/debiantrial/wuziqi

My phone software is as follows:

phablet@ubuntu-phablet:~$ system-image-cli -i
current build number: 214
device name: mako
channel: ubuntu-touch/ubuntu-rtm/14.09-proposed
last update: 2015-03-17 10:52:53
version version: 214
version ubuntu: 20150312
version device: 20150116
version custom: mako-1.1

On desktop:
ubuntu-html5-theme:
  Installed: (none)
  Candidate: 0.1.2+14.10.20141008-0ubuntu1
  Version table:
     0.1.2+14.10.20141008-0ubuntu1 0
        500 http://archive.ubuntu.com/ubuntu/ utopic/universe amd64 Packages

On the phone:
ubuntu-html5-theme:
  Installed: (none)
  Candidate: 0.1.2+15.04.20150309~rtm-0ubuntu1
  Version table:
     0.1.2+15.04.20150309~rtm-0ubuntu1 0
        500 http://derived.archive.canonical.com/ubuntu-rtm/ 14.09/universe armhf Packages

If I remove my following code, it works fine:

====================================
var UI = new UbuntuUI();

....

    UI.init();
====================================
if the above two lines are there, the application does not run as expected!

However, if I change my index.html to the following:

=================================================
  <div data-role="mainview">

        <header data-role="header">

        </header>

      <div data-role="content">

        <div data-role="pagestack">

          <div data-role="page" id="main" data-title="五子棋">

              <div class='test'>

                <div>

                    <img src="images/w.png" alt="white" id="chess">

                </div>

                <div>

                    <button id="start">Start</button>

                </div>

              </div>

              <div>

                  <canvas width="640" height="640" id="canvas" onmousedown="play(event)">

                       Your Browser does not support HTML5 canvas

                  </canvas>

              </div>

          </div> <!-- main -->

        </div> <!-- pagestack -->

        <div data-role="dialog" id="dialog1">

          <section>

              <h1></h1>

              <h2></h2>

              <menu>

                  <button data-role="button" id="ok">OK</button>

              </menu>

          </section>

        </div>

      </div> <!-- content -->

    </div> <!-- mainview -->
========================================================
it works as well.

I have tried to copy over all of the files in the following directory on my utopic 14.10 desktop:

/usr/share/ubuntu-html5-theme/0.1/ambiance

Then, I change my index.html to the be following:

    <!-- Ubuntu UI javascript imports - Ambiance theme
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
    -->

    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tab.js"></script>
    <script src="ambiance/js/tabs.js"></script>

My application works as expected. I am thinking the ambiance on the phone needs to be updated.

Best regards,
XiaoGuo

[Felix Wilke (felixw83)]

Hello,
I have a similar problem. If I build my project using the desktop kit or the emulator everything works fine, but when i try to start the project on my new BQ, the pages look very different (especially the tabs look like in android). Your workaround worked for me.

[David Barth (dbarth)]

The rendering is different depending on the theme release installed locally. To solve the problem, you can just embed your theme in the application itself.

I wrote a quick script to help with that process: http://bazaar.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/download/head:/ubuntuhtml5theme-20150319111737-5oucox80hsx3rmj1-1/ubuntu-html5-theme

You can find instructions to use at: https://code.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/+merge/253498

[Felix Wilke (felixw83)]

Just out of curiosity. Won't the be any update on the theme installed on the BQ? I think this would be necessary in order to have a similar navigation pattern on both native apps qml and html5.

[XiaoGuo, Liu (liu-xiao-guo)]

When I use the tool, I get some errors like:

http://imgur.com/zsFEIS1