Vue d’ensemble

Avant de commencer, une remarque sur Windows. À priori, il est possible de travailler sur Windows. Cependant, les binaires Qt pour Android ne sont disponibles que pour Linux. Comme la compilation de Qt pour Windows est pénible et que je ne l’ai pas faite depuis longtemps, je présente seulement l’utilisation de Linux. Pour ceux qui aimeraient pouvoir utiliser Windows… tant pis pour vous

Je n’avais pas testé Qt sur Android depuis quelques temps, en fait depuis Qt 4.8 et Necessitas. Du coup, j’ai découvert le portage Android dans Qt 5.1 en même temps que je prenais des notes pour cet article. Comme base de travail, je suis parti des pages des pages de documentation de Qt : Qt – Android support.

L’utilisation de Qt sur Android nécessite l’installation de plusieurs outils :

• la version de Qt 5.1 pour Android : ok, on s’y attendait un peu. Contient la bibliothèque complète et Qt Creator ;
• le kit de développement (SDK) pour Android : permet de créer des applications Java pour Android et un simulateur pour tester ses applications ;
• le kit de développement natif (NDK) pour Android : permet de créer des applications C++ pour Android ;
• l’environnement d’exécution de Java (JRE) : nécessaire pour le SDK Android ;
• Apache Ant : pour faire beau. (bon ok, ce n’est pas que pour faire beau, ça sert au déploiement. Mais comme c’est un outil Java, je ne connais pas du tout).

Dans ce tutoriel, je vais montrer l’utilisation de Qt Creator, mais il doit être possible d’utiliser d’autres outils.

Installations

Installation de OpenJDK 7

Pour commencer, il faut installer l’environnement d’exécution de Java. Il est fort possible qu’il soit déjà installé. Dans la documentation, il est indiqué qu’il faut par exemple OpenJDK en version 6 ou plus récente.

Personnellement, j’avais la version 7. Cependant, j’ai eu des problème avec Apache Ant, qui me retournait une erreur. J’ai donc dû installer la version 6 en plus. Comme j’ai pas mal bidouillé, je ne suis pas sûr de la procédure. Si des personnes testent et remarquent des problèmes, n’hésitez pas à me le signaler.

Merci à rotoOm qui m’a indiqué l’origine du problème. Il suffit en fait d’installer le JDK en plus du JRE. Merci à lui pour l’information.

Vous pouvez tester si Java est installé avec la ligne de commande suivante :

Pour l’installation, j’ai donc utilisé les paquets fournis par Ubuntu. Il faut donc juste taper ces lignes de commande :

Pour les autres systèmes Linux, vous pouvez consulter la page de documentation d’OpenJDK : How to download and install prebuilt OpenJDK packages.

Installation d’Apache Ant

Pour l’installation d’Apache Ant, même méthode, j’utilise les paquets Ubuntu :

Pour tester l’installation d’Apache Ant, vous pouvez taper la ligne de commande suivante :

Installation du SDK Android

Pourquoi installer le kit de développement Java ?

Pour commencer, on ne peut se poser une question : pourquoi installer le kit de développement Java et le kit de développement natif et pas simplement ce dernier ? La réponse est simple : parce qu’on ne peut développer que en Java pour Android !

Ok…

Donc cela veut dire qu’il faudra utiliser le binding Java de Qt ? On parlait pas de développement C++ dans ce tutoriel ?

Oui, pas d’inquiétude En fait, il y a un point à savoir sur les applications natives C++ sur Android. C’est une application Java qui appelle un « module » écrit en C++ (on utilise le terme « activité » en Java). Avec Qt, on va donc simplement créer notre code C++/Qt et Qt Creator va s’occuper de créer l’application Java qui appelle notre code.

Ouf !

Installation

L’installation du SDK Android est simple aussi… puisqu’il n’y a pas d’installation à faire. Vous devez simplement télécharger le kit de développement pour Android et décompresser l’archive. Ce SDK contient les outils de développement Android, des plateformes de compilation, l’éditeur Eclipse ADT (Android Developer Tools, configuré spécialement pour Android), un simulateur Android pour tester ses applications.

