How can I set multiple canvas colours easily?

I have 150 small canvases on a screen in a pattern and if a user touches a canvas it changes colour.

I need a way to set all the canvases to a certain colour but the only way I can think of is creating a procedure and calling each set canvas background colour in turn. But was wondering if there is a easier and more elequent way to do it ?

1 Like

Yes, just use one canvas!

You can create a procedure to set the colours for the pixels in each of your "boxes", then use the canvas touch and pixel background blocks to select then change the colour of a box. I have previously created an example which you could develop on from:


Thanks for the reply, this does seem like a good workaround. However, I think it would end up making the code a lot more complicated later down the road.


Then explain further on what you are trying to achieve, and hopefully we can find a solution....

Sorry I was waiting till I had access to code again to explain better.

I am using a bunch of squares and a colour picker to set the color of 150 leds using a web server and a esp32 board. The idea is that a user can create an animation by setting pattern scenes and timing. So I need to know what block is clicked each time as well as the colour it's set to.

So far I have 150 small canvases arranged in the pattern the leds are set in. And the code can select a colour and set the correct led to that colour for that scene in the animation. Now when I want to click next to get the next scene I either need to clear the colours from each canvas or maybe dim them so the user can see where they left their last pattern. The only way I can think of is by doing as I mentioned in the question which was to create a procedure to manually clear each canvas in turn(long process). Your solution would make clearing it easier but in turn it would complicate the knowing what led is pressed part as I would need to know the pixel coordinates of each section and compare that to the pixel coordinates I get when pressed which in turn would end up being more code than simply clearing individually.

Hope that makes sense :smile:

Are the boxes in a grid like I have shown e.g. 10 x 15?
How many different colours?

Which ever way you choose to do it, you will need to identify each box and the colour of that box in a list so that you can set or recall as required. You can create a history of box settings once you have your routine set up. My method can easily be modified to generate these lists. You can have several presets lined up (dimming might be difficult, but this could be done with an overlay of some sort?)

In my opinion, it would be better to handle all this programmatically, as opposed to having to handle so many (150) components...

1 Like

Yes it's a 15x10 grid with gaps between the canvases then at the minute I have a maximum of 5 colours that can be set. The way I was planning on doing it was a list is created for each colour then each canvas is named c1,c2,c3... in the order that the leds are set. Then each time a user clicks a box you simply use the the canvas name minus the c so it's just the number. Then I just use a routine to send each colour list separately to the esp32 board.

As for dimming I was planning of using the colour lists from the previous scene then just setting each colours alpha value(not sure if that is correct as I haven't tested yet)

Yes it might be, I might create a clone of the project and try both methods to see how they compare

good thinking :slight_smile:

It sounds like you need to have a play before needing any more input......