Printable View
Hi All
I am creating a Windows based application, my main screen is based on a picture, instead of using buttons, I would like to create hotspots on the picture for navigation, is this possible in the .net Windows application, this is not for the web.
Cheers
Djbel
You can load an image directly onto a form, or onto a picturebox control. Then, you can capture mouse clicks, and compare the location to 'spots' that you activate, and fire in the 'click event' and produce the action.
Hi dglienna
Thanks for the reply. unfortuantly I am not exactly clear on what you mean. Do you mean have a set of cordinates for each area, then take the position of a mouse click and check if it is within a set of coordinates, if it is then fire a click event? If this is the case just got a couple of questions, how do I set up a coordinate location for an area on a picture and secondly how would I do this for complex shapes such as circles, ect?
Cheers
Djbell
It is going be a bit more complicated if you are using irregular shaped hotspots.
Using the mouseup event will give you coordinates clicked in the picbox. You will need a way to determine which region the clicked coordinates are in.
Rectangular and circular regions should be relatively easy. I would create a class for your regions containing the following vars: region_type (enum), parameter1, parameter2
region_type specifies whether the region is circular or rectangular. If circular, parameter1 is midpoint of circle and parameter2 is radius. If rectangular, parameter1 is upper left corner and parameter2 is lower right.
You will need a routine that accepts your coordinates, checks through your regions and calls the appropriate function (this could happen in the region class if you do it that way).
ps: have you looked at WPF ? I think this can be done on a WPF form.
Not with a class of shapes, if they are all the same size (within circle or square dim's)
Gets more complex with different sized shape, though
IF you control the picture, there is a simple trick...Use the LSB of each color. This allows for 7 hotspots in an impage without ANY calculations. ;)
Stegography in action!!!!
Which 7 are those? :)
Use a 24/32 bit format. Make sure the "real" picture has only EVEN color values (LSB or R,G,B are 0.)Quote:
Originally Posted by dglienna
Now modify the picture to the the LSB to 001,010,011,100,101,110,111 (R,G,B) for seven different areas.
Now when you geta click, look at a the pixel. Grab the LSB of R,G,B; combine. If 000 then not a hotspot, otherwise it is one of the 7...
That sounds great. I'm trying to imagine it in my head, but a picture would be worth, well, 1000 words? (plus a :thumb: after I spread some holiday cheer)
Here...
This blue picture is primarily made op of one color, with EVEN R,G,B values...
Some of the pixels had had 1 lsb added to one or more of the colors.
TheCPUWizard, the solution is of course interesting. But how maintainable is it? Altering the background image on pixel level, at least for me, is a tedious task :). Also, scalability is a factor to consider.
Since you're using .NET, I suggest using one of the windows forms skinning techniques out there, or even create a HTML page, with regions, and place a web browser control on your form.
Personally, I would go with skinning.
Maintaining the pictures is not a problem..IF you have a decemt layer based graphic editor. The primary advantage is that all of the information is contained in the image itself.
--- If you need more hotspots, use 2 LSB, this give you 63 distinct ones on a single image.
--- Alternatively, supply TWO images, one which you display and ony (often just 8 bit resultion) where each color in the second represents a different hotspot.
I use this technique heavily becuase I am NOT a graphic designer, and outsource all my work [shameless plug: My eldest daughter graduated last year from university with a degree in graphic arts..].
Most other techniques involve a tighter coupling beteween the visual information and the coding....
So, that means you change all pixels within the 'hotspot' so that you know when you're in the 'hotspot'Quote:
Originally Posted by TheCPUWizard
That would be hard to resize, I'd imagine...
The two-image idea sounds a lot better. You could resize only the visible image, and scale the mouse-clicks
Exactly. Not that this will NOT work with "lossy" compressed formats like jpeg).Quote:
Originally Posted by dglienna
Resizing (regardless of methodology) does introduce some difficulty. In most cases a little "fuzzyness" in the determination may be acceptable, but in others it can be a problem.Quote:
That would be hard to resize, I'd imagine...
The two-image idea sounds a lot better. You could resize only the visible image, and scale the mouse-clicks
I took the chance to try something..
here is a quick project just to test if this can work ..
I created a second Jpg in greyscale with each region in a different color .. there is still a little 'Noise' between regions as i did not do it 100%, but just a quick test..
I used steps of 10 for each region, so region 1 is 0, region 2 is 10, etc ... (255 = background)
I used two pictureboxes, one to show the Sized /Stretched image, and a hidden one to hold full size image..
I then translated the cursor position to actual on the image and get the Regions color on that spot.. no problems with image stretch color distortion with this method..
Hope it works for you..
Gremmy...
--EDIT--
Fixed Zip on later post
Tried to get that to compile, but it's missing files. Post a .sln file, outside of the program folder itself. Inside, copy everything EXCEPT the BIN and OBJ folders, and we can unzip and run.
HotSpots.sln would open .\HotSpots\My Project
Ya, and I couldn't frankenbuild it either.
I am eager to take a peek though.
__________________
Tip
Oh, and I've got a good tip that's slightly related to the .sln file.
Sometimes that file ends up inside the folder along with the .vbproj file, after converting from an older solution 2003.
It's easy to move the .sln to it's proper placement outside.
Then open it with notepad, and on the 3rd line or so, you can modify the path to the .vbproj file.
The line would look something like this:
This doesn't actually work with the HotSpots project, but it would work for converted projects, that don't conform to the vb 05-08 structure.Quote:
Project("{.....}") "HotSpots", "HotSpots\HotSpots.vbproj", ....
Yup, the MyProject folder is empty.
But the solution file actually opens the project file, which then in turn needs the contents of the MyProject folder.
So we don't even need a solution file, just the MyProject folder content.
I get about 10 errors, about missing resourses. Might be something about Vista x64?
I just got 1 error(xp), not able to open the vbproj file.
Almost certain, it's the missing resources within the MyProject folder.
Sorry Guy's ..
Not quite sure what the hell happened there, Posted it the same way i always do ... however somehow i think something got Fed.. When i check the original zip on my system, it also gave errors..
Heres a new zip .. (tested this time, and it does have everything in it ...) [.NET 2008 (2.0 Framework)]
Hey GremlinSA,
The solution file is getting an error, saying that it was created by a newer version. Perhaps 2010?
The project file seems to open fine though.
But man, this 2008 makes everything run wicked slow.
I had tried 2008 early last year, and gave up because of the insistently annoying intellisense, and extra junk jazz that was pre-requisite.
I'm beginning to regret re-installing it, but I got check it out more thouroughly I guess.
Wow, that's awesome code Grem! Works perfect.
Unforetuneatly, 2008 has got to go for now.
It's causing all of my windows a 400-800 millisecond delay before showing.
I mean all of them.
I'm gonna re-re-install it after doing a 2 minute shutdown, and see what happens on my other machine too.
If nada, then it gets the boot for good.
The basic idea about not zooming the mask image is taken from work done in the Crop/ Zoom project Thread, (VB6 forum)..
This way you have a lot less distortion of the pixel data, and a more accurate Hotspot definition.. (If the zones are painted properly..)
In the Grey scale image i just used a 20 pixel pen to paint over the specified hotspot regions, Freehand.. then i saved it in Jpg format, that does haze the edges, BMP is better for masks..
I also used a 10 step color gaps as it alows you to see the different regions in the mask, however you can use 1 step color gaps, and have 255 hotspots... or you could use truecolour and have prety much unlimited hotspots..
I'm not sure why it told you that it was created in a newer ver.. I'm using VS 2008 Pro.. (9.0.21022.8)
It's super impressive, and very short code. I was expecting at least 3-4 pages.
I had a hard time trying to trick it into giving the wrong hotspot at all.
You're right, it should not have thrown that error, because my version in the about window, says 9.0.30729.1, which is actually newer than yours.
However, I suspect it's the pro or Studio, since this is only express. Not sure how that works though.
Great work, Gremmy! Finally got around to testing it out. Need a little more info about the greyscale. How did you make that again? I see tracing the hot-spots. Obviously BLACK is zero.
Then you colored everything in the region BLACK, and then marked the LSB of all the BLACK regions?
I made it even easier than that ...
Because Pic2 is a background mask, and the user does not get to see it, i used all the greyscale bits, giving me 256 different regions. (&H00 - &HFF) ..
I used white (&HFF) as the base region, or background, non hotspot. and painted each region needed as a hotspot with a different color.
So for the first region i used black (&H00).. For region 2, I could have used the next color (&H01) but i jumped a few to visually show the different regions in the masked image. So region 2 is color 10 (&H0A), region 3 = 20 (&H14) .. etc
Esentually you use each available color as a region, and can have 255 hotspot regions set in the image.
Gremmy..
OK. That makes sense. I've used a Mask image before, but it was two-color only
That is a clean and usually better approach....but, the original post:Quote:
Originally Posted by GremlinSA
Technically eliminated any approach where 2 images (one for display one for mask) was used.Quote:
based on a picture
Once one "plays with" the two image approach and is comfortable in understanding its operation, it should not be difficult to make the jump to slight restrictions in the image colors. e.g. only even shades so that the least significant bit is not used to convey color, but rather conveys (part of) the mask.
:wave::wave:
TheCPUWizard,
Man, you just disagree with everything.
Technically, the original post didn't say
"based on one picture"
That was your own mental restriction.
Have any code? I was trying to figure out how you'd go about setting LSB of the original image...Quote:
Once one "plays with" the two image approach and is comfortable in understanding its operation, it should not be difficult to make the jump to slight restrictions in the image colors. e.g. only even shades so that the least significant bit is not used to convey color, but rather conveys (part of) the mask.
I answered that publically back in Reply #8, (and also sent you detailed information via PM....Quote:
Originally Posted by dglienna
Step #1: AND each pixel with 0xFFFEFEFE
Step #2: Convert Hot Spot ID 1-7 into 0X000001, 0X0000100, 0X0000101, 0X010000, 0x010001, 0x010100, 0x010101
Step #3: Or Value with color.
Maybe I'm missing something. What program would I use for that?Quote:
Use a 24/32 bit format. (Convert IMAGE using ??)
Make sure the "real" picture has only EVEN color values (LSB or R,G,B are 0.) (That's the tough one)
You WRITE one. :rolleyes:Quote:
Originally Posted by dglienna
Which is something you apparently couldn't do easily, or at all?Quote:
You WRITE one.
Just for fun, I wanted to copy each masked area to a new image.Quote:
Originally Posted by GremlinSA
Found some code for fast copying, and adapted.
But I can't copy back the masked images into picturebox. Just stuck in
(I found that code, and copied the above code.)Code:Dim ms As MemoryStream = New MemoryStream(Array.ConvertAll(Source, New Converter(Of Int32, Byte)(Function(v As Int32) CByte(v))))
Destiny = Image.FromStream(ms)
There is no way the Image destiny can know the width, height, and PictureFormat to load that stream.
Also tried to invert my packing code, but don't understand well how to marshall it (I put comments at the end of the routine.)
I forget to say the routine isQuote:
Originally Posted by Marraco
and is in the Utilities.vb module.Code:Friend Sub ConvertToImage(ByRef Source As Integer(), _
ByRef Destiny As Image)
I already posted the code. What I typically do is use PhotoShop, reduce the color depth of the original image, add a layer with the appropriate color for each hotsopt then simply merge the image.Quote:
Originally Posted by TT(n)
But it CAN easile be done in ANY language and used on ANY platform simply by iterating the pixels and performing the steps posted.
Technically you haven't posted any code in this thread.Quote:
I already posted the code. What I typically do is use PhotoShop, reduce the color depth of the original image, add a layer with the appropriate color for each hotsopt then simply merge the image.
But it CAN easile be done in ANY language and used on ANY platform simply by iterating the pixels and performing the steps posted.
Don't try and take credit for Grem's code, or even his idea since you've already opposed it, as being a two picture solution.
I think you need mental help. I'm putting you on my ignore list.
For those who can not find the original material on stegography and its utilization for hotspots, or have problems with the c++ implementation in the article, here is a (non-optimized) VB.NET
Code:Public Shared Sub Encode(ByVal src As Bitmap, ByVal mask As Bitmap, ByVal key As List(Of Color))
Dim x As Integer
For x = 0 To src.Width - 1
Dim y As Integer
For y = 0 To src.Height - 1
Dim rgb As Integer = (src.GetPixel(x, y).ToArgb And -65794)
Dim m As Integer = key.IndexOf(mask.GetPixel(x, y))
rgb = (rgb Or HotSpot.t(m))
src.SetPixel(x, y, Color.FromArgb(rgb))
Next y
Next x
End Sub
Public Shared Function HotIndex(ByVal src As Bitmap, ByVal x As Integer, ByVal y As Integer) As Integer
Dim m As Integer = (src.GetPixel(x, y).ToArgb And &H10101)
Dim i As Integer
For i = 0 To 8 - 1
If (HotSpot.t(i) = m) Then
Return i
End If
Next i
Return 0
End Function
Shared Sub New()
HotSpot.t = New Integer() { 0, 1, &H100, &H101, &H10000, &H10001, &H10100, &H10101 }
End Sub
Thanks. :thumb: That makes it crystal clear. I think I was hung up on this line:
Plus the fact that I've never used Photoshop. (artistic skills lacking)Code:Dim rgb As Integer = (src.GetPixel(x, y).ToArgb And -65794)
No problem...You really have to stop thinking in decimal ;)Quote:
Originally Posted by dglienna
You should be able to see how to extend by chaning 010101 to 030303 and getting 31 distinct spots.
Also if the patterns are in a List rather than an array, the explicit for loop can be replated with an IndexOf, and the total amount of code that is needed in the application is a single statement.
Actually the reason I DO use photoshop is because I am completely non-artistic, but you can create plugins that do all of the work based on a mathematical basis.Quote:
Plus the fact that I've never used Photoshop. (artistic skills lacking)
As you should now see, the colors for active areas will be VERY VERY close to the colors used for the same visual look, but in non (or different) areas. This does make this approach MUCH more suspectible to any distortion caused by compression and/or stretching. A 0.0000476837158203125% distortion will cause false results.
I've played a little with the idea of moving to only a single image using the LSB of each color as the Hotspot masking ...Quote:
Originally Posted by TheCPUWizard
And here is a list of considerations that i feel do not warent doing so...
1) The Hotspoted Image WILL HAVE TO be stored as a BMP .. Why
- JPG's loose compresion wreeks havoc on the LSB's, causing a loss of hotspot info ..
- GIF's Indexed color map. Too stay within the max colors the encoder will merge most of the close colors, again causing a loss of LSB's.
- Most other image compresion formats also loose LSB data..
2) In the case of stretched images the image will still need to be loaded twice.
- First. To the streched/Squeezed picturebox.
- Second. To a hidden image sixed picturbox
Because of the unpredictable effect of the stretch code on pixel color's there's a good chance of LSB data loss ...
looking at simple Color averaging .. if we half the image size, and use the avarage of a 2 * 2 pixel block to select the color (looking at only one byte) and our cube has Color codes : 43,45,47,49 ... (LSB set for hotspot) however our new single pixel will have an averaged color code of 46 :eek: (LSB NOT SET) changing our hotspot value.
3) Applying Multiple masks to a single image requires a new full image for each set.
Consider the point of an image with multiple levels of focus. Like the one used in my example, if we looking at the foreground, we hotspot only items in the foreground, and ignore the background.. However we could draw up a second mask for it, ignoring the foreground and hot spot each of the seperate fish in the background.
Using a Seperate mask allows multiple masks to be applied to a single image.
These are just a few of the issues that I can foresee in the use of LSB's for hotspoting .. BUT I"M NOT SAYING that you cant use it, it's still worth a try..
Gremmy..