#1 [↑][↓] 13-04-2023 08:59:37

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

[MSFS] Conception d'une interface graphique intégrée

Bonjour,

Depuis quelques semaines, je me suis penché sur le développement HTML/JS dans l'optique de porter le Damage Mod du Tibush sur MSFS.
Le premier avion qui en bénéficiera, sera le Ménestrel.

La plus simple méthode aurait été de modéliser une tablette et d'y adjoindre une $texture de manière à y associer une gauge de type "glass cockpit".
J'ai préféré de essayer de programmer en HTML/JS pour en apprendre un peu plus sur le sujet, et pour être le plus intégré possible dans l'interface de MSFS.

La charte de couleurs reprend les couleurs de base déjà utilisées par MSFS pour ces panels de base dans le menu Toolbar.
Une nouvelle icône a été rajoutée à l'interface de base si le HN-433 est copié dans le Community.
Cette icône permet via 5 menus HTML de faire apparaître différentes fenêtres dans l'interface.
- Checklist a pour fonction d'afficher les diverses checklists de l'avion (en cours)
- Management est prévue pour gérer l'affichage des pièces usées via une image représentant l'avion de dessus (en cours)
- Status permet de suivre les valeurs des diverses variables locales qui sont sauvegardées par un javascript

[img align=c]https://i.postimg.cc/Mzt8YTCW/Damage-mod-for-HN-433.png[/img]

Divers détails graphiques seront repris dont les décals de décoration du PYKA pour avoir enfin des lignes bleus bien arrondies autour de la verrière (la dernière version était plus proche d'un Picasso que d'une décoration).
Bien sûr ce travail est réalisé dans l'optique d'une réutilisation pour mes avions en cours.

Mais qu'y a-t-il Ă  faire pour en arriver lĂ  ?

Comment ajouter une icĂ´ne au toolbar ?
Je me suis inspiré d'un projet que l'on trouve sur Github et qui se trouve ici: https://github.com/bymaximus/msfs2020-toolbar-window-template
Ce projet est dans la norme des exemples du SDK. Bien lire la doc sur le Github et les fichiers fournis.
- un répertoire maximus-ingamepanels-custom qui contient:
      - un rĂ©pertoire Build dans lequel vous allez modifier et compiler votre projet (partie en bleu dans le schĂ©ma A plus bas)
      - un rĂ©pertoire InGamePanels et un autre html_ui qui seront Ă  modifier avec le rĂ©sultat de votre compilation et Ă  utiliser ensuite dans votre projet (partie en rouge dans le schĂ©ma A plus bas)
      - un layout.json et un manifest.json
- un fichier build.bat qui permet de comprendre comment après la compilation, récupérer le résultat pour l'incorporer dans les deux répertoires précédents.
- un Readme.md (Ă  lire avec Notepad)
- 3 captures d'Ă©cran

Un croquis pour mieux faire comprendre: la partie en bleu servira à compiler et ensuite le résultat sera à déplacer dans la partie en rouge qui elle sera copiée ensuite dans votre projet.

Schéma A:

...
│   build.bat
│   example.png
│   example2.png
│   example3.png
│   README.md
│
└───maximus-ingamepanels-custom
    │   layout.json
    │   manifest.json
    │
    ├───Build
    │   │   icon.png
    │   │   maximus-ingamepanels-custom.xml
    │   │
    │   ├───PackageDefinitions
    │   │       maximus-ingamepanels-custom.xml
    │   │
    │   └───PackageSources
    │           maximus-ingamepanels-custom.xml

    │
    ├───html_ui
    │   ├───InGamePanels
    │   │   └───CustomPanel
    │   │           CustomPanel.css
    │   │           CustomPanel.html
    │   │           CustomPanel.js
    │   │
    │   └───Textures
    │       └───Menu
    │           └───toolbar
    │                   ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg
    │
    └───InGamePanels
            maximus-ingamepanels-custom.spb

