Add radix number block

appinventor/blocklyeditor/src/blocks/math.js

@@ -35,6 +35,67 @@ Blockly.Blocks.math_number.validator = function (text) {
   return window.isNaN(n) ? null : String(n);
 };
 
+Blockly.Blocks['math_number_radix'] = {
+  category:'Math',
+
+  helpUrl: Blockly.Msg.LANG_MATH_NUMBER_RADIX_TOOLTIP,
+
+  init: function() {
+    this.dropdown = new Blockly.FieldDropdown([
+        [Blockly.Msg.LANG_MATH_DECIMAL_FORMAT, 'DEC'],
+        [Blockly.Msg.LANG_MATH_BINARY_FORMAT, 'BIN'],
+        [Blockly.Msg.LANG_MATH_OCTAL_FORMAT, 'OCT'],
+        [Blockly.Msg.LANG_MATH_HEXADECIMAL_FORMAT, 'HEX'],
+    ], this.dropdownListener);
+    this.numberField = new Blockly.FieldTextInput('0', this.numberValidator);
+
+    this.setColour(Blockly.MATH_CATEGORY_HUE);
+    this.appendDummyInput()
+        .appendField(this.dropdown, 'OP')
+        .appendField(this.numberField, 'NUM');
+    this.setOutput(true, Blockly.Blocks.Utilities.YailTypeToBlocklyType(
+        "number", Blockly.Blocks.Utilities.OUTPUT));
+    this.setTooltip(Blockly.Msg.LANG_MATH_NUMBER_RADIX_TOOLTIP);
+  },
+
+  typeblock: [{translatedName: Blockly.Msg.LANG_MATH_NUMBER_RADIX_TITLE}],
+
+  dropdownListener: function(newValue) {
+    var numberField = this.sourceBlock_.numberField;
+    var currentPrefix = Blockly.Blocks.math_number_radix.PREFIX[this.getValue()];
+    var currentValue = Number(currentPrefix + numberField.getValue());
+    var newRadix = Blockly.Blocks.math_number_radix.RADIX[newValue];
+    numberField.setValue(currentValue.toString(newRadix))
+  },
+
+  numberValidator: function(text) {
+    if (!text) {
+      return 0;
+    }
+    var dropdown = this.sourceBlock_.dropdown;
+    var prefix = Blockly.Blocks.math_number_radix.PREFIX[dropdown.getValue()];
+    var n = Number(prefix + text);
+    // Do not convert n to string, because that always returns decimal.
+    return window.isNaN(n) ? null : text;
+  }
+};
+
+// Maps dropdown value to radix prefix.
+Blockly.Blocks.math_number_radix.PREFIX = {
+  'DEC': '',
+  'BIN': '0b',
+  'OCT': '0o',
+  'HEX': '0x'
+};
+
+// Maps dropdown value to radix.
+Blockly.Blocks.math_number_radix.RADIX = {
+  'DEC': 10,
+  'BIN': 2,
+  'OCT': 8,
+  'HEX': 16
+};
+
 Blockly.Blocks['math_compare'] = {
   // Basic arithmetic operator.
   // TODO(Andrew): equality block needs to have any on the sockets.

appinventor/blocklyeditor/src/generators/yail/math.js

@@ -17,6 +17,12 @@ Blockly.Yail['math_number'] = function() {
   return [code, Blockly.Yail.ORDER_ATOMIC];
 };
 
+Blockly.Yail['math_number_radix'] = function() {
+  var prefix = Blockly.Blocks.math_number_radix.PREFIX[this.getFieldValue('OP')];
+  var code = Number(prefix + this.getFieldValue('NUM'));
+  return [code, Blockly.Yail.ORDER_ATOMIC];
+};
+
 Blockly.Yail['math_compare'] = function() {
   // Basic compare operators
   var mode = this.getFieldValue('OP');

appinventor/blocklyeditor/src/msg/en/_messages.js

@@ -375,6 +375,14 @@ Blockly.Msg.en.switch_language_to_english = {
     Blockly.Msg.LANG_MATH_NUMBER_TOOLTIP = 'Report the number shown.';
     Blockly.Msg.LANG_MATH_MUTATOR_ITEM_INPUT_NUMBER = 'number';
 
+    Blockly.Msg.LANG_MATH_DECIMAL_FORMAT = 'decimal';
+    Blockly.Msg.LANG_MATH_BINARY_FORMAT = 'binary';
+    Blockly.Msg.LANG_MATH_OCTAL_FORMAT = 'octal';
+    Blockly.Msg.LANG_MATH_HEXADECIMAL_FORMAT = 'hexadecimal';
+    Blockly.Msg.LANG_MATH_NUMBER_RADIX_HELPURL = '/reference/blocks/math.html#number-radix';
+    Blockly.Msg.LANG_MATH_NUMBER_RADIX_TOOLTIP = 'Report the number shown in decimal (base-10) format.';
+    Blockly.Msg.LANG_MATH_NUMBER_RADIX_TITLE = 'number radix';
+
     Blockly.Msg.LANG_MATH_COMPARE_HELPURL = '';
     Blockly.Msg.LANG_MATH_COMPARE_HELPURL_EQ = '/reference/blocks/math.html#=';
     Blockly.Msg.LANG_MATH_COMPARE_HELPURL_NEQ = '/reference/blocks/math.html#not=';

appinventor/docs/html/reference/blocks/math.html

@@ -127,6 +127,7 @@
                 <article class="documentation">
 <ul>
   <li><a href="#number">0 (basic number block)</a></li>
+  <li><a href="#number-radix">0 (radix number block)</a></li>
   <li><a href="#=">=</a></li>
   <li><a href="#not=">≠</a></li>
   <li><a href="#gt">&gt;</a></li>
@@ -205,6 +206,22 @@
 
 <p>Can be used as any positive or negative number (decimals included). Clicking on the “0” in the block will allow you to change the number.</p>
 
+<h3 id="number-radix">Radix Number Block</h3>
+
+<p><img src="images/math/numberradix.png"/></p>
+
+<p>Represents a base-10 number. Clicking on the "0" will allow you to change the number.</p>
+
+<p>Clicking the dropdown will allow you to input a number in a different number base (aka radix). The number will then be "translated" into decimal (aka base-10).</p>
+
+<p>For example, these three blocks are equivalent:</p>
+
+<p><img src="images/math/numberradix_equivalent.png"/></p>
+
+<p>The dropdown supports: decimal (base-10), binary (base-2), octal (base-8), and hexadecimal (base-16) input formats.</p>
+
+<p>Decimal mode allows you to input any positive or negative number (e.g. 2, -12, 2.12). The other modes only allow you to input a whole number (aka any positive number, or zero).</p>
+
 <h3 id="---">=   {#=}</h3>
 
 <p><img src="images/math/equal.png" alt="" /></p>

appinventor/docs/markdown/reference/blocks/math.md

@@ -4,6 +4,7 @@ layout: documentation
 ---
 
 * [0 (basic number block)](#number)
+* [0 (radix number block)](#number-radix)
 * [=](#=)
 * [≠](#not=)
 * [>](#gt)
@@ -81,6 +82,23 @@ convert radians to degrees, convert degrees to radians
 
 Can be used as any positive or negative number (decimals included). Clicking on the "0" in the block will allow you to change the number.
 
+
+### Radix Number Block {#number-radix}
+
+![](images/math/numberradix.png)
+
+Represents a base-10 number. Clicking on the "0" will allow you to change the number.
+
+Clicking the dropdown will allow you to input a number in a different number base (aka radix). The number will then be "translated" into decimal (aka base-10).
+
+For example, these three blocks are equivalent:
+
+![](images/math/numberradix_equivalent.png)
+
+The dropdown supports: decimal (base-10), binary (base-2), octal (base-8), and hexadecimal (base-16) input formats.
+
+Decimal mode allows you to input any positive or negative number (e.g. 2, -12, 2.12). The other modes only allow you to input a whole number (aka any positive number, or zero).
+
 ### =   {#=}
 
 ![](images/math/equal.png)