electron - Rich HTML tray menu in a desktop web application -

i want create tray menu app custom buttons, sliders, maybe nice transition effect, header , footer this:

the application needs work on linux, windows , mac. guessed should possible desktop web app + html, can't find useful example framework. every example uses os' menu doesn't have elements need.

can direct me how more or less implement in of web app frameworks?

this can done in electron quite easily, i've created few tray apps myself in below images:

here post outlines do: http://www.bytcode.com/articles/1

the rudimentary files need are:

• index.html
• main.js
• package.json

in index.html design app way wanted look. in example above used couple of input boxes , styled css.

in main.js file put main code power app.

in package.json file put details app, dev dependencies etc.

the main file should concerned main.js file. below example of main.js file app above. i've added comments understand:

// sets variables (const) const {app, browserwindow, ipcmain, tray} = require('electron') const path = require('path')  const assetsdirectory = path.join(__dirname, 'img')  let tray = undefined let window = undefined  // don't show app in doc app.dock.hide()  // creates tray & window app.on('ready', () => {   createtray()   createwindow() })  // quit app when window closed app.on('window-all-closed', () => {   app.quit() })  // creates tray image & toggles window on click const createtray = () => {   tray = new tray(path.join(assetsdirectory, 'icon.png'))   tray.on('click', function (event) {     togglewindow()   }) }    const getwindowposition = () => {   const windowbounds = window.getbounds()   const traybounds = tray.getbounds()    // center window horizontally below tray icon   const x = math.round(traybounds.x + (traybounds.width / 2) - (windowbounds.width / 2))    // position window 4 pixels vertically below tray icon   const y = math.round(traybounds.y + traybounds.height + 3)    return {x: x, y: y} }  // creates window & specifies values const createwindow = () => {   window = new browserwindow({         width: 250,         height: 310,         show: false,         frame: false,         fullscreenable: false,         resizable: false,         transparent: true,         'node-integration': false     })     // index.html file loaded window     window.loadurl('file://' + __dirname + '/index.html');    // hide window when loses focus   window.on('blur', () => {     if (!window.webcontents.isdevtoolsopened()) {       window.hide()     }   }) }  const togglewindow = () => {   if (window.isvisible()) {     window.hide()   } else {     showwindow()   } }  const showwindow = () => {   const position = getwindowposition()   window.setposition(position.x, position.y, false)   window.show()   window.focus() }  ipcmain.on('show-window', () => {   showwindow() }) 

below example of package.json file:

{   "name": "nameofapp",   "description": "description of app",   "version": "0.1.0",   "main": "main.js",   "license": "mit",   "author": "name of author",   "scripts": {     "start": "electron ."   },   "devdependencies": {     "electron-packager": "^8.2.0"   } } 

so, if create simple index.html file saying hello world, place above codes main.js file , package.json file respectively , run app run tray.

if have no idea how use electron, need figure out first (its not hard grasp). become clear place files , how run app

this may seem bit complicated, , more details can read docs