qControl

qControl is a web application to interact with the the Quarto. The application is available at qcontrol.qnimble.com. qControl can be used to read or set variables, or do graph data. Any variable configured with qCommand can be accessed with qControl. Here is example code that generates data (sine wave with noise) into an array Data that can be plotted with qControl:

Example Code

#include "qCommand.h"

qCommand qC;
IntervalTimer Timer;
const uint16_t dataPoints = 1000;
float dataArray[dataPoints];
SmartData<float*> Data(dataArray);

void setup() {
  qC.assignVariable("Simulation Data", &Data);
  Timer.begin(generateData,10); //generate new data point every 10 us.
}

void loop() {
  qC.readBinary(); // must be in loop to process data for qControl
}

void generateData(void) {
  static float phase = 0;
  phase += 2 * PI * 10 / dataPoints ; // increment phase each time, so sets frequency
  long random_int = random(-500,500); // random number -500 through 500
  float noise = random_int / 1000.0 * 5; // rescale random number into float for noise
  float data = 8.0*sin(phase) + noise; // calculate sine wave plus random noise
  Data.setNext(data); // store data in fakeData SmartData object
  if (Data.isFull()) {
    phase = 0; //reset phase when array is full.
  }
}

This code uses SmartData for handling the simulated data array. Please see the SmartData documentation for more details on using SmartData objects.

Compatibility

qControl uses WebUSB for communication and requires a compatible web browser, such as Chrome (recommended) or other Chromium-based browsers such as Edge or Opera.

With this code loaded on the Quarto, we can open up qcontrol.qnimble.com, select the Quarto device (if it isn't listed in the pull down menu, select 'Add new device' and give the browser permission to access the Quarto device) and see the simulated Data:

Editing Variables

In the example above, there are no adjustable parameters so qControl has no controls, just a graph. However, we could set the amplitude, frequency and noise amplitude to be adjustable. Here's a new example that sets three new variables, amplitude, frequency and noiseAmp that can be controlled through qControl.

#include "qCommand.h"

qCommand qC;
IntervalTimer Timer;
const uint16_t dataPoints = 1000;
float dataArray[dataPoints];
SmartData<float*> Data(dataArray);
float frequency = 10;
float amplitude = 8;
float noiseAmp = 5;

void setup() {
  qC.assignVariable("Simulation Data", &Data);
  qC.assignVariable("Frequency", &frequency);
  qC.assignVariable("Amplitude", &amplitude);
  qC.assignVariable("Noise Amplitude", &noiseAmp);
  Timer.begin(generateData,10); //generate new data point every 10 us.
}

void loop() {
  qC.readBinary(); // must be in loop to process data for qControl
}

void generateData(void) {
  static float phase = 0;
  phase += 2 * PI * frequency / dataPoints ; // increment phase each time, so sets frequency
  long random_int = random(-500,500); // random number -500 through 500
  float noise = random_int / 1000.0 * noiseAmp; // rescale random number into float for noise
  float dataPoint = amplitude*sin(phase) + noise; // calculate sine wave plus random noise
  Data.setNext(dataPoint); // store data in fakeData SmartData object
  if (Data.isFull()) {
    phase = 0; //reset phase when array is full.
  }
}

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

With the exception with String, an array of any of the above types can also be used with assignVariable. However, when using arrays, in order for the array to be automatically updated in qControl, it is recommended to use a SmartData object instead as is done in the above example.

Controlling the Layout

The size and placement of the variables controls may not be where you want them. When you click

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 in an order related to the order they were added in the Quarto program
• 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. (Note that the save is linked to the specific Quarto that is connected) to the browser
• LOAD -- Loads from the browser the last saved configuration. (Note that the load is linked to the specific Quarto that is connected)

In addition to these options, each displayed variable will have two icons in the middle of the section:

• Will delete the variable from the user interface.

• Will bring up a dialog to set properties for the box, such as font size.

Finally, each displayed variable has a box around it that can dragged and moved around, or rescaled by click in the bottom left corner of the box.

When done modifying the layout, click

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