Tray Support

[JackPyro]

Is Tray supported or gonna be supported in future versions?

[parro-it]

Actually libui-node does not support them, because they are not implemented in libui (see this issue there: andlabs/libui#216).

You can try to 👍🏻 that issue to get them implemented there.
Or alternatively, we can use other existing npm packages to implement it?
@kusti8 any thoughts?

[kusti8]

I don't think working with other node packages is going to work that well. I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial.

[parro-it]

I looked quickly and there doesn't seem to be anything cross platform and I assume all the solutions have their own blocking event loop and implementation into JSX is going to be non trivial.

If libui does not want to implement it, I could write a new package that leverage the event loop of libui-node

[kusti8]

I don't think that would be that good and it could get out of hand quickly. @JackPyro what exactly do you mean by tray? There's this https://github.com/mikaelbr/node-notifier which can send notifications. But if you want a tray icon it doesn't seem like there's anything good that works.

[thormengkheang]

Would be nice if it has system tray support

[JackPyro]

@kusti8 More like this:

I've got my answer, so feel free to close this issue.

[Darkle]

What about using https://github.com/zaaack/node-systray?

[parro-it]

What about using https://github.com/zaaack/node-systray?

Seems nice

[parro-it]

But there's not C++ code, neither C, how could it work?

[kusti8]

Seems like it uses https://github.com/zaaack/systray-portable which is Go code.

…

On Tue, Jun 5, 2018, 7:01 AM Andrea Parodi ***@***.***> wrote: But there's not C++ code, neither C, how could it work? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJW73Hiaymuu6SHgH8XNQLbOKFAQndXHks5t5mUZgaJpZM4TyV7S> .

[parro-it]

ah ok not it make sense

[Darkle]

https://github.com/zaaack/systray-portable seems to include precompiled binaries for each OS though. Would it be possible to include the binary when libui is compiled?

[parro-it]

@Darkle, if you mean in libui-node:

Actually libui-node does not support them, because they are not implemented in libui (see this issue there: andlabs/libui#216).

libui-node is and will remain only a binding library to what libui implements. But what's wrong using systray-portable directly in app code?

[kusti8]

Once you get down the road of adding random binaries to stuff like libui-node or proton native, it gets to be a mess, not just because you have to manage one more build scheme, but also because you end up bloating it with people asking why not this binary also.

I'll make a page in the docs to address third party solutions such as this, but they should be separate.

[parro-it]

I'll make a page in the docs to address third party solutions such as this, but they should be separate.

We should start an awesome-desktop-js list...

[Darkle]

We should start an awesome-desktop-js list...

Here are some links I have stored in Evernote related to js and desktop app dev:

• https://github.com/BrigJS/brig
• Node exe packagers:
  - https://github.com/nexe/nexe
  - https://github.com/pmq20/node-packer
  - http://nectarjs.com/
  - https://github.com/zeit/pkg
  - http://thecodebarbarian.com/standalone-express-apis-binaries-with-pkg.html
  - https://www.npmjs.com/package/lone
• https://github.com/parro-it/libui-node
• https://github.com/parro-it/libui-node/blob/master/docs/initialization.md
• https://github.com/nacmartin/nodetcltk
• https://github.com/trueinteractions/tint2
• https://github.com/joeferner/wxNode
• https://github.com/sindresorhus/trayballoon
• https://github.com/breach/thrust/
  - https://news.ycombinator.com/item?id=8604716
• http://quaxe.org/
• https://livecode.com
• https://github.com/HackPlan/quark-shell-mac
• https://github.com/glennw/servo-shell
• https://github.com/ocornut/imgui
• https://github.com/pojala/electrino
• https://github.com/WebReflection/jsgtk
• https://github.com/Shouqun/node-skia
• https://github.com/facebook/yoga
• http://libyue.com/docs/latest/js/guides/getting_started.html
• https://github.com/kusti8/proton-native

(some might be a little old)

[khanhas]

Electron supports creating Tray menu out of the box.
Tray as well as toast notification are basic elements of what we calls "Apps" nowadays.
Using third-party package is fine but I think you guys should aim proton-native as a one-go solution to create a complete app.

[mischnic]

Example for node-systray with proton-native:
The only glue code needed is calling the kill method from node-systray.

import React, { Component } from 'react';
import SysTray from 'systray';
import fs from "fs";

import { render, Window, App, Box, TextInput, Menu } from 'proton-native';

const systray = new SysTray({
    menu: {
        // you should using .png icon in macOS/Linux, but .ico format in windows
        icon: new Buffer(fs.readFileSync("/.../icon.png")).toString('base64'),
        title: "Test",
        tooltip: "Tips",
        items: [{
            title: "Item",
            tooltip: "Item Tooltip",
            enabled: true
        }, {
            title: "Exit",
            tooltip: "bb",
            enabled: true
        }]
    },
    debug: false,
    copyDir: true
})

systray.onClick(action => {
    if (action.seq_id === 0) {
      console.log("Hi!");
    } else if (action.seq_id === 1) {
      systray.kill()
    }
});

const stop = ()=>{
  systray.kill(false)
};

class Example extends Component {
  render() {
    return (
      <App onShouldQuit={stop}>
        <Menu>
          <Menu.Item type="Quit"/>
        </Menu>
        <Window onClose={stop} title="Proton Native Rocks!" size={{w: 400, h: 400}} menuBar={false}>
            <Box>
            	<TextInput>Hi</TextInput>
            </Box>
        </Window>
      </App>
    );
  }
}

render(<Example />);

[styfle]

@Darkle Do you mind if I make the awesome list starting with your notes?

[Darkle]

@styfle Yeah sure thing.

[parro-it]

@styfle I also have a gist where I collected link, articles and interesting snippets of code, mainly about libuv and GUI event loops https://gist.github.com/parro-it/842ff46a86142c30b1f94f97bb738418.
Really caotic, but something could be useful...

[Darkle]

@mischnic re:
https://zaaack.github.io/node-systray/classes/_index_.systray.html#kill

const stop = ()=>{
  systray.kill(false)
};

Why would you kill systray here, but not the node process?

[kusti8]

@Darkle because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu.

[Darkle]

because this is called when the window or app is closed, so the node process is already stopping, so the last thing we need to stop is the systray. The event loop gets stopped when you have a last Window left or the app quits through Menu.

Ah ok. There might be some people that are expecting different behaviour though. It's fairly common for apps that have a system tray icon to remain open after you close their apps main window.

When you add info to the proton-native docs about this systray module, it might be a good idea to mention this as well, in case people expect their app to stick around after the window closes because of the systray icon.

[styfle]

@Darkle @parro-it I got a list started here: https://github.com/styfle/awesome-desktop-js

Feel free to send a PR 👍