Anyone else developing a user interface (UI) on LCDs and keypads/buttons?

As long as you're willing to wait for the 'up'. That feels like input lag to me, so I usually use 20ms debounce.[/quote[
I've never felt this seemed laggy.

mowcius:
hum de hum.

I'd be interested to see how well a UI library might work.

I did kinda start a scrolling menu program for LCDs (16x2, 16x4, 20x4, 40x4) but didn't require it for anything so it never materialised.

I'd say a library might work - provide the LCD rows&cols (same ones used for the liquidcrystal library) and the number of options on the main menu - then functions for secondary menus perhaps.

You could even have a custom character 'scroll bar' down the side.

Obviously a graphic display menu library/UI could have much more too it and be a bit more 'UI' like.

mowcius,

I think having a UI will be a blessing for lots of developers. I recall spending lots of time develop the UI on my first project (2,700 lines). But I don't think I can separate the UI out like taking off a sweater :slight_smile:

I then developed programs that do some footwork of UIs and eventually got the to point of phi_prompt, a library on 16*2 LCD with select list, menu (just select list + extra code), text input, number input.

I did the call convention you suggested but switched to calling like: select_list(a structure)
This way you can add features without changing call conventions. If the new features are not changing previous releases but only affect new functions, then there will be no need to rewrite :slight_smile:

Here is the phi_prompt post:
I am thinking about adapting this to 20*4 displays but I don't have one :frowning:

If you want to modify it to include 20x4s/16x4s/40x4s then I can test it on them.

I'll see if I can make a start on a scrolling LCD menu code.

But I don't think I can separate the UI out like taking off a sweater

I know what you mean.

mowcius:

Remember to debounce the buttons... that's the major pain normally.

It is?

I normally just use a while(button == HIGH){} to wait until it goes low again before it does anything.

Depends on the application really though.

Actually depends on the buttons... with the cheapest kind of buttons, this would fail.

maniacbug:

mowcius:
I normally just use a while(button == HIGH){} to wait until it goes low again before it does anything.

As long as you're willing to wait for the 'up'. That feels like input lag to me, so I usually use 20ms debounce.

with cheap buttons, this could also fail, and adds a bit more to the code. Either because you halt the processor during 20 ms, or because you need to run a timer to check this.

