joliclic blog

Aller au contenu | Aller au menu | Aller à la recherche

mercredi, septembre 22 2010

mozcards: update 1.0b2

  • en version
  • version fr

english version

New version of mozcards (a collection of card games), my XULRunner port of the Firefox extension Cards, especially for Maemo.

What's new:

  • The launcher is adapted to Fennec 1.1 and 2. It is simpler, as now Fennec support the -app argument.

    Technically, the new bash script is:

    #!/bin/sh
    CUR_DIR=$(dirname $(readlink -f "$0"))
    if [ -x /usr/bin/fennec ]; then
    /usr/bin/fennec -app "$CUR_DIR/application.ini" $@
    elif [ -x /usr/bin/xulrunner ]; then
    /usr/bin/xulrunner "$CUR_DIR/application.ini" $@
    else
    echo "Error: unable to find Fennec or XULRunner!"
    fi
    

    Note that now the script pass any eventual extra parameters to the real executable ;).

  • The chrome registration is now adapted to Fennec 2 (gecko 2, like Firefox 4), and backward compatible with prior versions.

    Technically, a root manifest is required in the main application folder, wich declare the others manifest. Components need to be declared too. See this link and this one for more precisions.

  • Some new games added :) , with a special set of small cards, because they're need more space.

Download page: http://joliclic.free.fr/mozilla/mozcards/en

version française

Nouvelle version de mozcards (une collection de jeux de cartes), mon port XULRunner de l'extension Cards, pour Maemo.

Quoi de neuf:

  • Le lanceur est adapté pour Fennec 1.1 et 2. Il est plus simple, car maintenant Fennec accepte l'argument -app.

    Techniquement, le nouveau script shell est

    #!/bin/sh
    CUR_DIR=$(dirname $(readlink -f "$0"))
    if [ -x /usr/bin/fennec ]; then
    /usr/bin/fennec -app "$CUR_DIR/application.ini" $@
    elif [ -x /usr/bin/xulrunner ]; then
    /usr/bin/xulrunner "$CUR_DIR/application.ini" $@
    else
    echo "Error: unable to find Fennec or XULRunner!"
    fi
    

    Notez que dorénavant le script passe les éventuels paramètres supplémentaires au réel executable ;).

  • L'enregistrement chrome est maintenant adapté à Fennec 2 (gecko 2, comme Firefox 4), et compatible avec les versions précédentes.

    Techniquement, un fichier manifest racine doit etre déclaré dans le dossier principal de l'application, lequel déclare les autres manifest. Les composants doivent etre déclarés également. Pour plus de précisions, voir ce lien et celui-ci.

  • De nouveaux jeux ont été ajoutés :), avec un set de cartes plus petites, parce qu'ils demandent plus d'espace.

Page de téléchargement: http://joliclic.free.fr/mozilla/mozcards/

jeudi, mars 25 2010

XULRunner on Maemo : part II

  • en version
  • version fr

english version

I continue to play with XULRunner on my N900, after Mozcards, here 2 mini-applications:
JoliStopwatch and JoliTimer.

To remind you, because I have Firefox Mobile (aka Fennec) on my device, I can run XULRunner applications. And it's really easy to create new ones. Moreover, potentially they will run on all platforms where Firefox will be available :) .
I will propose installers for Desktop later (removing mobile specificities), but for now you can install on Maemo 5.
Note that a user reported to me that he have installed Mozcards on its N810 (Maemo 4) simply with no problem.

JoliStopwatch

A simple stopwatch. It's really a minimal application, I think you can use it as a 'Hello World'.
The only (small) subtility is that the needles in SVG are encapsulated in a small XBL.
The theme uses the default system, and it works well.

JoliTimer

An timer (hourglass), with presets manager. A simple application, but a little more consistent. It uses a sqlite database for the presets, with a component in JavaScript to manage them, and a template to display them, and use the Audio elemnt for alarm.
You can set the desired time by dragging the finger on the figures of the watch.
And the list of presets also have kinetics scrolling (reusing InputHandler.js of Fennec, as explained in the Mozcards post).

Its theme does not follow the theme system, but is original (I hope not too 'glossy';))

The only real problem I encountered, is that local OGG files with the .ogg extension seem to have a audio/x-vorbis+ogg mime type on Maemo 5. And this mime type is not supported by the Audio element. I have tried to implement a Stream Converter, but the Audio element doesn't seems to use it. So for the moment, only OGG files with the .oga extension can be used as custom sound for the alarm (wav is available too).

Try

To install, simply download the .deb files on your device, and open them from the file manager. That's all.

