Window Size - Getting responsive behavior in the canvas

The Window-Size function is an add-on that can be downloaded from the Squirrel365 Marketplace.

Find more details about other available add-ons on the Squirrel365 Marketplace page.

Add responsive behavior to the canvas with the Window Size add-on

With the Window Size function, you can connect the width and height of the browser to your displayed project. By binding these values to the spreadsheet, you can then bind the width and height of the main canvas to them. This gives the canvas size to be responsive to the size of the browser window, resizing as the window resizes.

Additionally, you can use these values to calculate the size and positions of onscreen components in the spreadsheet and bind their respective properties to those cells. This allows for dynamic sizing and positioning of onscreen components.

What does ‘responsive’ mean?

The way the add-on works is by reading the pixel width and height of the browser after the project has been published. This then feeds back to the project via the Window Size function, and so when the browser window is resized, the canvas size of the project responds to match the resized window.

Setting up the Window Size add-on

You want to begin by binding the width and Height properties of the canvas to the spreadsheet. Make sure to clearly label and highlight the bound cells so it’s easier to keep track of where they are.

Locate and place the Window Size function

Under the functions drawer, you will want to locate the Window Size function and press the “+” button to add it to the Object Browser. Once added, you will see that the function is simple in that it only has a Width and Height input box in its properties panel.

You are only able to bind these properties, so you will want to go ahead and bind the corresponding inputs to the same cells that you bound the canvas height and width to in the spreadsheet.

Now these are bound to the same cells, they essentially become connected. The Window Size function will read the width and height of the browser of the published project, feed this back to the ‘behind-the-scenes’ spreadsheet, and dynamically update the canvas size to match.

We can see this in the example below.

As the browser’s size is adjusted, as seen by dragging the border of the window or switching between the ‘Fullscreen’ and ‘Windowed’ modes, we can observe the values that have been bound to the canvas width and height are also adjusting.

Interacting with components on the canvas.

Now we have the Window Size add-on wired up to the canvas size properties, we can begin to place our components and calculate their positions based on the size of the canvas.

The process of wiring up the components to adjust for the updating canvas size can be quite complex, containing various conditional calculations, but once you have a grasp of the concepts, it all starts to fall into place.

Check out this article to add responsive behavior to your components.