Le SDK QML Freebox est sorti. Installation et premiers pas

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.

J’avais déjà parlé de l’utilisation de Qt et du QML dans les Freebox :

Pour rappel, le QML est un langage de programmation relativement simple permettant de créer des interfaces graphiques. Il est associé avec le JavaScript pour la partie comportementale des interfaces.

L’utilisation du SDK Freebox ne présente pas de difficulté particulière par rapport a l’installation standard de Qt (voir : Installation et premiers pas avec Qt 5.5). Je vais décrire rapidement dans cet article l’installation du SDK Freebox et la création d’une application par défaut.

Je n’habitude plus en France, donc je ne peux pas présenter le déploiement de l’application sur Freebox. Par contre, j’avais testé cela lors de la journée de développement organisée par Freebox l’année dernière, cela ne pose pas de problème particulier. IL faut simplement activer le mode développeur sur la Freebox.

Remarque préliminaire

Le SDK est disponible uniquement pour Windows et Linux. Il contient :

  • l’éditeur Qt Creator
  • le framework Qt correspondant au système (version 5.5)
  • le plugin Freebox pour Qt Creator (pour créer des applications Freebox directement dans Qt Creator)

Le SDK est dédié la création d’application sur Freebox, si vous souhaitez utiliser Qt pour d’autres plateformes, il est préférable (voire indispensable ?) d’installer Qt a cote en suivant la procédure habituelle (voir : Installation et premiers pas avec Qt 5.5).

Installation

Pour commencer, il faut télécharger le SDK sur la page suivante : http://dev.freebox.fr/freebox-qt/.

Screenshot

Site du SDK Freebox, ou l’art du minimalisme.

Une fois que vous avez téléchargé le SDK, il faut le lancer. Sur Windows, le SDK est un fichier exécutable, il suffit de cliquer dessus pour lancer l’installation. Sous Linux, il faut dans un premier temps rendre le fichier exécutable, via le menu « Propriétés » ou en utilisant la commande « chmod +x ~/Downloads/FreeboxQtInstallerLinux64.run » (adaptez le chemin si nécessaire).

Screenshot-1

La première étape de l’installation est de choisir le dossier d’installation. Vous pouvez conserver le chemin par défaut si vous le souhaitez.

Screenshot-2

Il faut ensuite choisir les composants a installer. Sous Linux, je vous conseille d’installer au minimum :

  • libFbxQml : le SDK QML proprement dit ;
  • Freebox Qt-Creator Plugin : le plugin pour Qt Creator
  • Desktop gcc 64-bit : le compilateur C++
  • Qt Creator : l’éditeur fournit avec Qt.

Les autres modules sont optionnels (et il faut vérifier s’il sont utilisables sur Freebox ou non, en particulier les modules 3D). Par défaut, j’ai tout installé sur Linux.

Screenshot-3

Pour Windows, il existe plusieurs versions de Qt : avec le compilateur MingW et avec le compilateur de Visual Studio. Pour la Freebox, cela n’a pas d’importance. Par contre, pour simplifier l’installation, il est préférable d’installer la version MingW. Pensez-bien à installer la version de Qt pour MinGW (dans Qt > « MinGW 4.9.2 32 bit ») ET le compilateur MinGW (dans Qt > Tools > « MinGW 4.9.2 »). Voir l’image suivante :

freebox-win

Il faut ensuite accepter la licence d’utilisation de Qt.

Screenshot-4

Et le SDK est prêt a être installé.

Screenshot-5

Le temps de téléchargement et d’installation dépend de votre connexion internet et de votre ordinateur.

Screenshot-6 A la fin de l’installation, vous pouvez lancer Qt Creator.

Screenshot-7Premiers pas

La procédure pour créer une application Freebox ne présente pas non plus de difficulté particulière. Tout est pris en charge par Qt Creator.

Dans la page d’accueil de Qt Creator, cliquez sur le bouton « Nouveau projet ».

Screenshot-8 La création de projets passe par un assistant, ce qui permet de créer automatiquement un projet minimal fonctionnel. Choisissez un projet « Freebox » puis cliquez sur « Suivant ».

Screenshot-9 Il faut choisir ensuite le répertoire dans lequel sera créé le projet. Pour éviter d’avoir des projets n’importe ou, je vous conseille de créer une répertoire spécifique pour tous vos projets Freebox. (Pour cet article, j’ai créé le projet directement sur le Bureau, ne faites pas comme moi).

Screenshot-10 Il faut ensuite choisir le type de projet par défaut que vous souhaitez créer. Il existe trois types de projets par défaut (voir plus bas pour les captures d’écran de chaque projet) :

  • « Minimal Project » : projet minimal, constitue d’un fond d’écran sombre et d’un texte en blanc ;
  • « Freebox stacked application example » : application contenant quelques éléments de base de l’interface utilisateur Freebox ;
  • « Settings entry point » : pour une page de préférence (remarque : le projet ne fonctionne pas chez moi, il faut que je regarde cela plus en détail).

Screenshot-11

Screenshot-12

