Change button color by swipe

thank you for your advice. I would have liked to find it just before designign each of the 240buttons :sweat_smile:

However, it does not cover the fact that a finger swipe on the screen makes the touched buttons change their color

thank you for your adivce.
even the touchdown and touchup events do not work properly. in fact, i have the following behaviour:

  • scrollable screen: the button touched changes its color only when the finger goes far away from it --> not all the buttons touched are coloured
  • not scrollable screen: until the finger is released, the next button touched does not recognize the event and only one pixel is coloured.

Is there a method to have the button recognize a sort of touched event?

To use the canvas you will need to forget about your buttons and use the areas of each square of the grid to change colours. If I get the time, I will work up an example....

Thank you @TIMAI2, i'm looking for your example.
I'm not an expert in programming and any help is well accepted :slight_smile:

Try this:

Touch to change colour (if cream then blue / else cream)
Drag to change to blue

DragToDraw.aia (8.2 KB)


Excellent @TIMAI2 , it is actually what i was thinking!!!! :clap: :clap: :clap:
i was getting mad employing the buttons.
Just one other question: since my idea was to draw the pixel of an LCD display through Arduino, is it easy to identify which is the pixel so that i can calculate a number as 2^(pixel_ID)?
I suppose I have to map the (x,y) click point and calculate module and quotient...

Is that the actual ratio of your LCD display on the Arduino?

Also, what do you have to send, ones and zeros for pixel on-off?

hi @ChrisWard,
no this is the resolution of a (2r x 3c) pixel matrix area that I want to customize over a (2r x 16c) LCD screen.
Each pixel is represented by a (8r x 5c) sub-pixel matrix and this is how i get the 15x16 value.

each small pixel can be customized so that each of its row takes a number in binary --> starting from left 16+8+4+2+1

By the way Paolomante, that is such a confusing description - a matrix that is only 15 x 16 :upside_down_face:

How are you getting on with the mapping of the Canvas? @ABG is good at that sort of thing.

The touchList variable holds the current touched point in the canvas.

You will get only one returned with the touchDown event, whereas there will be several touch points when dragging for each grid square (because every touch point during the drag that meets the criteria will make the square blue)

Regardless, it should be possible to capture each square being changed to blue to a list. (there will need to be some sorting and removal of duplicates....)

1 Like

Here is a paint procedure I had lying around to paint a cell in a windowed grid:

It's draggable.

To track the color of your cells, I recommend using a dictionary or TinyDB, using tags built from concatenating

  • some letter ('Z'?)
  • a two digit row number
  • a two digit column number.

This makes it simple to code functions to take a cell ID and SEGMENT out row and column numbers, which can be turned into pixel x and y values by multiplication and addition.


@ABG thank you for your reply.
can you give nme some details about the within_viewport function?

Actually, I've tought about mapping pixels as Pxxyy and I'm now trying to develop a new solution through the solution @TIMAI2 provided

The values in this procedure are row and column numbers, not pixel counts.

The four global variables are the location and size of the viewport within the larger table of display values.

(This was coded before the logical AND block had a mutator, otherwise it could have been done in a single 4-socket AND block.)

You can also build an interactive grid in an HTML file using a simple table where the cells behave in a similar way to buttons without the button animation - so, smoother than a group of buttons but not as smooth as dragging on a Canvas. However, you can draw accurately very easily with a stylus (or a cotton bud, slightly dampened to transmit static from your finger :innocent:), and the cells represent the matrix pixels with row-column data, no mapping or list juggling required.


@ChrisWard can you please share your aia file?
I don't know nothing about HTML and i really don't know how to kick start :sweat_smile:

You will need to learn a little bit of HTML/Javascript if you need to modify the HTML page (it's not difficult and there are super-easy guides @

Here is my Project file, two things to note:

  1. Defaults to using the Companion, there is a different path variable for Build.
  2. It is using vknow360's Custom Web View extension:
    CustomWebView : An extended form of Web Viewer

DrawingMatrix.aia (71.9 KB)

All of the Blocks:

1 Like

Asset MIT Companion Android < 10

Asset MIT Companion Android >= 10

1 Like

thank you everybody for your support.
I'm working on your suggestions and let you know when I get to the point :slight_smile:

Hope you are really enjoying your Project, it looks like fun.

Mình cũng bị như vậy, ai giúp với.