Programmer la FreeBox en QML

Pour faciliter l’entraide sur le SDK Freebox, QtFr a créer un forum dédié et un wiki. La question maintenant est de savoir comment utiliser au mieux ces outils.

L’idéal serait de mettre en place une page indiquant les fonctionnalités supportées et celles bridées.
J’ai lancé une discussion, pour avoir vos avis et commentaires, sur comment faire cela : Support QML Freebox.

Free fournit depuis des années des outils de développement pour créer des applications sur Freebox (Elexir). L’interface graphique de la Freebox Révolution a été développée en QML, mais Free avait annoncé à l’époque qu’il ne serait pas possible de développer en QML, excepté pour les partenaires de Free (voir la discussion).

Cette situation en enfin évoluée, Free a annoncé la sortie du SDK pour développer en QML sur Freebox (voir l’annonce officielle).

Qt Quick et le QML

Ceux qui suivent ce blog connaissent déjà probablement Qt, Qt Quick et le QML. Voici un petit résumé, pour les autres.

Qt est une bibliothèque de développement multiplateforme, qui fournit de nombreux services (réseau, base de données, XML, etc.) Elle est très connue des développeurs C++ pour la création d’interfaces graphiques.

Depuis la première version en 1995, Qt a beaucoup évolué. L’une des dernières évolutions majeures est la création d’un module de création simplifié d’interfaces graphiques, pour éviter la lourdeur du C++. Ce module s’appelle Qt Quick et se base sur deux langages :

  • le langage déclaratif (le HTML est un exemple de langage déclaratif) QML pour décrire les composants de l’interface ;
  • le langage de script JavaScript pour définir le comportement de l’interface.

Par exemple, un code QML ressemblera à ça :

import QtQuick 2.0

Rectangle {
    width: 500; height: 500
    Rectangle {
        x: 50; y: 50
        width: 300; height: 300
        color: "lightblue"
    }
    Rectangle {
        x: 150; y: 150
        width: 300; height: 300
        color: "lightgreen"
    }
}

Ce code affichera l’interface suivante :

Exemple d'interface QML

Exemple d’interface QML

Si vous souhaitez d’autres codes d’exemple QML, les codes de mon livre Créer des applications avec Qt 5 – Les essentiels sont disponibles sur GitHub.

Le QML est un langage relativement simple à apprendre (en particulier parce qu’il a été conçu pour faciliter la prise en main par les designers d’interfaces et l’interaction avec les développeurs). Je ne développerais pas plus le langage QML dans les tutoriels, mais me focaliser uniquement sur les particularités du développement QML sur Freebox.

En termes de performances, le QML et le JavaScript sont optimisés au maximum (utilisation de l’accélération matérielle via OpenGL, utilisation d’un scenegraphe pour l’affichage, compilation du code via un compilateur JIT, etc.)

La bibliothèque

Pour le moment, seule la bibliothèque fbx (Freebox QML Library) est disponible. Celle-ci contient les éléments QML utilisables dans les applications que vous créerez pour la Freebox. Le SDK complet n’est pas disponible, il n’est donc pas possible de tester vos applications sur la Freebox.

Comme fbx contient des fonctionnalités disponibles uniquement sur Freebox, il ne sera pas non plus possible de tester toutes les fonctionnalités sur Desktop. Par contre, comme elle est développée uniquement en QML, elle est utilisable sur Windows, Linux ou Mac (mais je n’ai testé qu’avec Windows).

La documentation indique que fbx propose les fonctionnalités suivantes :

  • le look-and-feel Freebox (widgets, présentation à l’écran, etc.),
  • des helpers pour les protocoles usuels (HTTP, JSONRPC, OAuth1.0a/2.0, Rest, FreeboxOS),
  • la gestion des paramètres utilisateurs spécifiques aux applis,
  • l’accès aux décodeurs audio/video,
  • utiliser le matériel spécifique de la box (pointeur, etc.),
  • l’interaction entre les applications (ouverture d’URLs, etc.),
  • l’accès aux fichiers du Freebox Server à travers les API de FreeboxOS.

Ceci sera intégré par le système qui proposera à l’utilisateur d’ouvrir les resources concernées dans l’application.

La documentation indique également quelques limitations (« au lancement ») :

  • il ne sera pas possible d’utiliser des modules d’extension en code natif,
  • les flux TV, les films de VoD sont indisponibles aux applications pour l’instant,
  • il n’y a pas de moyen aisé de réaliser une scène en 3D,
  • il n’y a pas de moyen aisé de réaliser des bruitages.

Bien sûr, je ne fais que citer la documentation, je n’ai pas pu tester ces fonctionnalités.

Tester la bibliothèque fbx

A priori, pour développer sur Freebox, il faudra installer un firmware spécifique pour les développeurs. Il faudra également installer un module dans Qt Creator pour déployer les applications sur la Freebox et le store.