Pour installer d’autres outils, par exemple d’autres versions de plateforme, vous pouvez utiliser le SDK Manager. Dans Eclipse ADT, allez dans le menu Windows puis Android SDK Manager.

Tester Eclipse

Comme je suis curieux et que j’ai envie de voir un peu comment fonctionne une application Java sur Android, j’ai testé un peu Eclipse et Java. Ceux qui ne sont pas intéressés, vous pouvez passer directement à l’installation du NDK.

Pour cela, j’ai simplement suivi le tutoriel : Building Your First App (il faut reconnaître que la documentation est très claire et simple à suivre, même pour un développeur C++ comme moi).

Allez dans le répertoire d’installation du SDK Android puis dans le répertoire eclipse/. Celui-ci contient un binaire eclipse, que vous lancez. Si c’est la première utilisation d’Eclipse, il va falloir faire quelques réglages de configuration. En premier le Workspace (l’espace de travail d’Eclipse, dans lequel il range les fichiers). Personnellement, j’ai accepté toutes les valeurs par défaut.

Une fois qu’Eclipse est lancé, créez un nouveau projet de type « Android Application Project » dans Fichier puis Créer un projet. Un dialogue permet de donner un nom à votre application (c’est le nom qui apparaîtra sur le téléphone), la version minimale d’Android à prendre en charge et la version Android de destination. J’ai laissé par défaut. Vous pouvez ensuite choisir l’icône de l’application et le type d’activité. Choisissez BlanckActivity, qui va créer une activité « hello world ».

Après quelques minutes (je vais rien dire que la lenteur d’Eclipse…), un projet est créé, qui contient quelques fichiers et répertoires. Les plus importants sont :

• le fichier AndroidManifest.xml : contient les informations sur l’application, en particulier les versions minimale et ciblée de la plateforme ;
• le répertoire res/layout/ : contient les interfaces de l’application, décrites dans des fichiers XML ;
• le répertoire src/ : contient les sources Java du projet. Dans ce projet par défaut, il lance simplement une activité, qui affiche l’interface décrite dans le fichier XML de layouts/ ;
• les répertoires res/drawable-xxx/ : contient les images de l’application.

Comme c’est une application Android, vous ne pouvez pas simplement la lancer comme une application de Bureau classique. Il existe deux méthodes pour la lancer : utiliser un simulateur ou déployer sur un téléphone.

Tester l’application sur simulateur

Pour cela, il faut dans un premier temps créer un simulateur. Le SDK Android est fournit avec un gestionnaire, permettant de créer différentes configurations pour le simulateur, permettant ainsi de tester l’application sur plusieurs types de téléphone.

Allez dans le menu Windows puis Android Virtual Device Manager. Dans le dialogue, créez un nouveau périphérique en cliquant sur « New », puis configurez selon le type de téléphone que vous voulez tester. Par exemple, comme j’ai un téléphone Samsung Galaxy S1, j’ai choisit un écran 4″ en 480*800. Après la création du périphérique, lancez-le.

Lancez ensuite l’application en ouvrant le fichier java (dans src/) puis en cliquant sur le bouton Run. Un dialogue « Run As… » s’ouvre pour choisir comment exécuter l’application. Choisissez Android Application. Normalement, l’application devrait se lancer.

Tester l’application sur téléphone

Bon, un simulateur, c’est bien, mais on aimerait avoir l’application sur un vrai téléphone pour tester. Ce n’est pas très compliqué non plus, mais il va falloir faire une manipulation sur le téléphone. Celle-ci permet d’activer les fonctionnalités de développement du téléphone, en particulier le Debug Mode USB, qui permet de déployer des applications via un cable USB.

Pour Android 4.2, allez dans les paramètres puis dans le menu À propos du téléphone. Cliquez plusieurs fois sur Numéro de build par activer le mode développeur. Vous allez avoir un message confirmant le passage en mode Debug. Revenez ensuite à l’écran précédent et allez dans les options de développeur. Activez le mode Debug USB. Pour les autres versions d’Android, vous pouvez consulter la page suivante : Run on a Real Device.

