Groov View dimensions?

Is there any reference to the dotted line or dashed line in groov view for what dimensions or aspect the groov view is configured? I noticed the dotted or dashed line in desktop/tablet vs handled is different but could not find anything that states what this size is. Does anyone know?

This thread is the gold standard thread for questions like yours.

Take a look all the way through that for starters.

But bottom line, the dashed lines do not (as far as I know) hold any hard and fast values.
groov View will flip between desktop and handheld based on the view-port size the device reports to the groov web server.

Slight correction: the server doesn’t know or care, which layout gets shown is determined entirely in the browser.

1 Like

Not an answer to your exact question but I use the browser’s responsive design mode to check this. In Firefox, it is simply <ctrl><shift>M. In Chrome, you have to first open the developer tools (<ctrl><shift>I) and then <ctrl><shift>M.

Then you can select different screen resolutions. If you truly want to know the pixel height, place some gadget near the dotted line and then view it at different resolutions.

Clearly, I did not word that right… Both views are not sent to the device right?
So at some point, something has to decide which version to send to the browser?

Both views get sent to the browser, and the code running in the browser picks which one to render. Inside a page’s definition, each gadget has its own positioning and layout properties, which look vaguely like this:

  "desktopLayout": {
    "x": 2,
    "y": 6,
    "z": 0,
    "width": 21,
    "height": 21,
    "locked": false
  "handheldLayout": {
    "x": 0,
    "y": 5,
    "z": 0,
    "width": 15,
    "height": 15,
    "locked": false
  // Other properties below

It’ll pick the appropriate layout when it renders, and if you resize the page and go above/below the mobile breakpoint, it’ll switch on demand without reloading anything from the server.

Waaaaaaaay too many details disguised as a ClojureScript tutorial here:

1 Like