Widget Size

The dashboard uses a responsive 12-column grid. With setSize() you set how many columns a card or chart occupies at each screen-size breakpoint, without modifying the dashboard webpage.

BreakpointsCopy Anchor Link

Each breakpoint accepts a column count from 1 to 12. A value of 12 makes the widget span the full width of the dashboard at that breakpoint; 6 makes it span half the width.

The defaults apply to every widget whose size has not been set with setSize().

MethodsCopy Anchor Link

setSize() is available on all cards and charts (every class derived from dash::Widget). Statistics and tabs do not have a size.

setSize with individual valuesCopy Anchor Link

bool setSize(uint8_t xs, uint8_t sm, uint8_t md, uint8_t lg, uint8_t xl, uint8_t xxl);

card.setSize(12, 12, 6, 4, 3, 2);

setSize with a Size structureCopy Anchor Link

typedef struct {
  uint8_t xs;
  uint8_t sm;
  uint8_t md;
  uint8_t lg;
  uint8_t xl;
  uint8_t xxl;
} dash::Widget::Size;

bool setSize(const Size& size);

chart.setSize({12, 12, 12, 6, 6, 4});

Both overloads return false if the requested size equals the current size. Otherwise they mark the size as changed and return true; the new size is sent to clients on the next call to dashboard.sendUpdates().

Default and full-width sizesCopy Anchor Link

dash::Card and dash::Chart provide two static helpers that return a Size:

• defaultSize() returns the default size for that widget family (see the table above).
• fullSize() returns a size that uses the xs default at every breakpoint, which spans all 12 columns unless you override the defaults.

card.setSize(dash::Card::fullSize());   // Full width on every screen
chart.setSize(chart.defaultSize());     // Restore the default chart size

Reading the sizeCopy Anchor Link

const Size* size() const;

Returns the custom size of the widget, or nullptr if setSize() has not been called.

ExampleCopy Anchor Link

// ...
dash::TemperatureCard temperature(dashboard, "Temperature");
dash::LineChart<const char*, float> history(dashboard, "Temperature History");

void setup() {
  // ...
  // Half width on tablets, a quarter of the width on laptops and larger
  temperature.setSize(12, 12, 6, 3, 3, 3);

  // Full width at every breakpoint
  history.setSize(history.fullSize());
}

Change the default sizesCopy Anchor Link

The defaults are defined as preprocessor macros guarded by #ifndef, so you can override them at compile time. Define the macros for the whole build, not only in your sketch, because the library sources must see the same values. In PlatformIO, use build_flags:

build_flags =
  -D DASH_DEFAULT_CARD_SIZE_MD=4
  -D DASH_DEFAULT_CHART_SIZE_LG=12

The available macros are DASH_DEFAULT_CARD_SIZE_<BP> and DASH_DEFAULT_CHART_SIZE_<BP>, where <BP> is XS, SM, MD, LG, XL or XXL.