Pour terminer, il suffit de brancher le téléphone sur l’ordinateur avec un câble USB puis de lancer l’application comme précédemment. L’application devrait se lancer sur le téléphone.

Installation du NDK Android

Rien de compliqué ici non plus, il n’y a pas d’installation à faire, il faut simplement décompresser l’archive.

Installation de Qt Android

Le plus simple, comme indiqué au début de ce tutoriel, est d’utiliser les binaires fournis de Qt 5.1 pour Android. Si vous n’utilisez pas Ubuntu, il vous faudra compiler Qt vous-même. Bon courage

Lancez le binaire Qt pour Android. Le processus d’installation est classique, avec une particularité : le SDK propose par défaut l’installation de Qt Desktop, mais pour Android (versions ARM ou x86), il faut l’activer soi-même. Une fois l’installation finie, allez dans les répertoires Tools, QtCreator, bin puis lancez qtcreator.

La première étape va être de configurer Android. Pour cela, allez dans le menu Outils puis Options. Dans la liste de gauche, allez dans Android, puis configurez les répertoires du SDK et du NDK. Cochez la case pour laisser Qt Creator créer automatiquement les kits de compilation.

Il faut ensuite créer un périphérique pour le simulateur si ce n’est pas encore fait. Pour cela, cliquez sur le bouton Start Android AVD Manager.

Cliquez sur New pour créer un nouveau périphérique. Choisissez le type de Device (pour simuler mon Galaxy S, j’ai donc choisit un 4″ en 480*800). N’oubliez pas d’activer la prise en charge du GPU (Use Host GPU) pour que Qt puisse utiliser OpenGL ES.

Pour créer une application Qt, allez dans le menu Fichier puis Nouveau projet. Choisissez un projet compatible avec Android (par exemple Application Graphique Qt ou Application Qt Quick 2 (élément de base)).

Dans un premier temps, le simulateur se lance.

Puis l’application à la fin du déploiement.

Pour déployer sur un téléphone (préalablement passé en mode Debug USB, voir au début), il suffit simplement de le brancher, Qt Creator lancera alors l’application dessus.

Conclusion

Rien de très compliqué finalement. Le déploiement est relativement simple une fois que les outils sont configurés. Reste plus qu’à tester les performances.

Pour ceux qui sont intéressés par Qt Quick, je rappelle le livre auquel je participe : Créer des applications avec Qt 5 – Les essentiels. J’ai en particulier participé à la rédaction de Qt Quick. C’est encore une pré-version du livre final, mais il y a déjà pas mal de choses sur Qt Quick. Et n’hésitez pas à me dire s’il y a des points que vous souhaiteriez voir abordés dans ce livre.

Si vous êtes intéressé par Qt Quick sur mobile, je fais une présentation le 5 juin à Paris. Contactez-moi par MP pour plus d’informations.

Merci à prgasp77 et winjerome pour leur relecture orthographique.

N’hésitez pas à commenter cet article sur le forum.

Un problème que l’on revoit souvent sur le forum est l’installation de Qt 5. J’ai réalisé, dans le cadre du livre sur Qt auquel je participe (Créer des applications avec Qt 5 – Les essentiels), plusieurs vidéos pour expliquer comment installer et tester l’installation.

Il y a quatre vidéos pour le moment :

• installation sur Windows avec Microsoft Visual C++ 2010 ;
• installation sur Windows avec MinGW ;
• installation sur Linux en utilisant les binaires ;
• installation sur Ubuntu en utilisant les dépôts.

Les vidéos sont disponibles sur le site de l’éditeur : D-booker.fr (YouTube).

Je n’ai pas fait de prise son, donc penser à activer les sous-titres pour avoir les explications. J’essaierais de proposer prochainement d’autres vidéos d’installation (sur Mac, sur Raspberry Pi) ou des démos.

Bonne visualisation (et bonne lecture à ceux qui liront le livre ;))

