ex0170, Blockly Factory, construire des blocs d'instructions

code json de définition de ce bloc :

Blockly.Blocks['text_afficheln'] = {
//==================================
// Définit l'aspect du bloc
init: function() {
  this.jsonInit({
    "type": "text_afficheln",
    "message0": "afficherLn %1",
    "args0": [
      {
        "type": "input_value",
        "name": "TEXT"
      }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour":  160,
    "tooltip": "Afficher le texte avec retour à la ligne ...",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="text_afficheln"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['text_afficheln'] = {
  init: function() {
    this.appendValueInput("TEXT")
        .setCheck(null)
        .appendField("afficheLn");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(160);
 this.setTooltip("Afficher le texte avec retour à la ligne, ...");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['text_afficheln'] = function(block) {
//======================================================
// Défini la fonctionnalité du bloc
var msg = Blockly.JavaScript.valueToCode(block, 'TEXT', Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';
return "Display(" + (  msg + "+'\\n'") + ");\n"; 
// Insertion d'un retour de ligne à la fin de l'affichage : "\n"
};

Pour être multilangue, il faut remplacer :

"afficherLn %1" par bgBlockly.Msg['TEXT_AFFICHELN_TITLE']
"Afficher le texte avec retour à la ligne ..." par bgBlockly.Msg['TEXT_AFFICHELN_TOOLTIP']
"colour": 160 par "colour": bgBlockly.Msg["TEXTS_HUE"]

et avoir défini :

bgBlockly.Msg["TEXT_AFFICHELN_TITLE"] = "afficherLn %1";
bgBlockly.Msg["TEXT_AFFICHELN_TOOLTIP"] = "Afficher le texte avec retour à la ligne" 
                                      + ", le nombre ou une autre valeur spécifiée.";
bgBlockly.Msg["TEXTS_HUE"] = "160";

cacher

code json de définition de ce bloc :

Blockly.Blocks['puzzle_power_plug'] = {
//"""""""""""""""""""""""""""""""""""""
  init: function() {
    this.jsonInit({
      "type": "puzzle_power_plug",
      "message0":"Prise 230 V %1 %2 %3",
      "args0": [
        {
          "type": "input_dummy"
        },
        {
          "type": "field_image",
          "src": "images/puzzle_power_plug.jpg",
          "width": 100,
          "height": 100,
          "alt": "230 V"
        },
        {
          "type": "input_value",
          "name": "APPAREIL",
          "align": "CENTRE"
        }
      ],
      "inputsInline": false,
      "colour": 230,
      "tooltip": "Prise de courant 230 V",
      "helpUrl": ""      
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_power_plug"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_power_plug'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Prise 230 V");
    this.appendValueInput("APPAREIL")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField(new Blockly.FieldImage("images/puzzle_power_plug.jpg", 100, 100, "230 V"));
    this.setInputsInline(false);
    this.setColour(230);
 this.setTooltip("Prise de courant 230 V");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_power_plug'] = function(block) {
//=========================================================
// Ajoute la suite d'instructions
var msg = Blockly.JavaScript.valueToCode(block, 'APPAREIL',
    Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';
  
return "PLUG_" + msg;
};

Pour être multilangue, il faut remplacer :

"Prise 230 V %1 %2 %3" par bgBlockly.Msg['PUZZLE_POWER_PLUG_TITLE']
"Prise de courant 230 V" par bgBlockly.Msg['PUZZLE_POWER_PLUG_TOOLTIP']

et avoir défini :

bgBlockly.Msg['PUZZLE_POWER_PLUG_TITLE'] = "Prise 230 V %1 %2 %3";
bgBlockly.Msg['PUZZLE_POWER_PLUG_TOOLTIP'] = "Prise de courant 230 V";

cacher

code json de définition de ce bloc :

Blockly.Blocks['puzzle_screen'] = {
//"""""""""""""""""""""""""""""""""""""
  init: function() {
    this.jsonInit({
      "type": "puzzle_screen",
      "message0": "%1",
      "args0": [
        {
          "type": "field_image",
          "src": "images/puzzle_screen.jpg",
          "width": 100,
          "height": 100,
          "alt": "Écran"
        }
      ],
      "output": null,
      "colour": 90,
      "tooltip": "C'est un écran",
      "helpUrl": ""   
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_screen"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_screen'] = {
//""""""""""""""""""""""""""""""""""
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldImage("images/puzzle_screen.jpg", 100, 100, "Écran"));
    this.setOutput(true, null);
    this.setColour(90);
    this.setTooltip("C'est un écran");
    this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_screen'] = function(block) {
//=====================================================
  var msg = "Ecran";
  return [msg, Blockly.JavaScript.ORDER_NONE];
};

Pour être multilangue, il faut remplacer :

"images/puzzle_screen.jpg" par bgBlockly.Msg['PUZZLE_SCREEN_IMAGE']
"C'est un écran" par bgBlockly.Msg['PUZZLE_SCREEN_TOOLTIP']

et avoir défini :

bgBlockly.Msg['PUZZLE_SCREEN_IMAGE'] = "images/puzzle_screen.jpg";
bgBlockly.Msg['PUZZLE_SCREEN_TOOLTIP'] = "C'est un écran";

cacher

code json de définition de ce bloc :

Blockly.Blocks['puzzle_desktop'] = {
//""""""""""""""""""""""""""""""""
  init: function() {
    this.jsonInit({
      "type": "puzzle_desktop",
      "message0": "Desktop %1 %2 %3 Écran %4 Clavier %5 Souris %6",
      "args0": [
        {
          "type": "input_dummy"
        },
        {
          "type": "field_image",
          "src": "images/puzzle_desktop.jpg",
          "width": 100,
          "height": 100,
          "alt": "Desktop"
        },
        {
          "type": "input_dummy"
        },
        {
          "type": "input_value",
          "name": "SCREEN",
          "align": "CENTRE"
        },
        {
          "type": "input_value",
          "name": "KEABORD",
          "align": "CENTRE"
        },
        {
          "type": "input_value",
          "name": "MOUSE",
          "align": "CENTRE"
        }
      ],
      "inputsInline": false,
      "output": null,
      "colour": 230,
      "tooltip": "C'est un Desktop",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_desktop"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_desktop'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Desktop");
    this.appendDummyInput()
        .appendField(new Blockly.FieldImage("images/puzzle_desktop.jpg", 100, 100, "Desktop"));
    this.appendValueInput("SCREEN")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("Écran");
    this.appendValueInput("KEYBOARD")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("Clavier");
    this.appendValueInput("MOUSE")
        .setCheck(null)
        .setAlign(Blockly.ALIGN_CENTRE)
        .appendField("Clavier");
    this.setInputsInline(false);
    this.setOutput(true, null);
    this.setColour(230);
 this.setTooltip("C'est un Desktop");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_desktop'] = function(block) {
//====================================================
  // Ajoute la suite d'instructions
  var msg1 = Blockly.JavaScript.valueToCode(block, 'SCREEN',
      Blockly.JavaScript.ORDER_NONE) || '\'\'';
  var msg2 = Blockly.JavaScript.valueToCode(block, 'KEABORD',
      Blockly.JavaScript.ORDER_NONE) || '\'\'';
  var msg3 = Blockly.JavaScript.valueToCode(block, 'MOUSE',
      Blockly.JavaScript.ORDER_NONE) || '\'\'';

  var msg = "Desktop>" + msg1 + "-" + msg2 + "." + msg3;
  return [msg, Blockly.JavaScript.ORDER_NONE];
};

Pour être multilangue, il faut remplacer :

"Desktop %1 %2 %3 Écran %4 Clavier %5 Souris %6" par bgBlockly.Msg['PUZZLE_DESKTOP_TITLE']
"images/puzzle_desktop.jpg" par bgBlockly.Msg['PUZZLE_DESKTOP_IMAGE']
"C'est un Desktop" par bgBlockly.Msg['PUZZLE_DESKTOP_TOOLTIP']

et avoir défini :

bgBlockly.Msg['PUZZLE_DESKTOP_TITLE'] = "Desktop %1 %2 %3 Écran %4 Clavier %5 Souris %6";
bgBlockly.Msg['PUZZLE_DESKTOP_IMAGE'] = "images/puzzle_desktop.jpg";
bgBlockly.Msg['PUZZLE_DESKTOP_TOOLTIP'] = "C'est un Desktop";

cacher

code json de définition de ce bloc :


Blockly.Blocks['puzzle_characteristics'] = {
//""""""""""""""""""""""""""""""""""""""""""
// c.f. https://developers.google.com/blockly/
//      guides/create-custom-blocks/define-blocks#label
  init: function() {
    this.jsonInit({
      "type": "puzzle_characteristics",
      "message0": "%1 %2 image : %3 jambes : %4 %5 traits : %6",
      "args0": [
        {
          "type": "field_label",
          "text": "Chat",
          "name": "myAnimal"
        },
        {
          "type": "input_dummy"
        },
        {
          "type": "input_value",
          "name": "IMAGE",
          "check": "type_picture",
          "align": "RIGHT"
        },
        {
          "type": "field_dropdown",
          "name": "LEGS",
          "options": [
            [
              "0",
              "0"
            ],
            [
              "2",
              "2"
            ],
            [
              "4",
              "4"
            ],
            [
              "6",
              "6"
            ]
          ]
        },
        {
          "type": "input_dummy"
        },
        {
          "type": "input_statement",
          "name": "CHARACTERS"
        }
      ],
      "inputsInline": false,
      "colour": 120,
      "tooltip": "Caractéristiques",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_characteristics">
  <data>abeille,BEE</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_characteristics'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Chat", "myAnimal");
    this.appendValueInput("IMAGE")
        .setCheck("type_picture")
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("image :");
    this.appendDummyInput()
        .appendField("jambes :")
        .appendField(new Blockly.FieldDropdown
           ([["0","0"], ["2","2"], ["4","4"], ["6","6"]]), "LEGS");
    this.appendStatementInput("CHARACTERS")
        .setCheck(null)
        .appendField("traits :");
    this.setInputsInline(false);
    this.setColour(120);
 this.setTooltip("Caractéristiques");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_characteristics'] = function(block) {
//==============================================================
// Pour information : block === this
// Ajoute la suite d'instructions
var msg_image = Blockly.JavaScript.valueToCode(block, 'IMAGE',
    Blockly.JavaScript.ORDER_NONE) || '\'\'';
var msg_legs = block.getFieldValue('LEGS');

// Pas d'indentation désirée, 
// c.f. https://developers.google.com/blockly/reference/js/Blockly.Generator#INDENT
Blockly.JavaScript.INDENT = ""; 

var msg_characters = Blockly.JavaScript.statementToCode(block, 'CHARACTERS');

// Données d'utilisateur dans le champ <data> dans la toolbox et de la StartBlocks
var strData = block.data;
var strName = '???';
var strVal  = '?';

if (strData != null) { // S'il y a une donnée, utilise-la
  var aData = strData.split(","); // Récupère les différents paramètres
  strName = aData[0];
  strVal  = aData[1];
  } 

//Display(msg_image + '  ' + msg_legs + '  ' + '' + '  ' + 
//        block.getFieldValue("myAnimal") + '  ' + this.data + '\n');
block.getField("myAnimal").setText(strName); // Change le premier mot du bloc
var msg = strVal + ">" + msg_image + "-" + msg_legs + msg_characters + "\n";

return msg; // Retourne une instruction, pas une valeur
};

Pour être multilangue, il faut remplacer :

"%1 %2 image : %3 jambes : %4 %5 traits : %6" par bgBlockly.Msg['PUZZLE_CHARACTERISTICSP_TITLE']
"Caractéristiques" par bgBlockly.Msg['PUZZLE_CHARACTERISTICSP_TOOLTIP']

et avoir défini :

bgBlockly.Msg['PUZZLE_CHARACTERISTICSP_TITLE'] = "%1 %2 image : %3 jambes : %4 %5 traits : %6";
bgBlockly.Msg['PUZZLE_CHARACTERISTICSP_TOOLTIP'] = "Caractéristiques";

cacher

Des modifications ont été apportée à la définition du bloc
après utilisation de la "Bloc Factory".
Un champ : "name" a été ajouté.
Les images des blocs sont définis dans le champ data
des blocs définis dans la 'toolbox' et la 'StartBlocks'.
Les images ne sont modifiées que dans le champ d'utilisation,
je ne sais pas les modifier dans la 'toolbox'.

code json de définition de ce bloc :

Blockly.Blocks['puzzle_image100x70'] = {
//""""""""""""""""""""""""""""""""""""""""""
// c.f. https://developers.google.com/blockly/
//      guides/create-custom-blocks/define-blocks#label
  init: function() {
    this.jsonInit({
      "type": "puzzle_image100x70",
      "message0": "%1",
      "args0": [
        {
          "type": "field_image",
          "src": "images/bee.jpg",
          "width": 100,
          "height": 70,
          "alt": "image",
          "name": "theAnimal"
        }
      ],
      "data": "ask,?",
      "output": null,
      "colour": 30,
      "tooltip": "",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_image100x70">
  <data>bee,BEE</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_image100x70'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldImage("images/bee.jpg", 100, 70, "image"), "theAnimal");
    this.setOutput(true, null);
    this.setColour(30);
    this.setTooltip("");
    this.setHelpUrl("");
    this.data ="ask,?";
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_image100x70'] = function(block) {
//==========================================================
// Pour information : block === this
//block.getField("theAnimal").setText(this.data); // Change le premier mot du bloc
var oField = block.getField('theAnimal'); // Champ qui doit contenir un "field_image"
//Display(oField.getValue() + '  ' + block.data +  '\n');

// Données d'utilisateur dans le champ <data> dans la toolbox et de la StartBlocks
var strData = block.data;
var strName = '???';
var strVal  = '?';

if (strData != null) { // S'il y a une donnée, utilise-la
  var aData = strData.split(","); // Récupère les différents paramètres
  strName = aData[0];
  strVal  = aData[1];
  } 

//block.setTooltip(strName); // Change le texte d'aide associé à l'objet
oField.setValue('images/' + strName + '.jpg'); // Change l'image

 // Retourne une valeur, pas une instruction
return [strVal, Blockly.JavaScript.ORDER_NONE];
};

cacher

Des modifications ont été apportée à la définition du bloc
après utilisation de la "Bloc Factory", c.f. : field_label
Les titres des blocs sont définis dans le champ data
des blocs définis dans la 'toolbox' et la 'StartBlocks'.
Un champ : "name" a été ajouté.
Les textes ne sont modifiées que dans le champ d'utilisation,
je ne sais pas les modifier dans la 'toolbox'.

code json de définition de ce bloc :

Blockly.Blocks['puzzle_traits'] = {
//"""""""""""""""""""""""""""""""""
// c.f. https://developers.google.com/blockly/
//      guides/create-custom-blocks/define-blocks#label
  init: function() {
    this.jsonInit({
      "type": "puzzle_traits",
       "message0": "%1",
       "args0": [{
           "type": "field_label",
           "text": "moustache",
           "name": "myTraits"
         }],
      "data": "trait,?",   
      "previousStatement": null,
      "nextStatement": null,
      "colour": 290,
      "tooltip": "traits",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_traits">
  <data>Bec,D</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_traits'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("Bec", "myTraits");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(290);
    this.setTooltip("Bec");
    this.setHelpUrl("");
    this.data = "trait,?";  
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_traits'] = function(block) {
//=====================================================
// Pour information : block === this
//block.getField("myTraits").setText(this.data); // Change le premier mot du bloc
var oField = block.getField('myTraits'); // Champ qui doit contenir un "field_image"
//Display(oField.getValue() + '  ' + block.data +  '\n');

// Données d'utilisateur dans le champ <data> dans la toolbox et de la StartBlocks
var strData = block.data;
var strName = '???';
var strVal  = '?';

if (strData != null) { // S'il y a une donnée, utilise-la
  var aData = strData.split(","); // Récupère les différents paramètres
  strName = aData[0];
  strVal  = aData[1];
  } 

block.setTooltip(strName); // Change le texte d'aide associé à l'objet
oField.setValue(strName); // Change le texte

return strVal; // Retourne une instruction, pas une valeur
};

cacher

Des modifications ont été apportées dans la version codée dans ex0952,
pour plus de souplesse dans la définition de l'objet,
pour pouvoir avoir plus que 5 puzzles différents.

code json de définition de ce bloc :
Version multilangue.

Blockly.Blocks['puzzle_characteristics_choice'] = {
//"""""""""""""""""""""""""""""""""""""""""""""""""
// c.f. https://developers.google.com/blockly/
//      guides/create-custom-blocks/define-blocks#label
// Version multilangue
  init: function() {
    this.jsonInit({
      "type": "puzzle_characteristics_choice",
      "message0": bgBlockly.Msg["PUZZLE_CHARACTERISTICS_TITLE"],
      "args0": [
        {
          "type": "field_dropdown",
          "name": "myAnimal",
          "options": [
            [
              bgBlockly.Msg["XML_CHAR_BEE"],
              "BEE"
            ],
            [
              bgBlockly.Msg["XML_CHAR_CAT"],
              "CAT"
            ],
            [
              bgBlockly.Msg["XML_CHAR_DUCK"],
              "DUCK"
            ],
            [
              bgBlockly.Msg["XML_CHAR_SNAIL"],
              "SNAIL"
            ],
            [
              bgBlockly.Msg["XML_CHAR_MOUSE"],
              "MOUSE"
            ]
          ]
        },
        {
          "type": "input_dummy"
        },
        {
          "type": "input_value",
          "name": "IMAGE",
          "check": "type_picture",
          "align": "RIGHT"
        },
        {
          "type": "field_dropdown",
          "name": "LEGS",
          "options": [
            [
              "0",
              "0"
            ],
            [
              "2",
              "2"
            ],
            [
              "4",
              "4"
            ],
            [
              "6",
              "6"
            ]
          ]
        },
        {
          "type": "input_dummy"
        },
        {
          "type": "input_statement",
          "name": "CHARACTERS"
        }
      ],
      "inputsInline": false,
      "colour": 120,
      "tooltip": "",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_characteristics_choice"></block>

code javascript de définition de ce bloc :
Version en français uniquement. c.f. ex0952.js

Blockly.Blocks['puzzle_characteristics_choice'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([
            ["Abeille","BEE"], ["Chat","CAT"], ["Canard","DUCK"], 
            ["Escargot","SNAIL"], ["Souris","MOUSE"]
          ]), "myAnimal");
    this.appendValueInput("IMAGE")
        .setCheck("type_picture")
        .setAlign(Blockly.ALIGN_RIGHT)
        .appendField("image :");
    this.appendDummyInput()
        .appendField("jambes :")
        .appendField(new Blockly.FieldDropdown([["0","0"], ["2","2"], ["4","4"], ["6","6"]]), "LEGS");
    this.appendStatementInput("CHARACTERS")
        .setCheck(null)
        .appendField("traits :");
    this.setInputsInline(false);
    this.setColour(120);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_characteristics_choice'] = function(block) {
//=====================================================================
// Pour information : block === this
// Ajoute la suite d'instructions
var msg_image = Blockly.JavaScript.valueToCode(block, 'IMAGE',
    Blockly.JavaScript.ORDER_NONE) || '\'\'';
var msg_legs = block.getFieldValue('LEGS');

// Pas d'indentation désirée, 
// c.f. https://developers.google.com/blockly/reference/js/Blockly.Generator#INDENT
Blockly.JavaScript.INDENT = ""; 

var msg_characters = Blockly.JavaScript.statementToCode(block, 'CHARACTERS');

//Display(msg_image + '  ' + msg_legs + '  ' + '' + '  ' + 
//        block.getFieldValue("myAnimal") + '  ' + this.data + '\n');
var strVal = block.getFieldValue("myAnimal");
var msg = strVal + ">" + msg_image + "-" + msg_legs + msg_characters + "\n";

return msg; // Retourne une instruction, pas une valeur
};

Des modifications ont été apportées dans la version codée dans ex0952, pour plus de souplesse dans la définition de l'objet, pour pouvoir avoir plus que 5 puzzles différents.

cacher

Des modifications ont été apportées dans la version codée dans ex0952,
pour plus de souplesse dans la définition de l'objet,
pour pouvoir avoir plus que 5 puzzles différents.

code json de définition de ce bloc :

Blockly.Blocks['puzzle_image100x70_choice'] = {
//"""""""""""""""""""""""""""""""""""""""""""""
  init: function() {
    this.jsonInit({
      "type": "puzzle_image100x70_choice",
      "message0": "%1",
      "args0": [
        {
          "type": "field_dropdown",
          "name": "CHOICE",
          "options": [
            [
              {
                "src": "images/bee.jpg",
                "width": 100,
                "height": 70,
                "alt": "bee"
              },
              "BEE"
            ],
            [
              {
                "src": "images/cat.jpg",
                "width": 100,
                "height": 70,
                "alt": "cat"
              },
              "CAT"
            ],
            [
              {
                "src": "images/duck.jpg",
                "width": 100,
                "height": 70,
                "alt": "duck"
              },
              "DUCK"
            ],
            [
              {
                "src": "images/snail.jpg",
                "width": 100,
                "height": 70,
                "alt": "snail"
              },
              "SNAIL"
            ],
            [
              {
                "src": "images/mouse.jpg",
                "width": 100,
                "height": 70,
                "alt": "mouse"
              },
              "MOUSE"
            ]
          ]
        }
      ],
      "output": null,
      "colour": 30,
      "tooltip": "",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_image100x70_choice"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['puzzle_image100x70_choice'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([
          [{"src":"images/bee.jpg","width":100,"height":70,"alt":"bee"},"BEE"], 
          [{"src":"images/cat.jpg","width":100,"height":70,"alt":"cat"},"CAT"], 
          [{"src":"images/duck.jpg","width":100,"height":70,"alt":"duck"},"DUCK"], 
          [{"src":"images/snail.jpg","width":100,"height":70,"alt":"snail"},"SNAIL"], 
          [{"src":"images/mouse.jpg","width":100,"height":70,"alt":"mouse"},"MOUSE"]]), 
          "CHOICE");
    this.setOutput(true, null);
    this.setColour(30);
 this.setTooltip("");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_image100x70_choice'] = function(block) {
//=================================================================
// Pour information : block === this
//var oField = block.getField('CHOICE'); // Champ qui doit contenir un "field_image"

var strName = block.getFieldValue('CHOICE');

 // Retourne une valeur, pas une instruction
return [strName, Blockly.JavaScript.ORDER_NONE];
};

cacher

Des modifications ont été apportées dans la version codée dans ex0952,
pour plus de souplesse dans la définition de l'objet,
pour pouvoir avoir plus que 5 puzzles différents.

code json de définition de ce bloc :
Version multilangues.

Blockly.Blocks['puzzle_traits_choice'] = {
//""""""""""""""""""""""""""""""""""""""""
// c.f. https://developers.google.com/blockly/
//      guides/create-custom-blocks/define-blocks#label
  init: function() {
    this.jsonInit({
      "type": "puzzle_traits_choice",
      "message0": "%1",
      "args0": [
        {
          "type": "field_dropdown",
          "name": "CHOICE",
          "options": [
            [
              bgBlockly.Msg["XML_TRAITS_HONEY"],
              "B1"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_STINGER"],
              "B2"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_FUR"],
              "C1"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_WHISKERS"],
              "C2"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_BEAK"],
              "D1"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_FEATHERS"],
              "D2"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_SHELL"],
              "S1"
            ],
            [
              bgBlockly.Msg["XML_TRAITS_SLIME"],
              "S2"
            ]
          ]
        }
      ],
      "previousStatement": null,
      "nextStatement": null,
      "colour": 290,
      "tooltip": "",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="puzzle_traits_choice"></block>

code javascript de définition de ce bloc :
Version en français uniquement.

Blockly.Blocks['puzzle_traits_choice'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([
            ["Miel","HONEY"], ["Dare","STINGER"], ["Fourrure","Fur"], 
            ["Moustaches","WHISKERS"], ["Bec","BEAK"]
        ]), "CHOICE");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(290);
    this.setTooltip("");
    this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['puzzle_traits_choice'] = function(block) {
//============================================================
// Pour information : block === this
//var oField = block.getField('CHOICE'); // Champ qui doit contenir un "field_image"

var strName = block.getFieldValue('CHOICE');
return strName; // Retourne une instruction, pas une valeur
};

cacher

code json de définition de ce bloc :

Blockly.Blocks['logo_forward_backward'] = {
//=========================================
init: function() {
  this.jsonInit({
    "type": "logo_forward_backward",
    "message0": "%1 de %2",
    "args0": [
      {
        "type": "field_dropdown",
        "name": "DIRECTION",
        "options": [
          [
            "avancer",
            "FORWARD"
          ],
          [
            "reculer",
            "BACKWARD"
          ]
        ]
      },
      {
        "type": "input_value",
        "name": "PIXELS",
        "check": "Number"
      }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour": 20,
    "tooltip": "Avance ou recule du nombre de pixels donnés.",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="logo_forward_backward">
  <value name="PIXELS">
    <shadow type="math_number">
      <field name="NUM">50</field>
    </shadow>
  </value>
  <data>idBouleBleue, 2</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['logo_forward_backward'] = {
//=========================================
  init: function() {
    this.appendValueInput("PIXELS")
        .setCheck("Number")
        .appendField(new Blockly.FieldDropdown([["avancer","FORWARD"], ["reculer","BACKWARD"]]), "DIRECTION")
        .appendField("de");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("Avance ou recule du nombre de pixels donnés.");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['logo_forward_backward'] = function(block) {
//===================================================
// Déplacement de la boule bleue à la position désirée.
var direction = block.getFieldValue('DIRECTION');
var nPixels = Blockly.JavaScript.valueToCode(block, 'PIXELS',
    Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';

var strId_image = "idBouleBleue"; // Valeur par défaut
var nTimeDelta  = 5; // Valeur par défaut

// Données d'utilisateur dans le champ <data> dans la toolbox
var strData = this.data;

if (strData != null) { // S'il y a une donnée, utilise-la
  var aData = strData.split(","); // Récupère les différents paramètres
  strId_image = aData[0];
  nTimeDelta  = aData[1];
  } 

if (direction == "FORWARD") 
  return "Forward('" + strId_image + "', " + nPixels + ", " + nTimeDelta + ");\n";
else
  return "Forward('" + strId_image + "', -(" + nPixels + "), " + nTimeDelta + ");\n";
};

Pour être multilangue, il faut remplacer :

"%1 de %2" par bgBlockly.Msg['LOGO_FORWARD_BACKWARD_TITLE']
"avancer" par bgBlockly.Msg["LOGO_FORWARD_BACKWARD_DIRECTION_FORWARD"]
"reculer" par bgBlockly.Msg["LOGO_FORWARD_BACKWARD_DIRECTION_BACKWARD"]
"Avance ou recule du nombre de pixels donnés." par bgBlockly.Msg['LOGO_FORWARD_BACKWARD_TOOLTIP']
"colour": 20 par "colour": bgBlockly.Msg["LOGOS_HUE"]

et avoir défini :

bgBlockly.Msg["LOGO_FORWARD_BACKWARD_TITLE"] = "%1 de %2";
bgBlockly.Msg["LOGO_FORWARD_BACKWARD_DIRECTION_FORWARD"] = "avance";
bgBlockly.Msg["LOGO_FORWARD_BACKWARD_DIRECTION_BACKWARD"] = "recule";
bgBlockly.Msg["LOGO_FORWARD_BACKWARD_TOOLTIP"] = "Avance ou recule du nombre de pixels donnés.";
bgBlockly.Msg["LOGO_FORWARD_BACKWARD_HELPURL"] = "";  // untranslated
bgBlockly.Msg["LOGOS_HUE"] = "20";

cacher

code json de définition de ce bloc :

Blockly.Blocks['logo_left_right'] = {
//=========================================
init: function() {
  this.jsonInit({
    "type": "logo_left_right",
    "message0": "%1 %2",
    "args0": [
      {
        "type": "field_dropdown",
        "name": "SENS",
        "options": [
          [
            "tourne à gauche de",
            "LEFT"
          ],
          [
            "tourne à droite de",
            "RIGHT"
          ]
        ]
      },
      {
        "type": "input_value",
        "name": "ANGLE",
        "check": "Number"
      }
    ],
    "previousStatement": null,
    "nextStatement": null,
    "colour": 20,
    "tooltip": "Tourne à gauche ou à droite de l'angle donné en radians.",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="logo_left_right">
  <value name="ANGLE">
    <shadow type="math_number">
      <field name="NUM">45</field>
    </shadow>
  </value>
  <data>idBouleBleue, 2</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['logo_left_right'] = {
  init: function() {
    this.appendValueInput("ANGLE")
        .setCheck("Number")
        .appendField(new Blockly.FieldDropdown([["tourne à gauche de","LEFT"], 
                                    ["tourne à droite de","RIGHT"]]), "SENS");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("Tourne à gauche ou à droite de l'angle donné en radians.");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['logo_left_right'] = function(block) {
//==================================================
// Rotation à droite de la boule bleue de l'angle désirée.
var sens = block.getFieldValue('SENS');
var nAngle = Blockly.JavaScript.valueToCode(block, 'ANGLE',
    Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';

var strId_image = "idBouleBleue"; // Valeur par défaut
var nTimeDelta  = 5; // Valeur par défaut

// Données d'utilisateur dans le champ <data> dans la toolbox
var strData = this.data;

if (strData != null) { // S'il y a une donnée, utilise-la
  var aData = strData.split(","); // Récupère les différents paramètres
  strId_image = aData[0];
  nTimeDelta  = aData[1];
  } 

if (sens == "LEFT") 
  return "Rotate('" + strId_image + "', -(" + nAngle + "), " + nTimeDelta + ");\n";
else
  return "Rotate('" + strId_image + "', " + nAngle + ", " + nTimeDelta + ");\n";
// Le dernier paramètre est le temps d'attente entre chaque rotation de 1 degré
};

Pour être multilangue, il faut remplacer :

"%1 %2" par bgBlockly.Msg['LOGO_LEFT_RIGHT_TITLE']
"tourne à gauche de" par bgBlockly.Msg["LOGO_LEFT_RIGHT_SENS_LEFT"]
"tourne à droite de" par bgBlockly.Msg["LOGO_LEFT_RIGHT_SENS_RIGHT"]
"Tourne à gauche ou à droite du nombre de degrés donnés." par bgBlockly.Msg["LOGO_LEFT_RIGHT_TOOLTIP"]

et avoir défini :

bgBlockly.Msg["LOGO_LEFT_RIGHT_TITLE"] = "%1 %2";
bgBlockly.Msg["LOGO_LEFT_RIGHT_SENS_LEFT"] = "tourne à gauche de";
bgBlockly.Msg["LOGO_LEFT_RIGHT_SENS_RIGHT"] = "tourne à droite de";
bgBlockly.Msg["LOGO_LEFT_RIGHT_TOOLTIP"] = "Tourne à gauche ou à droite du nombre de degrés donnés.";

cacher

code json de définition de ce bloc :

Blockly.Blocks['card_movex1x2'] = {
//=================================
init: function() {
  this.jsonInit({
    "type": "card_movex1x2",
    "message0": "déplace la carte de la case %1 à la case %2",
    "args0": [
      {
        "type": "input_value",
        "name": "POSX1",
        "check":"Number"
      }
      ,{
        "type": "input_value",
        "name": "POSX2",
        "check":"Number"
      }
    ],
    "data": "5", // Valeurs par défaut.
    "inputsInline": true,
    "previousStatement": null,
    "nextStatement": null,
    "colour":  20,
    "tooltip": "déplace la carte d'une case à une autre.",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="card_movex1x2">
  <value name="POSX1">
    <shadow type="math_number">
      <field name="NUM">3</field>
    </shadow>
  </value>
  <value name="POSX2">
    <shadow type="math_number">
      <field name="NUM">2</field>
    </shadow>
  </value>
  <data>1</data>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['card_movex1x2'] = {
//=================================
  init: function() {
    this.appendValueInput("POSX1")
        .setCheck("Number")
        .appendField("déplace la carte de la case");
    this.appendValueInput("POSX2")
        .setCheck("Number")
        .appendField("à la case");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(20);
 this.setTooltip("déplace la carte d'une case à une autre.");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['card_movex1x2'] = function(block) {
//===================================================
// Déplacement de la boule bleue à la position désirée.
var nPosX1 = Blockly.JavaScript.valueToCode(block, 'POSX1',
    Blockly.JavaScript.ORDER_NONE) || '\'\'';
var nPosX2 = Blockly.JavaScript.valueToCode(block, 'POSX2',
    Blockly.JavaScript.ORDER_NONE) || '\'\'';

var nTimeDelta  = 5; // Valeur par défaut

// Données d'utilisateur dans le champ <data> dans la toolbox
var strData = this.data;

if (strData != null) { // S'il y a une donnée, utilise-la
  nTimeDelta  = parseInt(strData);
  } 

return "MoveX1X2(" + nPosX1 + ", " + nPosX2 + ", " + nTimeDelta + ");\n";
// Le dernier paramètre est le temps d'attente entre chaque déplacement de 1 pixel
};

Pour être multilangue, il faut remplacer :

"déplace la carte de la case %1 à la case %2" par bgBlockly.Msg["CARD_MOVEX1X2_TITLE"]
"déplace la carte d'une case à une autre." par bgBlockly.Msg["CARD_MOVEX1X2_TOOLTIP"]

et avoir défini :

bgBlockly.Msg["CARD_MOVEX1X2_TITLE"] = "déplace la carte de la case %1 à la case %2";
bgBlockly.Msg["CARD_MOVEX1X2_TOOLTIP"] = "déplace la carte d'une case à une autre.";

cacher

code json de définition de ce bloc :

Blockly.Blocks['card_get_card'] = {
//==================================
init: function() {
  this.jsonInit({
    "type":"card_get_card",
    "message0": "Carte de la case %1",
    "args0": [
      {
        "type": "input_value",
        "name": "POSX",
        "check":"Number"
      }
    ],
    "output": "Number",
    "colour": 20,
    "tooltip": "Lit la valeur de la carte se trouvant dans la case donnée."
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="card_get_card"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['card_get_card'] = {
  init: function() {
    this.appendValueInput("POSX")
        .setCheck("Number")
        .appendField("Carte de la case");
    this.setOutput(true, "Number");
    this.setColour(30);
 this.setTooltip("Lit la valeur de la carte se trouvant dans la case donnée.");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['card_get_card'] = function(block) {
//=====================================================
// Lecture de la valeur de la carte se trouvant dans la case donnée
var nPosX = Blockly.JavaScript.valueToCode(block, 'POSX',
    Blockly.JavaScript.ORDER_NONE) || '\'\'';

return ["GetCardValue(" + nPosX + ")", Blockly.JavaScript.ORDER_FUNCTION_CALL]; 
// c.f. blockly/generators/javascript/math.js
};

Pour être multilangue, il faut remplacer :

"Carte de la case %1" par bgBlockly.Msg["CARD_GET_CARD_TITLE"]
"Lit la valeur de la carte se trouvant dans la case donnée." par bgBlockly.Msg["CARD_GET_CARD_TOOLTIP"]

et avoir défini :

bgBlockly.Msg["CARD_GET_CARD_TITLE"] = "Carte de la case %1";
bgBlockly.Msg["CARD_GET_CARD_TOOLTIP"] = "Lit la valeur de la carte se trouvant dans la case donnée.";

cacher

code json de définition de ce bloc :

Blockly.Blocks['loop_do_while'] = {
//==================================
init: function() {
  this.jsonInit({
    "type": "loop_do_while",
      "message0": "faire : %1 jusqu'à ce que %2",
      "args0": [
        {
          "type": "input_statement",
          "name": "STATEMENT"
        },
        {
          "type": "input_value",
          "name": "UNTIL",
          "check": "Boolean"
        }
      ],
      "previousStatement": null,
      "nextStatement": null,
      "colour": 120,
      "tooltip": "Répète une suite d'instructions. "
             + "Exécute au moins une fois les instructions",
      "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="loop_do_while"></block>

code javascript de définition de ce bloc :

Blockly.Blocks['loop_do_while'] = {
  init: function() {
    this.appendStatementInput("STATEMENT")
        .setCheck(null)
        .appendField("faire :");
    this.appendValueInput("UNTIL")
        .setCheck("Boolean")
        .appendField("jusqu'à ce que");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(120);
 this.setTooltip("Répète une suite d'instructions. "
        + "Exécute au moins une fois les instructions");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

À voir, pas fait...

cacher

La couleur a été remplacée par 'FFFF80' qui est un jaune pale.
Le texte par défaut est défini dans le code xml de la toolbox.

code json de définition de ce bloc :

Blockly.Blocks['text_comment'] = {
//==================================
// Définit l'aspect du bloc
init: function() {
  this.jsonInit({
    "type": "text_comment",
    "message0": "// %1",
    "args0": [
      {
        "type": "input_value",
        "name": "COMMENT"
      }
    ],
    "inputsInline": true,
    "previousStatement": null,
    "nextStatement": null,
    "colour": '#FFFF80',
    "tooltip": "Un commentaire",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="text_comment">
  <value name="COMMENT">
    <shadow type="text">
      <field name="TEXT">écrivez un commentaire...</field>
    </shadow>
  </value>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['text_comment'] = {
  init: function() {
    this.appendValueInput("COMMENT")
        .setCheck(null)
        .appendField("//");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour('#FFFF80');
 this.setTooltip("Un commentaire");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :

Blockly.JavaScript['text_comment'] = function(block) {
//====================================================
// Défini la fonctionnalité du bloc
var msg = Blockly.JavaScript.valueToCode(block, 'COMMENT', Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';

// Enlève les guillmets placés automatiquement au début et en fin.
msg = msg.substr(1, msg.length-2); 
// Remplace le  \\  par un  \
msg = msg.replace(/\\\\/g, '\\'); //
// Remplace le  \'  par un  '
msg = msg.replace(/\\\'/g, '\'');
return "// " + msg + "\n"; 
};

cacher

La couleur a été remplacée par '#808000' qui est un brun-jaune.
Le texte par défaut est défini dans le code xml de la toolbox.

code json de définition de ce bloc :

Blockly.Blocks['text_pause'] = {
//==============================
// Définit l'aspect du bloc
init: function() {
  this.jsonInit({
    "type": "text_pause",
    "message0": "Pause de %1 %2",
    "args0": [
      {
        "type": "input_value",
        "name": "TIME",
        "check": "Number"
      },
      {
        "type": "field_dropdown",
        "name": "SPEED",
        "options": [
          [
            "[s]. Puis vitesse : inchangée",
            "NONE"
          ],
          [
            "[s]. Puis vitesse : lente",
            "SLOW"
          ],
           [
             bgBlockly.Msg["TEXT_PAUSE_SPEED_MEDIUM"],
             "MEDIUM"
           ],
          [
            "[s]. Puis vitesse : rapide",
            "FAST"
          ]
        ]
      }
    ],
    "inputsInline": true,
    "previousStatement": null,
    "nextStatement": null,
    "colour": "#808000",
    "tooltip": "Fait une pause de ... " +
               "secondes puis continue à la vitesse indiquée",
    "helpUrl": ""
    });
  }
};

code xml à ajouter dans la toolbox :

<block type="text_pause">
  <value name="TIME">
    <shadow type="math_number">
      <field name="NUM">1.5</field>
    </shadow>
  </value>
</block>

code javascript de définition de ce bloc :

Blockly.Blocks['text_pause'] = {
  init: function() {
    this.appendValueInput("TIME")
        .setCheck("Number")
        .appendField("Pause de");
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([
           ["[s]. Puis vitesse : inchangée","NONE"], 
           ["[s]. Puis vitesse : lente","SLOW"], 
           ["[s]. Puis vitesse : moyenne","MEDIUM"], 
           ["[s]. Puis vitesse : rapide","FAST"]]), "SPEED");
    this.setInputsInline(true);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour("#808000");
 this.setTooltip("Fait une pause de ... "+
               "secondes puis continue à la vitesse indiquée");
 this.setHelpUrl("");
  }
};

code javascript de génération de code :


Blockly.JavaScript['text_pause'] = function(block) {
//==================================================
// Défini la fonctionnalité du bloc
var vTime = Blockly.JavaScript.valueToCode(block, 
             'TIME', Blockly.JavaScript.ORDER_ATOMIC) || '\'\'';
var strSpeed = block.getFieldValue('SPEED');

return "Speed_execution( " + vTime + ", '" + strSpeed + "');\n"; 
};