Skip to content
Archive of posts tagged jquery

Realtime clock data from Alge-timing system

I made all of this stuff into the Finice 2019 ice climbing competition (www.finice2019.com).  The idea is to send the clock timing events into web, so we could use them in the results-office, or we could insert the clock into the video stream during the competition. There’s always some delay in the video stream, so we need a way to add custom delay into the clock. The data is good, but we have to remember to add some delay so the clock and video will be on sync. It would look stupid if the climber get to the top, and the clock has already stopped a few seconds ago.

Here’s a short video about how all of it works:

Continue reading ‘Realtime clock data from Alge-timing system’ »

Ordering tables with jquery

Last spring I was organizing official Finnish ice climbing championships www.finice.com . We were a really small team behind this production. The problem for us was how to deliver real time results to the audience, and for the media broadcast company, which was filming and commenting the competition.

I wrote a small script to order the results, which I just quickly entered to the html page during the competition.

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\\.]+/g, '')) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\\.]+/g, ''))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
    tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    rowData = tableData.getElementsByTagName('tr');
    for(var i = 0; i <= rowData.length - 1; i++){
        //console.log(rowData.item(i).getElementsByTagName('td').item(0));
        rowData.item(i).getElementsByTagName('td').item(0).innerHTML = i+1;
    }
}

Continue reading ‘Ordering tables with jquery’ »

Porting JamendoFM to FirefoxOS

I just got a new FirefoxOS developer preview phone, so my next step was to make a port for FireFoxOS. It was pretty similar to porting to tizen. I only had to make a manifest file.

Creating the application manifest file

The file’s name is manifest.webapp, and creating it was pretty easy. I justcopy&pasted the example manifest file from firefoxOS tutorials, and change all the relevan fields.

Here’s how my manifest looks like:

{
  "name": "JamendoFM",
  "description": "Jamendo radio client for mobile",
  "launch_path": "/index.html",
  "icons": {
    "60": "/img/icon-60.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Antti",
    "url": "http://summeli.fi"
  },
  "permissions": {
    "audio-channel-content":{"description":"Use the audio channel for the music player"}
 },
  "default_locale": "en"
}

Running JamendoFM under Lockscreen

The coolest thing about Firefox OS is that after settings the permission “audio-channel-content” the app runs music even under the lockscreen. This is not (yet) possible on Tizen, or any other HTML5 frameworks.

jQueryMobile performance

The cool thing is that the jQueryMobile works really well on firefoxOS! The animations are pretty smooth(no where near 60fps though), and there are no artifacts caused by using them, so they’re OK.

Developing a mobile client for Jamendo Radio with jQueryMobile

In this article I’m going to create a jQueryMobile based client for Jamendo Radio.

The JQuery Mobile based UIs can be run on almost every smartphone platform; iOS, Android, Windows Phone, BlackBerry10, Tizen, Firefox OS etc. The development of JQuery Mobile based UIs is very nice, since you can develop them with HTML and JavaScript in a standard desktop browser.

Here’s a short video of JamendoFM running on FirefoxOS.

Getting the API for Jamendo

At first you must register to http://developer.jamendo.com/ to get the API key for creating a client for Jamendo API.

Creating the UI with HTML pages

The first page will be used for listing the radio mixes form Jamendo.com.


JamendoFM

The radio list will be loaded into the radioList-element. The next step is to populate the radioList with jQuery.
The data is loaded with JSONP so the extra parameter &callback=? is added to the end of the requests.
Continue reading ‘Developing a mobile client for Jamendo Radio with jQueryMobile’ »