How to change the color of Built in Loops and Conditionals

[Scott Dunning]

Hello everyone!

I have a few questions for what seems simple, but the only answer I found was from a couple years ago and no longer works...

How can I change just the color of the built in Loops and Conditionals? I’ve searched everywhere in the files, but there are a ton of them and nothing I’ve tried works. I’d rather not create custom blocks just to change the colors.

While I’m at it, is there an easy way to set the size of a block...I want to make custom blocks a uniform length and I also wanted to increase the height, but every time I do that the text goes to the top of the block and I can’t figure out how to align it in the center...?

Last question, sorry! Can I change the color of the text from white to black for lighter color blocks?

Thanks so much for any help!! I’m super new to blockly

[Rachel Fenichel]

Block colors: 

After loading Blockly, add 

Blockly.Constants.Loops.HUE = 120;  // Replace with whatever hue you want

This should update all of the loop blocks and something similar should work for conditionals.  If it doesn't work you might be hitting #1648, and you should let us know.

Changing the size of the blocks:

This is really involved, and requires a lot of changes to the core rendering code.

Changing text color:

To change it for all block text, edit .blocklyText in css.js.

To change it conditionally based the background color of the blocks would require some changes in block_render_svg.js.  In general I advise against having the text change colors--better to be consistent.

Hope this helps,

Rachel

[Scott Dunning]

You're the best Rachel!! I have just a quick follow up question...

You say "after loading Blockly add"... Are you talking about in the file where I create my workspace and custom blocks? I'm using vue.js, so on the page where my workspace is I have the xml stuff for the blocks up top i.e. <block type="controls_whileUntil"> etc

Then I set up all my custom blocks in javascript (with vue) below that...Are you talking about in this file after I create all the custom blocks?

Also, can I use the HEX value for colors or does it have to be HUE for built in blocks?

Thanks again for your help!!

[Rachel Fenichel]

In the file where you create your workspace is probably fine.  You just don't want your value for HUE to be replaced by this line, so your line has to run later.  Exactly where it should go depends on your code, how it's being loaded, etc.

You can use a hex value instead of an HSV hue, even for the built in blocks.  Effectively it's just going to call

block.setColour(Blockly.Constants.Loops.HUE);

for each block.  There's no such thing as Blockly.Constants.Loops.HEX, but if the colour is of the form "#RRGGBB" it will be parsed as hex.

Cheers,

Rachel

[Scott Dunning]

Ok cool, that makes sense. Thanks again!!

[Scott Dunning]

Changing the text color in the css.js file didn't do anything either. Is it because I have mostly custom blocks and then set up loops and conditionals in the xml portion of my file?

[Neil Fraser]

Rather than edit css.js, I'd recommend simply overriding those CSS attributes in your own CSS file.

On 20 March 2018 at 18:00, Scott Dunning <scot...@gmail.com> wrote:

Changing the text color in the css.js file didn't do anything either.  Is it because I have mostly custom blocks and then set up loops and conditionals in the xml portion of my file?

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

--

Neil Fraser
https://neil.fraser.name

[Scott Dunning]

That makes sense. Thanks again! I just replied with what seems to be that bug with the color.

[Scott Dunning]

Hey Rachel I couldn't get the colors to do anything and I clicked that link for the playground and I am getting those results with some text blocks still green and some text blocks dark blue.

I placed those lines of code that is suggested at the very beginning of the "start' function and got those results. It stated to place them in the <script> tag at the top, but that did not produce any results.

[Vivek]

Hi Scott,

You can change the color of predefined bocks using this:

1) create a custom_colors.js file in same folder.

2) Write a code in that file as follows:-

function recolor(block, hue) { 

    var oldInit = block.init; 

    block.init = function() { 

      oldInit.call(this); 

      this.setColour(hue); 

    } 

  } 

  recolor(Blockly.Blocks['controls_if'],95);  

3) Save it.

4) In index.html call include this js file.

5) Color blocks will be changed as you want.

Regards 

Vivek

[Cleo Qc]

I believe this is already logged as

https://github.com/google/blockly/issues/1648

[Scott Dunning]

Thanks for replying Vivek! It turns out the way our program is structured we’re going to have to create the Loops and Conditionals as custom blocks, so I’ll just change the color there.

I have another question about that though...essentially the way our program is structured and the device we’re controlling, we had to chain all block calls as promises...when creating the Loops and Conditionals as custom blocks, is there a file in the blockly package were I can just grab the code for each built in loop and Conditionals functionality, to easily add to my custom blocks?

[Vivek]

Hi,

You can get the code for custom block using blockly developer tool

https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

Regards

Vivek

[Scott Dunning]

Hey Vivek,

I more so meant the functionality of the Loops and Conditionals. They will have the exact same functionality to them, I just need to chain a promise to each of them.