Build an APP with Cordova and SVG Layout

I was asked to make a mobile Phone APP that worked like a scoreboard for Karate (Kumite) matches. I had already some experience making Android apps but I wanted to try something new. I had heard aboud Apache Cordova a framework that allows you to create multi-platform applications using HTML5 and JavaScript. NetBeans supports it very well, so I decided to give it a try.

I had to install NodeJS because Cordova is based on it, it was effortless on Sabayon Linux as it should be in any other distribution. Once I decided my layout I started to write the HTML5 code: mostly buttons positioned with CSS. I wanted to make it as much screen independent as possible because I remember the problems I had with my previous Android App.

I have little experience with CSS and I could not make a complex layout, but I did not give up and decided to have all my user interface built with SVG.

SVG is a standard to compose vectorial images that can scale and stretch. First of all I used inkscape to draw the interface, the I include it in the html like this:

<object id="svg_object"  style="width: 100%; height: 100%; position: relative; left: 0; right: 0; top: 0;" data="img/drawing.svg" type="image/svg+xml" >No SVG support</object>

 

The dimension (viewport) of the SVG where the same of my screen so previewing the page in my browser was fine until I resized the browser window.  I had to make some write some javascript to make the svg fix dynamically the window

var svg = document.getElementById(&amp;amp;quot;svg_object&amp;amp;quot;);
var svgDoc = svg.contentDocument;

// The svg2 root element
var svgRoot = svgDoc.getElementById(&amp;amp;quot;svg2&amp;amp;quot;);
svgRoot.setAttribute(&amp;amp;quot;width&amp;amp;quot;, &amp;amp;quot;100%&amp;amp;quot;);
svgRoot.setAttribute(&amp;amp;quot;height&amp;amp;quot;, &amp;amp;quot;100%&amp;amp;quot;);

// Constants
var SVG_WIDTH = 1920;
var SVG_HEIGHT = 1080;

// to resize the SVG
$(document).ready(function () {
var docWidth = $( document ).width() * window.devicePixelRatio;
var docHeight =  $( document ).height() * window.devicePixelRatio;

var wr = docWidth / SVG_WIDTH;
var w = SVG_WIDTH/wr;

var hr = docHeight / SVG_HEIGHT;
var h =  SVG_HEIGHT/hr;

svgRoot.setAttribute(&amp;amp;quot;viewBox&amp;amp;quot;, &amp;amp;quot;0 0 &amp;amp;quot;+ w + &amp;amp;quot; &amp;amp;quot; + h);
});

The last part of the code with the ready() functions comes from JQuery.

I can manipulate SVG elements like HTML tags, for example to update the timer I use:

<pre>// the text box with the time
var timerText = svgDoc.getElementById(&quot;timerText&quot;);
...
var timeString = timeDiffToString(totalTimeRemaining);
timerText.innerHTML = timeString;

On the other hand, Having events from the SVG elements is easy and can be done inside inkscape:

 

  1. From the Object menu select Object Properties… and a window will open on the right
  2. Expand the Interactivity subpanel and you will see all the events associated to the selected object
  3. There you can write the code that will be called on the particular events

In my case, I called Javascript functions in this way

top.updateTimer();

 

 

The top at the beginning is requiered.

I have to say that I have used Firefox as browser for testing because it is my preferred  one and because Chrome throwed an exception when the SVG file tries to communicate with the HTML Javascript.

This is still a work in progress but you can see its progress here.

Some sites that really helped me:

 

Leave a Comment

Your email address will not be published. Required fields are marked *