Auteur : anthony

Je crée mon appli Freebox Révolution: jouer avec l’aléatoire sur votre Freebox Révolution

  • Publié le
  • Par

Nous allons cette semaine faire un nouveau jeu sur notre Freebox Révolution. Le but sera simplement de retrouver un nombre qui sera défini aléatoirement. Nous en profiterons pour voir comment créer un dégradé de couleurs pour rendre le fond de notre jeu moins monotone.

L’intégralité du code de l’application

Le détail du code, pas à pas

Pour commencer, il faudra importer QtGraphicalEffects 1.0 qui nous servira uniquement pour notre dégradé. Nous aurons ensuite besoin de deux variables. Un entier pour définir le nombre aléatoire et un booléen. Pour créer un nombre aléatoire, nous allons utiliser la fonction Math.random(). Cette dernière retourne un nombre flottant compris entre 0 et 1 (1 étant exclu), nous le multiplions donc par 10 pour obtenir un nombre allant de 0 à 9.

Nous nous occupons ensuite de notre dégradé pour le fond de notre application. Pour cela nous créons un LinearGradient{}. Nous le faisons correspondre à la taille de notre Application puis nous définissons le début et la fin du dégradé avec start: Qt.point() et end: Qt.point(). Les valeurs contenues dans start et end correspondent au point de début et de fin du dégradé sur l’axe y. Il faudra ensuite ajouter au minimum deux couleurs pour notre dégradé dans gradient :, définir leur position (comprise entre 0.0 et 1.0) et la couleur que l’on veut. Vous pouvez bien sûr essayer de modifier les différents paramètres et créer un dégradé à votre convenance.

Nous allons ensuite créer un Text. Comme à chaque fois, nous lui passons divers paramètres, focus, id, texte, couleur, etc… 

Puis nous vérifions lorsqu’une touche de la télécommande est pressée, si notre booléen est faux et si événement d’appui sur la touche correspond à l’appui sur l’une des touches du pavé numérique avec event.modifiers & Qt.KeypadModifier. Ainsi, nous ne récupérerons que les chiffres de la télécommande. Pour finir, nous vérifierons si la touche appuyée est différente de 16777238 et 16777239, qui correspondent au touche prog + et –. Ces dernières étant prises en compte même avec event.modifiers & Qt.KeypadModifier.

Enfin, nous vérifions si la valeur du nombre aléatoire est égale, supérieure ou inférieure à la touche que nous venons de presser. En fonction, on modifie notre texte et si nous trouvons la bonne valeur, nous passons notre booléen à vrai.

Pour finir, nous vérifions lorsque l’on appuie sur la touche OK si nous avons trouvé notre nombre aléatoire. Si c’est le cas, nous repassons notre variable à faux, nous générons un nouveau nombre aléatoire et nous modifions le texte.

Il ne vous reste maintenant plus qu’à tester ce nouveau jeu sur votre Freebox Révolution.

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : comment déplacer un cercle sur l’écran avec sa Freebox Révolution

Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.

Après notre tutoriel récapitulatif, nous allons voir aujourd’hui un exemple un peu plus simple. Nous verrons cette semaine comment déplacer un cercle sur notre écran et comment le faire changer de couleur, le tout grâce à d’autres cercles.

L’intégralité du code de l’application

Le détail du code, pas à pas

Pour commencer, nous créerons des variables int qui nous servirons pour la position du cercle à déplacer.

Nous ne pouvons créer directement de cercle en QML, il faudra donc les créer de manière détournée. Pour ce faire, nous créerons autant de rectangles que de cercles voulus. Nous leur donnerons chacun un id, une hauteur, une largeur et une couleur. Pour les transformer en cercles, nous utiliserons le radius. Le radius permet d’arrondir les angles d’un rectangle. En définissant celui-ci à la largeur de notre rectangle divisé par deux, cela permet de transformer notre rectangle en cercle. Nous leur définissons ensuite leur position sur les axes x et y.