Pour le moment, pour tester la bibliothèque fbx, il faut simplement télécharger l’archive libfbxqml et la décompresser. Lancer ensuite Qt Creator et créer un projet de type « Interface graphique Qt Quick ». Si vous n’avez jamais utilisé Qt Creator (ou si vous avez des problèmes d’installation de Qt), voir ma vidéo Installation et premier pas avec Qt 5.2 sur Windows.

Ensuite, pour pouvoir utiliser la bibliothèque fbx, il faut indiquer à Qt Creator où trouver les fichiers. Pour cela, ouvrez le fichier qmlproject et ajoutez le répertoire de libfbxqml dans importPaths. Le chemin doit correspondre au répertoire contenant le fichier libfbxqml.pro. Par exemple, chez moi, j’ai ajouté (j’ai renommé le répertoire dans lequel j’ai décompressé l’archive) :

importPaths: [ "G:/Developpement/Freebox/libfbxqml" ]

Pour terminer, il faut importer les modules de fbx dans les fichiers QML. Par exemple, pour utiliser un élément QML de type Application, il faut ajouter l’importation :

 import fbx.application 1.0

La documentation contient quelques codes d’exemple :

Les fonctionnalités de la bibliothèque fbx

  • le module interface utilisateur propose de nouveaux éléments graphiques QML, au look Freebox : contrôles (bouton, combobox, menu, dialogue, page de login, etc.)
  • le module réseau (asynchronous library) pour la communication.
  • le module

Pour terminer, voici un exemple de code QML utilisant fbx (télécharger) :

import QtQuick 2.2
import fbx.ui.dialog 1.0
Alert {
    title: "Un exemple de dialogue"
    text: "Ceci est un exemple de dialogue fournit
        par la bibliothèque fbx"
}

Ce qui permet d’afficher :

Dialogue de type

Dialogue de type « Alert » de la bibliothèque fbx

Je reviendrais dans des prochains articles sur les détails de fbx.

Advertisements

