sysend.js icon indicating copy to clipboard operation
sysend.js copied to clipboard

Create multiple windows animation demo

Open jcubic opened this issue 3 years ago • 3 comments

It would be cool and most likely possible to create something like a multi-desktop monitor setup but with browser windows that are displayed next to each other.

  • [x] Create Windows connection.
  • [x] Create UI where you drag and arrange windows.
  • [x] Create interactive demo on multiple windows (moving circle).
  • [x] Record video and share the link.
  • [ ] Write an article about the demo.

jcubic avatar Oct 02 '21 09:10 jcubic

You can get window location in JavaScript:

function geometry() {
    const left = window.screenX;
    const top = window.screenY;
    const width = window.innerWidth;
    const height = window.innerHeight;
    return {
        top,
        left,
        width,
        height
    };
}

jcubic avatar Nov 07 '21 20:11 jcubic

There is a resize event, but not a move event, so you need to use setInterval and check the position.

jcubic avatar Nov 07 '21 20:11 jcubic

This can be a starting point Multi-Canvas demo.

Now what's left is to use this as a base and create a page that will have a full-screen canvas and draw the circle on multiple pages.

jcubic avatar Jan 17 '23 10:01 jcubic