Le « cercle » que nous souhaitons déplacer devra être le dernier rectangle que nous créerons, pour que celui-ci se trouve au-dessus des autres cercles.
Comme d’habitude, on lui ajoute le focus, un id. Les autres paramètres seront identiques aux cercles créés précédemment. Pour ce dernier, nous définirons sa position en x et y grâce aux deux variables aX et aY que nous avons créé.

Nous déplacerons ensuite celui-ci en fonction de la touche sur laquelle on appuiera. On incrémentera ou décrémentera les variables en fonction de la direction choisie.

Pour finir, on va modifier la couleur de notre cercle si celui-ci est superposé avec un autre. On vérifiera donc à chaque fois que l’on appuie sur la touche OK si les coordonnées X et Y de notre cercle correspondent aux coordonnées d’un des autres cercles. S’il y a une correspondance le cercle prendra la couleur du cercle sur lequel il se trouve.

Il ne nous reste plus qu’à tester notre application sur la Freebox Révolution.

 

Récupérez le code pour le copier dans Qt Creator

 

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : Une visionneuse d’image simple

Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.

Cette semaine, nous vous proposons un tutoriel qui reprendra la plupart des concepts que nous avons vus jusqu’à maintenant. Si vous n’avez pas encore vu tout les tuto précédent, nous vous conseillons d’aller y jeter un œil avant de revenir vers celui-ci. Nous réutiliserons ici notre boîte de dialogue, les images et notre grille de la semaine passé.

L’intégralité du code de l’application

Le détail du code, pas à pas

Nous allons commencer par créer une grille d’éléments. Mais cette fois-ci, nous allons lui passer une image en plus d’un texte. Après avoir mis toutes les images voulues dans le dossier du projet, nous allons créer notre ListModel. Dans chacun des ListElement nous ajouteront un texte puis le nom exact de l’image avec son extension.

Nous allons ensuite reprendre la même GridView que la dernière fois et la modifier un peu. Les paramètres de notre grille seront identiques. Nous ajouterons juste un radius, qui permettra simplement d’arrondir les angles au rectangle qui surligne les éléments. Nous ajouterons ensuite dans chacune des cases, en plus du texte, une image. On définira sa source, puis on la centrera dans la case. On définira sa taille à 50 pixels de large et on conservera son aspect d’origine, ce qui nous permet d’avoir la miniature de l’image dans chacune des cases.

On vérifie ensuite si on appuye sur la touche OK de la télécommande, ce qui affichera le rectangle que nous allons créer. Puis on lui passera le focus, ce qui aura pour effet de ne plus pouvoir se déplacer dans la grille une fois le rectangle afficher.

Nous créerons ensuite ce rectangle que nous pourront faire apparaître ou disparaître et qui nous permettra d’afficher les images en grand. On définit ses différents paramètres, puis on lui met un état HideImage, qui sera défini par la suite.

Dans ce rectangle, nous ajoutons image, nous lui ajoutons un id, nous la centrons dans le rectangle, nous définissons sa largeur à la largeur du rectangle moins 40 pixels. Ce qui permet de laisser une marge avec les bords du rectangle. On récupère ensuite la source de notre image. model.get(grille.currentIndex).img permet de récupérer dans notre ListModel, à l’endroit ou nous somme positionné dans la grille, l’élément img correspondant.

Il est ensuite temps d’animer notre rectangle. Nous lui ajoutons donc deux états, un où l’on affichera le rectangle et un autre où on le fera disparaître.

Nous ajoutons ensuite deux transitions pour ces états, qui nous permettront de passer de l’un à l’autre et d’afficher ou non l’image en fonction.

Puis pour finir, nous vérifions une seconde fois si la touche OK est pressé, pour faire ensuite disparaître l’image et le rectangle. On redonne le focus à la grille pour pouvoir de nouveau nous déplacer et choisir d’autres images.

