Transparency to a button icon background

[stam]

Hi Bogs,

i tested Richmond's excellent example and with the built in graphics i still get the issue with overlapping rects - that is if you click outside the oval but within the rect, it still handles mouse events - which is a problem when that 'invisible' bit is overlying other graphics, which in my example it will.

I guess you could code it to act the same as .png with transparent background, but that would be a large task for a relatively small component and more code to maintain going forward etc. Plus i only have so much attention span to dedicate to my project as it's done on the side of of actual (non-programming work) and often in the wee hours...

[bogs]

I'll see if I can make it as simple and painless as I can. Considering my feeble talents, anything I submit won't be earth shaking anyway haha. Up to you if you decide to test it out or not, I only write em, I'm not going to capture you and force you to work with it

[stam]

Hey sure - there are many ways to skin a cat, as they say. Always good to see & learn new stuff.
If you want i can put up a simplified model of this as well...

[bogs]

Unless your using some arcane version like I do, it wouldn't help me any. But, feel free for everyone else that actually uses something new

[stam]

Unless your using some arcane version like I do, it wouldn't help me any. But, feel free for everyone else that actually uses something new

Well no, no clever code and certainly nothing arcane
Just a composite built of .png files, overlaid with some LC vector graphics to make it look nicer and the code to manipulate each arc segment. The .png files allow stacking of the arc segments next to each other without worrying about transparent overlapping clickable areas.

If this can (easily) be replicated natively in LC i'd certainly be keen to learn...although i suspect it may involve quite a bit of work.

For now, here's my effort using .png files, extracted from my project for simplicity. The segments can be clicked on to cycle through scores/colours, or can be changed globally... nothing too complex. But i guess the challenge would be to replicate this using native LC tools only!

[jiml]

Yet another way to color segments of that cardiac chart using crude polygons with few points.

filledArcs.livecode.zip

Zipped Stack

(97.62 KiB) Downloaded 131 times

Jim Lambert

[stam]

Thanks Jim - haven't checked out your example yet but will do.

But your image suggest you're using transparent polygons behind the PNGs?

Not sure i understand the advantage - the PNGs respect the transparency and you can't click outside the coloured bits. Or have I misunderstood?

-------------------
Edit:
I've checked your solution - goes to show how sometimes my mind works in weird ways and over-complicates things.

You've taken the much simpler approach of instead of using individual .png segments, you've just copied the entire bullseye as one image and drawn polygons corresponding to each segment and just colouring these.

In retrospect that seems a much simpler way to do this

[bogs]

Very nice Jim, and even simpler than what I was trying to work out. I'm jealous! hee hee

@ stam, -
Yours is similar to what I was thinking, the only (real) difference was that I was thinking to create the .pngs on the fly and set the color that way. The code would have been longer, the objects would have been less. The way you did it though is certainly fast working, and easy enough, and the code is well organized.

[jiml]

Thanks.
I kind of 'reversed' the thinking.
Instead of PNGs with transparency sitting on top of the chart or carefully crafted GRCs, I poked transparent "holes' in the chart image and stuck crudely shaped, low point count GRCs behind the chart image.

[jiml]

And I forgot to remove some development cruft from the behavior.

It can simply be:

Code: Select all

on mousedown
      popup btn "theColors" at the clickloc
      set the backcolor of me to the hilitedtext of btn "theColors"
   end if
   pass mousedown
end mousedown

or for your use you wouldn't even need a behavior, just set the backcolor of a segment.

Jim Lambert

[stam]

Yeh nice one - but there was no need to 'punch holes'
All black lines/ovals are LC vectors.

So i took your idea, used the LC lines/ovals in the 'skeleton' and just drew low-ish poly count polygons beneath each; with the skeleton on top, imperfections are completely hidden.
End result looks just as good as with .png files

Pros: Slightly faster - i'm noticing this more when updating all segments with the popup menu -- less of a delay.

Cons: There is still an issue with overlapping controls. I had to finesse the layering in 3 spots ( i guess i was lucky it was only 3 due the way sequence i drew the polygons).

SO: PNG still seems better if you want to pack stuff close together but not care about layering. Polygons/Vector shapes a bit faster, but layering issues...

Given the speed optimisation and that i was able to deal with the layering, i'll probably stick with polygon based / Jim's solution.

Here's the example again - 1st card is .png files, 2nd card is polygon based...

[jiml]

Great! I like your idea of vectors as the skeleton.
Since the whole thing is comprised of vector graphics it should be easy to scale without losing any fidelity, should that be necessary.

[richmond62]

I can only assume i mixed up SVGs and PNGs and trying to solve the issue of overlapping buttons i was having with SVGs that i thought weren't fixed by switching to PNGs and tried the 'effective' keyword - but then used that with PNGs that didn't need it anyway.

Yeah, yeah, yeah: smack my "botty."
-

Marvin.jpeg (13.84 KiB) Viewed 4330 times

[SparkOut]

Pssst... you know that (now deleted) post was a spammer recycling text from a post on page 1 of this thread?

[richmond62]

Pssst... you know that

No: I didn't because I am unbelievably stupid . . . hence my comment above.