How to create a Color Code generator (Bar-code inspired)

Introduction

In this article, you'll learn how a Color Code works and how you can make yours too. It is very useful to  store small numbers and makes a very small file size. I've created the Color Code because I always wanted to create some sort of bar code. If you've always wanted to do so, this is your chance to!

Creating the creator

The things you'll need to create your generated and your decoder are the following:

• Microsoft Visual Studio (The year doesn't matter. I use 2010)
• .NET Framework

Let's start by creating a new project. You can name it whatever you want. Here are the form settings I use to make the program look good:

• Size of 438 x 165 Pixels
• StartPosition: CenterScreen
• MaximizeButton: False (Because we don't need it
• FormBorderStyle: FixedDialog

Now let's start programming

 

First, let's create the function ReturnRGBValue. What this function does it that it converts the given integer (from 0 to 9) into an RGB value.

'It is a function because we want it to return a value, in this case, a clor
Public Function ReturnRGBValue(ByVal Number As Integer) As Color
        'Create our color
        Dim Color As New Color
        'If it is true, we set the color's color 
        If Number = 1 Then
            Color = Color.FromArgb(255, 255, 255)
        ElseIf Number = 2 Then
            Color = Color.FromArgb(245, 245, 245)
        ElseIf Number = 3 Then
            Color = Color.FromArgb(235, 235, 235)
        ElseIf Number = 4 Then
            Color = Color.FromArgb(225, 225, 225)
        ElseIf Number = 5 Then
            Color = Color.FromArgb(215, 215, 215)
        ElseIf Number = 6 Then
            Color = Color.FromArgb(205, 205, 205)
        ElseIf Number = 7 Then
            Color = Color.FromArgb(195, 195, 195)
        ElseIf Number = 8 Then
            Color = Color.FromArgb(185, 185, 185)
        ElseIf Number = 9 Then
            Color = Color.FromArgb(175, 175, 175)
        ElseIf Number = 0 Then
            Color = Color.FromArgb(165, 165, 165)
        End If
        'We return the color that we just set the rgb value
        Return Color
    End Function

Now that we can get a color from a simple number, we need to create our bitmap!

This is the create function. Again, it's a function because it returns a bitmap image

Public Function Create(ByVal Number As Integer) As Bitmap
        'I convert it to a string and add one to remove a bug
        Dim One As String = "1"
        Dim TempNumber = Number.ToString
        TempNumber = TempNumber + One
        'We convert the number to a string in order to get its length
        Dim StringNumber = TempNumber.ToString
        'We get its length
        NumberLength = StringNumber.Length
        'We create a new bitmap and as you can see, its width is the same as the number of integers
        Dim ColorCode As New Drawing.Bitmap((NumberLength), 1)
        Dim GFX As Graphics = Graphics.FromImage(ColorCode)
        'The for paints the colors to the bitmap
        For i As Integer = 1 To NumberLength
            'To get the number we need to paint, I used Substring(). It starts at i-1 and is long 1 character
            Dim CurrentNumber As Integer = StringNumber.Substring(i - 1, 1)
            'We fill the rectangle, so I created a new solid brush and its color is returned by ReturnRGBValue() Function.
            'The rectangles location is i. Its Y location is always gonna be 0 because the color codes width is always 1
            GFX.FillRectangle(New SolidBrush(ReturnRGBValue(CurrentNumber)), i, 0, 1, 1)
            'Exit the loop when we reach NumberLength, because there are no more numbers to paint
            If i = (NumberLength + 1) Then
                Exit For
            End If
        Next
        'We return the completed color code
        Return ColorCode
    End Function

Now that we've assembled our color code, it's time to save it and create a GUI. Let's start by making the GUI. I've made an image showing what you need to add. Use the names provided by the image for the textbox and the buttons.

Once they're all added, head back to Form1.vb tab

 

Add the following ontop of the page after Public Class Form1

Dim NumberLength As Integer

It's not been added in the Create() Function, because we need it for the next Sub

This sub is the one that's gonna save the bitmap where the user chose to have it saved

'Sub generated by Visual Studio  
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        'If the user didn't choose a path yet        
        If Button2.Text = "..." Then
            'Tell the user he has to choose a path
            MsgBox("Place select where you want your Color Code to be saved")
        Else    
                'We need to create a temporary bitmap before creating the final one because we need the Create() function
                'to fill the NumberLength variable
                Dim BMP As New Drawing.Bitmap(19, 10)
                'Create bitmap
                BMP = Create(TextBox1.Text)
                'Create final bitmap with the length provided by the Create() function
                Dim NewBMP As New Drawing.Bitmap(NumberLength, 1)
                NewBMP = BMP
                'Save the NewBMP where the user choose to
                NewBMP.Save(Button2.Text)
            End If
    End Sub

We can now save our bitmap, but we gotta let the user choose where he wants to save it to.

'Sub generated sub by Visual Studio
Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
        'Create our new SaveFileDialog
        Dim Save As New SaveFileDialog
        'We allow the PNG, JPG, GIF file types
        Save.Filter = "PNG |*.png |JPG |*.jpg |GIF |*.gif"
        'Display it
        Save.ShowDialog()
        'We set our text to the selected file
        Button2.Text = Save.FileName
    End Sub

We're almost done. To prevent an error from showing, because the ColorCode only handles 9 numbers and to make sure that the user will only add numbers, we need to add the following code (Note that the first sub has not been made by me, it's code I found online a while ago):

Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox1.KeyPress

        '97 - 122 = Ascii codes for simple letters
        '65 - 90  = Ascii codes for capital letters
        '48 - 57  = Ascii codes for numbers

        If Asc(e.KeyChar) <> 8 Then
            If Asc(e.KeyChar) < 48 Or Asc(e.KeyChar) > 57 Then
                e.Handled = True
            End If
        End If

    End Sub

The last thing we need to do it to prevent the textbox from having more than 9 characters

  Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        TextBox1.MaxLength = 9
  End Sub

DONE!... well half done. We need to create our decoder in order to read the ColorCode.

Creating the decoder

First, make a new project. It order to make it look good, use the settings I've written at the top.

This time, we'll need to get an integer from a color, so add the following code:

'It is a function because it returns a value
Public Function ReturnIntValue(ByVal GivenColor As Color) As Integer
        'We get the RGB value of the color
        Dim R As Integer = GivenColor.R
        Dim G As Integer = GivenColor.G
        Dim B As Integer = GivenColor.B

        Dim Int As Integer
        'Check if the RGB values match. If yes, set int value
        If R = 255 And G = 255 And B = 255 Then
            Int = 1
        ElseIf R = 245 And G = 245 And B = 245 Then
            Int = 2
        ElseIf R = 235 And G = 235 And B = 235 Then
            Int = 3
        ElseIf R = 225 And G = 225 And B = 225 Then
            Int = 4
        ElseIf R = 215 And G = 215 And B = 215 Then
            Int = 5
        ElseIf R = 205 And G = 205 And B = 205 Then
            Int = 6
        ElseIf R = 195 And G = 195 And B = 195 Then
            Int = 7
        ElseIf R = 185 And G = 185 And B = 185 Then
            Int = 8
        ElseIf R = 175 And G = 175 And B = 175 Then
            Int = 9
        ElseIf R = 165 And G = 165 And B = 165 Then
            Int = 0
        End If
        'Return int
        Return Int
    End Function

We're almost done! Now, let's make our function that's gonna decode our Color Code

Public Function Decode(ByVal Image As String) As Integer
        'Create our new bitmap from the image location
        Dim BMP As New Drawing.Bitmap(Image)
        'Get the length of the bitmap, which is used to count the number of ints
        Dim Length As Integer = BMP.Width
        Dim AssembledIntegers As Integer

        
        For i As Integer = 1 To Length
            'If i reaches Length, then exit loop
            If i = Length Then
                Exit For
            End If
            'We assemble the integers, not by adding them.
            'We get the int value by using ReturnIntValue
            'We obtain the color by using GetPixel. Its x location is i and y is always at 0 because a color code only has 1 width
            AssembledIntegers = AssembledIntegers & ReturnIntValue(BMP.GetPixel(i, 0))
            If i = Length Then
                Exit For
            End If
        Next
        'Return the ints
        Return AssembledIntegers
    End Function

Time to build our GUI! Again, I made an image to make it easier to visualise

Head back to Form1 tab, and add the following code:

  Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
        'Create new OpenFileDialog
        Dim Open As New OpenFileDialog
        'Only allow 1 file to be opened
        Open.Multiselect = False
        Open.Title = "Select the color code file"
        'Show the window
        Open.ShowDialog()
        'Set the buttons text to the filename
        Button1.Text = Open.FileName
    End Sub

And...

Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
        'If no file has been chosen
        If Button1.Text = "..." Then
            'Tell the user to select a path
            MsgBox("Select a path first")
        Else
            'Write and decode the image
            TextBox1.Text = Decode(Button1.Text)
        End If
End Sub

Done. If you've done it correctly, everything should work just fine.

Points of Interest

I sure did rage a bit when there were errors. Nothing really funny happened :(

History

• Fixed an error in the title