Il ne reste maintenant plus qu’à tester notre application.

Récupérez le code pour le copier dans Qt Creator

 

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : créer et se déplacer dans une grille

Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.

Après avoir vu comment afficher des images la semaine dernière, nous allons aujourd’hui voir comment créer un petit programme pour votre Freebox Révolution, permettant d’afficher une grille avec différents éléments entre lesquels nous pourrons nous déplacer. Nous verrons une prochaine fois comment interagir de manière plus poussée avec.

L’intégralité du code de l’application

 

Le détail du code, pas à pas

Nous allons commencer par créer la liste des différents éléments à placer dans notre grille. Pour ce faire, nous allons créer une ListModel{}, à qui nous allons assigner un id, puis ses différents éléments avec ListElement{}.

On peut créer comme ça une liste aussi grande que l’on souhaite, il suffit juste de créer autant de ListElement que souhaité. Les éléments peuvent contenir différentes informations, mais nous allons commencer par n’avoir qu’un texte par éléments. Vous pouvez choisir les noms utilisés pour définir les différentes informations contenues dans les éléments. Nous avons ici décidé de l’appeler txtgrid.

Une fois notre liste d’éléments terminée, nous allons créer notre grille avec GridView{}. Nous commençons par lui donner un id, définir les dimensions, lui passer le focus pour pouvoir se déplacer à l’intérieur et centrer notre grille au milieu de l’écran. Nous définissons ensuite la taille des différentes cellules de notre grille. Il faudra faire attention à la taille de vos cellules en fonction de ce que vous souhaitez mettre dedans, certains textes sont ici trop grands pour les cellules crées, ce qui causera quelques soucis à l’affichage. Le highlight permet de surligner l’élément sur lequel nous sommes positionné. On le définit ici avec un rectangle de la couleur que l’on souhaite.

On récupère ensuite notre modèle qui contient tous nos éléments. Puis on crée notre grille avec delegate: Column{} et on créera un Text{} à l’intérieur de celle-ci, à qui on passera le texte de nos éléments. On peut bien sûr modifier les propriétés du texte comme on le souhaite.

Pour finir, nous allons voir comment on récupère la position de notre index sur la grille pour l’afficher. On créé donc un objet Text{} qu’on l’on paramétra à l’envie. Puis dans le texte, nous ajouterons grille.currentIndex, qui récupère la position à laquelle nous nous trouvons dans notre grille.

Vous pouvez maintenant tester votre programme sur votre Freebox Révolution. Vous pourrez constater que, dans notre exemple, certains textes se chevauchent car ils sont trop grands pour la taille des cellules définies.

Récupérez le code pour le copier dans Qt Creator

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : Première manipulation d’images

Toutes les semaines Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est temps de commencer à s’amuser un peu avec sa Freebox.

Cette semaine, nous allons continuer sur un autre exemple simple d’application pour votre Freebox Révolution. Nous allons aujourd’hui voir comment afficher un fichier image, tout en réutilisant des variables, comme nous avons pu voir la semaine dernière.

L’intégralité du code de l’application

Le détail du code, pas à pas

Pour commencer, il faudra placer des images directement dans le dossier de notre application.

On créera ensuite un tableau contenant le nom de toutes nos images avec property variant. Puis on ajoutera un entier qui nous permettra de nous déplacer dans le tableau que l’on a créé précédemment.

On va ensuite créer notre objet image. Si les conditions sont validées, on décrémentera i puis on modifiera la source de notre image en fonction de l’élément de notre tableau pointé par i. On lui rajoute ensuite un id, puis on adaptera l’image à notre écran avec anchor.fill: parent. On gardera ensuite les proportions de l’image pour éviter qu’elle soit déformée avec fillMode: Image.PreserveAspectFit. Pour finir, on définira la source de l’image, qui sera notre tableau, avec source: imgtab[0]. Ce qui correspondra au lancement de notre application à la première image stockée dans notre tableau.

