CITATION(Postal2 @ 11 Oct 2014, 08:29)
Mais ne peut on pas exporter des image type animer ? position du switch etc ??? .
Si bien sur, avec l'approche Web-Page çà fonctionne ainsi :
1> Sur ta page Web tu affiches une image de cockpit (fond d'écran)
Ou plus exactement je travail module par module (Fuel Panel, Moteur Panel, HSI Panel, ...)
pour pouvoir customiser chaque KaTZ-Pit
Par exemple pour le panel moteur :
CODE
<img src="images/Motor_Panel_29.gif" width="380" height="340" border="0" usemap="#Panel_Motor">
2> Tu définies alors dans ce panel des zones spécifiques
2-a> Soit des "zones clickables" qui lancent un script (javascript)
CODE
<!-- Mapping des boutons de demarrage left (311), right (312)-->
<map name="Panel_Motor">
<area shape="rect" coords="110,290,160,320" href="java script:Start_Eng_L()">
<area shape="rect" coords="220,290,270,320" href="java script:Start_Eng_R()">
</map>
Quand ta souris passe au dessus de ces zones, le pointeur devient "une petite main"
2-b> Soit des "zones images" pour afficher une image (voyant) par dessus le fond.
CODE
<!-- Voyants de demarrage moteur Left -->
<SPAN style="position: absolute; left: 40px; top: 290px; width: 50px; height: 30px">
<img src="images/M_StartEngineOn.gif" width="50" height="30" border="0" id="VM_Start_L">
</SPAN>
Ces images peuvent être des voyants, des aiguilles, des jauges, des lignes (ILS) ...
CODE
<!-- Aiguilles compte Tour -->
<SPAN style="position: absolute; left: 20px; top: 70px; width: 160px; height: 160px">
<img src="images/M_Aiguille-RPM29_01trans.gif" width="160" height="160" border="0" id="AM_RPM_L">
</SPAN>
2-c> Soit des "zones texte" pour afficher du texte, des valeurs
CODE
<!-- Zone Data compte Tour -->
<SPAN style="position: absolute; left: 65px; top: 25px; width: 50px; height: 30px; color:white; font-size:1.2em" id="RPM_L"> </SPAN>
<SPAN style="position: absolute; left: 245px; top: 25px; width: 50px; height: 30px; color:white; font-size:1.2em" id="RPM_R"> </SPAN>
Toutes ces zones sont repérées, par leurs coordonnées (left-top) par rapport à l'image de début.
Elles sont dimensionnées par (width-height)
Les "zones clickables", lancent directement le script javascript, qui est stocké dans un fichier "mes-script.js"
Pour les zones, image, et texte, tu remarques que chacune de ces zone porte un "ID"
id="VM_Start_L" , pour mon Voyant Moteur Left
id="AM_RPM_L, pour mon Aiguille Moteur , compte tour Left
id="RPM_L", pour ma zone d'affichage de la valeur RPM Left
Avec javascript, on peut alors mettre à jour, manipuler comme on veut les images, ou le texte
Par exemple pour mettre à jour , la valeur RPM_L, dans sa "zone texte", il suffit d'avoir dans son script
CODE
document.getElementById('RPM_L').innerHTML = KaTZPit_data["RPM_L"].toFixed(0)
La valeur de la zone ID "RPM_L" est mise à jour avec la donnée [RPM_L] stockée dans le tableau KaTZPit_data. Je fais tourner ce script toutes les 100 milliseconde, et le tour est joué.
Le tableau KaTZPit_data est mis à jour avec les exports recus de SIOC/DCS.
Pour les "zones images", on peut par exemple changer l'image affichée (la source), ou allumer, éteindre "la zone image".
Ainsi pour mon voyant de démarrage moteur :
CODE
if (KaTZPit_data["RPM_L"] > 45) {$("#VM_Start_L").fadeOut()}
On éteint le voyant quand les rpm passent au dessus de 45%
On peut ainsi avoir de micro script qui gère le panel.
Par exemple pour le Bingo Fuel
CODE
if (KaTZPit_data["Fuel_i"] > Plane_data["Bingo"]) {$("#VM_Fuel_L").fadeOut()} else {$("#VM_Fuel_L").fadeIn()}
La valeur Bingo. est stockée dans une table de spécification , spécifique à chaque avion (800 pour le Mig29), et le pit allume le voyant quand la valeur de l'avion, et dépassée.
Ainsi on a juste à créer une table spécification par appareil, et le pit, s'adapte automatiquement, sans devoir replonger dans le code.
Quand la "zone image", est une aiguille de cadran, on l'anime avec les fonctions de rotation
Par exemple pour l'aiguille RPM du moteur gauche
Une simple ligne de code pour lancer la fonction :
CODE
Rotate_RPM((KaTZPit_data["RPM_L"]), (KaTZPit_data["RPM_R"]));
et l'image de l'aiguille tourne
CODE
function Rotate_RPM(l,r){
var a_origine = 44
var a_gain = 3.16
$("#AM_RPM_L").css({
'-moz-transform':'rotate('+(a_origine+a_gain*l)+'deg)',
})
.....................
Là aussi, j'ai concu le truc pour une adaptabilité maximale.
Il suffit de mettre à jour, origine et gain, et on passe d'un cadran Mig29, à un cadran F15.
(Je regrouperai probablement aussi ces valeurs dans une table par avion)
------------------------------
Pour les jauges carburant, j'utilise une fonction de scale-up
la partie colorée de la jauge (représentant le koko, est "strechée" verticalement)
Exemple :
pct-i (représente le %age de remplissage du réservoir interne)
je calcul ce %age en fonction des spec de l'avion
CODE
var i_Fuel_ipct = KaTZPit_data["Fuel_i"] / Plane_data["Fuel_imax"]
Puis je "strech" la jauge colorée de la bonne valeur (scale-Y)
CODE
function Jauge_Fuel(pct_i, pct_e){
var a_origine = 0
var a_gain = 5
// On fixe l'origine du "scale down" en bas
$("#FA_Gauge_Main").css({
'-moz-transform-origin':'bottom left',
})
// Scale down %age restant = hauteur barre orange
$("#FA_Gauge_Main").css({
'-moz-transform':'scaleY('+pct_i+')',
})
.............................
------------------------------
Pour l'ILS, j'utilise la fonction de translation pour les aiguilles verticales/horizontales
CODE
Translate_ILS(KaTZPit_data["ILS_up"],KaTZPit_data["ILS_lat"])
CODE
// Translation ILS Up/Down
function Translate_ILS(valup, valat){
var a_origine = 0
var a_gain = 0.75
// valup : positif = Translation vers le bas , changement du signe DCS
$("#IA_Up").css({
'-moz-transform':'translate(0px,'+(a_origine - a_gain * valup)+'px)',
})
.............................
------------------------------
Bref, excusez cet exposé un peu long, mais comme çà vous voyez ce que l'on peut faire.
Pour revenir à ta question Postal, avec l'utilisation d'une page Web ... et je ne remercierai jamais assez LeCréole de m'avoir donné l'idée, et le courage de me plonger dans le javascript
, les possibilités sont infinies.
Ont peut, très bien recréer un FMS, avec zone clickables qui changent l'image du milieu, et anime des valeurs, points, etc etc ....
Bien sur, on peut créer un switch (il suffit d'avoir les deux images, posit_haute et posit_basse),
Par exemple, tu met la "posit_haute" sur ton image de fond, et tu fait un "FadeIn" de l'image "posit_Basse" quand on click dessus, en démarrant le script de ton choix.
En fait les seules contrainte, c'est d'être super rigoureux sur les noms d'ID, les variables, procédures , sinon on passe des heures à retrouver les bugs
C'est pour çà que j'ai écrit chaque ligne du programme sans utiliser le moindre "plugin" pour créer les jauges, qui te pond du code complètement abscon.
L'autre contrainte, c'est de bien séparer les scripts pour s'y retrouver
Perso j'ai :
> serverws.js : récupéré sur le projet de LeCréole, qui gère la communication websocket avec le KaTZ-Link
> panel.js : qui gère les évènement principaux (démarrage, arrèt)
> panel_0_init : qui charge les tables, et initialise les valeurs
> plane_init.js : qui charge les données de spéc des avions
> panel_data.js : qui gère la mise à jour de toutes les valeurs
> panel_light.js : qui gère les voyants
> panel_animation.js : qui gère les images en mouvement (aiguille, jauge ...)
> panel_routine.js : qui effectue les procédures (démarrage) , calculs d'autonomie, le module panel armement ...
Bref, si vous avez des idées Extrèèème, le mieux c'est de réfléchir à un petit cahier des charges pour les décrire simplement ... la suite c'est juste du temps de travail
Miaou
(même le web est devenu pourri par les marketeurs/baratineurs/commerciaux 
).