Node Webkit basics
// Only add setZeroTimeout to the window object, and hide
// everything else in a closure.
(function() {
var timeouts = [];
var messageName = "zero-timeout-message";
// Like setTimeout, but only takes a function argument.
// There's no time argument (always 0) and no function's arguments
// (you have to use a closure if such arguments are necessary).
function setZeroTimeout(fn) {
timeouts.push(fn);
window.postMessage(messageName, "*");
}
function handleMessage(event) {
if (event.source == window && event.data == messageName) {
event.stopPropagation();
if (timeouts.length > 0) {
var fn = timeouts.shift();
fn();
}
}
}
window.addEventListener("message", handleMessage, true);
// Add the one thing we want added to the window object.
window.setZeroTimeout = setZeroTimeout;
})();
// Load native UI library.
var gui = require('nw.gui');
var option = {
key : "Ctrl+Shift+A",
active : function() {
console.log("Global desktop keyboard shortcut: " + this.key + " active.");
},
failed : function(msg) {
// :(, fail to register the |key| or couldn't parse the |key|.
console.log(msg);
}
};
// Create a shortcut with |option|.
var shortcut = new gui.Shortcut(option);
// Register global desktop shortcut, which can work without focus.
gui.App.registerGlobalHotKey(shortcut);
// If register |shortcut| successfully and user struck "Ctrl+Shift+A", |shortcut|
// will get an "active" event.
// You can also add listener to shortcut's active and failed event.
shortcut.on('active', function() {
console.log("Global desktop keyboard shortcut: " + this.key + " active.");
});
// Load native UI library
var gui = require('nw.gui'); //or global.window.nwDispatcher.requireNwGui() (see https://github.com/rogerwang/node-webkit/issues/707)
// Get the current window
var win = gui.Window.get();
// Listen to the minimize event
win.on('minimize', function() {
console.log('Window is minimized');
});
// Minimize the window
win.minimize();
// Unlisten the minimize event
win.removeAllListeners('minimize');
// Create a new window and get it
var new_win = gui.Window.open('https://github.com');
// And listen to new window's focus event
new_win.on('focus', function() {
console.log('New window is focused');
});
var NW = require('nw.gui');
// Extend application menu for Mac OS
if (process.platform == "darwin") {
var menu = new NW.Menu({type: "menubar"});
menu.createMacBuiltin && menu.createMacBuiltin(window.document.title);
NW.Window.get().menu = menu;
}
var $ = function (selector) {
return document.querySelector(selector);
}
document.addEventListener('DOMContentLoaded', function() {
$('#simple-coffee').addEventListener('click', function (event) {
showNotification("./icons/coffee.png", "Your coffee", 'is ready...')
});
$('#simple-camera').addEventListener('click', function (event) {
var notif = showNotification("./icons/camera.png", "Camera", 'example notification');
setTimeout(function () {
notif.close();
}, 1200);
});
$('#simple-car').addEventListener('click', function (event) {
showNotification('./icons/car.png', "Taxi is arrived", 'hurry up');
});
$('#node-notifier-coffee').addEventListener('click', function (event) {
showNativeNotification("./icons/coffee.png", "Your coffee", 'is ready...', 'default')
});
$('#node-notifier-camera').addEventListener('click', function (event) {
showNativeNotification("./icons/camera.png", "Camera", 'example notification', 'Glass');
});
$('#node-notifier-car').addEventListener('click', function (event) {
showNativeNotification(false, "Taxi is arrived", 'hurry up', false, './icons/car.png');
});
$('#nw-notify-coffee').addEventListener('click', function (event) {
showHtmlNotification("./icons/coffee.png", "Your coffee", 'is ready...');
});
$('#nw-notify-camera').addEventListener('click', function (event) {
showHtmlNotification("./icons/camera.png", "Camera", 'example notification', function (event) {
setTimeout(function () {
console.log("closing notification on timeout", event)
event.closeNotification();
}, 1200);
});
});
$('#nw-notify-car').addEventListener('click', function (event) {
showHtmlNotification('./icons/car.png', "Taxi is arrived", 'hurry up');
});
// bring window to front when open via terminal
NW.Window.get().focus();
// for nw-notify frameless windows
NW.Window.get().on('close', function() {
NW.App.quit();
});
});
var writeLog = function (msg) {
var logElement = $("#output");
logElement.innerHTML += msg + "<br>";
logElement.scrollTop = logElement.scrollHeight;
};
// NW.JS Notification
var showNotification = function (icon, title, body) {
if (icon && icon.match(/^\./)) {
icon = icon.replace('.', 'file://' + process.cwd());
}
var notification = new Notification(title, {icon: icon, body: body});
notification.onclick = function () {
writeLog("Notification clicked");
};
notification.onclose = function () {
writeLog("Notification closed");
NW.Window.get().focus();
};
notification.onshow = function () {
writeLog("-----<br>" + title);
};
return notification;
}
// NODE-NOTIFIER
var showNativeNotification = function (icon, title, message, sound, image) {
var notifier;
try {
notifier = require('node-notifier');
} catch (error) {
console.error(error);
if (error.message == "Cannot find module 'node-notifier'") {
window.alert("Can not load module 'node-notifier'.\nPlease run 'npm install'");
}
return false;
}
var path = require('path');
icon = icon ? path.join(process.cwd(), icon) : undefined;
image = image ? path.join(process.cwd(), image) : undefined;
notifier.notify({
title: title,
message: message,
icon: icon,
appIcon: icon,
contentImage: image,
sound: sound,
wait: false,
sender: 'org.nwjs.sample.notifications'
}, function (err, response) {
if (response == "Activate\n") {
writeLog("node-notifier: notification clicked");
NW.Window.get().focus();
}
});
writeLog("-----<br>node-notifier: " + title);
};
// NW-NOTIFY
var showHtmlNotification = function (icon, title, body, callback) {
var notifier;
try {
notifier = require('nw-notify');
} catch (error) {
console.error(error);
if (error.message == "Cannot find module 'nw-notify'") {
window.alert("Can not load module 'nw-notify'.\nPlease run 'npm install'");
return false;
}
}
// give it nice look
notifier.setConfig({
defaultStyleContainer: {
border: '1px solid #9D9D9D',
borderRadius: '6px',
backgroundColor: 'rgba(245, 245, 245, 0.94)',
fontFamily: 'Helvetica Neue',
boxShadow: '0px 0px 11px rgba(0, 0, 0, 0.4)',
fontSize: 12,
position: 'relative',
lineHeight: '17px',
padding: '8px 12px 8px 14px'
}
});
if (icon) icon = notifier.getAppPath() + icon;
notifier.notify({
title: title,
text: body,
iconPath: icon,
onShowFunc: function (event) {
if (callback) callback(event);
writeLog("-----<br>nw-notify: " + title);
},
onClickFunc: function (event) {
writeLog("nw-notify notification clicked");
},
onCloseFunc: function (event) {
if (event.event == 'close') {
writeLog("nw-notify notification closed ");
}
}
});
};
var options = {
icon: "http://yourimage.jpg",
body: "Here is the notification text"
};
var notification = new Notification("Notification Title",options);
notification.onclick = function () {
document.getElementById("output").innerHTML += "Notification clicked";
}
notification.onshow = function () {
// play sound on show
myAud=document.getElementById("audio1");
myAud.play();
// auto close after 1 second
setTimeout(function() {notification.close();}, 1000);
}
<html>
<head>
<title> Menu </title>
</head>
<body>
<script>
// Load native UI library
var gui = require('nw.gui');
// Create an empty menu
var menu = new gui.Menu();
// Add some items with label
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));
// Remove one item
menu.removeAt(1);
// Iterate menu's items
for (var i = 0; i < menu.items.length; ++i) {
console.log(menu.items[i]);
}
// Add a item and bind a callback to item
menu.append(new gui.MenuItem({
label: 'Click Me',
click: function() {
// Create element in html body
var element = document.createElement('div');
element.appendChild(document.createTextNode('Clicked OK'));
document.body.appendChild(element);
}
}));
// Popup as context menu
document.body.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
// Popup at place you click
menu.popup(ev.x, ev.y);
return false;
}, false);
// Get the current window
var win = gui.Window.get();
// Create a menubar for window menu
var menubar = new gui.Menu({ type: 'menubar' });
// Create a menuitem
var sub1 = new gui.Menu();
sub1.append(new gui.MenuItem({
label: 'Test1',
click: function() {
var element = document.createElement('div');
element.appendChild(document.createTextNode('Test 1'));
document.body.appendChild(element);
}
}));
// You can have submenu!
menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1}));
//assign the menubar to window menu
win.menu = menubar;
// add a click event to an existing menuItem
menu.items[0].click = function() {
console.log("CLICK");
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>webRTC Test</title>
</head>
<body onload="init();" style="background-color:#ababab;" >
<div style="width:352px; height:625px; margin:0 auto; background-color:#fff;" >
<div>
<video id="camFeed" width="320" height="240" autoplay>
</video>
</div>
<div>
<canvas id="photo" width="320" height="240">
</canvas>
</div>
<div style="margin:0 auto; width:82px;">
<input type="button" value="Take Photo" onclick="takePhoto();">
</div>
</div>
<script>
function init()
{
if(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia({video:true}, onSuccess, onFail);
}
else
{
alert('webRTC not available');
}
}
function onSuccess(stream)
{
document.getElementById('camFeed').src = webkitURL.createObjectURL(stream);
}
function onFail()
{
alert('could not connect stream');
}
function takePhoto()
{
var c = document.getElementById('photo');
var v = document.getElementById('camFeed');
c.getContext('2d').drawImage(v, 0, 0, 320, 240);
}
</script>
</body>
</html>
var files = $('#fileDialog')[0].files;
for (var i = 0; i < files.length; ++i)
console.log(files[i].name);
<script>
function chooseFile(name) {
var chooser = document.querySelector(name);
chooser.addEventListener("change", function(evt) {
console.log(this.value);
}, false);
chooser.click();
}
chooseFile('#fileDialog');
</script>
// Load native UI library.
var gui = require('nw.gui');
// Open URL with default browser.
gui.Shell.openExternal('https://github.com/rogerwang/node-webkit');
// Open a text file with default text editor.
gui.Shell.openItem('test.txt');
// Open a file in file explorer.
gui.Shell.showItemInFolder('test.txt');
holder.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
};
console.log(file);
reader.readAsDataURL(file);
return false;
};
<html>
<body>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<div id="holder"></div>
<script>
// prevent default behavior from changing page on dropped file
window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragleave = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
e.preventDefault();
for (var i = 0; i < e.dataTransfer.files.length; ++i) {
console.log(e.dataTransfer.files[i].path);
}
return false;
};
</script>
</body>
</html>
// Load native UI library
var gui = require('nw.gui');
// We can not create a clipboard, we have to receive the system clipboard
var clipboard = gui.Clipboard.get();
// Read from clipboard
var text = clipboard.get('text');
console.log(text);
// Or write something
clipboard.set('I love node-webkit :)', 'text');
// And clear it!
clipboard.clear();
<html>
<body>
<script>
// get the system platform using node.js
var os = require('os')
document.write('Our computer is: ', os.platform())
</script>
</body>
</html>
# Node.JS basics