The sources are available of course, with my little build system, and with the instructions to build your own. Graphic files sources (SVG created with Inkscape) are also in these sources ;).

Enjoy, and feel free to report me any comments or bugs.

version française

Je continue à jouer avec XULRunner sur mon N900, après Mozcards, voilà 2 appliquettes:
JoliStopwatch et JoliTimer.

Pour rappel, comme j'ai Firefox Mobile (Fennec) sur mon téléphone, je peux y faire tourner des applications XULRunner. Et c'est vraiment facile d'en créer de nouvelles. De plus, potentiellement elles tourneront sur toutes les plateformes où Firefox sera disponible :) .
Par la suite je compte proposer des installeurs pour les versions bureaux (en supprimant les spécificités aux mobiles), mais pour l'instant vous pouvez les installer sur Maemo 5.
Notez qu'un utilisateur m'a rapporté avoir installer Mozcards sur son n810 (Maemo 4) le plus simplement du monde et sans problème.

JoliStopwatch

Un simple chronomètre. C'est vraiment une application minimale, elle peut servir de 'Hello World' je pense.
La seule (petite) subtilité est que les aiguilles en SVG sont encapsulées dans un petit XBL.
Le thème utilise celui par défaut du système, et çà marche bien.

JoliTimer

Un sablier, avec gestion de signets (presets). Une simple application, mais un peu plus conséquente. Elle utilise une base sqlite pour les signets, avec un composant en JavaScript pour la gérer, un template pour l'afficher, et utilise l'élément Audio pour l'alarme.
On peut régler le temps désiré en déplaçant les chiffres de la montre au doigt.
Et la liste des signets a également un scroll au doigt (en réutilisant InputHandler.js de Fennec, comme expliqué dans le billet sur Mozcards).

Le thème par contre ne suit pas le thème du système, mais est original (j'espère pas trop 'sucré' ;) ).

Le seul réel problème que j'ai rencontré, est qu'il semble que les fichiers OGG locaux avec une extension .ogg aient un type mime audio/x-vorbis+ogg. Et ce type mime n'est pas pris en charge par l'élément Audio. J'ai essayé d'implémenter un Stream Converter, mais il ne semble pas pris en compte par l'élément Audio. Donc pour l'instant, seul les fichiers OGG avec l'extension .oga peuvent être utilisés comme son d'alarme personnalisé (wav est également disponible).

Essayer les

Pour les installer, il suffit de télécharger les fichiers .deb sur votre téléphone, et de les ouvrir depuis le gestionnaire de fichier. C'est tout.

Les sources sont bien sûr disponibles, avec mes petits build systemes, et avec les instructions pour construire. Les fichiers graphiques sources (des svg créés avec Inkscape) sont également présents dans ces sources ;) .

Amuser vous bien, et n'hésitez à me rapporter toutes remarques ou bugs.

lundi, mars 15 2010

XULRunner on Maemo : Mozcards

  • en version
  • version fr

english version

I have won an N900, and I have installed Firefox Mobile on it of course.
So I have XULRunner. And that's really cool ;) .

Here's an example, let me introduce Mozcards.

It's an adaptation for Maemo and a XULRunner port of the extension Cards, for Firefox, by Stephen Clavering. A collection of really good patiences (card games).

I found no real license informations in the original sources, so I asked to Stephen and all the contributors (Derek Seabury and Neil Rashbrook) if they're OK for tri-license their code into MPL/GPL/LGPL. And they're accepted :) . Thank you very, very much!

So I can propose to you this version adapted for Maemo. There's a new card theme, inspired of Tango, wich expect to be more readable on the little screen. And some UI improvements for the touchscreen, inspired of Fennec.
The application starts a little slowly (especially the first time), but after the responsiveness is good.

klondike screenshot games choice screenshot


Some technical informations

Let me share some points of this experience, playing with XULRunner on Maemo.

XULRunner is easy

First of all, the XULRunner port was trivial, and the code of Cards rocks ;), it was playable as is.

Guidelines

To create my extension Yummy, I had already looked at the Fennec sources, it's a really good sources of inspiration, and code snippet to reuse. The guidelines and informations for Fennec and little touchscreen devices, available on the mozilla wiki, are precious too.

Theme

For the UI and general theme, I have reused parts of the CSS of Fennec. There're 2 main files to look at, platform.css, for general theming on Maemo, and browser.css for Fennec specific theme.

Popup

Popup windows are not relevant on small devices, instead I used a main stack with some "panels" boxes, wich are hidden/showed upon request, like in Fennec. As all the cards games were already in a stack, it was easy to insert.

