Develop Reference

How to Minimize Browser Window using JavaScript or jQuery or Python

Trying to develop a small app using python flask and electron JS, basically i am using electron for only to run Flask Python Script by using (child_process & Spawn) in electron main.js file also using (LoadURL(http://localhost:5000)) instead of using (loadURL(index.html)).
I did close the Browser Window using simple (Window.Close()) function in separate JavaScript file which is linked in the body section, but cant figure out how to MINIMIZE the Browser Window using only JavaScript or Python in the same file linked in body.
Cant use electron for this because i am not using index.html in loadURL.
Appreciate all the help i cant get on this.

You should use a preload script and inter-process Communication
It's as simple as this
// in the preload script
// you can access Electron's renderer process modules here
const { contextBridge, ipcRenderer } = require('electron')
// you should handle the IPC call in the main process
// and call Electron's browserWindow.minimize() function
contextBridge.exposeInMainWorld('minimize', () => ipcRenderer.send('minimize'))
// in the main process, you should have something like this
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
ipcMain.on('minimize', () => {
mainWindow.minimize()
})
mainWindow.loadURL('https://example.com')
}
In your JavaScript file, you can now call window.minimize()

How to open a link in default browser in an electron app

I want to know how to open a web link in the default browser when clicked on a button in an electron app. Can anyone help me?

At the top of your main.js, make sure the following variables are defined:
const ipc = ipcMain;
const { app, BrowserWindow, ipcMain, webContents } = require('electron');
Inside your button onclick function (in the renderer), use the following:
ipc.send('SomeEvent');
Also make sure the following are defined in your renderer
const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;
Then, use the following to open in the external browser (it will open in the user's default)
ipc.on('SomeEvent', ()=>{
require('electron').shell.openExternal('<LINK_HERE>');
})

How to make multiple Svelte windows in Electron?

For my electron app, I would like to open another Svelte-window (or load different windows/components depending on the startup variables).
So let's say I used this tutorial to set up a basic structure, with my App.svelte looking like this:
<script>
const openLauncher = () => {
window.api.openWindow("launcher");
};
</script>
<button on:click={openLauncher}>Open Launcher</button>
As you can see, I added an IPC function to open a new window. The corresponding index.js:
const { app, BrowserWindow, ipcMain } = require("electron");
const { join } = require("path");
app.on("ready", () => {
const mainWindow = new BrowserWindow({
webPreferences: {
preload: join(__dirname, "./preload.js"),
}
});
mainWindow.loadFile(join(__dirname, "../public/index.html"));
});
ipcMain.on("openLauncher", (event, args) => {
const launcher = new BrowserWindow({
webPreferences: {
preload: join(__dirname, "./preload.js"),
}
});
launcher.loadFile(join(__dirname, "../public/launcher.html"));
});
preload.js:
const { contextBridge, ipcRenderer } = require("electron");
const API = {
openWindow: (obj) => ipcRenderer.send("openLauncher", obj),
}
contextBridge.exposeInMainWorld("api", API);
This does work and opens a new window with the launcher.html, but I can't figure out how to get the Svelte components working in that new file.
One idea I had was modifying main.js file so that the body component changes, like so:
import App from './App.svelte';
import LauncherApp from './LauncherApp.svelte';
const bodyID = document.getElementsByTagName('body')[0].id;
const app = {};
if (bodyID == "index") {
app = new App({
target: document.body,
});
}
else if (bodyID == "launcher") {
app = new LauncherApp({
target: document.body,
});
}
export default app;
This works for the main window (i.e. if I switch the IDs, it loads the correct component at startup) but since it doesn't load any Svelte whe opening the new window, this doesn't work.
So I would really appreciate any ideas on how to get Svelte to load for new/different windows/html-files! And if there is a way to do this with SvelteKit, even better!
Thank you in advance!

The obvious quick fix I see is using an #if block on bodyID in App.svelte containing two components, MainApp (content of App.svelte) and LauncherApp, and then simply changing bodyID depending on in which mode you are.
When using sveltekit I think it would make sense to treat LauncherApp as a separate route (I believe this is the only way to have "separated" pages with sveltekit, though I am not 100%). So when opening a new window you navigate the new instance of your application to the LauncherApp route. If you don't want the same base layout as in the main app, you can add a __layout.reset.svelte file.
I don't know why your solution didn't work, it was quite elegant.

As this post helped me alot to create seperate windows using Svelte and Electron, i just had to create my account after lurking Stack Overflow for years. I think i've cracked your problem without the "hackery" workaround.
I got it working without the #IF statements in my original App.svelte. This is how i did it:
My main.js in the src map (renderer side) is as follows:
import App from './App.svelte';
import Window2 from './Window2.svelte';
let bodyID = document.getElementsByTagName('body')[0].id;
let app;
if (bodyID == "index"){
app = new App({
target: document.body,
});
}
else if (bodyID == "window2"){
app = new Window2({
target: document.body,
});
}
export default app;
I think however that the real magic happens in my index.html and Window2.html. I made mine using the excellent YouTube videos provided by Tylerlaceby.
Basicly, the index.js in the main folder (so the Electron main js) opens the window with the following lines:
const main_window = new BrowserWindow({//Your settings
});
main_window.loadFile(join(__dirname, "../public/index.html"));
main_window.on("ready-to-show", main_window.show);
And the index.html that is in the public folder contains the following head:
`
<title>Main Window</title>
<link rel='icon' type='image/png' href='./favicon.ico'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>
The body is empty, but has the id attached which i use in the main.js renderer side script.
I believe that the header in the index.html loads the build folder after the electron app has been build, containing all of your converted Svelte files.
The Window2.html is the same. The secondary window loads it the same way as the main window does in the second code block from the main.js on the electron side but refers to the Window2.html. The Window2.html contains a body with the ID Window2.
If the above is not the solution, it could also be because i use let instead of const. Once a variable has been assigned to const, it cannot be changed which might explain why it works the first time, but not the second time.
I'm sorry if i did not get all the formatting and refering to previous awnsers correctly. I'm still using to learn Stackoverflow but was eager to share how i made it work for me.

How to reference an image from JS file in packaged Shiny app?

I am creating an R package which provides some helper functions to build a Shiny app.
One of the JS files packaged with the app needs to reference an image file. But I can't figure out how to reference it.
Currently, the js file is located in
my_package/inst/www/js/my_jsfile.js
This file needs to reference
my_package/inst/www/img/my_img.gif
In the JS file, what should the relative URL to the image be?
I tried various options, such as the following, which do not work, when launching in a Shiny app built with the package:
../my_img.gif
www/img/my_img.gif
My JS looks like this:
function showRecordingIcon() {
var img = document.createElement("img");
img.style.display = "block";
img.src = "img/record.gif";
img.width = "280";
img.height = "280";
}
This was working before I packaged it.

If your goal is to get file path from the inst folder in your package on the user system, try:
system.file('www/js/my_file.js', package = 'NAMEOFYOURPACKAGE', mustWork = T)

Did you use shiny::addResourcePath("img", "/path/to/img/folder")
Something like shiny::addResourcePath("img", system.file('www', 'img', package = 'NAMEOFYOURPACKAGE', mustWork = T)
Next, you can refer to it as "img/record.gif"

The ../ means that it goes to the parent directory.
../img/my_img.gif

How can I change the href of a Javascript created page after bundling with webpack?

I'm trying to use webpack with a project and I'm having trouble with dynamically created pages.
I have three dynamically created modules for a header, a footer ,and one other page.
Per example in header.js, I have a navbar with link such as "/src/html/about.html".
When I run the live server from the src folder I encounter no problem at all. The problem comes when I run webpack and I bundle everything into the dist folder. The paths inside the .js files to not change and my index.html can not load them up properly.
header.js looks like this but is lengthier, navbarLogo.href is the example:
const displayHeader = () => {
const navbar = document.createElement('div');
navbar.classList.add('navbar');
centeredContainer.appendChild(navbar);
const navbarLogo = document.createElement('a');
navbarLogo.classList.add('navbar-logo');
navbarLogo.href = "/src/index.html";
navbar.appendChild(navbarLogo);
}
export default displayHeader;
Do you know how to handles these types of path problems?