Change hue of built-in blocks?

[Natalie Freed]

Is there a recommended way to modify the color (hue specifically) of the built in blocks in my application without editing blockly source and rebuilding? Trying to keep updates as easy as possible. Thank you!

[Neil Fraser]

As of the latest build (30 seconds ago), you can now set these
constants in your program (after the Blockly sources have been
loaded):

Blockly.Blocks.colour.HUE = 20;
Blockly.Blocks.lists.HUE = 260;
Blockly.Blocks.logic.HUE = 210;
Blockly.Blocks.loops.HUE = 120;
Blockly.Blocks.math.HUE = 230;
Blockly.Blocks.procedures.HUE = 290;
Blockly.Blocks.texts.HUE = 160;
Blockly.Blocks.variables.HUE = 330;

And as always, the other HSV global components may be set thus:
Blockly.HSV_SATURATION = 0.45;
Blockly.HSV_VALUE = 0.65;

Enjoy!

> --
> 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.
> For more options, visit https://groups.google.com/d/optout.



--
Neil Fraser
https://neil.fraser.name

[Natalie Freed]

Awesome! Thank you so much.

Natalie

> 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/GsU9cHzmvBg/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.

> For more options, visit https://groups.google.com/d/optout.



--

http://nataliefreed.com

[Davide Prati]

This does not works anymore. How can i change the color of the block "controls_repeat_ext" ? is it the only way to do this that one to create a custom block from skratch?

[Erik Pasternak]

It looks like this broke when we started loading these from the message strings to support JSON. I'll file a bug to better support changing the category colours, but in the meantime you can work around it by loading a script to set Blockly.Msg.LOOPS_HUE after the messages file is loaded and before the blocks file is loaded.

<script src="blockly_compressed.js"></script>

<script src="msg/js/en.js"></script>

<script src="custom_colours.js></script>

<script src="blocks_compressed.js"></script>

custom_colours.js:

... (file license) ...

Blockly.Msg.LOOPS_HUE = 180;

...

[Stephan Thiel]

Hi Erik, thanks for this quick hack. It works for loops. I'd also like to change the number block hue and the S & V component of the loops and number block. How can I achieve that? I have trouble finding the right point in the documentation.

Thanks for your help!

[Erik Pasternak]

Hi Stephan,

By default the S & V components are set globally for Blockly in constants.js. If you want to make changes to individual blocks or groups you'll want to replace the existing blocks with updated definitions. You could either modify the blocks in Blockly or redeclare them as new blocks. In addition, the 'colour' attribute on blocks also supports "#RRGGBB" style hex strings for further customizing each block.

Cheers,

Erik

--

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/GsU9cHzmvBg/unsubscribe.

To unsubscribe from this group and all its topics, send an email to blockly+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Erik Pasternak | Master of the House | epas...@google.com