max-mapper / menubar Goto Github PK
View Code? Open in Web Editor NEW➖ high level way to create menubar desktop applications with electron
License: BSD 2-Clause "Simplified" License
➖ high level way to create menubar desktop applications with electron
License: BSD 2-Clause "Simplified" License
The menu doesn't show up on Windows 10: owenthereal/hacker-menu#18 (comment)
I'm trying to add a Quit button to my menubar app... but can't seem to figure it out.
I've tried mb.quit()
and creating an var app = require('app');
and then app.quit()
per the Quick Start Guide with no luck. Am I missing something?
Thanks.
I clone this project, cd into the examples
directory, run what I believe are all the build steps, and then run the demo app as instructed. The app executes and terminates immediately, without adding anything to the menubar, although the script obviously runs. The built app throws immediately and terminates.
My steps:
[Sun 12:48:05] projects $ git clone https://github.com/maxogden/menubar.git skynet
Cloning into 'skynet'...
...
Checking connectivity... done.
[Sun 12:48:30] projects $ cd skynet/example/
# add "console.log('LINE 1');" as first line of main.js
[Sun 12:48:36] example $ nvm use; npm i; npm start
No .nvmrc file found
npm WARN package.json [email protected] No repository field.
npm WARN engine [email protected]: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.0","npm":"2.5.1"})
-
> [email protected] postinstall /Users/mdyson/projects/skynet/example/node_modules/electron-prebuilt
> node install.js
[email protected] node_modules/menubar
└── [email protected]
[email protected] node_modules/electron-packager
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected])
[email protected] node_modules/electron-prebuilt
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
> [email protected] start /Users/mdyson/projects/skynet/example
> electron .
LINE 1
[Sun 12:57:52] example $
I also built the packaged app. When I run it, it throws a js error immediately and terminates.
My steps:
[Sun 12:48:59] example $ npm run build
> [email protected] build /Users/mdyson/projects/skynet/example
> electron-packager . Example --platform=darwin --arch=x64 --version=0.26.0 --ignore=node_modules/electron --icon=Icon.icns
Packaging app for platform darwin x64 using electron v0.26.0
Wrote new app to /Users/mdyson/projects/skynet/example/Example.app
[Sun 12:52:16] example $ open Example.app
The output:
A JavaScript error occured in the browser process
Uncaught Exception:
TypeError: app.getAppPath is not a function
at create (/Users/mdyson/projects/skynet/example/Example.app/Contents/Resources/app/node_modules/menubar/index.js:12:53)
at Object.<anonymous> (/Users/mdyson/projects/skynet/example/Example.app/Contents/Resources/app/main.js:3:10)
at Module._compile (module.js:418:26)
at Object.Module._extensions..js (module.js:436:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:298:12)
at Object.<anonymous> (/Users/mdyson/projects/skynet/example/Example.app/Contents/Resources/atom.asar/browser/lib/init.js:104:10)
at Object.<anonymous> (/Users/mdyson/projects/skynet/example/Example.app/Contents/Resources/atom.asar/browser/lib/init.js:106:4)
at Module._compile (module.js:418:26)
at Object.Module._extensions..js (module.js:436:10)
I'm not sure how to debug this further, but if I learn anything more I'll post it.
var menubar = require('menubar');
var mb = menubar();
mb.on('ready', function ready () {
console.log('mb.window:', mb.window); // -> mb.window: undefined
});
According to the README, mb
should contain window
, the electron require('browser-window') instance. About to check the codebase for an obvious error or a way I can hack it in temporarily.
Using v2.2.1 on Mac OS X 10.10.3 and node v0.12.7.
Version of menubar: 2.0.17
CLI: npm run build
in electron-generator
Platform: Mac OS Yosemite
I get error message when I run builded app for Mac OS:
A JavaScript error occured in the browser process
Uncaught Exception:
TypeError: app.getAppPath is not a function
at create (/Users/timurnurislamov/Code/tomatron/node_modules/menubar/index.js:14:33)
at Object.<anonymous> (/Users/timurnurislamov/Code/tomatron/dist/Tomatron-darwin-x64/Tomatron.app/Contents/Resources/app.asar/index.js:3:10)
at Module._compile (module.js:428:26)
at Object.Module._extensions..js (module.js:446:10)
at Module.load (module.js:353:32)
at Function.Module._load (module.js:308:12)
at Object.<anonymous> (/Users/timurnurislamov/Code/tomatron/dist/Tomatron-darwin-x64/Tomatron.app/Contents/Resources/atom.asar/browser/lib/init.js:104:10)
at Object.<anonymous> (/Users/timurnurislamov/Code/tomatron/dist/Tomatron-darwin-x64/Tomatron.app/Contents/Resources/atom.asar/browser/lib/init.js:106:4)
at Module._compile (module.js:428:26)
at Object.Module._extensions..js (module.js:446:10)
You can see this TypeError: app.getAppPath is not a function at create (/Users/timurnurislamov/Code/tomatron/node_modules/menubar/index.js:14:33)
I need just some help. Thanks
Hi,
first of all, thanks for this great piece of software!
I have an issue regarding the icon: when developing, I can set the icon perfectly like this:
var mb = menubar({dir: __dirname, icon: 'Icon.png', preloadWindow: true, showDockIcon: true});
but as soon as I use your electron-packager, the packaged app all the time shows the cat in the menubar instead of my icon.
Any ideas?
Thanks and best regards
Hi,
I just started to play with electron and I was trying to embed a browser-window inside de mb window but I couldn't make it. I didn't find the way to bind them both.
Thanks.
Hola. having lots of fun creating little mini menubar apps - thanks for building this bad jackson. That said, is it possible to dynamically generate HTML and feed it into the constructor like this?
var menubar = require('menubar');
var h =
"<html><body>derp</body></html>";
var mb = menubar({
'index' : h
});
mb.once('show', function () {
mb.window.openDevTools();
});
use case: Use zombie.js to scrape a page, generate some new HTML form the data, and then display that HTML in my menu bar app. (and eventually, update it)
It would be lovely to see a method which loads a different icon on demand.
Something like mb.set("icon", "icon_active.icns", function(){console.log("icon changed")})
maybe?
You can see this behavior being implemented in gitify here.
Hey, what's the best approach to add an arrow (like dropbox's menu bar app) on top of the box?
should be doable, I just haven't had time to do it yet. PR welcome!
Within the tray clicked event, the bounds object provided is undefined. This is on OSX 10.10.3. May need to check for existence around line 38 of index.js and create it if necessary.
Electron-boilerplate provides a nice quick-start setup testing electron. In oder to reproduce this issue checkout the repo
//.pipe(babel({ modules: 'amd' }))
.pipe(babel({stage: 0}))
<!--
<script src="vendor/require.js"></script>
<script>
requirejs(['app'], function (app) {});
</script>
-->
with
<script src="app.js"></script> in body
var menuBar = require('menubar');
var mb = menuBar();
mb.on('ready', function ready () {
console.log('app is ready')
});
install electron-prebuild globally
npm install -g electron-prebuilt
launch it with a global installation of electron-prebuild
electron ./build
Thanks
Hello, my application runs perfectly fine when run with electron index.js
, but when I try to build it with electron-packager
, the resulting binary's javascript isn't willing to run.
The window and index.html/css load fine, but the javascript clearly isn't running based on the behavior of the templates, button clicks, and icon changes. You can observe that the default "cat" icon is still there when I configured it with a custom icon. Every other configuration property when the menubar constructor is initialized runs fine.
The build's resources contain all necessary files, I even ran electron index.js
inside the resources and it worked great. I think there is something fishy that happens when the application is run as a binary...
Could anyone help me out? This is clearly abnormal and I can't seem to figure out the solution.
I don't have a copy of an earlier version of Windows handy to test at the moment. When I run the example app, the tray icon appears. When I click on the icon to open the menu, right click does nothing and left click causes a taskbar icon to briefly appear and then disappear, and no window is shown. The console logs:
master= ~/dev/src/menubar/example
11:31> electron .
[10804:0804/113130:INFO:CONSOLE(0)] app is ready
[10804:0804/113134:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113134:WARNING:browser_accessibility_manager_win.cc(94)] Not firing AX event because of no hwnd
[10968:0804/113134:INFO:renderer_main.cc(200)] Renderer process started
[10804:0804/113137:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113137:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113138:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113138:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113138:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113139:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
[10804:0804/113139:WARNING:browser_accessibility_manager_win.cc(193)] Not firing AX event because of no root_delegate or hwnd
Opening this issue for the sake of documenting this as a known bug and as a starting point for when I have time in the future to dig in further.
To recreate this on OS X, you need a retina Macbook connected with a standard DPI external monitor:
If monitor 1 is retina and monitor 2 isn't then the width and height of the window will be halved, see screenshot below.
If monitor 1 is standard dpi (non-retina) and monitor 2 is retina then the window will be downscaled to the standard resolution (72dpi).
I haven't investigated this properly yet but my hunch is that this could be an upstream bug in Electron (or possibly Chromium). I can create an issue there instead if that is the case.
Currently if you click on the tray icon on a mac, the mac automatically switches to the desktop where the application was started. This window behaviour is not well suited for a tray application.
I'd like to change the current behaviour by using the browserWindow.setVisibleOnAllWorkspaces(true)
option. This option is used to show the application on all workspaces.
Is there way how to display text in menu bar instead of icon?
For example if I want to use it as a countdown? (changing text every minute?)
Hi there,
I wanted to try menubar. For this reason I cloned this repository and followed the steps in the example directory. For some reasons the contents of index.html is not displayed.
When starting the app I just get the following output :
> [email protected] start /Users/HorstMumpitz/development/javascript/menubar/example
> electron .
[3646:0522/095638:WARNING:dns_config_service_posix.cc(150)] dns_config has unhandled options!
app is ready
The warning is connected to electron and a known issue.
I'm running 10.10.3 on a Mid 2010 MacBook Pro.
#1) Home am I suppose to run the project?
Should be just like running a normal Electron App? I have electron-prebuilt
installed globally.
This should work, right?
electron .
This is what shows for me
#2) How do I load an index.html
?
var menubar = require('menubar');
var mb = menubar();
mb.on('ready', function ready () {
index: 'file://' + __dirname + '../index.html')
});
Nothing loads, just showing the same thing (image above).
On OSX (10.10.3) with two displays, the menu always opens on whichever display has the focused window at the time the icon is clicked, regardless of which display the click happens on.
The window position on multiple monitors on OS X is offset by the arrangement bounds offset in the y direction when displaying on a secondary monitor.
To see this go to System Preferences > Displays > Arrangement and set offset your primary display like the following:
Then open your menubar application from the secondary display (will be offset down by the amount of offset of the secondary display.
Like menubar.show()/menubar.hide()
Hi! Great tool.
It would be neat if this can support dynamic switching between regular and inverted menu bar icons for OS X, when using dark style menu bar. Right now, there is only support for one type – regular or inverted – not both, which makes regular, dark icons invisible when using dark OS X.
This is not necessarily a bug in menubar but I wanted to document it here as it is a practical issue and perhaps there is a workaround or a different way to do this.
My menubar application has an animation effect when it is opened (fade in) and when it is closed (hidden) I need to reset the effect (basically set opacity to 0 with no animation).
So I need to propagate the hide event to the renderer (I do something like this):
menu.on("hide", => menu.window.webContents.send("hide"))
The problem is that this doesn't always have time to reach the renderer and apply the changes (opacity: 0) before the window is hidden. So then when I click the menubar again I momentarily see the menubar in it's fully opaque state then it disappears (opacity: 0) and then the fade in transition happens. It's a race condition so sometimes it works fine, sometimes it doesn't.
I have a hacked a fix for this by putting a setTimeout
around menubar.window.hide()
in the menubar module and that works for my purposes but perhaps there is a better way to do this?
It would be nice to know exactly on what terms would you like your code to be used.
It would be nice If I could do something like this:
globalShortcut.register('ctrl+shift+a', function() {
console.log('ctrl+shift+a is pressed');
menubar.open();
//or menubar.show();
})
I think its related to this change ee03191 which was caused by me opening this issue electron/electron#1712 which recommended using process.resourcesPath
, which according to this returns the 'Path to JavaScript source code'.
However, I think now this is incorrect. When running a menubar app from the CLI via e.g. electron .
, process.resourcesPath
will be /path/to/electron-prebuilt/dist/Electron.app/Contents/Resources
, but what you really want it to be is /path/to/my/app/source/code
.
Anyone have thoughts on what the default src path should be? It can't be __dirname
since that will be inside the node_modules/menubar
folder.
My project's window is either not appearing when clicked, or throwing the error
Uncaught Exception:
TypeError: menubar.window.loadURL is not a function
at createWindow (/Users/Adam/Documents/git/DebateTimer/node_modules/menubar/index.js:98:22)
at EventEmitter.appReady (/Users/Adam/Documents/git/DebateTimer/node_modules/menubar/index.js:56:7)
at emitOne (events.js:82:20)
at EventEmitter.emit (events.js:169:7)
I just did a clean install of menubar into a clean directory, and tried to run the example file and it launches (without building) but clicking the icon will not open the window.
From this I believe that the problem has to be with my system, and not necessarily the project I was working on.
Any help appreciated :)
Edit: project seems to load fine when running
electron .
in the command line, but running
npm start
which is effectively the same command throws the error
Here's a quick video demonstrating the issue (~300KB).
Also see: electron/electron#1825
This can be fixed by also listening to the double-clicked event. I will make a PR with a fix in a couple of minutes.
How can I manage to disable resizing?
Hi.
I'm using menubar in TypeScript and found an issue.
When I import menubar
as below,
// Definition in lib.d.ts
declare module "menubar" {
function create(opts: Object): any;
export = create;
}
// ...
// main.ts
import * as menu from 'menubar';
I got an error
browser/main.ts(3,23): error TS2497: Module '"menubar"' resolves to a non-module entity and cannot be imported using this construct.
It seems that menubar
is already defined in TypeScript standard lib.d.ts. It is defined as global variable and leads to above error.
Is there any way to solve this problem?
Now I avoid this issue in dirty way but it disables type check for whole menubar
module
// Now using JS style require...
var menu = require('menubar');
Calling mb.showWindow()
renders the window in the top right corner. Is it possible to specify this to show as if clicking the menubar?
It looks like the issue with the window not showing on the clicked screen has been resolved in electron 0.30.2
. I can not reproduce the issue in 0.30.2
and above. And in the release I found this:
A few fixes to Tray's behavior.
https://github.com/atom/electron/releases/tag/v0.30.2
Can somebody else also confirm that this is fixed?
If it is we can remove the temporary fix implemented with #31
The Electron docs only state that upon creation of a new BrowserWindow we can set transparency. there is no method to do this, and setting the property directly does not work.
It would be cool if we could just pass the same options object that we can pass to the BrowserWindow constructor, but to the menubar constructor...
Correct me if I'm wrong!
My use case is that I want to be able to control transparency and color of the background of the menubar app i'm making.
The README says it may work for "some Linuxes". I wonder if you have a list. But I just tested it doesn't work for Ubuntu 14.04.
Hi,
Is it possible to keep changing the icon? or set it's width? I'd like to update it with a spark line graph of network latency. I've got a commandline node app I wrote for this already. (to monitor the latency, not graph it.. yet) This is perfect!
Thanks
@maxogden - this is an awesome project, thanks for making it! it is going to let me build a little app i've been dreaming of for a while.
Small issue, if I use a width smaller than the default of 400:
In main.js:
var mb = menubar({width: 200})
Note location of window (to the right) compared to the icon (far left):
Is this a bug or is there an easy way to make it stay centered below the icon?
right now i have to do e.g.
var mb = menubar({
index: 'file://' + path.join(process.cwd(), 'app.html'),
icon: 'file://' + path.join(process.cwd(), 'img', 'Icon.png')
})
but ideally i could just do
var mb = menubar({
index: 'app.html',
icon: path.join('img', 'Icon.png')
})
and since dir
now defaults to process.cwd()
it would work
should be an easy fix
In my tests, it appears that several values are potentially not getting initialized correctly. Within showWindow, when determining the x,y coordinates, it appears that:
opts.x = undefined
opts.width = undefined
trayPos.width = undefined
opts.width and trayPos.width being undefined results in the calculation of x to return NaN.
I may can peek through a little more later and see if I can determine where things begin to break down and try to set defaults for these but you or someone else may have more time to devote to this than I do.
Tested in OSX 10.10.3
If I run the app from the command line with electron npm start
I can have the menubar window start off as shown using either mb.window.show()
or mb.showWindow()
.
However, once I package the app with electron-packager and launch the .app, the window flashes for a brief moment but won't stay shown.
menubar 2.2.1, electron 0.33.1, electron-positioner 2.0.2
var menubar = require('menubar')
var mb = menubar()
mb.on('ready', function ready () {
console.log('app is ready')
mb.window.show()
})
BrowserWindow supports the always-on-top
option but menubar calls hideWindow
when focus is lost.
This behaviour makes it kinda hard to use the built-in developer tools.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.