meta données pour cette page
  •  

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
en:archives:blockly_rduino:create_blocks [2026/09/26 23:36] – supprimée - modification externe (Date inconnue) 127.0.0.1en:archives:blockly_rduino:create_blocks [2026/09/26 23:36] (Version actuelle) – ↷ Page déplacée de en:blockly_rduino:create_blocks à en:archives:blockly_rduino:create_blocks sebcanet
Ligne 1: Ligne 1:
 +===== To create new block, here is a simple way using Grove LED block as example: =====
 +
 +**1 - modify index.html, ** at the __end __ of file add categories and **name of blocks** you want to add in the Toolbox (//sidebar menu//) :
 +<code>
 +    <category name="CAT_ARDUINO_SERVO">
 +            <block type="servo_move"></block>
 +            <block type="servo_read_degrees"></block>
 +        </category>
 +    </category>
 +    <sep></sep>
 +    <category name="CAT_GROVE">
 +        <category name="CAT_GROVE_IN">
 +            <block type="grove_button"></block>
 +            <block type="grove_rotary_angle"></block>
 +            <block type="grove_tilt_switch"></block>
 +            <block type="grove_temporature_sensor"></block>
 +            <block type="grove_sound_sensor"></block>
 +            <block type="grove_pir_motion_sensor"></block>
 +            <block type="grove_line_finder"></block>
 +            <block type="grove_ultrasonic_ranger"></block>
 +            <block type="grove_thumb_joystick"></block>
 +        </category>
 +        <category name="CAT_GROVE_OUT">
 +            <block type="grove_led"></block>                           //we will use this one as example
 +            <block type="grove_piezo_buzzer"></block>
 +            <block type="grove_relay"></block>
 +            <block type="grove_motor_shield"></block>
 +            <block type="grove_rgb_led"></block>
 +        </category>
 +        <category name="CAT_GROVE_LCD">
 +            <block type="grove_serial_lcd_print"></block>
 +            <block type="grove_serial_lcd_power"></block>
 +            <block type="grove_serial_lcd_effect"></block>
 +        </category>
 +        <category name="CAT_GROVE_COMM">
 +            <block type="grove_bluetooth_slave"></block>
 +        </category>
 +    </category>
 +</xml>
 +</code>
 +
 +The different block name will be used for the block declaration **and ** the function: //parts #**2** & **#3** //'grove_led' example.
 +
 +The name are reference inside the file (en.js ; fr.js ; es.js; etc) with the text that will be dispalyed, so it's the multilingual way: //part #**5** for// 'grove_led' example.
 +
 +**2 - define functions in a particular file '/generators/arduino/<font inherit/inherit;;#008000;;inherit>grove.js</font>    '. ** This file contains the way the block will create Arduino code, example of '//grove_led//' block quoted in //**part #1 **//:
 +<code>
 +Blockly.Arduino.grove_led = function() {
 +  var dropdown_pin = Blockly.Arduino.valueToCode(this, 'NUM', Blockly.Arduino.ORDER_ATOMIC);
 +  var dropdown_stat = this.getFieldValue('STAT');
 +  Blockly.Arduino.setups_['setup_green_led_'+dropdown_pin] = 'pinMode('+dropdown_pin+', OUTPUT);'; //will be declared in setup()
 +  var code = 'digitalWrite('+dropdown_pin+','+dropdown_stat+');\n'                                 //will be used in loop()
 +  return code;
 +};
 +</code>
 +
 +**3 - define blocks with the same name as function, in a specific file in '/blocks/grove/<font inherit/inherit;;#FF8C00;;inherit>grove.js</font>    '. ** This file contains instructions for Blockly engine to display it:
 +
 +<code>
 +Blockly.Blocks['grove_led'] = {
 +  init: function() {
 +    this.setColour(190);
 +    this.setHelpUrl(Blockly.Msg.GROVE_INOUT_LED_HELPURL); //relative information to real text in /lang/blocks/en.js
 +    this.appendDummyInput()
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT1)
 +        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/e0/LED1.jpg/400px-LED1.jpg", 64, 64))
 +            //picture in local storage seems to be better idea, in the same directory as in js block file definition
 +
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT2)
 +        .appendField(new Blockly.FieldDropdown(profile.default.digital), "PIN")
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT3)
 +        .appendField(new Blockly.FieldDropdown([["1 - HIGH", "HIGH"], ["0 - low", "LOW"]]), "STAT");
 +               //you can also put FieldDropdown in Lang file
 +    this.setPreviousStatement(true, null);
 +    this.setNextStatement(true, null);
 +    this.setTooltip(Blockly.Msg.GROVE_INOUT_LED_TOOLTIP);
 +  }
 +};
 +</code>
 +
 +{{:fr:arduino:blocklyduino:del2.jpg?nolink&503x96}}
 +
 +**4****- add the name of this 2 file __up __ in 'index.html' :**
 +<code>
 +<html>
 +<head>
 +<link rel="icon" type="image/png" href="images/favicon.bmp" />
 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +<title>Blockly Arduino</title>
 +<script type="text/javascript" src="blocks/blockly_compressed.js"></script>
 +<script type="text/javascript" src="blocks/blocks_compressed.js"></script>
 +
 +<script type="text/javascript" src="blocks/arduino_base/arduino_base.js"></script>          //block display
 +<script type="text/javascript" src="blocks/grove/grove.js"></script>
 +
 +<script type="text/javascript" src="generators/arduino/blocklyduino.js"></script>
 +<script type="text/javascript" src="generators/arduino/arduino_base.js"></script>
 +<script type="text/javascript" src="generators/arduino/control.js"></script>
 +<script type="text/javascript" src="generators/arduino/grove.js"></script>                 //block function for Arduino code
 +</code>
 +
 +**5 - at last translating** in different language file.
 +
 +→ <font inherit/inherit;;#FF0000;;inherit>//  __ If needed __  //</font>    , **in /lang/msg/en.js** you can add global specification:
 +<code>
 +var MSG = {
 +  title: "éditeur graphique pour aider à la programmation des interfaces Arduino",
 +  labelArduinoCard: "carte Arduino :",
 +  span_config: " configurer les blocs",
 +  span_delete: " effacer TOUS les blocs",
 +  span_saveXML:" sauver en fichier XML",
 +</code>
 +
 +→ Then in **/lang/blocks/en.js** we add all the text displayed:
 +<code>
 +Blockly.Msg.ARDUINO_SERIAL_PRINT_CONTENT = "envoyer sur le port série la donnée :";
 +Blockly.Msg.ARDUINO_SERIAL_PRINT_TOOLTIP = "envoie des données sur le port série pour surveillance par le moniteur en ASCII";
 +
 +Blockly.Msg.GROVE_INOUT_LED_HELPURL = "http://www.seeedstudio.com/wiki/index.php?title=GROVE_-_Starter_Bundle_V1.0b#LED";
 +Blockly.Msg.GROVE_INOUT_LED_INPUT1 = "mettre la DEL";
 +Blockly.Msg.GROVE_INOUT_LED_INPUT2 = "sur la broche Digital";
 +Blockly.Msg.GROVE_INOUT_LED_INPUT3 = "à l'état";
 +Blockly.Msg.GROVE_INOUT_LED_TOOLTIP = "active la sortie Digital sur laquelle la DEL est branchée";
 +</code>
 +
 +**6 - tweak !**
 +
 +You could also change the way the block is created or displayed, example with this different version:
 +
 +<code>
 +Blockly.Blocks['grove_led'] = {
 +  init: function() {
 +    this.setColour(190);
 +    this.setHelpUrl(Blockly.Msg.GROVE_INOUT_LED_HELPURL);
 +    this.appendDummyInput()
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT1)
 +        .appendField(new Blockly.FieldImage("http://www.seeedstudio.com/wiki/images/thumb/e/e0/LED1.jpg/400px-LED1.jpg", 64, 64))
 +    this.appendValueInput("PIN", 'Number')
 +        .setCheck('Number')
 +        .setAlign(Blockly.ALIGN_RIGHT)
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT2);
 +    //this.setInputsInline(true);
 +    this.appendDummyInput("")
 +        .setAlign(Blockly.ALIGN_RIGHT)
 +        .appendField(Blockly.Msg.GROVE_INOUT_LED_INPUT3)
 +        .appendField(new Blockly.FieldDropdown([["1 - haut", "HIGH"], ["0 - bas", "LOW"]]), "STAT");
 +    this.setPreviousStatement(true, null);
 +    this.setNextStatement(true, null);
 +    this.setTooltip(Blockly.Msg.GROVE_INOUT_LED_TOOLTIP);
 +  }
 +};
 +</code>
 +
 +{{:fr:arduino:blocklyduino:del1.jpg?nolink&498x105}}
 +
 +if you uncomment line '' '' //''this.setInputsInline(true); '' here what you will see: {{:fr:arduino:blocklyduino:del3.jpg?nolink&215x149}}//
 +