Interractive Canvas Painting

General
1

Hi all.

I have a unique problem, I am receiving data from an Arduino serially. The incoming serial data gives, among other things X, Y locations which I then save in a listbox, but I also plot the X,Y locations on a canvas using g.filloval. what I want to be able to do is click on these individual circles and do things with them (basically display the “other things” associated with that circle, (that had previously come from the Arduino and is now saved in the listbox. I want to be able to do this by pressing the circle, not pressing the associated row in the listbox. I have tried the simple mouse down event, but the XY coordinates for that aren’t precise enough, I want the XY coordinates associated with the exact center of that circle, which is the XY coordinates that came through the serial buffer. My other idea is to make a push button the size of the circle everytime the data comes in, but I don’t know how to make a pushbutton that’s not instantiated at run time. Any ideas?

2

The XY locations can be anywhere, so I cannot use the example of making arrays based on letters in a single row as shown here:

https://forum.xojo.com/46321-creating-clickable-text-need-help/0

3

dim centerX as Integer = circleX + circleWidth / 2 dim centerY as Integer = circleY + circleHeight / 2

That should get you started. Depending on the amount of precision you want will require additional math. Bear in mind that the code above gives the X/Y of one pixel.

4

And that’s pseudocode, so don’t just paste it in and expect it to work. Just to give you an idea of what you’re looking to do when you want the center of the circle as you mentioned above.

5

Thanks Anthony. I have no problem plotting the circles, what I want to do is be able to “click” the circles and then have access to all the associated data with that circle. So say 3 times the Arduino sends data, and I plot 3 circles. Each circle also has numbers besides XY coordinates, like circle number, velocity, timestamp, etc. I want to be able to click on circle 2, and now have access to the second piece of data’s XY coordinates, timestamp, etc. that would be in the second row of my listbox

6

So what you want is to be able to see if the X/Y coordinates clicked fall within the circle area you plotted, right? So you check the following:

if X >= circleLeft and X <= circleX + circleWidth and Y >= circleTop and Y<= circleTop + circleHeight

You can simplify this a bit by using the REALbasic.Rect class to store your positions and then using the built-in Contains method.

7

For more precision that isn’t rectangular, you’ll have to delve in to math that I’m not very fond of to account for the arc of the circle.

8

keep the coordinates (center, radius, etc) in an array
when the user clicks on the canvas. run thru the array and see if the mouse point is inside any circle

found=-1
for i=0 to circleData.ubound
  if distance(mousex,mousey,circle(i).centerx,circle(i).centery)<=circle(i).radius then 
      found=i
      exit for
   end if
next i
9

You actually have it backwards. The circle should know when it has been clicked and act accordingly. How to do that (and much more) is in Marc’s excellent SuperDraw article in xDev 12.5. I can send you the source code, but the article (if you need it) you would need to buy.

You can get more info and the download link in this thread (look at the last four posts):

https://forum.xojo.com/14520-oop-question-accessing-object-values-from-a-class/23