Menulist

XUL elements like <menulist> give not the best user experience on small devices, so I reused code of Fennec here too.
The menulist are associated with CSS to a new binding, wich extend the original chrome one. It implement a nice mechanism, the content of the menulist is displayed in some boxes wich looks like a richlistbox, on the fly, and adapted to the small screen. You have just to copy the code of the js objects SelectHelper and MenulistWrapper, and create the appropriate panel <vbox id="select-container"> in your XUL.

Kinetic scrolling

Kinetic scrolling is really easy to implement with some code of Fennec, again.
There's a js file named InputHandler, wich implement an object with the same name. It can handle all elements with a nsISCrollBoxObject available (i.e. scrollbox elements). Fennec initialize it with the box which display the main browser view. But I just initialize it with one of the scrollbox of my window:

var gIH = new InputHandler(document.getElementById("myscrollbox"));            

And that's all!
All scrollboxes of the document have now kinetic scrolling. In particular, the box used to display the menulist contents.
The only modification I made is to deactivate the zoom handling.

Special case: iframe

I display the "about" page in a <xul:iframe>, I wanted kinetics on it, but a iframe box doesn't implement nsIScrollBoxObject, and so InputHandler isn't relevant on it. So I have made a hack. I created a XBL, a stack with the real iframe, and a xul:box over it. And I mimic the nsIScrollBoxObject. The methods in fact pilot the scroll of the contentWindow of the iframe.
I wanted to show the scrollbars for visual information, so I have restyle them. There were 2 choices, minimize them for simple visual information, or render them bigger to be manipulable. I have choosed the latter.

Create an executable

Last point, the executable to launch the application.

The application is launched like this:
pathToXULRunner/xulrunner pathToMozcards/application.ini

Fennec 1.0 on Maemo install 2 packages, Fennec itself, and XULRunner. But there's no link to the XULRunner executable in /usr/bin/.

Fennec 1.1ax on Maemo install 1 package, XULRunner reside in a folder inside the fennec folder. There's no xulrunner executable. But we can use xulrunner-bin instead.

Here the content of my executable 'mozcards', a bash script:

#!/bin/sh

INI=/opt/joliclic/mozcards/application.ini

XULRUNNER=$(find /opt/mozilla/xulrunner*/xulrunner -type f | head -1)

if [ -x "$XULRUNNER" ]; then
$XULRUNNER $INI
else
XULRUNNERBIN=$(find /opt/mozilla/fennec*/xulrunner/xulrunner-bin -type f | head -1)
if [ -x "$XULRUNNERBIN" ]; then
$XULRUNNERBIN $INI
else
echo "unable to find XULRunner!"
fi
fi

The script just try to find the xulrunner executable available, and use the first found.
Any improvement or suggestion are welcome of course.

Try it

Wanna try ?
You can get a deb here, just open it with the file manager on the N900 to install it:

Mozcards page

The sources are available too.

Feel free to report any remarks or bug. Have fun ;) !

version française

Donc j'ai gagné un N900, et j'ai bien sûr installé Firefox Mobile dessus.
Et donc j'ai XULRunner. Et c'est vraiment cool ;) .

En exemple, je vous propose Mozcards.

C'est une adaptation pour Maemo et un port XULRunner de l'extension Cards, pour Firefox, par Stephen Clavering. Une collection de bonnes patiences (jeux de cartes).

Comme je ne trouvais pas d'informations claires sur la licence des sources originales, j'ai demandé à Stephen et aux contributeurs (Derek Seabury and Neil Rashbrook) s'ils acceptaient de tri-licencer leur code en MPL/GPL/LGPL. Et ils ont accepté :) . Merci du fond du coeur!

Je peux donc vous proposer cette version adapté à Maemo. Il y a un nouveau thème, inspiré de Tango, que j'espère plus lisible sur un petit écran. Et quelque améliorations pour les écrans tactiles, inspiré de Fennec.
Le démarrage de l'appli est un peu lente (surtout le 1er), ensuite c'est fluide.

klondike screenshot games choice screenshot

Quelques informations techniques

Voici quelques retours d'expérience pour jouer avec XULRunner sur Maemo.

XULRunner c'est facile

Tout d'abord, porter l'extension sur XULRunner fut trivial, et le code de Cards est vraiement bon, c'était directement jouable.

Généralités

Pour créer mon extension Yummy, j'avais déjà regardé les sources de Fennec, c'est une très bonne source d'inspiration, et de bouts de code à "repiquer". Les lignes directrices (guidelines) et informations pour Fennec et les appareils à écrans tactiles (touchscreen), disponibles sur le wiki mozilla, sont également précieuses.

