GUI Design

Quote:

---

Originally Posted by PaulB

As for the technical side... I create all my individual sprites, load them into memory. I then write some functions to build up an array that contains all data to do with the display, in the same order it is to be displayed.

For drawing, basicly loop through the array and blit the spites to the correct positions. I've got my method down to a fine workflow where I can bolt on smooth scrolling code after I've sorted the visual layout.

---

Yep, thought so! :confused: :p :D

Where does one go to BEGIN to learn these techniques Paul? Granted you developed them yourself but you must have learned somewhere the basics??

Quote:

---

Originally Posted by HatredFueled

Where does one go to BEGIN to learn these techniques Paul? Granted you developed them yourself but you must have learned somewhere the basics??

---

That's just the point. I didn't learn it from anywhere.. It's been trial and error all along.

The only basics I had to learn as such was how to use the API functions... from there on I wrote a lot of test applications over the years, trying out new ideas etc.

Agreed Paul,

my User Admin app is now on version 4! As I learned new stuff, through trial and error, I've added new functions to it.

I just need to get my hands dirty with creating custom controls.
However, to create controls that look as good as yours, I do think you need a certain NATURAL flair for design and I don't think that sort of thing can be either taught or learnt!

I think you're right. It probably helps a lot of you have a natural flair for design and graphics to make things look nice... but that should prevent someone from creating custom controls that can work in which ever way is best suited to the task... and that's probably still better than trying to get a generic control to do the same thing.

The best control I have ever built is here www.roboplot.8k.com (ignore the adverts :rolleyes: ) Check out the gallery :D

Its on the shelf at the moment because I can't be bothered writing the documentation at the moment.

That's 100% .net code.

I'm looking for new ideas for controls all the time, stuck for inspiration at the moment.

Quote:

---

Originally Posted by wossname

Bloody hell. That is the most brilliant listing thingy i have ever seen...

http://www.v12digital.com/screenshots/jtaskbeta2.jpg

Very sexy indeed.

Did you inherit from any particular windows control or did you write this from scratch (new usercontrol)? Is it fast to draw that, what's the overhead like?

I must reiterate praise from earlier posts: bloody nice work mate.

---

That does look great, but the finalize button is mis-spelled. Finalize not Finalise. ;)

Who's prog is it? (Didnt want to read all the posts, not enough time :D)

Quote:

---

Originally Posted by RobDog888

That does look great, but the finalize button is mis-spelled. Finalize not Finalise. ;)

Who's prog is it? (Didnt want to read all the posts, not enough time :D)

---

Actually it appears as though Paul is from the UK like me so it's spelt with an s..

My Bad. I didnt even think of that. Is that correct spelling over there?

How did he draw the GUI? Graphics class or images?

Quote:

---

Originally Posted by RobDog888

How did he draw the GUI? Graphics class or images?

---

Done with blitting sprites apparently. Very clever stuff...

What are Blitting sprites?

Quote:

---

Originally Posted by HatredFueled

What are Blitting sprites?

---

Absolutley no idea!

Quote:

---

Originally Posted by LeeSalter

Absolutley no idea!

---

LOL!

Oh dear... I find it hard to believe that the learning curve is THAT steep.. it's VB after all.. I'm pretty good at design I do motion graphics work etc so I'm creative I just need direction as to how one would go about coding something like that :(

Probably not too steep...I have no design flair whatsoever, so I'll just have to keep plugging for functional, if not pretty, interfaces!! :bigyello:

Quote:

---

Originally Posted by RobDog888

How did he draw the GUI? Graphics class or images?

---

This has been discussed earlier in the thread. Use your initiative.

Quote:

---

Originally Posted by HatredFueled

LOL!

Oh dear... I find it hard to believe that the learning curve is THAT steep.. it's VB after all.. I'm pretty good at design I do motion graphics work etc so I'm creative I just need direction as to how one would go about coding something like that :(

---