L’objet QML ColorPicker

L’objet ColorPicker permet d’afficher les nuances de gris d’une couleur et de sélectionner une nuance directement en cliquant dans l’item. Les composantes des couleurs sont manipulées directement puisqu’il n’est pas possible d’extraire les composantes d’une couleur donnée en QML.
La couleur principale est définie par les variables main_red, main_green et main_blue. La couleur sélectionnée est récupérée grâce aux variables selected_red, selected_green et selected_blue dans le contexte ColorPickerContext.

La taille de l’item est fixée à 256×256 :

Pour dessiner les nuances de gris, on va utiliser deux gradients linéaires :

• le premier, horizontal, va du blanc à la couleur principale ;
• le second, vertical, va du transparent au noir.

Pour créer les gradients, on commence par définir un rectangle ayant les mêmes dimensions et position que l’item :

On utilise ensuite l’objet gradient pour remplir le rectangle avec le dégradé. Par exemple pour le second gradient :

On obtient ainsi un gradient vertical allant du transparent au noir. Pour le premier gradient, il faut donc effectuer une rotation du rectangle de 90° après l’avoir correctement dimensionné et positionné :

Pour visualiser la position de la couleur sélectionnée, on va afficher un cercle entourant la dernière position connue. Cependant, dessiner un cercle en QML est un peu complexe (il faut créer des objets path pour dessiner des courbes quadratiques et constituer le cercle). Pour simplifier, on va afficher une image de taille 8×8 pixels représentant un cercle avec le fond transparent :

On crée un objet image en indiquant la source du fichier. Par défaut, la taille de l’image est celle du fichier chargé :

Par défaut, on souhaite que le curseur soit placé au centre de l’item. Pour cela, on utilise les variables x et y :

Pour déplacer, le curseur en fonction de la position de la souris, il faut pouvoir identifier cette image :

On pourra alors déplacer l’image en modifiant les variables x et y, en ajoutant le code suivant n’importe où dans notre item :

Pour terminer, il faut pouvoir récupérer les évènements souris survenant sur notre item. Cela est réalisé en créer un objet MouseArea de même dimension que l’item :

Il faut ensuite demander à cette MouseArea de récupérer les clics sur le bouton gauche de la souris :

On va réagir à deux types d’évènements : un clic sur le bouton gauche, qui déclenche un évènement de type onPressed, et le déplacement de la souris avec le bouton enfoncé, qui déclenche un évènement de type onPositionChanged.
Lors de ces évènements, on récupère la position de la souris grâce aux variables mouseX et mouseY que l’on affecte aux positions de l’image avec cursor.x et cursor.y. Cependant, il ne faut pas oublier que la position de cursor correspond au coin en haut à gauche de l’image alors que la souris correspond au centre de l’image. Il faut donc corriger en fonction des dimensions de l’image :

Pour terminer, après un changement de la couleur sélectionnée, il faut recalculer les variables selected_red, selected_green et selected_blue. Pour cela, on appelle un fonction JavaScript updateSelectedColor(), qu’il faudra créer :

Pour connaître la couleur sélectionnée, on ne dispose pas de fonction équivalente à Qimage::pixel(). Les seuls éléments que l’on dispose sont : la position (x, y) de la couleur sélectionnée dans le widget de taille (width, height) et les composantes RGB de la couleur principale.
Il faut donc calculer les composantes RGB de la couleur sélectionnée à partir de ces éléments et de la méthode utilisée pour dessiner l’item.

Lorsque l’on dessine le premier gradient, on va du blanc (1, 1, 1) à la couleur principale (R, G, B). Le rapport entre la position cursor.x et la largeur est équivalent au rapport entre la composante de la couleur principale et le blanc :

On obtient alors l’équivalence suivante :

{r – 1} over {X} ~ = ~ {R – 1} over {width} ~ = ~ pente de la droite

Alors :

r ~ = ~ 1 ~ + ~ (R-1) {X} over {width}

De même pour les autres composantes :

