Ftk est un framework libre qui permet de créer très simplement des applications en JavaScript pour la Freebox. Par exemple, pour afficher sur l'écran de votre télévision un carré noir positionné à 50×50 pixels par rapport au coin en haut à gauche de l'écran et grand de 100×100 pixels, il suffit de faire cela :

elx.include('Ftk.js'); // On appelle Ftk

Rect({x: 50, y: 50, width: 100, height: 100, color: '000000'}); // On créé notre rectangle

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Mais toute la puissance de Ftk réside dans la clarté de son code et dans l'économie de code qu'il permet (jusqu'à 10× (ou plus) de code en moins !). À gauche, un programme basique créé avec les outils fournis par Free, et à droite, la même chose avec Ftk :

elx.load('evas');
elx.load('ecore');
elx.load('ecore-evas');
ecore_init();
ecore_evas_init();
var evas = ecore_evas_new(null, 0, 0, 720, 480, '');
var surface = ecore_evas_get(evas);
evas_image_cache_set(surface, 10 * 1024 * 1024);
evas_font_path_prepend(surface, '/.fonts/');
evas_font_cache_set(surface, 512 * 1024);
ecore_evas_show(evas);
var background = evas_object_rectangle_add(surface);
evas_object_event_callback_add(background, EVAS_CALLBACK_KEY_UP, function() { ecore_main_loop_quit() }, null);
evas_object_move(background, 0, 0);
evas_object_resize(background, 720, 480);
evas_object_color_set(background, 255, 255, 255, 255);
evas_object_show(background);
var rectangle = evas_object_rectangle_add(surface);
evas_object_move(rectangle, 50, 50);
evas_object_resize(rectangle, 100, 100);
evas_object_color_set(rectangle, 0, 0, 0, 255);
evas_object_show(rectangle);
evas_object_focus_set(background, 1);
ecore_main_loop_begin();
elx.include('Ftk.js');
Rect({x: 50, y: 50, width: 100, height: 100, color: '000000'});
OnKey(Quit);
End();


Ftk permet d'afficher des images, des vidéos, du texte, quelques formes géométriques, de lire des fichiers et des dossiers, de récupérer et d'envoyer du contenu sur Internet, de gérer la télécommande (de la v5, bientôt de la v6), de lire et écrire dans des bases de données, de créer des animations...

30 juin 2011 : Sortie de Ftk 1.0.2, correction de plusieurs bugs et ajout de la méthode destroy().
2 février 2011 : Sortie de Ftk 1.0.1. OnKey() a de nouvelles fonctionnalités, des bugs sont corrigés (support de la vidéo...) et Timer.stop() est implémentée.

25 décembre 2010 : Sortie de Ftk 1.0.0. Des corrections de bugs (probablement, c'est une première version publique) et de nouvelles fonctionnalités (clavier virtuel, support de la télécommande de la v6, et autres) arriveront bientôt dans une prochaine version. Joyeux Noël !
Introduction
Les fonctions globales
Les méthodes communes aux objets graphiques
Les rectangles
Les lignes
Les polygones
Les vidéos
Les images
Le texte
Les minuteries
Les fichiers son
Les requêtes Web
Les tableaux de bases de données
Si vous avez un problème, une suggestion pour améliorer Ftk ou si quelque chose n'est pas clair, n'hésitez pas, allez poser votre question ici.

Pour créer des applications Ftk, commencez par installer ce qui suit :

Si vous utilisez Ubuntu, tapez cette commande dans une console :sudo add-apt-repository ppa:cschieli/freebox-elixir && sudo apt-get update && sudo apt-get install elixirEt tapez votre mot de passe quand on vous le demande.

Si vous utilisez une autre distribution Linux, téléchargez ce script, ouvrez une console, tapez la commande cd suivie d'un espace et du chemin vers le dossier où se trouve le script que vous avez télécharger, tapez la commande sudo ./easy-elixir-v4.0.sh, tapez votre mot de passe quand on vous le demande, et attendez.

Si vous utilisez Mac OS X, suivez ce tutoriel, à partir de « HOW TO INSTALL ELIXIR ON MAC OS X ». Si quelque chose ne marche pas, signalez-le ici. Après, il suffit de taper elixir suivi d'un espace et du chemin vers votre fichier dans une console pour lancer votre programme (ne faites pas attention à tout le blabla qui apparaît dans la console).

Si vous utilisez Windows, Elixir (l'outil de Free permettant d'émuler une application Freebox) n'est pas encore disponible pour votre système. Il faudra exécuter les applications directement sur la Freebox pour les tester, en les transférant via le FTP, comme expliqué ci-dessous (ou alors, prendre ça comme une occasion d'essayer Ubuntu).

Pour tester une application directement sur la Freebox, il suffit de la transférer sur le FTP, et de l'exécuter via le magnéto. Tout est expliqué ici.

Un programme avec Ftk se commence par elx.include('Ftk.js'); (le fichier Ftk.js doit être placé dans le même dossier, sur l'ordinateur aussi bien que sur la Freebox) et finir par End(); . Les objets et les fonctions globales s'appellent de la même façon (FonctionOuObjet(arguments); ou var variable = FonctionOuObjet(arguments);) et commencent toutes par des majuscules. Pour appeler un objet ou une fonction globale qui reçoit plusieurs arguments, il y a deux solutions pour faire passer des arguments :FonctionOuObjet({argument: valeur, autreArgument: autreValeur})Ou bien :FonctionOuObjet(valeur, autreValeur)La première solution est souvent la meilleure car la plus claire, mais la deuxième est parfois meilleure si une fonction ou un objet ne prend pas beaucoup d'arguments et on peut deviner facilement ce qu'ils signifient.

Vous pouvez appliquer facilement plusieurs méthodes (rappel : ce sont les fonctions des objets) à la suite sur le même objet avec cette syntaxe :monObjet.methode(arguments).
autreMethode(arguments).
autreMethode(arguments).
autreMethode(arguments);
Et vous pouvez appliquer une méthode sur plusieurs objets à la fois avec cette syntaxe :Group([unObjet, unAutreObjet, unAutreObjet]).methode(arguments);Pour rappel, pour passer une fonction en argument à une méthode ou à une fonction, on peut faire comme ça :fonctionOuMethode(function() {
    contenu;
});
Ou comme ça :function maFonction() {
    contenu;
);

fonctionOuMethode(maFonction);
Dans cette documentation, les arguments marqués entre crochets [] son facultatifs. Si deux blocs de crochets sont collés, il faut utiliser obligatoirement l'un ou l'autre, si il y a une virgule entre, ce sont deux paramètres facultatifs, et des crochets dans d'autres crochets indiquent que les paramètres du crochet intérieur peuvent être indiqués juste si ceux du crochet extérieur le sont.

Une fois que vous aurez développé une application, vous pourrez l'envoyer sur le FreeStore en l'envoyant sur ce site.

Les fonctions globales

Les fonction que vous pouvez utiliser partout.OnKey([keys], func)func est une fonction qui sera exécutée quand l'utilisateur appuiera sur une touche. Elle peut être appelée plusieurs fois. func reçoit le paramètre key, qui correspond à la touche, selon ceci. Il est également possible de préciser directement la touche (une chaîne de caractère) ou les touches (un tableau avec des chaînes de caractères) qui doivent être appuyées pour que la fonction soit appelée, avec le paramètre keys. Exemple :OnKey('RC/OK', function(key) {
    Print('Vous avez appuyé sur la touche OK.');
});
OnKey() renvoie également un objet, qui a une méthode remove permettant de ne plus appeler func.Print(text)Met ce qu'on lui a donné en paramètre dans la console, si exécuté depuis un ordinateur.End()À mettre systématiquement en dernière ligne d'un programme : attend qu'on appelle Quit(); pour arrêter le programme.Include(file)Inclure un autre fichier .js dans celui-ci. Exemple : Include('fichier.js'); .Quit()Quitter le programme.Size([width, height][ratio])La taille de l'écran : soit vous mettez une taille en pixels, soit vous mettez 16/9 ou 4/3. Par défaut, elle est de 720×480 pixels, soit un écran 16/9 basse définition.Color([r, g, b, [a]][color])Choisir une couleur de fond. Fonctionne comme avec la méthode color() des objets graphiques.Group(tableauDObjetsGraphiques)Détaillé dans l'introduction.LoadDatabase(file)Charge un fichier .db, il pourra ensuite être utilisé dans un objet Table.ReadFile(file)Récupère le contenu du fichier file.Delete(file)Supprimer un fichier.ReadFolder(folder)Récupère le contenu du dossier folder (mettre un point correspond au dossier de votre script, deux points au dossier parent) et l'envoie dans un tableau, chaque case du tableau a les propriétés type, short_name (le nom du fichier sans l'extension) et full_name (le chemin et le nom complet du fichier).Les propriétés globalesBox, qui vaut 'v5', 'v6', 'alice' ou 'pc' selont sur quoi est exécuté le programme. Renvoie autre chose que 'pc' uniquement depuis le FreeStore, pas depuis le magnéto.

Les objets graphiques

Les méthodes communes à tous les objets graphiques.size(width, height)La taille en pixels (width : largeur, height : hauteur).move(x, y)La position en pixels à partir du coin en haut à gauche de l'écran (x : horizontale, y : verticale).color([r, g, b, [a]][color])Soit la notation décimale : trois nombres de 0 à 255 pour le rouge, le vert et le bleu, soit une chaîne de caractère comprenant ces trois ou ces quatre nombres collés sous forme hexadécimale sous la forme '0af5b6' (pour ceux qui savent créer des pages Web, c'est cette notation est utilisée en CSS pour indiquer les couleurs). Ces informations peuvent être calculées par n'importe quel sélecteur de couleurs. Vous pouvez aussi ajouter un quatrième nombre dans le premier cas ou deux autres caractères dans le premier cas pour gérer la transparence.show()Montrer l'objet.hide()Cacher l'objet.destroy()Détruire l'objet.fadeIn()Faire un fondu pour faire apparaître l'objet.fadeOut()Faire un fondu pour faire disparaître l'objet.Les propriétésAccessibles seulement en lecture, pas en écriture. width, height, x et y.

