Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents


Widget Connector

While sitting in a restaurant we came up with the following idea: Imagine you are in a restaurant and would like to call a waiter, but the only way is to look out for them and ask for help. By using decorative table light and a couple of buttons this experience could easily be improved. You can press one of the two buttons to either ask for service or the check. The waiters that are passing by your table will notice the different colors and help you with your request. There is also a center dashboard for the restaurant to manage all table lights and set the color on all of them. They also have access to each tables status and will be notified in case you request a service or the check.


title1 hour

title1-3 Clients

Hardware Components





Fiber Optic RGB LED Lamp


Can be purchased here

Tactile Push Button


Included in Component Kit

Or you can purchase it here

Breadboard (any size)


One Included in Component Kit

You can purchase the rest here

Jumper Cables (MM)


Included in Component Kit

Or you can purchase it here

Q-Client Builder Base



Assemble the Circuit

Start by gathering all of the components listed above.

We will now build the circuit for the single button. Place one of your buttons on a breadboard and attach to MM jumper wires to it diagonally to each other. Then connect one of the leads to the GP0 port and the other to the 3.3V port on the Builder Base. Like so:

Now we will build the RGB LED Circuit. Follow the instructions below twice as two of these circuits are needed.

Place two buttons adjacent to each other on a breadboard. Connect one lead from each button to 3.3V and connect the leads diagonal from the 3.3V leads to GP5 and GP6.

Depending on your RGB lamp, the RGB LED used will either be a common Anode or a common Cathode. Ours is a common Cathode. Here are wiring schematics for both types.

Regardless of your type of RGB LED used, the LEDS will be wired to the builder base as follows:







Pair the Builder Base

Now we want to pair the Builder Base with our Q-Server. In order to do so, go to the Homescreen of your Q-Server.

Next click on the lift side symbol labeled “Clients”. Switch to the “Unpaired” tab at the top middle of the screen.

You should see your unpaired Builder Base. If not, check if you have plugged in the power supply for the Builder Base. Now move to the three dots below “Actions” and click “Pair”.

Once your Client is paired, click the “Setup” button.

Now you can edit your Client. Give him a Name you want and also a location where you are going to use it. Hit “Save” when you finished.

Build the Firmware


Remember: all Application and Firmware files are available in the resources section below!

We will now build the Firmware files for this project. Two files will be created, but we will upload three files. One to the Builder Base with the button, and one to each RGB Lamp.

Using the toolbar on the left hand side, navigate to the firmware builder. Select “+ Create New” on the upper left hand side of the screen.

Next, name your firmware file “Table CP Reset” and hit “Create”.

Now, select the “+ Add Device” button. You can find a device by using the search bar, or by scrolling through the list. Find and select, the “Button” device, name it Reset, and click “Add Device”. Now you are ready to configure the device.

From the Driver drop-down menu select “GPIO”. For the Pin select GP0, set Debounce to Enabled, and set the Pin Mode to Input Pull Down.

Save your firmware file.

Now we will create the Firmware file for the builder bases wired to the lamp and two buttons.

Click the “+Create New” button. Name your new file “Table CP (cathode)” and hit “Create”.

Next, add two Button and one LED RGB devices to your firmware file. We named our buttons “Service”and “Check”, and the LED RGB “Table Light”.

To configure the Table Light, select the GPIO driver from the driver dropdown menu.

Set the Red Pin to GP0, Green Pin to GP1, Blue Pin to GP2, and the Layout to Common Cathode.


If you are modifying light different from the one listed above it is important for you to ensure the Layout (cathode or anode) of the RGB LED. If yours has a Common Anode layout then you would select Common Anode instead of Common Cathode here.

Now let’s configure the Service button. Select GPIO from the driver dropdown menu. Set the Pin to GP5, Debounce to Enabled, and Pin Mode to Input Pull Down.

For the Check button set the Pin to GP6. All remaining configurations are the same as above.

Now, save your firmware files and upload them to the appropriate BuilderBase. The Table CP Reset Firmware file should be uploaded to the Builder base with the single button, and the Table CP (cathode or anode) firmware should be uploaded to both Builder Bases with the RGB Lamp and Two buttons attached.

Build the App


Remember: all Applications and Firmware files are available in the resources section below!

Navigate from the Firmware Builder to the App Builder via the toolbar on the left side of the screen.

Once there, click “+ Create New”.

Name your app and hit create.

You will be redirected to the canvas where you will build your App.

Using the search bar on the left, find the objects listed below and drag them onto the canvas in the designated quantities.










Color Picker



Static String



Color Display






Arrange them like so:

Image RemovedImage Added

Using the properties panel on the right, name and label the objects. Only the interface (Green) objects can be labeled, so use the same name for both the “Name” and “Label”.

Now we will set the string values for each of the static string boxes. Note that the top four and the bottom four Static String objects have the same name; they will also have the same String value.

To set the values click on each “String” port on the String Objects and change the value in the properties panel on the right hand side of the screen. Remember to his the “Save Properties” tab for each object. Otherwise, your changes will be lost.



Green Color


Check Please

Check please!

Blue Color


Service Please

Service please!

Default Color


Reset Status


Now we will connect the objects starting with the Table 1 chunk of objects.

Now we will connect the Table 2 Objects:

And lastly we will connect the Reset objects:

That’s it, you’re done with building the application.

Hit “Save” and return to your Applications page!

Map the Hardware

You should now be back on the Apps page.

Find your “Table Centerpieces” app and hit the play button.

A list containing all of the devices in your application will expand.

Next click on the “Reset Table Lights” device and the client dropdown menu will appear on the right.

Select the “Reset” driver from the dropdown menu and hit “Done”.

Repeat the same steps for the remaining devices, but be sure to map the devices correctly for example: (Table 2 Objects → Table 2 Devices)

Once you’ve finished mapping all devices that status symbols will have changed to green checkmarks.

Hit “Save + Run”.

Run the App!

Your RGB Table Lights are now complete.

Congrats on building your project, It’s now time to use it!



View file
nameRGB Table Centerpieces Lights App.json


View file
nameRGB Table CP Lights - Reset Buttons Firmware.json
View file
nameRGB Table CP (Lights - Cathode ) Firmware.json
View file
nameRGB Table CP (Lights - Anode ) Firmware.json