g ~ = ~ 1 ~ + ~ (G-1) {X} over {width} newline
b ~ = ~ 1 ~ + ~ (B-1) {X} over {width}

Lorsque l’on dessine le second gradient, on va du transparent (alpha = 0) au noir (0, 0, 0, 1). La couleur final s’écrit :

couleur finale ~ = ~ couleur initiale * (1 – alpha) ~ + ~ noir * alpha ~ = ~ couleur initiale * (1-alpha)

La transparence alpha est liée à la position cursor.y par :

alpha ~ = ~ {Y} over {height}

On obtient donc la formule suivante pour la composante rouge :

r’ ~ = ~ r * (1 – {Y} over {height} ) newline
r’ ~ = ~ (1 + (R-1) {X} over {width}) * (1 – {Y} over {height} )

De même pour les autres composantes :

g’ ~ = ~ (1 + (G-1) {X} over {width}) * (1 – {Y} over {height} ) newline
b’ ~ = ~ (1 + (B-1) {X} over {width}) * (1 – {Y} over {height} )

La fonction JavaScript s’écrit alors, en utilisant ces formules :

La classe GradientWidget

Pour utiliser cet item QML dans du code C++, il est nécessaire d’écrire un wrapper pour récupérer les signaux et slots de l’item. Cette classe n’est pas un widget et dérive donc de QObject (pour pouvoir utiliser le système de signaux et slots) :

Pour récupérer la couleur sélectionnée, il faut créer une variable pour chaque composante et utiliser la macro Q_PROPERTY pour la rendre accessible en QML. Il faut également définir les fonctions d’écriture (pour modifier la variable depuis le QML) et de lecture (pour lire la variable à l’extérieur de la classe) :

Après avoir mis à jour la couleur avec la fonction setSelectedColor(), il faut émettre un signal contenant la couleur créée à partir des composantes :

Il faut également définir les variables et fonctions pour les deux autres composantes :

La création de l’item ColorPicker est réalisée dans le constructeur de la classe :

Dans ce constructeur, il faut créer un objet QDeclarativeView pour afficher l’item QML puis fournir le code QML à l’aide la fonction setSource. La taille est fixée à 256×256, comme dans le code QML. Dans cet exemple, le code QML est fournit dans un fichier .qml et référencé dans un fichier ressource .qrc :

Pour permettre au code QML de transmettre les variables contenant les composantes de la couleur sélectionnée, il faut récupérer le contexte par défaut de la vue et définir une propriété ColorPickerContext dans celui-ci. Cette propriété permet d’accéder à l’objet dans le code QML à partir de la variable ColorPickerContext et permettre ainsi d’accéder aux propriétés définies ci-dessus :

Les variables view et context sont définies dans l’en-tête de la classe par :

Lors de la création de l’item, on attribue également une couleur principale par défaut à l’aide de la fonction setMainColor() :

Cette fonction setMainColor() est un slot ayant un paramètre, la couleur a attribuer :

Pour transmettre cette couleur au code QML, on utilise la fonction setContextProperty(), qui permet d’attribuer une valeur à une variable QML :

Pour terminer, il faut créer les fonctions show() et move() pour pouvoir afficher et déplacer la vue :

Le résultat final

Voici le rendu obtenu :

Télécharger les sources de cet article.

Conception

Le widget devra simplement afficher un fond (les nuances de gris d’une couleur) et gérer les évènements de la souris (clique et déplacement pour sélectionner une nuance de gris).

Il est possible de partir de plusieurs classes différentes pour créer le nouveau widget. Voyons les avantages et inconvénients de chacune :

1. QWidget est la classe parent de tous les widgets de Qt. Elle fournit l’interface de base commune de tous les objets visibles. Par défaut, elle n’affiche rien et ne fait rien.
2. QScrollArea est destinée à afficher le contenu d’un widget dans un autre, en gérant les barres de déplacement horizontale et verticale. Dans cet exercice, la présence de barre de déplacement n’est pas souhaitée et il est préférable d’ajuster la taille de la zone de dessin à la taille du widget.
3. QLabel permet d’afficher un texte ou une image sans interaction avec l’utilisateur. Même s’il est possible de surcharger les fonctions de gestion des évènements souris, utiliser cette classe pour créer noter widget revient à ne pas respecter la conception de QLabel.
4. QpushButton permet également d’afficher des images mais gère aussi les évènements souris. Mais cette classe n’est pas destiner à gérer la position précise des évènements souris et de réagir différemment en fonction de celle-ci.