Rect(x, y, width, height, [r, g, b, [a]][color])

Un rectangle. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. x et y : la position, width et height : la taille, r, g, b, a ou bien color : la couleur (fonctionne comme avec la méthode color() des objets graphiques).Exempleelx.include('Ftk.js'); // On appelle Ftk

var monRectangle = Rect({x: 50, y: 50, width: 100, height: 100, color: '000000'}); // On créé notre rectangle

monRectangle.move(200, 200); // On bouge le rectangle à la position 200, 200

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Line(x1, y1, x2, y2, [r, g, b, [a]][color])

Une ligne. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. x1, y1, x2 et y1 : la position des deux points, r, g, b, a ou bien color : la couleur (fonctionne comme avec la méthode color() des objets graphiques).move(x1, y1, x2, y2)Modifier les points de la ligne.Exempleelx.include('Ftk.js'); // On appelle Ftk

var maLigne = Line({x1: 50, y1: 50, x2: 100, y2: 100, color: '000000'}); // On créé notre ligne

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Polygon(points, [r, g, b, [a]][color])

Un polygone. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. points : les points, sous la forme '0,0 0,100 100,100', r, g, b, a ou bien color : la couleur (fonctionne comme avec la méthode color() des objets graphiques).addPoints(points)Ajouter les points points.clear()Supprimer tous les points.remove(point)Supprimer le point point.Exempleelx.include('Ftk.js'); // On appelle Ftk