Thème

Pour l'interface utilisateur et le thème général, j'ai réutilisé des portions des CSS de Fennec. Il y a 2 fichiers principaux à regarder particulièrement, platform.css, pour le thème général à Maemo, et browser.css pour le thème spécifique à Fennec.

Popup

Les fenetre popup ne sont adapté aux petits appareils, à la place j'ai utilisé un élément stack principal avec des boites qui sont cachées/affichées à la demande, comme dans Fennec. Comme les différents jeux de cartes étaient déjà dans un stack, c'était facile de rajouter d'autres éléments.

Menulist

Les éléments XUL comme des <menulist> ne sont pas forcément très pratiques sur les petits appareils, j'ai donc réutilisé du code de Fennec ici aussi.
Les menulist sont associés par CSS à un nouveau bindind (xbl), qui étend celui originel. Il implémente un chouette mécanisme, le contenu des menulist est affiché à la volée dans des boites avec une allure de richlistbox, adapté aux petits écrans. Vous avez juste à copier le code des objets js SelectHelper and MenulistWrapper, et de créer le panneau approprié <vbox id="select-container"> dans votre XUL.

Scroll aux doigts

Le défilement cinétique (Kinetic scrolling), est très facile à implémenter avec du code de Fennec, de nouveau.
Il y a un fichier js nommé InputHandler, qui implémente un objet du meme nom. Il peut prendre en charge tous les éléments qui ont l'interface nsISCrollBoxObject disponible (i.e. éléments scrollbox). Fennec l'initialise avec la boite qui affiche la vue du navigateur principal. Mais je l'initialise juste avec un des scrollbox de ma fenetre:

var gIH = new InputHandler(document.getElementById("myscrollbox"));            

Et c'est tout!
Tous les scrollbox du document peuvent étre dorénavant défiler au doigt. En particulier, la boite qui affiche les contenu des menulist.
La seule modification que j'ai faite et de désactiver la prise en charge du zoom.

Cas special : iframe

J'affiche la page "À propos" dans un <xul:iframe>, Je voulais le défilement au doigt dessus, mais un iframe n'implémente pas nsIScrollBoxObject, et donc InputHandler n'a aucune action. Donc j'ai bidouillé. J'ai créé un XBL, un stack contenant l'iframe réel et un xul:box par dessus. Et j'y simule nsIScrollBoxObject. Les méthodes pilote en fait le contentWindow de l'iframe.
Je voulais afficher les barres de défilement pour une formation visuelle, donc je les ai restylées. Il ya avait 2 possibilités, les minifier pour une simple info visuelle, ou les grossir pour les rendre manipulables. J'ai choisi la seconde.

Créer un exécutable

Dernier point, l'exécutable pour lancer l'application.

L'application est lancée de cette manière :
pathToXULRunner/xulrunner pathToMozcards/application.ini

Fennec 1.0 sur Maemo installe 2 paquets, Fennec lui-meme, et XULRunner. Mais il n'y a pas de lien vers l'exécutable de XULRunner dans /usr/bin/.

Fennec 1.1ax sur Maemo installe 1 paquet, et XULRunner réside dans un dossier à l'intérieur du dossier de Fennec. Il n'ya pas l'executable xulrunner. Mais on peut utiliser xulrunner-bin à la place.

Voilà le contenu de mon exécutable 'mozcards', un script bash :

#!/bin/sh

INI=/opt/joliclic/mozcards/application.ini

XULRUNNER=$(find /opt/mozilla/xulrunner*/xulrunner -type f | head -1)

if [ -x "$XULRUNNER" ]; then
$XULRUNNER $INI
else
XULRUNNERBIN=$(find /opt/mozilla/fennec*/xulrunner/xulrunner-bin -type f | head -1)
if [ -x "$XULRUNNERBIN" ]; then
$XULRUNNERBIN $INI
else
echo "unable to find XULRunner!"
fi
fi

Le script essaie juste de trouver l'exécutable xulrunner disponible, et utilise le premier trouvé.
Toute amélioration ou suggestion est bienvenue bien sur.

Essayer le

Vous voulez l'essayer ?
Vous pouvez avoir un fichier deb là, vous avez juste à l'ouvrir dans le gestionnaire de fichier dans le N900 pour l'installer.

Mozcards page

Les sources sont dispanibles également.

N'hésitez pas à me rapporter vos remarques ou bug. Amuser vous ;) !