Coloured Categories

[Neil Fraser]

We've noticed that the majority of power Blockly developers add coloured elements to the toolbox categories.  Open Roberta, OzoBlockly, and App Inventor are all examples of this.

As of today one can now specify category colours (as hue) in the toolbox XML:

    <category name="Logic" colour="210">

      <block type="controls_if"></block>

      <block type="logic_compare"></block>

    </category>

    <category name="Loops" colour="120">

      <block type="controls_repeat_ext">

    </category>

Here is the new toolbox:

Like the simplicity of a clean menu?  No problem, the old toolbox is unchanged if there are no colours defined:

Feedback very welcome.  Documentation will be updated soon.

-- 

Neil Fraser, Software Engineer
Google, Mountain View, California

[Carlos Pereira]

Thanks Neil. I randomly noticed this on the demos page today and was wondering if it was already documented. Any chance we could select the side in which the colour is added? for some layouts it might look better in left hand side.

[Neil Fraser]

That's a good idea Carlos.  It is also easy to program since we already support both sides as a result of RTL.  The only question is where should this setting be?

1. One option is as a field in the Blockly.inject configuration.  The downside of this is that the definition of the category colours is now split between two different places: the inject config (for the side) and the toolbox XML (for colours).
2. Another option is as a field in the toolbar XML (<category name="Logic" colour="210" colour-align="left">).  The downside is that the alignment must me specified on every category.  The benefit (?) is that one could specify some colours to be left and others right.
3. Another option is as a top-level field in the toolbar XML (<xml category-colour-align="left">).  This would be the first such field, and it seems bad to introduce yet another place to configure Blockly.

Hmm...

--
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

[toe...@extremenetworks.com]

I really like the new color option, but there is a bug we noticed that is pretty easy to reproduce.

1. Go to the demos at:  https://blockly-demo.appspot.com/static/demos/toolbox/index.html
2. Click on arrow to the left of logic to expand the category.
3. Notice that it is coloured blue.
4. Click on the arrow to the left of library to collapse the category
5. Click on the same arrow to expand the category.
6. Notice all the blue :-)
   

[toe...@extremenetworks.com]

Another subtle bug as you can see in the attached image...  When you have subcategories,  the color blocks are indented on the right and the highlight when you click on the category doesn't extend all the way to the right.  This might be intentional, but it looks a bit funny.

On Monday, October 12, 2015 at 11:48:23 PM UTC-4, Neil Fraser wrote:

[Neil Fraser]

Upon trying out left-hand colours, I think they look superior.  Thus the colours are now on the other side.  I don't think a config option is needed now.  Thanks for the tip.

[Neil Fraser]

Fixed, thanks.  I was a bit hasty in pushing this.

--

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.

[priya sodhi]

Hi Neil,

Is it possible to add icons or images in place of colour.

Thanks 

Priya

[Rachel Fenichel]

Hi Priya,

It's not currently part of Blockly, but here's the last discussion of it on the forum, and here's a pull request that added it to scratch-blocks.  It may be a helpful starting point.

Cheers,

Rachel

[priya sodhi]

Hi Rachel,

Thanks for the update. :)

Regards,

Priya

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

[priya sodhi]

Hi Rachel,

Hope you are doing well. I have an query regarding blockly. Is there any way we can create a plugin of blockly in order keep my custom blocks updated with the latest version by just using the plugin.

Kind Regards

Priya

[Rachel Fenichel]

Hi Priya,

If you just want to have custom blocks and keep your blockly up to date, you can put your custom blocks in a different js file from the rest of the Blockly blocks.  Then include that file with a script tag.  That will let you separate changes to Blockly and to your blocks.

If you aren't using blockly_compressed.js you may want to.  Then you only have one file to keep up to date, which you can do by periodically downloading the most recent version from our github.

Cheers,

Rachel

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

[priya sodhi]

Hi Rachel,

Thanks for the reply. :)

Regards

Priya

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