In .Net drawing gradients is a piece of cake and you would probably use small repeated bitmaps for the shadows. Otherwise its just a matter of selecting attractive colour schemes and knowing how users think. This and the maths to get the graphics positioned right, are the tough parts.

Expanding list items are tricky to draw at the best of times, let alone with graphics and gradients.

To do all of that in VB6 is a real accomplishment. Respect.

Quote:

---

Originally Posted by RobDog888

That does look great, but the finalize button is mis-spelled. Finalize not Finalise. ;)

Who's prog is it? (Didnt want to read all the posts, not enough time :D)

---

That would be my GUI. The only part of it which is MS are some of the little icons... but they will be replaced with much better looking icons when I get the time to draw them.

A post of mine from another thread:

Quote:

---

The GUI is made by looping through an array and blitting sprites based on what is in the array into a picture box. It redraws in real-time as you scroll and collapse/expand sections. I worked out an algorithm so that it scrolls smoothly and it only draws the area which is being displayed to further increase its efficiency. I've also made grid controls using similar methods. My first grid control had many more features than the MSFlexGrid, and it was much faster to add items to it. I've also produced a progress bar which is over five times faster at redrawing than the standard bar included with VB, yet my progress bar draws with a 24bit colour gradient and a translucent inner shadow. See here, here and here.

Here is my latest project... please be aware that it is still in development... so it will look better by the time its done.

This is an appointment screen. Again its just a picture box with blitted sprites. Using MouseMove event I can see which array element the use is dragging, update the array and redraw the display. This means that the user can drag these appointments around the screen as if they are objects. They can also resize then my dragging either the top or bottom of an appointment. It runs silky smooth on a low spec. PC. (600MHz P3, NeoMagic :sick: graphics chip).

Click here to see it

and this is another screen from the same program.

---

Quote:

---

Originally Posted by wossname

The best control I have ever built is here www.roboplot.8k.com (ignore the adverts :rolleyes: ) Check out the gallery :D

Its on the shelf at the moment because I can't be bothered writing the documentation at the moment.

That's 100% .net code.

I'm looking for new ideas for controls all the time, stuck for inspiration at the moment.

---

That looks awsome. So are you doing pixel plotting in a byte array and then blitting it to a drawing surface, or does VB.net have functions for these types of graphics built in?

Quote:

---

Originally Posted by HatredFueled

LOL!

Oh dear... I find it hard to believe that the learning curve is THAT steep.. it's VB after all.. I'm pretty good at design I do motion graphics work etc so I'm creative I just need direction as to how one would go about coding something like that :(

---

It's nothing to do with the language, it's more to do with the algorithms and techniques. The same techniques would apply in any laguage if you're using the same API functions. Although, in a faster language such as C, you wouldn't have to spend as much time optimising the code.

What you guys can do with the GDI is awesome. I really mean that.

For the rest of us, this suite of components may be of use, if you've some spare cash.

Well worth the outlay. I'm going to download the trial version and will report my findings on this thread.

Happy designing.

Quote:

---

Originally Posted by PaulB

That looks awsome. So are you doing pixel plotting in a byte array and then blitting it to a drawing surface, or does VB.net have functions for these types of graphics built in?

---

Thanks. No, the plot data is kept as <single> data and passed to the GraphicsPath class, it is then transformed using matrices. Then it is drawn (using the Graphics class) with specified Pen and Brush objects (Pen defines width, brush defines colour and maybe gradients).

Paul, in VB6 do you always turn of Autoredraw or do you leave it on?

A quick example in VB.Net... (not intended to be tidy code, just a demo of what can be done with a small amount of code :D)