22 commentaires sur « Programmer la FreeBox en QML »

  1. Bonjour,
    J’arrive à complier l’exemple ‘Rock’ mais lorsque je veux executer j’ai une erreur :
    qrc:///main.qml:2 module « fbx.application » is not installed
    Comment puis je installer ce module sur mon Ubuntu (si besoin), je débute en dev.
    Merci pour l’aide.

    1. « Compiler » ? Cela veut dire que tu n’as pas lu correctement ce que j’ai écrit. J’ai dit de créer un projet de type « Interface graphique Qt Quick » et tu as probablement créé un projet de type « Application Qt Quick » 😉

      Le premier type de projet est un projet uniquement QML, qui contient par défaut 1 fichier .qmlproject et un fichier .qml. Ce n’est pas réellement une application, c’est en fait l’application qmlscene qui est lancé et qui affiche cette interface QML. Ce type de projet n’a pas besoin d’être compilé et il faut utiliser importPaths dans le .qmlproject pour ajouter le répertoire de la lib fbx (comme expliqué dans le tutoriel).

      Le second type de projet est une application C++ (donc qui n’a pas besoin de l’application qmlscene), qui contient de nombreux fichiers (un .pro, un main.cpp, un qml.qrc, un main.qml, etc.) Ce type de projet doit être compilé (c’est un programme C++), donc il ne pourra pas être déployer sur Freebox (Freebox ne permettra d’utiliser que les applications QML, pas les applications natives en C++).

      Pour ajouter la lib fbx dans ce type de projet, il faut ajouter 2 lignes. Dans le fichier .pro, il faut ajouter le chemin vers fbx dans la directive QML_PATH_IMPORT (par exemple QML_IMPORT_PATH += « G:/Developpement/Freebox/libfbxqml-5ed909ecf/ » chez moi). Cette directive permet à Qt Creator de trouver cette lib uniquement pour la complétion du code. Il faut également ajouter dans le fichier main.cpp la ligne suivante : engine.addImportPath(« G:/Developpement/Freebox/libfbxqml-5ed909ecf »); juste avant la ligne qui commence par engine.load. Cette ligne permet au moteur QML de trouver la lib fbx lors de l’exécution.

      J’espère que ça sera plus simple avec ces explications. En tout cas, je conseille de créer un projet de type « Interface graphique Qt Quick », ça sera compatible avec la Freebox et surtout, vous ne serez pas embêté avec le C++ 😉

      Bon courage

      1. Bonjour,
        je n’ai malheureusement pas pu assister à la DevDays du 13 septembre.
        je suis un informaticien à la retraite et j’essaye de comprendre les développements pour la freebox.
        j’ai téléchargé et installé QT ainsi que la librairie de freebox
        je regarde l’exemple Rocknroll
        a la création du projet dans nouveau/applications, je n’ai pas la possibilité de choisir freebox
        pourquoi?
        avez vous des exemples pour la freebox?
        Cordialement
        Pierre Chevalier

      2. Bonjour

        Le SDK actuel n’est pas complet, il contient que la bibliothèque libfbxqml, pas le plugin pour Qt Creator. Donc il est normal que tu ne puisses pas créer un projet Freebox (de toute façon, il faudra attendre le prochain fireware pour tester un projet QML sur Freebox).

        Le but est de pouvoir tester une partie des fonctionnalités de libfbxqml avant la sortie officielle (sachant que de toutes façon, certaines fonctionnalités de libfbxqml ne fonctionne pas en dehors d’une Freebox)

  2. Argh… Effectivement j’avais mal lu.
    J’ai donc généré le projet en mode interface graphique mais il ne trouve pas les ressources freebox (module qml non trouvé) alors que j’ai bien renseigné le chemin de la librairie dans le importPaths (et l’environnement va jusqu’à m’indiquer qu’il ne l’a pas trouvé à l’emplacement spécifique).
    J’ai bien vérifié, le module est bien présent et les ressources aussi.
    Ma plus grosse erreur venait d’avoir voulu faire une appli et non une interface graphique, je vais creuser pour comprendre pourquoi il ne trouve pas les ressources alors qu’il a le bon chemin.

    1. Mea culpa, j’avais mal décompressé l’archive (si, si, c’est possible).
      Le code fonctionne parfaitement et l’explication est très claire, j’ai hâte de voire d’autres posts sur le sujet car pour le moment il y a peu d’exemples ou d’explication sur l’utilisation de cette ‘nouvelle’ API.
      Je me mets tout de suite en test de celle-ci.
      Encore merci de m’avoir dépanné.

  3. Bonsoir,
    Dans l’exemple ‘Hello World’ proposé sur le site de Free (http://dev.freebox.fr/devdays/tutoriel/rocknroll) il est question d’executer le code sur son Freebox player ‘Ensuite, vous pouvez exécuter ce code sur votre Freebox Player en sélectionnant votre box dans le menu en bas à gauche de Qt Creator.’
    Je dois mal regarder car je ne vois rien en bas à gauche qui semble pouvoir transférer mon exemple sur mon Freebox player.
    Est ce possible de tester ses applis sur son Freebox player ? Si oui comment ?
    Merci pour l’info si vous l’avez.

    1. (Je ne sais pas pourquoi, votre commentaire a été mis en « indésirable »)
      Comme indiqué dans mon article, le SDK n’est actuellement pas complet, il manque en particulier les outils intégrés dans Qt Creator pour faire le déploiement d’application (vers la Freebox et le store). Donc pour le moment, ce n’est pas possible de tester sur Freebox player. On aura peut être plus d’information après la journée des DevDays du 13 septembre (en espérant que ceux qui y seront fasse des retours, je n’y serais pas).

      1. Finalement, j’étais à la journée DevDays hier et j’ai eu pleins d’informations. Je suis entrain de préparer un compte-rendu, qui sera publié dans la semaine. Et oui, le SDK doit être publié à la sortie de Qt 5.4, qui était prévu fin octobre. Par contre, la version alpha de Qt 5.4 est sortie la semaine dernière, avec plus de 15 jours de retard sur le planning initial, la sortie finale de Qt 5.4 (et donc du SDK) est actuellement reportée mi novembre.

  4. Bonjour !
    Super article merci 🙂
    Par contre j’ai un question concernant l’import des éléments de la lib: comment connaitre le numéro de version ? par exemple pour import « fbx.ui.layout.Background » il souhaite un numéro ensuite (de la même forme que fbx.application 1.0), et même en essayant des valeurs random c’est pas top si je dois tout essayer pour trouver le bon.

  5. Bonjour,
    merci pour les articles faits sur le sdk de la freebox, car apparemment il n’y a pas beaucoup d’infos qui trainent sur internet.
    J’essaye de faire mumuse (je débute en qtquick/qml) un peu et j’ai réussi 2/3 trucs mais j’ai bien du mal à comprendre le fonctionnement de tout ça…
    Bref, je voulais voir les tutos du jeu 2018 et pong mais les liens donnés n’affichent que des pages blanches… connaissez vous un endroit où pouvoir les consulter ?

    1. Malheureusement, non. Ces projets étaient sur la page des devdays et semblent avoir été supprimés.

      Si c’est des projets d’exemple sur QML que tu recherches, il y a en plusieurs dans les exemples de la doc de Qt. Cf la page d’accueil de Qt Creator, tu as des boutons « Examples » et « Tutorials ». Fais une recherche sur « QML ».

      1. Merci pour ta réponse et dommage 😦
        J’avais déjà regardé dans qtcreator, mais dans celui livré avec le sdk il n’y a aucun exemple (j’ai pourtant tout installé…) et je cherchais des exemples un peu plus complexe qu’un « hello world » spécifique à la freebox.
        Côté langage, tu me confirmes qu’il faut regarder du côté qml et javascript plutôt que qml et c++ pour la freebox ?

    1. Bonjour. Je ne saurais pas vous repondre. Le mieux est de poser la question sur le forum de QtFr.org (il y a un forum dédié pour Freebox) et attendre la réponse des développeurs de Free.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s