Tutoriel SteelSeries Gauges

4 - Personnalisation des jauges
Ouvrez avec un éditeur de texte le fichier le fichier gauges.js dans le dossier "scripts" ATTENTION, lorsque vous modifiez un fichier js, la moindre erreur, une virgule qui manque et plus rien ne fonctionne.
1. Modifier la langue
Modifiez la ligne 15 par exemple pour afficher en anglais var strings = LANG.EN,
Language disponnible dans le fichier language.js, Anglais, français, allemand, néerlandais, suédois, danois, finnois, norvégien, italien, espagnol et catalan.
2. les chemin d'accès
A la ligne 20 vous devez spécifier le chemin d'accès au répertoire qui contient les graphiques qui vont s'afficher dans l'infobulle au passage de la souris au-dessus d'une jauge. A la ligne 21 spécifiez vers quelle page seront redirigés les visiteurs si leur navigateur ne supporte pas la technologie utilisée par les jauges.
3. Afficher ou masquer des jauges
Permet de modifier l'apparence du fichier gauges-ss-basic.htm sans modifier celui-ci. Les textes sont assez explicites, vous devez mettre la valeur à true pour afficher et à false pour masquer une jauge ou le texte et le graphique de l'infobulle
4. couleur et transparence des aires qui indiquent le min et le max journalier
La ligne 69 modifie la couleur de l'aire des jauges températures, humidité pression la ligne 70 modifie la couleur de la moyenne du vent les 3 premiers chiffres sont la couleur RVB et le dernier chiffre, la transparence (0,3 = 30%)
5. Les échelles
Les lignes de 88 à 107 définissent la valeur min et max des graduations et ceci pour chaque unité de mesure la ligne 109 défini la couleur et la transparence de l'ombre.
6. L'apparence des jauges
Pour voir les différentes options allez sur catte page de demo
un exemple, vous voulez changer le design du cadran en or, vous remplacez frameDesign : steelseries.FrameDesign.TILTED_GRAY, par frameDesign : steelseries.FrameDesign.GOLD,
un exemple, vous voulez changer le design du fond en carbone, vous remplacez background : steelseries.BackgroundColor.BRUSHED_METAL, par background : steelseries.BackgroundColor.CARBON,
un exemple, vous voulez changer le design de l'aiguille, vous remplacez pointer : steelseries.PointerType.TYPE15, par pointer : steelseries.PointerType.TYPE4,
un exemple, vous voulez changer la couleur du LCD en bleu, vous remplacez lcdColour : steelseries.LcdColor.STANDARD, par lcdColour : steelseries.LcdColor.BLUE,
La liste complète des paramètres est visible ici
8. Les graphiques dans les infobulles
ici vous devez spécifier le nom de vos graphiques qui vont s'afficher dans les infobulles : Exemple : ['minitemp.png', 'intemp.png'], // Temperature: outdoor, indoor le premier est le nom du graphique pour la jauges de la température estérieure et le deuxième pour la température intérieure Ainsi de suite pour tous les autres graphiques.
9. Les infobulles
Ligne 2943, la couleur du fond, épaisseur et couleur de la bordure de l'infobulle Ligne 2952, la distance entre la position de la souris et l'infobulle, x et y Ligne 2954, le délai avant l'affichage de l'infobulle en ms
Vous avez aimé mon tutoriel, pensez à mon livre d'Or