On vérifiera ensuite quelle touche de la télécommande sera pressée. Dans un cas, on vérifiera si on appuie sur la flèche de gauche et si i est strictement supérieur à zéro. Si les conditions sont validées, on décrémentera i puis on modifiera la source de notre image en fonction de l’élément de notre tableau pointé par i.

On vérifiera ensuite si on appuie sur la flèche de droite et, pour éviter de sortir de notre tableau, si i est inférieur à la longueur de notre tableau moins un. La longueur de notre tableau est ici de 4, mais un tableau commençant toujours à la valeur 0, l’indice maximum de notre tableau sera donc 3 et non pas 4. Puis nous finirons par incrémenter i et modifier notre image en fonction de se dernier.

Vous pouvez maintenant tester votre application sur votre Freebox Révolution.

Récupérez le code pour le copier dans Qt Creator

 

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : Première utilisation des variables

  • Publié le
  • Par

Nous allons voir aujourd’hui un nouvel exemple de programme, un peu plus simple que le précédent, où nous utiliserons cette fois des variables. On utilisera ces variables pour modifier le texte ainsi que sa couleur en temps réel.

L’intégralité du code de l’application

Le détail du code, pas à pas

On commencera par créer deux variables. Un nombre entier que l’on déclare avec property int. Et une variable texte avec property string, qu’on initialise avec la phrase "La variable i est égale à :".

On crée ensuite notre texte. Cette fois encore, il lui faudra le focus, pour que l’application puisse répondre lorsque que l’on appuiera sur une des touches de notre télécommande. Puis on déclare le texte à partir de nos deux variables que l’on séparera par un espace.


On définit ensuite la couleur de notre texte en hexadécimal en fonction de notre variable i en ajoutant "#" devant notre variable. On la fera varier de #000 à #999 (reconverti ensuite automatiquement sous la forme #000000). Les centaines correspondant au rouge, les dizaines au vert et les unités au bleu.

Pour finir, nous allons juste incrémenter ou décrémenter i, avec i++ et i–, en fonction du bouton appuyer sur la télécommande et de la valeur de i. On vérifie lorsque l’on incrémente i, si celui-ci est inférieur à 999 et lorsque l’on le décrémente, s’il est supérieur à 0.

Il ne reste maintenant plus qu’à tester le programme sur votre Freebox Révolution.

Vous remarquerez que la couleur ne change pas progressivement du bleu au rouge, mais plutôt par "à-coup", revenant de manière régulière à une couleur plus foncée.
Ceci est dû au fait que la manière dont nous modifions la couleur n’est pas la plus adaptée. À chaque fois que nous incrémentons i, nous modifions la couleur bleue. Puis à chaque fois que la variable change de dizaine, nous modifions la couleur verte. Pour finir à chaque fois que i change de centaine, nous modifions la couleur rouge.

 Récupérez le code pour le copier dans Qt Creator

 

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : une boîte de dialogue au style rétro

  • Publié le
  • Par

Nous avions déjà vu la dernière fois comment créer un projet pour faire son application sur Freebox Révolution. Puis comment modifier la couleur d’un texte en fonction des touches appuyées. Nous allons continuer cette fois encore à interagir avec du texte, mais de manière un peu plus complexe. Nous ferons aujourd’hui apparaître puis disparaître un rectangle contenant notre texte, un peu à la manière des boîtes de dialogue des premiers jeux vidéo.

L’intégralité du code de l’application

Le détail du code, pas à pas

Nous commencerons par créer un rectangle, nous lui donnerons un id et le focus.

