Responsive to screen size

Community Usage questions
1

Hi,

for some training I was looking to a way to display the size of the screen inside a text widget.
So I set a script widget with :

let width = screen.width;
let height = screen.height;

and wish to display the result inside my text widget, but I don't how to access it ?!

In the same way is was looking to squarify a widget and center it based on the screen size, so in the css prop I set

width: 50vw;
height: 50vw;
margin: auto;

After sending some times in several forum and documentation, it's seems not so simple.
Or maybe I'm not looking in the right direction

best

Z

2

You could call set() to modify the text's value:

set('text_id', `width: ${width}px, height: ${height}px`)

In the same way is was looking to squarify a widget and center it:

Something like this maybe

width: 50vw;
height: 50vw;
top: calc(50% - 25vw);
left: calc(50% - 25vw);

Or using vertical+horizontal layout: center.json (3.3 KB)

3

Set is displaying the text but not the value.

Screen_Size.json (6.8 KB)

Is it better practice to use ${} or ' + + ' ?

4

Use globals.screen.width instead of screen.width and it should work.

5

ok this value need to be store in the globals to be access externally ?

6

No it's just that the browser's global screen variable is not accessible as you could think because user scripts run in a (kind of) isolated context where there is no screen informations available, and o-s-c exposes these informations through the globals variable (Scripting - Open Stage Control).

7

Ok I get it !
Thx