Hello everybody,
I designed an app in which the user can make drawings by click on a 15x16 pixel matrix.
Each pixel is represented by a button whose color changes according to its active (yellow) or inactive (blue) state...think of it as the classic "Mine Sweeper" game.
However, the user experience is quite difficult since the user has to click on each button.
Is there a way to select/deselect the pixel by simply swiping the finger throughout the screen as it was a pencil?
I've tried with the gotfocus() and lostfocus() option, but it doesn't work.
thanks for the advice.
It works but not as expected. et me explain: when i move the finger through the screen and the button is touched, it changes its color only when the finger move far away from the button itself.
Thus, swiping over the buttons matrix, only a few of them changes their colour.
Is there a way for the system to recognize exactly when the button is released.
Meanwhile i'l try also the touchup option
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....
Excellent @TIMAI2 , it is actually what i was thinking!!!!
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...
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
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....)
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.
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 ), and the cells represent the matrix pixels with row-column data, no mapping or list juggling required.
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 @ https://www.w3schools.com/)
Here is my Project file, two things to note:
Defaults to using the Companion, there is a different path variable for Build.
), and the cells represent the matrix pixels with row-column data, no mapping or list juggling required.