Au final, même si certaine classe présentent des fonctionnalités qui seraient intéressantes (affichage d’images, gestion des clics), seule l’utilisation de QWidget respecte la conception des objets Qt.

En partant de QWidget, quels seront les fonctions qu’il faudra implémenter ?

1. L’affichage des nuances de gris sera réalisée dans la fonction paintEvent(), qui prend en charge le dessin du widget. Il suffit de dessiner les nuances de gris puis la position de la couleur sélectionnée par un petit cercle.
2. La création des nuances de gris peut être réalisée directement dans paintEvent(). Cependant, cela implique de redessiner l’image à chaque déplacement de la souris, ce qui peut rendre le widget non fluide. De plus, la récupération de la couleur sélectionnée utilisera la fonction QImage::pixel(). Au final, il est donc préférable de dessiner les nuances de gris dans une QImage et d’afficher cette QImage dans la fonction paintEvent(). Cette image sera recalculée que lors d’un changement de la couleur principale ou lors du redimensionnement du widget.
3. La fonction resizeEvent() sera utilisée pour mettre à jour l’image contenant les nuances de gris.
   Les évènements souris seront gérés par les fonctions mousePressEvent(), mouseMoveEvent() et mouseReleaseEvent().
4. Le changement de couleur principale et la sélection d’une couleur utilisera le système de signaux et slots, pour faciliter l’interaction entre les widgets.

Pour dessiner les différentes nuances de gris d’un couleur, deux méthodes sont envisageables :

1. Dessiner deux gradients superposés : un premier gradient linéaire, horizontal, allant du blanc (à gauche) à la couleur principale (à droite) ; un second gradient linéaire, horizontal, allant du transparent (en haut) au noir (en bas).
2. Faire varier les composantes S (saturation) et V (valeur) d’une couleur en fonction des coordonnées (x, y) d’un pixel. La saturation permet d’aller du blanc (S=0) à la couleur (S=255) et correspond donc à l’axe horizontal. La valeur permet d’aller du noir (V=0) à la couleur (V=255) et correspond donc à l’axe vertical.

Ces deux méthodes sont identique visuellement (mais présentent en réalité des petites différences) et permettent toute deux d’afficher toutes les nuances de gris d’une couleur.

Interface

Pour créer l’interface de notre classe, on crée une classe GradientWidget héritant de Qwidget, avec son constructeur :

Les fonctions de gestion des évènements surchargent les fonctions de même nom de QWidget :

La connexion avec les autres widgets est assurée par le signal envoyé lors de la sélection d’une couleur et le slot reçu lors du changement de couleur principale :

Les variables privées permettent de conserver les couleurs principale et sélectionnée, l’image dans laquelle on dessine les nuances de gris, la position du curseur et une variable boolean indiquant si la mouvement de la souris correspond à un clic ou non :

Les variab Pour finir, deux fonctions privées, permettant de redessiner les nuances de gris et de mettre à jour la couleur sélectionnée :

Implémentation

Commençons par l’implémentation de la fonction updateSelectedColor(). Celle-ci récupère simplement la couleur du pixel de m_gradient_image à la position m_cursor_position, émet le signal colorSelected() puis appelle la fonction update() pour mettre ajour le widget :

Création des nuances avec QLinearGradient

La première version de la fonction updateGradientImage() utilise l’approche à deux gradients :

On crée une QPixmap de la taille du widget puis un QPainter pour dessiner dedans. Par défaut, nous n’avons pas besoin de dessiner des traits donc on supprime le QPen :

