copy a graphic with several colours and import it into LiveCode

[Till Bandi]

I would like to import a map of Switzerland:
https://www.bfs.admin.ch/asset/de/453856
into Livecode and would like to add separate Information (Population of the regions resp.cantons) so that I can activate different regions.

All I tried did not work, can anyone help

Thanks, Till

[richmond62]

You will have to chop the map up so each canton is separate image.

[dunbarx]

@Richmond.

Are you saying that the size of the graphic is causing the failure? Is there a limit to the size of images that can be imported?

@Till

What failed? Did the image simply not load? Was any error thrown? Do I assume that nothing within LiveCode itself was a problem?

How are you annotating the various regions? I have done this before with multiple transparent freeform graphics that overlie a "base" graphic (Switzerland). I adjust the shape of each so that it outlines a region of interest in the map. Assemble many together to fill the entire map. Best if these overlap each other just a little, so that no user click is made on an "empty" area of the map. If you set the opaque of the graphics and the blendLevel to 100, they will not be visible to the user, that is, the user will only see the map of Switzerland, but their scripts will be triggered when the user clicks on the shape that overlies a certain area.

Craig

[richmond62]

Are you saying that the size of the graphic is causing the failure?

No: nothing of the sort.

But were each Canton a separate picture, each of those pictures could have details stored as custom properties that could be delivered in a field on a mouseEnter.

I assume the OP is, basically, trying to copy the functionality of the webpage referenced.

[richmond62]

I have just been here: https://en.wikipedia.org/wiki/Cantons_of_Switzerland

and 'stolen' this image: https://upload.wikimedia.org/wikipedia/ ... belled.svg

Now to play 'silly bananas' with GIMP.

[richmond62]

-
Sorry: had a lazy feeling, so made a proof-of-concept stack from a much simpler picture.

[richmond62]

to add separate Information (Population of the regions resp.cantons) so that I can activate different regions.

OK: so my example stack completes part 1: separate Information for each area.

I do NOT understand what

activate different regions

means.

[dunbarx]

I think "activate different regions" simply means to be able to display pertinent data when that region is clicked on.

Dealing with multiple images, canton by canton, would surely work, but They would have to be perfectly assembled to create a cohesive map of the country. I would go the other way, a single image with local overlain graphics. These graphics can be more roughly built, and overlap each other a bit so they can be quickly drawn. Each graphic, as I mentioned, would have a handler, "mouseEnter" as your stack showed, or, I think better, mouseUp, so that the user clicks on a canton and some sort of information display gadget pops up.

Craig

[stam]

I think "activate different regions" simply means to be able to display pertinent data when that region is clicked on.

Looking at the OP's post, 'activate' means a Canton changes colour to grey, hilights its border, shows info boxes that appear next to the mouse.
I'm assuming the intent is to emulate what is shown in the URL.

It's very possible to do all of this within LIveCode, and probably easier than you think.

At first glance, the irregular shapes seem to be a concern, but if you look at the page source (open the web inspector in Safari's developer menu or equivalent in other browsers and look at the Elements tab), you'll see a lot of this type of code:

This an SVG path - so from here you could just copy the path (which begins with an "M" and ends with a "Z") into an SVG widget's path data, and hey presto you have a livecode image of each canton - below are the 2 top-right canton's as shown within LiveCode:

The only problem with SVG widgets are the bounding boxes - unfortunately the empty space in these will intercept mouseovers and mouse clicks so the empty spaces overlapping other graphics will cause this to fail.

A better approach would be to extract each path into a vector graphics app and export as PNG with transparency - this works better and you don't have to worry about the empty space in the bounding boxes, they do not interfere and you can overlap these with no concern.

the only issue really would be to re-size each individual graphic as needed to match the source.
The border and colour overlays can be managed with graphics effects within livecode - so with a bit of work you could simulate this very well.

S.

[Till Bandi]

great – thanks a lot to all, I will try and have some work

[richmond62]

-
https://www.dropbox.com/scl/fi/b32744qt ... 2ayco&dl=0

My stack contains individual images of all the Swiss cantons: feel completely free to copy them

[richmond62]

I derived my images by importing this document:

https://datavis.bfs.admin.ch/statatlas/ ... 34_131.pdf

into GIMP.

https://www.gimp.org/

After that the whole thing took about 45 minutes.

[jacque]

The only problem with SVG widgets are the bounding boxes - unfortunately the empty space in these will intercept mouseovers and mouse clicks so the empty spaces overlapping other graphics will cause this to fail.

I've done this with native LC graphics. The trick here is to set the opacity of each graphic to 99%. LC will ignore the bounding space if the opacity is anything less than 100%. Using native graphics means you can trace each one over a section of an image and then set the transparency. A 99% opaque graphic looks the same as a fully opaque one to the user.

[stam]

I've done this with native LC graphics. The trick here is to set the opacity of each graphic to 99%. LC will ignore the bounding space if the opacity is anything less than 100%.

Wow… if only I’d known this when I needed it… would have saved me hours:-(

But better late thannnever I suppose
Thanks for the tip Jacqui!