Nous souhaitons mettre ici notre rectangle en bas à gauche de notre écran. On utilisera pour ceci anchors.bottom: parent.bottom et anchors.left: parent.left pour ancrer notre rectangle en bas à gauche de son parent (Application). Puis anchors.bottomMargin: et anchors.leftMargin: pour définir à quelle distance (en pixel) du bas et de la gauche du bord de l’écran, nous souhaitons placer ce rectangle. On lui ajoute ensuite une couleur de fond ainsi qu’une bordure blanche de 2 pixel d’épaisseur avec border.color: white et border.width: 2. Pour finir, on lui ajoute un état "hidemessage" qui sera défini un peu plus tard.

On créé ensuite notre texte. Cette fois encore, on lui ajoute un id, un texte à afficher, une couleur et la taille de la police. 

On veut que notre texte apparaisse en haut à gauche de notre rectangle. Pour ce faire, on utilise anchors.top: parent.top, puis anchors.left: parent.left pour ancrer le texte en haut gauche de son parent, le rectangle. On décale ensuite notre texte de 3 pixels du haut du rectangle puis de 6 de sa gauche, pour éviter que le texte et la bordure de notre rectangle se superposent. Pour que notre texte ne sorte pas du rectangle, on utilise wrapMode: Text.WordWrap, puis on définit la longueur et la hauteur du texte en fonction de son parent (le rectangle). Nous faisons "disparaître" ensuite notre texte en mettant son opacité à 0. Nous ne faisons pas réellement disparaître le texte, il devient juste invisible, nous le rendrons visible par la suite.

Jusqu’à maintenant notre rectangle n’avait pas de taille définie. Nous allons donc la définir avec deux états, le premier affichant le rectangle, le deuxième le faisant disparaître.

 

Nous donnerons un nom à chacun des états, "showmessage" pour l’état affichant le message et "hidemessage" pour celui cachant le message. Dans PropertyChanges on choisi donc la cible de ces états, notre rectangle, puis les dimensions voulues. Nous aurons donc un rectangle de 500 pixels par 250 quand on affiche le message et un rectangle de 0 pixel par 0 lorsqu’on le cache.

Il nous faudra ensuite deux transitions pour pouvoir passer d’un état à l’autre. Pour chacune des transitions, nous avons besoin de définir un état de départ et un état de fin avec from: et to: . Nous aurons donc une transition allant de "hidemessage" jusqu’à "showmessage" puis une allant de "showmessage" jusqu’à "hidemessage". 

Nous utiliserons SequentialAnimation pour nos transitions, car cela permet de faire les animations les unes après les autres. Dans le premier cas, on veut d’abord afficher le rectangle en augmentant la largeur et la hauteur de notre rectangle de manière progressive pendant 200 millisecondes. Easing.InOutQuad défini la courbe utilisé pour l’animation (plus de détail ici, en anglais). Ensuite, on affiche le texte en passant son opacité à 1. Pour la deuxième transition, on veut d’abord faire "disparaître" le texte puis rétrécir le rectangle. 

Pour finir, on vérifie sur quel touche de notre télécommande on appuie, pour ensuite effectuer la transition voulu entre les deux états.

Il ne reste plus qu’à tester votre application sur votre Freebox Révolution.

Résultat :

Récupérez le code et le copier dans Qt Creator

Classés sous les catégories : Non classé

Je crée mon appli Freebox Révolution : une première application colorée

  • Publié le
  • Par

Tous les vendredi, Univers Freebox vous propose un tutoriel pour créer simplement une application pour votre Freebox Révolution. Après avoir créé son projet il est désormais temps de commencer à s’amuser un peu avec sa Freebox.

Pour les plus feignants, qui ne souhaitent pas lire toute l’explication de chaque ligne de code, vous pouvez également copier le code qui se trouve en fin d’article, et vous amuser à changer vous même les paramètres pour découvrir différents effets. 

Aujourd’hui nous allons voir un exemple simple où nous afficherons un message sur l’écran de votre Freebox et pourrons interagir de manière simple, grâce à votre télécommande, afin de changer la couleur.

L’intégralité du code de l’application 