VB Code:

Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
 
        'heading gradient
        '1.
        Dim bb As Brush = New LinearGradientBrush(New Rectangle(0, 0, PictureBox1.Width, PictureBox1.Height), Color.CornflowerBlue, Color.White, Drawing2D.LinearGradientMode.Horizontal)
        e.Graphics.DrawLine(New Pen(bb, 20), 0, 10, PictureBox1.Width, 10)
 
        '2. thin underline
        e.Graphics.DrawLine(New Pen(Color.Blue, 2), 0, 21, PictureBox1.Width, 21)
 
        'make it look nice
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
 
        'heading text
        bb = New LinearGradientBrush(New Rectangle(0, 0, PictureBox1.Width, 20), Color.Black, Color.Red, Drawing2D.LinearGradientMode.Vertical)
        e.Graphics.DrawString("My Graphics Demo - VB.Net!", New Font("Arial", 10, FontStyle.Bold Or FontStyle.Italic), bb, 0, 1)
 
        Dim path As GraphicsPath = New GraphicsPath
        Dim r As Rectangle = New Rectangle(10, 30, PictureBox1.Width - 20, PictureBox1.Height - 40)
        bb = New LinearGradientBrush(r, Color.FromArgb(64, 210, 64), Color.FromArgb(128, 255, 128), Drawing2D.LinearGradientMode.Horizontal)
 
        path.AddArc(r.Left, r.Top, 16, 16, 180, 90)       'top left
        path.AddArc(r.Right - 16, r.Top, 16, 16, 270, 90)          'top right
        path.AddArc(r.Right - 60, r.Bottom - 60, 60, 60, 0, 90)      'bottom right
        path.AddArc(r.Left, r.Bottom - 16, 16, 16, 90, 90)       'bottom left
        path.CloseFigure()
 
        Dim rt As RectangleF = RectangleF.FromLTRB(r.Left, r.Top, r.Right, r.Bottom)
        rt.Inflate(-5, -5)
 
        e.Graphics.FillPath(bb, path)
        e.Graphics.DrawPath(New Pen(Color.DarkGreen), path)
        e.Graphics.DrawString("The quick brown fox jumps over the lazy dog.  More text, just to fill up a bit of space and not really saying anything important at all.", New Font("MS Sans Serif", 10), Brushes.Black, rt)
 
    End Sub

By the way, check out the screenshots attached to my last post. There are 3 gradients there, a vertical black to red on the title text, green to pale green on the curvy region and the blue to white swipe at the top.

The whole thing resizes with the form :D

If you want to play with it.....

You see, in VB6, on my Progress Bar control for example, I work out each colour of each pixel to be plotted using a small algorithm I wrote. I suppose that since VB.net has a function for such things... programmers can be more productive.... but what if you wanted to also draw a smooth translucent shadow like on my Progress Bar. I can imagine that these conveniences, although really great for quickness, will become limitations when you try to push beyond the norm.

Screen1
Screen2
Screen3

Piece of cake. No custom alg required.

VB Code:

Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
 
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
 
        e.Graphics.DrawString("ALPHA BLENDING :)", New Font("Courier New", 50, FontStyle.Bold), Brushes.Red, 0, 20)
        Dim r As Rectangle = New Rectangle(0, 30, PictureBox1.Width, 40)
        Dim bb As Brush = New LinearGradientBrush(r, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(0, 255, 255, 255), Drawing2D.LinearGradientMode.Vertical)
 
        e.Graphics.FillRectangle(bb, r)
 
    End Sub

With this stuff, in 10 years, all programmers will be script kiddies. lol

Time to compare :D

My version (although not EXACTLY the same could be made pixel perfect by changing a couple of constants). This took 11 lines of VB.Net code. Could be squeezed down to maybe 7.

We won't be script kiddies. Not wasting weeks writing the GUI frees us up to make the back-end stronger. OOP is the future.

Very good. Your shadow doesn't appear fade out though. :p

I find coding algorithms the most interesting part... and I do code in OO as much as VB allows anyway.

What about though when you want to do a GUI like the one on my JTask program?

I dynamically draw each comment box. I created my own word wrapping algorithm so the GUI is fully resizable.

I know it's great for speeding up development, but if all this is eventually done for us, surely future programmers will be less skillful than their predessors.

