Highlight with color parts of an image in a picturebox 1

[assimang]

Hello everybody,
Is it possible to color a part of an image in a picturebox without hide the part? I have a keyboard image in a picturebox and I want everytime the user types a character in a textbox to highlight the key in the keyboard image. For example if the user types A or a I want to highlight the A key with yellow color for example, in the keyboard image in the picturebox but without hide the key in the image. Is it possible? And how? Must I have to use a transparent control for this? What can I do? And how? Any help will be much appreciated.

Thank you
in advanced.

 

[assimang]

None??

 

[Borvik]

Here's how I see it.

You would need to specify coordinates for every key you would possibly want to highlight. Then refresh the picturebox so that the image redraws, and then using GDI+, draw a shape using the coordinates for the key and alpha transparency in the color so you can still see the key itself.

    Dim keyCoords As New ArrayList

    Private Sub LoadCoords()
        Dim theKey As New ArrayList()
        theKey.Add(New Point(5, 6))
        theKey.Add(New Point(35, 6))
        theKey.Add(New Point(35, 36))
        theKey.Add(New Point(5, 36))
        keyCoords.Add(theKey)

        theKey = New ArrayList()
        theKey.Add(New Point(35, 6))
        theKey.Add(New Point(65, 6))
        theKey.Add(New Point(65, 36))
        theKey.Add(New Point(35, 36))
        keyCoords.Add(theKey)
    End Sub

    Private Sub DrawKeyHighlight(ByVal keyCoordIndex As Integer)
        PictureBox1.Refresh()
        Dim points(CType(keyCoords(keyCoordIndex), ArrayList).Count - 1) As Point
        For i As Integer = 0 To CType(keyCoords(keyCoordIndex), ArrayList).Count - 1
            points(i) = CType(CType(keyCoords(keyCoordIndex), ArrayList)(i), Point)
        Next
        Dim g As Graphics = PictureBox1.CreateGraphics()
        Dim brsh As New SolidBrush(Color.FromArgb(100, 255, 242, 0))
        g.FillPolygon(brsh, points)
        brsh.Dispose()
        g.Dispose()
    End Sub

The coordinates can be stored however you like really - just so long as you can pull them properly in the drawing function. Notice the 100 as the "a" value in the Color.FromArgb function. This gives the color partial transparency.

Hope that helps.

 

[assimang]

Thank you much Borvik,
I haven't understand what exactly keyCoordIndex represents.
And how can I call DrawKeyHighlight may you explain me please?

 

[Borvik]

Once all the coordinates are loaded into the array/list (however you store them) the keyCoordIndex variable just is just a key to locate the correct coordinates.

In the example above you would call in DrawKeyHighlight(0) or DrawKeyHighlight(1) to get it to work.

You could just as easily use a hashtable with the key being the letter/digit/symbol on the keyboard, and the value being the array of coordinates - in which case the keyCoordIndex should be the key that you used in the hashtable (not necessarily an integer).

 

[assimang]

Thank you so much Borvik, I understood it, just one more question please i forgot, about this for example:
how do we know which number represents the width of the shape and which the location in the picture?
theKey.Add(New Point(35, 6))
theKey.Add(New Point(65, 6))
theKey.Add(New Point(65, 36))
theKey.Add(New Point(35, 36))

 

[Borvik]

The example I threw together was just an example of a possibility - the best way might be to use a hashtable.

Dim keyCoords As New Hashtable
keyCoords.Add("a", New Point() {New Point(35, 6), New Point(65, 6), New Point(65, 36), New Point(35, 36)})

In which case the DrawKeyHighlight might be rewritten:

    Private Sub DrawKeyHighlight(ByVal keyCoordIndex As String)
        PictureBox1.Refresh()
        Dim points() As Point = CType(keyCoords(keyCoordIndex), Point())
        Dim g As Graphics = PictureBox1.CreateGraphics()
        Dim brsh As New SolidBrush(Color.FromArgb(100, 255, 242, 0))
        g.FillPolygon(brsh, points)
        brsh.Dispose()
        g.Dispose()
    End Sub

 

[assimang]

Yes I understand this, my question was, in this example for example...
which number is width, which is height, which the location.x and which the location.y so that i can know how caclulate the dimensions.

 

[Borvik]

Ah gotcha.

It doesn't matter what is what - the function being called is FillPolygon. You could have 6 points to a key and it would then draw a 6 sided figure. None of the numbers are width or height - they just represent each point of the key in the image. You could write a routine on MouseMove of the picture box that updates a label with the current location to help locate all the points you need.

 

[assimang]

I am just a little bit confused. How do I know the dimensions of the polygon? How do I know where to position it? Sorry I think I haven't understand

 

[Borvik]

That's where the routine on MouseMove comes in handy. You only need that while you are getting the points. Have the following code in MouseMove of the picturebox:

Label1.Text = String.Format("({0}, {1})", e.X, e.Y)

Then position the cursor over each point of the key and take notes.

Once you've gotten all your points you can remove that MouseMove event, and the label.

 

[assimang]

That's great. Thank you very much Borvik.
So, the what I have to do, is to store the points I want in a table and load them in the LoadCoords. Thank you so much again.

 

[Borvik]

Not a problem - good luck with your project.

 

[assimang]

I think I have it
I thank everyone helps me there!

 

[assimang]

Borvik is it possible to highlight more than one keys, similtaneously? And how? I have stored every key's coordinates in a table in my sql database. I think I must do something in LoadCoords in Dim theKey As New ArrayList()
to store only the characters I want to highlight similtaneously, but I am missing it. Any suggestions?

Thank you
very much again

 

[Borvik]

Yes it's possible. You will just have to call the DrawPolygon method more than once.

You could set it up to pass an array of keys to the drawing function and then loop through the array getting the coordinates for each key and then displaying it using DrawPolygon.

 

[assimang]

Thank you much Borvik, once more!