Need your insights for "Hex/data/file reader GUI"

[bergerkiller]

Hello everyone.

Working on a simple program (plug-in) written in .NET for private usage. basically, it has a lot of small programs combined, and will run on start-up.
It can already take screen shots (with regions) and has global input event handlers, window class with windows API's to manipulate other windows (close, copy, minimize, maximize, hide, show etc.). Now working on the "Data Reader".

I had already finished the coding structure behind it, but I am not pleased with the gui...it doesn't display enough of the file at once. Here a screenshot:


It can highlight parts of the file and display the corresponding string, int16, int32, int64, single, double and Unicode character. Problem is, for the GUI I can only think of two versions:
- horizontal version: nicely aligned like my above screenshot but does not display enough.
- vertically aligned with a fixed character width. Displays enough, but lacks readability due to the multiple lines, and makes it hard to display byte values.

What would you do in my case? Stick with horizontal as it is now, change to vertical line view or maybe something completely different?

[Pradeep1210]

How about making it like how other standard editors do it?

[bergerkiller]

Yep that's the vertical one, I have a problem with the "read-ability". Sure, it displays a lot, but it is hard to display byte/hex values in such a way you know to what character it belongs. Also, no proper highlighting, although I guess that could be added easily.

I do like how the field looks like, but it simply lacks the ability to quickly find/read/highlight a given byte.

Any way to display both the character and the byte value in one "box" without ruining the readability?

EDIT

For example, this lay-out:


It looks good, but the char-byte-char-byte structure vertically is a bit annoying. Maybe something like a toggle between character and byte view?

[Pradeep1210]

If you remove the spacing between char and its corresponding byte value, I think you could get a better (more readable) view. Optionally you can add options to turn off either of them or show both.
Also play around with font size of both of them. That might get you a better way. (numbers in small fonts, chars in slightly bigger)

[bergerkiller]

Hey that's not even such a bad idea, large/small fonts, like this:

A56
or:
56A

Might even use subscripts/superscripts.

Thanks Pradeep1210, really a thing I overlooked.

[dilettante]

I've always wished we had some good choices for fonts that use two small hex digits run together for bytes with no standard "printable" glyph (characters outside the ASCII 32 to 126 range).

Most of the ones I've found look terrible though, except for those that cost money.

[bergerkiller]

Well it's a bit buggy at this point, but I managed to quickly script this:


Large char text, small red byte value bottom right corner. Draw code:

        Public Sub Draw(ByRef g As Graphics, ByVal loc As Point)
            g.DrawString(_c, New Font("Times New Roman", 20, FontStyle.Bold, GraphicsUnit.Pixel), Brushes.Black, loc.X, loc.Y)
            g.DrawString(_b, New Font("Times New Roman", 12, FontStyle.Regular, GraphicsUnit.Pixel), Brushes.Red, loc.X + 13, loc.Y + 18)
            g.DrawRectangle(Pens.Black, New Rectangle(loc.X, loc.Y, 32, 32))
        End Sub

Only needs some tweaking in the itemcountX/Y value so it nicely fits over the entire screen, plus some centering of the byte value. Overall, I am pleased.

EDIT

Yes, this seems to be the best solution. Reminds me of the elements table of chemistry.


Thanks everyone for sharing your idea's around this. :P

[Pradeep1210]

I think if you remove the gridlines it would look better

[bergerkiller]

Hehe I thought too, but the opposite is the case.
It makes it harder to track down the byte that comes with the character:


It's because of the next character being at almost exact the same distance as the belonging character. I would have to add more distance to fix this without the rectangle...that would just make it even worse.

EDIT

Although I can always make the rectangles a lighter colour...maybe even give it an oval-box shape instead of a normal rectangle.
Everything seems to work perfectly well...selection, stream browsing, control size-row count system. Also the selection is pretty smooth, since it adds the old and new rectangles into a region, and then invalidates this region.

Now the remaining bit of the program: find values dialogue, change value dialogue, byte readout. I'll be busy for a little longer. :P