.
Regardons dans le répertoire maximus-ingamepanels-custom\Build que j'ai déjà commencé à modifier selon mon besoin (HN433)

...
│   frenchvfr-ingamepanels-hn433.xml
│   fspackagetool.exe.lnk ......................... lien crĂ©Ă© par moi, vers le SDK pour compiler Ă  la volĂ©e
│   ICON_TOOLBAR_HN433.svg ................ image crĂ©Ă©e avec Inkscape (44x44 pixels en Optimized SVG)
│
├───PackageDefinitions
│       frenchvfr-ingamepanels-hn433.xml
│
└───PackageSources
        frenchvfr-ingamepanels-hn433.xml

.
Rien de très extraordinaire, un répertoire Sources avec son XML, et un autre Definitions avec son XML et le XML qui définit le projet
Première chose on passe dans les fichiers XML que l'on adapte à son projet. Ensuite, c'est le premier XML sur lequel il faudra porter son attention.
Dans l'exemple suivant, il est adapté au HN-433. Le terme InGamePanels doit pouvoir aussi être modifier mais comme dans tous les exemples que j'ai pu voir, ce libellé était conservé, j'ai fais de même.

<?xml version="1.0" encoding="Windows-1252"?>
<SimBase.Document Type="InGamePanels" version="1,0">
  <Filename>HN433_Damage_Mod.spb</Filename>
  <InGamePanels.InGamePanelDefinition id="PANEL_HN433DM" Name="HN433 Damage Mod" \
      url="html_UI/ingamePanels/DamageMod/hn433-dm.html" resizeDirections="Both" minWidth="33" minHeight="35" \
      defaultWidth="36" defaultHeight="36" defaultTop="33" defaultRight="2" \
      icon="ICON_TOOLBAR_HN433" buttonVisible="true">
  </InGamePanels.InGamePanelDefinition>
</SimBase.Document>

L'icône doit être au format SVG et n'a pas besoin d'être dans un des deux répertoires Sources ou Definitions.
Les valeurs numériques de taille sont celles d'origine.
Je l'ai créé avec Inkscape (freeware), avec une taille de 44x44 pixels, la seule chose à ne pas oublier est de le sauvegarder en mode Optimized SVG.

PS: C'est dans ce fichier que l'on spécifie le nom du fichier HTML qui sera appelé en final par le clic sur l'icône donc il faut éventuellement modifier son nom et ceux du fichier CSS et JS avant de compiler.