Quote:

---

Originally Posted by PaulB

Very good. Your shadow doesn't appear fade out though. :p

---

Take a closer look then. :rolleyes: Change a single number in the code and the transparency changes.

As for programmers becoming more skilled, that's life I guess. Would you rather go back to punched cards and bubbletanks?

Quote:

---

Originally Posted by PaulB

I dynamically draw each comment box. I created my own word wrapping algorithm so the GUI is fully resizable.

---

It would be madness to keep reinventing a wordwrapping algorithm in every single program you make. Such things should be standard, best way to do that is to stick it in a runtime library.

of course not.

Quote:

---

Originally Posted by wossname

It would be madness to keep reinventing a wordwrapping algorithm in every single program you make. Such things should be standard, best way to do that is to stick it in a runtime library.

---

My word wrapping algorithm is used in a few programs of mine, so I'm not rewriting it everytime. It's fully reusable... but the point is that I created it myself to work the exact way I want it to work.

There are other problems with this kind of bolting ready made components together. What if you write for multiple platorms? The API on the other platform may not have an equivilent function.

Anyway, this is all besides the point. Creating, or rather, designing an effective and intuitive GUI is still the hardest part.

Here's yet another example. lol

This is a reporting program that allows our finance dept. to get reports from our remote locations.

http://www.v12digital.com/screenshots/mvRRS.jpg


By creating a custom GUI, it's extemely intuitive because it's designed from the ground up to do what is required. This doesn't mean that everything is written from scratch. I have various functions which are reused in many of my programs. The user can select the type of report, and then select which locations to run the report, or they can select the location and then see what reports are available, and select them... or they can do both. Once each report is done, a print and view link appear next to each one. The GUI is just one control that I made from scratch. I use my gradient function to work out the gradient based on form width (redunant in .net) and store it as a sprite. Same for the progress bars and check boxes etc. Everything is then blitted to a drawing surface.

Quote:

---

Originally Posted by wossname

This has been discussed earlier in the thread. Use your initiative.

---

I was pretty much being lazy and I didnt have all day to read this entire thread :eek:

Quote:

---

Originally Posted by RobDog888

Who's prog is it? (Didnt want to read all the posts, not enough time )

---

;)

There are some good graphics in this thread :thumb:

These are the sorts of GUI's you can come up with using Infragistics NetAdvantage Suite.

How long would it take to write a GUI like that (on the right) using those tools?

I would do something like that in less than a day using my methods. Obviously when I started out experimenting it would have take much longer, but nowadays that would be quite a quick job, and I'd be able to customise every little pixel if I wanted to.

Sure, but its more fun to code your own GUI.

Quote:

---

Originally Posted by PaulB

How long would it take to write a GUI like that (on the right) using those tools?

---

Hi again Paul,

Hope you're doing ok.
The NetAdvantage tools seem to be very, very nice to use and easy to pick-up.

The screenshot that I posted is one of the sample apps that ship with the trial version.

I agree that it is fun to try and code your own custom controls, but (I've said it before in this thread), you absolutely do need to have some natural flair for artistic design to be able to come up with the interfaces and controls that you do.

Unfortunately for me, I have absolutely no natural flair for impressive artistic design and so am forced down the 3rd-party controls route (which I don't mind doing anyway, tbh!).

The Infragistics controls are worth having a look at if anybody else is interested, they are fairly cheap for what they do and how they look and can be distributed in your applications for free (the licence is per-developer).

Happy Interface Building! :D

I'm in the same boat as LeeSalter - I can design nice looking interfaces, but I have absolutely no artistic talent what-so ever. I like Intragistics tools. It's a bit pricey but worth it in the long run. Fortunately there's enough free things out there that I can get my current project done (which is very utilitarian and it's functionality is much more important than look) and use that to bank roll the purchases of tools I need for my next project (which is going to have a much higher priority on the interface.)

Tg