Map regions as a button

I have a geographically diverse client with operations broken down into many regions(30+). They want a map of the province (or state) with each region marked. When a user clicks on a region it will open the project for that region.

Other then the paintable canvas, is there a way to do this?

Given the complexity of the area/regions boundaries, I would imagine drawing the button boundaries on top of a map image is the way to go.

I like using shapes as overlays that the user can see and click on.

For example, I might start with an image screenshot from Google Maps. I would overlay a very transparent blue rectangle (4th number in the color is transparency). On the mouseEntered event I would set the borders to a 3-4 pixels wide, then set the borders back to 0 on the mouseExited event. This allows the user to see the regions that they’re allowed to click on. You would then set up whatever navigation or retargeting on the mouseClicked event.

Be sure to consider the possibility of different resolutions and resizing the window. You’ll probably have better luck using an anchored layout instead of relative.

You can achieve irregular click areas by using multiple shapes together, if necessary.

Yep, I’ve done that for a simple map already Nathan.

I now have a very complex map to do it for (4 regions made up of 54 areas).

Any plans to support irregular polygons as a shape?

“Native 2D” is a high priority feature set that I’m very excited about. I can’t provide an exact timeline, but it’s in the works.

Clever scripters
- is there a way to determine the color of the pixel that you click on of an object? Robert may be able to create a map that uses distinct colors for each of the 54 areas, then uses one script that tells you where to go based on the color. As a best practice, I would use a lookup table in the database with the following fields (area_window, color, description).

You can get the colour of the point you click on by including the following code in an object’s mouseClicked event:import java.awt.Robot robot = java.awt.Robot() x = event.x + event.source.getLocationOnScreen().x y = event.y + event.source.getLocationOnScreen().y colour = robot.getPixelColor(x, y)Can I get my ‘Clever Scripter’ badge now please? :slight_smile:

Sure - well deserved. That enough to get you started, Robert?

Well deserved! :thumb_right: Simple and elegant.

I know you were asking about something besides the paint component, but in the long term you may want to consider it. I also have lots of irregularly-shaped obects on my screen, and once you figure out how to draw the objects, it’s simple to see if you are clicking within the object bounds using AlThePal’s code buy using the Area method.

And coincidentally, SQLServer 2008 has a new data type called Spatial Data, which I’m going to try in my current project. Its intent is to store GPS and geometric data, and looks like it would be very useful for creating collections of shapes. I’m already doing something similar in SQL, but each data point occupies a row. With spatial data, the entire entity can be stored as one record.

Thanks guys,

Step7 - your probably correct and I’m sure I will be driven to learn java2D sometime in the next year. SQLServer is out of the question as we are running on linux. I know MySQL has some sort spatial datatypes. We are using PostGres right now so I’ll check into it first.

AlThePal - thanks for the code snippet. That would have being my next question I’m sure. :smiley: Nice badge too.

I’ll give your idea’s a try over the break.

Thanks again

Ok, the customer has given me a pdf file of the map.
I exported it as a jpeg.
I imported it into Inkscape.
I clicked “Path / Trace Bitmap” to turn it into a vector file.
I deleted all the paths except the one that gave me the boundaries.
I then filled in some of the regions.
Saved the file as a SVG.
I then used this tool to covert the SVG to java2D code.
I then edited the java2D code so it would work in the repaint action for the paintable canvas.

Then I got the error when trying to save :cry:

This error does not have the “Send to Inductive Automation” button.
(Note to mods: Please, please, please let us cut and past error messages)
Error: Invalid this class index 17146 in constant pool in class file org/python/pycode/_pyx5
followed by the usual stack trace.

I have attached the scripted java2D code.

Is my problem in the java2D or have I bumped a size limit?

I think using a picture would be a lot simpler that trying to draw everything using a Paintable Canvas. I’ve attached an example showing how you can click on a map of the US and display the name of each state (or 6 of them anyway :slight_smile: ). This way things are very straightforward. It also still works well when resized. I used a PNG file rather than JPG file as the compression in JPG can end up changing the colours slightly, which makes matching them more difficult.

(You will first need to import the picture into your project using the Image Management tool in FactoryPMI.)

That certainly is a lot easier than what I’m doing. :smiley:
WWWAAAAAAYYYY less code to write 8)

Thanks Al

Simple is best ([size=85]almost[/size]) every time :thumb_left: