How to customize menu in electron app? - node.js

I have one frameless electron app which can be run on windows and mac system. I have learned how to set ApplicationMenu and contextmenu(right click only). But, I want to set an Image like settings and clicking on that will open the customized menu (which have its HTML, CSS and js) which catch the events like focusedWindow to get the current focusedWindow. How can I achieve this functionality? Below is the image which describes what I am trying to do.

I have created a div where I am showing and hiding a dive on setting image click. To call browserWindow instance in renderer side you can use remote to call the instance like:
remote.getCurrentWindow().setPosition(x, y);

Related

Make electron window able to receive click event when above keynote app

I am working on electron app where i open a child window which i want to be above all the windows (not above fullscreen windows though), I managed to do it by using
win.setAlwaysOnTop(true, "screen-saver");
It now stays on top of all other open apps and keynote app presentation mode, i want user to be able to click buttons inside my window but now the issue is as soon as user clicks on button or just window in my child window, keynote window minimizes (as focus shifts to my window).
What i tried : I tried almost all available window option given in electron docs with different variations, I also tried playing with modals, but obviously modals stay in window itself, i want to keep main app minimized and keep child window on top of other apps. I also found electron-modal package, but that also behaves same.
working example
I was trying different application to check is any other application is able to do it, and i found that zoom app window (in screen share mode) is able to stay on top of keynote app and you can click buttons inside that app, you can move window, and keynote app keeps running in the background with no issues. I am trying to achieve exactly same behaviour.
This is something that you won't be able to recreate with electron currently, except through a native node module that manipulates your window related OS flags.
You can follow this issue on the Electron repository, since the flags introduced there should resolve your issue, or at least give you a point of entry to make your own PR or node_module.
https://github.com/electron/electron/issues/10078

Electron : App minimize or not visible after click outside browserWindow or Windows key+D

I am developing a desktop widget which shows current system status. But the problem is when any user clicks outside of browser window the app get hide/not visible on the desktop. The same thing happens when user press key windows key +D. Is there anything that we can do for preventing this or catch this event and call window.show(). Because lots of desktop widget support this kind of feature.
Edit: I have tried alwaysOnTop property of browserWindow, but I don't want to show my app above the other apps. Like any desktop widget which always shows on the desktop.

How to open new browser instance with specified size and position

From the command line, or from an application, I want to open a NEW browser instance with a specified size and position, and pointed to a specific URL. I want to open a browser that acts like a dialog box. Ideally, I'd like to be able to disable "decorations" (like tabs, bookmarks, etc.). I do not want to open a new tab or pop-up window from an existing browser instance.
I know Electron or Node Webkit do this, but I just want to open a browser as that acts as a GUI front end for whatever back end I'm building.
I'd be happy if it would work for a specific browser; say, Chrome, or Chromium.
So, for instance, a Python app (or C/C++, Java, etc.) could start it's web server, then open a browser of the proper size, pointed to "localhost:xxxx/whatever.html", and serve up data via AJAX.
Kind of a universal single page app front end...
UPDATE (SOLUTION?)
The answer seems to be in two parts: 1) Opening the browser with command line switches, and 2) Resizing the window in JavaScript.
Using chromium (or Chrome), on the command line:
chromium-browser --new-window --app=http://192.168.1.80:8080/index.html
Then, within your JavaScript:
window.resizeTo(800,500)
This will bring up a new window and resize it.
This is great. Now, I can make an app in any language that allows me to open a web server. The user interface is done in HTML, CSS, and JavaScript. The browser is opened from within the application using the proper command line switches.
Electron does simply open up one or multiple browser windows, you can set them to any url via BrowserWindow.loadURL(url) this could be https://google.com https://localhost:1337 (Your backend webserver) or a local HTML file. The BrowserWindow can be created with information such as size and position.
The only alternative would be something like Qt HTML5 applications that use Qt WebEngine, but this does basically the same thing since Electron and Qt WebEngine use chromium.
Also, there is no point in a single page app that runs without JavaScript.

How to disable resize button in winjs

I'm developing windows 10 cordova application and for native integration we should use WinJS. I would like to know below things in Winjs app.
How to disable resize button in app control bar?
How to set maximum windows during application load?
There is no way in UWP to manipulate with windowing buttons (e.g. disable them). To control window size you can use the following three methods:
setPrefferedMinSize to define minimum window size (up to 500x500px).
tryResizeView to manually attempt to resize windows to desired size.
tryEnterFullScreenMode to place app in full-screen mode.
There is a code sample on GitHub for these methods, including JS.

Desktop gadet/app for Windows

I want to make a desktop gadget like the Sticky notes that we have but just with some additional functionality.
Now that the gadgets have been discontinued in windows, i am not sure about what technology to use to create this app.
I want to create a custom UI like just a Add button on the side of the desktop and clicking on it would create notes.
I was trying to use node-webkit but seems that will appear like a web page and not what I want. Can anyone tell me what should i use to achieve the result.
A Node Webkit window doesn't have to look like a webpage. You can use a frameless window and then design the UI to look however you want with HTML and CSS.
Frameless Window

Resources