Pour dessiner des gradients linéaires, Qt propose une classe QLinearGradient. Il suffit donc de préciser les positions des points du gradient et les couleurs de ces points. Pour le premier gradient, les couleurs doivent aller du blanc (Qt::white) à la position (0, 0) à la couleur m_main_color à la position (with, 0) :

Puis on dessine un rectangle de la taille du widget :

Pour le second gradient, les couleurs doivent aller du transparent (Qt::transparent) à la position (0, 0) au noir (Qt::black) couleur m_main_color à la position (0, height) :

On convertit ensuite la Qpixmap en Qimage et on la conserve dans m_gradient_image :

Pour finir, puisse que le gradient à été mis à jour, on met également à jour la couleur sélectionnée :

Création des nuances avec HSV

La seconde version de updateGradientImage() utilise deux boucles imbriquées qui parcourent l’ensemble des pixels de l’image et qui calcul la couleur en faisant varier la saturation et la valeur en fonction de la position (x, y). Pour commencer, il faut redimensionner l’image de destination si celle-ci n’est pas identique aux dimensions du widget :

La teinte est obtenue à partir de la couleur principale :

On parcourt l’ensemble des pixels de l’image à l’aide de deux boucles imbriquées :

Il reste plus qu’a dessiner un cercle à la position m_cursor_position :

Le diamètre du cercle est une constante définie en début du fichier d’implémentation :

Lors d’un évènement souris de type mousePressEvent, on teste si l’utilisateur a cliqué sur le bouton gauche :

Si c’est le cas, on active le suivi des mouvements de la souris, on récupère la positon de la souris dans m_cursor_position puis on met à jour la couleur sélectionnée :

Lors d’un évènement de type mouseReleaseEvent, on déssactive le suivi de la souris et on met à jour la couleur sélectionnée :

Les mouvements de la souris sont détectés par l’évènement mouseMoveEvent. Pour que ces événements soient pris en compte pour le widget, il faut les activer en utilisant la fonction setMouseTracking(true) dans le constructeur. Ces évènements mouseMoveEvent sont activés même lorsqu’aucun bouton n’est appuyé. C’est la fonction de la variable m_tracking d’indiquer si on déplace la souris en conservant un bouton cliqué ou non.
Lorsque l’on maintient appuyé un bouton de la souris et que l’on déplace celle-ci en dehors du widget, des évènements mouseMoveEvent continuent d’être envoyé. Si on prend en compte ces évènements, on risque de demander la couleur de pixels en dehors de la taille de m_gradient_image, ce qui provoquera des erreurs. Il faut donc tester si la position de la souris est dans le widget. Au final, le code de mouseMoveEvent sera :

Lors d’un changement de taille du widget, il suffit de remettre à jour le gradient :

Il ne reste plus qu’a implémenter le constructeur :

Ainsi que le slot setMainColor() :

Le résultat final

Voici le rendu obtenu :

Télécharger les sources de cet article.

Première partie : créer une zone de sélection avec gradient

Bonjour à tous,

Nous savons que vous attendez avec impatience le prochain défi Qt, cependant un défi de qualité prends du temps à organiser et mettre en place. Pour palier à votre envie de développer et de vous faire les dents sur un nouveau projet, nous vous proposons un nouveau concept : les exercices Qt.

Le principe

Des petits sujets réguliers pour lesquels vous pouvez apporter une solution en détaillant quelques étapes clés imposés. La durée de l’exercice dépendra de la difficulté de l’énoncé. Il est possible qu’un sujet conséquent en travail soit proposé et ainsi découpé en plusieurs parties représentant une suite d’exercices sur le même thème.

Tout le monde peut ainsi proposer une solution pour répondre à l’exercice posé. Dans le cas d’un exercice en plusieurs parties, la meilleure solution pourra être utilisée par les autres participants pour la suite de l’exercice.

Il est impossible pour l’équipe de réunir un jury et réaliser un barème aussi poussé que celui des défis Qt. La meilleure solution sera ainsi désignée d’un point de vue plus subjectif que pour les défis Qt par les responsables de la rubrique Qt, à savoir dourouc05 et moi-même et éventuellement d’autres membres de l’équipe Qt en fonction des disponibilités de chacun.

