mirror of
https://github.com/finos/SymphonyElectron.git
synced 2024-12-29 02:11:28 -06:00
301 lines
10 KiB
HTML
301 lines
10 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
table, th, td {
|
|
padding: 5px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</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>Change language:<p>
|
|
<button id='set-locale-en-US'>Change language to English - US</button>
|
|
<button id='set-locale-ja-JP'>Change language to Japanese</button>
|
|
<button id='set-locale-fr-FR'>Change language to French</button>
|
|
<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'>Open screen picker & screensharing indicator</button>
|
|
<br>
|
|
<video id='video' autoPlay loop muted style='max-width: 640px'></video>
|
|
|
|
<hr>
|
|
<p>Get Version Info:</p>
|
|
<button id='get-version'>get version info</button>
|
|
<br>
|
|
Version Info:
|
|
<table >
|
|
<tr>
|
|
<th>API Version</th>
|
|
<th>Container Identifier</th>
|
|
<th>Container Version</th>
|
|
<th>Build Number</th>
|
|
<th>Search Api Version</th>
|
|
</tr>
|
|
<tr>
|
|
<td id="api-version"></td>
|
|
<td id="container-identifier"></td>
|
|
<td id="container-ver"></td>
|
|
<td id="build-number"></td>
|
|
<td id="search-api-ver"></td>
|
|
</tr>
|
|
</table>
|
|
</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.message);
|
|
}
|
|
});
|
|
|
|
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.getMediaSource({types: ['window', 'screen']}, function(error, source) {
|
|
if (error) throw error;
|
|
navigator.webkitGetUserMedia({
|
|
audio: false,
|
|
video: {
|
|
mandatory: {
|
|
chromeMediaSource: 'desktop',
|
|
chromeMediaSourceId: source.id,
|
|
minWidth: 1280,
|
|
maxWidth: 1280,
|
|
minHeight: 720,
|
|
maxHeight: 720
|
|
}
|
|
}
|
|
}, stream => {
|
|
handleStream(stream, source.display_id);
|
|
}, handleError)
|
|
});
|
|
});
|
|
|
|
function handleStream(stream, displayId) {
|
|
document.getElementById('video').srcObject = stream;
|
|
ssf.showScreenSharingIndicator({
|
|
stream,
|
|
displayId
|
|
}, function(event) {
|
|
console.log('screen-sharing-indicator callback', event);
|
|
if (event.type === 'stopRequested') {
|
|
stream.getVideoTracks().forEach(t => t.stop());
|
|
document.getElementById('video').srcObject = null;
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleError (e) {
|
|
console.log(e)
|
|
}
|
|
|
|
var getVersionInfo = document.getElementById('get-version');
|
|
getVersionInfo.addEventListener('click', function() {
|
|
ssf.getVersionInfo().then(function(verInfo) {
|
|
let apiVersionInfo = document.getElementById('api-version');
|
|
let containerIdentifier = document.getElementById('container-identifier');
|
|
let version = document.getElementById('container-ver');
|
|
let buildNumber = document.getElementById('build-number');
|
|
let searchApiVer = document.getElementById('search-api-ver');
|
|
|
|
apiVersionInfo.innerText = verInfo.apiVer;
|
|
containerIdentifier.innerText = verInfo.containerIdentifier;
|
|
version.innerText = verInfo.containerVer;
|
|
buildNumber.innerText = verInfo.buildNumber;
|
|
searchApiVer.innerText = verInfo.searchApiVer;
|
|
});
|
|
});
|
|
|
|
var setLocaleToEn = document.getElementById('set-locale-en-US');
|
|
setLocaleToEn.addEventListener('click', function () {
|
|
ssf.setLocale('en-US');
|
|
document.location.reload();
|
|
});
|
|
var setLocaleToJa = document.getElementById('set-locale-ja-JP');
|
|
setLocaleToJa.addEventListener('click', function () {
|
|
ssf.setLocale('ja-JP');
|
|
document.location.reload();
|
|
});
|
|
var setLocaleToFr = document.getElementById('set-locale-fr-FR');
|
|
setLocaleToFr.addEventListener('click', function () {
|
|
ssf.setLocale('fr-FR');
|
|
document.location.reload();
|
|
});
|
|
|
|
</script>
|
|
</html>
|