Skip to main content

qControl

qControl is a web application to interact with the Quarto. The application is available at qcontrol.qnimble.com. qControl can be used to read or set variables, or graph data. Any variable configured with qCommand can be accessed with qControl. It enables a custom user-interface without having to program a user-interface. qControl has a widget for each mapped variable. These widgets can be a simple indicator showing an integer, or a control to select a value from a list of available values. Inside qControl, any of these widgets can be resized, rearranged, and configured. That configuration can then be stored in the Quarto's code so the configuration stays with the hardware, not the computer accessing the Quarto. For some examples, see the qControl Simple Example or the qControl Tutorial.

Data Types​

qControl's assignVariable function can be used on any SmartData object, along with any of the following data types:

  • uint8_t (including unsigned char and byte)

  • int8_t (including signed char and char)

  • uint16_t

  • int16_t

  • uint32_t (including uint)

  • int32_t (including int)

  • bool

  • float

  • double

  • String

For arrays, it is recommended not to assign the array directly with assignVariable, but instead to use a SmartData for an Array object and associate that SmartData object with qControl. See the qControl Simple Example or the qControl Tutorial for reference. Additionally, if a variable is updated outside of qControl, then it will only get updated inside qControl when using a SmartData object. It is recommended to use SmartData objects for anything other than simple controls that are only edited via qControl.

Controls and Indicators​

Controls are elements that can be edited via qControl. In the tutorial example Frequency, Amplitude, and Noise Amplitude were all controls. Indicators are elements that cannot be edited by qControl. If we wanted to measure the noise of some data, we could have the Quarto calculate the noise and store the result in a variable. But we wouldn't want that variable to be editable in qControl — that variable should be an indicator. To set that, there is a third optional argument to assignVariable: a Boolean that sets the variable to be a control (false) or an indicator (true). In the example of a noise measurement, we'd have:

float measuredNoise;

void setup() {
    //the 3rd argument is set to true to make this an indicator
    qC.assignVariable("Measured Noise", &measuredNoise, true); 
}

Arrays and const variables are set automatically to be indicators so the 3rd argument can be ignored. For all other types, they default to controls unless the 3rd argument is given and set to true.

Controlling the Layout​

The size and placement of the variable controls (also called widgets) may not initially be where you want them. When you click

img

it puts qControl in a mode for editing the user interface. On the top bar, you will see some new options:

  • DEFAULT -- Loads all the variables with the default size, order, and settings set via setDefaultLayout
  • ADD ITEM -- Brings up a dialog box that lists all the variables that can be added and lists the variables that are already displayed (and their position)
  • CLEAR ALL ITEMS -- Removes all variables for the user interface
  • SAVE -- Saves the current location and size of all displayed variables to the local browser. (Note that the save is also linked to the specific Quarto that is connected)
  • LOAD -- Loads from the browser the last saved configuration. (Note that the load is linked to the specific Quarto that is connected)
  • CODE -- Opens a pop-up window with code to copy and paste into the setup function on the Quarto to set the current qControl configuration as the default via the setDefaultLayout function.

In addition to these options, each displayed variable will have a box around it that can be moved, or by clicking in the lower right corner, resized. In the middle, there will be two icons:

img

  • Will delete the variable from the user interface.

  • Will bring up a dialog to set properties for the shown variable.

The exact options are different based on the properties of the variable, but clicking on the

button when in Modify Layout mode will bring up a pop-up dialog like:

img

The options available may include:

  • Auto Text Size: This is set by default, and it adjusts the font size to fill the available space. If the content size is changing frequently, the font size will change with it and that may be distracting. Auto Text Size can then be disabled and a manual text size can be set. Note that this Text Size scales with the width of the widget box, so if the browser window is resized, the font should still scale to fit correctly.
  • Number Format: By default, numbers are shown in decimal format. However, they can also be displayed in scientific or engineering format.
  • Limit Digits: By default, Limit Digits is off, but it can be enabled and set how many decimal places to display for a number.
  • Adj Step Size: The default is off and the step size is adjusted by the browser default (typically the last significant digit shown). But this can be turned on and set to a value. If enabled, pressing the up (down) button or scrolling up (down) with a mouse scroll wheel will increment (decrement) the value by the amount selected.
  • Auto Update: By default this is off and any changes made to a control are not sent to the Quarto. Instead, the number is shown in dark red, indicating that it does not match the Quarto's value. Clicking will update the Quarto with the displayed value. However, by turning on Auto Update, any change made to the value is immediately sent to the Quarto. This is often used in conjunction with Adj Step Size to enable easy incrementing/decrementing of a variable by a fixed amount.

When done modifying the layout, you can click the CODE button at the top to bring up a pop-up with text to copy into the program code to store this configuration. Then click

img

to lock all the elements in place and interact with the variables. Here's an example video:

Saving the Layout​

Finally, once the layout and the widget configuration is all set, you save that setup as the default layout for qControl in your program. When Modify Layout is on, click on Code and then click Copy to Clipboard from the pop-up window.

Then paste that code into the setup function in your program. Now, whenever you click default under Modify Layout in qControl, it will load that exact configuration. More details in the qControl documentation.