ESG – Société de systèmes et de logiciels

ESG – Société de systèmes et de logiciels

Solutions pour IHM Solutions pour IHM optimisoptimiséée en rendue en rendu

2© ESG France SAS - Réalisation d'IHM

1 – Introduction & Framework Qt

2 – Couplage Qt – Outil UML

5 – Intégration de médias

6 – IHM Multilinguiste

7 – Comparaison Toolkits graphiques

4 – Construction d’une librairie d’objets

3 – Réalisation Design d’IHM

Plan de la présentation











Introduction

Conception film d’animation

Conception Interface Homme Machine

1 - Story-board 2 - Croquis 3 - Réalisation finale

t

Spécifications- Techniques

(comportement)- Ergonomiques

Conception Design simpleIHM fonctionnelle


Structure du Framework Qt 4.8.0

Environnement de développement : Qt Creator & Qt DesignerCréateur d’applications pour plateformes différentes de la plateforme de compilationOutils de simulation de plateformes cibles


Les détails de la bibliothèque

La bibliothèque Qt


Qt Core (Classes de base)

- Modèle objet de Qt, gestionnaire d'évènements (système de signaux/slots)

- Classes d'entrées/sorties : gestion des fichiers, des flux, des répertoires...

- Gestion des threads

- Outils nécessaires de Qt : qmake (par exemple)



Qt GUI (création interfaces graphiques)

- Widgets classiques (boutons, case à cocher, ligne d'édition, menus...)

- Style natif sur toutes les plateformes



Qt OpenGL (objets accélérés par matériel)

- Intégration d’objets OpenGL dans les applications Qt- QGLWidget : s'utilise comme un widget (avec évènements

clavier/souris)



Capacités graphiques

Capacités 2D Capacités 3D


Qt Webkit

Module Webkit

- Utilisation d’un moteur de rendu HTML 5- Support de l’HTML, XHTML, SVG et CSS

QWebview


Mouvements tactiles

Qt permet de gérer le Multitouch tactile

Des gestuelles standards implémentées dans l’API « touch »

Configuration de gestuelles personnalisées


Qt Mobility

Connectivité/TéléphonieSMS messagerieNavigation GPS & Cartes de navigation











2 - Couplage Qt – Outil UML

Couplage : IHM finale

Framework graphique


IHM.exe

2 - Couplage Qt – Outil UML












1 - Qt Designer 2 - QGraphicsScene 3 - Qt Quick

- Accélération OpenGL

- Profil : « Développeur logiciel »

- Code source

- Accélération OpenGL

- Profil : « designer »

- Rapide à mettre en œuvre

- Langage de description : QML

Aucune méthode n’est exclusive

- Widgets de type « applications bureaux »

- Profil : « designer »

- Langage CSS



Qt Quick

Réalisation Design IHM- Langage QML- Animations- Organisation objets

graphiques- Réalisation d’objets

graphiques

Implémentation logique d’IHM- Langage C/C++



Qt Quick












1 - Utilisation objets classiques2 - Modifications design des objets



1 – Utilisation des objets de la librairie personnalisée











5 – Intégration médias

Fichier de ressource : « .qrc » Système de fichiers disponible

Livraison d’un fichier « ressources.qrc »pour un thème d’IHML’utilisateur ne peut créer son thème lui-même

Livraison de fichiers médias nécessairesPersonnalisation de l’IHM par l’utilisateur

Ressources.qrc- Images- Vidéos- Musiques

Méthode QDir

Chemins relatifs àl’exécutable











6 – IHM multilinguiste

Principe :



Principe :

Intégration méthode « tr() »Modification fichier de projet « .pro »

Implémentation de l’interface homme-machine.



Principe :

Intégration méthode « tr() »Modification fichier de projet « .pro »

- TRANSLATIONS = nomprojet_en.ts

Génération des fichiers de langues



Principe :

QtLinguist

Traduction des chaînes de caractères



Principe :

Traduction des chaînes de caractères



Principe :



Principe :

Compilation de la traductionIntégration du fichier de langage



Principe :

Intégration du fichier de langage

Utilisation de l’objet « QTranslator »











1 – Design et logique d’IHM

Framework écrit en langage C

Conception Design et Comportement :

- C/C++- JAVA- ADA - Python- Perl

Conception Design : QML (proche du JavaScript)

Conception Comportement IHM : langage C++

Implémentation possible en JAVA

Conception Design : Edje (proche du CSS)

Conception Comportement IHM : langage C

Implémentation possibles :

- Python- JavaScript- Perl- C/C++

GTK+ Qt EFL


2 – Contenu des frameworks

Fonctionnalités moins larges- Multimédia- Bureaux- Réseaux

Accélération OpenGL aucune modification de code

Outils de conceptions disponibles- SDK (QtDesigner & QtCreator)

Documentation très riche- eLearning & Tutoriaux- Démonstrations

Peu d’outils de conception

Très peu de documentation

GTK+ Qt EFL

Nombreuses fonctionnalités :- Bureautique- Multimédia- Localisation GPS- Réseaux informatiques & télécoms (3G, …)- Web & Base de données

Accélération OpenGL


3 – Cibles & Sponsors

Bibliothèque graphique multiplateformes (Linux, Windows, Windows CE, Symbian, MacOS X, Android, IOS, …)OS de type bureaux (Server X, Wayland, Cocoa, Explorer Windows)Qt embedded framebuffer virtuelGourmand en Stockage/Mémoire vive

MultiplateformesMinimal Linux Distribution

- 64 Mo RAM- 200 MHz ARM Core

Mobiles, bureaux, systèmes de jeux

GTK+ Qt EFL

Framework orientéBureaux

Framework orienté- Gestion tactile- Fluidité des IHM- Esthétisme (modification

de « skin »)

Sponsorisé par SamsungUtilisateurs : Free, Intel, Electrolux

Framework orientéBureaux & Mobiles

Sponsorisé par Nokia


4 – Démonstrations

GTK+ Qt EFL

Bureau Gnome Bureau KDEEnlightment

MaemoFreebox v6


Conclusion

Conclusion

Documents

ESG – Société de systèmes et de logiciels