Les exercices seront ainsi proposés le vendredi (vous permettant d’y travailler dès le week end après avoir découvert le nouveau sujet). La fin du dépôt des propositions aura lieu le vendredi soir à 23h59, un certain nombre de semaines (dépendant de la difficulté de celui-ci) après la présentation du sujet et le vainqueur sera désigné dans la semaine suivante avant la proposition du nouvel exercice.

Nous essayerons de faire attention à ce qu’il n’y ait pas de copie entre les codes des participants en appliquant la règle que le premier code publié sur le forum « appartient » au membre l’ayant posté. Il existe bien sur des réponses à ces solutions sur internet, mais quel est l’intérêt pour vous de les utiliser ?

Le premier sujet !

Le thème

Ce premier exercice fait parti d’un thème qui est la réalisation d’un color picker. Ci-dessous, quelques color pickers connus mais libre à vous de faire travailler votre imagination pour nous donner une meilleure solution au final :

Ce thème est découpé en trois parties qui toutes durent deux semaines. Un nouvel énoncé d’exercice sera donc publié toutes les trois semaines (en comptant la semaine de correction).

Première partie : widget personnalisé pour affiche et sélectionner la nuance de gris d’une couleur

Création d’un widget permettant de sélectionner la nuance de gris à partir d’une couleur. Seul le widget affichant le gradient de la nuance de gris sur une couleur sera évalué mais votre fenêtre peut afficher la couleur en cours et les valeurs de celle-ci pour démontrer le bon fonctionnement de celui-ci.

Le widget peut être carré, rectangulaire, sphérique, en cercle, libre à votre imagination.

Les étapes d’explications imposées :

1. Mise en place de la structure du widget (héritage, composition…) ;
2. Réalisation du gradient ;
3. Sélection et récupération de la couleur à partir du gradient.

Vous avez donc jusqu’au vendredi 3 septembre 23h59 pour nous fournir une solution. Le dépôt des solutions ce fait sur le forum à la suite de ce message.

J’espère que l’idée vous plait, n’hésitez pas également à nous faire part de votre participation à la suite de ce message, de présenter votre solution en avant première et je finirai par dire : à vos claviers !

Seconde partie : accompagner le widget d’un sélecteur de couleur et amélioration de celui-ci

L’objectif est de continuer le widget en l’améliorant et ajoutant d’autres fonctionnalités. Pour ceux qui n’auraient pas un widget fonctionnel, voici une archive contenant la classe du widget du vainqueur de la première partie à savoir gbdivers, améliorée par mes soins pour prendre en compte les malus qui lui ont été mis à la correction !

La première amélioration requise pour la partie deux est la création d’un slider permettant la création de la couleur principale (teinte ou hue en anglais). L’image ci-jointe vous montre de quoi je parle :

Ce slider peut faire partie du widget ou être un widget indépendant. Je vous conseille de regarder la classe QSlider et les paramètres pour la personnalisée.

De plus un ensemble de champ QLineEdit respectant un certain format QIntValidator devra permettre d’afficher et de modifier la valeur de la teinte, saturation ou valeur. En cas de modification, le changement se répercutera sur le widget par le déplacement du point de sélection. Il existe donc une connexion dans les deux sens entre ces différents éléments.

Par la suite, il faudra modifier le widget existant pour permettre également d’afficher les dégradés de la saturation et de la valeur (et non plus la teinte, hue en anglais).

Exemples :

C’est tout pour les étapes imposées dans cette seconde partie qui durera deux semaines.

Pour les personnes qui ont de l’avance, vous pouvez réfléchir à n’afficher que les couleurs disponibles pour le web et la représentation des dégradés dans les autres espaces colorimétriques.

Si vous avez besoin d’explications supplémentaires, n’hésitez pas à poser des questions à la suite de ce message. De plus la correction et le code source de l’ensemble des candidats pour la première partie est disponible dans ce sujet.

Bon courage !