SymphonyElectron/demo/index.html

234 lines
7.5 KiB
HTML

<html>
<head>
</head>
<body>
<h1>Symphony Electron API Demo</h1>
<hr>
<p>Notifications:<p>
<button id='notf'>show notification</button>
<p>
<label for='title'>title:</label>
<input type='text' id='title' value='Notification Demo'/>
</p>
<p>
<label for='body'>body:</label>
<input type='text' id='body' value='Some message'/>
</p>
<p>
<label for='image'>image url:</label>
<input type='text' id='image' value='https://avatars0.githubusercontent.com/u/13243259?v=4&s=460'/>
</p>
<p>
<label for='company'>company:</label>
<input type='text' id='company' value='Symphony'/>
</p>
<p>
<label for='flash'>flash:</label>
<input type='checkbox' id='flash'/>
</p>
<p>
<label for='sticky'>sticky:</label>
<input type='checkbox' id='sticky'/>
</p>
<p>
<label for='color'>color:</label>
<input type='text' id='color' value='white'/>
</p>
<p>
<label for='tag'>tag:</label>
<input type='text' id='tag' value=''/>
</p>
<button id='open-config-win'>Open configure window</button>
<br>
<hr>
<p>
Crash Process:
<p>
<button id='crash'>Crash Renderer</button>
</p>
<br>
<hr>
<p>Badge Count:<p>
<button id='inc-badge'>increment badge count</button>
<br>
<button id='clear-badge'>clear badge count</button>
<br>
<hr>
<p>Screen Snippet:</p>
<button id='snippet'>get snippet</button>
<p>snippet output:</p>
<image id='snippet-img'/>
<hr>
<p>Window activate:</p>
<button id='open-win'>open window</button>
<button id='bring-to-front'>bring open window to front</button>
<hr>
<p>Get Media Sources:</p>
<button id='get-sources'>get entire desktop</button>
<br>
<video id='video'></video>
<hr>
<p>Get Version Info:</p>
<button id='get-version'>get version info</button>
<br>
Version Info:<span id='info'></span>
</body>
<script>
var openConfigWin = document.getElementById('open-config-win');
openConfigWin.addEventListener('click', function() {
ssf.showNotificationSettings();
});
var notfEl = document.getElementById('notf');
var num = 0;
// note: notification will close when clicked
notfEl.addEventListener('click', function() {
var title = document.getElementById('title').value;
var body = document.getElementById('body').value;
var imageUrl = document.getElementById('image').value;
var shouldFlash = document.getElementById('flash').checked;
var shouldStick = document.getElementById('sticky').checked;
var color = document.getElementById('color').value;
var tag = document.getElementById('tag').value;
var company = document.getElementById('company').value;
num++;
var notf = new ssf.Notification(title, {
body: (body + ' num=' + num + ' tag=' + tag),
image: imageUrl,
flash: shouldFlash,
color: color || 'white',
sticky: shouldStick,
data: {
hello: 'hello word'
},
tag: tag,
company: company
});
notf.addEventListener('click', onclick);
function onclick(event) {
event.target.close();
alert('notification clicked: ' + event.target.data.hello);
}
notf.addEventListener('close', onclose);
function onclose() {
alert('notification closed');
};
notf.addEventListener('error', onerror);
function onerror(event) {
alert('error=' + event.result);
};
});
var badgeCount = 0;
var incBadgeEl = document.getElementById('inc-badge');
incBadgeEl.addEventListener('click', function() {
badgeCount++;
ssf.setBadgeCount(badgeCount);
});
var incBadgeEl = document.getElementById('clear-badge');
incBadgeEl.addEventListener('click', function() {
badgeCount = 0;
ssf.setBadgeCount(0);
});
var snippetButton = document.getElementById('snippet');
snippetButton.addEventListener('click', function() {
let snippet = new ssf.ScreenSnippet();
snippet
.capture()
.then(gotSnippet)
.catch(snippetError);
function gotSnippet(rsp) {
if (rsp && rsp.data && rsp.type) {
var dataUrl = 'data:' + rsp.type + ',' + rsp.data;
var img = document.getElementById('snippet-img');
img.src = dataUrl;
}
}
function snippetError(err) {
alert('error getting snippet' + err);
}
});
var win;
var openWinButton = document.getElementById('open-win');
openWinButton.addEventListener('click', function() {
win = window.open('win.html?x=100&y=100', 'test-window', 'height=800,width=400');
});
var front = document.getElementById('bring-to-front');
front.addEventListener('click', function() {
window.ssf.activate(win.name);
});
// register callback to be notified when size/position changes for win.
ssf.registerBoundsChange(onBoundsChange);
function onBoundsChange(arg) {
console.log('bounds changed for=', arg)
}
// crash the renderer process
const crash = document.getElementById('crash');
crash.addEventListener('click', function () {
ssf.crashRendererProcess();
});
var getSources = document.getElementById('get-sources');
getSources.addEventListener('click', function() {
ssf.getMediaSources({types: ['window', 'screen']}, function(error, sources) {
if (error) throw error
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sources[0].id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}, handleStream, handleError)
});
});
function handleStream (stream) {
document.querySelector('video').src = URL.createObjectURL(stream)
}
function handleError (e) {
console.log(e)
}
var getSources = document.getElementById('get-version');
getSources.addEventListener('click', function() {
ssf.getVersionInfo().then(function(verInfo) {
var verEl = document.getElementById('info');
verEl.innerText = '\napi ver=' + verInfo.apiVer +
'\ncontainer identifier=' + verInfo.containerIdentifier +
'\ncontainer ver=' + verInfo.containerVer
})
});
</script>
</html>