KaTZ-Pit V3000, Le KaTZ-Pit de DCS FC3

[Postal2]

Méga boulot !! fait nous en un complet et tout et je te le paie!!! evidement ! .

[Lecreole]

Bravo katz du très bon boulot
Mon projet aussi avance bien, j'aurai besoin de ton aide très bientôt.
Lecreole.

PS : un ptit coucou à tout la 3rd

[Postal2]

Salt lecreole !!!

Hâte de voir ton projet !! .

Donc pour reprendre ce que proposais Katze c'est juste pas mal du tout même extrême !


Mais ne peut on pas exporter des image type animer ? position du switch etc ??? .

[KaTZe]

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

Ce message a été modifié par KaTZe - 11 Oct 2014, 11:09.

[Lecreole]

C'est un vrai bordel ces systèmes apparemment assez récents, et super mal documentés.
Idem pour javascript, quelle M..... ce language , le web a vraiment pas été concu pour afficher dynamiquement autre chose que du baratin

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.

De rien

De mon coté j'ai pris une direction différente.
Moi aussi j'ai laissé tomber perfectWidget (même si j'utilise snap.svg.js comme plugin open source) et dévelloper mon propre code javascript pour concevoir les gauges ou tous autres éléments du cockpit et mon choix à pencher pour le svg qui je pense est un avantage pour une qualitée d'affichage optimale que des images bmp, jpg ou png.
En plus tous les éléments peuvent être modifier à la volée, couleur, taille, même sa forme sans perte de qualité.
Une petite démo parlera plus qu'un grand discours
(a part le fond d'ecran du SU27 aucunes images n'est utilisées et pensez a metre en plein écran F11 pour google chrome)

Voila le type de résultat qu'on pourrais avoir au final, mais comme helios, plusieurs boutons pourraient faire afficher d'autres modules sur l'écran : panel moteur, panel mecas etc...
J'ai pas encore optimiser pour l'affichage sur mobile ou tablette mais dèja c'est pas mal(c'est mon avis personnel )

Je termine le HSI, l'ADI et le SPO puis je m'attaque au panel F-15
Encore beaucoup de boulot mais on aime ça
A trés bientôt.

[Maraudeur]

Wow!! Superbe travail pour tous les deux!! Bravo

Lecréole, n'oublie pas d'animer également la bille sous d'ADI
Et tu peux aussi prévoir l'affichage du calage de pression sur l'altimètre

[KaTZe]

En fait il y a le fond et la forme.
Sur le fond nos projets sont effectivement différents.
J'avais commencé par vouloir reproduire les pits réels comme LeCreole.
Mais j'ai vite été confronté à des problèmes de lisibilité sur un écran moyen.
Donc depuis le début les KaTZ-Pit sont a mis chemin entre un pit classique et un glass cockpit avec une présentation améliorée des données.

Par contre sur la forme on est pas très loin.
Je vais d'ailleurs jeter un coup d'oeil sur snap.svg, pour créer des jauges qui changent de couleur par exemple ca peut etre intéressant.

Merci de l'info


Ce message a été modifié par KaTZe - 11 Oct 2014, 16:55.

[gillesdrone]

bravo à tous les deux impressionnant la vidéo

[Postal2]

j'atend le panel F-15 avec imaptience !!! avec tout les sous menu etc !!!! bon sa ! sur l'écran tactile sa va être une tuerie ! .

[Lecreole]

bravo à tous les deux impressionnant la vidéo

Vidéo?? quel vidéo?
Si tu parle du lien plus haut c'est le resultat qu'on pourrait avoir au final