var monPolygone = Polygon({points: '0,0 0,100 100,100', color: '000000'}); // On créé notre polygone

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Video(x, y, width, height, file)

Une vidéo. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. x et y : la position, width et height : la taille, file : un fichier vidéo, ou bien une chaîne de télévision Freebox ou une chaîne TV Perso sous la forme 'srv://FREEBOX TV/numéro' ou 'tvperso://numéro'.play()Jouer.pause()Mettre en pause.seek(sec)Aller à la seconde sec.onEnd(func)Fonction appelée quand la vidéo est finie.Propriétésposition : la position en secondes, length : la durée en secondes, playing : si la vidéo est en train d'être jouée.Exempleelx.include('Ftk.js'); // On appelle Ftk

var maVideo = Video({x: 50, y: 50, width: 100, height: 100, file: 'mavideo.avi'}); // On affiche notre vidéo

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Image(file, x, y, width, height)

Une image. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. file : le nom de l'image.File(file)Changer le fichier.Exempleelx.include('Ftk.js'); // On appelle Ftk

var monImage = Image({file: 'toto.png', x: 50, y: 50, width: 100, height: 100}); // On affiche notre image

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Text(x, y, width, height, [r, g, b, [a]][color], [font], size, text)

Un bloc de texte. Vous pouvez utiliser sur cet objet les méthodes des objets graphiques. x et y : la position, width et height : la taille, r, g, b, a ou bien color : la couleur (fonctionne comme avec la méthode color() des objets graphiques), size : la taille en pixels, font : la police, facultatif, sera la police par défaut de la Freebox si vous ne renseignez pas ce paramètre, ou une police ttf présente dans le dossier de votre application, text : le texte, vous pouvez y mettre des <br> pour aller à la ligne, utiliser une balise <font="police"></font> pour changer de police, une balise <font_size="xx"></font_size> pour changer la taille de la police en pixels et une balise <color="xxxxxx"></color> pour changer de couleur.textSize(size)Changer la taille de la police en pixels.text(text)Changer le texte.prepend(text)Ajouter du texte au début.append(text)Ajouter du texte à la fin.Exempleelx.include('Ftk.js'); // On appelle Ftk

