Mapping areas of Image - c#

In my desktop application i want to place a country map and states clickable. On clicking certain state the color of state should change and it should show some state specific info.
What will be the best approach to do it?
-HD

WPF shapes such as the Path are clickable so it is relatively easy to capture a click on a state and change the fill of the shape. The hard part is drawing all the shapes.

You can make image maps with GIMP. Go here for an official tutorial from GIMP: http://www.gimp.org/tutorials/Image_Map/
Now, you'll have to figure the rest out in the programming language you are using. :)

Related

How can I display a dynamically generated image on top of Bing Maps WPF control?

I've been searching for a bit on how I can display scalable media on top of a WPF Bing Maps MapControl, but I cannot find any example code or a solid solution to my problem.
Here is the control documentation:
https://learn.microsoft.com/en-us/previous-versions/bing/wpf-control/hh750210(v=msdn.10)
I'm generating a grid that represents a density map, which then becomes a bitmap image. This is fine, I have the image. How can I overlay this image onto the map with some transparency such that the user is able to move and scale the map if necessary?
My initial thought is to create a tile layer and add it to the map control since I know the size of each square and its lat/long, but there doesn't seem to be many examples of anyone doing this online. The documentation is somewhat scattered as well, and more heavily focused on UWP:
This appears to be exactly what I need, but it is a UWP control - https://learn.microsoft.com/en-us/windows/uwp/maps-and-location/overlay-tiled-images#overlay-tiles-from-local-storage
This also appears to be useful but only has XAML code, no actual C# showing what the buttons do...
https://learn.microsoft.com/en-us/previous-versions/bing/wpf-control/hh868033(v=msdn.10)
Okay, the next thought was to make the image, then scale it appropriately and overlay the media onto the map using this documentation, but again, only XAML code is shown as an example. https://learn.microsoft.com/en-us/previous-versions/bing/wpf-control/hh868032(v=msdn.10)
Has anyone done something like this in WPF? I'm a bit lost.
Thank you.

2D Dynamic HW Position on Image WPF View

I am working on a .Net WPF app that displays fixed network gateways (switches, routers) inside an office premises.
I am looking at represent the office plant on 2D view, and dynamically/automatically place items on it that represent those network devices to give an overview of their position.
I have thought about storing the coordinates XY (pixel) with the HW Details, so the end-user can just adjust those coordinates to move the device to a new position on the image.
1. Will this work?
2. Is this a very rudimentary solution? Will it adapt if the Window size changes.
3. Can anyone recommend a Nuget Package ?
4. Can anyone recommend me an algorithm?
Appreciate your help.
Regards
There is a nice DragCanvas Demo at codeplex. Which shows a lot of what you want to do.
You can resize the window and handle the event to resize all the controls on the canvas but it sounds like if this solution just used inside your company, I would avoid the extra code just allow a reasonable fixed window size so you can store the offsets of each network image and restore them when the program is reloaded (but yes you can do it).
Yes this will work
You do not need a complex solution?
No packages needed.
algorithms not really needed. ( google "resizing canvas controls")
Figure out how you want to save/load the positions in file or Db and you are done.

implementing the WP7 chatting style

I'm trying to design a chatting app, I want the sender/receiver's text to be shown inside these text balloons that's in the native messages app in WP7.
I can put each conversation in a textblock and color it like the current used theme, but still it won't have the pointy thing of the balloon here:
So how can I implement this to my app?
Check out these links:
http://www.scottlogic.co.uk/blog/colin/2011/07/a-wp7-conversation-view/
http://shawnoster.com/blog/post/Recreating-the-Windows-Phone-7-message-e2809cbubblee2809d-style-in-Silverlight.aspx
They should have all you need to get started.
Read up on Shapes and Basic Drawing.
What you want to do , is to define two shapes (one being a mirror of the other), with the "triangle" popping out as part of the polygon.
I'll recommend a tool like Expression Design or Expression Blend for creating the polygon.

C# Rich GUI Application

I want to create an app to declare microprocessor's pin as input/output with mouse clicks. I created a mockup - http://i.stack.imgur.com/GOHQ5.png. I think it would be best to declare each pin as an separate class so I can change its state easily, but I dont know how to achieve that along with graphical representation of it. Each square should be clickable and changin its color. Then foreach loop to iterate throu them and get state information of each.Should I go with WPF or Silverlight or just simple click events? What is the best approach to implement that in .NET?
If you want a website, do Silverlight. Otherwise do WPF because it will be easier.
I'd just do an image for the center piece, unless it's going to change size, in which case you could just draw it out of lines and an ellipse. Use a Canvas in your main window, not a grid. Make a Pin class that handles the state/color/positioning information. You can draw the square with a Rectangle.
Don't worry about MVVM, that's going to be more trouble than it's worth for your case.
Silverlight or WPF doesn't make much of a difference in this case. Deployment of the application (web or not) might help you chose.
Implement the state machine/processor as a class (ViewModel) and implement the UI as a View. That will help to keep the code clean. Look up MVVM Model-View-ViewModel.
You could do this in WPF, Silverlight or Winforms.
From a graphical perspective, it might be easier to reproduce your mockup in WPF or Silverlight. Choosing between WPF and Silverlight really comes down to how you want to deploy the app (eg for SL you need a web server).
Make your choice, start writing code and then come back here with specific issues as you encounter them.
Good Luck.

How to select, display and save regions of a graphic?

So here's the situation: I need to take a (user-specified) graphic, and allow the user to define and label regions within that graphic. For example, if you uploaded a picture of a face, you might want to define "right eye", "left eye", "nose" etc. Also, having defined the regions, if I select a previously defined region, it should be highlighted on the image somehow. These regions are (obviously) not necessarily rectangular, and they cannot overlap. And if you click within a defined region in the graphic, I would be able to identify which region was clicked on.
There are a couple ways I can think of for doing this, none of which are quite satisfactory. Another developer before me tried doing it with a transparent grid overlaid on the original graphic, fiddling with the background alpha/color for highlighting regions, but I think they rather kludged it. I could either get my hands really dirty trying to clean up their code, or try a completely new approach.
What would you suggest for maximum speed and user-friendliness?
Bounty added: for the best solution that will get me up and running in the minimum time.
The GraphicsPath class is made to do this. Keep a list of them along with the image. Draw the image first, then Graphics.DrawPath() to draw the regions on top of the image.
Hit testing is simple with GraphicsPath.IsVisible(). Iterate the list in reverse order so overlaps work.
Assuming you haven't decided yet on the technology you'll use, I'd suggest WPF; I find most graphics-related tasks easier with WPF (at least in version 4) and it's specifically geared for interactivity, so creating non-rectangular regions using mouse clicks and hit-testing clicks to select shapes would be pretty easy. Loading images is also easy.
However, if you haven't used WPF or Silverlight until now, there is some overhead in learning the basic concepts and APIs; so I'm afraid there's no real way I can recommend it as a maximum speed solution without knowing your (or whoever's will be working on it) competencies. That said, using MVVM and WPF would be definitely the maximum speed solution for me. Also the maximum user-friendliness since WPF enables quite interesting interaction models out-of-the-box, like multi-touch support (that's the trendy one that should be mentioned, right?) and easy non-standard layout and placement of controls.
You need polygons, saved as list of points. And you need hit testing for them. See the link:
http://social.msdn.microsoft.com/Forums/en-US/csharpgeneral/thread/40ebadc1-6154-4c7c-9cb1-d608a426b29c

Categories

Resources