Une fois compilé (drag&drop du XML à la racine sur le lien vers fspackagetools, on obtient un répertoire Packages dans lequel on trouvera dans le 3ième niveau un fichier SPB.
C'est ce fichier SPB, compilé qui permet (une fois déplacé dans le répertoire InGamePanels) d'être lu par MSFS et de rajouter l'icône désirée à la toolbar.

Prenez connaissance dans l'encart en-dessous et vous comprendrez mieux ce que j'essaye d'expliquer.

Schéma B:

...
&#9500;&#9472;&#9472;&#9472;html_ui
&#9474;   &#9474;
&#9474;   &#9500;&#9472;&#9472;&#9472;InGamePanels
&#9474;   &#9474;   &#9492;&#9472;&#9472;&#9472;CustomPanel
&#9474;   &#9474;             CustomPanel.css
&#9474;   &#9474;             CustomPanel.html
&#9474;   &#9474;             CustomPanel.js
&#9474;   &#9474;
&#9474;   &#9492;&#9472;&#9472;&#9472;Textures
&#9474;       &#9492;&#9472;&#9472;&#9472;Menu
&#9474;           &#9492;&#9472;&#9472;&#9472;toolbar
&#9474;                   ICON_TOOLBAR_HN433.svg
&#9474;
&#9492;&#9472;&#9472;&#9472;InGamePanels
        frenchvfr-ingamepanels-hn433.spb

.
Maintenant il ne reste plus, avant de tester qu'Ă  :
- créer votre répertoire final genre frenchvfr-ingamepanels-toolbar par exemple
- copier ce qui se trouve décrit dans le schéma B dans ce répertoire
- copier dans ce répertoire un fichier manifest.json
- créer dans ce répertoire le layout.json pour lister tout ce qu'il y a dans votre projet.
.
Oui, mais comment cela fonctionne-t il ?
Ce répertoire frenchvfr-ingamepanels-toolbar une fois complété et recopié dans votre Community va être lu par MSFS lors de son lancement.
MSFS va lire le  InGamePanels\frenchvfr-ingamepanels-hn433.spb et va comprendre qu'il lui faut ajouter l'icĂ´ne ICON_TOOLBAR_HN433.svgĂ  la toolbar.

Une fois le vol définit et chargé, si on clic sur cette nouvelle icône, on aura le fichier html_ui\InGamePanels\CustomPanel.html qui sera lu.
Dans ce fichier HTML, la mise en page est assurée par le fichier CSS et des calculs ou des traitements sont réalisés par le javascript JS.

On adaptant la feuille HTML et le javascript on peut faire beaucoup de choses (c'est un sujet à débattre dans un autre post) :
- demander l'affichage d'un ou de plusieurs fichiers disponibles sur Internet, des checklists en PDF par exemple ,
- effectuer des calculs sur des variables locales
- faire des sauvegardes de certaines données entre deux vols ...
Là, il faut bien sûr connaitre le langage HTML5 et le javascript pour continuer ...

Si cela intéresse certains, vous pouvez récupérer l'addon de JayDee (https://fr.flightsim.to/file/8867/ingame-checklist-procedures-mainly-for-vr) qui utilise cet artifice pour afficher des checklists d'avions, checklist qui sont stockées sur un site internet et que la page HTML ne fait qu'appeler ... C'est un très bon exemple pour comprendre le fonctionnement de ce développement et de l'assimiler pour d'autres besoins.

En ce qui me concerne, j'ai prĂ©parĂ© plusieurs sous-fichiers HTML qui sont accessibles Ă  partir de ce premier fichier HTML, chaque sous-fichier a un affichage qui lui est propre et qui peut appeler plusieurs fichiers javascript pour les besoins de l'avion.  wink


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#2 [↑][↓] 13-04-2023 21:27:40

Ragg Sor
Membre
Lieu : Paris
Inscription : 08-09-2022
RenommĂ©e :   14 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Merci énormément pour ces éléments, j'ai en tête une simple appli que j'ai envie de faire pour MSFS, je ne sais pas quand est-ce que je me lancerai mais j'éplucherai ton post en détail pour le faire :
Pour info il s'agirait, dans l'idée, d'une fenêtre qui donnerait une CheatSheet des paramètres moteurs indiqués pour l'avion employé... un truc tout bête avec un peu de travail de doc en amont pour remplir la BDD d'infos fiables...

Le jour oĂą j'aurai la foi, et le temps, je me lancerait wink


AMD 5900X, GeForce 3080TI, 64Go RAM DDR4, 1To NVME + 2To NVME + 2To HDD
W11 64, HOTAS Thrustmaster Warthog, Stream deck 5x3 avec Plugin Flight Tracker et Lorby's Axis and Ohs, X-Touch Mini
Microsoft Flight Simulator (standard), PMDG DC-6 et 737-600, Fenix A320

Hors ligne

#3 [↑][↓] 14-04-2023 10:07:24

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Merci de ta réponse,

Un genre de truc comme cela w00t par exemple wink

[img align=c]https://i.postimg.cc/DfWTdjmQ/Damage-mod-for-HN-433-bis.png[/img]

Avec les travaux d'hier, j'ai déjà 9 planches différentes: Limitations de l'appareil, Start, Run Up, Take Off, Climb, Cruise, Approach, Landing, Shutdown.

PS: Pour ce post j'ai planché 2h 1/2 pour présenter ceci le plus simplement du monde et après une journée et 136 vues: 1 seule réponse ...
De quoi se poser des questions quant à s'investir pour démocratiser la création sur MSFS.


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#4 [↑][↓] 14-04-2023 10:16:05

Ragg Sor
Membre
Lieu : Paris
Inscription : 08-09-2022
RenommĂ©e :   14 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Haha les grands esprits se rencontrent ! Je pensais Ă  quelque chose d'un peu plus rudimentaire et moins complet, mais sinon oui !



Lagaffe a Ă©crit :

PS: Pour ce post j'ai planché 2h 1/2 pour présenter ceci le plus simplement du monde et après une journée et 136 vues: 1 seule réponse ...
De quoi se poser des questions quant à s'investir pour démocratiser la création sur MSFS.

Je comprends ! J'ai vu Pacha Simu de Simvol s'interroger de la même façon sur FB, bon pas pour de la création mais pour de nombreux tuto qu'il fait, et le retour est plus que limité...
Personnellement je suis persuadé que ce temps que tu passe va servir à quelques un, pas forcément rapidement il est vrai, et je trouve ça vraiment précieux. Après, je ne jette pas la pierre en cas de découragement, perso je me suis beaucoup investi au début pour l'aide "aux nouveaux" sur MSFS (plutôt usage et debug, creation je suis novice), mais au bout d'un moment ça lasse et j'avoue être bien plus effacé. Dur de garder la motivation, moi je te dis un énorme merci, et puis le jour où tu en aura marre, ceux qui auraient eu besoin de tes lumières se débrouillerons autrement...

Dernière modification par Ragg Sor (14-04-2023 10:16:50)


AMD 5900X, GeForce 3080TI, 64Go RAM DDR4, 1To NVME + 2To NVME + 2To HDD
W11 64, HOTAS Thrustmaster Warthog, Stream deck 5x3 avec Plugin Flight Tracker et Lorby's Axis and Ohs, X-Touch Mini
Microsoft Flight Simulator (standard), PMDG DC-6 et 737-600, Fenix A320

Hors ligne

#5 [↑][↓] 14-04-2023 10:26:48

Marcstrasb
Modérateur
Lieu : Strasbourg - LFST 69 ans
Inscription : 14-03-2008
RenommĂ©e :   41 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonjour Lagaffe,

J'ai lu avec intérêt ton post - qui m'intéresse beaucoup - mais ne voulant pas interférer dans ton développement (post) j'ai pas voulu porter à confusion en postant laugh


Windows 10 Professional 64 bits - Z490-A PRO (MS-7C75) DDR4 - Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz - CORSAIR Vengeance LPX CMK16GX4M2E3200C 16 Go -  NVIDIA GeForce GTX 1060 6GB - Alimentation CORSAIR HX 750 Watt - Boitier BeQuiet! Pure Base 500 DX - Microsoft Flight Simulator 2020 Store

En ligne

#6 [↑][↓] 14-04-2023 10:56:21

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Merci Ă  tous les deux.

Ceci dit, ce travail me permet de mettre par écrit mes trouvailles et donc de pouvoir m'y référer par la suite ... mais je pourrais très bien le faire sur mon propre site et renvoyer les gens là bas.


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#7 [↑][↓] 14-04-2023 12:46:29

Taiaut57
Membre
Lieu : LFLB
Inscription : 17-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonjour Didier,

Comme Marc et beaucoup d'autres, je suis avec beaucoup d'intéret toutes tes interventions sans forcement me manifester, n'ayant que ma curiosité comme don...


WIN11 - i7-8700 CPU @ 3.20GHz - 32,0 Go - Vega56 - MSFS version DVD - 3 écrans de 27" - 2 écrans de 17"

En ligne

#8 [↑][↓] 14-04-2023 16:00:41

Henry
Membre
Lieu : CĂ´tes d'Armor
Inscription : 19-11-2010

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonjour Didier

Je lis aussi avec intérêt mais ça dépasse largement mes compétences. Je ne suis familier ni du langage HTML ni du javascript et mon temps disponible n'a tout juste permis d'attaquer de petites scènes avec des objets génériques.
En tout cas merci du temps passé à nous faire partager tout ça.


I7-3770K 3.5Ghz OC 3.8 Asus P8Z77-V RAM 16Go G.Skill DDR3-2133 CG Gigabyte RTX 3060 12GB
Boitier Fractal Design Define R4, Corsair AX 750w, Noctua NH-U12P, W10 2004
MSFS standard version store

Hors ligne

#9 [↑][↓] 14-04-2023 16:10:50

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonjour,

Je suis sur ce sujet depuis Lundi dernier et ma foi, je pense avoir progressé à pas de géant.
Les recherches que j'ai faites m'ont conduits Ă  de la documentation qui m'a bien servi pour comprendre et faire les tests qui on conduits Ă  cette interface fonctionnelle.

Résumé:
La base principale des interfaces graphiques dans MSFS que ce soit les menus GUI (interface homme-machine) ou beaucoup d'instruments dans les avions sont construits en utilisant les outils Web suivants:
- HTML5 : langage de programmation des pages web à base de balises spécifiques (fond) dans sa dernière révision
- CSS3 : langage Ă  base de balises qui permettent de mettre en forme (couleurs, polices, ...) les pages HTML
- Bootstrap : c'est un framework très puissant qui offre des codes CSS et autres pour les pages HTML
- JavaScript : c'est un langage de programmation dédié au web qui permet de faire des calculs, des lectures de variables internes à MSFS et aussi de stocker ces variables.

Bien que j'ai fait du développement Web dans les années 2000, c'était de mémoire du HTML3 tout au plus.
Pour comprendre tout ce que j'ai ingurgité en une semaine, il m'a fallu lire et apprendre en parallèle.
La principale source qui m'a fourni les documents nécessaires est : https://openclassrooms.com/fr/old-courses-pdf
Il s'agit de l'ancienne bibliothèque d'OpenClassrooms qui a été archivée en PDF.

Pour mes tests, j'ai téléchargé les docs suivantes:
Indispensables:
- Apprenez-a-creer-votre-site-web-avec-html5-et-css3.pdf
- Creer-un-menu-horizontal-deroulant-en-css.pdf
- Prenez-en-main-bootstrap.pdf
- Bonnes-pratiques-javascript.pdf

Facultatifs :
- Creez-des-applications-pour-windows-8-en-html-et-javascript.pdf
- Dynamisez-vos-sites-web-avec-javascript.pdf
- Html5-web-workers-le-monde-parallele-du-javascript.pdf
- Le-javascript-moderne.pdf
- Simplifiez-vos-developpements-javascript-avec-jquery.pdf

et en plus "Apprenez-a-programmer-en-python.pdf" pour pouvoir faire quelques développements sur Blender (plugins ou utilitaires).

Ce n'est pas des docs pour Einstein, elles sont abordables et permettent via une progression linéaire de vous familiariser avec les fichiers que vous allez trouver dans les avions/scènes/interface de MSFS.

Pour ce qui est des éditeurs avancé, Notepas et Notepadd++ sont toujours sur mon ordinateur mais depuis que j'ai testé Visual Studio Code (freeware Microsoft) je dois avouer ma foi que c'est très très performant pour le HTML et le JavaScript.

Pour ce qui est des fichiers CSS, j'ai testé et adopté Free CSS Toolbox (version V1.2 plus maintenue de Bluemental.net mais disponible via https://www.snapfiles.com/downloads/csstoolbox/dlcsstoolbox.html)


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#10 [↑][↓] 14-04-2023 16:53:48

D5Turbi
Membre
Lieu : BA 103 - Classe 69/4
Inscription : 14-12-2014
RenommĂ©e :   10 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonjour,

C'est très intéressant.
Depuis le temps que je me dis qu'il faudrait Ă©tudier le html il faudrait passer Ă  l'acte.
Sauf qu'avec mes difficultés avec de simples travaux comme affecter un effet à un objet, les journées devraient être de 72 heures...

mad2_gif


MSI B250M Mortar, I7-7700K, 16Go 2400MHz, MSI RTX 4060 Ti 8Go, be quiet! Dark Rock TF, SSD Samsung 850 EVO, DD WD 1To, Oculus rift
RFN.jpg  BA103.jpg RVT.jpg Turbi.jpeg

En ligne

#11 [↑][↓] 14-04-2023 18:19:13

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Si tu as déjà quelques avions un peu sophistiqué et freeware, tu peux parcourir les répertoires html_ui et inGamePanels et jouer avec les fichier HTML que tu y trouveras.

Tu verras ainsi ce que le code fait en termes de visualisations.
Bien sûr les calculs opérés par le JS (Javascript) ne peuvent pas être effectués car tu n'es pas dans MSFS et que la code HTML ne peut pas y accéder, question de chemins relatifs.


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#12 [↑][↓] 14-04-2023 18:32:25

D5Turbi
Membre
Lieu : BA 103 - Classe 69/4
Inscription : 14-12-2014
RenommĂ©e :   10 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

J'ai déjà ouvert des fichiers html (pour étudier le code d'une radio portative), ce qui m'a donné envie d'approfondir.
Mais, depuis plusieurs semaines, j'ai un souci "énorme" avec mon N3202 qui fait crasher MSFS dès qu'il est chargé.

Tout le reste est mis de côté jusqu'à ce que je trouve la solution (ou tout refaire depuis zéro..)


MSI B250M Mortar, I7-7700K, 16Go 2400MHz, MSI RTX 4060 Ti 8Go, be quiet! Dark Rock TF, SSD Samsung 850 EVO, DD WD 1To, Oculus rift
RFN.jpg  BA103.jpg RVT.jpg Turbi.jpeg

En ligne

#13 [↑][↓] 14-04-2023 20:10:00

air-alpes
Membre
Lieu : Les Alpes
Inscription : 29-11-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

C'et une très belle idée ce projet de porter le Damage Mod.
Je suis impressionné quand Didier dit "Rien de très extraordinaire", car pour moi votre bidule c'est du langage hiéroglyphe wacko


CM ASUS Rog strix x670E F Gaming, AMD 9 7900 X3D, DDR5. 32GO Corsair Vengeance 6000 CL 30, Nvidia RTX 4090, Windows 11 sur M2 PCI, MSFS 2020 (seul) sur nvme M2 PCI, Ă©cran MSI 40 pouces

Hors ligne

#14 [↑][↓] 16-04-2023 18:49:37

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Bonsoir,

Après une semaine de boulot et d'apprentissage sur le sujet, j'ai une version du Damage Mod satisfaisante.
Pour ce qui est des idĂ©es qui m'ont permis de mettre en place ce projet, c'est une banale recherche sur Internet  qui m'a conduit Ă  une vidĂ©o d'Ez Rider sur la crĂ©ation d'un Tecnam P2006 Ă  jauges analogiques puis en voulant savoir si cet avion Ă©tait sorti, j'ai trouvĂ© celui de FlightSim Studio et une vidĂ©o qui dĂ©taillait le fonctionnement de cet appareil.
Après il a suffit de réfléchir un ou deux jours pour essayer de comprendre comment ils avaient réussi à faire cela.
A force de cogiter, je pense avoir trouvé une solution réalisable pour faire la même chose.

A partir de la toolbar, après un clic sur l'icône "HN433 Damage Mod", une fenêtre au standard MSFS apparait.
Cette fenĂŞtre qui reprend la charte de couleurs de MSFS, comporte 6 boutons en haut Ă  droite de la fenĂŞtre:
- Home : présentation et avancement des divers développements,
- Preflight : donne accès à un avion schématique et un parcours à réaliser pour tester des points essentiels
- Checklists:
     - SpĂ©cifications: caractĂ©ristiques de l'avion (moteur, vitesses Ă  respecter, poids, essence embarquĂ©e)
     - Start: procĂ©dures avant, pendant et juste après le dĂ©marrage moteur,
     - Runup: procĂ©dures avant de rouler,
     - Take off: procĂ©dures pour le dĂ©collage,
     - Climb: procĂ©dures pendant la montĂ©e en altitude,
     - Cruise: procĂ©dures pendant le vol en croisière,
     - Approach; procĂ©dures juste avant l'approche du terrain,
     - Landing: procĂ©dures Ă  l’atterrissage,
     - Shutdown: procĂ©dures pour l'arrĂŞt du moteur,
- Management: donne accès à un avion schématique pour visualiser et réparer les ponts en usure hors normes
- Status: récapitulatif des variables sauvegardées entre deux vols,
- Contact: site internet et adresse e-mail de French-VFR

Une grande partie est complètement réalisée (1.8 Mo de feuilles HTML et de javascript), mais il reste encore pas mal de travail sur les gros ensembles que sont la Preflight et le Management (l'essentiel du Damage Mod).

Pour la Preflight, j'ai encore à réfléchir sur le comment mais j'ai quelques idées :
- des zones cliquables autour de l'avion suivant le chemin habituel,
- un clic sur la zone devrait activer une caméra pré-déterminée qui amènera le point de vue à l'endroit souhaité (gros boulot),
- un clic sur chaque zone à vérifier déclenchera une animation ou un changement d'état visuel (encore un peu de taf),
- retour dans le VC pour continuer.

Pour la partie Management ou Repairs Management, la prévision:
- un avion schématique vu de dessus,
- des zones pointant vers les parties usées de l'avion avec un "slider" monitoré par une variable locale et donnant le degré d'usure et un bouton pour pouvoir réinitialiser la variable locale et réparer la partie endommagée,

Pour ce qui est des sliders, et du bouton cliquable, en cherchant dans la documentation que j'ai listé plus haut j'ai trouvé le code à insérer donc pour cela c'est OK.
Demain, j'essayerais de réaliser ces 2 PNG qui serviront de base graphique sur lesquelles les zones cliquables seront dessinées en HTML/JS.

En recomposant une image avec plusieurs fenêtres, voici ce que cela donne (bien sûr, on ne peut avoir qu'une fenêtre du Damage Mod à un instant donné):

[img align=c]https://i.postimg.cc/YrnhrYks/Damage-mod-for-HN-433-ter.png[/img]


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

#15 [↑][↓] 17-04-2023 07:32:34

GĂ©rard BERNARD
Membre
Lieu : MontĂ©limar / 76 ans
Inscription : 13-03-2008
RenommĂ©e :   22 

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

air-alpes a Ă©crit :

C'et une très belle idée ce projet de porter le Damage Mod.
Je suis impressionné quand Didier dit "Rien de très extraordinaire", car pour moi votre bidule c'est du langage hiéroglyphe wacko

Et encore les hiéroglyphes c'est petit à côté w00t=WO
Mais le projet, comme tu dis, est super.


Il ne faut surtout pas mettre les cons en orbite car on ne verrait plus les Ă©toiles wink
Amicalement GĂ©rard
I9 9900K RAM 32go CG RTX 2080 TI 11 Go.  2 X SSD M2 1To + 2X1To SSD STOCKAGE. W10 Hotas Warthog. MSFS DVD

Hors ligne

#16 [↑][↓] 19-04-2023 14:13:27

Lagaffe
Membre
Lieu : LFPO / retraitĂ©
Inscription : 13-03-2008

Re : [MSFS] Conception d'une interface graphique intĂ©grĂ©e

Ma base de réflexion est le Tecnam 2006T de FlightSim Studio.
Ils ont mis beaucoup de documentation sur leur site et il y a pas mal de vidéo qui montrent dynamiquement le fonctionnement de leur interface.
En étudiant tout cela, j'ai compris à presque 90% la façon dont ils procèdent.

Maintenant que j'ai fais un synoptique de leur façon d'aborder les problèmes, je pense pouvoir le réaliser sans doute pas aussi efficacement mais j'ai suffisamment décomposé la problématique en petits éléments qui sont facilement solubles (la culture de l'ancien ingénieur qui revient).

Pour l'interface avec la toolbar: c'est déjà à 100% fonctionnel.
Pour l'enchainement des diverses pages qui présentent les rubriques et les checklists, c'est aussi fait à 100% (quelques détails cosmétiques à régler).

Dans le temps, j'ai fait du dév. HTML/CSS pour mon Entreprise et de manière autodidacte. Je viens de passer 2 jours à parfaire mes connaissances et j'ai appris 3 fois plus en deux jours que pendant tout ce que j'ai passé au travail: sans doute la motivation ;-)
Il est vrai que les outils dont on dispose maintenant non pas de rapport avec ceux que j'avais en 2000-2005. A l'Ă©poque je travaillais avec Vi ou Emacs maintenant on a des outils comme :
- Visual Studio Code (free de Microsoft) avec pleins de plugins qui permettent d'avancer 100 fois plus vite (complétion du code, indentation automatique, vérification de la syntaxe javascript, etc),
- Sublime Test; un Ă©diteur free hyper performant,
- le navigateur Google Chrome avec son débuger intégré hyper-efficace,
- Free CSS Toolbox pour Ă©crire les fichiers CSS (fingers in the noose)
- des tonnes de vidĂ©os Youtube :  WeFormYou: chaine française mais très instructive qui m'a permis de faire des pas de gĂ©ant depuis deux jours.

Pour l'adaptation du Damage Mod en lui même, j'ai résolu le souci technique HTML pour un élément: affecter une barre de progression graphique en relation avec la valeur du degré d'usure et un bouton pour remettre le tout à 100%.
Il faut maintenant re-programmer ce que j'ai écris pour éviter de le multiplier bêtement par 12. Je vais factoriser le développement actuel pour pouvoir l'instancier par appel d'une variable: engine, flaps Left, Oil, Fuel, rudder, aileron Right, etc donc en termes de bilan c'est 50% d'effectué.
Je vais tenter de faire une petite vidéo d'ici Vendredi pour présenter la chose.

Pour la pré-flight, c'est la partie Caméra qui est la plus difficile: il va falloir créer les caméra dans le camera.cfg, et ensuite dans le modèle 3D crée les animations factices puis coder ces animations pour les relier avec l'interface. Disons 25% effectués soit l'analyse fonctionnelle uniquement.

En fait, j'aborde cela comme un souci technique que l'on me posait avant en Entreprise:
- s'imprégner du problème pour bien l'assimiler,
- voir et chercher si d'autres ont déjà trouvé une solution (ne jamais ré-inventer la roue, ce n'est pas productif)
- analyser ces solutions trouvées pour isoler le fil conducteur,
- voir comment ces solutions peuvent être adaptées au souci à résoudre,
- puis se remonter les manches pour terminer la résolution ... et faire les tests !

Néanmoins, je continue encore deux jours et après c'est repos pendant 15j pour un petit voyage dans la "Belle Province" pour rendre visite à ma fille.
Je n'ai pas pris de congés pendant plus d'un an et demi et j'ai besoin de changer d'air mad2_gif sans parler des 2 ans de covid qui nous ont coincés en France.


@+ Didier
mini-Logo-Beaver-small.jpg
W10 Pro 64b Build 22H2 - Boitier HAF 932 - Z390 STRIX-F - 9900K - 2x16 Go - NVidia 3060 Ti 8 Go - Alim Corsair 800W - Ecran 34" - NVidia Studio ready 536.23
P3D v5.4 = http://www.pilote-virtuel.com/img/members/53/P3Dv5HF-Reglages-A.jpg - MSFS Deluxe/STORE - X-Plane 12B

Hors ligne

Pied de page des forums