Screenshot-13La page suivante permet  d’entrer une description de l’application. Je n’ai pas testé, mais il est fort possible que cette description apparaisse dans le menu Application de la Freebox. Cliquez sur « Terminer » pour créer le projet.

Screenshot-15Plusieurs fichiers sont crees par l’assistant :

  • le fichier « fbxproject » (Freebox Project ») contient la description du projet (les fichiers de code, les images, etc) ;
  • le fichier « manifest.json » contient la description de l’application, qui est utilisée par la Freebox ;
  • le fichier « main.qml » qui contient le code QML de l’application.

Screenshot-16

Le QML n’est pas un langage très compliqué. Si on regarde un peu ce code, on comprend facilement :

  • que l’on crée une application ;
  • qui contient un rectangle de couleur noir ;
  • et le texte « Rock’n Roll » en blanc.

Pour lancer l’application sur l’ordinateur, vous pouvez cliquez directement sur le triangle vert en bas a gauche.

Screenshot-17

L’application « Minimal Project »

Screenshot-18

L’application « Freebox stacked application example »

Pour terminer

Pour avoir un aperçu rapide des fonctionnalités du SDK Freebox, vous pouvez consulter mes articles précédents sur le sujet (articles Freebox) et consulter la documentation du SDK (libfbxqml).

Pour le langage QML, je vous renvoie a mon livre sur le sujet (Créer des applications avec Qt 5 – Les essentiels), au livre QmlBook ou a la documentation de Qt.

Si vous testez ce SDK, n’hésitez pas a commenter, pour donner vos impressions.

Publicités

15 commentaires sur « Le SDK QML Freebox est sorti. Installation et premiers pas »

  1. Salut à toi !
    Actuellement je regarde ce qu’il est possible de faire sur le SDK de la Freebox.
    Je le trouve particuliérement complet mais je me pose quelque questions.

    Pour la partie développement, comment sont déclaré en QML les déclaration du style if.

    Je développe du C++ et cherche juste à m’intéresser un petit peu au QML.

    Merci d’avance !

  2. Quelle est la procédure pour déployer l’application sur la Freebox Revolution? Je suppose que c’est possible puisqu’il y a un mode développeur dans le nouveau menu du Freebox Player. Mais je n’ai pas encore trouvé comment faire pour y exécuter l’appli de test. Et vous?

    1. J’ai trouvé, il faut choisir le Freebox Player dans le kit de compilation dans Qt Creator ( menu Compiler), Bon, ça lance l’appli sur le Player mais je n’ai pas encore trouvé comment débuguer….

      1. Pour le lancement sur la Freebox, j’en avais parlé dans l’article sur les devs days. La Freebox est effectivement reconnue comme un périphérique, via le réseau.

        Pour le débug, pas sur que ça soit possible directement sur la Freebox. Lorsque j’avais testé le SDK Freebox aux devs days, j’avais eu des problèmes (élément QML ImageParticule non pris en charge, limitation dans la taille des images), mais sans comprendre le pourquoi. Il n’était pas possible d’avoir les messages de debug (j’avais résolu le problème grâce aux développeurs de Free qui étaient présents).

        Donc : faudra tester au maximum avant déploiement. Et en cas de problème, poser des questions aux développeurs.

    1. Bonjour. Vérifies dans la configuration de ta Freebox son adresse IP (au cas où, mais je n’ai crois pas trop). Fais également un ping pour tester la connexion. Peut être un problème de connexion, essaies en te connectant directement avec un câble.

      1. Ca fonctionne de nouveau. Je ne sais pas pourquoi le plugin Qt Creator essaye parfois de trouver le répertoire pub/devel en 254. Là, ça fonctionne, et le répertoire est trouvé en 192.168.1.35

  3. Bonjour, tout d’abord merci pour ces precieux tutos.
    J’ai un soucis lorsque je selectionne ma freebox, il ya une erreur au niveau de import fbx.application 1.0 « QML module not found ».
    Je précise que c’est uniquement quand je choisis le kit freebox
    merci pour vos lumières

  4. Merci pour cet excellent How-To, il y atres peu de documentations sur ce nouveau firmware. De mon coté, après plusieurs essais,ca compile, ca simule correctement sur le PC, mais impossible de déployer sur freebox (activee en mode developpeur), la plateforme n’apparait pas dans la selection de Kit (je suis le seul d’après les commentaires) , je n’ai que « deploy locally ». Est-ce que ca apparait automatiquement ?ou faut-il créer le device et le Build Kit manuellement ? pb de firewall qui empecherait une detection automatique (elle pinge bien) ?

  5. Le kit est simplement la configuration de la compilation, donc rien a voir avec les problèmes de device. Normalement, le device apparaît automatiquement, c’est le plugin Freebox qui interroge le réseau pour avoir la liste des périphériques compatibles et les affiche.

    Il existe un script Python pour déployer manuellement une application (https://github.com/fbx/freebox-dev-utils/blob/master/bin/fbx-qml-run). Testes peut être avec lui. Tu peux peut etre aussi le modifier pour qu’il t’affiche plus d’information et pourquoi il ne trouve pas la Freebox.

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