esg – société de systèmes et de logiciels
TRANSCRIPT
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
3© 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
4© ESG France SAS - Réalisation d'IHM
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
5© ESG France SAS - Réalisation d'IHM
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
7© ESG France SAS - Réalisation d'IHM
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)
Les détails de la bibliothèque
8© ESG France SAS - Réalisation d'IHM
Qt GUI (création interfaces graphiques)
- Widgets classiques (boutons, case à cocher, ligne d'édition, menus...)
- Style natif sur toutes les plateformes
Les détails de la bibliothèque
9© ESG France SAS - Réalisation d'IHM
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)
Les détails de la bibliothèque
11© ESG France SAS - Réalisation d'IHM
Qt Webkit
Module Webkit
- Utilisation d’un moteur de rendu HTML 5- Support de l’HTML, XHTML, SVG et CSS
QWebview
12© ESG France SAS - Réalisation d'IHM
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
13© ESG France SAS - Réalisation d'IHM
Qt Mobility
Connectivité/TéléphonieSMS messagerieNavigation GPS & Cartes de navigation
14© 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
15© ESG France SAS - Réalisation d'IHM
2 - Couplage Qt – Outil UML
Couplage : IHM finale
Framework graphique
17© 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
18© ESG France SAS - Réalisation d'IHM
3 – Réalisation Design d’IHM
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
19© ESG France SAS - Réalisation d'IHM
3 – Réalisation Design d’IHM
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++
21© 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
22© ESG France SAS - Réalisation d'IHM
4 – Construction d’une librairie d’objets
1 - Utilisation objets classiques2 - Modifications design des objets
23© ESG France SAS - Réalisation d'IHM
4 – Construction d’une librairie d’objets
1 – Utilisation des objets de la librairie personnalisée
24© 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
25© ESG France SAS - Réalisation d'IHM
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
26© 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
28© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
Intégration méthode « tr() »Modification fichier de projet « .pro »
Implémentation de l’interface homme-machine.
29© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
Intégration méthode « tr() »Modification fichier de projet « .pro »
- TRANSLATIONS = nomprojet_en.ts
Génération des fichiers de langues
30© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
QtLinguist
Traduction des chaînes de caractères
31© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
Traduction des chaînes de caractères
33© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
Compilation de la traductionIntégration du fichier de langage
34© ESG France SAS - Réalisation d'IHM
6 – IHM multilinguiste
Principe :
Intégration du fichier de langage
Utilisation de l’objet « QTranslator »
35© 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
36© ESG France SAS - Réalisation d'IHM
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
37© ESG France SAS - Réalisation d'IHM
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
38© ESG France SAS - Réalisation d'IHM
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
39© ESG France SAS - Réalisation d'IHM
4 – Démonstrations
GTK+ Qt EFL
Bureau Gnome Bureau KDEEnlightment
MaemoFreebox v6