Results 1 to 10 of 10

Thread: Array of Graphical elements - how to

  1. #1

    Thread Starter
    Junior Member
    Join Date
    Sep 2013
    Posts
    21

    Array of Graphical elements - how to

    Hi, I wish to have a grid or visual array, representing the state of each bit for 8 data bytes.
    So a grid of 64 small squares, when each data bit is True, change the colour of the respective small square.
    What is the best way to represent each little square?
    Lots of little text boxes and just change the background colour ?
    Any better ideas. J.

  2. #2
    Super Moderator si_the_geek's Avatar
    Join Date
    Jul 2002
    Location
    Bristol, UK
    Posts
    41,974

    Re: Array of Graphical elements - how to

    If you want the squares to contain editable text then 64 textboxes is a possible option, but would be awkward to set up (and your form would contain lots of controls).

    Another option is to use a DataGridView (with the row and column headers hidden if you want), and just handle the cell painting events to deal with the colours.

  3. #3

    Thread Starter
    Junior Member
    Join Date
    Sep 2013
    Posts
    21

    Re: Array of Graphical elements - how to

    Thanks Si, that looks like a good option, I'll give it a play. J.

  4. #4
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    40,102

    Re: Array of Graphical elements - how to

    I did something like this using panels, but in my case it wasn't a regular shape. Instead, it was a series of columns with differing numbers of cells. It worked fine, though that did end up being a fair number of controls.

    If you have a regular grid, then the DGV is a good option. If you don't have a regular grid, panels might work best.
    My usual boring signature: Nothing

  5. #5
    Powered By Medtronic dbasnett's Avatar
    Join Date
    Dec 2007
    Location
    Jefferson City, MO
    Posts
    9,897

    Re: Array of Graphical elements - how to

    You could use one richtextbox.
    Code:
            'sample value
            Dim i As Long = Long.MaxValue - Integer.MaxValue - 15L
            RichTextBox1.Text = Convert.ToString(i, 2).PadLeft(64, "0"c)
            For x As Integer = 0 To RichTextBox1.TextLength - 1
                RichTextBox1.SelectionStart = x
                RichTextBox1.SelectionLength = 1
                If RichTextBox1.SelectedText = "1" Then
                    RichTextBox1.SelectionBackColor = Color.LightGreen
                Else
                    RichTextBox1.SelectionBackColor = Color.Red
                End If
    My First Computer -- Documentation Link (RT?M) -- Using the Debugger -- Prime Number Sieve
    Counting Bits -- Subnet Calculator -- UI Guidelines -- >> SerialPort Answer <<

    "Those who use Application.DoEvents have no idea what it does and those who know what it does never use it." John Wein

  6. #6
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,598

    Re: Array of Graphical elements - how to

    Or you could draw the grid in a bitmap and show it in a picturebox.
    This example will create the picturebox, so you can just paste the code in a new project to try it out, without adding any controls yourself. You can click on the form to change the value of the bytes.
    Code:
    Public Class Form1
    
      Private Grid As New PictureBox With {.Parent = Me, .Location = New Point(50, 50), .Size = New Size(81, 81), .BorderStyle = BorderStyle.None}
      Private bytes(7) As Byte
      Private gridImg As New Bitmap(81, 81)
      Private rand As New Random
    
      Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
        loadBytes()
        drawBytes()
      End Sub
    
      Private Sub loadBytes()
        For i As Integer = 0 To 7
          bytes(i) = CByte(rand.Next(256))
        Next
      End Sub
    
      Private Sub drawBytes()
        Dim Mask As Integer = 128
        Using g As Graphics = Graphics.FromImage(gridImg)
          g.FillRectangle(Brushes.White, Grid.ClientRectangle)
          For column As Integer = 0 To 7
            For row As Integer = 0 To 7
              g.DrawRectangle(Pens.Black, column * 10, row * 10, 10, 10)
              If (bytes(row) And Mask) <> 0 Then
                g.FillRectangle(Brushes.Red, column * 10 + 1, row * 10 + 1, 9, 9)
              End If
            Next
            Mask \= 2
          Next
        End Using
        Grid.Image = gridImg
      End Sub
    
      Private Sub Form_Click(sender As Object, e As EventArgs) Handles Me.Click
        loadBytes()
        drawBytes()
      End Sub
    End Class
    p.s. Someone asked for a picture. Any of the suggestions would work as well, and since the code was easily tested, didn't feel the need, but ok...
    Attached Images Attached Images  
    Last edited by passel; Mar 26th, 2019 at 02:56 PM. Reason: problem with image

  7. #7

    Thread Starter
    Junior Member
    Join Date
    Sep 2013
    Posts
    21

    Re: Array of Graphical elements - how to

    Thanks for ideas guys, much appreciated, ive got too many hours to kill on the flight home so i'll try a few out and see how im getting on.

  8. #8
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    26,413

    Re: Array of Graphical elements - how to

    Quote Originally Posted by Shaggy Hiker View Post
    I did something like this using panels, but in my case it wasn't a regular shape. Instead, it was a series of columns with differing numbers of cells. It worked fine, though that did end up being a fair number of controls.

    If you have a regular grid, then the DGV is a good option. If you don't have a regular grid, panels might work best.
    The dgv is still a viable option even with an uneven number of columns. You can 'hide' the cells you don't want to use and the dgv's gridlines, by setting them to the form backcolor. If you want borders on the 'visible' cells, you can draw overlays on the dgv in its paint event. This dgv could be completely readonly, with all of the cells unselectable, or you could allow a subset to be user editable...

    Edit: I have a couple of games that use that method, which you can find at...

    http://www.vbforums.com/showthread.p...ral-VB-C-games
    Last edited by .paul.; Mar 25th, 2019 at 07:21 PM.

  9. #9
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    40,102

    Re: Array of Graphical elements - how to

    Frankly, if I were to re-write that program, I would use a single panel or picturebox and draw the cells on it directly. For that matter, I may have, as it was many years ago. It was just a quick one-off, though, and I doubt I'll ever have another use for it....unless I move, and want to build another patio.
    My usual boring signature: Nothing

  10. #10

    Thread Starter
    Junior Member
    Join Date
    Sep 2013
    Posts
    21

    Re: Array of Graphical elements - how to

    Tried two of the methods discussed, DGV and drawing the graphical squares into a picture box. Both worked thanks.
    The picturebox method allows me to make it more compact, I need to do a bit more dressing-up but looks good and seems to refresh quickly. Solution works for my need and it simple enough to understand for a noob. Thanks Guys. Name:  BitBox.JPG
Views: 485
Size:  30.9 KB

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width