LiveCode Forums.

I have a stack with three cards. On one card is a field with numerical data, and a button whose script uses the paint tools to draw a graphical representation of that data.

After testing it for a while, I needed a larger (wider) field, so I dragged the lower right corner of the window to increase, I assumed, the stack and card sizes. I dragged the edge of the field to make it wider.

However, now the scripted graphic is truncated on the right. The script that invoked the paint tools runs to completion, but part of the graphic is invisible.

Using a paint tool directly (such as the brush) using the mouse also yields a truncated image. Using the bucket tool, though, fills the entire card and window.

It seems that there might be an invisible entity that holds the paint, and that increasing the stack and card size did not increase the size of that entity.

How do I fix this? Thanks.

[LiveCode CE 9.6.1; MacOS 10.15.7]

If you use a paint tool inside of an image object, its actions are constrained to the image object.

If you use a paint tool outside an image object, a new image object is automatically created at the full size of the card.

That is helpful; thanks. I was unaware of the concept of an "image object" that is the target of paint tools. Making the border of the object visible clarifies my specific issue.

Suppose I have more than one image object on a card. How do I specify where the paint goes when using a scripted paint tool? Do I use card coordinates or object coordinates?

Does having several overlapping image objects complicate things?

Interestingly enough, I have been using the LiveCode paint tools to run up spontaneous EFL tests for young children
who I am teaching on ZOOM:
- -
I am not entirely sure how you could have several overlapping image objects that would accept painting as
that always seems to end up on the top (i.e. frontmost) layer of a card.

I dragged the edge of the field to make it wider.

However, now the scripted graphic is truncated on the right. The script that invoked the paint tools runs to completion, but part of the graphic is invisible.

As far as I can see, your problem is that dragging the edge of a field or a card to make it larger
does NOT enlarge your image in which the painting is happening.

PlaidFlannel wrote: ↑

Sat Jan 23, 2021 7:06 am

Suppose I have more than one image object on a card. How do I specify where the paint goes when using a scripted paint tool? Do I use card coordinates or object coordinates?

In every case I can think of, coordinates for objects within cards are local to the card, not the object being affected.

Does having several overlapping image objects complicate things?

Good question. Some quick experimentation suggests that painting will occur in the topmost object at the location where a paint operation occurs. I was unable to find a way to limit paint operations to an image object which is beneath another one.

I suppose one way might be to lock the screen and hide objects above the one you want to affect with paint operations, and then show them again before unlocking the screen.

To be honest, with LC's right drawing tools I can't recall the last time I scripted any operations with paint tools. With draw objects we have similar methods for creating lines, ovals, polygons, etc., but each is its own object with vertices that can be changed interactively or via script. We also have a wide range of properties for fine-tuning appearances of draw objects, including endpoints, graphics effects like drop shadow, and more. And they print a printer resolution, offering a crisp look that benefits even when printing to PDF.

Thanks for another helpful response.

Let me be a bit more specific about the goal, which may make my decision to try the paint tools more understandable.

I have a data set with 10,000 objects. Each object exhibits zero or more of a small set of properties. I want to display these properties visually, so a glance gives impressions of the distribution of those properties.

I want to have a 100 x 100 grid of square cells, each about eight pixels wide. My first attempt painted 101 horizontal lines and 101 vertical lines, and then used the bucket tool to fill a grid cell with a color that represents the properties of the corresponding data object.

A mouse-over gesture would display textual information about the corresponding data object.

That proved to be quite slow, so I changed the bucket tool to the line tool, using a line size equal to the cell size. That was substantially faster.

Using the drawing tools might involve 202 line objects, but the same effect probably could be achieved by setting the border of a cell rectangle object to the appropriate size and color.

But having 10,000 rectangle objects seems excessive.

Regarding two overlapping image objects: I may want to display simultaneously two data sets. If the two images are exactly overlapping, and if an object represented in the upper image has none of the properties, its rectangle would be transparent. Information from the lower image would show through.

One possible workaround might be to move the image offscreen while painting into it, and then move one or both images back onscreen when finished.

What is the range of possible values among the properties you're looking to display?

The range of values is still being determined. An upper bound might be ten.

However, after seeing how well this works, it may turn out that a few different shades of blue, a few different shades of red, etc., are useful.

The idea is that a glance at the graphic would elicit thoughts such as, "There's a lot more blue near the top and a lot more red near the bottom". Facts like that seem difficult to convey numerically, but easy with color.

That sounds like a useful display. Thanks for taking the time to describe it.

With only ten or so possible values there's a lot of ways we might approach this, but the simplest might be just a single image object painted with colored squares as you originally planned.

Why do I think there is another way to do things?

Imagine, if you will, 100 x 100 graphic rectangles (with corner angles set to 0),
and their backgroundColor set to a variety of RGB colours.

There's a lot of ways to do most things. But 10,000 objects is a lot of objects.

Since there are a small number of values, another option might be to make one polygon for each value, setting the points to what would be the rects of individual objects (blank lines in polygon points allow for discontiguous shapes).

But even 10 objects is more than one. This is one case where a single image object seems a good fit.

I was curious about this topic so I created an example stack to demonstrate how a 9-by-9 grid of squares could be populated with selected colors.
It turns out that images (first card) don't have a backgroundColor that can be set programmatically.

Step 1, click on the "Create 9x9 Grid of Color Images" button to establish the 9x9 grid. All the squares will be blank, no colors yet.
Step 2, go to the next card and click on the "Create Color Graphics" button. The script will create a 9x9 grid of graphics with unique colors.

Because graphics have a backgroundColor property, I created a grid of 81 graphics (second card) and set each graphic's backgroundColor to various colors (the colorNames function returns over 550 pre-set colors so I selected 81 colors spread out across the 550 possibilities).

The script on the second card also exports a PNG image (from each of the graphics), and sticks each into the 81 image grid on the first card.
Since the OP thinks only a few colors are needed, I selected eight colors (sc1 through sc8) and put them on the righthand side of the second card.

Step 3, on the first card, click on the "Try This -->" button multiple times to see random selected colors (1 through populate the image grid.

After picking the desired color scheme (sc1 through sc8), the OP can modify the "Try This -->" button to assign colors to match the data.
The example stack is attached. Feel free to use it.
Enjoy,
Bob

Thanks to "bobcole" for the useful information. As a LiveCode beginner, I realize that I need to spend some time becoming more familiar with the similarities and differences of image objects and graphic objects.

I also was not aware of the "export" capability. This will be useful because my application will primarily be used to generate graphics for a written report; I don't need a polished application for other users. Exporting will be easier than using screenshots.