New Application Note: GUI & Graphics Series – Simple VGA Menus

Lauren Davis

GUI & Graphics Series – Simple VGA Menus

Abstract - This GUI & Graphics Series tutorial for the P8X32A illustrates how to program and create text menus in VGA applications with Spin. Additionally, it discusses text rendering, ornamentation, layout, and other GUI concepts. This document builds upon foundation information covered in AN004 “Getting Started with VGA and Terminal Output.

Application note and code are now available at http://www.parallaxsemiconductor.com/an005

Dr_Acula

This application note has come at a perfect time - thanks!

See attached - I'm working on a graphical version of a menu driven GUI for the propeller. The photo shows things that look good, but not all the code behind the scenes has been written yet. (next thing to write is the reversing of text as the mouse hovers over a menu item)

In this application note are some great concepts, eg the idea that if a mouse is within a window then no need to search for objects outside of that active window if the button is pressed. So as the app note says, there is a binary decision tree which speeds things up and makes things less complicated.

Just yesterday I was trying to conceptualise how to solve this problem and then along comes this app note. Thanks++!

WBA Consulting

This app note is really helping me understand all of the logic behind a successful interface. Great job. The MouseinRect method is so simple I wouldn't think it would work!

Notes:
On page 5, the following sentence has "with" that should be changed to "what":
Here, we will test only a couple menus with a few items at a time, but with if there were thousands or millions?

Also on page 5 is a duplicated word, "the":
This is a binary search of sorts, performing the the least amount of work at each step to make a conclusion.

On page 19, a sentence missing "as":
If you want to add more GUI elements such as buttons, lists, labels, etc., hopefully you can see how easy this is to do.

What does this sentence mean? I am unsure of the definition of either "high or low traffic" GUI elements:
In general, don’t mix high traffic and low traffic GUI elements in the same regions of the screen

AndreL

Let's see here, answers in line:

WBA Consulting

Re: New Application Note: GUI & Graphics Series – Simple VGA Menus
This app note is really helping me understand all of the logic behind a successful interface. Great job. The MouseinRect method is so simple I wouldn't think it would work!

>>>>>> Thanks, graphics algorithms are very simple when you take the time to distill the underlying problem and then come up with a really simple algorithm.

Notes:
On page 5, the following sentence has "with" that should be changed to "what":
Here, we will test only a couple menus with a few items at a time, but with if there were thousands or millions?

>>>>>>>>>> thanks -

Also on page 5 is a duplicated word, "the":
This is a binary search of sorts, performing the the least amount of work at each step to make a conclusion.

>>>>>>>>>> thanks -

On page 19, a sentence missing "as":
If you want to add more GUI elements such as buttons, lists, labels, etc., hopefully you can see how easy this is to do.

What does this sentence mean? I am unsure of the definition of either "high or low traffic" GUI elements:
In general, don’t mix high traffic and low traffic GUI elements in the same regions of the screen

>>>>>>> Just means, keep your "high traffic" areas where there is a lot of user input in one area, and your "low traffic" areas where there is little input separate. That's all. In other words, when designing a GUI, something you never use shouldn't be next to a button you use constantly. You wan the user to focus his mouse and keyboard traffic to important areas on the GUI surface, and the low traffic or low use areas should be off to the side.

That's all --

Andre'

WBA Consulting

Andre', your welcome! Thank for the answers. The idea of the high and low traffic makes perfect sense. I think that may change my perspective on making sub-menus on a single GUI. I can fit everything I need onto a single config screen, so rather than trying to code sub menus off of the main screen, I will just position things as you suggest to keep it clean and simple.

ps. as a general observation, excellent job on the app note. Keep them coming. The appnote style of education is really helpful for people like me and they solidify the learning I am getting by dissecting code from others to get the same knowledge.