ValueBox.hpp

UI sub-component for ConfigPanel and ReadoutPanel.

class ValueBox : public Div
#include <ValueBox.hpp>

ValueBox is the base class for a component to show information. At its core it has a label, a description, and a value to display.

ValueBoxes and derived classes placed in component with the “settings_group” or “display_group” class will align to a grid.

Subclassed by BoolValueControl, LiveValueDisplay, ValueControl, ValueDisplay

Public Functions

inline ValueBox(const std::string &label, const std::string &desc, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • id – user defined ID for ValueBox Div (default is emscripten generated)

inline Div &GetView()

Returns the view div containing live values to animate (use this in an Animate instance).

Returns:

the view div

Protected Attributes

CommentBox description = {to_string(GetID(), "_descr")}
Div view = {to_string(GetID(), "_view")}
class ValueDisplay : public ValueBox
#include <ValueBox.hpp>

Use a ValueDisplay component to display a labeled, static value with a nice description of what this value means.

We suggest adding the “display_group” class to the enclosing tag around multiple ValueDisplays to align labels and values along a common grid.

Public Functions

inline ValueDisplay(const std::string &label, const std::string &desc, const std::string &value, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • value – the piece of information or data being displayed

  • id – user defined ID for ValueDisplay div (default is emscripten generated)

class LiveValueDisplay : public ValueBox
#include <ValueBox.hpp>

Use a LiveValueDisplay component to display a labeled value which will change over the course of a simulation with a nice description of what this value means. Internally, it manages an Animator to redraw the view at the fastest possible framerate unless independent=false.

We suggest adding the “display_group” class to the enclosing tag around multiple LiveValueDisplays to align labels and values along a common grid.

Public Functions

template<typename T>
inline LiveValueDisplay(const std::string &label, const std::string &desc, T &&value, const bool &independent = true, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • value – a value to display or function returning a string

  • independent – should this component be independently animated? Or will some other component manage its animation?

  • id – user defined ID for LiveValueDisplay div (default is emscripten generated)

class ValueControl : public ValueBox
#include <ValueBox.hpp>

ValueControl is the base class for components the user should be able to interact with. The view will contain the Input object for controlling the value.

Subclassed by NumericValueControl, TextValueControl

Public Functions

inline ValueControl(const std::string &label, const std::string &desc, const std::string &initial_value, Input input, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • initial_value – the initial value

  • input – Input component that user can interact with

  • id – user defined ID for ValueControl div (default is emscripten generated)

Protected Attributes

Input mainCtrl
class TextValueControl : public ValueControl
#include <ValueBox.hpp>

Use a TextValueControl to display a boolean value with a label, description, and a text input to manipulate the value.

Public Functions

inline TextValueControl(const std::string &label, const std::string &desc, const std::string &value, const std::function<void(const std::string&)> &onChange, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • value – the initial value

  • onChange – function to be called when the user changes this value

  • id – user defined ID for TextValueControl div (default is emscripten generated)

class BoolValueControl : public ValueBox
#include <ValueBox.hpp>

Use a BoolValueControl to display a boolean value with a label, description, and a switch to toggle the value.

Public Functions

inline BoolValueControl(const std::string &label, const std::string &desc, const bool is_checked, const std::function<void(const std::string&)> &onChange, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • is_checked – is switch initially on?

  • onChange – function to be called when the user changes this value

  • id – user defined ID for BoolValueControl div (default is emscripten generated)

class NumericValueControl : public ValueControl
#include <ValueBox.hpp>

Use a NumericValueControl to display a number with a label, description, synchronized slider and number box to change the value.

Public Functions

inline NumericValueControl(const std::string &label, const std::string &desc, const std::string &value, const std::string &type, const std::function<void(const std::string &val)> &onChange, const std::string &id = "")
Parameters:

  • label – name for this value

  • desc – a more detailed description of what the value means

  • type – the numeric type (‘float’, ‘double’ or ‘int’)

  • value – the initial value

  • onChange – function to be called when the user changes this value

  • id – user defined ID for NumericValueControl div (default is emscripten generated)

Public Static Functions

static inline void setDefaultRangeMaker(const range_setter_t &det)
Parameters:

det – a function that based on the value and type provided sets a slider input’s min, max and step values appropriately.

Private Types

using range_setter_t = std::function<void(const std::string&, const std::string&, Input&)>