meta données pour cette page
  •  

Pour rajouter un bouton dans le menu de gauche, il faut agir à cinq endroits différents :

  1. index.html pour l’insérer au bon endroit et définir son action,
  2. les fichiers de langue dans le dossier /lang/msg/fr.js (et aussi en.js please) pour le label qui apparaît sur le bouton
  3. /lang/code.js méthode initLanguage pour mettre le label sur le span
  4. /utils/blocklyDuino.js pour le changement horizontal/vertical
  5. le css pour définir les propriétés hor/ver : ça c’est bon si tu appliques btn_ver

Prenons exemple du bouton de supervision mais faîtes TRÈS attention aux noms des variables.

/!\ATTENTION AU TYPE DE BOUTON ! /!\

**Toutes les informations sur les classes de bouton ici : http://www.w3schools.com/bootstrap/bootstrap_buttons.asp**

1. Dans index.html je définis le bouton où je veux le voir apparaître :

        <div id="divSupervision">
                <button id="btn_supervision" class="text-left btn btn-primary btn-block ">
                    <span class="glyphicon glyphicon-blackboard"> </span>
                    <span id="span_supervision"> </span>
                </button>
        </div>

2. Comme le texte sur le bouton appartient à l’interface globale, sa traduction n’est pas dans /lang/blocks mais dans /lang/msg :

span_supervision : " contrôle de la carte",

3. Attention là c’est plus délicat, pas plus difficile. Ce fichier sert à définir l’initialisation de l’espace de travail de travail de Blockly@rduino, donc il faut aussi définir l’initialisation des textes sur les boutons. Dans le fichier /lang/code.js, en bas vous rajoutez :

document.getElementById('span_supervision').textContent = MSG['span_supervision'];

4. Comme on s’est compliqué la vie à gérer les positions dans le cas où votre écran est plutôt vertical ou horizontal, il faut encore rajouter la définition de nouveau bouton dans ces styles et ça se trouve dans le fichier /utils/blocklyDuino/.js encore une fois tout en bas. Dans :

if (newOrientation == 'hor') {

vous rajoutez

var divSupervision = document.getElementById("divSupervision");

divSupervision.className += " divConfig-hor";

et plus bas dans

} else {

vous rajoutez aussi

var btn_supervision  = document.getElementById("btn_supervision");

btn_supervision += " btn_ver";

5. Et pour finir (oui, enfin….) pour les experts il est possible de jouer avec le fichier /css/blocklyDuino.css qui contient les définitions de style, mais dans le point précédent je me suis contenté d’appliquer un style standard.