I have a map of a camping, this is it:
Now, on this map, there are a lot of camping places. And all of the places(yellow, pink and the striped yellow), need to be clickable.
So my question is, how would i achieve this? I was thinking about using SVG or something. Is this a good solution?
Basic idea: Create a color map to look up which spot the user has clicked.
To create that color map, start with the original map, overlay it with an empty bitmap and write a small tool application to help you:
it should let you paint a filled circle in a special color for each site spot
ideally those colors should allow you to re-construct the number and type of the places
upon each click the next color should be prepared
you don't need to match the place too exactly, but it is up to you to improve the colormap with a paint program; put the orginal map in a layer under it and use an eyedropper tool to get the right color and then draw the places a little better
as many of the places have consecutive numbers you can
count them up with each click
use an input box to set new starting numbers
For the actual application you should
hold the color map in memory
use the MouseClick of a PictureBox to get the coordinates of the place
multiply (or rather divide) those with the zoom factor
use GetPixel on the color map to get the color and then
extract the place number.
An ARGB color has 3 color bytes; two will suffice for the place numbers and you will still have one byte for the color coded types of places..
The zoom factor is 1f * PictureBox.clientSize.Width / PictureBox.Image.Width.
For best user experience I would use the PictureBox.MouseMove to look up the place in the color map and give feedback whenever the color changes, including setting and clearing the mouse cursor betwenn Hand and Default whenever the location is clickable, i.e. has a non-transparent color on the color map..
To avoid artifacts the color map must be stored asPNG , not as JPG!
If you want more info with the places you could (and should) create a Place class and hold a Dictionary<Color, Place> to look up Place by Color..
If you put the image in a PictureBox, say, you could use the MouseClick event.
Related
I'm working to a software that need a strange feature. I choose a png image like image attached and I need to place uniformly a certain number of points on black surface. I started with loop each pixel and change it's color to black, only for design, but now I need to think an algorithm to fill it with points (like 200 points (pixels with red color). You have a idea how to do this ?
Now in my mind is to count black pixels, then do something like this blackPixelsPerPoint = blackPixels / numberOfPoints. After this I now i need to have a red point every blackPixelsPerPoint.
The result need to be something like N letter
The points need to have almost same space between them and fill all the black surface if is possible (depend by number of points).
I'm working on an experimental project in which the challenge is to identify and extract an image of the icon or control that the user is has clicked on/touched. The method I'm trying is as follows (I need some help with step 3):
1) Take a screen shot when the user clicks/touches the screen:
2) Apply edge detection:
3) Extract the possible icon images around the Point associated with the user's cursor (Don't know how to do this)
There are easier cases in which the mouse-over event will highlight the icon/control, which allows me to identify the control with a simple screen shot comparison (before and after mouse-over). The above method is specifically for cases in which the icon is not highlighted. I'm new to emgu, so if anyone has any pointers on how to better achieve this, I'm all ears.
Cheers! Matt
Instead of doing edge detection. Consider taking the following steps:
Only grab pixels which are within a certain radius of the point of the user's cursor. Create a new image with just these pixels.
Use thresholding to classify into foreground and background.
Calculate the centroid, (use mean x coordinate and mean y coordinate). Calculate deviation from the mean. Discard foreground pixels which are beyond a certain deviation from the mean. Eg: discard pixels that are more than 1.6 deviations from the mean.
(You may need to experiment with this step ).
Use a convex hull to find the area of the image with the icon in it.
I am trying find a solution that would allow me change color for parts of an image.
For example lets say a picture of a chair.
A chair can have different frame or cushion colors.
I intend to let users select a frame or cushion and update the image.
We can only upload one chair image.
Any idea is much appreciated!
Detecting parts of the image to be modified
Detecting objects on images programatically is probably not the simplet thing to do ;). I suppose one of the good solutions to this problem was suggested by Collin O'Dell in his comment to the question. He suggested to use few images with manually separated parts of the image you want to recolor. Then, you can compose the final image from few different layers.
However, you can also keep the main image with all the objects and manually make some additional images, but only to keep masks of the objects (i.e. white pixels in places where the object is). You can then easily check which pixels should be recolored. This would allow you to paint directly on one image and avoid compositing.
Calculating the color
When you want to recolor the photograph, you probably want to be able to keep the shading effects etc. rather than covering all with the same solid color.
In order to achieve this, you can use HSV color space instead of RGB. To use this method you should:
read pixel's color (in RGB)
recalculate it to HSV
change Hue value of the color to get the desired color shade
recaluclate modified color back to RGB
set the new color of the pixel
For more information about HSV color space you can look here: http://en.wikipedia.org/wiki/HSL_and_HSV.
I'm writing a paint application. User must be able to move with all objects after it's painted or edited. I have a brush and erase tool, so user can erase all or any part of object painted with brush. So I made an object DrawBrush that holds a System.Drawing.Region made from GraphicsPath.
But I don't know how to size it. I need to change size in every direction separately on mouse move (for example only to left)
can someone help me?
I'm able to do anything with this object (moving), but no sizing...
A region is like a fence - it simply marks out the boundary of an area. It does not "contain" any graphics, so resizing a region will have no direct/visible effect.
If you wish to be able to move or resize portions of a bitmap image within your editor, you will need to copy a piece of your main image (as specified by your region) into a temporary Bitmap. Then you can draw the tempoary bitmap back to your main image (in a different location and/or at a different size).
If you wish to be able to draw multiple objects in your painting program, and then edit them (move them around and resize them) independently later, then you will need to store each of them in a separate bitmap object and composite them together to display the final image on screen or save it to a flat bitmap format. If you don't keep all the shapes separately like this, you will lose too much information and you won't be able to edit them later.
Before you try to work out write the code to do this, you may need to think about the design of your editor - what does it need to do, and how will you achieve it? How is your "document" going to be described? (A single bitmap? many small bitmaps that are drawn at different locations? Vector paths?). If you write code before you understand how you will represent the document, you're likely to paint yourself into a corner (sorry about the pun) and get totally stuck.
I am trying to write a simple program that lets me overlay a dot on top of an image when the image is clicked. I can save the X and Y data back to my database but then I will want to be able to call that information back at a later date and overlay the dots again via code unlike the first time when the user had to click the image.
I got as far as capturing the X and Y of the click no problem but I am having trouble finding examples specifically for what I am trying to do. All of the examples online seem to be for saving the image with the added graphic but I do not need to do that as it will be the same image every time.
Once I can do this, I also need to work out a way that I can detect what area of the image has been clicked. The areas I need to mark out vary in shape and size so I need to try and work out a way to 'map' these areas and then cross reference with the co-ordinates of the users click (I assume that I may need to do some clever geometry stuff for that?)
If anyone has any suggestions of what subjects/classes/methods etc. to research for either of my queries, I would very grateful.
Thanks in advance
You can use the System.Drawing namespace to achieve this.
Create a control and override OnPaint and OnPaintBackground. Store your clicks in a List
In OnPaintBackground, draw the image using DrawImageUnscaled using the graphics object which is passed to you as a parameter.
In OnPaint, loop through your points array and call graphics.FillElipse or similar to draw a little dot.
Because this isnt a retained mode graphics system, you need to keep drawing these items so this may not suit a large number of dots. In that case, you can create an in memory bitmap and get a graphics drawing object using graphics.FromImage.