makall

Don't take it personally

Archive for June 2012

Running Elev8, a JavaScript bindings for EFL, on Tizen Developer Device

with 4 comments

Elev8 is the next gen JavaScript runtime for EFL. It is based on Google’s V8 engine (hence the name), and includes a module that allows creating Elementary apps in a declarative way, greatly reducing the amount of code necessary to build the UI for your application. – acidx

Here we’ll use Tizen’s SBS (Scratchbox Build System) to compile libv8 and elev8. To make the process of installing and uninstalling packages to the device easier, we’ll use alien to convert a tarball to a debian package.

Pre-requisites

  1. Scratchbox Build System installed and its targets created:
  2. Alien (http://joeyh.name/code/alien/):
    • # apt-get install alien

The Recipe

Git clone V8 as in https://developers.google.com/v8/build

Compile v8 on SBS arm target

cd v8
make dependencies
sbs -e make arm.release library=shared

Create libv8 deb file

mkdir -p tmp/usr/lib
cp out/arm.release/obj.target/tools/gyp/libv8.so tmp/usr/lib/
cp -r include tmp/usr
cd tmp/
tar -czf ../libv8.tar.gz .
cd -
fakeroot alien libv8.tar.gz

Install libv8 on SBS arm target

sbs -et dpkg -i libv8_1-2_all.deb

Send libv8 to and install it on Tizen device

sdb push libv8_1-2_all.deb root/
sdb shell dpkg -i root/libv8_1-2_all.deb
cd ..

Install efl-dev and elementary packages on SBS arm target

sbs -et apt-get -y install efl-dev libelm-dev

Get Elev8 from enlightenment svn repository:

svn checkout http://svn.enlightenment.org/svn/e/trunk/PROTO/elev8
cd elev8
sbs -e ./autogen.sh --prefix=/usr
sbs -e make
sbs -e make install DESTDIR=$(pwd)/tmp

Create elev8 deb file

cd tmp
tar -czf ../elev8.tar.gz .
cd -
fakeroot alien elev8.tar.gz

Send elev8 to and install it on Tizen device

sdb push elev8_1-2_all.deb root/
sdb shell dpkg -i root/elev8_1-2_all.deb
cd ..

Running

sdb shell elev8 /usr/share/elev8/data/javascript/anim.js

Elev8 anim.js example

Under the /usr/shar/elev8/data/javascript folder are a lot of examples that you can use as reference. As Elev8 was first made to run on the desktop, some examples may look weird on the device for now, but they give you some idea of how easy writing EFL JavaScripts applications for Tizen will be.

And of course you can run you own code, to do it just send the file to the device and call it from sdb.

sdb push infinigag.js /root/
sdb shell elev8 /root/infinigag.js

Elev8 infinigag.js example

To uninstall

sdb shell apt-get remove elev8 libv8
Advertisements

Written by mello

June 20, 2012 at 6:28 pm

Posted in Elev8, Tizen

Tagged with , , , ,

Tizen SDK 1.0 on 64-bits Fed.. I mean ArchLinux

with one comment

Recently, motivated by the Ancient Spirits of Evil, I started a quest to install the Tizen SDK on an ArchLinux x64 machine, a.k.a. my work machine.

Tizen Web Simulator

…”Why are you talking so much about x64?”
Well, the Tizen group, before this post being published, has just released packages for Windows (urgh!) and Ubuntu, both on 32-bits.

So to do this I had some choices:

  1. Install Ubuntu 32-bits on my machine;
  2. Install a virtual machine with Ubuntu 32-bits
  3. Install a chrooted 32-bits enviroment
  4. Look for another job; or
  5. Search on the web for someone who had made it and go through that.

With the fifth option in mind, I found an excelent post by Tomi Ollila, who solved this same problem, but on Fedora. I was almost there :(

The great thing is, ArchLinux is great. Not just by itself, but with its community.

Following the instructions from Tomi post, I realized that just a few packages are missing on an usual ArchLinux instalation. So, to keep the Tomi instructions reliable on ArchLinux, I just had to install debootstrap from AUR, it replaces the step 3 of Tomi’s post.

wget http://aur.archlinux.org/packages/de/debootstrap/debootstrap.tar.gz
tar -xvf debootstrap.tar.gz
cd debootstrap
makepkg
sudo pacman -U debootstrap-*-any.pkg.tar.xz
cd -

Between steps 14 and 15, I use the command below to prevent PERL messages about locale:

locale-get en_US.UTF-8

Continue with Tomi instructions and be happy.

Starting Tizen IDE

Tizen IDE

Well, that’s it. It’s possible to have the Tizen SDK running on your ArchLinux x64 machine. And now, to start your Tizen development, you can use Iscaro’s blog as a starter guide.

Tizen Emulator

Good night and good luck.

Written by mello

June 11, 2012 at 4:51 pm

Posted in Arch Linux, Tizen

Tagged with , ,

A simple application for Elev8

with 3 comments

I’m still quite uncertain about the best way to post an entire application here, so I’ll put a brief introduction and well commented code (from my point of view, of course). Should you have any doubts at the end of this post, please ask it in the comments and I’ll try to answer it. Thanks.

The application

This application will get some images from the web and will show them. Below are shown some expected behaviors:

  • When it starts, a local image will be shown.
  • When Load button be pressed, the application will request a list of images from infinigag.com and will show the first image from the list.
  • The Next and Previous buttons navigate through the image list and are enabled according to it.
  • The Exit button close the application.

The preview

The code

/* Load the Elev8 modules to be used */
var elm = require('elm');
var XMLHttpRequest = require('http').XMLHttpRequest;

/* Create a request object */
var list_request = new XMLHttpRequest();

/* Maintain the list of images and the index of image being shown */
var data = null;

/* When the list request is finished, this function will be called */
list_request.onreadystatechange = function() {

    /* Create a new list of data */
    data = {index: 0, pics: []};

    /* Since the JSON module is not ready, I'll use regex
     * to extract the image name from received JSON file */
    var reg = new RegExp('"big":"([^"]*)"', 'g');

    /* For all images referenced on JSON file received */
    while ((pic = reg.exec(this.responseText))) {

        /* Fill data with images reference */
        data.pics.push(pic[1].replace(/\\/g, ''));
    }

    /* Enable load button */
    toolbar.load.enabled = true;

    /* Show a image from the list */
    show(0);
}

/* According to index, show the prev, next
 * or current image from the list */
function show(index) {

    /* Returns if there is no data */
    if (!data) return;

    /* Update the image index */
    data.index += index;

    /* Enable/Disable the Next and Previous
     * buttons according to the list */
    toolbar.prev.enabled = (data.index > 0);
    toolbar.next.enabled = (data.index < (data.pics.length - 1));

    /* Create a request object */
    var image_request = new XMLHttpRequest();

    /* When a request of image finishes, this function will be called */
    image_request.onreadystatechange = function() {

        /* Update the image with the image received */
        picture.file = image_request.responseText;
    }

    /* Make a image request according to the selected index */
    image_request.open('GET', data.pics[data.index]);
    image_request.send();
}

/*                     About declarations
 *
 * - Each method elm.Method() receives as parameter a object with
 *   modifiers and it returns a full declaration of the GUI element.
 * - This declaration can be used to realise a GUI element or to
 *   attach it to another declaration.
 * - The relationship between widgets and containers are given
 *   by nesting widgets on container elements attribute.
 */

/* As we'll not use window declaration in another place, it will
 * be passed directly to the 'realise' method. */
var win = elm.realise(elm.Window({
    /* On declaration of a container or widget, attributes
     * are defined as in any other javascript object */
    title: 'Infinigag',
    width: 320,
    height: 480,

    /* elm containers objects have the 'elements' attribute
     * that is used to attach widgets on it */
    elements: {
        bg: elm.Background({
            weight: {x: 1.0, y: 1.0},
            align: {x: -1.0, y: -1.0},
            resize: true,
        }),

        /* Containers can be attached to others containers */
        box: elm.Box({
            weight : {x: 1.0, y: 1.0},
            resize : true,
            elements: {
                picture: elm.Photocam({
                    weight : {x: 1.0, y: 1.0},
                    align : {x: -1.0, y: -1.0},
                    zoom_mode: 'auto-fill',
                    file : elm.datadir + "data/images/sky_01.jpg",

                    /* Callbacks are defined as any other attribute */
                    on_click: function() {

                        /* Change zoom_mode when picture is clicked */
                        this.zoom_mode = (this.zoom_mode == 'auto-fill') ?
                                          'auto-fit' : 'auto-fill';
                    }
                }),
                toolbar: elm.Box({
                    horizontal: true,
                    elements: {
                        prev: elm.Button({
                            label: 'Prev',
                            enabled: false,
                            on_click: function() {

                                /* Show previous picture */
                                show(-1);
                            }
                        }),
                        next: elm.Button({
                            label: 'Next',
                            enabled: false,
                            on_click: function() {

                                /* Show next picture */
                                show(1);
                            }
                        }),
                        load: elm.Button({
                            label: 'Load',
                            on_click: function() {

                                /* Request the list of images */
                                list_request.open('GET', "infinigag.com/api.json");
                                list_request.send();

                                /* Disable load button */
                                this.enabled = false;
                            }
                        }),
                        exit: elm.Button({
                            label: 'Exit',
                            on_click: function() {

                                /* Exit from application */
                                elm.exit();
                            }
                        })
                    }
                })
            }
        })
    }
}));

/* Just alias to the realised widgets */
var toolbar = win.elements.box.elements.toolbar.elements;
var picture = win.elements.box.elements.picture;

Written by mello

June 4, 2012 at 7:59 pm

Posted in Elev8

Tagged with ,

%d bloggers like this: