Month: January 2012

ScreenUi is a user interface library designed for small character based LCDs like those that are commonly used with Arduinos. The purpose of the library is to make it easy to quickly build logical screen interfaces with common widgets. It’s written in C++ and installs as an Arduino library or can be used external to Arduino. All hardware access is done through a very short implementable interface. You just need to define a few methods for LCD output and a few methods for button or encoder input and the library does the rest.

Here is a short video showing the widgets that are currently written:

And here is the code for that demo:

void loop() {
  Screen screen(20, 4);
  
  Label titleLabel("RGB Settings");
  
  Label addressLabel("Address:");
  char *address2 = "moof moof";
  char *address = "0xffee";
  Input addressInput(address);

  Label colorLabel("Color:");
  List colorList(7);
  colorList.addItem("Red");
  colorList.addItem("Orange");
  colorList.addItem("Yellow");
  colorList.addItem("Green");
  colorList.addItem("Blue");
  colorList.addItem("Indigo");
  colorList.addItem("Violet");

  Label rgbEnabledLabel("RGB Enabled:");
  Checkbox rgbEnabledCheckbox;

  Label refroLabel("Refrobulate:");
  Checkbox refroCheckbox;

  Label discoLabel("Discombobulate:");
  Checkbox discoCheckbox;

  ScrollContainer scrollContainer(&screen, screen.width(), 2);
  scrollContainer.add(&addressLabel, 0, 0);
  scrollContainer.add(&addressInput, 8, 0);
  scrollContainer.add(&colorLabel, 0, 1);
  scrollContainer.add(&colorList, 6, 1);
  scrollContainer.add(&rgbEnabledLabel, 0, 2);
  scrollContainer.add(&rgbEnabledCheckbox, 12, 2);
  scrollContainer.add(&refroLabel, 0, 3);
  scrollContainer.add(&refroCheckbox, 12, 3);
  scrollContainer.add(&discoLabel, 0, 4);
  scrollContainer.add(&discoCheckbox, 15, 4);

  Button cancelButton("Cancel");

  Button okButton("Ok");
 
  screen.add(&titleLabel, 0, 0);
  screen.add(&scrollContainer, 0, 1);
  screen.add(&cancelButton, 0, 3);
  screen.add(&okButton, 16, 3);

  screen.setFocusHolder(&okButton);
  while (1) {
    screen.update();
    if (okButton.pressed()) {
      addressInput.setText(address2);
      Serial.println(rgbEnabledCheckbox.checked(), DEC);
      Serial.println(colorList.selectedItem());
    }
    else if (cancelButton.pressed()) {
      addressInput.setText(address);
    }
  }
}

You can see the bulk of the code is for setting up and laying out the screen. Processing of the screen all happens within the while (1) loop and is very simple. Buttons get their pressed() property set when they have been clicked, lists get their selectedItem() property updated, editable fields update their string in place, etc.

ScreenUi is Open Source and is available at https://github.com/vonnieda/ScreenUi. It’s not completely finished, but it’s already very usable. I’ll be adding some more widgets to it in the coming days.

Thanks for reading!