var monBlocDeTexte = Text({x: 50, y: 50, width: 100, height: 100, color: '000000', text: 'Bonjour', size: 12}); // On créé notre bloc de texte

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Timer(time, func)

Une minuterie. La fonction func est appelée toutes les time secondes (time peut aussi être un nombre décimal ou une fraction), jusqu'à que func renvoie 'stop' ou que la méthode stop soit appelée. Cet objet peut aussi être utilisé comme une fonction.stop()Arrêter d'appeler la fonction.Exempleelx.include('Ftk.js'); // On appelle Ftk

var maMinuterie = Timer({time: 1, func: function() { Print('Je reviens toutes les secondes') }}); // On créé notre minuterie

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Sound(file, [loop])

Un fichier son. file est le chemin du fichier son, loop est si il doit être joué en boucle.onEnd(func)Appeler func quand tout le fichier son a été lu.play()Jouer le fichier son.pause()Mettre en pause le fichier son.playPause()Jouer ou mettre en pause le fichier son, selon l'état.stop()Stopper le fichier son.seek(pos)Aller à la position en secondes pos.Propriétésposition est la position du son en secondes, playing est si le son est en train d'être joué.Exempleelx.include('Ftk.js'); // On appelle Ftk

var monFichierSon = Sound('musique.ogg'); // On charge notre fichier son

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Request(url, callback, post, useragent)

Récupérer le contenu d'une page Web. Vous pouvez ne faire qu'une requête à la fois. url : l'adresse de la page Web, callback : la fonction appelée quand le contenu a été récupéré, le premier paramètre reçu est le contenu de la page, le deuxième, le code HTTP, post : si vous voulez transmettre des donnés POST, mettez-les sous cette forme : {parametre: 'valeur', autreParametre: 'autreValeur'}, useragent : un User-Agent, si vous souhaitez le personnaliser. Attention : la Freebox n'accepte pour l'instant que les pages Web en IPv6. Peu de sites le sont actuellement (vous pouvez vérifier en tapant dans une console ping6 suivi du nom de domaine d'un site), je vous conseille de passer par le proxy qui sert à accéder à des pages IPv4 en IPv6 Sixxs en ajoutant .sixxs.org à la fin de votre nom de domaine.Exempleelx.include('Ftk.js'); // On appelle Ftk

var maRequete = Request({url: 'http://ftklabs.free.fr.sixxs.org', callback: function(data, status) {
    Print(data);
}, useragent: 'MisterBot'}); // On récupère une page

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini

Table(name, [fields])

Une tableau dans une base de données, vous devez préalablement avoir indiqué un .db avec un LoadDatabase(nomDuFichier). Si vous donnez à LoadDatabase le nom d'un fichier qui n'existe pas, il sera créé. Faites Table(nomDuTableau) si vous avez déjà créé votre tableau, Table(nomDuTableau, champs) sinon, les champs étant séparés par des virgules dans une chaîne de caractères.Accéder au contenu de la base de donnéesSi votre base de données n'est pas vide, tout son contenu est accessible sous la forme nomDeLObjet[nombreDeLaLigne][nomDuChamp].add(values)Ajouter les valeurs indiquées dans le tableau values.removeTable()Supprimer votre tableau de la base de données.removeRow(numeroDeLigne)Supprimer une ligne de la base de données.where(conditions)Obtenir un tableau comme celui de l'objet mais avec des lignes où certains champs correspondent à des conditions, la liste des conditions doit être sous la forme nomDuChamp="valeur" AND nomDUnAutrechamp="valeur" OR nomDUnAutreChamp="valeur"Exempleelx.include('Ftk.js'); // On appelle Ftk

LoadDatabase('toto.db'); // On créé le fichier toto.db

var monTableau = Table('tableau', 'pseudo, score'); // On créé notre tableau dans toto.db

monTableau.add(['Marin', '42']); // On ajoute une ligne où le champ pseudo vaut Marin et où le champ score vaut 42

Print(monTableau[0]['score']); // On écrit dans la console la valeur du champ score de la première colonne (vaut 42)

OnKey(Quit); // On dit d'appeler la fonction Quit quand l'utilisateur appuie sur une touche

End(); // On prévient que notre programme est fini