Le détail du code, pas à pas

Nous commencerons par rajouter un "id" à l’élément "Text", l’"id" sera le "nom" de ce texte, c’est ce qui permettra d’y faire référence plus tard.

Puis nous rajoutons un focus, que nous passerons à la valeur "true". Ce qui permettra à l’application de récupérer les signaux envoyé par la télécommande.

Les autres paramètres resteront les mêmes, vous pouvez tout de même vous amuser à changer le texte, la couleur ou la taille de la police. 

Nous créerons ensuite deux états. Pour ce faire il faudra créer un tableau d’états, définit par states : [
… ,
…
]

Les crochets définissent les limites du tableau, les états compris à l’intérieur devront être séparés d’une virgule.

On va donc créer ici deux états, State, permettant simplement de changer la couleur du texte. Il faudra donner un nom à chacun des deux états, ici "rouge" et "bleu". On définit ensuite les propriétés à changer avec la cible de ses changement, l’"id" du texte. Puis la propriété à changer, avec propertyChanges. Ici on changera uniquement la couleur. Il suffira de répéter l’opération autant de fois que vous le souhaitez pour les différentes couleurs voulues, sans oublier de séparer les différents états par une virgule.

Nous ajouterons ensuite une transition pour permettre de passer d’une couleur à l’autre par un dégradé. On choisit comme type de transition une SequentialAnimation. Dans cette animation on définit un élément colorAnimation, qui définit la manière dont l’animation de la couleur va se comporter. On détermine ici seulement une durée de transition, en milliseconde.

Nous finirons sur l’interaction via les boutons de la télécommande sur les couleurs du texte. Pour commencer nous vérifierons seulement si on appuie sur les boutons haut, bas et OK.

 

On vérifie si on appuie sur une touche avec Keys.onPressed:. On ajoute ensuite des conditions if et else if. Dans les conditions on vérifie si la touche appuyée correspond à la touche Haut, ou si elle correspond la touche Bas, ou si elle correspond à la touche OK. event.key correspond à l’événement appuyer sur une touche, que l’on compare, avec "=="  à la touche que l’on souhaite vérifier.

Ensuite on applique au texte l’un des états que l’on souhaite en fonction du bouton pressé avec test.state = le nom de l’état souhaité.

Pour le dernier bouton, on utilisera une autre manière de changer la couleur, qui elle changera directement la couleur du texte en passant par l’élément "Text", sans passer par un état ni par la transition. Pour ce faire on utilisera test.color à la place de test.state.

Vous pouvez maintenant tester votre première application sur votre Freebox Révolution en appuyant sur le triangle vert, ou sur le triangle vert avec l’insecte pour le lancer et avoir accès au mode débogage.

Récupérez le code et le copier dans Qt créator

Classés sous les catégories : Non classé

Prenez le pouvoir sur votre Freebox Révolution : vous allez être rock’n Roll !

  • Publié le
  • Par

Nous vous avions déjà proposé plusieurs applications dédiées à la Freebox Révolution créés par des développeurs. Univers Freebox va vous proposer, à partir d’aujourd’hui et tous les vendredi, de petits tutoriels, très simples, pour  créer vos propres applications sur Freebox Révolution. L’objectif est de vous permettre de réaliser des choses ludique sur votre Freebox, pour épater votre entourage. 

Ces tutoriels n’auront pas pour but de vous apprendre la programmation mais plutôt la prise en main du "logiciel de programmation" ( IDE) permettant la programmation d’applications sur la Freebox Révolution. Tout ne sera donc pas forcément détaillé.

Avant de pouvoir commencer à programmer il faudra donc, dans un premier temps, télécharger Qt Creator, Cet IDE permettra de créer, entre autres, les applications pour Freebox Révolution. Qt Creator est disponible en téléchargement ici.

