Is it possible to load a secondary layout using a URL with window.open()

Post reply

❤Follow Topic(4)

0 favourites

5 posts

From the Asset Store

Using the GooglePlay Games native plugin

$2.49 USD

With this template you will learn how to use the GooglePlay Games native plugin

iagolira

- brent_hamel
- - Joined 31 Dec, 2009
  - 79 topics • 401 posts
- 1
- 2 months ago
- Quote
I'm doing everything I can to facilitate a multi-monitor, undockable UI for my project, and I'm trying to find the best way to transfer a given UI componenet from the main window, to a popup, and back. I'd prefer to use layouts and C3 plugins if possible, purely for speed and my own comfort/experience level, but I'm not sure if that's even possible... thoughts?
- WackyToaster
- - Joined 18 Feb, 2014
  - 54 topics • 1,591 posts
- 1
- about a month ago
- Quote
Afaik Constructs layouts are set up to only ever have one layout active at a give time.

What could possibly work is that whenever you detach a UI component, it launches a second instance of the project with the specific layout open. Then hook them up with a websocket somehow. But then again, Construct also suspends the engine when the window is out of focus, and it sounds like a bit of a nightmare to get working.

Second thing I can think of is that you just emulate what Construct itself is doing. I don't know the exact workings of it though.
- R0J0hound
- - Joined 15 Jun, 2009
  - 90 topics • 7,393 posts
- 1
- about a month ago
- Quote
I’d argue that the web has an inadequate feature set for that. Window.open() can create a separate window but it’ll have to be an entirely different page, it can’t just render parts of the existing project. You’ll probably need to load the same project twice and somehow communicate that the new instance should be a toolbar, or you’d have a specific project per sub window. Also you’re limited with how you can customize the window. It would be dependent on extra features provided by nwjs or webview2 if any. By default the popup window includes a title bar and the url bar and you can’t remove them.

To communicate between the two you can just utilize some js functions. Basically when you create a window with window.open() it returns the window’s global scope.

You can transfer things between the two any way you like but you could look into the drag drop api to see if that’s useful.

developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
You won’t be able to do stuff like dragging the toolbar of the window to do that though. The browser just doesn’t provide access to such things. More is theoretically possible in a wrapper such as nwjs but even that doesn’t provide stuff like that. Overall not much is implemented to help with that.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- brent_hamel
- - Joined 31 Dec, 2009
  - 79 topics • 401 posts
- 1
- about a month ago
- Quote
I tried loading a test "project" up to itch (essentially a random number generator) and then using the "main" program on my end, load it into a window.open() "popup", and have been trying to see if I can get messages to send back and forth... no luck yet unfortunately... It's also not working when both projects are hosted on itch, so I suppose the next attempt down this road would be to get my own hosting and try it there... Ultimately I want this to be an offline Desktop app, rather than a website app, however, I want all the web communication aspects, as eventually I want to try and support multi-user live project editing, similar to how the Google Suite works.

So far, my biggest hurdles have been:

1. Fully styled and controlled titlebar

a. NW.js:

- allows me to hide the titlebar and replace it with my own

- but only on the main window

b. WebView2:

- no ability to hide the titlebar, or style it

2. Popups as undockable UI that can move accross multiple monitors

a. NW.js:

- window.open() opens a popup

- generally gives a browser out of date error

b. WebView2:

- window.open() opens a full browser tab

If I can solve these, then I feel like there really isn't anything I can't accomplish for this project using C3. UNFORTUNATELY, Construct is all I've ever used, as far back as Classic (before it was called Classic lol), so the thought of having to learn a different language, platform, SDK, etc is INCREDIBLY daunting. I've been really hoping Ashley might have seen my posts and possibly weighed to help me determine if want I want to achieve is even remotely possible, possible but not implemented yet (in terms of WebView2), or already possible and I just need to keep working it to get there... either way, its starting to cause a lot of frustration on me end...

Have I outgrown C3? At least as far as this project goes?
- R0J0hound
- - Joined 15 Jun, 2009
  - 90 topics • 7,393 posts
- 1
- about a month ago
- Quote
I only use the free version but generally nwjs is not equal to webview2. Namely webview2 hasn’t implemented all the features available in nwjs.

So basically file a few feature requests for the webview2:

* be able to hide toolbar

* fix window.open(url,””,”popup”) to open a new window instead of a new tab.

Changing the title should be simple in js with:

window.document.title = “new title”;

You can also change the title of the popup window with:

let popup = window.open(url,””,”popup”)

popup.document.title = “new title”;

Or you can change it in the html page from the url.

If that doesn’t work with the webview2 export then file a third issue. Or you can also stay with nwjs.

Having the two windows interact is up to you. In JavaScript you have access to the popup window to be able to call functions as seen above. And from the popup window you have access to the parent window with window.opener. You can do what you like with that.