Introduction: Rapid (a)Simblee: Creating a User Interface (UI)

By

This Instructable shows you how to create an interactable user interface (UI) using Simblee.

Simblee has lots of cool UI objects to play around with:

  • Switches
  • Segments
  • Text/Labels
  • Buttons
  • Textfields
  • Sliders
  • Rectangles
  • Images

We'll cover everything super fast except images, which we'll try and cover later. ;)

I encourage you to look at SparkFun's Simblee library reference! It's quite detailed and describes additional gnarly, groovy, and cool options for all the UI objects above.

Additionally, if you need some info about Simblee's hardware specs, check out the deets in the manual!

WARNING! CAREFUL! DANGER AHEAD!

Simblee operates at 3.3V! None of it's pins are 5V tolerant!
Please be careful when designing your circuit! :D

Step 1: Download and Install "Simblee for Mobile" on Mobile Device

For Android users, go to the Play store to find and download Simblee for Mobile.

For iOS users, go to the App store to find and download Simblee for Mobile.

Step 2: Open a Simblee Template Example

1. Open Arduino and go to Files -> Examples -> SimbleeForMobile and click on the Template example sketch.

Step 3: Quick Debrief

If you know Arduino, then the setup() and loop() functions should look very familiar.

For Simblee mobile apps, ui() and ui_event(...) are the Arduino equivalent to setup() and loop().

Just a few other key things!

IMPORTANT TO KNOW

  • SimbleeForMobile.begin() MUST be in setup().
  • SimbleeForMobile.process() MUST be in loop().

  • SimbleeForMobile.beginScreen() and SimbleeForMobile.endScreen() MUST exist together in ui()*

  • Serial.begin(9600) isn't super critical, but adding it really helps with debugging!

OPTIONAL TO KNOW

  • SimbleeForMobile.deviceName is what you will name your Simblee device.
  • SimbleeForMobile.advertisementData is what your Bluetooth signal will be called.
  • SimbleeForMobile.domain is basically a way to uniquely identify data stored on a mobile device.

*We'll get fancy with this later. :)

Step 4: Creating a UI

1. Copy and paste the following above the loop() function.

#define MAX_HEIGHT SimbleeForMobile.screenHeight
#define MAX_WIDTH SimbleeForMobile.screenWidth

uint8_t ui_button;
uint8_t ui_text;
uint8_t ui_textField;
uint8_t ui_switch;
uint8_t ui_segment;
uint8_t ui_slider;
uint8_t ui_stepper;
uint8_t ui_rectangle;

2. Copy the following and replace everything in the ui() function.

color_t grayBackgroundColor = rgb(128, 128, 128);
SimbleeForMobile.beginScreen(grayBackgroundColor);

ui_text = SimbleeForMobile.drawText(40, 30, "This is some text");
ui_button = SimbleeForMobile.drawButton(120, 60, 100, "I'm a button!");
ui_stepper = SimbleeForMobile.drawStepper(120, 110, 75, 0, 10);
ui_textField = SimbleeForMobile.drawTextField(50, 180, 150, "I'm a text field! Write here!");
ui_slider = SimbleeForMobile.drawSlider(50, 250, 180, 0, 30);
ui_switch = SimbleeForMobile.drawSwitch(120, 300);
ui_rectangle = SimbleeForMobile.drawRect(120, MAX_HEIGHT - 100, 80, 80, BLACK);

const char* alice = "alice";
const char* dave = "dave";
const char* peter = "peter";
const char* const segment_collection[3] = {alice, dave, peter};
ui_segment = SimbleeForMobile.drawSegment(50, MAX_HEIGHT - 180, 200, segment_collection, 3);

SimbleeForMobile.endScreen();

2. Go to Tools -> Port and select /dev/USB0***

***(It may vary depending on your OS. Generally it's something like /dev/USB0 on Linux and iOS or COM4 on Windows.)

Step 5: Check Out Your UI!!

1. On your mobile device, open your Simblee for Mobile app.

The first row should be your Simblee device, displaying your device and advertisement name.

2. Tap that row, and huzzah! A collection of cool UI objects!!

Some objects might be placed randomly, but it's most likely due to your device's screen resolution.

Try interacting with them! They won't do much right now, but we'll add functionality in the next Instructable. :)

Step 6: (Optional) Debrief: How to Use UI Objects Pt. 1

Let's take this one bite at a time.

1. These lines specify that MAX_HEIGHT and MAX_WIDTH refers to the max screen height and width, respectively, of any mobile device that connects to a Simblee device. 

#define MAX_HEIGHT SimbleeForMobile.screenHeight
#define MAX_WIDTH SimbleeForMobile.screenWidth


2. These are integer variables specifying a UI object's unique ID. They'll come into play later. :) 

uint8_t ui_text;
uint8_t ui_textField;
uint8_t ui_switch;
uint8_t ui_segment;
uint8_t ui_slider;
uint8_t ui_stepper;
uint8_t ui_rectangle;

Step 7: (Important) Debrief: How to Use UI Objects Pt. 2

Here's how we actually use some of the objects we saw in our screen.

Be aware of what the coordinate system looks like in a mobile device's screen.

1. We can change our background color by providing an RGB value as a parameter.

Just change the RGB values for the variable grayBackgroundColor!

color_t grayBackgroundColor = rgb(128, 128, 128);
SimbleeForMobile.beginScreen(grayBackgroundColor);


2. Provide the (x, y) coordinates and text to place on the device screen. 

ui_text = SimbleeForMobile.drawText(x-pos, y-pos, "__insert_text__");


3. Provide the (x, y) coordinates, the stepper's object-width, and an inclusive range of numbers limiting the range of how much a stepper can increment and decrement.

ui_stepper = SimbleeForMobile.drawStepper(x-pos, y-pos, object-width, min-range, max-range);


4. Provide the (x, y) coordinates, the text field's object-width, and text.

ui_textField = SimbleeForMobile.drawTextField(x-pos, y-pos, object-width, "__insert_text__");


5. Provide the (x, y) coordinates, the button's object-width, and the button name.

ui_button = SimbleeForMobile.drawButton(x-pos, y-pos, object-width, "__insert_text__");<br>


6. Provide the (x, y) coordinates, the slider's object-width, and an inclusive range of numbers limiting the range of what value a slider returns.

ui_slider = SimbleeForMobile.drawSlider(x-pos, y-pos, object-width, min-range, max-range);<br>


7. Provide the (x, y) coordinates for a switch. 

ui_switch = SimbleeForMobile.drawSwitch(x-pos, y-pos);


8. Provide the (x, y) coordinates, the width, the height, and the color of the rectangle. An RGB value can be used to create a different colored rectangle.

ui_rectangle = SimbleeForMobile.drawRect(x-pos, y-pos, width, height, color); <br>


9. In a segment, create individual variables of text with the names in the segment. Knowing this, provide the (x, y) coordinates, width, the variable containing a list of segment names, and the number of segments in the object.

const char* alice = "alice";
const char* dave = "dave";
const char* peter = "peter";
const char* const segment_names[number_of_segments] = {alice, dave, peter};
ui_segment = SimbleeForMobile.drawSegment(x-pos, y-pos, width, segment_names, number_of_segments);

Phew!!! That was a lot!! But we got through most of it!!

You can find out other options for each of these UI objects in the Sparkfun Simblee library reference.
Code used in this Instructable can be found at our repo.