So the way to go, is really a mix of quality buttons, some debounce tecnique in hardware, either with the capacitor or some gates (there's an application note somewhere about this) and some software to check it. Depending on the buttons you use, you may need one or none of the others... but since this will be a generic library, you have to think of most, if not all, possibilities regarding the buttons.

I implemented this (with a 16x2 or 20x2, not sure now) with menus, submenus, and a 8 key keypad for a coffee machine about 10 years ago. And back then, the major problem was the debounce because we used some top of the line buttons (1,3 euro each) on the prototype (the customer decided on those because of the incorporated LED, feel and size with interchangeable keys) and debouncing didn't even cross my wildest dreams... until, because of cost concerns and because the key would pop out when pressed, they decided to go with cheaper buttons... and the nightmare began. LOL

But if you use those normal Omron type keys you might get away with little worries about the debounce. The best to do, get an oscilloscope, a few buttons and test them to see what happens and create a debounce strategy then.

Just a thought, get the program to run as a state machine with methods to move level (sub-menu) up, down and enter. That way, the library could (but wouldn't need to) have the button code included, but it would make it easier to adapt if you'd like to use a blackberry tracker ball or a small joystick, for example. :wink:

Just a thought, get the program to run as a state machine with methods to move level (sub-menu) up, down and enter. That way, the library could (but wouldn't need to) have the button code included, but it would make it easier to adapt if you'd like to use a blackberry tracker ball or a small joystick, for example.

Sounds like you're not short of knowledge in this subject - fancy helping?

I also implemented something (a year or so back) which was similar but there's no way of 'extracting the code' as it was very specific (mainly due to being badly written).

State machine is a good idea. I'm thinking about HMI standards in industrial control panels. I have one sitting on my couch.

To make the library small, I only implemented lists instead of lists and menus. To make a menu, just call select_list() to ask the user to select item from a list and switch upon the user selected list item :slight_smile:

To implement multilevel menu/list, you just need to add another select_list() where the sub menu entry is. You also want to add a return in one of the sub menu's switch case.

I think that the way to go would be to implement the methods to

  • refresh screen
  • next item (meaning the menu where we are now)
  • previous item (or just implement a bounded buffer)
  • enter
  • back (this can be left out and in every submenu, there would be an option to move up on the menu tree... depends on the developer and number of options, really)

The user of the library would only have to fill out a structure that would have all the menu data in it, and the methods would merely cycle through that structure.

I can have a go at writing something for this... but not over weekend. :wink:

Good idea!

Right now my phi_prompt select_list() will take a list from PROGMEM and display it according to the parameters in the structure and interacts with the user (up button is next item, down is prev) until the user hits left, right, enter, or escape. So one function call then the return is final decision of the user.

The left and right buttons can be used in a larger display or just 16X2 to navigate between selections much like a dialog box with tab keys in Windows. Say you change one number and press left, you can change the previous field and right a few times to change another field. I have not implement that into an actual function of dialog box (including several interactive lists and number entries) but I'm already using the basic blocks in my clock adjustments:

I will just add a function that sets up a user interface like a dialog!

Just FYI, I'm updating this UI library to include the following things, more useful if you have a 16X4 or 20X4 display:

  1. Support 20X4 character screen with more flexible “2X2? list mode so you can list M columns by N rows with X characters per row, all M, N, and X are your choice (Done)
  2. List your “2X2? list anywhere on a larger screen instead of the basic 16X2 screen (Done)
  3. Easy to call “YES/NO” dialog for user to choose.(Planning)
  4. Easy to display “YES/NO”, “HIGH/LOW” options for numerical inputs so you don’t have to construct a list and do it the list way.(Planning)
  5. Add scrolling texts that scrolls to fit in smaller space (planning)
  6. Add floating point number input (planning)
  7. Add event function so each time the user changes a number, a function is called to update operations (planning)
  8. Add dialog functions to make a dialog. This function creates a complete dialog with various controls and the user uses left and right keys to navigate among the controls and change their values. It is going to look like a dialog on your computer. You make some choices and push yes. (planning)

Any suggestions? Thanks.

Here is the link to the library:

Scrolling up/down menu? With custom character 'scroll bar' on the far right column?
That's what I'd like to see/code myself :slight_smile:

mowcius:
Scrolling up/down menu? With custom character 'scroll bar' on the far right column?
That's what I'd like to see/code myself :slight_smile:

Would it be scroll menu or scroll menu and scroll text display, like old-time DOS stuff?

I wasn't thinking of scrolling text (horizontally) too.

I just did a mockup of an OK dialog and Yes/No dialog. It's good on the 20X4 (should be good on 16X4) but will not be very good-looking on 16X2.
I'm also writing a lib init routine that takes lcd and buttons objects as we as lcd sizes parameters so my struct doesn't have to store them. Less space wasted but less flexible (you will have to reinitialize lib to work on a different LCD and different set of keys if you have multiple sets).

Will upload pics tonight.

To follow up on this, I just released the latest version:

http://arduino.cc/forum/index.php/topic,62021.0.html

The videos are not very clear for the 20X4 display :disappointed_relieved: Will try videotaping again later.

mowcius:
Scrolling up/down menu? With custom character 'scroll bar' on the far right column?
That's what I'd like to see/code myself :slight_smile:

The only thing stopping that would be the size in memory to have all the user defined characters to be passed on to the LCD. :\

Ohh, sorry for not having enough time to dedicate to this. :frowning:

The only thing stopping that would be the size in memory to have all the user defined characters to be passed on to the LCD. :\

There are ways round the limited number of characters...

I may have not explained myself correctly... I was talking about the size in Arduino's memory to hold the user defined characters... any formulas to create those characters that avoid the use of char arrays in memory?

Yes, create them in PROGMEM:

PROGMEM prog_char lcd_ch0[]={ 4,14,31,64,31,31,31,31,0};// Up triangle with block
PROGMEM prog_char lcd_ch1[]={ 4,14,31,64,64,64,64,64,0};//Up triangle 
PROGMEM prog_char lcd_ch2[]={31,31,31,31,64,64,64,64,0};// Top block
PROGMEM prog_char lcd_ch3[]={64,64,64,64,31,31,31,31,0};// Bottom block
PROGMEM prog_char lcd_ch4[]={64,64,64,64,64,31,14, 4,0};// Down triangle
PROGMEM prog_char lcd_ch5[]={31,31,31,31,64,31,14, 4,0};// Down triangle with block
PROGMEM const char *ch_item[] = {lcd_ch0, lcd_ch1, lcd_ch2, lcd_ch3, lcd_ch4, lcd_ch5};

I've already made a scroll bar. Please watch some videos on the link I provided. There's only enough customized characters to create a rough scroll bar though. Dynamically shoving customized chars back and forth is too much work.

It's still in memory, isn't it?

It's in program memory (aka Flash) not in data memory (aka RAM), so it's still using resources but one that there is more of.