max-mapper / menubar Goto Github PK

If I access my menubar from windows other than desktop, I get box-shadow on the top from menubar:

On desktop it looks better, but if we can remove border-radius from top edge it can look great. Just like other menubar apps.

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.

Support a right click function for the tray icon like with caffeine:
Not clicked:

Left clicked:

Right clicked:

Electron-boilerplate provides a nice quick-start setup testing electron. In oder to reproduce this issue checkout the repo

• replace the amd-loader in build script like

//.pipe(babel({ modules: 'amd' }))
.pipe(babel({stage: 0}))

• replace script tags in app.html

<!--
<script src="vendor/require.js"></script>
<script>
requirejs(['app'], function (app) {});
</script>
-->

with

<script src="app.js"></script> in body

• include this in main.js

var menuBar = require('menubar');
var mb = menuBar();
mb.on('ready', function ready () {
    console.log('app is ready')
});

• now run the following commands
  gulp build

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.

using [email protected], [email protected]

I am getting this error when running the .app file produced by make build. When I run it from the CLI with npm start it runs fine. Also runs on windows with an .exe file when pacakged up using electron-packager.

To recreate this on OS X, you need a retina Macbook connected with a standard DPI external monitor:

1. Launch menubar app on monitor 1 and click to open the menubar window.
2. Close the menubar window
3. Open the menubar window on monitor 2.

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()

https://www.npmjs.com/package/electron-prebuilt

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?

Hi!

I just checked out your repo and attempted to run the app from the example directory, it looked like the app booted up, but there was an error that popped up when I clicked on the icon in the menubar - screenshot attached.

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()
})

When the taskbar is not positioned to the bottom or the right, the popup show up in the opposite corner (as if the taskbar was in those positions).

I don't have enough experience with JavaScript and Node.js, so I can't offer a pull request to fix it.

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.

I cant see any window show up but only a tab with a preview.

Is it only my problem?