Resizing Gadgets in Groov Build

groov View
6

The pixel size of gadgets in groov depends on the width of the browser window.

Pages in groov are 96 grid units wide in the Desktop & Tablet layout, and 32 units wide in the Handheld layout. Gadgets are constrained to that grid, using integer coordinates. So you can have a gadget at grid position (10, 14), that’s 13 units wide and 10 units tall.

To figure out how large that gadget will be drawn, and at what position, we first take the width of the browser window, minus a little bit of padding. (I don’t remember the exact padding at the moment.) Given that width, we divide it by the number of grid units for the current layout and round down to the nearest integer.

let gridSize = floor((viewportWidth - padding) / 96) (or 32 on mobile)
let pageWidth = gridSize * 96 (or 32)

For example, if your browser window is 800x600 pixels (and an arbitrary 10 pixel padding):

let gridSize = (800 - 10) / 96 = 8
let pageWidth = 8 * 96 = 768

The full width of the page will be 768 pixels, and each grid unit ends up being 8 pixels on a side. Pages are centered within the browser window, so the left edge of the page (where we begin drawing) ends up at (800 - 768) / 2 = 16 pixels from the edge of the browser window. Given our example gadget above, it’s upper left corner ends up at position (80, 112) within the page, so 80 + 16 = 96 pixels from the left edge of the browser window, and 112 pixels from the navigator bar at the top of the screen. It will be 104 pixels wide, and 80 pixels tall.

As you resize the browser, we recalculate gadget positions. We always round the grid unit size down to the nearest integer.

With that in mind, answering those 5 questions.

  1. An image indicator gadget defaults to 24x24 grid units. Once you attach an image to it, the default width stays at 24 grid units, and the height default changes to match your image’s aspect ratio.
  2. Each stage when resizing a gadget represents 1 grid unit. The pixel size depends on how wide your browser window is.
  3. The minimum grid width of an image gadget (or image indicator) is 4 grid units. Again, the resulting pixel width depends on how wide your browser is. I think we set a minimum viewport width of 320 pixels, so that comes out to 12 pixels wide on the desktop, 36 on mobile devices. (We don’t really support shrinking down the desktop view that much.)
  4. Top left corner.
  5. 1 grid unit per key press.
1 Like