desktop-application


Rich HTML tray menu in a desktop web application


I want to create a tray menu app with custom buttons, sliders, maybe some nice transition effect, a header and footer like this:
The application needs to work on Linux, Windows and Mac.
I guessed it should be possible with a desktop web app + some HTML, but I can't find any useful example for any framework. Every example uses the OS' menu that just doesn't have the elements I need.
Can anyone direct me how to more or less implement this in any of the web app frameworks?
This can be done in electron quite easily, I've actually created a few tray apps myself in the below images:
Here is a post that outlines exactly what to do: http://www.bytcode.com/articles/1
The rudimentary files you need are:
index.html
main.js
package.json
In the index.html you would design your app the way you wanted it to look. In my example above I just used a couple of input boxes and styled it with CSS.
In the main.js file is where your would put your main code to power the app.
In the package.json file is where you put the details about your app, dev dependencies etc.
The main file you should be concerned with is the main.js file. Below is an example of the main.js file for the app above. I've added comments to help you 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 the app in the doc
app.dock.hide()
// Creates tray & window
app.on('ready', () => {
createTray()
createWindow()
})
// Quit the app when the window is 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 the tray icon
const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))
// Position window 4 pixels vertically below the tray icon
const y = Math.round(trayBounds.y + trayBounds.height + 3)
return {x: x, y: y}
}
// Creates window & specifies its values
const createWindow = () => {
window = new BrowserWindow({
width: 250,
height: 310,
show: false,
frame: false,
fullscreenable: false,
resizable: false,
transparent: true,
'node-integration': false
})
// This is where the index.html file is loaded into the window
window.loadURL('file://' + __dirname + '/index.html');
// Hide the window when it 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 is an example of the 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 you create a simple index.html file saying Hello World, place the above codes into the main.js file and package.json file respectively and run the app it will run from the tray.
If you have no idea how to use electron, you need to figure that out first (its not that hard to grasp). It will then become clear where to place what files and how to run the app
This may seem a bit complicated, and for more details you can read the docs

Related Links

Connect Production server sql database from my desktop application
softphone pbx software creation [closed]
How do I correctly ship licenses with my desktop app?
TideSDK: Download mp3 files
How to login to OWIN Web Api 2 WS-Federation server from desktop app
How to inspect elements in a desktop application?
IBM Worklight - Can we create a desktop based application?
How to capture traffic of Desktop Application Using Fiddler
How to write a program that starts or pops every time I unlock my computer?
Steps to Create a Signed Desktop App for Windows 8?
Developing an Offline Native Application from a Web Dev background [closed]
Is libGDX suited for desktop-only application development?
UltraWinToolbars Control is not working in new version 12.2
SoundCloud Desktop Sharing Kit Broken?
Where is my MPI job running?
Replace new version of infragistic controls with old version of infragistic controls

Categories

HOME
logging
macros
alasql
android-ndk
file-upload
jquery-plugins
crm
spss
confluence-rest-api
ms-access-2010
browser-cache
checkpoint
sitemap
ionic-native
google-app-maker
select2
aspectj
adroitlogic
loss
openscad
virtuemart
legend-properties
aws-devicefarm
ampscript
wai-aria
quality-center
android-wear-2.0
visual-studio-community
smart-device
boosting
folder
edirectory
overflow
ng2-bootstrap
voyager
webclient
kepserverex
vertical-alignment
bzip2
peerjs
wufoo
result
codepen
risc
html-entities
chrome-custom-tabs
jks
emacs24
cloudconvert
perldoc
intermediate-language
senti-wordnet
petapoco
printer-control-language
trusted-computing
addressbook
qudpsocket
blackberry-webworks
racket-student-languages
access-violation
cherry-pick
radar-chart
abstract
firefox-os
event-tracking
libgcrypt
transbase
uinavigationitem
roslyn-code-analysis
xml-simple
polarion
stereotype
data-representation
attiny
backtrace
optimistic-locking
static-files
caption
aiff
system.io.packaging
growl
telerik-appbuilder
django-tests
opencobol
misfire-instruction
record-locking
typography
mosix
latex-suite
outlook-object-model
ftpwebrequest
ntdll
junit-rule
event-propagation
beep
pdf-reader
wxperl
peoplepicker
llblgen
versions
carbon-emacs
onresize
cross-cutting-concerns
j++
ironpython-studio

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App