Blockly design questions

Jonty Small

unread,

Jun 2, 2021, 6:55:54 AM6/2/21

to Blockly

Hi all,

A question about modifying the design of our blockly system.

I was talking to a couple end users about their thoughts on the design we've gone for.

2 of the comments that i'm not sure how to do or if they are even possible were around:

1) is it possible to have gradients for the background and maybe even the blocks? Or something like a background image? (my assumption is no? but i'm also unsure because this seems like it shouldnt be "too" hard to do?)

2) (for background we're using the zelos renderer) Is it possible to extend the blocks out to the width of the widest one? I've attatched an very bad example image to give an idea of how it might look. (there are definitely drawbacks to this approach (when it comes to super wide blocks but we're looking into a method that switches from inline inputs to external when the sum of widths exceeds a set value))

Also if anyone has found anything they're super proud of in terms of design and wants to share i'd love to see what you've come up with. I had a couple conversations with people in breakout rooms about how people tried to make blockly look a bit more adult focused

Best,

Jonty

blockly extend blocks out.PNG

Beka Westberg

unread,

Jun 2, 2021, 6:34:40 PM6/2/21

to blo...@googlegroups.com

Hello,

This is getting into some pretty complicated stuff, so you're probably going to want to check out Rachel's renderers talk and also dig into the source code. The common folder and measurables include the base classes, and then the other directories are for specific renderers.

1) I think you should be able to do this by modifying the applyColour method of the path_object, or one of the related methods.

2) I'm not sure about this one. I think you may be able to do it by modifying alignRowElements on the info to look at the widthWithChildren? But I'm really not familiar enough with this system.

I hope that helps!

--Beka

--
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 on the web visit https://groups.google.com/d/msgid/blockly/7d20edc2-2a14-4585-960d-94d72f134534n%40googlegroups.com.

Jonty Small

unread,

Jun 7, 2021, 9:00:11 AM6/7/21

to Blockly

Hi Beka,

Thanks, that renderers talk was quite useful. The apply colour solution sounds promising though i'm a bit tentative going through and changing the core code.

as for the second solution I've been going down that route. I've currently got some horrors of blocks. I'll make sure to update here if i make any solid progress on this point.

Best,

Jonty

Jonty Small

unread,

Jun 9, 2021, 9:39:45 AM6/9/21

to Blockly

Quick update to this. Still mid flow and running into lots of bugs when it comes to trying to make this work for all blocks. But i figured it would be good to share my progress incase anyone else wants to try this

I've figured out how to edit the dropdown blocks. They're rectangles and as such i can modify the fill for all types of rect in my html file.

(i'm very very aware it looks rubbish, this is more me figuring out how to do this so i can let someone with better design skills come in and figure out a scheme)

The code for this is below. all you need to do is add it to the html file somewhere. I put it at the top. If it doesn't work try putting it there just after you do whatever imports you need to do.

rect{fill:url(#lgrad)}

</style>

<defs>

</linearGradient>

</defs>

</svg>

Still working on it. So i'll update as i go if i'm able to make more progress.

Capture.PNG

Jonty Small

unread,

Jun 9, 2021, 9:40:39 AM6/9/21

to Blockly

p.s. the code for the gradient and how to do more experimental gradients comes from this site https://angrytools.com/gradient/

Beka Westberg

unread,

Jun 9, 2021, 9:43:11 AM6/9/21

to blo...@googlegroups.com

That looks really cool Jonty! I'm actually surprised it was that (relatively) easy haha. Thanks for the update :D

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/6674f909-bf28-4fda-a668-ed92042a0a3dn%40googlegroups.com.

Jonty Small

unread,

Jun 9, 2021, 10:11:20 AM6/9/21

to blo...@googlegroups.com

Haha,

Its "easy" for the rectangle (took me a while to reach it though). Changing the actual blocks is a bit more tricky :(

Virus-free. www.avast.com

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/FyrjT4ailIU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAEBzR953ZN1_TSoiXkYp3Y144qvt_63u9jRSbaj-Bu6G5OodLw%40mail.gmail.com.

Virus-free. www.avast.com

Jonty Small

unread,

Jun 9, 2021, 11:43:56 AM6/9/21

to Blockly

At the moment all the blocks have the same theme. But i'll move onto fixing that next.
But as you can see below it is possible to have a gradient colour scheme for your blocks. You can define it however you want

if you want to get really wacky you can look into radial gradients, have as many colours as you want. (please don't actually put something like this in production though)

to do this i modified the line referenced by Beka

to this.

this.svgPath.setAttribute('style', "fill:url(#lgrad)");

where lgrad is defined earlier as i described above.

I'm not sure if this in the end is going to make any improvement. It may make it very difficult to see whats going on. That second one demonstrates one potential drawback of something like this.

But yeah. If someone sees this and finds an awesome theme i'd love to see it! I'm going to be playing around for a bit now and if i come up with something nice i will share it.

feni...@google.com

unread,

Jun 11, 2021, 2:09:17 PM6/11/21

to Blockly

A couple comments on changing renderers:

- Where possible, please do this by making a custom renderer and changing stuff inside it, so that it's all in your own code. You can make your own path object as part of that.

- Here's the custom renderer codelab.

Extending a block to the width of the widest one in the row: this requires knowing everything about the whole stack as you render, which means being aware of the order in which blocks are rendered.

I won't say it's not possible, but I suspect you'll end up rerendering the stack a lot of times as changes in one pass impact the sizes of other blocks. Rendering in Blockly is (unintuitively) bottom-up: rendering a block also renders all of its parents, but not its children.

As an alternative, have you considered forcing all stack blocks to be a pre-set width? You could play around to get a reasonable number, and I can guarantee that this will be better for performance and easier to implement.