Il faudra aussi passer votre Player Revolution en mode développeur. Il suffira pour cela d’aller dans les "Réglages" puis dans "Système" et choisir "oui" pour "Activer le mode développeur".

Une fois l’installation terminée il faudra créer un nouveau projet pour la Freebox. Pour ce faire, une fois Qt Creator lancé, il faudra cliquer sur "nouveau projet".

Ensuite il faudra choisir Freebox comme type de projet à créer.

Après ceci il faudra donner un nom à votre projet et choisir, si vous le souhaitez, ou vous voulez créer le dossier du projet.

Pour la page suivante il suffira de choisir une description pour votre application, les deux autres champs étant déjà remplis il vous suffira de passer à la suite puis de valider.

 

Une application est déjà présente à chaque nouveau projet. Celle-ci permet simplement d’afficher Rock’n Roll en blanc sur l’écran de votre Freebox.

Nous allons maintenant commencer par détailler un peu ce code.

Tout ce qui est dans l’élément "Application" sera le contenu de l’application. L’élément "Text" est, comme son nom l’indique, ce qui définira une zone de texte dans l’application.  On pourra paramétrer par la suite cet élément comme on le souhaite.

 

La propriété anchors.centerIn : parent, défini le point d’ancrage de l’élément, ici définit au centre de l’élément parent, "Application". Le texte s’affichera donc au centre de l’écran.

La propriété text: défini le texte de l’élément, color: sa couleur, définit soit par son nom en anglais, dans cet exemple, "white", soit par son code hexadécimal. La propriété font.pixelSize, définit la taille de la police en pixel.

Vous pouvez tester ce programme sur votre Freebox. Cliquez sur l’icône en forme d’ordinateur et choisir "Freebox". Cliquez ensuite sur le triangle vert. "Rock’n Roll" apparaîtra ensuite sur l’écran de votre téléviseur relié à la Freebox.

Nous verrons dans le prochain tutoriel comment modifier et interagir de manière simple avec ce texte. 

Pour aller plus loin : Je crée mon appli Freebox Révolution : une première application colorée

Classés sous les catégories : Non classé

Tutoriel : Comment accéder à Freebox OS depuis n’importe où de manière sécurisée

  • Publié le
  • Par

Depuis hier et la nouvelle mise à jour du Freebox Server, il est désormais possible d’accéder à Freebox OS à distance avec un nom de domaine personnalisé.

Pour ce faire il faudra dans un premier temps se connecter à Freebox OS. Avec la nouvelle mise à jour une fenêtre s’ouvrira directement montrant cette nouveauté. Il vous suffira juste de cliquer sur "Lancer l’application". Vous pouvez aussi passer par les paramètres de la Freebox puis dans le mode avancé, aller dans "Nom de domaine".

Dans la fenêtre qui s’ouvrira vous aurez le choix entre choisir un nouveau nom de domaine ou ajouter un domaine déjà existant.

Dans notre cas, on choisira un nouveau nom de domaine. Vous aurez juste à choisir le nom du sous domaine et cliquer sur suivant. Si le nom choisi n’est pas disponible un message l’indiquera.

Une fois le nom de sous domaine choisi, la page suivante vous demandera si vous souhaitez un certificat TLS pour activer l’accès sécurisé (HTTPS). Acceptez et, une fois la demande faite, il suffira d’attendre que le certificat TLS soit actif, cela peut aller de quelques minutes à quelques heures;

Il vous restera ensuite à activer la connexion distante à Freebox OS. Pour ce faire il suffira d’aller dans les « Paramètres de la Freebox » en mode avancé, puis dans "Gestion des accès", modifiez si vous le souhaitez les ports d’accès et activez l’authentification par mot de passe.

Vous pouvez désormais vous connecter à Freebox OS depuis n’importe où. Il suffira d’entrer dans votre navigateur https://<nom du sous domain>.freeboxos.fr:<port accès distant sécurisé>

 

Classés sous les catégories : À la Une