OpenBCI / OpenBCI_GUI

A cross platform application for the OpenBCI Cyton and Ganglion. Tested on Mac, Windows and Ubuntu/Mint Linux.
MIT License
708 stars 257 forks source link

Better Responsive EMG Widget Column/Row logic for Visualizer Elements #1169

Open conorrussomanno opened 1 year ago

conorrussomanno commented 1 year ago

Is your feature request related to a problem? Please describe.

We can get better logic for the EMG widget responsive design, as the number of elements shown and the screen size/width variables change.

Describe the solution you'd like

The best logic I can come up with is this:

If (widgetHeight*(3/4) <= widgetWidth <= widgetHeight*(4/3)) // the widget is roughly "square shaped" w/ 3/4 being the ratio threshold to switch from "square" to "rectangle"
  if numberOfElements <= 4, setGridTo2x2
  if 4 < numberOfElements <= 9, setGridTo3x3
  if 9 < numberOfElements <=16, setGridTo4x4

If (widgetWidth > widgetHeight*(4/3)) // the widget is a "wide rectangle"
  if numberOfElements <= 4, setGridTo2x2
  if 4 < numberOfElements <= 6, setGridTo3x2
  if 6 < numberOfElements <= 8, setGridTo4x2
  if 8 < numberOfElements <= 12, setGridTo4x3
  if 12 < numberOfElements <= 16, setGridTo6x3

If (widgetHeight*(3/4) > widgetWidth) // the widget is "tall rectangle"
  if numberOfElements <= 4, setGridTo2x2
  if 4 < numberOfElements <= 6, setGridTo2x3
  if 6 < numberOfElements <= 8, setGridTo2x4
  if 8 < numberOfElements <= 12, setGridTo3x4
  if 12 < numberOfElements <= 16, setGridTo3x6

Describe alternatives you've considered

You'd probably need to tweak the grid ratios and also the thresholdRatio to get it to feel right, but I think this is a decent starting framework

Additional context

Variables to be played with in the following file are rowCount & columnCount of the widget: https://github.com/OpenBCI/OpenBCI_GUI/blob/master/OpenBCI_GUI/W_EMG.pde