Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Colour Picker Problem

53 views
Skip to first unread message

Paul Jarvis

unread,
Dec 27, 2024, 7:41:56 AM12/27/24
to Blockly
Hi,

I have a small Blockly program which appears to work. Within the program
I make use of a colourPicker to choose one of eight colours and associated
python code generator and it all behaves as expected.
Stupidly I decide to document what I have done! I set up a VM (using
virtualBox) with the same OS (Windows 10 pro) and go through the
process of documenting each feature as I add it. All works fine until I
get to the colour picker, at which point I get the error:
        Unable to find [field_colour][field] in the registry.

I have compared my source files and they appear identical, the only difference
I can find is the working Blockly version is 10.1.13 while my code is failing
on 11.1.1. I may have forgotten to instal something in the VM that I did
originally - at 70 my memory is not that good ;-)

Any help appreciated.

Cheers
Paul


If needed my block definition code and generator are as follows:

Blockly.Blocks['colourPicker'] =
{
   init: function () {
     this.jsonInit({
         "message0" : "%1",
         "args0": [
           {
             "type": "field_colour",
             "name": "COLOUR",
             "colour": "#FF0000"
           }
         ],
         "extensions": ["set_colour_extension"],
         "output" : "Number",
         "colour" : 60,
         "tooltip" : "Chooses one of the eight possible colours",
         "helpUrl" : "./help/colourPicker.html"
     });
  }
}

var colourValues = ['#000000', '#0000FF', '#00FF00', '#00FFFF', '#FF0000', '#FF00FF', '#FFFF00', '#FFFFFF'];
var colourNames =  [ 'black',   'blue',    'green',   'cyan',     'red',   'magenta',  'yellow',  'white' ];
var colourColumns = 3;

Blockly.Extensions.register('set_colour_extension',
  function() {
    var field = this.getField("COLOUR");
    field.setColours( colourValues, colourNames);
    field.setColumns(colourColumns);
  });

python.pythonGenerator.forBlock['colourPicker'] = function(block, generator) {
  var colours = ['#000000', '#0000ff', '#00ff00', '#00ffff', '#ff0000', '#ff00ff', '#ffff00', '#ffffff']
  var colour_name = block.getFieldValue('COLOUR');
  var colour_index = colours.indexOf(colour_name);
  return [colour_index, Blockly.Python.ORDER_ATOMIC];
};

Mark Friedman

unread,
Dec 27, 2024, 1:47:12 PM12/27/24
to blo...@googlegroups.com
Hi, Paul.  In Blockly v11 the colour field was removed from core Blockly and is now a plugin.  See here for some documentation on how to use it.

-Mark


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/bb301df1-4fa4-462c-a66e-6c460a869cc7n%40googlegroups.com.

Paul Jarvis

unread,
Dec 27, 2024, 4:32:31 PM12/27/24
to blo...@googlegroups.com
Hi Mark,

Great, that does make sense now.

However I am having problems with understanding `top level' modules as currently the Blockly files are loaded from
my application HTML file by including the following in the `HEAD' element:

    <script src="./blockly/blockly_compressed.js"></script>
    <script src="./blockly/blocks_compressed.js"></script>
    <script src="./blockly/python_compressed.js"></script>
    <script src="./blockly/msg/en.js"></script>
    <script src="./js/cubey-blocks.js"></script>
    <script src="./js/cubey-python.js"></script>
    <script src="./js/toolbox.js"></script>


I've tried adding the imports to my block definition file but it is not at the 'top level'.
Next I tried adding type='module' to the script tag, then I get a CORS error.
Obviously my JavaScript is not what it should be. Are there any examples showing this form of usage?

Cheers
Paul


You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/hO50OhTjRqo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/CAOk7GcTkkGUPEL-gfXRFQ5sARrJLn1a996-PPTUhiWdsqQZ6Kg%40mail.gmail.com.

Mark Friedman

unread,
Dec 27, 2024, 5:02:14 PM12/27/24
to blo...@googlegroups.com
Paul,

  Does this section of the Blockly documentation help?

-Mark


Paul Jarvis

unread,
Dec 27, 2024, 5:17:55 PM12/27/24
to blo...@googlegroups.com
Hi Mark,

Thanks for you efforts.

Yes the documentation you linked to in your first reply explains that I need to install the field-colour
plugin, which I now have done then `import' the plugin files and then `install' the colour blocks.
I should then be OK with the definitions I have. The documentation shows import statements
to bring in the required modules however my JavaScript knowledge is limited and up until now I
have included all the Blockly code using `script' elements within my 'index.html' file. I don't know
how or where to put these `import' statements, or map then to `script' tags as my attempts end up
with the errors described in my previous email.
My application is a web page using Blockly that communicates with a simple local web server
(using nodeJS) which runs the python program created by Blockly.

Many thanks
Paul

Mark Friedman

unread,
Dec 27, 2024, 5:39:07 PM12/27/24
to blo...@googlegroups.com
Paul,

  Generally, the code examples in the Blockly documentation assume that you are using the recommended method for loading Blockly that uses npm and a packager (like webpack) and uses import statements.  However, since you aren't using that method you can't use those import statements.  You'll just access the various needed Blockly objects as described in the section I linked to in my previous email.  

  Oops, I just realized that the link that I thought I put in my last email wasn't in there.  I meant to say: "Does this section of the Blockly documentation help?" That link shows how to access the various Blockly objects when you load the Blockly code via Script tags, as you are doing.

-Mark


Paul Jarvis

unread,
Dec 28, 2024, 9:20:55 AM12/28/24
to Blockly
Hi Mark,

Thanks for the links, I have now got my code working by just adding two lines:

and
registerFieldColour();

I installed Blockly using 'npm' and have now also installed 'field-colour' using 'npm'.  I would like to be able to run without a network connection so is there a way to load 'field-colour' from my local copy without using imports?
 
Cheers
Paul

Mark Friedman

unread,
Dec 28, 2024, 1:25:50 PM12/28/24
to blo...@googlegroups.com
Paul,

  I guess that I, and perhaps the Blockly documentation, have been unclear.  The recommended way to install and load Blockly is to use NPM to download and install it (as shown here) and to load it using imports (as shown here).  The same is true of any plugins (i.e. you'll use import statements rather than script tags) Note further, that the recommended method mentions that "using imports of our package targets requires you to be using a bundler (like webpack)".  The documentation doesn't specify how to install and use such a bundler, but the recommended starter application, which you can create using the create-package script (described here), will set all that up for you.  If you use import statements and a bundler, then you won't need a network connection, since the bundler bundles all the app's dependencies together at build time.

  Hope this helps.

-Mark


Reply all
Reply to author
Forward
0 new messages