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

Bug #1433453 reported by XiaoGuo, Liu
10
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Ubuntu HTML5 UI SDK
Triaged
High
Alexandre Abreu

Bug Description

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

Revision history for this message
Felix Wilke (felixw83) wrote :

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.

Revision history for this message
David Barth (dbarth) wrote :

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

Revision history for this message
Felix Wilke (felixw83) wrote :

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.

Revision history for this message
XiaoGuo, Liu (liu-xiao-guo) wrote :

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

http://imgur.com/zsFEIS1

Changed in ubuntu-html5-theme:
status: New → Triaged
importance: Undecided → High
assignee: nobody → Alexandre Abreu (abreu-alexandre)
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.