Request: NW.JS Skinned Window

For developers using the Construct 2 Javascript SDK

Post » Sun Aug 14, 2016 12:43 am

Request: Would it be possible to extend the NW.JS file with the ability to produce skinned windows, such as in Winamp or Sonique? Hopefully with transparency as an option.

Ideally it would work by creating the skin either on a separate layout, though external file combination (PNG's & XML) could do just as well.

Thanks ahead of time.

Examples below:
Image
Image
Image
Image
B
51
S
26
G
8
Posts: 121
Reputation: 8,501

Post » Sun Aug 14, 2016 11:39 pm

You could disable window frame option when you export, and use custom backgrounds and/or sprites for GUI elements.
Image Image
B
22
S
13
G
130
Posts: 869
Reputation: 67,816

Post » Wed Aug 17, 2016 1:05 am

MadSpy wrote:You could disable window frame option when you export, and use custom backgrounds and/or sprites for GUI elements.

Only to close the window. Unfortunately there is no way to maximize or resize the window via the editor yet.
B
51
S
26
G
8
Posts: 121
Reputation: 8,501

Post » Wed Aug 17, 2016 8:14 pm

Something like that (nw.js export win64b)

It's a quick sample without all minimize/maximize/close features
Edit: you can resize the windows
Image Image
B
22
S
13
G
130
Posts: 869
Reputation: 67,816

Post » Thu Aug 18, 2016 2:54 am

MadSpy wrote:Something like that (nw.js export win64b)

It's a quick sample without all minimize/maximize/close features
Edit: you can resize the windows

Normally yes, you can resize the window by dragging it's extents. You can not though set the windows size via code/event sheet, or maximize the window (not full screen) and restore the window via code/event sheet.

Also yes, something like that, thanks for taking the time.

Here is my review:
0. Is the window skin, or part able to be transparent to the desktop, IE: .png?
1. Does this work by loading layouts into the window skin/controls layout?
2. Pressing the maximize button should scale the window to the display not go full screen (seems like it is in full screen mode, can't drag the window after maximize).
3. Pressing the maximize button twice should restore the window to it's previous size. Something like:
Code: Select all
var preservedWidth;
var preservedHeight;

function saveScreenSizeBeforeMinimising()
{
   preservedWidth = window.innerWidth;
   preservedHeight = window.innerHeight;
}


function restoreScreenSize()
{
   window.resizeTo(preservedWidth, preservedHeight);
}

4. Close button seems to crash after hitting maximize.
5. Minimize button works good.
B
51
S
26
G
8
Posts: 121
Reputation: 8,501

Post » Thu Aug 18, 2016 7:11 am

Honestly, I took ~15 min to create this with 9 events and I think it's not enough time to create something fully working :D

You can not though set the windows size via code/event sheet,

User can resize by dragging the windows edge but if you want to change the windows size it's doable
or maximize the window (not full screen)

You can maximize via events... When I maximize a windows the windows is extend to the whole display (for me, it's a fullscreen with windows close/maximize/minimize buttons) but by "not full screen" you mean maximize but keep the aspect ration of original windows?
and restore the window via code/event sheet.

You can do that.

0. I never test because nw.js and transparency are not stable but I could try.
1. In this example, no. 1 layer, 1 layout , 9 events
2. Yes I don't export with windows frame to create a custom "skin". Drag a maximized windows is like restore the windows and move it to mouse position. Hard to reproduce without a windows frame. Now I understand what you mean by "not fullscreen", it's for the ability to drag the windows and not keeping aspect ration.
3. I was too lazy to create (via events) that but easily doable.
4. same than #3. The fake bar and buttons are not resized, they don't fit to the currrent windows size and you can miss them.
5. 1 event, not too hard to create

Regards,
Image Image
B
22
S
13
G
130
Posts: 869
Reputation: 67,816

Post » Fri Aug 19, 2016 11:54 pm

Wow, thank you so much for your thoughtful reply. I'm happy you understand where I was coming from and I really appreciate your work so far. Please let us know if you make any further progress, I'm sure this would be a great feature and well received for those who think outside the box, or just want some extra GUI bling. Hope to see more, have a great day and weekend.
B
51
S
26
G
8
Posts: 121
Reputation: 8,501


Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 0 guests