Use icons instead of text labels in Blockly

858 views
Skip to first unread message

David Kadouch

unread,
Dec 9, 2014, 1:58:51 AM12/9/14
to blo...@googlegroups.com
Hi

I'm wondering if someone managed to use icons in blockly. It is possible to use image fields in blocks but this is quite limited. I can see 2 places where it would be very useful:
1- Use icons to label categories
2- Use icons as values in a dropdown field

Neil - it's actually a feature request. Is this somewhere on your roadmap?

thanks
David


Andrew Stratton

unread,
Dec 11, 2014, 11:03:31 AM12/11/14
to blo...@googlegroups.com
Hi David

  I've just been doing something similar - by putting an image (icon) on the right of a statement (where an expression plugs in) and then the same icon on the relevant expression/s, e.g.

Not sure if this is what you're looking for - below is the code I write - for what it's worth :)

Best wishes

  Andy Stratton

Blockly.Blocks['quando_projector'] = {



  init
: function() {

   
this.appendValueInput("GREETING")

           
.appendField("Projector")

           
.appendField(

               
new Blockly.FieldImage(

                   
"./resources/image_file.jpg", 31, 31, "*"));;

   
this.setPreviousStatement(true);

   
this.setNextStatement(true);

   
this.setColour(240);

 
}

};




Blockly.Blocks['quando_image'] = {

  init
: function() {

   
this.appendDummyInput("GREETING")

           
.appendField(

               
new Blockly.FieldImage(

                   
"./resources/image_file.jpg", 31, 31, "*"))

           
.appendField("Image");

   
this.setOutput(true, "quando_image");

   
this.setColour(240);

 
}

};



David Kadouch

unread,
Dec 11, 2014, 12:36:00 PM12/11/14
to blo...@googlegroups.com
Hi Andy

This is a cool idea. I'm also after using icons in the toolbox for the categories and more importantly in dropdown lists, similarly to the color block.. I may eventually hack this one but I was hoping to find someone who already did it.
thanks
David


--
David Kadouch
Edtech entrepreneur - linkedingoogle+

--
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/AdEBeYJkkZc/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.

noe....@gmail.com

unread,
Dec 27, 2014, 9:35:41 PM12/27/14
to blo...@googlegroups.com
Hi Andy and David 

I want to make a similar block customization but instead of an image on the block I want to put a dropdown with images and select one of them, do you know how to do that?

I precipitate a lot your help.

Noé.

David Kadouch

unread,
Dec 28, 2014, 3:06:16 AM12/28/14
to blo...@googlegroups.com

Noe
What you describe is what I want to do.  Didn't make any progress so if you'll find a way pls let me know.
Thanks
David

Eric Miller

unread,
Dec 28, 2014, 3:38:42 PM12/28/14
to blo...@googlegroups.com
A simple partial solution uses unicode characters in the dropdown text, as seen the turn block of Blockly Maze. Often, it provides enough of a hint for those that can't read to figure it out, but browser implementation can be spotty at times. One nice solution would be to allow html and/or svg markup to be used somehow.
Reply all
Reply to author
Forward
0 new messages