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

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
What happens when an application (desktop/game) hangs or it is forced to be closed, or when electricity fails?
Get Claims from STS in DesktopApp (active)
storing software information locally
What are the books/blogs on CAD/CAE software development?

Categories

HOME
asp.net
youtube-api
javafx
abc
postsharp
coordinates
css-selectors
aggregation-framework
atlassian-fisheye
comments
symfony-3.2
google-my-business-api
vichuploaderbundle
adroitlogic
solidity
mongodb-replica-set
tmux
aggregate
jquery-easyui
alert
bootstrap-datetimepicker
ampscript
url-parameters
android-wifi
screen-scraping
devexpress-mvc
handle
bootstrap-accordion
policy
core-animation
symlink
setup-project
uibarbuttonitem
jms-topic
overflow
visual-studio-debugging
traitsui
certbot
mkdir
repeat
linkurious
aspose.pdf
compiler-warnings
amazon-fire-tv
serverless-architecture
reloaddata
tsc
was
lattice
blitz3d
portaudio
consolidation
tinybox2
encode
kramdown
bioconductor
consul-template
android-filterable
httpmodule
genero
nfa
chunks
aiff
mind-manager
sync
go-gin
selenium-grid2
drawable
opencobol
new-operator
flask-mongoengine
codio
node-amqp
mahara
xml-validation
raddatepicker
typography
jython-2.5
magicsuggest
auctex
phone-state-listener
urlfetch
xcode4.6.3
databus
erlide
towerjs
project-files
joomla1.7
discussion-board
log-shipping
execjs
javah
rollover
datarelation
text-manipulation
jquery-attributes
for-xml
large-data-volumes
carbon-emacs
manuals
software-update
office-2003

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