Merge branch 'main' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib
This commit is contained in:
commit
43e69365e0
2
.gitignore
vendored
2
.gitignore
vendored
@ -84,3 +84,5 @@ typings/
|
|||||||
/doc/out/*
|
/doc/out/*
|
||||||
**/thumbnails
|
**/thumbnails
|
||||||
**/thumbnail.png
|
**/thumbnail.png
|
||||||
|
/site/dist
|
||||||
|
/site/__pycache__
|
||||||
13
bin/browser.sh
Executable file
13
bin/browser.sh
Executable file
@ -0,0 +1,13 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
if [ "$1" = "dist" ]
|
||||||
|
then
|
||||||
|
if [ -z "$2" ]
|
||||||
|
then
|
||||||
|
npm run package-all
|
||||||
|
else
|
||||||
|
npm run package-app-$2
|
||||||
|
fi
|
||||||
|
else
|
||||||
|
electron . ./lib/index.html
|
||||||
|
fi
|
||||||
289
browser/browser.html
Normal file
289
browser/browser.html
Normal file
@ -0,0 +1,289 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar { display: none; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 22pt;
|
||||||
|
-webkit-tap-highlight-color: #ccc;
|
||||||
|
background-color: #DDD;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
/* https://davidwalsh.name/font-smoothing */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progressBar {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(165, 165, 196);
|
||||||
|
width: 0%;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
width: 100%;
|
||||||
|
margin: 3px;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<title>
|
||||||
|
Browser
|
||||||
|
</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="width: 100%; height: 100%; -webkit-app-region: no-drag">
|
||||||
|
<header id="header" style="-webkit-app-region: drag">
|
||||||
|
<div id="progressBar"></div>
|
||||||
|
<span id="info">Minimal Header</span>
|
||||||
|
</header>
|
||||||
|
<main></main>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
const { ipcRenderer } = require("electron")
|
||||||
|
|
||||||
|
let urls = new Set()
|
||||||
|
let favicons = new Set()
|
||||||
|
let progress = 0
|
||||||
|
|
||||||
|
info.innerHTML = window.location.href
|
||||||
|
|
||||||
|
function notify(url) {
|
||||||
|
if (urls.has(url)) return
|
||||||
|
console.log(url)
|
||||||
|
//header.innerHTML += `<p>${url}</p>`
|
||||||
|
urls.add(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
let colorExtractorCanvas = document.createElement('canvas')
|
||||||
|
let colorExtractorContext = colorExtractorCanvas.getContext('2d')
|
||||||
|
let colorExtractorImage = document.createElement('img')
|
||||||
|
|
||||||
|
function getColor(url, callback) {
|
||||||
|
colorExtractorImage.onload = function (e) {
|
||||||
|
let w = colorExtractorImage.width
|
||||||
|
let h = colorExtractorImage.height
|
||||||
|
colorExtractorCanvas.width = w
|
||||||
|
colorExtractorCanvas.height = h
|
||||||
|
let offset = Math.max(1, Math.round(0.00032 * w * h))
|
||||||
|
colorExtractorContext.drawImage(colorExtractorImage, 0, 0, w, h)
|
||||||
|
let data = colorExtractorContext.getImageData(0, 0, w, h).data
|
||||||
|
let pixels = {}
|
||||||
|
let d, add, sum
|
||||||
|
for (let i = 0; i < data.length; i += 4 * offset) {
|
||||||
|
d = Math.round(data[i] / 5) * 5 + ',' + Math.round(data[i + 1] / 5) * 5 + ',' + Math.round(data[i + 2] / 5) * 5
|
||||||
|
add = 1
|
||||||
|
sum = data[i] + data[i + 1] + data[i + 2]
|
||||||
|
// very dark or light pixels shouldn't be counted as heavily
|
||||||
|
if (sum < 310) {
|
||||||
|
add = 0.35
|
||||||
|
}
|
||||||
|
if (sum < 50) {
|
||||||
|
add = 0.01
|
||||||
|
}
|
||||||
|
if (data[i] > 210 || data[i + 1] > 210 || data[i + 2] > 210) {
|
||||||
|
add = 0.5 - (0.0001 * sum)
|
||||||
|
}
|
||||||
|
if (pixels[d]) {
|
||||||
|
pixels[d] = pixels[d] + add
|
||||||
|
} else {
|
||||||
|
pixels[d] = add
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// find the largest pixel set
|
||||||
|
let largestPixelSet = null
|
||||||
|
let ct = 0
|
||||||
|
for (let k in pixels) {
|
||||||
|
if (k === '255,255,255' || k === '0,0,0') {
|
||||||
|
pixels[k] *= 0.05
|
||||||
|
}
|
||||||
|
if (pixels[k] > ct) {
|
||||||
|
largestPixelSet = k
|
||||||
|
ct = pixels[k]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let res = largestPixelSet.split(',')
|
||||||
|
|
||||||
|
for (let i = 0; i < res.length; i++) {
|
||||||
|
res[i] = parseInt(res[i])
|
||||||
|
}
|
||||||
|
callback(res)
|
||||||
|
}
|
||||||
|
colorExtractorImage.src = url
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTextColor(bgColor) {
|
||||||
|
let output = runNetwork(bgColor)
|
||||||
|
if (output.black > 0.5) {
|
||||||
|
return 'black'
|
||||||
|
}
|
||||||
|
return 'white'
|
||||||
|
}
|
||||||
|
|
||||||
|
var runNetwork = function anonymous(input) {
|
||||||
|
var net = {
|
||||||
|
'layers': [{
|
||||||
|
'r': {},
|
||||||
|
'g': {},
|
||||||
|
'b': {}
|
||||||
|
}, {
|
||||||
|
'0': {
|
||||||
|
'bias': 14.176907520571566,
|
||||||
|
'weights': {
|
||||||
|
'r': -3.2764240497480652,
|
||||||
|
'g': -16.90247884718719,
|
||||||
|
'b': -2.9976364179397814
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'1': {
|
||||||
|
'bias': 9.086071102351246,
|
||||||
|
'weights': {
|
||||||
|
'r': -4.327474143397604,
|
||||||
|
'g': -15.780660155750773,
|
||||||
|
'b': 2.879230202567851
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'2': {
|
||||||
|
'bias': 22.274487339773476,
|
||||||
|
'weights': {
|
||||||
|
'r': -3.5830205067960965,
|
||||||
|
'g': -25.498384261673618,
|
||||||
|
'b': -6.998329189107962
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
'black': {
|
||||||
|
'bias': 17.873962570788997,
|
||||||
|
'weights': {
|
||||||
|
'0': -15.542217788633987,
|
||||||
|
'1': -13.377152708685674,
|
||||||
|
'2': -24.52215186113144
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
'outputLookup': true,
|
||||||
|
'inputLookup': true
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 1; i < net.layers.length; i++) {
|
||||||
|
var layer = net.layers[i]
|
||||||
|
var output = {}
|
||||||
|
|
||||||
|
for (var id in layer) {
|
||||||
|
var node = layer[id]
|
||||||
|
var sum = node.bias
|
||||||
|
|
||||||
|
for (var iid in node.weights) {
|
||||||
|
sum += node.weights[iid] * input[iid]
|
||||||
|
}
|
||||||
|
output[id] = (1 / (1 + Math.exp(-sum)))
|
||||||
|
}
|
||||||
|
input = output
|
||||||
|
}
|
||||||
|
return output
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyColors(backgroundColor, foregroundColor) {
|
||||||
|
console.log("applyColors", backgroundColor, foregroundColor)
|
||||||
|
progressBar.style.backgroundColor = backgroundColor
|
||||||
|
info.style.color = foregroundColor
|
||||||
|
}
|
||||||
|
|
||||||
|
ipcRenderer.on('title', (sender, title) => {
|
||||||
|
info.innerHTML = title
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('favicons', (sender, urls) => {
|
||||||
|
console.log("favicons event", urls)
|
||||||
|
for (let url of urls) {
|
||||||
|
if (!favicons.has(url)) {
|
||||||
|
getColor(url, c => {
|
||||||
|
let cr = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')'
|
||||||
|
let obj = {
|
||||||
|
r: c[0] / 255,
|
||||||
|
g: c[1] / 255,
|
||||||
|
b: c[2] / 255
|
||||||
|
}
|
||||||
|
let textclr = getTextColor(obj)
|
||||||
|
applyColors(cr, textclr)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
favicons.add(url)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('progress', (sender, amount) => {
|
||||||
|
console.log("progress event", amount)
|
||||||
|
if (amount > progress) {
|
||||||
|
progress = Math.min(amount, 1)
|
||||||
|
}
|
||||||
|
progressBar.style.width = Math.round(progress * 100) + '%'
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('did-start-loading', (sender, url) => {
|
||||||
|
console.log('did-start-loading', url)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('did-get-response-details', (sender, info) => {
|
||||||
|
let {
|
||||||
|
status, newURL, originalURL,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers,
|
||||||
|
resourceType
|
||||||
|
} = info
|
||||||
|
notify(newURL)
|
||||||
|
notify(originalURL)
|
||||||
|
//console.log('did-get-response-details', info)
|
||||||
|
})
|
||||||
|
ipcRenderer.on('did-get-redirect-request', (sender, info) => {
|
||||||
|
let { oldURL,
|
||||||
|
newURL,
|
||||||
|
isMainFrame,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers
|
||||||
|
} = info
|
||||||
|
notify(newURL)
|
||||||
|
notify(oldURL)
|
||||||
|
//console.log('did-get-response-details', info)
|
||||||
|
})
|
||||||
|
ipcRenderer.on('did-stop-loading', (sender, info) => {
|
||||||
|
//console.log('did-stop-loading', info)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
49
browser/carlo.js
Normal file
49
browser/carlo.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
const carlo = require('carlo');
|
||||||
|
const fse = require('fs-extra');
|
||||||
|
const urlExists = require('url-exists');
|
||||||
|
|
||||||
|
// command line arguments
|
||||||
|
let path = 'index.html'
|
||||||
|
process.argv.forEach((value, index, array) => {
|
||||||
|
if (index === 2) {
|
||||||
|
path = value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
// Launch the browser.
|
||||||
|
const opts = {}
|
||||||
|
|
||||||
|
// Set path to custom chrome
|
||||||
|
const chrome = `${__dirname}/../chrome/chrome.exe`
|
||||||
|
if (fse.pathExistsSync(chrome)) {
|
||||||
|
opts.executablePath = chrome
|
||||||
|
}
|
||||||
|
|
||||||
|
// Launch app
|
||||||
|
const app = await carlo.launch(opts)
|
||||||
|
|
||||||
|
// Terminate Node.js process on app window closing.
|
||||||
|
app.on('exit', () => process.exit())
|
||||||
|
|
||||||
|
// Tell carlo where your web files are located.
|
||||||
|
app.serveFolder(`${__dirname}/../`)
|
||||||
|
|
||||||
|
// Check if URL exists
|
||||||
|
urlExists('https://localhost:8443', async (error, exists) => {
|
||||||
|
|
||||||
|
if (exists) {
|
||||||
|
console.info('Serve files via server')
|
||||||
|
app.serveOrigin('https://localhost:8443') // Optional
|
||||||
|
} else {
|
||||||
|
console.info('Serve files from file system')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Expose 'env' function in the web environment.
|
||||||
|
await app.exposeFunction('env', _ => process.env)
|
||||||
|
|
||||||
|
// Navigate to the main page of your app.
|
||||||
|
console.info('Starting carlo with', path)
|
||||||
|
await app.load(path)
|
||||||
|
})
|
||||||
|
})()
|
||||||
24
browser/i18n.js
Normal file
24
browser/i18n.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
const path = require('path')
|
||||||
|
const electron = require('electron')
|
||||||
|
const fs = require('fs')
|
||||||
|
let loadedLanguage
|
||||||
|
let app = electron.app ? electron.app : electron.remote.app
|
||||||
|
|
||||||
|
module.exports = i18n
|
||||||
|
|
||||||
|
function i18n() {
|
||||||
|
if (fs.existsSync(path.join(__dirname, 'i18n', app.getLocale() + '.js'))) {
|
||||||
|
loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, 'i18n', app.getLocale() + '.js'), 'utf8'))
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, 'i18n', 'en.js'), 'utf8'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i18n.prototype.__ = function(phrase) {
|
||||||
|
let translation = loadedLanguage[phrase]
|
||||||
|
if (translation === undefined) {
|
||||||
|
translation = phrase
|
||||||
|
}
|
||||||
|
return translation
|
||||||
|
}
|
||||||
61
browser/i18n/de.js
Normal file
61
browser/i18n/de.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"edit": "Bearbeiten",
|
||||||
|
"undo": "Widerrufen",
|
||||||
|
"redo": "Wiederholen",
|
||||||
|
"cut": "Ausschneiden",
|
||||||
|
"copy": "Kopieren",
|
||||||
|
"paste": "Einsetzen",
|
||||||
|
"pasteandmatchstyle": "Einsetzen und Stil anpassen",
|
||||||
|
"delete": "Löschen",
|
||||||
|
"selectall": "Alles auswählen",
|
||||||
|
"view": "Darstellung",
|
||||||
|
"reload": "Seite neu laden",
|
||||||
|
"forcereload": "Cache löschen und Seite neu laden",
|
||||||
|
"resetzoom": "Originalgröße",
|
||||||
|
"zoomin": "Vergrößern",
|
||||||
|
"zoomout": "Verkleinern",
|
||||||
|
"togglefullscreen": "Vollbildmodus umschalten",
|
||||||
|
"minimalpad": "Minimal-Pad",
|
||||||
|
"multiuserbrowser": "Mehrbenutzer-Browser",
|
||||||
|
"history": "Verlauf",
|
||||||
|
"back": "Zurück",
|
||||||
|
"forward": "Vorwärts",
|
||||||
|
"home": "Startseite",
|
||||||
|
"recentlyvisited": "Kürzlich besucht",
|
||||||
|
"bookmarks": "Lesezeichen",
|
||||||
|
"localfilesystem": "Lokales Dateisystem",
|
||||||
|
"testframes": "Testseiten",
|
||||||
|
"develop": "Entwickler",
|
||||||
|
"toggledevelopertools": "Webinformationen umschalten",
|
||||||
|
"openprocessmonitor": "Prozessmonitor öffnen",
|
||||||
|
"selectfolder": "Datenverzeichnis auswählen...",
|
||||||
|
"selectfolder.noadmin.ok": "OK",
|
||||||
|
"selectfolder.noadmin.message": "Keine ausreichenden Berechtigungen",
|
||||||
|
"selectfolder.noadmin.detail": "Um das Datenverzeichnis zu ändern, muss der IWM Browser mit Administrator-Berechtigungen gestartet werden.",
|
||||||
|
"selectfolder.warning.next": "Weiter",
|
||||||
|
"selectfolder.warning.cancel": "Abbrechen",
|
||||||
|
"selectfolder.warning.message": "Datenverzeichnis vorhanden",
|
||||||
|
"selectfolder.warning.detail": "Ihr IWM Browser besitzt bereits ein (verlinktes) Datenverzeichnis. Wenn Sie fortfahren, wird das alte Verzeichnis gesichert und ein neues wird erstellt.",
|
||||||
|
"selectfolder.select.title": "Datenverzeichnis wählen",
|
||||||
|
"selectfolder.select.buttonLabel": "Auswählen",
|
||||||
|
"selectfolder.samefolder.ok": "OK",
|
||||||
|
"selectfolder.samefolder.message": "Ungültiges Datenverzeichnis",
|
||||||
|
"selectfolder.samefolder.detail.same": "Das alte Datenverzeichnis darf nicht als neues Verzeichnis ausgewählt werden.",
|
||||||
|
"selectfolder.samefolder.detail.within": "Das neue Datenverzeichnis darf sich nicht innerhalb des alten Verzeichnisses befinden.",
|
||||||
|
"selectfolder.info.ok": "OK",
|
||||||
|
"selectfolder.info.message": "Link auf Datenverzeichnis erstellt",
|
||||||
|
"selectfolder.info.detail": "Der IWM Browser verwendet nun den Ordner \"${0}\" als neues Datenverzeichnis.",
|
||||||
|
"startserver": "Starte Server",
|
||||||
|
"stopserver": "Stoppe Server",
|
||||||
|
"runloadtests": "Starte Ladetests",
|
||||||
|
"window": "Fenster",
|
||||||
|
"close": "Fenster schließen",
|
||||||
|
"minimize": "Im Dock ablegen",
|
||||||
|
"zoom": "Zoomen",
|
||||||
|
"front": "Alle nach vorne bringen",
|
||||||
|
"screenshot": "Bildschirmfoto erstellen",
|
||||||
|
"help": "Hilfe",
|
||||||
|
"iwm": "Leibniz-Institut für Wissensmedien",
|
||||||
|
"about": "Über IWM Browser",
|
||||||
|
"quit": "IWM Browser beenden"
|
||||||
|
}
|
||||||
61
browser/i18n/en.js
Normal file
61
browser/i18n/en.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
{
|
||||||
|
"edit": "Edit",
|
||||||
|
"undo": "Undo",
|
||||||
|
"redo": "Redo",
|
||||||
|
"cut": "Cut",
|
||||||
|
"copy": "Copy",
|
||||||
|
"paste": "Paste",
|
||||||
|
"pasteandmatchstyle": "Paste and Match Style",
|
||||||
|
"delete": "Delete",
|
||||||
|
"selectall": "Select all",
|
||||||
|
"view": "View",
|
||||||
|
"reload": "Reload",
|
||||||
|
"forcereload": "Force Reload",
|
||||||
|
"resetzoom": "Actual size",
|
||||||
|
"zoomin": "Zoom in",
|
||||||
|
"zoomout": "Zoom out",
|
||||||
|
"togglefullscreen": "Toggle Full Screen",
|
||||||
|
"minimalpad": "Minimal Pad",
|
||||||
|
"multiuserbrowser": "Multi-User Browser",
|
||||||
|
"history": "History",
|
||||||
|
"back": "Back",
|
||||||
|
"forward": "Forward",
|
||||||
|
"home": "Home",
|
||||||
|
"recentlyvisited": "Recently Visited",
|
||||||
|
"bookmarks": "Bookmarks",
|
||||||
|
"localfilesystem": "Local Filesystem",
|
||||||
|
"testframes": "Test Frames",
|
||||||
|
"develop": "Develop",
|
||||||
|
"toggledevelopertools": "Toggle Developer Tools",
|
||||||
|
"openprocessmonitor": "Open Process Monitor",
|
||||||
|
"selectfolder": "Select data folder...",
|
||||||
|
"selectfolder.noadmin.ok": "OK",
|
||||||
|
"selectfolder.noadmin.message": "Insufficient permissions",
|
||||||
|
"selectfolder.noadmin.detail": "To change the data directory, the IWM Browser must be started with administrator privileges.",
|
||||||
|
"selectfolder.warning.next": "Next",
|
||||||
|
"selectfolder.warning.cancel": "Cancel",
|
||||||
|
"selectfolder.warning.message": "Data folder exists",
|
||||||
|
"selectfolder.warning.detail": "Your IWM Browser already has a (linked) data directory. If you continue, the old directory is backed up and a new one is created.",
|
||||||
|
"selectfolder.select.title": "Select data folder",
|
||||||
|
"selectfolder.select.buttonLabel": "Select",
|
||||||
|
"selectfolder.samefolder.ok": "OK",
|
||||||
|
"selectfolder.samefolder.message": "Invalid data folder",
|
||||||
|
"selectfolder.samefolder.detail.same": "The old data directory cannot be selected as the new directory.",
|
||||||
|
"selectfolder.samefolder.detail.within": "The new data directory cannot be inside the old directory.",
|
||||||
|
"selectfolder.info.ok": "OK",
|
||||||
|
"selectfolder.info.message": "Created link to data folder",
|
||||||
|
"selectfolder.info.detail": "The IWM Browser now uses the folder \"${0}\" as the new data folder.",
|
||||||
|
"startserver": "Start Server",
|
||||||
|
"stopserver": "Stop Server",
|
||||||
|
"runloadtests": "Run Load Tests",
|
||||||
|
"window": "Window",
|
||||||
|
"close": "Close",
|
||||||
|
"minimize": "Minimize",
|
||||||
|
"zoom": "Zoom",
|
||||||
|
"front": "Bring All to Front",
|
||||||
|
"screenshot": "Make Screenshot",
|
||||||
|
"help": "Help",
|
||||||
|
"iwm": "Leibniz-Institut für Wissensmedien",
|
||||||
|
"about": "About IWM Browser",
|
||||||
|
"quit": "Quit IWM Browser"
|
||||||
|
}
|
||||||
578
browser/main.js
Normal file
578
browser/main.js
Normal file
@ -0,0 +1,578 @@
|
|||||||
|
/* globals require, __dirname, process */
|
||||||
|
/*eslint no-console: ["error", { allow: ["log"] }]*/
|
||||||
|
|
||||||
|
const { app, BrowserWindow, BrowserView, ipcMain, dialog, shell } = require('electron')
|
||||||
|
const electronLocalshortcut = require('electron-localshortcut')
|
||||||
|
//const electron = require('electron')
|
||||||
|
const os = require('os')
|
||||||
|
const fs = require('fs')
|
||||||
|
const path = require('path')
|
||||||
|
const { URL } = require('url')
|
||||||
|
const Store = require('./store.js')
|
||||||
|
const { prettyPrint } = require('html')
|
||||||
|
|
||||||
|
// Use this constant to start the application in kiosk-mode or in development mode
|
||||||
|
const DEVELOPMENT = true
|
||||||
|
// true: Dev-Tools are open
|
||||||
|
// false (KIOSK-Mode): No application switcher, no menu, no taskbar (or dock on a mac), shortcuts are working
|
||||||
|
|
||||||
|
global.multiUserMode = true
|
||||||
|
global.errorCount = 0
|
||||||
|
global.stopTestsOnError = false
|
||||||
|
global.jsonData = { value: null }
|
||||||
|
// UO: Experimental feature using Native Windows
|
||||||
|
global.useBrowserView = false
|
||||||
|
global.useMinimalPad = true
|
||||||
|
global.menu = null
|
||||||
|
global.observeTraffic = false
|
||||||
|
|
||||||
|
// Keep a global reference of the window object, if you don't, the window will
|
||||||
|
// be closed automatically when the JavaScript object is garbage collected.
|
||||||
|
let win
|
||||||
|
let browsers = new Map() // url: BrowserWindow
|
||||||
|
|
||||||
|
const store = new Store({
|
||||||
|
// We'll call our data file 'user-preferences'
|
||||||
|
configName: 'user-preferences',
|
||||||
|
defaults: {
|
||||||
|
url: `file://${__dirname}/index.html`,
|
||||||
|
devTools: DEVELOPMENT,
|
||||||
|
multiUserBrowser: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function createWindow() {
|
||||||
|
|
||||||
|
if (global.observeTraffic) {
|
||||||
|
const {session} = require('electron')
|
||||||
|
session.defaultSession.webRequest.onCompleted((details) => {
|
||||||
|
console.log("onCompleted", details.url)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let { screen } = require('electron')
|
||||||
|
|
||||||
|
let bounds = store.get('storedBounds')
|
||||||
|
? store.get('storedBounds')
|
||||||
|
: screen.getPrimaryDisplay().bounds
|
||||||
|
|
||||||
|
// let displays = screen.getAllDisplays()
|
||||||
|
// let externalDisplay = null
|
||||||
|
|
||||||
|
// externalDisplay = displays[displays.length-1]
|
||||||
|
// const {width, height} =displays[displays.length-1].workAreaSize
|
||||||
|
|
||||||
|
// externalDisplay = displays[0]
|
||||||
|
// const {width, height} =displays[0].workAreaSize
|
||||||
|
|
||||||
|
win = new BrowserWindow({
|
||||||
|
x: bounds.x,
|
||||||
|
y: bounds.y,
|
||||||
|
width: bounds.width,
|
||||||
|
height: bounds.height,
|
||||||
|
fullscreenable: true,
|
||||||
|
fullscreen: !DEVELOPMENT,
|
||||||
|
title: 'IWM Browser',
|
||||||
|
show: false,
|
||||||
|
kiosk: !DEVELOPMENT,
|
||||||
|
acceptFirstMouse: true,
|
||||||
|
webPreferences: {
|
||||||
|
webSecurity: false,
|
||||||
|
allowRunningInsecureContent: true,
|
||||||
|
nodeIntegration: true,
|
||||||
|
webviewTag: true,
|
||||||
|
nativeWindowOpen: true,
|
||||||
|
devTools: true,
|
||||||
|
preload: path.join(__dirname, './preload.js')
|
||||||
|
},
|
||||||
|
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
|
||||||
|
})
|
||||||
|
|
||||||
|
module.exports.win = win
|
||||||
|
|
||||||
|
let url = store.get('url')
|
||||||
|
if (process.argv.length > 2) {
|
||||||
|
let path = process.argv[2]
|
||||||
|
url = `file://${__dirname}/../${path}`
|
||||||
|
console.log('Using process.argv[2]', url)
|
||||||
|
}
|
||||||
|
console.log('Using', url)
|
||||||
|
win.maximize()
|
||||||
|
|
||||||
|
// BAD: All other methods don't work (like ensureFileSync, fileExists...)
|
||||||
|
try {
|
||||||
|
let settings = require('./settings.json')
|
||||||
|
console.log('Using settings', `file://${__dirname}/${settings.url}`)
|
||||||
|
win.loadURL(`file://${__dirname}/${settings.url}`)
|
||||||
|
} catch (ex) {
|
||||||
|
win.loadURL(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { webContents } = win
|
||||||
|
//
|
||||||
|
// if (process.platform === 'win32' && win.isKiosk()) {
|
||||||
|
// webContents.on('did-finish-load', function() {
|
||||||
|
// webContents.executeJavaScript('document.body.style.cursor = "none";')
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Add the app menu
|
||||||
|
let menu = require('./menu.js')
|
||||||
|
global.menu = menu
|
||||||
|
|
||||||
|
// Add global shortcuts
|
||||||
|
// Esc quits the app
|
||||||
|
electronLocalshortcut.register('Esc', () => {
|
||||||
|
app.quit()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Command (Mac) or Control (Win) + K toggles the Kiosk mode
|
||||||
|
electronLocalshortcut.register('CommandOrControl+K', () => {
|
||||||
|
if (win) {
|
||||||
|
win.setKiosk(!win.isKiosk())
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Show if its ready.
|
||||||
|
win.once('ready-to-show', () => {
|
||||||
|
webContents.send('preparePads')
|
||||||
|
win.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Clear cache
|
||||||
|
webContents.session.clearCache(() => console.log('Cache cleared'))
|
||||||
|
|
||||||
|
// Open dev tools when in development mode
|
||||||
|
if (store.get('devTools')) {
|
||||||
|
webContents.openDevTools({ mode: 'right' })
|
||||||
|
} else {
|
||||||
|
webContents.closeDevTools()
|
||||||
|
}
|
||||||
|
|
||||||
|
webContents.on('devtools-opened', () => {
|
||||||
|
store.set('devTools', true)
|
||||||
|
})
|
||||||
|
|
||||||
|
webContents.on('devtools-closed', () => {
|
||||||
|
store.set('devTools', false)
|
||||||
|
})
|
||||||
|
|
||||||
|
webContents.on('did-navigate', (event, url) => {
|
||||||
|
menu.setHistoryStatus()
|
||||||
|
})
|
||||||
|
|
||||||
|
/* UO: At this point we have no access to the event or link position*/
|
||||||
|
|
||||||
|
webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
|
||||||
|
console.log('new-window', global.multiUserMode)
|
||||||
|
if (global.multiUserMode) {
|
||||||
|
event.preventDefault()
|
||||||
|
webContents.send('newPad', url, options.x, options.y)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// WORKAROUND: On windows, if the app was set to fullscreen, the menubar is not hidden
|
||||||
|
if (win.isKiosk()) {
|
||||||
|
win.setMenuBarVisibility(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
win.on('focus', event => {
|
||||||
|
menu.focus()
|
||||||
|
})
|
||||||
|
|
||||||
|
win.on('blur', event => {
|
||||||
|
menu.blur()
|
||||||
|
})
|
||||||
|
|
||||||
|
win.on('enter-full-screen', () => {
|
||||||
|
win.setMenuBarVisibility(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
win.on('leave-full-screen', () => {
|
||||||
|
win.setMenuBarVisibility(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
win.on('enter-html-full-screen', () => {
|
||||||
|
win.setMenuBarVisibility(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
win.on('leave-html-full-screen', () => {
|
||||||
|
win.setMenuBarVisibility(true)
|
||||||
|
})
|
||||||
|
win.on('close', () => {
|
||||||
|
store.set('storedBounds', win.getBounds())
|
||||||
|
})
|
||||||
|
|
||||||
|
// Emitted when the window is closed.
|
||||||
|
win.on('closed', () => {
|
||||||
|
app.quit()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// When work makes progress, show the progress bar
|
||||||
|
function onProgress(progress) {
|
||||||
|
// Use values 0 to 1, or -1 to hide the progress bar
|
||||||
|
try {
|
||||||
|
win.setProgressBar(progress || -1) // Progress bar works on all platforms
|
||||||
|
} catch (e) {
|
||||||
|
if (DEVELOPMENT) console.log(e.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function trySend(target, ...args) {
|
||||||
|
try {
|
||||||
|
target.send(...args)
|
||||||
|
} catch (e) {
|
||||||
|
if (DEVELOPMENT) console.log(e.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openBrowserView(url, x, y) {
|
||||||
|
const useMinBrowser = false // Change this to switch between Min and a custom browser
|
||||||
|
|
||||||
|
const minURL = 'file:///Users/uo/devel/min/index.html'
|
||||||
|
const browserURL = `file://${__dirname}/browser.html`
|
||||||
|
let width = 640
|
||||||
|
let height = 1200
|
||||||
|
let [winWidth, winHeight] = win.getSize()
|
||||||
|
if (x + width > winWidth) {
|
||||||
|
x = winWidth - width
|
||||||
|
}
|
||||||
|
if (y + height > winHeight) {
|
||||||
|
y = winHeight - height
|
||||||
|
}
|
||||||
|
console.log('open browser view')
|
||||||
|
let browser = new BrowserWindow({
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
minWidth: 320,
|
||||||
|
minHeight: 350,
|
||||||
|
titleBarStyle: useMinBrowser ? 'hidden-inset' : 'hidden',
|
||||||
|
frame: process.platform !== 'win32'
|
||||||
|
})
|
||||||
|
let browserContents = browser.webContents
|
||||||
|
browser.setAlwaysOnTop(true)
|
||||||
|
if (useMinBrowser) {
|
||||||
|
browserContents.on('did-finish-load', event => {
|
||||||
|
console.log('did-finish-load', browserContents.getURL())
|
||||||
|
|
||||||
|
browserContents.executeJavaScript(
|
||||||
|
'Object.values(window.webviews.elementMap).map(obj => obj.src)',
|
||||||
|
result => {
|
||||||
|
console.log(
|
||||||
|
'window.webviews',
|
||||||
|
result,
|
||||||
|
url,
|
||||||
|
result.indexOf(url)
|
||||||
|
)
|
||||||
|
if (result.indexOf(url) == -1) {
|
||||||
|
console.log('Adding tab')
|
||||||
|
browserContents.send('addTab', { url })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
browser.loadURL(minURL)
|
||||||
|
} else {
|
||||||
|
console.log('Loading', browserURL)
|
||||||
|
browser.loadURL(browserURL)
|
||||||
|
let view = new BrowserView({
|
||||||
|
webPreferences: {
|
||||||
|
nodeIntegration: false,
|
||||||
|
devTools: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//browserContents.openDevTools({mode: 'right'})
|
||||||
|
|
||||||
|
browser.setBrowserView(view)
|
||||||
|
view.setBounds({ x: 0, y: 24, width: width, height: height - 24 })
|
||||||
|
view.setAutoResize({ width: true, height: true })
|
||||||
|
|
||||||
|
let viewContents = view.webContents
|
||||||
|
let progress = 0
|
||||||
|
|
||||||
|
viewContents.on('page-title-set', event => {
|
||||||
|
console.log('page-title-set', event)
|
||||||
|
})
|
||||||
|
viewContents.on('page-favicon-updated', (event, favicons) => {
|
||||||
|
//console.log("page-favicon-updated", event, favicons)
|
||||||
|
trySend(browserContents, 'favicons', favicons)
|
||||||
|
})
|
||||||
|
|
||||||
|
viewContents.on('did-start-loading', event => {
|
||||||
|
onProgress(0)
|
||||||
|
trySend(browserContents, 'progress', 0)
|
||||||
|
trySend(browserContents, 'did-start-loading')
|
||||||
|
//let senderURL = event.sender.getURL() || url
|
||||||
|
//console.log('did-start-loading', senderURL)
|
||||||
|
})
|
||||||
|
viewContents.on(
|
||||||
|
'did-get-response-details',
|
||||||
|
(
|
||||||
|
event,
|
||||||
|
status,
|
||||||
|
newURL,
|
||||||
|
originalURL,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers,
|
||||||
|
resourceType
|
||||||
|
) => {
|
||||||
|
trySend(browserContents, 'did-get-response-details', {
|
||||||
|
status,
|
||||||
|
newURL,
|
||||||
|
originalURL,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers,
|
||||||
|
resourceType
|
||||||
|
})
|
||||||
|
progress += 0.01
|
||||||
|
onProgress(progress)
|
||||||
|
trySend(browserContents, 'progress', progress)
|
||||||
|
//console.log('did-get-response-details', newURL)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
viewContents.on(
|
||||||
|
'did-get-redirect-request',
|
||||||
|
(
|
||||||
|
event,
|
||||||
|
oldURL,
|
||||||
|
newURL,
|
||||||
|
isMainFrame,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers
|
||||||
|
) => {
|
||||||
|
trySend(browserContents, 'did-get-redirect-request', {
|
||||||
|
oldURL,
|
||||||
|
newURL,
|
||||||
|
isMainFrame,
|
||||||
|
httpResponseCode,
|
||||||
|
requestMethod,
|
||||||
|
referrer,
|
||||||
|
headers
|
||||||
|
})
|
||||||
|
//console.log('did-get-redirect-request', newURL)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
viewContents.on('did-stop-loading', event => {
|
||||||
|
//console.log('did-stop-loading', event.sender.getURL())
|
||||||
|
trySend(browserContents, 'did-stop-loading')
|
||||||
|
})
|
||||||
|
viewContents.on('did-finish-load', event => {
|
||||||
|
//console.log('did-finish-load', event.sender.getURL())
|
||||||
|
progress = 1
|
||||||
|
onProgress(progress)
|
||||||
|
trySend(browserContents, 'progress', progress)
|
||||||
|
})
|
||||||
|
viewContents.on('dom-ready', event => {
|
||||||
|
if (progress < 0.5) {
|
||||||
|
progress = 0.5
|
||||||
|
onProgress(progress)
|
||||||
|
trySend(browserContents, 'progress', progress)
|
||||||
|
}
|
||||||
|
viewContents.executeJavaScript('document.title', result => {
|
||||||
|
trySend(browserContents, 'title', result)
|
||||||
|
})
|
||||||
|
|
||||||
|
//console.log('dom-ready', event.sender.getURL())
|
||||||
|
})
|
||||||
|
|
||||||
|
viewContents.on('new-window', function (event, url) {
|
||||||
|
event.preventDefault()
|
||||||
|
console.log('new-window')
|
||||||
|
openBrowserView(url, x, y)
|
||||||
|
})
|
||||||
|
|
||||||
|
viewContents.loadURL(url)
|
||||||
|
}
|
||||||
|
browsers.set(url, browser)
|
||||||
|
browser.on('closed', e => {
|
||||||
|
for (let [url, browser] of browsers.entries()) {
|
||||||
|
if (browser == e.sender) {
|
||||||
|
browsers.delete(url)
|
||||||
|
console.log('removed browser view', url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// UO: Experimental call. Opens a Min Browser window or a limited window with a browser view
|
||||||
|
ipcMain.on('loadBrowserView', (e, opts = {}) => {
|
||||||
|
let { url, x, y } = opts
|
||||||
|
openBrowserView(url, x, y)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('multiUserMode', (e, opts = {}) => {
|
||||||
|
global.multiUserMode = opts
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('padContainerLoaded', e => {
|
||||||
|
win.webContents.send('padContainerAvailable')
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('createScreenshot', (e, opts = {}) => {
|
||||||
|
opts = Object.assign(
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
name: `iwmbrowser-${new Date()
|
||||||
|
.toISOString()
|
||||||
|
.replace(/:/g, '-')}.png`,
|
||||||
|
path: os.tmpdir()
|
||||||
|
},
|
||||||
|
opts
|
||||||
|
)
|
||||||
|
|
||||||
|
win.webContents.capturePage(image => {
|
||||||
|
if (image) {
|
||||||
|
let file = path.join(opts.path, opts.name)
|
||||||
|
fs.writeFile(file, image.toPNG(), err => {
|
||||||
|
if (err) {
|
||||||
|
//throw err
|
||||||
|
} else {
|
||||||
|
console.log(`Screenshot saved: ${file}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('directoryListing', (e, opts = {}) => {
|
||||||
|
let { directory, files, folders } = opts
|
||||||
|
console.log("directoryListing", opts)
|
||||||
|
try {
|
||||||
|
let listing = fs.readdirSync(directory)
|
||||||
|
let result = { directory, files: [], folders: [] }
|
||||||
|
for (let name of listing) {
|
||||||
|
if (name.startsWith('.'))
|
||||||
|
continue
|
||||||
|
let fullPath = path.join(directory, name)
|
||||||
|
let stat = fs.lstatSync(fullPath)
|
||||||
|
if (files && stat.isFile()) {
|
||||||
|
if (typeof files == 'string' && !files.endsWith(files))
|
||||||
|
continue
|
||||||
|
result.files.push(name)
|
||||||
|
}
|
||||||
|
if (folders && stat.isDirectory())
|
||||||
|
result.folders.push(name)
|
||||||
|
}
|
||||||
|
e.sender.send('directoryListing', result)
|
||||||
|
} catch (err) {
|
||||||
|
let args = { directory, errorMessage: err.message}
|
||||||
|
e.sender.send('directoryListingError', args)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('createTextfile', (e, opts = {}) => {
|
||||||
|
opts = Object.assign(
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
name: `iwmbrowser-${new Date()
|
||||||
|
.toISOString()
|
||||||
|
.replace(/:/g, '-')}.txt`,
|
||||||
|
path: os.tmpdir(),
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
opts
|
||||||
|
)
|
||||||
|
let file = path.join(opts.path, opts.name)
|
||||||
|
fs.writeFile(file, opts.text, err => {
|
||||||
|
if (err) {
|
||||||
|
//throw err
|
||||||
|
} else {
|
||||||
|
console.log(`Textfile saved: ${file}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('error', e => {
|
||||||
|
console.log('Received error notification')
|
||||||
|
global.errorCount += 1
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('openExternal', (e, url=null) => {
|
||||||
|
console.log('Received openExternal', url)
|
||||||
|
if (url) {
|
||||||
|
shell.openExternal(url)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcMain.on('save', (e, opts = {}) => {
|
||||||
|
let { url, html, saveAs, action } = opts
|
||||||
|
// url must absolute URL
|
||||||
|
let urlObj = new URL(url)
|
||||||
|
let pathname = urlObj.pathname
|
||||||
|
if (saveAs) {
|
||||||
|
pathname = dialog.showSaveDialog(win, { title: 'Save as:', defaultPath: pathname })
|
||||||
|
if (typeof pathname == 'undefined')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
console.log("Saving", pathname, action)
|
||||||
|
html = prettyPrint(html, { indent_size: 4 });
|
||||||
|
fs.writeFileSync(pathname, html, 'utf-8')
|
||||||
|
if (saveAs) {
|
||||||
|
let normalized = pathname.replace(/\\/g, '/')
|
||||||
|
e.sender.send('savedAs', {url: `file://${normalized}`, action})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.warn('Failed to save the file', pathname)
|
||||||
|
e.sender.send('saveFailed', pathname)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
// This method will be called when Electron has finished
|
||||||
|
// initialization and is ready to create browser windows.
|
||||||
|
// Some APIs can only be used after this event occurs.
|
||||||
|
app.on('ready', createWindow)
|
||||||
|
|
||||||
|
// Quit when all windows are closed.
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
// On macOS it is common for applications and their menu bar
|
||||||
|
// to stay active until the user quits explicitly with Cmd + Q
|
||||||
|
if (process.platform !== 'darwin') {
|
||||||
|
app.quit()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
app.on(
|
||||||
|
'select-client-certificate',
|
||||||
|
(event, webContents, url, list, callback) => {
|
||||||
|
console.log('select-client-certificate', url, list)
|
||||||
|
event.preventDefault()
|
||||||
|
ipc.once('client-certificate-selected', (event, item) => {
|
||||||
|
console.log('selected:', item)
|
||||||
|
callback(item)
|
||||||
|
})
|
||||||
|
mainWindow.webContents.send('select-client-certificate', list)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
app.on(
|
||||||
|
'certificate-error',
|
||||||
|
(event, webContents, url, error, certificate, callback) => {
|
||||||
|
console.log('certificate-error', url)
|
||||||
|
event.preventDefault()
|
||||||
|
const result = true // TODO: do real validation here
|
||||||
|
callback(result)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
app.on('activate', () => {
|
||||||
|
// On macOS it's common to re-create a window in the app when the
|
||||||
|
// dock icon is clicked and there are no other windows open.
|
||||||
|
if (win === null) {
|
||||||
|
createWindow()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
store: store
|
||||||
|
}
|
||||||
629
browser/menu.js
Normal file
629
browser/menu.js
Normal file
@ -0,0 +1,629 @@
|
|||||||
|
/* globals require, process */
|
||||||
|
/*eslint no-console: ["error", { allow: ["log", "error"] }] */
|
||||||
|
|
||||||
|
const { Menu, app, shell, dialog } = require('electron')
|
||||||
|
const fs = require('fs')
|
||||||
|
const fse = require('fs-extra')
|
||||||
|
const os = require('os')
|
||||||
|
const path = require('path')
|
||||||
|
const { openProcessManager } = require('electron-process-manager')
|
||||||
|
const main = require('./main.js')
|
||||||
|
|
||||||
|
let { thumbnail } = require('./utils.js')
|
||||||
|
const loadTests = require('./test.js')
|
||||||
|
const i18n = new (require('./i18n.js'))()
|
||||||
|
|
||||||
|
function selectURL(url) {
|
||||||
|
url = url.replace(/\\/g, '/')
|
||||||
|
console.log('selectURL', url)
|
||||||
|
main.win.loadURL(url)
|
||||||
|
main.store.set('url', url)
|
||||||
|
}
|
||||||
|
|
||||||
|
function findItems(key, value) {
|
||||||
|
let items = []
|
||||||
|
|
||||||
|
for (let i = 0; i < menu.items.length; i++) {
|
||||||
|
for (let j = 0; j < menu.items[i].submenu.items.length; j++) {
|
||||||
|
let item = menu.items[i].submenu.items[j]
|
||||||
|
if (item[key] === value) {
|
||||||
|
items.push(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return items
|
||||||
|
}
|
||||||
|
|
||||||
|
function findItem(key, value) {
|
||||||
|
return findItems(key, value)[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleBookmarks(bookmark) {
|
||||||
|
let items = findItems('class', 'bookmark')
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
items[i].checked = false
|
||||||
|
}
|
||||||
|
|
||||||
|
bookmark.checked = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkBookmark(url) {
|
||||||
|
let items = findItems('url', url)
|
||||||
|
if (items.length === 1) {
|
||||||
|
toggleBookmarks(items[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHistoryStatus() {
|
||||||
|
const historyBack = findItem('id', 'history-back')
|
||||||
|
historyBack.enabled = main.win.webContents.canGoBack()
|
||||||
|
|
||||||
|
const historyForward = findItem('id', 'history-forward')
|
||||||
|
historyForward.enabled = main.win.webContents.canGoForward()
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSelectDataFolderDialog(focusedWindow) {
|
||||||
|
dialog.showOpenDialog(
|
||||||
|
{
|
||||||
|
title: i18n.__('selectfolder.select.title'),
|
||||||
|
buttonLabel: i18n.__('selectfolder.select.buttonLabel'),
|
||||||
|
properties: ['openDirectory', 'createDirectory', 'noResolveAliases', 'treatPackageAsDirectory']
|
||||||
|
},
|
||||||
|
(filePaths) => {
|
||||||
|
if (filePaths && filePaths.length === 1) {
|
||||||
|
const varPath = path.join(__dirname, '../var')
|
||||||
|
|
||||||
|
// Check if the same folder was used
|
||||||
|
if (filePaths[0].startsWith(varPath)) {
|
||||||
|
const same = filePaths[0] === varPath
|
||||||
|
|
||||||
|
dialog.showMessageBox(
|
||||||
|
{
|
||||||
|
type: 'error',
|
||||||
|
icon: path.join(__dirname, '../assets/icons/png/512x512-empty.png'),
|
||||||
|
buttons: [i18n.__('selectfolder.samefolder.ok')],
|
||||||
|
defaultId: 0,
|
||||||
|
message: i18n.__('selectfolder.samefolder.message'),
|
||||||
|
detail: same
|
||||||
|
? i18n.__('selectfolder.samefolder.detail.same')
|
||||||
|
: i18n.__('selectfolder.samefolder.detail.within'),
|
||||||
|
cancelId: 0
|
||||||
|
},
|
||||||
|
(response) => {
|
||||||
|
showSelectDataFolderDialog(focusedWindow)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
// Backup
|
||||||
|
if (fse.pathExistsSync(varPath)) {
|
||||||
|
const varPathBackup = findNextVarFolder()
|
||||||
|
// Rename old var folder or link
|
||||||
|
fse.renameSync(varPath, varPathBackup)
|
||||||
|
} else {
|
||||||
|
// BUG: Workaround because pathExistsSync return false on existing symbolic links with a missing target
|
||||||
|
fse.removeSync(varPath)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new symlink
|
||||||
|
main.store.set('dataFolder', filePaths[0])
|
||||||
|
fs.symlinkSync(filePaths[0], varPath, 'dir')
|
||||||
|
|
||||||
|
dialog.showMessageBox(
|
||||||
|
{
|
||||||
|
type: 'info',
|
||||||
|
icon: path.join(__dirname, '../assets/icons/png/link.png'),
|
||||||
|
buttons: [i18n.__('selectfolder.info.ok')],
|
||||||
|
defaultId: 0,
|
||||||
|
message: i18n.__('selectfolder.info.message'),
|
||||||
|
detail: i18n.__('selectfolder.info.detail').replace(/\$\{0\}/, filePaths[0]),
|
||||||
|
cancelId: 0
|
||||||
|
},
|
||||||
|
(response) => {
|
||||||
|
if (focusedWindow) focusedWindow.reload()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function findNextVarFolder() {
|
||||||
|
let exists = true
|
||||||
|
let counter = 0
|
||||||
|
|
||||||
|
while (exists) {
|
||||||
|
counter++
|
||||||
|
exists = fse.pathExistsSync(path.join(__dirname, `../var${counter}`))
|
||||||
|
}
|
||||||
|
|
||||||
|
return path.join(__dirname, `../var${counter}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function showFolderBrowser(focusedWindow) {
|
||||||
|
const varPath = path.join(__dirname, '../var')
|
||||||
|
const varPathExists = fse.pathExistsSync(varPath)
|
||||||
|
if (varPathExists) {
|
||||||
|
dialog.showMessageBox(
|
||||||
|
{
|
||||||
|
type: 'warning',
|
||||||
|
icon: path.join(__dirname, '../assets/icons/png/512x512-empty.png'),
|
||||||
|
buttons: [i18n.__('selectfolder.warning.next'), i18n.__('selectfolder.warning.cancel')],
|
||||||
|
defaultId: 1,
|
||||||
|
message: i18n.__('selectfolder.warning.message'),
|
||||||
|
detail: i18n.__('selectfolder.warning.detail'),
|
||||||
|
cancelId: 1
|
||||||
|
},
|
||||||
|
(response) => {
|
||||||
|
if (response === 0) {
|
||||||
|
showSelectDataFolderDialog(focusedWindow)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
showSelectDataFolderDialog(focusedWindow)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const template = [
|
||||||
|
{
|
||||||
|
label: i18n.__('edit'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
role: 'undo',
|
||||||
|
label: i18n.__('undo')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'redo',
|
||||||
|
label: i18n.__('redo')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'cut',
|
||||||
|
label: i18n.__('cut')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'copy',
|
||||||
|
label: i18n.__('copy')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'paste',
|
||||||
|
label: i18n.__('paste')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'pasteandmatchstyle',
|
||||||
|
label: i18n.__('pasteandmatchstyle')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'delete',
|
||||||
|
label: i18n.__('delete')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'selectall',
|
||||||
|
label: i18n.__('selectall')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('view'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: i18n.__('reload'),
|
||||||
|
accelerator: 'CmdOrCtrl+R',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
focusedWindow.webContents.setVisualZoomLevelLimits(1, 1)
|
||||||
|
focusedWindow.reload()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'forcereload',
|
||||||
|
label: i18n.__('forcereload'),
|
||||||
|
accelerator: 'CmdOrCtrl+Shift+R',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
focusedWindow.webContents.session.clearCache(() => console.log('Cache cleared'))
|
||||||
|
|
||||||
|
focusedWindow.webContents.setVisualZoomLevelLimits(1, 1)
|
||||||
|
focusedWindow.reload()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'resetzoom',
|
||||||
|
label: i18n.__('resetzoom')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'zoomin',
|
||||||
|
label: i18n.__('zoomin')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'zoomout',
|
||||||
|
label: i18n.__('zoomout')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'togglefullscreen',
|
||||||
|
label: i18n.__('togglefullscreen'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Cmd+Ctrl+F' : 'F11',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('multiuserbrowser'),
|
||||||
|
accelerator: 'CmdOrCtrl+M',
|
||||||
|
type: 'checkbox',
|
||||||
|
checked: true,
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
main.store.set('multiUserBrowser', item.checked)
|
||||||
|
global.multiUserMode = item.checked
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('minimalpad'),
|
||||||
|
accelerator: 'CmdOrCtrl+p',
|
||||||
|
type: 'checkbox',
|
||||||
|
checked: true,
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
main.store.set('minimalPad', item.checked)
|
||||||
|
global.useMinimalPad = item.checked
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('history'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
id: 'history-back',
|
||||||
|
label: i18n.__('back'),
|
||||||
|
accelerator: 'CmdOrCtrl+Left',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
main.win.webContents.goBack()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'history-forward',
|
||||||
|
label: i18n.__('forward'),
|
||||||
|
accelerator: 'CmdOrCtrl+Right',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
main.win.webContents.goForward()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('home'),
|
||||||
|
accelerator: 'CmdOrCtrl+Up',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
main.win.webContents.goToIndex(0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('recentlyvisited'),
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('bookmarks'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: i18n.__('localfilesystem'),
|
||||||
|
class: 'bookmark',
|
||||||
|
type: 'checkbox',
|
||||||
|
url: `file://${__dirname}/../index.html`,
|
||||||
|
accelerator: 'CmdOrCtrl+L',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
selectURL(item.url)
|
||||||
|
toggleBookmarks(item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('testframes'),
|
||||||
|
class: 'bookmark',
|
||||||
|
type: 'checkbox',
|
||||||
|
url: `file://${__dirname}/../index.html?test`,
|
||||||
|
accelerator: 'CmdOrCtrl+T',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
selectURL(item.url)
|
||||||
|
toggleBookmarks(item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'localhost',
|
||||||
|
label: 'https://localhost:8443',
|
||||||
|
class: 'bookmark',
|
||||||
|
type: 'checkbox',
|
||||||
|
enabled: false,
|
||||||
|
url: 'https://localhost:8443/index.html',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
selectURL(item.url)
|
||||||
|
toggleBookmarks(item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'localhost',
|
||||||
|
label: 'https://localhost:3000',
|
||||||
|
class: 'bookmark',
|
||||||
|
type: 'checkbox',
|
||||||
|
enabled: true,
|
||||||
|
url: 'https://localhost:3000/index.html',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
selectURL(item.url)
|
||||||
|
toggleBookmarks(item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label: 'http://tornado.iwm-kmrc.de:8000',
|
||||||
|
// class: 'bookmark',
|
||||||
|
// type: 'checkbox',
|
||||||
|
// url: 'http://tornado.iwm-kmrc.de:8000/index.html',
|
||||||
|
// click(item, focusedWindow) {
|
||||||
|
// selectURL(item.url)
|
||||||
|
// toggleBookmarks(item)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: 'http://rousseau.iwm-kmrc.de/index.html',
|
||||||
|
class: 'bookmark',
|
||||||
|
type: 'checkbox',
|
||||||
|
url: 'http://rousseau.iwm-kmrc.de/index.html',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
selectURL(item.url)
|
||||||
|
toggleBookmarks(item)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('develop'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
id: 'toggledevelopertools',
|
||||||
|
label: i18n.__('toggledevelopertools'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) focusedWindow.webContents.toggleDevTools()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('openprocessmonitor'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+P' : 'Ctrl+Shift+P',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
openProcessManager()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('selectfolder'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+D' : 'Ctrl+Shift+D',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
if (process.platform === 'win32') {
|
||||||
|
var exec = require('child_process').exec
|
||||||
|
exec('NET SESSION', function (err, so, se) {
|
||||||
|
const admin = se.length === 0 ? true : false
|
||||||
|
|
||||||
|
if (admin) {
|
||||||
|
showFolderBrowser(focusedWindow)
|
||||||
|
} else {
|
||||||
|
dialog.showMessageBox({
|
||||||
|
type: 'error',
|
||||||
|
icon: path.join(__dirname, '../assets/icons/png/512x512-empty.png'),
|
||||||
|
buttons: [i18n.__('selectfolder.noadmin.ok')],
|
||||||
|
message: i18n.__('selectfolder.noadmin.message'),
|
||||||
|
detail: i18n.__('selectfolder.noadmin.detail')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
showFolderBrowser(focusedWindow)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'startserver',
|
||||||
|
label: i18n.__('startserver'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+S' : 'Ctrl+Shift+S',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
const { server } = require('../server/main.js')
|
||||||
|
server.start()
|
||||||
|
item.visible = false
|
||||||
|
findItem('id', 'stopserver').visible = true
|
||||||
|
findItem('id', 'localhost').enabled = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'stopserver',
|
||||||
|
label: i18n.__('stopserver'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+S' : 'Ctrl+Shift+S',
|
||||||
|
visible: false,
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
const { server } = require('../server/main.js')
|
||||||
|
server.stop()
|
||||||
|
item.visible = false
|
||||||
|
findItem('id', 'startserver').visible = true
|
||||||
|
findItem('id', 'localhost').enabled = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('runloadtests'),
|
||||||
|
accelerator: process.platform === 'darwin' ? 'Alt+Command+L' : 'Ctrl+Shift+L',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
loadTests(focusedWindow)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Aktualisiere Tüsch POIs',
|
||||||
|
click(item, focusedWindow) {
|
||||||
|
const UpdatePOI = require('../dev/tuesch/bin/menu/update-pois.js')
|
||||||
|
UpdatePOI.update('./dev/tuesch')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'window',
|
||||||
|
label: i18n.__('window'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
role: 'close',
|
||||||
|
label: i18n.__('close')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'minimize',
|
||||||
|
label: i18n.__('minimize')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'zoom',
|
||||||
|
label: i18n.__('zoom')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'front',
|
||||||
|
label: i18n.__('front')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: i18n.__('screenshot'),
|
||||||
|
accelerator: 'CmdOrCtrl+S',
|
||||||
|
async click(item, focusedWindow) {
|
||||||
|
if (focusedWindow) {
|
||||||
|
await focusedWindow.webContents.capturePage().then((image) => {
|
||||||
|
let screenshotFile = path.join(os.tmpdir(), 'screenshot.png')
|
||||||
|
|
||||||
|
console.log('image captured', screenshotFile)
|
||||||
|
|
||||||
|
let url = focusedWindow.webContents.getURL()
|
||||||
|
if (url.startsWith('file://')) {
|
||||||
|
let normalized = path.normalize(url).replace('.html', '.png')
|
||||||
|
screenshotFile = normalized.replace('file:', '')
|
||||||
|
let thumbnailFile = screenshotFile.replace('index.png', 'thumbnail.png')
|
||||||
|
if (url.endsWith('index.html')) {
|
||||||
|
thumbnailFile = screenshotFile.replace('index.png', 'thumbnail.png')
|
||||||
|
} else {
|
||||||
|
let folderName = path.dirname(screenshotFile)
|
||||||
|
let baseName = path.basename(screenshotFile)
|
||||||
|
thumbnailFile = path.join(folderName, 'thumbnails', baseName)
|
||||||
|
}
|
||||||
|
fs.writeFile(thumbnailFile, thumbnail(image), (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err
|
||||||
|
} else {
|
||||||
|
console.log(`Thumbnail written to ${thumbnailFile}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
fs.writeFile(screenshotFile, image.toPNG(), (err) => {
|
||||||
|
if (err) {
|
||||||
|
throw err
|
||||||
|
} else {
|
||||||
|
console.log(`Screenshot written to ${screenshotFile}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'help',
|
||||||
|
label: i18n.__('help'),
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
label: i18n.__('iwm'),
|
||||||
|
click() {
|
||||||
|
shell.openExternal('https://www.iwm-tuebingen.de')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
if (process.platform === 'darwin') {
|
||||||
|
const name = app.getName()
|
||||||
|
template.unshift({
|
||||||
|
label: name,
|
||||||
|
submenu: [
|
||||||
|
{
|
||||||
|
role: 'about',
|
||||||
|
label: i18n.__('about')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'separator'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
role: 'quit',
|
||||||
|
label: i18n.__('quit')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const menu = Menu.buildFromTemplate(template)
|
||||||
|
Menu.setApplicationMenu(menu)
|
||||||
|
|
||||||
|
checkBookmark(main.store.get('url'))
|
||||||
|
setHistoryStatus()
|
||||||
|
|
||||||
|
function focus() {
|
||||||
|
findItem('id', 'forcereload').enabled = true
|
||||||
|
findItem('id', 'togglefullscreen').enabled = true
|
||||||
|
findItem('id', 'toggledevelopertools').enabled = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function blur() {
|
||||||
|
findItem('id', 'forcereload').enabled = false
|
||||||
|
findItem('id', 'togglefullscreen').enabled = false
|
||||||
|
findItem('id', 'toggledevelopertools').enabled = false
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
menu,
|
||||||
|
setHistoryStatus,
|
||||||
|
focus,
|
||||||
|
blur
|
||||||
|
}
|
||||||
171
browser/package.js
Normal file
171
browser/package.js
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
/* globals require, __dirname, process */
|
||||||
|
/*eslint no-console: ["error", { allow: ["log", "info", "warn", "error"] }]*/
|
||||||
|
|
||||||
|
const fse = require('fs-extra')
|
||||||
|
const path = require('path')
|
||||||
|
const packager = require('electron-packager')
|
||||||
|
const rebuild = require('electron-rebuild')
|
||||||
|
|
||||||
|
// Arguments
|
||||||
|
//----------------------
|
||||||
|
let folder = null
|
||||||
|
|
||||||
|
if (process.argv.length < 3) {
|
||||||
|
console.error('Missing command line parameter "folder"!')
|
||||||
|
process.exit(1)
|
||||||
|
} else {
|
||||||
|
folder = process.argv[2]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
//----------------------
|
||||||
|
let settings = null
|
||||||
|
const root = path.join(__dirname, '../')
|
||||||
|
|
||||||
|
try {
|
||||||
|
settings = require(`../${folder}/settings.json`)
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Cannot read settings.json in folder, does it exist?')
|
||||||
|
process.exit(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read settings
|
||||||
|
//----------------------
|
||||||
|
const title = `--- Build "${settings.name || settings.id}" ---`
|
||||||
|
const line = Array(title.length + 1).join('-')
|
||||||
|
console.info(line)
|
||||||
|
console.info(title)
|
||||||
|
console.info(line)
|
||||||
|
|
||||||
|
// Using folder
|
||||||
|
//----------------------
|
||||||
|
const tempFolder = path.join(root, 'temp', settings.id)
|
||||||
|
console.log(`Using folder ${tempFolder}`)
|
||||||
|
|
||||||
|
// Delete temp folder (when last run aborted)
|
||||||
|
fse.removeSync(tempFolder)
|
||||||
|
console.log(`Folder ${tempFolder} deleted`)
|
||||||
|
|
||||||
|
// Create folder
|
||||||
|
fse.ensureDirSync(tempFolder)
|
||||||
|
console.log(`Folder ${tempFolder} created`)
|
||||||
|
|
||||||
|
// Create subfolders
|
||||||
|
const defaultFolders = ['assets', 'browser', 'css', 'lib', 'node_modules', 'server']
|
||||||
|
console.log(`The folders ${defaultFolders.join(', ')} are included by default`)
|
||||||
|
const folders = new Set(settings.browser.folders.concat(defaultFolders))
|
||||||
|
for (let folder of folders) {
|
||||||
|
console.log(`Copy folder ${folder}`)
|
||||||
|
const folderOld = path.join(root, folder)
|
||||||
|
const folderNew = path.join(root, 'temp', settings.id, folder)
|
||||||
|
|
||||||
|
fse.copySync(folderOld, folderNew)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write package.json
|
||||||
|
//----------------------
|
||||||
|
let json = {
|
||||||
|
name: settings.id,
|
||||||
|
productName: settings.name || settings.id,
|
||||||
|
version: settings.version,
|
||||||
|
main: 'browser/main.js',
|
||||||
|
dependencies: {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read and write dependencies
|
||||||
|
const packageJson = fse.readJsonSync(path.join(root, 'package.json'))
|
||||||
|
Object.assign(json.dependencies, packageJson.dependencies)
|
||||||
|
|
||||||
|
// Add browser dependencies
|
||||||
|
if (settings.browser.dependencies) {
|
||||||
|
let dependencies = {}
|
||||||
|
for (let dependency of settings.browser.dependencies) {
|
||||||
|
dependencies[dependency] = '*'
|
||||||
|
}
|
||||||
|
Object.assign(json.dependencies, dependencies)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Create package.json')
|
||||||
|
fse.writeJsonSync(path.join(tempFolder, 'package.json'), json, {spaces: 4})
|
||||||
|
|
||||||
|
// Write URL to settings.json
|
||||||
|
//----------------------
|
||||||
|
console.log('Write URL to browser/settings.json')
|
||||||
|
fse.writeJsonSync(path.join(tempFolder, 'browser/settings.json'), {url: `../${folder}/index.html`}, {spaces: 4})
|
||||||
|
|
||||||
|
// Build with electron-packager
|
||||||
|
//----------------------
|
||||||
|
console.log('Start electron-packager')
|
||||||
|
packager({
|
||||||
|
dir: `./temp/${settings.id}`,
|
||||||
|
arch: 'x64',
|
||||||
|
asar: false,
|
||||||
|
overwrite: true,
|
||||||
|
out: './dist/electron',
|
||||||
|
icon: './assets/icons/icon',
|
||||||
|
platform: settings.browser.platform || ['darwin', 'win32'],
|
||||||
|
prune: false,
|
||||||
|
afterCopy: [(buildPath, electronVersion, platform, arch, callback) => {
|
||||||
|
console.log(`Rebuild Node.js modules for ${platform}...`)
|
||||||
|
rebuild.rebuild({buildPath, electronVersion, arch})
|
||||||
|
.then(() => {
|
||||||
|
console.log(`...Node.js modules for ${platform} rebuilded`)
|
||||||
|
callback()
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(`Error: ${error}`)
|
||||||
|
callback(error)
|
||||||
|
});
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
.then(appPaths => {
|
||||||
|
console.log('electron-packager finished')
|
||||||
|
|
||||||
|
// Delete temp folder
|
||||||
|
//----------------------
|
||||||
|
fse.removeSync(tempFolder)
|
||||||
|
console.log(`Folder ${tempFolder} deleted`)
|
||||||
|
|
||||||
|
// Write data folders
|
||||||
|
//----------------------
|
||||||
|
if (settings.browser.data) {
|
||||||
|
console.log('Copy data folders')
|
||||||
|
for (let folder of settings.browser.data) {
|
||||||
|
for (let appPath of appPaths) {
|
||||||
|
console.log(`Copy folder ${folder} to ${appPath}`)
|
||||||
|
const source = path.join(root, folder)
|
||||||
|
const target = path.join(getResourcesPath(root, appPath), folder)
|
||||||
|
fse.copySync(source, target, {
|
||||||
|
dereference: true,
|
||||||
|
filter: item => {
|
||||||
|
if (settings.browser.dataExtensions && fse.lstatSync(item).isFile() && !settings.browser.dataExtensions.includes(path.extname(item).substring(1).toLowerCase())) {
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finished
|
||||||
|
//----------------------
|
||||||
|
console.info('Finished')
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error)
|
||||||
|
})
|
||||||
|
|
||||||
|
function getResourcesPath(root, appPath) {
|
||||||
|
|
||||||
|
let resourcesPath = ""
|
||||||
|
|
||||||
|
if (/darwin/.test(appPath) || /mas/.test(appPath)) {
|
||||||
|
resourcesPath = path.join(root, appPath, `${json.productName}.app/Contents/Resources/app`)
|
||||||
|
} else if (/win32/.test(appPath) || /linux/.test(appPath)) {
|
||||||
|
resourcesPath = path.join(root, appPath, 'resources/app')
|
||||||
|
}
|
||||||
|
|
||||||
|
return resourcesPath
|
||||||
|
}
|
||||||
570
browser/pad.js
Normal file
570
browser/pad.js
Normal file
@ -0,0 +1,570 @@
|
|||||||
|
const {fileURL} = require('./utils.js')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
/* A specialization that ignores webview events and thus allows
|
||||||
|
* webviews to get touch, mouse and wheel events.
|
||||||
|
*/
|
||||||
|
class DOMPadContainer extends DOMScatterContainer {
|
||||||
|
|
||||||
|
capture(event) {
|
||||||
|
if (event.target.tagName === 'WEBVIEW' || event.target.classList.contains('interactiveElement'))
|
||||||
|
return false
|
||||||
|
return super.capture(event)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* A wrapper for a webview that behaves like a virtual tablet browser.
|
||||||
|
* Uses a DOMScatter to zoom and rotate the virtual browser window.
|
||||||
|
* The position of buttons and the border size remain constant.
|
||||||
|
*/
|
||||||
|
class Pad {
|
||||||
|
|
||||||
|
constructor(scatterContainer, {
|
||||||
|
startScale=1.0, minScale=0.25, maxScale=10.5,
|
||||||
|
autoBringToFront=true,
|
||||||
|
url="https://www.iwm-tuebingen.de/www/index.html",
|
||||||
|
hideOnStart=false,
|
||||||
|
translatable=true, scalable=true, rotatable=true,
|
||||||
|
movableX=true,
|
||||||
|
movableY=true,
|
||||||
|
rotationDegrees=null,
|
||||||
|
rotation=null,
|
||||||
|
onTransform=null,
|
||||||
|
transformOrigin = 'center center',
|
||||||
|
// extras which are in part needed
|
||||||
|
x=0,
|
||||||
|
y=0,
|
||||||
|
width=null,
|
||||||
|
height=null,
|
||||||
|
resizable=false,
|
||||||
|
} ={}) {
|
||||||
|
|
||||||
|
this.x = x
|
||||||
|
this.y = y
|
||||||
|
this.url = url
|
||||||
|
this.hideOnStart = hideOnStart
|
||||||
|
this.width = width
|
||||||
|
this.height = height
|
||||||
|
this.minScale = minScale
|
||||||
|
this.maxScale = maxScale
|
||||||
|
this.scatterContainer = scatterContainer
|
||||||
|
this.startScale = startScale
|
||||||
|
this.scale = startScale
|
||||||
|
this.scalable = scalable
|
||||||
|
this.rotatable = rotatable
|
||||||
|
this.rotationDegrees = this.startRotationDegrees
|
||||||
|
this.transformOrigin = transformOrigin
|
||||||
|
|
||||||
|
this.frame = document.createElement('div')
|
||||||
|
this.frame.classList.add("pad")
|
||||||
|
this.border = 50 / startScale
|
||||||
|
|
||||||
|
Elements.setStyle(this.frame, {
|
||||||
|
backgroundColor: "#333",
|
||||||
|
position: "absolute",
|
||||||
|
display: 'flex',
|
||||||
|
width: this.width+"px",
|
||||||
|
height: this.height+"px",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
// boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
|
||||||
|
// borderRadius: '10px',
|
||||||
|
overflow: "visible"})
|
||||||
|
|
||||||
|
document.body.appendChild( this.frame)
|
||||||
|
|
||||||
|
this.web=document.createElement("webview")
|
||||||
|
this.webBackground=document.createElement("div")
|
||||||
|
this.webViewSnapshot=document.createElement("img")
|
||||||
|
this.overlay = document.createElement('div')
|
||||||
|
|
||||||
|
this.loadAnim = document.createElement("div")
|
||||||
|
this.loadAnim.style.webkitAnimation= "spin 2s linear infinite"
|
||||||
|
this.loadAnim.style.animation= "spin 2s linear infinite"
|
||||||
|
this.loadAnim.style.position = "absolute"
|
||||||
|
|
||||||
|
document.styleSheets[0].insertRule('\
|
||||||
|
@keyframes spin {\
|
||||||
|
from { transform: rotateZ(0deg); }\
|
||||||
|
to { transform: rotateZ(360deg); }\
|
||||||
|
}'
|
||||||
|
)
|
||||||
|
|
||||||
|
this.overlay.appendChild(this.loadAnim)
|
||||||
|
|
||||||
|
Elements.setStyle(this.web, {
|
||||||
|
position: "absolute",
|
||||||
|
overflow: "auto",
|
||||||
|
border: "1px solid #fff"
|
||||||
|
})
|
||||||
|
// this.web.classList.add("interactiveElement")
|
||||||
|
// this.web.style.pointerEvents="none"
|
||||||
|
|
||||||
|
Elements.setStyle(this.webBackground, {
|
||||||
|
position: "absolute",
|
||||||
|
overflow: "auto",
|
||||||
|
background: "white"
|
||||||
|
})
|
||||||
|
|
||||||
|
Elements.setStyle(this.overlay, {
|
||||||
|
position: "absolute",
|
||||||
|
overflow: "auto",
|
||||||
|
background: "white",
|
||||||
|
opacity: "0.8"
|
||||||
|
})
|
||||||
|
|
||||||
|
Elements.setStyle(this.webViewSnapshot, {
|
||||||
|
position: "absolute",
|
||||||
|
overflow: "auto"
|
||||||
|
})
|
||||||
|
|
||||||
|
let timeTouchStart = 0
|
||||||
|
this.overlayCaptureEvents = document.createElement('div')
|
||||||
|
// overlay.style.background="white"
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.classList.add("interactiveElement")
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.addEventListener('touchmove',(e)=>{
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.addEventListener('pointerup',(e)=>{
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
let p = {x:e.clientX, y:e.clientY}
|
||||||
|
|
||||||
|
let webviewPosition = Points.fromPageToNode(this.web,p)
|
||||||
|
|
||||||
|
let d = new Date()
|
||||||
|
|
||||||
|
if(d.getTime()-timeTouchStart<150)this.web.sendInputEvent({type:'mouseUp', x: webviewPosition.x, y: webviewPosition.y, button:'left', clickCount: 1})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.addEventListener('pointerdown',(e)=>{
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
this.scatter.bringToFront()
|
||||||
|
let p = {x:e.clientX, y:e.clientY}
|
||||||
|
|
||||||
|
let webviewPosition = Points.fromPageToNode(this.web,p)
|
||||||
|
|
||||||
|
let d = new Date()
|
||||||
|
timeTouchStart = d.getTime()
|
||||||
|
|
||||||
|
this.web.sendInputEvent({type:'mouseDown', x: webviewPosition.x, y: webviewPosition.y, button:'left', clickCount: 1})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.addEventListener('pointermove',(e)=>{
|
||||||
|
if(e.pointerType!='mouse'){
|
||||||
|
let rotation = Angle.radian2degree(this.scatter.rotation);
|
||||||
|
rotation = (rotation + 360) % 360;
|
||||||
|
|
||||||
|
let r = Math.sqrt(Math.pow(e.movementX, 2) + Math.pow(e.movementY, 2));
|
||||||
|
let phi = Angle.radian2degree(Math.atan2(e.movementX, e.movementY));
|
||||||
|
|
||||||
|
phi = ((phi) + 630) % 360;
|
||||||
|
let rot = ((rotation + 90) + 630) % 360;
|
||||||
|
|
||||||
|
let diffAngle = ((0 + rot) + 360) % 360;
|
||||||
|
let phiCorrected = (phi + diffAngle + 360) % 360;
|
||||||
|
|
||||||
|
let deltaX = r * Math.cos(Angle.degree2radian(phiCorrected));
|
||||||
|
let deltaY = -r * Math.sin(Angle.degree2radian(phiCorrected));
|
||||||
|
|
||||||
|
this.web.executeJavaScript("window.scrollTo(scrollX+"+(-1*deltaX)+", scrollY+"+ (-1*deltaY)+")")
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.overlayCaptureEvents.addEventListener('mousewheel',(e)=>{
|
||||||
|
console.log("mousewheel",e.deltaY)
|
||||||
|
// webview.sendInputEvent({type:'mouseWheel', x: 0, y: 0, deltaX: e.deltaX, deltaY: -e.deltaY, canScroll: true })
|
||||||
|
this.web.executeJavaScript("window.scrollTo(scrollX+"+e.deltaX+", scrollY+"+ e.deltaY+")")
|
||||||
|
})
|
||||||
|
|
||||||
|
this.frame.appendChild(this.webBackground)
|
||||||
|
this.frame.appendChild(this.web)
|
||||||
|
this.frame.appendChild(this.webViewSnapshot)
|
||||||
|
this.frame.appendChild(this.overlay)
|
||||||
|
if(remote.getGlobal('multiUserMode'))this.frame.appendChild(this.overlayCaptureEvents)
|
||||||
|
|
||||||
|
this.webViewSnapshot.style.visibility="hidden"
|
||||||
|
|
||||||
|
this.web.src=url
|
||||||
|
this.web.preload= path.join(__dirname, './preloadPad.js')
|
||||||
|
|
||||||
|
this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")
|
||||||
|
this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back")
|
||||||
|
this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward")
|
||||||
|
|
||||||
|
this.backButton.style.opacity = 0.5
|
||||||
|
this.forwardButton.style.opacity = 0.5
|
||||||
|
|
||||||
|
/*for (let callback of window.padLoadedHandler) {
|
||||||
|
callback(this, url)
|
||||||
|
}*/
|
||||||
|
|
||||||
|
this.web.addEventListener('new-window', (e) => {
|
||||||
|
|
||||||
|
if(e.url.indexOf("youtube")>-1)return
|
||||||
|
|
||||||
|
if (urlPadMap.has(e.url)) {
|
||||||
|
let childPad = urlPadMap.get(e.url)
|
||||||
|
childPad.scatter.moveTo(x, y)
|
||||||
|
return childPad
|
||||||
|
}
|
||||||
|
let childPad = new Pad(this.scatterContainer, {
|
||||||
|
x: this.scatter.position.x+100,
|
||||||
|
y: this.scatter.position.y+100,
|
||||||
|
url: e.url,
|
||||||
|
width: this.scatter.width,
|
||||||
|
height: this.scatter.height,
|
||||||
|
scalable: true,
|
||||||
|
rotatable: true})
|
||||||
|
urlPadMap.set(e.url, childPad)
|
||||||
|
|
||||||
|
for(let callback of window.padLoadedHandler) {
|
||||||
|
callback(childPad, url)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.web.addEventListener('did-navigate', (e) => {
|
||||||
|
this.enableButtons()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.web.addEventListener('dom-ready',()=>{
|
||||||
|
//if(this.url.indexOf('local')>-1)this.web.openDevTools()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.web.addEventListener('ipc-message', (e) => {
|
||||||
|
if(e.channel='webviewPointerDown')this.scatter.bringToFront()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.web.addEventListener('did-start-loading', ()=>{
|
||||||
|
this.overlay.style.visibility="visible"
|
||||||
|
|
||||||
|
let w = this.overlay.offsetWidth
|
||||||
|
let h = this.overlay.offsetHeight
|
||||||
|
|
||||||
|
console.log("did start loading",h,w)
|
||||||
|
|
||||||
|
let animationSize = w<h ? w*0.5 : h*0.5
|
||||||
|
let animationRingWidth = animationSize*0.1;
|
||||||
|
|
||||||
|
this.loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
|
||||||
|
this.loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
|
||||||
|
this.loadAnim.style.borderRadius="50%"
|
||||||
|
this.loadAnim.style.height=animationSize-animationRingWidth*2+"px"
|
||||||
|
this.loadAnim.style.width=animationSize-animationRingWidth*2+"px"
|
||||||
|
this.loadAnim.style.top = h*0.25+"px"
|
||||||
|
this.loadAnim.style.left = w*0.25+"px"
|
||||||
|
w<h ? this.loadAnim.style.top = 0.5*(h-animationSize)+"px" : this.loadAnim.style.left = 0.5*(w-animationSize)+"px"
|
||||||
|
})
|
||||||
|
|
||||||
|
this.web.addEventListener('did-stop-loading', ()=>{
|
||||||
|
this.overlay.style.visibility="hidden"
|
||||||
|
})
|
||||||
|
|
||||||
|
/*this.backButton.addEventListener('click', ()=>{
|
||||||
|
if(this.web.canGoBack())
|
||||||
|
this.web.goBack()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.forwardButton.addEventListener('click', ()=>{
|
||||||
|
if(this.web.canGoForward())
|
||||||
|
this.web.goForward()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.closeButton.addEventListener('click', ()=>{
|
||||||
|
this.close()
|
||||||
|
})*/
|
||||||
|
|
||||||
|
InteractionMapper.on('tap',this.backButton, e => {
|
||||||
|
if(this.web.canGoBack())
|
||||||
|
this.web.goBack()
|
||||||
|
})
|
||||||
|
|
||||||
|
InteractionMapper.on('tap',this.forwardButton, e => {
|
||||||
|
if(this.web.canGoForward())
|
||||||
|
this.web.goForward()
|
||||||
|
})
|
||||||
|
|
||||||
|
InteractionMapper.on('tap',this.closeButton, e => {
|
||||||
|
this.close()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.scatter = new DOMScatter(this.frame, scatterContainer, {
|
||||||
|
x: this.x,
|
||||||
|
y: this.y,
|
||||||
|
startScale: this.startScale,
|
||||||
|
width: this.width,
|
||||||
|
height: this.height,
|
||||||
|
minScale: this.minScale,
|
||||||
|
maxScale: this.maxScale,
|
||||||
|
scalable: this.scalable,
|
||||||
|
resizable: true,
|
||||||
|
rotatable: this.rotatable})
|
||||||
|
|
||||||
|
let img=document.createElement("img")
|
||||||
|
img.style.width = "70%"
|
||||||
|
img.style.position = "absolute"
|
||||||
|
img.style.bottom = "20%"
|
||||||
|
img.style.right = "20%"
|
||||||
|
img.style.pointerEvents="none"
|
||||||
|
img.src = "../../assets/icons/png/flat/resize.png"
|
||||||
|
this.scatter.resizeButton.appendChild(img)
|
||||||
|
|
||||||
|
this.scatter.moveTo({x, y})
|
||||||
|
this.scatter.bringToFront()
|
||||||
|
|
||||||
|
this.scatter.addTransformEventCallback((e) => {
|
||||||
|
let newBorder = 50 / e.scale
|
||||||
|
if (newBorder !== this.border) {
|
||||||
|
this.border = newBorder
|
||||||
|
this.layout()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.layout()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
rad2degree(alpha){
|
||||||
|
return alpha * 180 / Math.PI;
|
||||||
|
}
|
||||||
|
|
||||||
|
degree2rad(alpha){
|
||||||
|
return alpha * Math.PI / 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
// this.frame.style.display="none"
|
||||||
|
this.frame.parentNode.removeChild(this.frame)
|
||||||
|
urlPadMap.delete(this.url)
|
||||||
|
}
|
||||||
|
|
||||||
|
enableButtons() {
|
||||||
|
this.backButton.style.opacity = (this.web.canGoBack()) ? 1 : 0.5
|
||||||
|
this.forwardButton.style.opacity = (this.web.canGoForward()) ? 1 : 0.5
|
||||||
|
}
|
||||||
|
|
||||||
|
addButton(src, value) {
|
||||||
|
let button = document.createElement("img")
|
||||||
|
button.type = "image"
|
||||||
|
button.className = "frameButton"
|
||||||
|
button.style.position = "absolute"
|
||||||
|
button.src = fileURL(src)
|
||||||
|
button.value="close"
|
||||||
|
button.draggable = false
|
||||||
|
button.classList.add("interactiveElement")
|
||||||
|
this.frame.appendChild(button)
|
||||||
|
return button
|
||||||
|
}
|
||||||
|
|
||||||
|
layout() {
|
||||||
|
let b = this.border
|
||||||
|
let b2 = b * 2
|
||||||
|
let b8 = b / 8
|
||||||
|
let b25 = b / 25
|
||||||
|
let b15 = b / 15
|
||||||
|
|
||||||
|
this.scatter.resizeButton.style.width=b+"px"
|
||||||
|
this.scatter.resizeButton.style.height=b+"px"
|
||||||
|
|
||||||
|
Elements.setStyle(this.frame, {
|
||||||
|
// borderRadius: b8 + "px",
|
||||||
|
// boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
|
||||||
|
})
|
||||||
|
let size = "calc(100% - " + (2*b+2) +"px)"
|
||||||
|
Elements.setStyle(this.web, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
margin: b+"px"})
|
||||||
|
Elements.setStyle(this.webViewSnapshot, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
margin: b+"px"})
|
||||||
|
Elements.setStyle(this.webBackground, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
margin: b+"px"})
|
||||||
|
|
||||||
|
Elements.setStyle(this.overlay, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
margin: b+"px"})
|
||||||
|
|
||||||
|
Elements.setStyle(this.overlayCaptureEvents, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
opacity: 0.0001,
|
||||||
|
background: "white",
|
||||||
|
margin: b+"px"})
|
||||||
|
|
||||||
|
Elements.setStyle(this.closeButton, {
|
||||||
|
right: (b * 1.75) + "px",
|
||||||
|
bottom: "0px",
|
||||||
|
width: b+"px",
|
||||||
|
height: b+"px"})
|
||||||
|
|
||||||
|
Elements.setStyle(this.backButton, {
|
||||||
|
left: (b * 0.8) +"px",
|
||||||
|
bottom: "0px",
|
||||||
|
width: b+"px",
|
||||||
|
height: b+"px"})
|
||||||
|
|
||||||
|
Elements.setStyle(this.forwardButton, {
|
||||||
|
left: (this.border + (b * 0.8)) +"px",
|
||||||
|
bottom: "0px",
|
||||||
|
width: b+"px",
|
||||||
|
height: b+"px"})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
class PadFromElement {
|
||||||
|
|
||||||
|
constructor(element, scatterContainer, {
|
||||||
|
startScale=1.0, minScale=0.1, maxScale=1.0,
|
||||||
|
autoBringToFront=true,
|
||||||
|
translatable=true, scalable=true, rotatable=true,
|
||||||
|
movableX=true,
|
||||||
|
movableY=true,
|
||||||
|
rotationDegrees=null,
|
||||||
|
rotation=null,
|
||||||
|
onTransform=null,
|
||||||
|
transformOrigin = 'center center',
|
||||||
|
// extras which are in part needed
|
||||||
|
x=0,
|
||||||
|
y=0,
|
||||||
|
width=null,
|
||||||
|
height=null,
|
||||||
|
resizable=false,
|
||||||
|
} ={}) {
|
||||||
|
|
||||||
|
this.element = element
|
||||||
|
|
||||||
|
this.x = x
|
||||||
|
this.y = y
|
||||||
|
this.width = width
|
||||||
|
this.height = height
|
||||||
|
this.minScale = minScale
|
||||||
|
this.maxScale = maxScale
|
||||||
|
this.scatterContainer = scatterContainer
|
||||||
|
this.scale = startScale
|
||||||
|
this.scalable = scalable
|
||||||
|
this.rotatable = rotatable
|
||||||
|
this.rotationDegrees = this.startRotationDegrees
|
||||||
|
this.transformOrigin = transformOrigin
|
||||||
|
|
||||||
|
this.frame = document.createElement('div')
|
||||||
|
Elements.setStyle(this.frame, {
|
||||||
|
width: this.width+"px",
|
||||||
|
height: this.height+"px",
|
||||||
|
backgroundColor: "#333",
|
||||||
|
position: "fixed",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
overflow: "auto"})
|
||||||
|
|
||||||
|
this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")
|
||||||
|
|
||||||
|
document.body.appendChild( this.frame)
|
||||||
|
this.border = 50
|
||||||
|
|
||||||
|
this.frame.appendChild(this.element)
|
||||||
|
|
||||||
|
this.title = document.createElement("div")
|
||||||
|
this.title.innerHTML = "Titel"
|
||||||
|
this.title.style.color = "white"
|
||||||
|
this.frame.appendChild(this.title)
|
||||||
|
|
||||||
|
Elements.setStyle(this.title, {
|
||||||
|
position: "absolute"
|
||||||
|
})
|
||||||
|
// this.element.style.overflow = "auto"
|
||||||
|
// this.element.style.position = "absolute"
|
||||||
|
|
||||||
|
this.layout()
|
||||||
|
|
||||||
|
this.closeButton.addEventListener('click', ()=>{
|
||||||
|
this.frame.style.display="none"
|
||||||
|
})
|
||||||
|
|
||||||
|
this.scatter = new DOMScatter(this.frame, scatterContainer, {
|
||||||
|
x: this.x,
|
||||||
|
y: this.y,
|
||||||
|
startScale: this.startScale,
|
||||||
|
width: this.width,
|
||||||
|
height: this.height,
|
||||||
|
minScale: this.minScale,
|
||||||
|
maxScale: this.maxScale,
|
||||||
|
scalable: this.scalable,
|
||||||
|
resizable: true,
|
||||||
|
rotatable: this.rotatable})
|
||||||
|
|
||||||
|
this.scatter.bringToFront()
|
||||||
|
this.scatter.addTransformEventCallback((e) => {
|
||||||
|
let newBorder = 50 / e.scale
|
||||||
|
if (newBorder !== this.border) {
|
||||||
|
this.border = newBorder
|
||||||
|
this.layout()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.element.addEventListener('pointerdown', (e) => {
|
||||||
|
this.scatter.bringToFront()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
// this.frame.style.display="none"
|
||||||
|
this.frame.parentNode.removeChild(this.frame)
|
||||||
|
urlPadMap.delete(this.url)
|
||||||
|
}
|
||||||
|
|
||||||
|
addButton(src, value) {
|
||||||
|
let button = document.createElement("img")
|
||||||
|
button.type = "image"
|
||||||
|
button.className = "frameButton"
|
||||||
|
button.style.position = "absolute"
|
||||||
|
button.src = fileURL(src)
|
||||||
|
button.value="close"
|
||||||
|
button.draggable = false
|
||||||
|
this.frame.appendChild(button)
|
||||||
|
return button
|
||||||
|
}
|
||||||
|
|
||||||
|
layout() {
|
||||||
|
let b = this.border
|
||||||
|
let b2 = b * 2
|
||||||
|
let b8 = b / 8
|
||||||
|
let b25 = b / 25
|
||||||
|
let b15 = b / 15
|
||||||
|
|
||||||
|
this.scatter.resizeButton.style.width=b+"px"
|
||||||
|
this.scatter.resizeButton.style.height=b+"px"
|
||||||
|
|
||||||
|
Elements.setStyle(this.frame, {
|
||||||
|
// borderRadius: b8 + "px",
|
||||||
|
// boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
|
||||||
|
})
|
||||||
|
let size = "calc(100% - " + (2*b+2) +"px)"
|
||||||
|
Elements.setStyle(this.element, {
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
top: b+"px",
|
||||||
|
left: b+"px"})
|
||||||
|
Elements.setStyle(this.closeButton, {
|
||||||
|
right: (b * 0.75) + "px",
|
||||||
|
bottom: "0px",
|
||||||
|
width: b+"px",
|
||||||
|
height: b+"px"})
|
||||||
|
Elements.setStyle(this.title, {
|
||||||
|
left: (b * 1.5) + "px",
|
||||||
|
fontSize: (b * 0.8) + "px",
|
||||||
|
top: (0.1)+"0px"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { Pad, DOMPadContainer, PadFromElement }
|
||||||
3540
browser/padAccordion.js
Normal file
3540
browser/padAccordion.js
Normal file
File diff suppressed because it is too large
Load Diff
2814
browser/padAccordionOld.js
Normal file
2814
browser/padAccordionOld.js
Normal file
File diff suppressed because it is too large
Load Diff
1380
browser/padMinimal.js
Normal file
1380
browser/padMinimal.js
Normal file
File diff suppressed because it is too large
Load Diff
231
browser/preload.js
Normal file
231
browser/preload.js
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
const { fileURL, loadScript, hideCursor, showCursor } = require('./utils.js')
|
||||||
|
let { remote } = require('electron')
|
||||||
|
|
||||||
|
const webFrame = require('electron').webFrame
|
||||||
|
|
||||||
|
// UO: Disable unintended zoom of fullscreen page if user wants to zoom
|
||||||
|
// only parts like Eyevisit info cards.
|
||||||
|
console.log('Disable pinch zoom', webFrame)
|
||||||
|
webFrame.setVisualZoomLevelLimits(1, 1)
|
||||||
|
|
||||||
|
let padContainer = null
|
||||||
|
let hideCursorTimeout = null
|
||||||
|
let debug = false
|
||||||
|
let urlPadMap = new Map()
|
||||||
|
|
||||||
|
window.urlPadMap = urlPadMap
|
||||||
|
window.padLoadedHandler = []
|
||||||
|
window.nodeDirname = __dirname
|
||||||
|
|
||||||
|
function pageSize() {
|
||||||
|
var w = window,
|
||||||
|
d = document,
|
||||||
|
e = d.documentElement,
|
||||||
|
g = d.getElementsByTagName('body')[0],
|
||||||
|
width = w.innerWidth || e.clientWidth || g.clientWidth,
|
||||||
|
height = w.innerHeight || e.clientHeight || g.clientHeight
|
||||||
|
|
||||||
|
return [width, height]
|
||||||
|
}
|
||||||
|
|
||||||
|
let size = pageSize()
|
||||||
|
let pageWidth = size[0]
|
||||||
|
let pageHeight = size[1]
|
||||||
|
|
||||||
|
/* Open a new at x, y position. */
|
||||||
|
function openPad(url, x, y) {
|
||||||
|
console.log('openPad')
|
||||||
|
if (remote.getGlobal('useBrowserView')) {
|
||||||
|
return ipcRenderer.send('loadBrowserView', { url, x, y })
|
||||||
|
}
|
||||||
|
const { Pad } = require('./pad.js')
|
||||||
|
const { minimalPad } = require('./padMinimal.js')
|
||||||
|
pad = null
|
||||||
|
if (urlPadMap.has(url)) {
|
||||||
|
let pad = urlPadMap.get(url)
|
||||||
|
pad.scatter.bringToFront()
|
||||||
|
/*TweenMax.to(pad.frame, 0.5, {
|
||||||
|
boxShadow: "0 0 25px 5px white", onComplete: () => {
|
||||||
|
TweenMax.to(pad.frame, 0.5, { boxShadow: "none" })
|
||||||
|
}
|
||||||
|
})*/
|
||||||
|
TweenMax.to(pad.frame, 0.2, {
|
||||||
|
scale: '1.01',
|
||||||
|
onComplete: () => {
|
||||||
|
TweenMax.to(pad.frame, 0.2, { scale: '1' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// pad.scatter.moveTo(x, y)
|
||||||
|
return pad
|
||||||
|
}
|
||||||
|
y + 1600 > pageHeight ? (y = pageHeight - 1600) : (y = y)
|
||||||
|
if (remote.getGlobal('useMinimalPad')) {
|
||||||
|
pad = new minimalPad(padContainer, {
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
url: url,
|
||||||
|
tabbedView: true,
|
||||||
|
hasTtitleBar: false,
|
||||||
|
hideOnStart: false,
|
||||||
|
startScale: 1,
|
||||||
|
width: 1000,
|
||||||
|
height: 1500,
|
||||||
|
scalable: true,
|
||||||
|
rotatable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!remote.getGlobal('useMinimalPad')) {
|
||||||
|
pad = new Pad(padContainer, {
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
url: url,
|
||||||
|
hideOnStart: false,
|
||||||
|
startScale: 1,
|
||||||
|
width: 1000,
|
||||||
|
height: 1500,
|
||||||
|
scalable: true,
|
||||||
|
rotatable: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
urlPadMap.set(url, pad)
|
||||||
|
for (let callback of window.padLoadedHandler) {
|
||||||
|
callback(pad, url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.padLoadedHandler.push((pad, url) => {
|
||||||
|
console.log('Add specific behavior')
|
||||||
|
})
|
||||||
|
|
||||||
|
/* According to https://electron.atom.io/docs/faq/
|
||||||
|
"I can not use jQuery/RequireJS/Meteor/AngularJS in Electron" we
|
||||||
|
have to rename the symbols in the page before including other libraries.
|
||||||
|
Remember to use nodeRequire after this point.
|
||||||
|
*/
|
||||||
|
window.nodeRequire = require
|
||||||
|
delete window.require
|
||||||
|
delete window.exports
|
||||||
|
delete window.module
|
||||||
|
|
||||||
|
/* Create a DOMPadContainer, i.e. a special DOMScatterContainer, as a wrapper
|
||||||
|
of the document body.
|
||||||
|
*/
|
||||||
|
window.addEventListener('load', e => {
|
||||||
|
console.log('preloading')
|
||||||
|
// ../iwmlib/dist/iwmlib.3rdparty.js
|
||||||
|
// loadScript('../iwmlib/lib/3rdparty/preload.js', () => {
|
||||||
|
loadScript('../../iwmlib/dist/iwmlib.3rdparty.preload.js', () => {
|
||||||
|
//console.log("../iwmlib/dist/iwmlib.3rdparty.js loaded")
|
||||||
|
console.log('greensock loaded')
|
||||||
|
// loadScript('../iwmlib/dist/iwmlib.js', () => {
|
||||||
|
loadScript('../../iwmlib/dist/iwmlib.js', () => {
|
||||||
|
console.log('../iwmlib/dist/iwmlib.js loaded')
|
||||||
|
|
||||||
|
/* const { Pad, DOMPadContainer } = nodeRequire('./pad.js')
|
||||||
|
padContainer = new DOMPadContainer(document.body)
|
||||||
|
|
||||||
|
window.nodePadContainer = padContainer
|
||||||
|
ipcRenderer.send('padContainerLoaded') */
|
||||||
|
|
||||||
|
/*Register a handler for mousemove events. Hide the cursor a few
|
||||||
|
*seconds after the last move event.
|
||||||
|
*/
|
||||||
|
document.body.addEventListener('mousemove', e => {
|
||||||
|
showCursor()
|
||||||
|
clearTimeout(hideCursorTimeout)
|
||||||
|
hideCursorTimeout = setTimeout(hideCursor, 3000)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
if (debug) {
|
||||||
|
loadScript('../iwmlib/dist/iwmlib.pixi.js', () => {
|
||||||
|
console.log('../iwmlib/dist/iwmlib.pixi.js loaded')
|
||||||
|
const DebugApp = require('./debug.js')
|
||||||
|
let debugApp = new DebugApp(document.body)
|
||||||
|
debugApp.setup()
|
||||||
|
debugApp.run()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Register a handler for all click events and check whether the link target
|
||||||
|
opens a new window. If the link target is blank, prevent the default behavior
|
||||||
|
and create a Pad scatter object instead.
|
||||||
|
*/
|
||||||
|
window.addEventListener('click', e => {
|
||||||
|
let node = e.target
|
||||||
|
let url = ''
|
||||||
|
let target = ''
|
||||||
|
|
||||||
|
let multiUserMode = false // remote.getGlobal('multiUserMode') // DOMScatter && remote.getGlobal('multiUserMode')
|
||||||
|
|
||||||
|
// console.log("click", multiUserMode, remote.getGlobal('multiUserMode'))
|
||||||
|
if (multiUserMode) {
|
||||||
|
while (node !== null) {
|
||||||
|
if (node.tagName === 'A' || node.tagName === 'a') {
|
||||||
|
if (node.target instanceof SVGAnimatedString) {
|
||||||
|
url = node.href.baseVal
|
||||||
|
target = node.target.baseVal
|
||||||
|
} else {
|
||||||
|
url = node.href
|
||||||
|
target = node.target
|
||||||
|
}
|
||||||
|
if (target === '_blank') {
|
||||||
|
e.preventDefault()
|
||||||
|
openPad(url, e.clientX, e.clientY)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
node = node.parentNode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Register a handler for contextmenu events and check whether the link target
|
||||||
|
// opens a new window. If the link target is blank, prevent the default behavior
|
||||||
|
and show a popup menu with the option to open a pad instead.
|
||||||
|
*/
|
||||||
|
window.addEventListener('contextmenu', e => {
|
||||||
|
let node = e.target
|
||||||
|
let url = null
|
||||||
|
if (remote.getGlobal('multiUserMode')) {
|
||||||
|
while (node !== null) {
|
||||||
|
if (node.tagName === 'A' || node.tagName === 'a') {
|
||||||
|
if (node.target instanceof SVGAnimatedString) {
|
||||||
|
url = node.href.baseVal
|
||||||
|
} else {
|
||||||
|
url = node.href
|
||||||
|
}
|
||||||
|
e.preventDefault()
|
||||||
|
let point = { x: e.clientX, y: e.clientY }
|
||||||
|
PopupMenu.open(
|
||||||
|
{
|
||||||
|
'Open new Pad': () => openPad(url, e.clientX, e.clientY)
|
||||||
|
},
|
||||||
|
point,
|
||||||
|
{ fontSize: '0.8em' }
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
node = node.parentNode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Special error handling if the rendere process sends a error notification
|
||||||
|
log this error on the main console.
|
||||||
|
*/
|
||||||
|
let { Console } = require('console')
|
||||||
|
let debugConsole = new Console(process.stdout, process.stderr)
|
||||||
|
|
||||||
|
let { ipcRenderer } = require('electron')
|
||||||
|
window.addEventListener('error', event => {
|
||||||
|
debugConsole.error('PAGE ERROR', event.error, event.filename)
|
||||||
|
debugConsole.error('open', window.location.href)
|
||||||
|
ipcRenderer.send('error', 1)
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('newPad', (e, data) => {
|
||||||
|
openPad(data, 0, 0)
|
||||||
|
})
|
||||||
83
browser/preloadPad.js
Normal file
83
browser/preloadPad.js
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
let { remote } = require('electron')
|
||||||
|
let { ipcRenderer } = require('electron')
|
||||||
|
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
const webFrame = require('electron').webFrame
|
||||||
|
console.log('Disable pinch zoom', webFrame)
|
||||||
|
webFrame.setVisualZoomLevelLimits(1, 1)
|
||||||
|
|
||||||
|
window.nodePath = path
|
||||||
|
|
||||||
|
window.nodeDirname = __dirname
|
||||||
|
|
||||||
|
window.nodeRequire = require
|
||||||
|
delete window.require
|
||||||
|
delete window.exports
|
||||||
|
delete window.module
|
||||||
|
|
||||||
|
window.padLoadedHandler = []
|
||||||
|
|
||||||
|
let pointerCounter = 0
|
||||||
|
|
||||||
|
window.addEventListener('pointerdown', (e) => {
|
||||||
|
//e.preventDefault()
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerDown')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerDown')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointerup', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerUp')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerUp')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointerenter', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerEnter')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerEnter')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointercancel', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerCancel')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerCancel')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointerleave', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerLeave')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerLeave')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointerout', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerOut')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerOut')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointerover', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerOver')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerOver')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('pointermove', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('webviewPointerMove')")
|
||||||
|
ipcRenderer.sendToHost('webviewPointerMove')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('touchmove', (e) => {
|
||||||
|
// console.log("ipcRenderer.sendToHost('touchmove')")
|
||||||
|
ipcRenderer.sendToHost('touchMove')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('touchstart', (e) => {
|
||||||
|
pointerCounter++
|
||||||
|
// console.log("ipcRenderer.sendToHost('touchstart')")
|
||||||
|
ipcRenderer.sendToHost('touchStart')
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('touchend', (e) => {
|
||||||
|
pointerCounter--
|
||||||
|
// console.log("ipcRenderer.sendToHost('touchend')")
|
||||||
|
ipcRenderer.sendToHost('touchEnd')
|
||||||
|
})
|
||||||
|
|
||||||
|
ipcRenderer.on('overlayEvent', function () {
|
||||||
|
console.log('hello world From Preload')
|
||||||
|
})
|
||||||
47
browser/store.js
Normal file
47
browser/store.js
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
const electron = require('electron')
|
||||||
|
const path = require('path')
|
||||||
|
const fs = require('fs')
|
||||||
|
|
||||||
|
class Store {
|
||||||
|
|
||||||
|
constructor(opts) {
|
||||||
|
|
||||||
|
// Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
|
||||||
|
// app.getPath('userData') will return a string of the user's app data directory path.
|
||||||
|
const userDataPath = (electron.app || electron.remote.app).getPath('userData')
|
||||||
|
// We'll use the `configName` property to set the file name and path.join to bring it all together as a string
|
||||||
|
this.path = path.join(userDataPath, opts.configName + '.json')
|
||||||
|
|
||||||
|
this.data = parseDataFile(this.path, opts.defaults)
|
||||||
|
this.data = Object.assign(opts.defaults, this.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// This will just return the property on the `data` object
|
||||||
|
get(key) {
|
||||||
|
return this.data[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
// ...and this will set it
|
||||||
|
set(key, val) {
|
||||||
|
this.data[key] = val
|
||||||
|
// Wait, I thought using the node.js' synchronous APIs was bad form?
|
||||||
|
// We're not writing a server so there's not nearly the same IO demand on the process
|
||||||
|
// Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
|
||||||
|
// we might lose that data. Note that in a real app, we would try/catch this.
|
||||||
|
fs.writeFileSync(this.path, JSON.stringify(this.data))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseDataFile(filePath, defaults) {
|
||||||
|
// We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
|
||||||
|
// `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
|
||||||
|
try {
|
||||||
|
return JSON.parse(fs.readFileSync(filePath))
|
||||||
|
} catch(error) {
|
||||||
|
// if there was some kind of error, return the passed in defaults instead.
|
||||||
|
return defaults
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// expose the class
|
||||||
|
module.exports = Store
|
||||||
113
browser/test.js
Normal file
113
browser/test.js
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
let fs = require('fs')
|
||||||
|
let path = require('path')
|
||||||
|
let {thumbnail} = require('./utils.js')
|
||||||
|
|
||||||
|
let pairs = []
|
||||||
|
let urlMap = new Map()
|
||||||
|
function isFile(path) {
|
||||||
|
try {
|
||||||
|
return !fs.lstatSync(path).isDirectory()
|
||||||
|
} catch(e) {
|
||||||
|
if (e.code == 'ENOENT'){
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function listPairs(src, dst, skipFiles=true) {
|
||||||
|
let dir = fs.readdirSync(src)
|
||||||
|
for(let name of dir) {
|
||||||
|
let srcPath = src + name
|
||||||
|
if (isFile(srcPath) && !skipFiles) {
|
||||||
|
if (srcPath.endsWith('.html')) {
|
||||||
|
let dstPath = dst + name.replace(/.html/, '.png')
|
||||||
|
pairs.push([srcPath, dstPath])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (srcPath.endsWith('.'))
|
||||||
|
continue
|
||||||
|
let indexPath = srcPath + path.sep + 'index.html'
|
||||||
|
if (isFile(indexPath)) {
|
||||||
|
let thumbnailPath = indexPath.replace(/index.html/, 'thumbnail.png')
|
||||||
|
pairs.push([indexPath, thumbnailPath])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function capturePage(focusedWindow, dstPath) {
|
||||||
|
focusedWindow.capturePage( (image) => {
|
||||||
|
fs.writeFile(dstPath, thumbnail(image), (err) => {
|
||||||
|
if (err) throw err;
|
||||||
|
nextLoadTest(focusedWindow)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function testLoading(focusedWindow, filePath, dstPath) {
|
||||||
|
let urlPath = filePath.replace(path.sep, '/')
|
||||||
|
let basePath = `${__dirname}`.replace('/browser', '')
|
||||||
|
let shortURL = `file://${basePath}/${urlPath}`
|
||||||
|
let fullURL = `file://${__dirname}/../../${urlPath}`
|
||||||
|
// console.log({basePath, shortURL, fullURL})
|
||||||
|
if (focusedWindow) {
|
||||||
|
urlMap.set(shortURL, dstPath)
|
||||||
|
focusedWindow.webContents.session.clearCache(() => console.log('Cache cleared'))
|
||||||
|
focusedWindow.webContents.loadURL(shortURL)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function listLibPairs() {
|
||||||
|
let src = "lib" + path.sep
|
||||||
|
let dst = "lib" + path.sep + 'thumbnails' + path.sep
|
||||||
|
listPairs(src, dst, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function listAppPairs() {
|
||||||
|
let src = "apps" + path.sep
|
||||||
|
let dst = "apps" + path.sep
|
||||||
|
listPairs(src, dst)
|
||||||
|
}
|
||||||
|
|
||||||
|
function listSrcPairs() {
|
||||||
|
let src = "src" + path.sep
|
||||||
|
let dst = "src" + path.sep
|
||||||
|
listPairs(src, dst)
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextLoadTest(focusedWindow) {
|
||||||
|
if (global.errorCount > 0 && global.stopTestsOnError) {
|
||||||
|
console.log("Test aborted")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (pairs.length > 0) {
|
||||||
|
let [file, image] = pairs.pop()
|
||||||
|
testLoading(focusedWindow, file, image)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.log("All thumbnails created")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadTests(focusedWindow) {
|
||||||
|
global.errorCount = 0
|
||||||
|
focusedWindow.webContents.on('did-finish-load', (e) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
let url = e.sender.history[e.sender.history.length-1]
|
||||||
|
dstPath = urlMap.get(url)
|
||||||
|
capturePage(focusedWindow, dstPath)
|
||||||
|
}, 5000)
|
||||||
|
})
|
||||||
|
|
||||||
|
listLibPairs()
|
||||||
|
listSrcPairs()
|
||||||
|
listAppPairs()
|
||||||
|
nextLoadTest(focusedWindow)
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = loadTests
|
||||||
|
|
||||||
|
|
||||||
38
browser/utils.js
Normal file
38
browser/utils.js
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
|
||||||
|
function fileURL(src) {
|
||||||
|
let dir = __dirname.replace(/\\/g, '/')
|
||||||
|
return `file://${dir}/${src}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadScript(src, callback) {
|
||||||
|
let url = fileURL(src)
|
||||||
|
let script = document.createElement('script')
|
||||||
|
script.onload = () => {
|
||||||
|
if (callback) {
|
||||||
|
callback.call(this, script)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
script.src = url
|
||||||
|
document.head.appendChild(script)
|
||||||
|
}
|
||||||
|
|
||||||
|
function thumbnail(screenshot) {
|
||||||
|
return screenshot.resize({ width: 1024 }).toPNG()
|
||||||
|
}
|
||||||
|
|
||||||
|
let hiddenCursor = fileURL('../assets/cursor/cur0000.cur')
|
||||||
|
let defaultCursor = fileURL('../assets/cursor/cur1054.cur')
|
||||||
|
|
||||||
|
function hideCursor() {
|
||||||
|
// console.log("hideCursor")
|
||||||
|
document.body.style.cursor = `url('${hiddenCursor}'), default`
|
||||||
|
}
|
||||||
|
|
||||||
|
function showCursor() {
|
||||||
|
document.body.style.cursor = `url('${defaultCursor}'), default`
|
||||||
|
// console.log("showCursor")
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
fileURL, loadScript, thumbnail, hideCursor, showCursor
|
||||||
|
}
|
||||||
@ -18,7 +18,7 @@ html {
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-mode nav{
|
.dark-mode nav {
|
||||||
border-color: var(--white);
|
border-color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -264,3 +264,23 @@ canvas {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#ctxmenu {
|
||||||
|
position: fixed;
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px lightgray solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ctxmenu > a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ctxmenu > a:hover {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|||||||
@ -27,6 +27,10 @@ body {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: white;
|
color: white;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
@ -34,7 +38,9 @@ h3 {
|
|||||||
background-color: rgba(0, 0, 15, 0.5);
|
background-color: rgba(0, 0, 15, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
a { text-decoration: none; }
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
div.wrapper {
|
div.wrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -46,28 +52,48 @@ div.wrapper {
|
|||||||
|
|
||||||
/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
|
/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
|
||||||
@-webkit-keyframes color_change {
|
@-webkit-keyframes color_change {
|
||||||
from { background-color: rgba(0, 0, 0, 0); }
|
from {
|
||||||
to { background-color: red; }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-moz-keyframes color_change {
|
@-moz-keyframes color_change {
|
||||||
from { background-color: rgba(0, 0, 0, 0); }
|
from {
|
||||||
to { background-color: red; }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-ms-keyframes color_change {
|
@-ms-keyframes color_change {
|
||||||
from { background-color: rgba(0, 0, 0, 0); }
|
from {
|
||||||
to { background-color: red; }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-o-keyframes color_change {
|
@-o-keyframes color_change {
|
||||||
from { background-color: rgba(0, 0, 0, 0); }
|
from {
|
||||||
to { background-color: red; }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes color_change {
|
@keyframes color_change {
|
||||||
from { background-color: rgba(0, 0, 0, 0); }
|
from {
|
||||||
to { background-color: red; }
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
|
/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
|
||||||
@ -83,7 +109,7 @@ div.wrapper {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail::after {
|
.thumbnail::after {
|
||||||
content: "";
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -145,12 +171,12 @@ div.title {
|
|||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
-webkit-align-items: flex-end;
|
-webkit-align-items: flex-start;
|
||||||
align-items: flex-end;
|
align-items: flex-start;
|
||||||
-webkit-flex-wrap: wrap;
|
-webkit-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-align-content: flex-end;
|
-webkit-align-content: flex-start;
|
||||||
align-content: flex-end;
|
align-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** See https://github.com/electron/electron/issues/4420 */
|
/** See https://github.com/electron/electron/issues/4420 */
|
||||||
|
|||||||
113
doc/ast.html
113
doc/ast.html
@ -1,30 +1,28 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<style>
|
<style>
|
||||||
|
.node circle {
|
||||||
.node circle {
|
|
||||||
fill: #999;
|
fill: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node text {
|
.node text {
|
||||||
font: 10px sans-serif;
|
font: 10px sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node--internal circle {
|
.node--internal circle {
|
||||||
fill: #555;
|
fill: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node--internal text {
|
.node--internal text {
|
||||||
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
|
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: #555;
|
stroke: #555;
|
||||||
stroke-opacity: 0.4;
|
stroke-opacity: 0.4;
|
||||||
stroke-width: 1.5px;
|
stroke-width: 1.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<svg width="960" height="512"></svg>
|
<svg width="960" height="512"></svg>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||||
@ -32,12 +30,11 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.1/d3.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/4.0.11/acorn.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/acorn/4.0.11/acorn.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
fetch('../apps/loader/js/main.js')
|
||||||
fetch("../apps/loader/js/main.js")
|
.then((response) => response.text())
|
||||||
.then(response => response.text())
|
.then((text) => {
|
||||||
.then(text => {
|
|
||||||
const ast = acorn.parse(text, {
|
const ast = acorn.parse(text, {
|
||||||
sourceType: "module",
|
sourceType: 'module',
|
||||||
// collect ranges for each node
|
// collect ranges for each node
|
||||||
ranges: true,
|
ranges: true,
|
||||||
// collect comments in Esprima's format
|
// collect comments in Esprima's format
|
||||||
@ -51,17 +48,16 @@ fetch("../apps/loader/js/main.js")
|
|||||||
drawAst(ast)
|
drawAst(ast)
|
||||||
})
|
})
|
||||||
|
|
||||||
/*
|
/*
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
function drawAst(ast) {
|
function drawAst(ast) {
|
||||||
|
|
||||||
// Create SVG element
|
// Create SVG element
|
||||||
//---------------------------
|
//---------------------------
|
||||||
let svg = d3.select("svg")
|
let svg = d3.select('svg')
|
||||||
const width = svg.attr("width")
|
const width = svg.attr('width')
|
||||||
const height = svg.attr("height")
|
const height = svg.attr('height')
|
||||||
let g = svg.append("g").attr("transform", "translate(40,0)")
|
let g = svg.append('g').attr('transform', 'translate(40,0)')
|
||||||
|
|
||||||
// Convert data
|
// Convert data
|
||||||
//---------------------------
|
//---------------------------
|
||||||
@ -70,7 +66,7 @@ function drawAst(ast) {
|
|||||||
// Create D3 Hierarchy
|
// Create D3 Hierarchy
|
||||||
//---------------------------
|
//---------------------------
|
||||||
let root = d3.hierarchy(data).sort((a, b) => {
|
let root = d3.hierarchy(data).sort((a, b) => {
|
||||||
return (a.height - b.height) || a.data.name.localeCompare(b.data.name);
|
return a.height - b.height || a.data.name.localeCompare(b.data.name)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Create D3 Cluster
|
// Create D3 Cluster
|
||||||
@ -80,46 +76,50 @@ function drawAst(ast) {
|
|||||||
|
|
||||||
// Create SVG elements
|
// Create SVG elements
|
||||||
//---------------------------
|
//---------------------------
|
||||||
let link = g.selectAll(".link")
|
let link = g
|
||||||
|
.selectAll('.link')
|
||||||
.data(root.descendants().slice(1))
|
.data(root.descendants().slice(1))
|
||||||
.enter().append("path")
|
.enter()
|
||||||
.attr("class", "link")
|
.append('path')
|
||||||
.attr("d", d => {
|
.attr('class', 'link')
|
||||||
return `M${d.y},${d.x}C${d.parent.y + 100},${d.x} ${d.parent.y + 100},${d.parent.x} ${d.parent.y},${d.parent.x}`
|
.attr('d', (d) => {
|
||||||
|
return `M${d.y},${d.x}C${d.parent.y + 100},${d.x} ${d.parent.y + 100},${d.parent.x} ${d.parent.y},${
|
||||||
|
d.parent.x
|
||||||
|
}`
|
||||||
})
|
})
|
||||||
|
|
||||||
let node = g.selectAll(".node")
|
let node = g
|
||||||
|
.selectAll('.node')
|
||||||
.data(root.descendants())
|
.data(root.descendants())
|
||||||
.enter().append("g")
|
.enter()
|
||||||
.attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf"))
|
.append('g')
|
||||||
.attr("transform", d => `translate(${d.y},${d.x})`)
|
.attr('class', (d) => 'node' + (d.children ? ' node--internal' : ' node--leaf'))
|
||||||
|
.attr('transform', (d) => `translate(${d.y},${d.x})`)
|
||||||
|
|
||||||
node.append("circle")
|
node.append('circle').attr('r', 5)
|
||||||
.attr("r", 5)
|
|
||||||
|
|
||||||
node.append("text")
|
node.append('text')
|
||||||
.attr("dy", 3)
|
.attr('dy', 3)
|
||||||
.attr("x", d => d.children ? -8 : 8)
|
.attr('x', (d) => (d.children ? -8 : 8))
|
||||||
.style("text-anchor", d => d.children ? "end" : "start")
|
.style('text-anchor', (d) => (d.children ? 'end' : 'start'))
|
||||||
.text(d => d.data.name)
|
.text((d) => d.data.name)
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
function acornToHierarchy(ast) {
|
function acornToHierarchy(ast) {
|
||||||
|
|
||||||
console.info(JSON.stringify(ast))
|
console.info(JSON.stringify(ast))
|
||||||
|
|
||||||
let data = {}
|
let data = {}
|
||||||
|
|
||||||
for (const clazz of ast.body) {
|
for (const clazz of ast.body) {
|
||||||
if (clazz.type === "ClassDeclaration") {
|
if (clazz.type === 'ClassDeclaration') {
|
||||||
data.name = clazz.id.name
|
data.name = clazz.id.name
|
||||||
data.children = []
|
data.children = []
|
||||||
|
|
||||||
for (const method of clazz.body.body) {
|
for (const method of clazz.body.body) {
|
||||||
if (method.type === "MethodDefinition") {
|
if (method.type === 'MethodDefinition') {
|
||||||
data.children.push({
|
data.children.push({
|
||||||
name: method.key.name,
|
name: method.key.name,
|
||||||
children: []
|
children: []
|
||||||
@ -155,20 +155,5 @@ function acornToHierarchy(ast) {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
27
lib/_menu.js
Executable file
27
lib/_menu.js
Executable file
@ -0,0 +1,27 @@
|
|||||||
|
const mapping = {
|
||||||
|
'lib.Application': './app.html',
|
||||||
|
'lib.Capabilities': './capabilities.html',
|
||||||
|
'lib.Card': './card/index.html',
|
||||||
|
'lib.Pixi': './pixi/index.html',
|
||||||
|
'pixi.App': './pixi/app.html'
|
||||||
|
}
|
||||||
|
|
||||||
|
function menu(event) {
|
||||||
|
let key = event.target.innerText
|
||||||
|
let html = ''
|
||||||
|
|
||||||
|
for (let k of Object.keys(mapping)) {
|
||||||
|
if (k.startsWith(key)) {
|
||||||
|
let rest = k.slice(key.length)
|
||||||
|
let url = mapping[k]
|
||||||
|
html += `<a href="${url}">${rest}</a>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
event.preventDefault()
|
||||||
|
let contextMenu = document.createElement('div')
|
||||||
|
contextMenu.id = 'ctxmenu'
|
||||||
|
contextMenu.style = `top:${event.pageY - 10}px;left:${event.pageX - 40}px`
|
||||||
|
contextMenu.onmouseleave = () => (contextMenu.outerHTML = '')
|
||||||
|
contextMenu.innerHTML = html
|
||||||
|
document.body.appendChild(contextMenu)
|
||||||
|
}
|
||||||
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>App</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css">
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
@ -12,7 +13,7 @@
|
|||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1>
|
||||||
Application
|
<a href="index.html">lib.</a>Application
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
|
IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
|
||||||
|
|||||||
@ -1,42 +1,30 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Doctests Capabilities</title>
|
<title>Doctests Capabilities</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script type="text/javascript" src="../dist/iwmlib.js"></script>
|
<script type="text/javascript" src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run(); CapabilitiesTests.testAll()">
|
<body onload="Doctest.run(); CapabilitiesTests.testAll()">
|
||||||
<main>
|
<main>
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Capabilities</h1>
|
||||||
Capabilities
|
<p>
|
||||||
</h1>
|
Browsers differ in many aspects, from touch support, support of CSS and HTML5 standards, to javascript
|
||||||
<p>Browsers differ in many aspects, from touch support, support of CSS and HTML5 standards, to
|
versions. This page collects some of these differences.
|
||||||
javascript versions. This page collects some of these differences.
|
</p>
|
||||||
<h3>
|
|
||||||
User Agent
|
|
||||||
</h3>
|
|
||||||
<p id="user_agent">
|
|
||||||
</p>
|
|
||||||
<h3>
|
|
||||||
Device Pixel Ratio
|
|
||||||
</h3>
|
|
||||||
<p id="device_pixel_ratio">
|
|
||||||
</p>
|
|
||||||
<h3>
|
|
||||||
Multi Touch Table
|
|
||||||
</h3>
|
|
||||||
<p id="multi_touch_table">
|
|
||||||
</p>
|
|
||||||
<h3>
|
|
||||||
Supported Events
|
|
||||||
</h3>
|
|
||||||
<p id="supported_events">
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
|
<h3>User Agent</h3>
|
||||||
|
<p id="user_agent"></p>
|
||||||
|
<h3>Device Pixel Ratio</h3>
|
||||||
|
<p id="device_pixel_ratio"></p>
|
||||||
|
<h3>Multi Touch Table</h3>
|
||||||
|
<p id="multi_touch_table"></p>
|
||||||
|
<h3>Supported Events</h3>
|
||||||
|
<p id="supported_events"></p>
|
||||||
|
<script class="doctest">
|
||||||
Doctest.expect(Capabilities.supportsMouseEvents(), true)
|
Doctest.expect(Capabilities.supportsMouseEvents(), true)
|
||||||
|
|
||||||
if (Capabilities.supportsTouchEvents()) {
|
if (Capabilities.supportsTouchEvents()) {
|
||||||
@ -46,30 +34,23 @@ javascript versions. This page collects some of these differences.
|
|||||||
if (Capabilities.supportsPointerEvents()) {
|
if (Capabilities.supportsPointerEvents()) {
|
||||||
Doctest.expect(Capabilities.supportsPointerEvents(), true)
|
Doctest.expect(Capabilities.supportsPointerEvents(), true)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<h3>
|
<h3>Interactive Alerts</h3>
|
||||||
Interactive Alerts
|
<p>
|
||||||
</h3>
|
Standard alerts are displayed quite differently, on Windows 10, for instance the browser URL is
|
||||||
<p>
|
encluded, and a checkbox that allows to hide the alert dialogs.
|
||||||
Standard alerts are displayed quite differently, on Windows 10, for instance
|
</p>
|
||||||
the browser URL is encluded, and a checkbox that allows to hide the
|
<button onclick="alert('Ok'); console.log('Alert')">Alert</button>
|
||||||
alert dialogs.
|
<button onclick="CapabilitiesTests.testConfirm()">Confirm</button>
|
||||||
</p>
|
<button onclick="CapabilitiesTests.testPrompt()">Prompt</button>
|
||||||
<button onclick="alert('Ok'); console.log('Alert')">Alert</button>
|
<p id="demo">Result</p>
|
||||||
<button onclick="CapabilitiesTests.testConfirm()">Confirm</button>
|
<hr />
|
||||||
<button onclick="CapabilitiesTests.testPrompt()">Prompt</button>
|
|
||||||
<p id="demo">
|
|
||||||
Result
|
|
||||||
</p>
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
|
<h2>References</h2>
|
||||||
<h2>
|
<ul>
|
||||||
References
|
|
||||||
</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="http://caniuse.com">Can I use</a></li>
|
<li><a href="http://caniuse.com">Can I use</a></li>
|
||||||
<li><a href="http://webglreport.com">WebGL Report</a></li>
|
<li><a href="http://webglreport.com">WebGL Report</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<body onload="Doctest.run();">
|
<body onload="Doctest.run();">
|
||||||
<h1>
|
<h1>
|
||||||
Cards
|
<a href="../index.html">lib.</a><a href="index.html">card.</a>Cards
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces
|
Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces
|
||||||
|
|||||||
@ -1,11 +1,10 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>Coordinates Doctest</title>
|
<title>Coordinates Doctest</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
@ -31,37 +30,44 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Coordinates</h1>
|
||||||
Coordinates
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
|
To position objects in defined spatial relationships presupposes a clear understanding of the involved
|
||||||
Unfortunately, several systems with several conventions are involved:
|
coordinate systems. Unfortunately, several systems with several conventions are involved:
|
||||||
<a href="https://javascript.info/coordinates">DOM & CSS</a>,
|
<a href="https://javascript.info/coordinates">DOM & CSS</a>,
|
||||||
<a href="https://www.sarasoueidan.com/blog/svg-coordinate-systems/SVG">SVG</a>,
|
<a href="https://www.sarasoueidan.com/blog/svg-coordinate-systems/SVG">SVG</a>,
|
||||||
<a href="https://www.w3schools.com/graphics/canvas_coordinates.asp">Canvas</a>
|
<a href="https://www.w3schools.com/graphics/canvas_coordinates.asp">Canvas</a>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
We need a common reference system to switch between these coordinate systems. As the uttermost context, the browser page
|
We need a common reference system to switch between these coordinate systems. As the uttermost context, the
|
||||||
coordinate system is the most natural one. A simple API was long missing but has now been established in most modern
|
browser page coordinate system is the most natural one. A simple API was long missing but has now been
|
||||||
browsers with
|
established in most modern browsers with
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/convertPointFromNoteToPage">window.convertPointFromNoteToPage</a> and the inverse
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/convertPointFromNoteToPage"
|
||||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/convertPointFromPageToNode">window.convertPointFromPageToNode</a>.
|
>window.convertPointFromNoteToPage</a
|
||||||
Although MDN Web Docs warns about their Non-standard nature the methods work in browsers targeted
|
>
|
||||||
by the IWM Browser project. This doctest assures that this assumption can be tested.
|
and the inverse
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/convertPointFromPageToNode"
|
||||||
|
>window.convertPointFromPageToNode</a
|
||||||
|
>. Although MDN Web Docs warns about their Non-standard nature the methods work in browsers targeted by the
|
||||||
|
IWM Browser project. This doctest assures that this assumption can be tested.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at a scatter object with a rotatable local coordinate system. We try to follow a point in this local coordinate
|
<p>
|
||||||
system by showing a marker outside the scatter that follows the point.
|
Let's look at a scatter object with a rotatable local coordinate system. We try to follow a point in this
|
||||||
|
local coordinate system by showing a marker outside the scatter that follows the point.
|
||||||
</p>
|
</p>
|
||||||
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
|
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px">
|
||||||
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
||||||
must also be positioned absolutely. -->
|
must also be positioned absolutely. -->
|
||||||
<img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
|
<img id="women" draggable="false" style="position: absolute" src="examples/women.jpeg" />
|
||||||
|
|
||||||
<canvas id="canvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid red;">
|
<canvas
|
||||||
|
id="canvas"
|
||||||
|
height="280"
|
||||||
|
style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid red"
|
||||||
|
>
|
||||||
Canvas not supported.
|
Canvas not supported.
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div>
|
||||||
@ -102,9 +108,8 @@
|
|||||||
context.beginPath()
|
context.beginPath()
|
||||||
context.arc(canvasPoint.x, canvasPoint.y, 12, 0, Math.PI * 2)
|
context.arc(canvasPoint.x, canvasPoint.y, 12, 0, Math.PI * 2)
|
||||||
context.stroke()
|
context.stroke()
|
||||||
|
|
||||||
}
|
}
|
||||||
animate(followPoint)
|
animate(followPoint)
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<main>
|
<main>
|
||||||
<h1>
|
<h1>
|
||||||
Doctests
|
<a href="index.html">lib.</a>Doctests
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
Doctests are explanatory descriptions of programs with executable code examples.
|
Doctests are explanatory descriptions of programs with executable code examples.
|
||||||
|
|||||||
@ -1,47 +1,48 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Electron Node.js Test</title>
|
<title>Electron Node.js Test</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="./3rdparty/all.js"></script>
|
<script src="./3rdparty/all.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<main>
|
<main>
|
||||||
<h1>
|
<h1>Electron Node.js Test</h1>
|
||||||
Electron Node.js Test
|
<p>
|
||||||
</h1>
|
This doctest is expected to work only within the IWMBrowser. IWMBrowser windows are opened with a
|
||||||
<p>
|
preload.js which is evaluated before the HTML is loaded. According to
|
||||||
This doctest is expected to work only within the IWMBrowser. IWMBrowser windows
|
<a href="https://electron.atom.io/docs/faq/"
|
||||||
are opened with a preload.js which is evaluated before the HTML is loaded.
|
>"I can not use jQuery/RequireJS/Meteor/AngularJS in Electron"</a
|
||||||
According to
|
>
|
||||||
<a href="https://electron.atom.io/docs/faq/">"I can not use jQuery/RequireJS/Meteor/AngularJS in Electron"</a> we
|
we have to rename the symbols in the page before other libraries are included. In order to access
|
||||||
have to rename the symbols in the page before other libraries are included.
|
node.js modules we can use `nodeRequire` instead.
|
||||||
In order to access node.js modules we can use `nodeRequire` instead.
|
</p>
|
||||||
</p>
|
<p>As a simple test we try to load a file from the filesystem:</p>
|
||||||
<p>As a simple test we try to load a file from the filesystem:</p>
|
<script class="doctest">
|
||||||
<script class="doctest">
|
if (typeof nodeRequire != 'undefined') {
|
||||||
|
|
||||||
if (typeof(nodeRequire) != 'undefined') {
|
|
||||||
let fs = nodeRequire('fs')
|
let fs = nodeRequire('fs')
|
||||||
let content = fs.readFileSync('./index.html')
|
let content = fs.readFileSync('./index.html')
|
||||||
let lines = content.toString().split(/\n/)
|
let lines = content.toString().split(/\n/)
|
||||||
console.log("First line", lines[0] )
|
console.log('First line', lines[0])
|
||||||
Doctest.expect(lines[0], '<html>')
|
Doctest.expect(lines[0], '<html>')
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
<p>
|
||||||
<p>As simple as this test is, it shows that within the IWMBrowser one import all node.js
|
As simple as this test is, it shows that within the IWMBrowser one import all node.js modules. Don't
|
||||||
modules. Don't forget to test for nodeRequire to avoid runtime errors in other browsers.
|
forget to test for nodeRequire to avoid runtime errors in other browsers.
|
||||||
</p>
|
</p>
|
||||||
<h2>
|
<h2>References</h2>
|
||||||
References
|
<ul>
|
||||||
</h2>
|
<li>
|
||||||
<ul>
|
<a href="https://electron.atom.io/docs/faq/"
|
||||||
<li><a href="https://electron.atom.io/docs/faq/">I can not use jQuery/RequireJS/Meteor/AngularJS in Electron</a></li>
|
>I can not use jQuery/RequireJS/Meteor/AngularJS in Electron</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,26 +1,25 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Events</h1>
|
||||||
Events
|
<p>
|
||||||
</h1>
|
For functional tests it can be useful to simulate event or record and playback events. This module provides
|
||||||
<p>
|
basic support for extracting data from events and serializing events into a JSON format that allows to save
|
||||||
For functional tests it can be useful to simulate event or record and playback events.
|
and load sequences of events.
|
||||||
This module provides basic support for extracting data from events and serializing
|
</p>
|
||||||
events into a JSON format that allows to save and load sequences of events.
|
<p>
|
||||||
</p>
|
Let's look at an example of a HTML structure with click handlers. The click handler actions log messages
|
||||||
<p>
|
that can be tested.
|
||||||
Let's look at an example of a HTML structure with click handlers. The click
|
</p>
|
||||||
handler actions log messages that can be tested.</p>
|
<pre><code class="html">
|
||||||
<pre><code class="html">
|
|
||||||
<div>
|
<div>
|
||||||
<img id="women" src="examples/women.jpeg"
|
<img id="women" src="examples/women.jpeg"
|
||||||
onclick="record(event); Doctest.log('Lady clicked')"/>
|
onclick="record(event); Doctest.log('Lady clicked')"/>
|
||||||
@ -31,46 +30,53 @@ handler actions log messages that can be tested.</p>
|
|||||||
</vide>
|
</vide>
|
||||||
</div>
|
</div>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<div id="example" class="interactive"
|
<div id="example" class="interactive" style="position: relative; width: 100%; border: 1px solid lightgray">
|
||||||
style="position:relative; width: 100%; border: 1px solid lightgray">
|
<img
|
||||||
<img style="margin:8px" id="women" src="examples/women.jpeg"
|
style="margin: 8px"
|
||||||
onclick="record(event); Doctest.log('Lady clicked')"/>
|
id="women"
|
||||||
<video id="movie" style="margin:8px" width="250" data-zoomcap="Kugellaufuhr"
|
src="examples/women.jpeg"
|
||||||
|
onclick="record(event); Doctest.log('Lady clicked')"
|
||||||
|
/>
|
||||||
|
<video
|
||||||
|
id="movie"
|
||||||
|
style="margin: 8px"
|
||||||
|
width="250"
|
||||||
|
data-zoomcap="Kugellaufuhr"
|
||||||
onclick="record(event); Doctest.log('Movie clicked')"
|
onclick="record(event); Doctest.log('Movie clicked')"
|
||||||
onmousedown="record(event)"
|
onmousedown="record(event)"
|
||||||
onmouseup="record(event)"
|
onmouseup="record(event)"
|
||||||
controls>
|
controls
|
||||||
<source src="examples/movie.mp4" type="video/mp4">
|
>
|
||||||
|
<source src="examples/movie.mp4" type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<button onclick="eventRecorder.stopRecording(); eventRecorder.startReplay()">Replay</button>
|
<button onclick="eventRecorder.stopRecording(); eventRecorder.startReplay()">Replay</button>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
var eventRecorder = new EventRecorder()
|
var eventRecorder = new EventRecorder()
|
||||||
|
|
||||||
function record(event) {
|
function record(event) {
|
||||||
let target = event.target
|
let target = event.target
|
||||||
target.style.boxShadow = "0px 5px 10px gray"
|
target.style.boxShadow = '0px 5px 10px gray'
|
||||||
setTimeout(() => target.style.boxShadow = "", 1000)
|
setTimeout(() => (target.style.boxShadow = ''), 1000)
|
||||||
eventRecorder.record(event)
|
eventRecorder.record(event)
|
||||||
}
|
}
|
||||||
|
|
||||||
let womenSel = Events.selector(women)
|
let womenSel = Events.selector(women)
|
||||||
let movieSel = Events.selector(movie)
|
let movieSel = Events.selector(movie)
|
||||||
|
|
||||||
Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel})
|
Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel })
|
||||||
Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel})
|
Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel })
|
||||||
|
|
||||||
Doctest.expectLog('Lady clicked',
|
Doctest.expectLog('Lady clicked', 'Movie clicked')
|
||||||
'Movie clicked')
|
</script>
|
||||||
|
<h2>References</h2>
|
||||||
</script>
|
<ul>
|
||||||
<h2>
|
|
||||||
References
|
|
||||||
</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://gist.github.com/iahu/aafc2492d83d70e42c98">Safari Touch Emulator</a></li>
|
<li><a href="https://gist.github.com/iahu/aafc2492d83d70e42c98">Safari Touch Emulator</a></li>
|
||||||
<li><a href="https://www.reddit.com/r/javascript/comments/2laqaf/how_to_trigger_a_touch_event/">How to Trigger Touch Events</a></li>
|
<li>
|
||||||
</ul>
|
<a href="https://www.reddit.com/r/javascript/comments/2laqaf/how_to_trigger_a_touch_event/"
|
||||||
|
>How to Trigger Touch Events</a
|
||||||
</body>
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<title>Flippable Doctest</title>
|
||||||
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
<script src="../dist/iwmlib.js"></script>
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Flippable Doctest</title>
|
<title>Flippable Doctest</title>
|
||||||
@ -9,6 +17,13 @@
|
|||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="../css/flipeffect.css" />
|
||||||
|
<template id="flipTemplate">
|
||||||
|
<div class="flipWrapper">
|
||||||
|
<div class="flipCard">
|
||||||
|
<div class="flipFace front"></div>
|
||||||
|
<div class="flipFace back" style="visibility: hidden"></div>
|
||||||
|
</div>
|
||||||
<link rel="stylesheet" href="../css/flipeffect.css" />
|
<link rel="stylesheet" href="../css/flipeffect.css" />
|
||||||
<template id="flipTemplate">
|
<template id="flipTemplate">
|
||||||
<div class="flipWrapper">
|
<div class="flipWrapper">
|
||||||
@ -91,4 +106,25 @@ the viewbox of the SVG will interfere with the coordinate transformation.
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
<h3>Example</h3>
|
||||||
|
<main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
|
||||||
|
<script class="doctest">
|
||||||
|
let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
|
||||||
|
if (Capabilities.supportsTemplate()) {
|
||||||
|
let flip = new DOMFlip(
|
||||||
|
scatterContainer,
|
||||||
|
flipTemplate,
|
||||||
|
new ImageLoader('./examples/king.jpeg'),
|
||||||
|
new ImageLoader('./examples/women.jpeg'),
|
||||||
|
{ tapDelegateFactory: CardWrapper, preloadBack: true }
|
||||||
|
)
|
||||||
|
flip.load().then((flip) => {
|
||||||
|
flip.centerAt({ x: 150, y: 120 })
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
131
lib/frames.html
131
lib/frames.html
@ -1,50 +1,51 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Frames</h1>
|
||||||
Frames
|
<p>
|
||||||
</h1>
|
Frames are a major way to modularize the design of complex applications. Since pages presented in frames are
|
||||||
<p>
|
independent of each other they can fail without impact on other pages. In addition preparing content in
|
||||||
Frames are a major way to modularize the design of complex applications. Since
|
individual HTML files largely simplfies the workflow of content production.
|
||||||
pages presented in frames are independent of each other they can fail without
|
</p>
|
||||||
impact on other pages. In addition preparing content in individual HTML files
|
<p>This approach, however, has limitations:</p>
|
||||||
largely simplfies the workflow of content production.
|
<script>
|
||||||
</p>
|
|
||||||
<p>This approach, however, has limitations:</p>
|
|
||||||
<script>
|
|
||||||
function appleError() {
|
function appleError() {
|
||||||
alert("Refused to display 'http://www.apple.com/de/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.")
|
alert(
|
||||||
|
"Refused to display 'http://www.apple.com/de/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'."
|
||||||
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<ul><li>Some pages may prevent embedding them
|
<ul>
|
||||||
by 'X-Frame-Options', e.g. <a href="javascript:appleError()">www.apple.com</a>
|
<li>
|
||||||
</li>
|
Some pages may prevent embedding them by 'X-Frame-Options', e.g.
|
||||||
<li>Sites with responsive design might not be able to detect the available space,
|
<a href="javascript:appleError()">www.apple.com</a>
|
||||||
e.g. <a href="https:///de.wikipedia.org">de.wikipedia.org</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>Touch events are not dispatched correctly to multiple frames on platforms with
|
Sites with responsive design might not be able to detect the available space, e.g.
|
||||||
<b>TouchEvents</b>, e.g. if frame one
|
<a href="https:///de.wikipedia.org">de.wikipedia.org</a>
|
||||||
receives touch1, all related touch points touch2, ... touchN, are send to frame1
|
</li>
|
||||||
although they might occur over frame two.
|
<li>
|
||||||
</li>
|
Touch events are not dispatched correctly to multiple frames on platforms with <b>TouchEvents</b>, e.g.
|
||||||
</ul>
|
if frame one receives touch1, all related touch points touch2, ... touchN, are send to frame1 although
|
||||||
<p>To solve the last mentioned problem, we prevent frames form touch events by
|
they might occur over frame two.
|
||||||
assigning a <pre>pointer-events: none;</pre> style. A wrapping div is used to capture
|
</li>
|
||||||
the events instead. Captured events are collected by an InteractionMapper and
|
</ul>
|
||||||
distributed as synthesized mouse or touch events to the wrapped iframes.
|
<p>To solve the last mentioned problem, we prevent frames form touch events by assigning a</p>
|
||||||
<p>
|
<pre>pointer-events: none;</pre>
|
||||||
Let's look at an example of two HTML IFrames embedded in this Doctest.</p>
|
style. A wrapping div is used to capture the events instead. Captured events are collected by an
|
||||||
<pre><code class="html">
|
InteractionMapper and distributed as synthesized mouse or touch events to the wrapped iframes.
|
||||||
|
<p>Let's look at an example of two HTML IFrames embedded in this Doctest.</p>
|
||||||
|
<pre><code class="html">
|
||||||
<div id="frameWrapper1">
|
<div id="frameWrapper1">
|
||||||
<iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
|
<iframe style="pointer-events: none;" src="examples/multitouch.html"></iframe>
|
||||||
</div>
|
</div>
|
||||||
@ -53,29 +54,41 @@ Let's look at an example of two HTML IFrames embedded in this Doctest.</p>
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<div class="grayBorder" id="container" style="display: flex; justify-content: space-around;">
|
<div class="grayBorder" id="container" style="display: flex; justify-content: space-around">
|
||||||
<div id="frameWrapper1" style="padding: 4px">
|
<div id="frameWrapper1" style="padding: 4px">
|
||||||
<iframe style="width:400px; height:360px; border:0; pointer-events: none;" src="examples/multitouch.html" allowfullscreen></iframe>
|
<iframe
|
||||||
|
style="width: 400px; height: 360px; border: 0; pointer-events: none"
|
||||||
|
src="examples/multitouch.html"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div id="frameWrapper2" style="padding: 4px">
|
<div id="frameWrapper2" style="padding: 4px">
|
||||||
<iframe style="width:400px; height:360px; border:0; pointer-events: none;" src="examples/multitouch.html" allowfullscreen></iframe>
|
<iframe
|
||||||
|
style="width: 400px; height: 360px; border: 0; pointer-events: none"
|
||||||
|
src="examples/multitouch.html"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>The distribution of events is handled by the enclosing container. The container
|
<p>
|
||||||
registers a InteractionMapper and provides adapter for iframes, that implement
|
The distribution of events is handled by the enclosing container. The container registers a
|
||||||
IInteractionTarget by sending programmatically generated events. If you test
|
InteractionMapper and provides adapter for iframes, that implement IInteractionTarget by sending
|
||||||
these frames on a multitouch device you will notice that the scatters within
|
programmatically generated events. If you test these frames on a multitouch device you will notice that the
|
||||||
the frames can be manipulated independently of each other:
|
scatters within the frames can be manipulated independently of each other:
|
||||||
<p/>
|
</p>
|
||||||
<script class="doctest">
|
|
||||||
let frameContainer = new FrameContainer(container)
|
|
||||||
|
|
||||||
</script>
|
<p />
|
||||||
<h2>
|
<script class="doctest">
|
||||||
References
|
let frameContainer = new FrameContainer(container)
|
||||||
</h2>
|
</script>
|
||||||
<ul>
|
<h2>References</h2>
|
||||||
<li><a href="http://stackoverflow.com/questions/8068578/how-do-i-use-multiple-iframes-in-my-html-page">Multiple iFrames</a></li>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="http://stackoverflow.com/questions/8068578/how-do-i-use-multiple-iframes-in-my-html-page"
|
||||||
|
>Multiple iFrames</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
<li><a href="https://benmarshall.me/responsive-iframes/">Responsive iFrames</a></li>
|
<li><a href="https://benmarshall.me/responsive-iframes/">Responsive iFrames</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,31 +1,28 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
|
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="./3rdparty/all.js"></script>
|
<script src="./3rdparty/all.js"></script>
|
||||||
|
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
|
</head>
|
||||||
</head>
|
<body onload="Doctest.run()">
|
||||||
<body onload="Doctest.run()" >
|
<h1><a href="index.html">lib.</a>Image Loader Worker</h1>
|
||||||
<h1>Image Loader Worker</h1>
|
|
||||||
<p>
|
<p>
|
||||||
The loading of multiple small images (e.g. loadimng tiles of a zoomable
|
The loading of multiple small images (e.g. loadimng tiles of a zoomable map) is a time consuming task that
|
||||||
map) is a time consuming task that leads to small but noticeable delays
|
leads to small but noticeable delays in touch interaction if standard DOM events are used. With a worker we
|
||||||
in touch interaction if standard DOM events are used. With a worker we
|
|
||||||
can try to do most of the time consuming processing in the background.
|
can try to do most of the time consuming processing in the background.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at an example of a image loader worker:</p>
|
<p>Let's look at an example of a image loader worker:</p>
|
||||||
<img id="img1" width="160" height="120" class="grayBorder interactive" src=""/>
|
<img id="img1" width="160" height="120" class="grayBorder interactive" src="" />
|
||||||
<img id="img2" width="160" height="120" class="grayBorder interactive" src=""/>
|
<img id="img2" width="160" height="120" class="grayBorder interactive" src="" />
|
||||||
<img id="img3" width="160" height="120" class="grayBorder interactive" src=""/>
|
<img id="img3" width="160" height="120" class="grayBorder interactive" src="" />
|
||||||
<img id="img4" width="160" height="120" class="grayBorder interactive" src=""/>
|
<img id="img4" width="160" height="120" class="grayBorder interactive" src="" />
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
let urls = [
|
let urls = [
|
||||||
'http://i.imgur.com/JmvCQXd.jpg',
|
'http://i.imgur.com/JmvCQXd.jpg',
|
||||||
'http://i.imgur.com/L4ipvCE.jpg',
|
'http://i.imgur.com/L4ipvCE.jpg',
|
||||||
@ -35,18 +32,19 @@
|
|||||||
|
|
||||||
let imgs = [img1, img2, img3, img4]
|
let imgs = [img1, img2, img3, img4]
|
||||||
let count = 0
|
let count = 0
|
||||||
let worker = new Worker("imageloader.js")
|
let worker = new Worker('imageloader.js')
|
||||||
worker.onmessage = (event) => {
|
worker.onmessage = (event) => {
|
||||||
console.log("Loaded", event.data)
|
console.log('Loaded', event.data)
|
||||||
if (event.data.success) {
|
if (event.data.success) {
|
||||||
console.log("Loaded", event.data.url)
|
console.log('Loaded', event.data.url)
|
||||||
imgs[count].src = event.data.url
|
imgs[count].src = event.data.url
|
||||||
count += 1
|
count += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
worker.postMessage({command: "load", urls: urls})
|
worker.postMessage({ command: 'load', urls: urls })
|
||||||
worker.postMessage({command: "abort", urls: urls})
|
worker.postMessage({ command: 'abort', urls: urls })
|
||||||
worker.postMessage({command: "load", urls: urls})
|
worker.postMessage({ command: 'load', urls: urls })
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,11 +1,14 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Lib Doctests</title>
|
<title>Lib Doctests</title>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
<meta
|
||||||
<link rel="stylesheet" href="../css/index.css">
|
name="viewport"
|
||||||
|
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="../css/index.css" />
|
||||||
|
|
||||||
<!-- following not necc for index.js included in iwmlib.js -->
|
<!-- following not necc for index.js included in iwmlib.js -->
|
||||||
<!-- <script src="./index.js"></script> -->
|
<!-- <script src="./index.js"></script> -->
|
||||||
@ -17,7 +20,7 @@
|
|||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<img class="icon" src="thumbnails/notfound.png">
|
<img class="icon" src="thumbnails/notfound.png" />
|
||||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -25,12 +28,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="container" class="container">
|
<h2><a href="index.html">lib.</a>Doctests</h2>
|
||||||
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
|
<div id="container" class="container"></div>
|
||||||
</div>
|
<script>
|
||||||
<script>
|
|
||||||
let index = new Index(itemTemplate, [
|
let index = new Index(itemTemplate, [
|
||||||
['Doctest', 'doctest.html'],
|
['Doctest', 'doctest.html'],
|
||||||
['Capabilities', 'capabilities.html'],
|
['Capabilities', 'capabilities.html'],
|
||||||
@ -48,6 +50,6 @@
|
|||||||
['PIXI Doctests', 'pixi/index.html']
|
['PIXI Doctests', 'pixi/index.html']
|
||||||
])
|
])
|
||||||
index.load()
|
index.load()
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,36 +1,41 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run(); test()" >
|
<body onload="Doctest.run(); test()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Code and Class Inspection</h1>
|
||||||
Code and Class Inspection
|
<p>
|
||||||
</h1>
|
To Do: Use SystemJS to load modules and main code. This ensures that all code can be parsed by acorn into an
|
||||||
<p>
|
Abstract Syntax Tree which in turn allows to extract class statements and related extends phrases.
|
||||||
To Do: Use SystemJS to load modules and main code. This ensures that
|
</p>
|
||||||
all code can be parsed by acorn into an Abstract Syntax Tree which
|
<script class="doctest">
|
||||||
in turn allows to extract class statements and related extends phrases.
|
function test() {
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
function test() {
|
|
||||||
let sources = Inspect.allScriptSources()
|
let sources = Inspect.allScriptSources()
|
||||||
console.log(sources)
|
console.log(sources)
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
<h2>References</h2>
|
||||||
<h2>
|
<ul>
|
||||||
References
|
<li>
|
||||||
</h2>
|
<a href="https://nystudio107.com/blog/using-systemjs-as-javascript-loader"
|
||||||
<ul>
|
>Using SystemJS as JavaScript Loader</a
|
||||||
|
>
|
||||||
<li><a href="https://nystudio107.com/blog/using-systemjs-as-javascript-loader">Using SystemJS as JavaScript Loader</a></li>
|
</li>
|
||||||
<li><a href="http://stackoverflow.com/questions/2051678/getting-all-variables-in-scope">Getting all Variables in Scope</a></li>
|
<li>
|
||||||
<li><a href="https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/">Metaprogramming in JavaScript</a></li>
|
<a href="http://stackoverflow.com/questions/2051678/getting-all-variables-in-scope"
|
||||||
</ul>
|
>Getting all Variables in Scope</a
|
||||||
</body>
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/"
|
||||||
|
>Metaprogramming in JavaScript</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Interaction Mapper Doctest</title>
|
<title>Interaction Mapper Doctest</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -12,119 +12,113 @@
|
|||||||
<script type="module">
|
<script type="module">
|
||||||
import * as Interaction from './interaction.js'
|
import * as Interaction from './interaction.js'
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Interaction</h1>
|
||||||
Interaction Pattern
|
<p>
|
||||||
</h1>
|
Since the correct handling of the divergent browser specific multitouch implementations is a difficult and
|
||||||
<p>
|
recurring task we decided to encapsulate all related handlers for <code>TouchEvent</code> (WebKit, Mozilla)
|
||||||
Since the correct handling of the divergent browser specific multitouch
|
and <code>PointerEvent</code> (IE, Edge, Chrome) in a single delegate pattern.
|
||||||
implementations is a difficult and recurring task we decided to encapsulate
|
</p>
|
||||||
all related handlers for <code>TouchEvent</code> (WebKit, Mozilla) and
|
<p>
|
||||||
<code>PointerEvent</code> (IE, Edge, Chrome) in
|
The main differences are that <code>PointerEvent</code> are fired for each touch point, whereas the
|
||||||
a single delegate pattern.
|
<code>TouchEvent</code> collects multiple <code>TouchPoints</code> into a single event. The basic PointMap
|
||||||
</p>
|
and Interaction classes unify this behavior by collecting all contact points regardless of their original
|
||||||
<p>The main differences are that <code>PointerEvent</code> are fired for each
|
mouse, touch, or pointer events.
|
||||||
touch point, whereas the <code>TouchEvent</code> collects multiple
|
</p>
|
||||||
<code>TouchPoints</code> into a single event. The basic PointMap and Interaction
|
<h2>Point Maps</h2>
|
||||||
classes unify this behavior by collecting all contact points regardless
|
<p>
|
||||||
of their original mouse, touch, or pointer events.</p>
|
The touch and pointer positions are collected in PointMaps which provide access to the positions via
|
||||||
<h2>
|
stringified touch and pointer ids. For mouse events the special id "mouse" is used. PointMaps can be cloned
|
||||||
Point Maps
|
and pretty printed. In addition they provide auxiliary methods like <code>mean</code> and
|
||||||
</h2>
|
<code>farthests</code>
|
||||||
<p>The touch and pointer positions are collected in PointMaps which provide
|
which can be used to simplify the computation of gestures. In general
|
||||||
access to the positions via stringified touch and pointer ids. For mouse events the
|
<code>mean</code> can be used to compute the "center of interaction", i.e. the best guess of the anchor
|
||||||
special id "mouse" is used. PointMaps can be cloned and pretty printed. In addition
|
point for rotation and scaling operations.
|
||||||
they provide auxiliary methods like <code>mean</code> and <code>farthests</code>
|
</p>
|
||||||
which can be used to simplify the computation of gestures. In general
|
<script class="doctest">
|
||||||
<code>mean</code> can be used to compute the "center of interaction", i.e. the
|
let mouse = new PointMap({ mouse: { x: 0, y: 0 } })
|
||||||
best guess of the anchor point for rotation and scaling operations.
|
let touches = new PointMap({ touch1: { x: 0, y: 0 }, touch2: { x: 10, y: 10 } })
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
let mouse = new PointMap({ mouse: {x:0, y:0}})
|
|
||||||
let touches = new PointMap({ "touch1": {x:0, y:0}, "touch2": {x: 10, y: 10}})
|
|
||||||
|
|
||||||
Doctest.expect(touches,
|
Doctest.expect(touches, '[PointMap touch1:{x:0, y:0}, touch2:{x:10, y:10}]')
|
||||||
"[PointMap touch1:{x:0, y:0}, touch2:{x:10, y:10}]")
|
Doctest.expect(touches.clone(), '[PointMap touch1:{x:0, y:0}, touch2:{x:10, y:10}]')
|
||||||
Doctest.expect(touches.clone(),
|
Doctest.expect(touches.mean(), { x: 5, y: 5 })
|
||||||
"[PointMap touch1:{x:0, y:0}, touch2:{x:10, y:10}]")
|
</script>
|
||||||
Doctest.expect(touches.mean(), {"x":5,"y":5})
|
<p>
|
||||||
</script>
|
If more than two touch points are involved it may be best to look for the pair of points which are farthest
|
||||||
<p>If more than two touch points are involved it may be best to look for the
|
away from each other. These points will represent the fingers farthest away from each other, a more simple
|
||||||
pair of points which are farthest away from each other. These points will
|
substitute for 3, 4 or 5 touch points. Here we add a third point to our example touches and test whether the
|
||||||
represent the fingers farthest away from each other, a more simple substitute
|
maximal distant points are found:
|
||||||
for 3, 4 or 5 touch points. Here we add a third point to our example touches
|
<script class="doctest">
|
||||||
and test whether the maximal distant points are found:
|
touches.set('touch3', { x: 5, y: 5 })
|
||||||
<script class="doctest">
|
Doctest.expect(touches.farthests(), [
|
||||||
touches.set("touch3", {x:5, y:5})
|
{ x: 0, y: 0 },
|
||||||
Doctest.expect(touches.farthests(), [{"x":0,"y":0},{"x":10,"y":10}])
|
{ x: 10, y: 10 }
|
||||||
</script>
|
])
|
||||||
<h2>
|
</script>
|
||||||
Interaction Points and Interactions
|
</p>
|
||||||
</h2>
|
|
||||||
Events and points change in time and gestures are computed from this dynamic behavior.
|
|
||||||
To collect theses changes and to simplify the computation of gestures we
|
|
||||||
collect PointMaps in a composite class InteractionPoints, which distinguishes
|
|
||||||
start, current, previous, and ended point coordinates as well as the start timestamps.
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
let interactionPoints = new InteractionPoints()
|
<h2>Interaction Points and Interactions</h2>
|
||||||
|
Events and points change in time and gestures are computed from this dynamic behavior. To collect theses changes
|
||||||
|
and to simplify the computation of gestures we collect PointMaps in a composite class InteractionPoints, which
|
||||||
|
distinguishes start, current, previous, and ended point coordinates as well as the start timestamps.
|
||||||
|
<script class="doctest">
|
||||||
|
let interactionPoints = new InteractionPoints()
|
||||||
|
|
||||||
interactionPoints.update("touch1", {x:0, y:0})
|
interactionPoints.update('touch1', { x: 0, y: 0 })
|
||||||
interactionPoints.update("touch2", {x:5, y:5})
|
interactionPoints.update('touch2', { x: 5, y: 5 })
|
||||||
interactionPoints.update("touch3", {x:10, y:10})
|
interactionPoints.update('touch3', { x: 10, y: 10 })
|
||||||
Doctest.expect(interactionPoints.current.size, 3)
|
Doctest.expect(interactionPoints.current.size, 3)
|
||||||
|
|
||||||
// Initially current and previous points are equal
|
// Initially current and previous points are equal
|
||||||
Doctest.expect(interactionPoints.current, interactionPoints.previous)
|
Doctest.expect(interactionPoints.current, interactionPoints.previous)
|
||||||
// Using updatePrevious we copy the current points to the previous ones.
|
// Using updatePrevious we copy the current points to the previous ones.
|
||||||
// This is always needed after change events
|
// This is always needed after change events
|
||||||
interactionPoints.updatePrevious()
|
interactionPoints.updatePrevious()
|
||||||
|
|
||||||
// After this call current and previous can be used to compure the deltas:
|
// After this call current and previous can be used to compure the deltas:
|
||||||
interactionPoints.update("touch1", {x: -2, y: -5})
|
interactionPoints.update('touch1', { x: -2, y: -5 })
|
||||||
interactionPoints.update("touch2", {x: 5, y: 9})
|
interactionPoints.update('touch2', { x: 5, y: 9 })
|
||||||
interactionPoints.update("touch3", {x: 15, y: 20})
|
interactionPoints.update('touch3', { x: 15, y: 20 })
|
||||||
Doctest.expect(interactionPoints.current,
|
Doctest.expect(
|
||||||
"[PointMap touch1:{x:-2, y:-5}, touch2:{x:5, y:9}, touch3:{x:15, y:20}]")
|
interactionPoints.current,
|
||||||
|
'[PointMap touch1:{x:-2, y:-5}, touch2:{x:5, y:9}, touch3:{x:15, y:20}]'
|
||||||
|
)
|
||||||
// "[PointMap touch1:{x:-2, y:-5}, touch2:{x:5, y:7}, touch3:{x:15, y:20}]")
|
// "[PointMap touch1:{x:-2, y:-5}, touch2:{x:5, y:7}, touch3:{x:15, y:20}]")
|
||||||
|
|
||||||
// The delta object is a convenience object to access translation, scaling,
|
// The delta object is a convenience object to access translation, scaling,
|
||||||
// and rotation values as well as the center of transformation
|
// and rotation values as well as the center of transformation
|
||||||
let delta = interactionPoints.delta()
|
let delta = interactionPoints.delta()
|
||||||
|
|
||||||
// Doctest.expect(delta.x, 1.5) // Doctest ERROR! Occurs for an unspecified period of time.
|
// Doctest.expect(delta.x, 1.5) // Doctest ERROR! Occurs for an unspecified period of time.
|
||||||
// Doctest.expect(delta.y, 2.5) // Doctest ERROR! Occurs for an unspecified period of time.
|
// Doctest.expect(delta.y, 2.5) // Doctest ERROR! Occurs for an unspecified period of time.
|
||||||
// Doctest.expect(delta.zoom > 1.5, true) // Doctest ERROR! Occurs for an unspecified period of time.
|
// Doctest.expect(delta.zoom > 1.5, true) // Doctest ERROR! Occurs for an unspecified period of time.
|
||||||
// Doctest.expect(delta.rotate < 0.2, true) // Doctest ERROR! Occurs for an unspecified period of time.
|
// Doctest.expect(delta.rotate < 0.2, true) // Doctest ERROR! Occurs for an unspecified period of time.
|
||||||
// Doctest.expect(delta.about, {x: 6.5, y: 7.5}) // Doctest ERROR! Occurs for an unspecified period of time.
|
// Doctest.expect(delta.about, {x: 6.5, y: 7.5}) // Doctest ERROR! Occurs for an unspecified period of time.
|
||||||
|
</script>
|
||||||
|
<p>
|
||||||
|
Interaction objects extend the idea of mapping touch ids to points to multiple target objects. Each touch id
|
||||||
|
is mapped not only to the changing points of this touch but also to the object that has been hit by the
|
||||||
|
starting touch point. This object is the target of the interaction and remains for the whole duration of the
|
||||||
|
multitouch gesture.
|
||||||
|
</p>
|
||||||
|
|
||||||
</script>
|
<h2>Interaction Delegate</h2>
|
||||||
<p>Interaction objects extend the idea of mapping touch ids to
|
<p>
|
||||||
points to multiple target objects. Each touch id is mapped not only to the
|
The delegator registers all needed <code>TouchEvent</code>, <code>PointerEvent</code>, and
|
||||||
changing points of this touch but also to the object that has been
|
<code>MouseEvent</code>
|
||||||
hit by the starting touch point. This object is the target of the interaction
|
handlers on a provided DOM elememt for a given target object, ensures that the events are captured by the
|
||||||
and remains for the whole duration of the multitouch gesture.
|
target and boils the event handling down to simple
|
||||||
|
<code>onStart</code>, <code>onMove</code>, <code>onEnd</code> events.
|
||||||
|
</p>
|
||||||
<h2>
|
|
||||||
Interaction Delegate
|
|
||||||
</h2>
|
|
||||||
<p>The delegator registers all needed <code>TouchEvent</code>,
|
|
||||||
<code>PointerEvent</code>, and <code>MouseEvent</code>
|
|
||||||
handlers on a provided DOM elememt for a given target object, ensures that the
|
|
||||||
events are captured by the target and boils the event handling down to simple
|
|
||||||
<code>onStart</code>, <code>onMove</code>, <code>onEnd</code> events.
|
|
||||||
|
|
||||||
|
|
||||||
<p>Let's look at an example of an InteractionDelegate and a target object that
|
|
||||||
implements the <code>IInteractionTarget</code> interface. Typically you setup
|
|
||||||
the delegator in the constructor of the class that uses the interation.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
class InteractionTarget {
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Let's look at an example of an InteractionDelegate and a target object that implements the
|
||||||
|
<code>IInteractionTarget</code> interface. Typically you setup the delegator in the constructor of the class
|
||||||
|
that uses the interation.
|
||||||
|
</p>
|
||||||
|
<script class="doctest">
|
||||||
|
class InteractionTarget {
|
||||||
// The constructor of the target creates the InteractionDelegate
|
// The constructor of the target creates the InteractionDelegate
|
||||||
constructor(domElement) {
|
constructor(domElement) {
|
||||||
this.interaction = new InteractionDelegate(domElement, this)
|
this.interaction = new InteractionDelegate(domElement, this)
|
||||||
@ -133,7 +127,9 @@ class InteractionTarget {
|
|||||||
// The following methods are needed by the IInteractionTarget interface
|
// The following methods are needed by the IInteractionTarget interface
|
||||||
|
|
||||||
// Indicates that we want all events
|
// Indicates that we want all events
|
||||||
capture(event) { return true }
|
capture(event) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
// Handle collected touch points on start
|
// Handle collected touch points on start
|
||||||
onStart(event, points) {}
|
onStart(event, points) {}
|
||||||
@ -146,68 +142,57 @@ class InteractionTarget {
|
|||||||
|
|
||||||
// Handle mouse wheel event
|
// Handle mouse wheel event
|
||||||
onMouseWheel(event) {}
|
onMouseWheel(event) {}
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
<p>We can now check whether the promised interface methods are implemented by the class:</p>
|
||||||
<p>We can now check whether the promised interface methods are implemented by the
|
<script class="doctest">
|
||||||
class:</p>
|
Doctest.expect(IInteractionTarget.implementedBy(InteractionTarget), true)
|
||||||
<script class="doctest">
|
</script>
|
||||||
Doctest.expect(IInteractionTarget.implementedBy(InteractionTarget), true)
|
<p>
|
||||||
</script>
|
If we define an InteractionTarget that violates the IInteractionTarget interface we get an error. The
|
||||||
<p>If we define an InteractionTarget that violates the IInteractionTarget interface
|
following example of an interaction target uses an InteractionDelegate but does not implement the necessary
|
||||||
we get an error. The following example of an interaction target uses an
|
methods:
|
||||||
InteractionDelegate but does not implement the necessary methods:
|
</p>
|
||||||
</p>
|
<script class="doctest">
|
||||||
<script class="doctest">
|
|
||||||
class InvalidInteractionTarget {
|
class InvalidInteractionTarget {
|
||||||
|
|
||||||
constructor(domElement) {
|
constructor(domElement) {
|
||||||
this.interaction = new InteractionDelegate(domElement, this, { debug: true})
|
this.interaction = new InteractionDelegate(domElement, this, { debug: true })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
new InvalidInteractionTarget(null)
|
new InvalidInteractionTarget(null)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Doctest.expectError(error, "Expected IInteractionTarget")
|
Doctest.expectError(error, 'Expected IInteractionTarget')
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
</script>
|
<h2>Interaction Mapper</h2>
|
||||||
|
<p>
|
||||||
<h2>
|
Often we need to assign UI elements to touch and pointer events. This is supported by a special
|
||||||
Interaction Mapper
|
InteractionMapper delegate. A InteractionMapper maps events to specific parts of a container interaction
|
||||||
</h2>
|
target. The InteractionTarget must implement a findTarget method that returns an object implementing the
|
||||||
<p>Often we need to assign UI elements to touch and pointer events. This is
|
IInteractionTarget interface.
|
||||||
supported by a special InteractionMapper delegate. A InteractionMapper
|
</p>
|
||||||
maps events to specific parts of a container interaction target. The
|
<p>
|
||||||
InteractionTarget must implement a findTarget method that returns an
|
If the InteractionTarget also implements a <code>mapPositionToPoint</code> method this is used to map the
|
||||||
object implementing the IInteractionTarget interface.
|
points to the local coordinate space of the the target. This makes it easier to lookup elements and relate
|
||||||
</p>
|
events to local positions.
|
||||||
<p>
|
</p>
|
||||||
If the InteractionTarget also implements a <code>mapPositionToPoint</code> method this
|
<p>Let's see an example. A graph that uses an <code>InterationMapper</code> for it´s child objects:</p>
|
||||||
is used to map the points to the local coordinate space of the the target.
|
<script class="doctest">
|
||||||
This makes it easier to lookup elements and relate events to local
|
|
||||||
positions.
|
|
||||||
</p>
|
|
||||||
<p>Let's see an example. A graph that uses an <code>InterationMapper</code> for it´s child
|
|
||||||
objects:
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
class Graph {
|
class Graph {
|
||||||
|
|
||||||
constructor(domElement) {
|
constructor(domElement) {
|
||||||
this.interaction = new InteractionMapper(domElement, this)
|
this.interaction = new InteractionMapper(domElement, this)
|
||||||
this.nodes = [
|
this.nodes = [new Node('a'), new Node('b')]
|
||||||
new Node('a'),
|
|
||||||
new Node('b')
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
capture(event) { return true }
|
capture(event) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
findTarget() {
|
findTarget() {
|
||||||
for(let node of this.nodes) {
|
for (let node of this.nodes) {
|
||||||
return node
|
return node
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
@ -215,55 +200,61 @@ objects:
|
|||||||
}
|
}
|
||||||
|
|
||||||
class Node {
|
class Node {
|
||||||
|
|
||||||
constructor(name) {
|
constructor(name) {
|
||||||
this.name = name
|
this.name = name
|
||||||
}
|
}
|
||||||
|
|
||||||
capture(event) { return true }
|
capture(event) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
onStart(event, interaction) {
|
onStart(event, interaction) {
|
||||||
Doctest.log("onStart called")
|
Doctest.log('onStart called')
|
||||||
}
|
}
|
||||||
|
|
||||||
onMove(event, interaction) {
|
onMove(event, interaction) {
|
||||||
Doctest.log("onMove called")
|
Doctest.log('onMove called')
|
||||||
}
|
}
|
||||||
|
|
||||||
onEnd(event, interaction) {
|
onEnd(event, interaction) {
|
||||||
Doctest.log("onEnd called")
|
Doctest.log('onEnd called')
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
<p>
|
||||||
<p>Now we simulate a sequence of <code>onStart, onMove, onEnd</code> events by calling
|
Now we simulate a sequence of <code>onStart, onMove, onEnd</code> events by calling the registered event
|
||||||
the registered event handlers programmatically. Note that the defined
|
handlers programmatically. Note that the defined event handlers log their calls.
|
||||||
event handlers log their calls.</p>
|
</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
let graph = new Graph(window)
|
let graph = new Graph(window)
|
||||||
window.dispatchEvent(Doctest.event('mousedown'))
|
window.dispatchEvent(Doctest.event('mousedown'))
|
||||||
window.dispatchEvent(Doctest.event('mousemove'))
|
window.dispatchEvent(Doctest.event('mousemove'))
|
||||||
window.dispatchEvent(Doctest.event('mouseup'))
|
window.dispatchEvent(Doctest.event('mouseup'))
|
||||||
|
|
||||||
Doctest.expectLog('onStart called',
|
Doctest.expectLog('onStart called', 'onMove called', 'onEnd called')
|
||||||
'onMove called',
|
</script>
|
||||||
'onEnd called')
|
<h2>Simple Dragging</h2>
|
||||||
|
<p>
|
||||||
</script>
|
Drag & Drop is a common interaction pattern. This behavior can be accomplished by a class that implements
|
||||||
<h2>
|
IInteractionMapperTarget as well as IInteractionTarget. You can grab the blue circle with touches or mouse
|
||||||
Simple Dragging
|
and drag it around.
|
||||||
</h2>
|
</p>
|
||||||
<p>Drag & Drop is a common interaction pattern. This behavior can be accomplished
|
<div class="grayBorder" style="position: relative; width: 100%; height: 200px">
|
||||||
by a class that implements IInteractionMapperTarget as well as IInteractionTarget.
|
<div
|
||||||
You can grab the blue circle with touches or mouse and drag it around.</p>
|
id="circle"
|
||||||
<div class="grayBorder" style="position: relative; width: 100%; height: 200px">
|
style="
|
||||||
<div id="circle" style="position: absolute; left:50px; top: 50px; border-radius: 50%; width: 32px; height: 32px; background-color: blue;"></div>
|
position: absolute;
|
||||||
</div>
|
left: 50px;
|
||||||
<script class="doctest">
|
top: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-color: blue;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<script class="doctest">
|
||||||
class Dragger {
|
class Dragger {
|
||||||
|
|
||||||
constructor(element, container) {
|
constructor(element, container) {
|
||||||
/* The events are captured by the container but send to this
|
/* The events are captured by the container but send to this
|
||||||
wrapper object, if the event target is identical to the wrapped
|
wrapper object, if the event target is identical to the wrapped
|
||||||
@ -272,10 +263,12 @@ You can grab the blue circle with touches or mouse and drag it around.</p>
|
|||||||
this.interaction = new InteractionMapper(container, this)
|
this.interaction = new InteractionMapper(container, this)
|
||||||
}
|
}
|
||||||
|
|
||||||
capture(event) { return true }
|
capture(event) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
findTarget(event, localPoint, globalPoint) {
|
findTarget(event, localPoint, globalPoint) {
|
||||||
return (event.target == this.target) ? this : null
|
return event.target == this.target ? this : null
|
||||||
}
|
}
|
||||||
|
|
||||||
onStart(event, interaction) {
|
onStart(event, interaction) {
|
||||||
@ -286,8 +279,8 @@ You can grab the blue circle with touches or mouse and drag it around.</p>
|
|||||||
let move = interaction.move()
|
let move = interaction.move()
|
||||||
let x = parseInt(this.target.style.left) + move.x
|
let x = parseInt(this.target.style.left) + move.x
|
||||||
let y = parseInt(this.target.style.top) + move.y
|
let y = parseInt(this.target.style.top) + move.y
|
||||||
this.target.style.left = x + "px"
|
this.target.style.left = x + 'px'
|
||||||
this.target.style.top = y + "px"
|
this.target.style.top = y + 'px'
|
||||||
}
|
}
|
||||||
|
|
||||||
onEnd(event, interaction) {
|
onEnd(event, interaction) {
|
||||||
@ -303,107 +296,200 @@ You can grab the blue circle with touches or mouse and drag it around.</p>
|
|||||||
Doctest.expect(IInteractionTarget.implementedBy(Dragger), true)
|
Doctest.expect(IInteractionTarget.implementedBy(Dragger), true)
|
||||||
|
|
||||||
new Dragger(circle, document.body)
|
new Dragger(circle, document.body)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>
|
<h2>Multitouch</h2>
|
||||||
Multitouch
|
<p>
|
||||||
</h2>
|
Multitouch-Events (simultaneous events) in browsers cannot be used by default. Even libraries like jQuery do
|
||||||
<p>
|
not fix this problem. The static method "on" of the InteractionMapper allows simultaneous events and thus
|
||||||
Multitouch-Events (simultaneous events) in browsers cannot be used by default.
|
multitouch. The following events (and their specializations) can be used in addition to the default browser
|
||||||
Even libraries like jQuery do not fix this problem. The static method "on" of the
|
events: tap, doubletap, press, pan, swipe, pinch and rotate. See http://hammerjs.github.io for more details.
|
||||||
InteractionMapper allows simultaneous events and thus multitouch. The following
|
</p>
|
||||||
events (and their specializations) can be used in addition to the default browser
|
<svg
|
||||||
events: tap, doubletap, press, pan, swipe, pinch and rotate. See http://hammerjs.github.io
|
width="100%"
|
||||||
for more details.
|
height="300"
|
||||||
</p>
|
viewBox="0 0 400 200"
|
||||||
<svg width="100%" height="300" viewBox="0 0 400 200" class="grayBorder" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
class="grayBorder"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:bx="https://boxy-svg.com"
|
||||||
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<pattern id="pattern-1" viewBox="0 0 100 100" patternUnits="userSpaceOnUse" preserveAspectRatio="none" width="100" height="100" />
|
<pattern
|
||||||
<linearGradient id="gradient-1" gradientUnits="userSpaceOnUse" x1="235.294" y1="5.386" x2="235.294" y2="63.218" gradientTransform="matrix(0.479375, 0.877612, -1.161752, 0.599143, 216.009222, -193.782169)">
|
id="pattern-1"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
preserveAspectRatio="none"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
/>
|
||||||
|
<linearGradient
|
||||||
|
id="gradient-1"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
x1="235.294"
|
||||||
|
y1="5.386"
|
||||||
|
x2="235.294"
|
||||||
|
y2="63.218"
|
||||||
|
gradientTransform="matrix(0.479375, 0.877612, -1.161752, 0.599143, 216.009222, -193.782169)"
|
||||||
|
>
|
||||||
<stop offset="0" style="stop-color: rgba(216, 216, 216, 1)" />
|
<stop offset="0" style="stop-color: rgba(216, 216, 216, 1)" />
|
||||||
<stop offset="1" style="stop-color: rgb(45, 175, 182);" />
|
<stop offset="1" style="stop-color: rgb(45, 175, 182)" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient id="gradient-4" gradientUnits="userSpaceOnUse" x1="193.252" y1="126.988" x2="193.252" y2="163.836" gradientTransform="matrix(0.978752, 0, 0, 1.126983, 11.124972, -21.238213)">
|
<linearGradient
|
||||||
|
id="gradient-4"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
x1="193.252"
|
||||||
|
y1="126.988"
|
||||||
|
x2="193.252"
|
||||||
|
y2="163.836"
|
||||||
|
gradientTransform="matrix(0.978752, 0, 0, 1.126983, 11.124972, -21.238213)"
|
||||||
|
>
|
||||||
<stop offset="0" style="stop-color: rgba(161, 110, 0, 1)" />
|
<stop offset="0" style="stop-color: rgba(161, 110, 0, 1)" />
|
||||||
<stop offset="1" style="stop-color: rgba(59, 40, 0, 1)" />
|
<stop offset="1" style="stop-color: rgba(59, 40, 0, 1)" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="hammer-1">
|
<g id="hammer-1">
|
||||||
<rect x="55.329" y="20.25" width="42.523" height="42.523" style="fill: rgb(236, 229, 24); stroke: rgb(0, 179, 207); stroke-width: 2; stroke-linejoin: bevel;" />
|
<rect
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="68.736" y="45.811">tap</text>
|
x="55.329"
|
||||||
|
y="20.25"
|
||||||
|
width="42.523"
|
||||||
|
height="42.523"
|
||||||
|
style="fill: rgb(236, 229, 24); stroke: rgb(0, 179, 207); stroke-width: 2; stroke-linejoin: bevel"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="68.736" y="45.811">tap</text>
|
||||||
</g>
|
</g>
|
||||||
<g id="hammer-2">
|
<g id="hammer-2">
|
||||||
<path d="M 372 149 m -25.496 0 a 25.496 26.092 0 1 0 50.992 0 a 25.496 26.092 0 1 0 -50.992 0 Z M 372 149 m -15.297 0 a 15.297 15.654 0 0 1 30.594 0 a 15.297 15.654 0 0 1 -30.594 0 Z" transform="matrix(-0.535925, 0.844266, -0.844265, -0.535925, 499.054353, -194.103207)" style="fill: rgb(194, 59, 59); stroke: rgb(141, 10, 91); stroke-width: 2;" bx:shape="ring 372 149 15.297 15.654 25.496 26.092 1@9ddd52c9" />
|
<path
|
||||||
<text transform="matrix(1.226643, 0, 0, 1.226643, 42.737137, 26.559669)" style="fill: rgb(51, 51, 51); font-size: 9.7828px; white-space: pre;">
|
d="M 372 149 m -25.496 0 a 25.496 26.092 0 1 0 50.992 0 a 25.496 26.092 0 1 0 -50.992 0 Z M 372 149 m -15.297 0 a 15.297 15.654 0 0 1 30.594 0 a 15.297 15.654 0 0 1 -30.594 0 Z"
|
||||||
|
transform="matrix(-0.535925, 0.844266, -0.844265, -0.535925, 499.054353, -194.103207)"
|
||||||
|
style="fill: rgb(194, 59, 59); stroke: rgb(141, 10, 91); stroke-width: 2"
|
||||||
|
bx:shape="ring 372 149 15.297 15.654 25.496 26.092 1@9ddd52c9"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
transform="matrix(1.226643, 0, 0, 1.226643, 42.737137, 26.559669)"
|
||||||
|
style="fill: rgb(51, 51, 51); font-size: 9.7828px; white-space: pre"
|
||||||
|
>
|
||||||
<tspan x="94.401" y="44.224">press</tspan>
|
<tspan x="94.401" y="44.224">press</tspan>
|
||||||
<tspan x="94.401" dy="1em"></tspan>
|
<tspan x="94.401" dy="1em"></tspan>
|
||||||
</text>
|
</text>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<polygon id="hammer-3" style="fill: url(#gradient-1); stroke: rgb(182, 40, 92);" points="272.369 20.761 234.949 23.029 227.862 34.652 236.65 46.558 253.943 55.63 293.347 59.315 340.406 62.434 371.306 49.96 374.708 32.951 356.282 29.549 333.319 21.044 311.774 9.705 307.238 23.029 322.263 33.518 347.777 44.007 339.839 48.259 315.459 48.826 292.781 45.991 281.725 32.667 285.977 17.643 281.158 4.602 267.55 6.303 252.525 6.587 252.809 11.973 255.36 17.076 263.014 16.225 267.834 13.674 273.787 13.39 276.622 14.808" />
|
<polygon
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="296.849" y="80.823">pan</text>
|
id="hammer-3"
|
||||||
|
style="fill: url(#gradient-1); stroke: rgb(182, 40, 92)"
|
||||||
|
points="272.369 20.761 234.949 23.029 227.862 34.652 236.65 46.558 253.943 55.63 293.347 59.315 340.406 62.434 371.306 49.96 374.708 32.951 356.282 29.549 333.319 21.044 311.774 9.705 307.238 23.029 322.263 33.518 347.777 44.007 339.839 48.259 315.459 48.826 292.781 45.991 281.725 32.667 285.977 17.643 281.158 4.602 267.55 6.303 252.525 6.587 252.809 11.973 255.36 17.076 263.014 16.225 267.834 13.674 273.787 13.39 276.622 14.808"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="296.849" y="80.823">pan</text>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<ellipse transform="matrix(-0.707107, 0.707107, -0.707107, -0.707107, 362.152622, 115.748229)" cx="221.437" cy="181.098" rx="27.616" ry="27.616" style="fill: rgb(149, 26, 133); stroke: rgb(73, 4, 62); stroke-width: 4; fill-opacity: 0.69;" />
|
<ellipse
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="61.759" y="190.447">swipe</text>
|
transform="matrix(-0.707107, 0.707107, -0.707107, -0.707107, 362.152622, 115.748229)"
|
||||||
|
cx="221.437"
|
||||||
|
cy="181.098"
|
||||||
|
rx="27.616"
|
||||||
|
ry="27.616"
|
||||||
|
style="fill: rgb(149, 26, 133); stroke: rgb(73, 4, 62); stroke-width: 4; fill-opacity: 0.69"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="61.759" y="190.447">
|
||||||
|
swipe
|
||||||
|
</text>
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<rect id="hammer-5" x="146.389" y="121.875" width="107.762" height="41.527" style="fill: url(#gradient-4); stroke-linejoin: round; stroke: rgb(0, 0, 0);" />
|
<rect
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="187.854" y="190.447">pinch</text>
|
id="hammer-5"
|
||||||
|
x="146.389"
|
||||||
|
y="121.875"
|
||||||
|
width="107.762"
|
||||||
|
height="41.527"
|
||||||
|
style="fill: url(#gradient-4); stroke-linejoin: round; stroke: rgb(0, 0, 0)"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="187.854" y="190.447">
|
||||||
|
pinch
|
||||||
|
</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="matrix(1.286049, 0, 0, 1.286049, -103.444145, -48.307945)">
|
<g transform="matrix(1.286049, 0, 0, 1.286049, -103.444145, -48.307945)">
|
||||||
<path class="star" d="M 937 394.847 L 946.206 421.33 L 974.238 421.901 L 951.895 438.84 L 960.014 465.675 L 937 449.661 L 913.986 465.675 L 922.105 438.84 L 899.762 421.901 L 927.794 421.33 Z" transform="matrix(-0.809017, 0.587785, -0.587785, -0.809018, 1346.787902, -60.391979)" style="fill: rgb(83, 230, 226); stroke: rgb(24, 111, 116); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 2px;" bx:shape="star 937 434 39.154 39.153 0.4 5 1@05a6f642" />
|
<path
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="316.854" y="190.447">rotate</text>
|
class="star"
|
||||||
|
d="M 937 394.847 L 946.206 421.33 L 974.238 421.901 L 951.895 438.84 L 960.014 465.675 L 937 449.661 L 913.986 465.675 L 922.105 438.84 L 899.762 421.901 L 927.794 421.33 Z"
|
||||||
|
transform="matrix(-0.809017, 0.587785, -0.587785, -0.809018, 1346.787902, -60.391979)"
|
||||||
|
style="
|
||||||
|
fill: rgb(83, 230, 226);
|
||||||
|
stroke: rgb(24, 111, 116);
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-dasharray: 2px;
|
||||||
|
"
|
||||||
|
bx:shape="star 937 434 39.154 39.153 0.4 5 1@05a6f642"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="316.854" y="190.447">
|
||||||
|
rotate
|
||||||
|
</text>
|
||||||
</g>
|
</g>
|
||||||
<g transform="matrix(1.286049, 0, 0, 1.286049, -28.431454, -48.307941)">
|
<g transform="matrix(1.286049, 0, 0, 1.286049, -28.431454, -48.307941)">
|
||||||
<path class="star" d="M 937 394.847 L 946.206 421.33 L 974.238 421.901 L 951.895 438.84 L 960.014 465.675 L 937 449.661 L 913.986 465.675 L 922.105 438.84 L 899.762 421.901 L 927.794 421.33 Z" transform="matrix(-0.809017, 0.587785, -0.587785, -0.809018, 1346.787902, -60.391979)" style="fill: rgb(83, 230, 226); stroke: rgb(24, 111, 116); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 2px;" bx:shape="star 937 434 39.154 39.153 0.4 5 1@05a6f642" />
|
<path
|
||||||
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre;" x="316.854" y="190.447">rotate</text>
|
class="star"
|
||||||
|
d="M 937 394.847 L 946.206 421.33 L 974.238 421.901 L 951.895 438.84 L 960.014 465.675 L 937 449.661 L 913.986 465.675 L 922.105 438.84 L 899.762 421.901 L 927.794 421.33 Z"
|
||||||
|
transform="matrix(-0.809017, 0.587785, -0.587785, -0.809018, 1346.787902, -60.391979)"
|
||||||
|
style="
|
||||||
|
fill: rgb(83, 230, 226);
|
||||||
|
stroke: rgb(24, 111, 116);
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
stroke-dasharray: 2px;
|
||||||
|
"
|
||||||
|
bx:shape="star 937 434 39.154 39.153 0.4 5 1@05a6f642"
|
||||||
|
/>
|
||||||
|
<text style="fill: rgb(51, 51, 51); font-size: 12px; white-space: pre" x="316.854" y="190.447">
|
||||||
|
rotate
|
||||||
|
</text>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
const from = { scale: 1 }
|
||||||
|
const to = { scale: 1.3, transformOrigin: 'center', repeat: 1, yoyo: true }
|
||||||
|
|
||||||
const from = {scale: 1}
|
InteractionMapper.on('tap', document.getElementById('hammer-1'), (event) => {
|
||||||
const to = {scale: 1.3, transformOrigin: 'center', repeat: 1, yoyo: true}
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
|
|
||||||
InteractionMapper.on('tap', document.getElementById('hammer-1'), event => {
|
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper.on('press', document.getElementById('hammer-2'), event => {
|
InteractionMapper.on(
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
'press',
|
||||||
}, {time: 1000})
|
document.getElementById('hammer-2'),
|
||||||
|
(event) => {
|
||||||
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
|
},
|
||||||
|
{ time: 1000 }
|
||||||
|
)
|
||||||
|
|
||||||
InteractionMapper.on('panright pandown', document.getElementById('hammer-3'), event => {
|
InteractionMapper.on('panright pandown', document.getElementById('hammer-3'), (event) => {
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper.on(['swipeleft', 'swipedown'], document.getElementsByTagName('ellipse'), event => {
|
InteractionMapper.on(['swipeleft', 'swipedown'], document.getElementsByTagName('ellipse'), (event) => {
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper
|
InteractionMapper.on('pinch', document.getElementById('hammer-5'), (event) => {
|
||||||
.on('pinch', document.getElementById('hammer-5'), event => {
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper
|
InteractionMapper.on('rotate', document.querySelectorAll('svg g > path.star'), (event) => {
|
||||||
.on('rotate', document.querySelectorAll('svg g > path.star'), event => {
|
TweenLite.fromTo(event.target, 0.2, from, to)
|
||||||
TweenLite.fromTo(event.target, .2, from, to)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
InteractionMapper
|
InteractionMapper.on('click', document.getElementById('hammer-1'), (event) => {
|
||||||
.on('click', document.getElementById('hammer-1'), event => {
|
|
||||||
console.log(event)
|
console.log(event)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>
|
<h2>References</h2>
|
||||||
References
|
<ul>
|
||||||
</h2>
|
<li>
|
||||||
<ul>
|
<a href="https://www.amazon.de/Patterns-Elements-Reusable-Object-Oriented-Software/dp/0201633612"
|
||||||
<li><a href="https://www.amazon.de/Patterns-Elements-Reusable-Object-Oriented-Software/dp/0201633612">Design Patterns [p. 20]</a></li>
|
>Design Patterns [p. 20]</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
<li><a href="http://hammerjs.github.io">Hammer.js</a></li>
|
<li><a href="http://hammerjs.github.io">Hammer.js</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
BIN
lib/interaction.png
Normal file
BIN
lib/interaction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1002 KiB |
@ -1,50 +1,43 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Interfaces</h1>
|
||||||
Interfaces
|
<p>
|
||||||
</h1>
|
Interfaces are objects that specify (document) the external behavior of objects that “provide” them. An
|
||||||
<p>
|
interface specifies behavior through method definitions that specify functions and their signatures.
|
||||||
Interfaces are objects that specify (document) the external behavior of objects
|
</p>
|
||||||
that “provide” them. An interface specifies behavior through method definitions
|
<p>Let's look at an example of an interface and a class implementing the interface:</p>
|
||||||
that specify functions and their signatures.
|
<script class="doctest">
|
||||||
</p>
|
class ITestable extends Interface {
|
||||||
<p>Let's look at an example of an interface and a class implementing the interface:</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
class ITestable extends Interface {
|
|
||||||
reset() {}
|
reset() {}
|
||||||
run() {}
|
run() {}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Testable {
|
|
||||||
|
|
||||||
|
class Testable {
|
||||||
reset() {
|
reset() {
|
||||||
print("Resetting testable object")
|
print('Resetting testable object')
|
||||||
}
|
}
|
||||||
|
|
||||||
run() {
|
run() {
|
||||||
print("Running testable object")
|
print('Running testable object')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<p>We can now check whether the promised interface methods are implemented by the
|
<p>We can now check whether the promised interface methods are implemented by the class:</p>
|
||||||
class:</p>
|
<script class="doctest">
|
||||||
<script class="doctest">
|
Doctest.expect(ITestable.implementedBy(Testable), true)
|
||||||
Doctest.expect(ITestable.implementedBy(Testable), true)
|
</script>
|
||||||
</script>
|
<p></p>
|
||||||
<p>
|
<h2>References</h2>
|
||||||
<h2>
|
<ul>
|
||||||
References
|
|
||||||
</h2>
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://zopeinterface.readthedocs.io">Zope Interfaces</a></li>
|
<li><a href="https://zopeinterface.readthedocs.io">Zope Interfaces</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,33 +1,30 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<title>Logging Doctest</title>
|
<title>Logging Doctest</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="page" onload="Doctest.run()">
|
<body id="page" onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Logging</h1>
|
||||||
Logging
|
|
||||||
</h1>
|
|
||||||
<p>Store informations of your app permanently or use app specific logging functions.</p>
|
<p>Store informations of your app permanently or use app specific logging functions.</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
Logging.log('app started')
|
Logging.log('app started')
|
||||||
Logging.warn("shouldn't happen")
|
Logging.warn("shouldn't happen")
|
||||||
Logging.error('restart')
|
Logging.error('restart')
|
||||||
|
|
||||||
Logging.setup({ log: message => console.log("app specific" + message) })
|
Logging.setup({ log: (message) => console.log('app specific' + message) })
|
||||||
Logging.log("now app related")
|
Logging.log('now app related')
|
||||||
</script>
|
</script>
|
||||||
<p>You can overwrite the log, warn, and error handler by using Logging.setup with
|
<p>You can overwrite the log, warn, and error handler by using Logging.setup with app specific functions.</p>
|
||||||
app specific functions.</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
Logging.setup({ log: message => console.log("app specific" + message) })
|
Logging.setup({ log: (message) => console.log('app specific' + message) })
|
||||||
Logging.log("now app related")
|
Logging.log('now app related')
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Application</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Application</h1>
|
||||||
<p>
|
<p>
|
||||||
The class PIXIApp is the main entry point to create a new PIXI Application.
|
The class PIXIApp is the main entry point to create a new PIXI Application.
|
||||||
It inherits from PIXI.Application, set meaningfull defaults, creates a scene and
|
It inherits from PIXI.Application, set meaningfull defaults, creates a scene and
|
||||||
|
|||||||
BIN
lib/pixi/app.png
Normal file
BIN
lib/pixi/app.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 KiB |
@ -1,17 +1,20 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI.Application Doctest</title>
|
<title>PIXI.Application Doctest</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
||||||
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Vanilla PIXI.Application</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Vanilla PIXI.Application</h1>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const app = new PIXI.Application({
|
const app = new PIXI.Application({
|
||||||
@ -24,13 +27,14 @@
|
|||||||
|
|
||||||
// ex, add display objects
|
// ex, add display objects
|
||||||
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
|
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
|
||||||
sprite.scale.set(.3, .3)
|
sprite.scale.set(0.3, 0.3)
|
||||||
app.stage.addChild(sprite)
|
app.stage.addChild(sprite)
|
||||||
|
|
||||||
sprite.interactive = true
|
sprite.interactive = true
|
||||||
sprite.buttonMode = true
|
sprite.buttonMode = true
|
||||||
sprite.on('click', e => {
|
sprite.on('click', (e) => {
|
||||||
console.log('sprite clicked')
|
console.log('sprite clicked')
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/application.png
Normal file
BIN
lib/pixi/application.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
@ -5,10 +5,7 @@
|
|||||||
|
|
||||||
<title>PIXI Badge</title>
|
<title>PIXI Badge</title>
|
||||||
|
|
||||||
<link
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
rel="stylesheet"
|
|
||||||
href="../3rdparty/highlight/styles/default.css"
|
|
||||||
/>
|
|
||||||
<link rel="stylesheet" href="../../css/doctest.css" />
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
@ -18,16 +15,12 @@
|
|||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Badge</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Badge</h1>
|
||||||
<p>
|
<p>Small and adaptive tag for adding context to just about any content.</p>
|
||||||
Small and adaptive tag for adding context to just about any content.
|
|
||||||
</p>
|
|
||||||
<p>Let's look at some badge examples:</p>
|
<p>Let's look at some badge examples:</p>
|
||||||
<br />
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Badges, badges, badges...</p>
|
||||||
What you should see: Badges, badges, badges...
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
@ -120,13 +113,11 @@
|
|||||||
fill: 0xfe9727
|
fill: 0xfe9727
|
||||||
})
|
})
|
||||||
|
|
||||||
let sprite1 = new PIXI.Sprite(
|
let sprite1 = new PIXI.Sprite(PIXI.Texture.from('./assets/badge-1.mp4'))
|
||||||
PIXI.Texture.from('./assets/badge-1.mp4')
|
|
||||||
)
|
|
||||||
sprite1.scale.set(0.05, 0.05)
|
sprite1.scale.set(0.05, 0.05)
|
||||||
|
|
||||||
let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
|
let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
|
||||||
texture1.baseTexture.on('loaded', e => {
|
texture1.baseTexture.on('loaded', (e) => {
|
||||||
let sprite1 = new PIXI.Sprite(texture1)
|
let sprite1 = new PIXI.Sprite(texture1)
|
||||||
sprite1.scale.set(0.05, 0.05)
|
sprite1.scale.set(0.05, 0.05)
|
||||||
sprite1.alpha = 0.5
|
sprite1.alpha = 0.5
|
||||||
@ -145,14 +136,7 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(circle1, circle2)
|
app.scene.addChild(circle1, circle2)
|
||||||
app.scene.addChild(
|
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
||||||
button1,
|
|
||||||
button2,
|
|
||||||
button3,
|
|
||||||
button4,
|
|
||||||
button5,
|
|
||||||
button6
|
|
||||||
)
|
|
||||||
app.scene.addChild(badge1, badge2, badge3)
|
app.scene.addChild(badge1, badge2, badge3)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
BIN
lib/pixi/badge.png
Normal file
BIN
lib/pixi/badge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 KiB |
@ -1,50 +1,51 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI BlurFilter</title>
|
<title>PIXI BlurFilter</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>BlurFilter</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>BlurFilter</h1>
|
||||||
<p>
|
<p>
|
||||||
The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can specify
|
The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can
|
||||||
a range (defined as a PIXI.Rectangle) on which the filter should be applied.
|
specify a range (defined as a PIXI.Rectangle) on which the filter should be applied.
|
||||||
</p>
|
</p>
|
||||||
<h2>Example with Image</h2>
|
<h2>Example with Image</h2>
|
||||||
<p>Let's look at an example of creating a new blur filter near the bottom:</p>
|
<p>Let's look at an example of creating a new blur filter near the bottom:</p>
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).</p>
|
||||||
What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
// Create the app
|
// Create the app
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 480,
|
width: 480,
|
||||||
height: 270,
|
height: 270,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
// Load a video and add it to the scene
|
// Load a video and add it to the scene
|
||||||
const videoSprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
|
const videoSprite = new PIXI.Sprite(PIXI.Texture.from('assets/blurfilter.mp4'))
|
||||||
videoSprite.width = app.size.width
|
videoSprite.width = app.size.width
|
||||||
videoSprite.height = app.size.height
|
videoSprite.height = app.size.height
|
||||||
app.scene.addChild(videoSprite)
|
app.scene.addChild(videoSprite)
|
||||||
|
|
||||||
// Create three filters and assign them to the scene
|
// Create three filters and assign them to the scene
|
||||||
const blurFilter1 = new BlurFilter(new PIXI.Rectangle(40, 40, 120, 80))
|
const blurFilter1 = new BlurFilter(new PIXI.Rectangle(40, 40, 120, 80))
|
||||||
const blurFilter2 = new BlurFilter(new PIXI.Circle(240, 140, 60), 150)
|
const blurFilter2 = new BlurFilter(new PIXI.Circle(240, 140, 60), 150)
|
||||||
const blurFilter3 = new BlurFilter(new PIXI.Rectangle(380, 40, 100, 100), 20)
|
const blurFilter3 = new BlurFilter(new PIXI.Rectangle(380, 40, 100, 100), 20)
|
||||||
app.scene.filters = [blurFilter1, blurFilter2, blurFilter3]
|
app.scene.filters = [blurFilter1, blurFilter2, blurFilter3]
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/blurfilter.png
Normal file
BIN
lib/pixi/blurfilter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@ -1,100 +1,101 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Button</title>
|
<title>PIXI Button</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Button</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Button</h1>
|
||||||
<p>
|
<p>
|
||||||
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
|
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
|
||||||
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
|
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
|
||||||
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
|
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
|
||||||
the button type to "checkbox".
|
between active/inactive, set the button type to "checkbox".
|
||||||
</p>
|
</p>
|
||||||
<p><a href="../../doc/out/Button.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/Button.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some button examples:</p><br />
|
<p>Let's look at some button examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Many buttons with very different styling and behaviour.</p>
|
||||||
What you should see: Many buttons with very different styling and behaviour.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 600,
|
height: 600,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const button1 = new Button({x: 10, y: 10})
|
const button1 = new Button({ x: 10, y: 10 })
|
||||||
|
|
||||||
const button2 = new Button({
|
const button2 = new Button({
|
||||||
theme: 'red',
|
theme: 'red',
|
||||||
x: 60,
|
x: 60,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
console.info('Button clicked')
|
console.info('Button clicked')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button3 = new Button({
|
const button3 = new Button({
|
||||||
x: 150,
|
x: 150,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Checkbox button',
|
label: 'Checkbox button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
console.info('Button clicked', e)
|
console.info('Button clicked', e)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button4 = new Button({
|
const button4 = new Button({
|
||||||
x: 330,
|
x: 330,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Disabled button',
|
label: 'Disabled button',
|
||||||
disabled: true,
|
disabled: true,
|
||||||
action: e => {
|
action: (e) => {
|
||||||
console.info('Disabled button clicked')
|
console.info('Disabled button clicked')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button5 = new Button({
|
const button5 = new Button({
|
||||||
x: 500,
|
x: 500,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Active button',
|
label: 'Active button',
|
||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const button6 = new Button({
|
const button6 = new Button({
|
||||||
x: 650,
|
x: 650,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Active disabled button',
|
label: 'Active disabled button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
active: true,
|
active: true,
|
||||||
disabled: true
|
disabled: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const button7 = new Button({
|
const button7 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 70,
|
y: 70,
|
||||||
label: 'Icon button',
|
label: 'Icon button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
active: true,
|
active: true,
|
||||||
icon: 'arrow_back'
|
icon: 'arrow_back'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button8 = new Button({
|
const button8 = new Button({
|
||||||
x: 180,
|
x: 180,
|
||||||
y: 70,
|
y: 70,
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
@ -102,33 +103,33 @@ const button8 = new Button({
|
|||||||
icon: 'arrow_forward',
|
icon: 'arrow_forward',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
iconPosition: 'right'
|
iconPosition: 'right'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button9 = new Button({
|
const button9 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 130,
|
y: 130,
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
icon: 'play_arrow',
|
icon: 'play_arrow',
|
||||||
iconActive: 'pause'
|
iconActive: 'pause'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button10 = new Button({
|
const button10 = new Button({
|
||||||
x: 60,
|
x: 60,
|
||||||
y: 130,
|
y: 130,
|
||||||
icon: 'stop',
|
icon: 'stop',
|
||||||
action: function() {
|
action: function () {
|
||||||
this.iconColor = Math.round(Math.random() * 16777215)
|
this.iconColor = Math.round(Math.random() * 16777215)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button11 = new Button({
|
const button11 = new Button({
|
||||||
x: 110,
|
x: 110,
|
||||||
y: 130,
|
y: 130,
|
||||||
icon: 'star_border',
|
icon: 'star_border',
|
||||||
tooltip: 'Bookmark'
|
tooltip: 'Bookmark'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button12 = new Button({
|
const button12 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 190,
|
y: 190,
|
||||||
icon: 'airplay',
|
icon: 'airplay',
|
||||||
@ -139,9 +140,9 @@ const button12 = new Button({
|
|||||||
fillActiveAlpha: 0,
|
fillActiveAlpha: 0,
|
||||||
strokeActiveAlpha: 0,
|
strokeActiveAlpha: 0,
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button13 = new Button({
|
const button13 = new Button({
|
||||||
x: 50,
|
x: 50,
|
||||||
y: 190,
|
y: 190,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -167,27 +168,27 @@ const button13 = new Button({
|
|||||||
letterSpacing: 5
|
letterSpacing: 5
|
||||||
},
|
},
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button14 = new Button({
|
const button14 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
icon: null,
|
icon: null,
|
||||||
iconActive: 'add_circle'
|
iconActive: 'add_circle'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button15 = new Button({
|
const button15 = new Button({
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
icon: 'add_circle',
|
icon: 'add_circle',
|
||||||
iconActive: null
|
iconActive: null
|
||||||
})
|
})
|
||||||
|
|
||||||
const button16 = new Button({
|
const button16 = new Button({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -195,9 +196,9 @@ const button16 = new Button({
|
|||||||
icon: null,
|
icon: null,
|
||||||
iconActive: 'add_circle',
|
iconActive: 'add_circle',
|
||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const button17 = new Button({
|
const button17 = new Button({
|
||||||
x: 600,
|
x: 600,
|
||||||
y: 250,
|
y: 250,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -205,34 +206,34 @@ const button17 = new Button({
|
|||||||
icon: 'add_circle',
|
icon: 'add_circle',
|
||||||
iconActive: null,
|
iconActive: null,
|
||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let graphic1 = new PIXI.Graphics()
|
let graphic1 = new PIXI.Graphics()
|
||||||
graphic1.beginFill(0xd7a3f9)
|
graphic1.beginFill(0xd7a3f9)
|
||||||
graphic1.drawCircle(10, 10, 10)
|
graphic1.drawCircle(10, 10, 10)
|
||||||
|
|
||||||
let graphic2 = new PIXI.Graphics()
|
let graphic2 = new PIXI.Graphics()
|
||||||
graphic2.beginFill(0x40c3f2)
|
graphic2.beginFill(0x40c3f2)
|
||||||
graphic2.drawCircle(30, 30, 30)
|
graphic2.drawCircle(30, 30, 30)
|
||||||
|
|
||||||
const button18 = new Button({
|
const button18 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
icon: graphic1,
|
icon: graphic1,
|
||||||
iconActive: graphic2
|
iconActive: graphic2
|
||||||
})
|
})
|
||||||
|
|
||||||
let graphic3 = new PIXI.Graphics()
|
let graphic3 = new PIXI.Graphics()
|
||||||
graphic3.beginFill(0xfd6b6a)
|
graphic3.beginFill(0xfd6b6a)
|
||||||
graphic3.drawCircle(2, 2, 2)
|
graphic3.drawCircle(2, 2, 2)
|
||||||
|
|
||||||
let graphic4 = new PIXI.Graphics()
|
let graphic4 = new PIXI.Graphics()
|
||||||
graphic4.beginFill(0xf8ce2d)
|
graphic4.beginFill(0xf8ce2d)
|
||||||
graphic4.drawCircle(40, 40, 40)
|
graphic4.drawCircle(40, 40, 40)
|
||||||
|
|
||||||
const button19 = new Button({
|
const button19 = new Button({
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Button',
|
label: 'Button',
|
||||||
@ -241,20 +242,20 @@ const button19 = new Button({
|
|||||||
iconActive: graphic4,
|
iconActive: graphic4,
|
||||||
active: true,
|
active: true,
|
||||||
iconPosition: 'right'
|
iconPosition: 'right'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button20 = new Button({
|
const button20 = new Button({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 310,
|
y: 310,
|
||||||
label: 'Link Button',
|
label: 'Link Button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
style: 'link',
|
style: 'link',
|
||||||
action: event => {
|
action: (event) => {
|
||||||
console.log('Link button clicked')
|
console.log('Link button clicked')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button21 = new Button({
|
const button21 = new Button({
|
||||||
x: 600,
|
x: 600,
|
||||||
y: 310,
|
y: 310,
|
||||||
minWidth: 70,
|
minWidth: 70,
|
||||||
@ -262,23 +263,23 @@ const button21 = new Button({
|
|||||||
icon: 'loop',
|
icon: 'loop',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
style: 'link'
|
style: 'link'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button22 = new Button({
|
const button22 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 440,
|
y: 440,
|
||||||
icon: 'play_arrow',
|
icon: 'play_arrow',
|
||||||
badge: '19'
|
badge: '19'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button23 = new Button({
|
const button23 = new Button({
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 440,
|
y: 440,
|
||||||
icon: 'stop',
|
icon: 'stop',
|
||||||
badge: 'Stop'
|
badge: 'Stop'
|
||||||
})
|
})
|
||||||
|
|
||||||
const button24 = new Button({
|
const button24 = new Button({
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 440,
|
y: 440,
|
||||||
icon: 'star_border',
|
icon: 'star_border',
|
||||||
@ -290,9 +291,9 @@ const button24 = new Button({
|
|||||||
radius: 14,
|
radius: 14,
|
||||||
fill: 0xfe832d
|
fill: 0xfe832d
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const button25 = new Button({
|
const button25 = new Button({
|
||||||
x: 300,
|
x: 300,
|
||||||
y: 460,
|
y: 460,
|
||||||
icon: 'add',
|
icon: 'add',
|
||||||
@ -304,15 +305,121 @@ const button25 = new Button({
|
|||||||
radius: 12,
|
radius: 12,
|
||||||
fill: 0x5856d6
|
fill: 0x5856d6
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const countries = ['Tajikistan', 'Zambia', 'Dominica', 'Australia', 'Botswana', 'Mozambique', 'Lesotho', 'Thailand', 'Gabon', 'Cuba', 'Mexico', 'Central African Republic', 'Réunion', 'Montenegro', 'Romania', 'Jamaica', 'Thailand', 'Cameroon', 'French Guiana', 'Nigeria', 'Tokelau', 'Slovenia', 'Kuwait', 'Palestinian Territories', 'Estonia', 'Germany', 'Cameroon', 'Somalia', 'El Salvador', 'San Marino', 'Sierra Leone', 'Sierra Leone', 'Gibraltar', 'Benin', 'Russia', 'Iraq', 'Tunisia', 'Greenland', 'Côte d\'Ivoire', 'Tanzania', 'Zambia', 'Bermuda', 'Somalia', 'Malaysia', 'Croatia', 'Togo', 'Belgium', 'Uruguay', 'Equatorial Guinea', 'Nigeria', 'St. Martin', 'Tuvalu', 'South Africa', 'Hong Kong SAR China', 'Palau', 'Canary Islands', 'Algeria', 'Hong Kong SAR China', 'Brunei', 'Dominican Republic', 'Sierra Leone', 'Moldova', 'Indonesia', 'Central African Republic', 'Anguilla', 'Malaysia', 'Bahrain', 'Indonesia', 'Peru', 'Namibia', 'Congo - Brazzaville', 'Micronesia', 'Cambodia', 'Réunion', 'Honduras', 'Hungary', 'Brazil', 'Trinidad & Tobago', 'Hungary', 'Madagascar', 'Sierra Leone', 'Seychelles', 'St. Martin', 'New Caledonia', 'Tokelau', 'Macedonia', 'Netherlands', 'Panama', 'Venezuela', 'Nepal', 'Guernsey', 'Papua New Guinea', 'Finland', 'Malaysia', 'Hong Kong SAR China', 'Trinidad & Tobago', 'Montserrat', 'Comoros', 'Benin', 'South Korea', 'Peru', 'Botswana', 'Cambodia', 'Isle of Man', 'Mozambique']
|
const countries = [
|
||||||
setInterval(() => {
|
'Tajikistan',
|
||||||
|
'Zambia',
|
||||||
|
'Dominica',
|
||||||
|
'Australia',
|
||||||
|
'Botswana',
|
||||||
|
'Mozambique',
|
||||||
|
'Lesotho',
|
||||||
|
'Thailand',
|
||||||
|
'Gabon',
|
||||||
|
'Cuba',
|
||||||
|
'Mexico',
|
||||||
|
'Central African Republic',
|
||||||
|
'Réunion',
|
||||||
|
'Montenegro',
|
||||||
|
'Romania',
|
||||||
|
'Jamaica',
|
||||||
|
'Thailand',
|
||||||
|
'Cameroon',
|
||||||
|
'French Guiana',
|
||||||
|
'Nigeria',
|
||||||
|
'Tokelau',
|
||||||
|
'Slovenia',
|
||||||
|
'Kuwait',
|
||||||
|
'Palestinian Territories',
|
||||||
|
'Estonia',
|
||||||
|
'Germany',
|
||||||
|
'Cameroon',
|
||||||
|
'Somalia',
|
||||||
|
'El Salvador',
|
||||||
|
'San Marino',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Gibraltar',
|
||||||
|
'Benin',
|
||||||
|
'Russia',
|
||||||
|
'Iraq',
|
||||||
|
'Tunisia',
|
||||||
|
'Greenland',
|
||||||
|
"Côte d'Ivoire",
|
||||||
|
'Tanzania',
|
||||||
|
'Zambia',
|
||||||
|
'Bermuda',
|
||||||
|
'Somalia',
|
||||||
|
'Malaysia',
|
||||||
|
'Croatia',
|
||||||
|
'Togo',
|
||||||
|
'Belgium',
|
||||||
|
'Uruguay',
|
||||||
|
'Equatorial Guinea',
|
||||||
|
'Nigeria',
|
||||||
|
'St. Martin',
|
||||||
|
'Tuvalu',
|
||||||
|
'South Africa',
|
||||||
|
'Hong Kong SAR China',
|
||||||
|
'Palau',
|
||||||
|
'Canary Islands',
|
||||||
|
'Algeria',
|
||||||
|
'Hong Kong SAR China',
|
||||||
|
'Brunei',
|
||||||
|
'Dominican Republic',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Moldova',
|
||||||
|
'Indonesia',
|
||||||
|
'Central African Republic',
|
||||||
|
'Anguilla',
|
||||||
|
'Malaysia',
|
||||||
|
'Bahrain',
|
||||||
|
'Indonesia',
|
||||||
|
'Peru',
|
||||||
|
'Namibia',
|
||||||
|
'Congo - Brazzaville',
|
||||||
|
'Micronesia',
|
||||||
|
'Cambodia',
|
||||||
|
'Réunion',
|
||||||
|
'Honduras',
|
||||||
|
'Hungary',
|
||||||
|
'Brazil',
|
||||||
|
'Trinidad & Tobago',
|
||||||
|
'Hungary',
|
||||||
|
'Madagascar',
|
||||||
|
'Sierra Leone',
|
||||||
|
'Seychelles',
|
||||||
|
'St. Martin',
|
||||||
|
'New Caledonia',
|
||||||
|
'Tokelau',
|
||||||
|
'Macedonia',
|
||||||
|
'Netherlands',
|
||||||
|
'Panama',
|
||||||
|
'Venezuela',
|
||||||
|
'Nepal',
|
||||||
|
'Guernsey',
|
||||||
|
'Papua New Guinea',
|
||||||
|
'Finland',
|
||||||
|
'Malaysia',
|
||||||
|
'Hong Kong SAR China',
|
||||||
|
'Trinidad & Tobago',
|
||||||
|
'Montserrat',
|
||||||
|
'Comoros',
|
||||||
|
'Benin',
|
||||||
|
'South Korea',
|
||||||
|
'Peru',
|
||||||
|
'Botswana',
|
||||||
|
'Cambodia',
|
||||||
|
'Isle of Man',
|
||||||
|
'Mozambique'
|
||||||
|
]
|
||||||
|
setInterval(() => {
|
||||||
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
|
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
|
||||||
button25.layout()
|
button25.layout()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
const button26 = new Button({
|
const button26 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 520,
|
y: 520,
|
||||||
label: 'add',
|
label: 'add',
|
||||||
@ -321,18 +428,18 @@ const button26 = new Button({
|
|||||||
textStyleActive: {
|
textStyleActive: {
|
||||||
fill: 0x28a745
|
fill: 0x28a745
|
||||||
},
|
},
|
||||||
textAlpha: .2,
|
textAlpha: 0.2,
|
||||||
textActiveAlpha: .6
|
textActiveAlpha: 0.6
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
app.scene.addChild(button1, button2, button3, button4, button5, button6)
|
||||||
app.scene.addChild(button7, button8)
|
app.scene.addChild(button7, button8)
|
||||||
app.scene.addChild(button9, button10, button11)
|
app.scene.addChild(button9, button10, button11)
|
||||||
app.scene.addChild(button12, button13)
|
app.scene.addChild(button12, button13)
|
||||||
app.scene.addChild(button14, button15, button16, button17)
|
app.scene.addChild(button14, button15, button16, button17)
|
||||||
app.scene.addChild(button18, button19, button20, button21)
|
app.scene.addChild(button18, button19, button20, button21)
|
||||||
app.scene.addChild(button22, button23, button24, button25)
|
app.scene.addChild(button22, button23, button24, button25)
|
||||||
app.scene.addChild(button26)
|
app.scene.addChild(button26)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/button.png
Normal file
BIN
lib/pixi/button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 509 KiB |
@ -1,12 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-eqv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-eqv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI ButtonGroup</title>
|
<title>PIXI ButtonGroup</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -14,75 +14,87 @@
|
|||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>ButtonGroup</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>ButtonGroup</h1>
|
||||||
<p>
|
<p>Group a series of buttons together on a single line with the button group.</p>
|
||||||
Group a series of buttons together on a single line with the button group.
|
|
||||||
</p>
|
|
||||||
<p><a href="../../doc/out/ButtonGroup.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/ButtonGroup.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some button groups:</p><br />
|
<p>Let's look at some button groups:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Many button groups with very different styling and behaviour.</p>
|
||||||
What you should see: Many button groups with very different styling and behaviour.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 1000,
|
width: 1000,
|
||||||
height: 1700
|
height: 1700
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const buttonGroup1 = new ButtonGroup({
|
const buttonGroup1 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'keyboard_arrow_left'},
|
{ icon: 'keyboard_arrow_left' },
|
||||||
{icon: 'keyboard_arrow_up'},
|
{ icon: 'keyboard_arrow_up' },
|
||||||
{icon: 'keyboard_arrow_down'},
|
{ icon: 'keyboard_arrow_down' },
|
||||||
{icon: 'keyboard_arrow_right'}
|
{ icon: 'keyboard_arrow_right' }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup2 = new ButtonGroup({
|
const buttonGroup2 = new ButtonGroup({
|
||||||
x: 260,
|
x: 260,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'directions_walk', tooltip: 'Gehen'},
|
{ icon: 'directions_walk', tooltip: 'Gehen' },
|
||||||
{icon: 'directions_run', tooltip: 'Laufen'},
|
{ icon: 'directions_run', tooltip: 'Laufen' },
|
||||||
{icon: 'directions_bike', tooltip: 'Fahrrad'},
|
{ icon: 'directions_bike', tooltip: 'Fahrrad' },
|
||||||
{icon: 'directions_bus', tooltip: 'Bus'},
|
{ icon: 'directions_bus', tooltip: 'Bus' },
|
||||||
{icon: 'directions_car', tooltip: 'Auto'},
|
{ icon: 'directions_car', tooltip: 'Auto' },
|
||||||
{icon: 'directions_boat', tooltip: 'Schiff'},
|
{ icon: 'directions_boat', tooltip: 'Schiff' },
|
||||||
{icon: 'directions_railway', tooltip: 'Bahn'}
|
{ icon: 'directions_railway', tooltip: 'Bahn' }
|
||||||
],
|
],
|
||||||
margin: 0,
|
margin: 0,
|
||||||
stroke: 0x0088ff,
|
stroke: 0x0088ff,
|
||||||
strokeWidth: 3
|
strokeWidth: 3
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup3 = new ButtonGroup({
|
const buttonGroup3 = new ButtonGroup({
|
||||||
x: 610,
|
x: 610,
|
||||||
y: 10,
|
y: 10,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'laptop'},
|
{ icon: 'laptop' },
|
||||||
{label: 'Linux'},
|
{ label: 'Linux' },
|
||||||
{icon: 'laptop_windows', label: 'Windows', align: 'center'},
|
{ icon: 'laptop_windows', label: 'Windows', align: 'center' },
|
||||||
{icon: 'laptop_mac', iconPosition: 'right', label: 'macOS'}
|
{ icon: 'laptop_mac', iconPosition: 'right', label: 'macOS' }
|
||||||
],
|
],
|
||||||
margin: 0,
|
margin: 0,
|
||||||
stroke: 0xffffff,
|
stroke: 0xffffff,
|
||||||
strokeWidth: 1
|
strokeWidth: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup4 = new ButtonGroup({
|
const buttonGroup4 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 90,
|
y: 90,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Button 1', action: (event, button) => console.log(button.id)},
|
{ label: 'Button 1', action: (event, button) => console.log(button.id) },
|
||||||
{label: 'Button 2', action: (event, button) => console.log(button.id), radius: 0},
|
{ label: 'Button 2', action: (event, button) => console.log(button.id), radius: 0 },
|
||||||
{label: 'Button 3', textStyle: {fill: '#fd6b6a'}, stroke: 0xd7a3f9, strokeWidth: 8, strokeAlpha: .8},
|
{
|
||||||
{label: 'Button 4', textStyle: {fill: '#40c3f2'}, radius: 20, icon: 'looks', iconPosition: 'right', iconColor: 0xd7ff30}
|
label: 'Button 3',
|
||||||
|
textStyle: { fill: '#fd6b6a' },
|
||||||
|
stroke: 0xd7a3f9,
|
||||||
|
strokeWidth: 8,
|
||||||
|
strokeAlpha: 0.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Button 4',
|
||||||
|
textStyle: { fill: '#40c3f2' },
|
||||||
|
radius: 20,
|
||||||
|
icon: 'looks',
|
||||||
|
iconPosition: 'right',
|
||||||
|
iconColor: 0xd7ff30
|
||||||
|
}
|
||||||
],
|
],
|
||||||
margin: 40,
|
margin: 40,
|
||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
@ -92,102 +104,97 @@ const buttonGroup4 = new ButtonGroup({
|
|||||||
},
|
},
|
||||||
stroke: 0xffffff,
|
stroke: 0xffffff,
|
||||||
strokeWidth: 1
|
strokeWidth: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup5 = new ButtonGroup({
|
const buttonGroup5 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 180,
|
y: 180,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'ButtonGroup'},
|
{ label: 'ButtonGroup' },
|
||||||
{label: 'of', active: true},
|
{ label: 'of', active: true },
|
||||||
{label: 'type'},
|
{ label: 'type' },
|
||||||
{minWidth: 30, style: 'link'},
|
{ minWidth: 30, style: 'link' },
|
||||||
{label: 'checkbox', active: true}
|
{ label: 'checkbox', active: true }
|
||||||
],
|
],
|
||||||
margin: 6,
|
margin: 6,
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup6 = new ButtonGroup({
|
const buttonGroup6 = new ButtonGroup({
|
||||||
x: 450,
|
x: 450,
|
||||||
y: 180,
|
y: 180,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'ButtonGroup'},
|
{ label: 'ButtonGroup' },
|
||||||
{label: 'of'},
|
{ label: 'of' },
|
||||||
{label: 'type', active: true},
|
{ label: 'type', active: true },
|
||||||
{label: 'radio'}
|
{ label: 'radio' }
|
||||||
],
|
],
|
||||||
margin: 0,
|
margin: 0,
|
||||||
type: 'radio'
|
type: 'radio'
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup7 = new ButtonGroup({
|
const buttonGroup7 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 250,
|
y: 250,
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'ButtonGroup'},
|
{ label: 'ButtonGroup' },
|
||||||
{label: 'of'},
|
{ label: 'of' },
|
||||||
{label: 'style'},
|
{ label: 'style' },
|
||||||
{label: 'link'},
|
{ label: 'link' },
|
||||||
{label: 'with'},
|
{ label: 'with' },
|
||||||
{label: 'one exception', style: 'default'}
|
{ label: 'one exception', style: 'default' }
|
||||||
],
|
],
|
||||||
style: 'link'
|
style: 'link'
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup8 = new ButtonGroup({
|
const buttonGroup8 = new ButtonGroup({
|
||||||
x: 610,
|
x: 610,
|
||||||
y: 250,
|
y: 250,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'airline_seat_legroom_extra'},
|
{ icon: 'airline_seat_legroom_extra' },
|
||||||
{icon: 'airline_seat_legroom_normal'},
|
{ icon: 'airline_seat_legroom_normal' },
|
||||||
{icon: 'airline_seat_legroom_reduced'},
|
{ icon: 'airline_seat_legroom_reduced' },
|
||||||
{icon: 'wifi_tethering', type: 'checkbox'}
|
{ icon: 'wifi_tethering', type: 'checkbox' }
|
||||||
],
|
],
|
||||||
type: 'radio',
|
type: 'radio',
|
||||||
margin: 0
|
margin: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup9 = new ButtonGroup({
|
const buttonGroup9 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [{ icon: 'attachment' }, { icon: 'autorenew' }, { icon: 'backup' }, { icon: 'apps' }],
|
||||||
{icon: 'attachment'},
|
|
||||||
{icon: 'autorenew'},
|
|
||||||
{icon: 'backup'},
|
|
||||||
{icon: 'apps'}
|
|
||||||
],
|
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
minWidth: 70
|
minWidth: 70
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup10 = new ButtonGroup({
|
const buttonGroup10 = new ButtonGroup({
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Vertical'},
|
{ label: 'Vertical' },
|
||||||
{label: 'ButtonGroup'},
|
{ label: 'ButtonGroup' },
|
||||||
{label: 'align: left', active: true},
|
{ label: 'align: left', active: true },
|
||||||
{label: 'margin: 0'}
|
{ label: 'margin: 0' }
|
||||||
],
|
],
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
stroke: 0xff0000,
|
stroke: 0xff0000,
|
||||||
strokeWidth: 3,
|
strokeWidth: 3,
|
||||||
align: 'left',
|
align: 'left',
|
||||||
margin: 0
|
margin: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup11 = new ButtonGroup({
|
const buttonGroup11 = new ButtonGroup({
|
||||||
x: 250,
|
x: 250,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Vertical', active: true, verticalAlign: 'top'},
|
{ label: 'Vertical', active: true, verticalAlign: 'top' },
|
||||||
{label: 'ButtonGroup'},
|
{ label: 'ButtonGroup' },
|
||||||
{label: 'centered', active: true, disabled: true, verticalAlign: 'middle'},
|
{ label: 'centered', active: true, disabled: true, verticalAlign: 'middle' },
|
||||||
{label: 'of', disabled: true, align: 'left'},
|
{ label: 'of', disabled: true, align: 'left' },
|
||||||
{label: 'type'},
|
{ label: 'type' },
|
||||||
{label: 'checkbox', align: 'right', verticalAlign: 'bottom'}
|
{ label: 'checkbox', align: 'right', verticalAlign: 'bottom' }
|
||||||
],
|
],
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
@ -197,32 +204,38 @@ const buttonGroup11 = new ButtonGroup({
|
|||||||
minWidth: 100,
|
minWidth: 100,
|
||||||
stroke: 0x22ee22,
|
stroke: 0x22ee22,
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup12 = new ButtonGroup({
|
const buttonGroup12 = new ButtonGroup({
|
||||||
x: 400,
|
x: 400,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Controls', disabled: true},
|
{ label: 'Controls', disabled: true },
|
||||||
{icon: 'play_arrow'},
|
{ icon: 'play_arrow' },
|
||||||
{icon: 'pause', active: true, align: 'left'},
|
{ icon: 'pause', active: true, align: 'left' },
|
||||||
{icon: 'stop', verticalAlign: 'bottom'}
|
{ icon: 'stop', verticalAlign: 'bottom' }
|
||||||
],
|
],
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
align: 'right',
|
align: 'right',
|
||||||
type: 'radio'
|
type: 'radio'
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup13 = new ButtonGroup({
|
const buttonGroup13 = new ButtonGroup({
|
||||||
x: 520,
|
x: 520,
|
||||||
y: 320,
|
y: 320,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Volume', align: 'center', disabled: true},
|
{ label: 'Volume', align: 'center', disabled: true },
|
||||||
{icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top'},
|
{ icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top' },
|
||||||
{icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9},
|
{ icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9 },
|
||||||
{icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right'},
|
{ icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right' },
|
||||||
{icon: 'volume_up', label: 'Lauter', align: 'right', iconPosition: 'right', verticalAlign: 'bottom'}
|
{
|
||||||
|
icon: 'volume_up',
|
||||||
|
label: 'Lauter',
|
||||||
|
align: 'right',
|
||||||
|
iconPosition: 'right',
|
||||||
|
verticalAlign: 'bottom'
|
||||||
|
}
|
||||||
],
|
],
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
@ -231,145 +244,147 @@ const buttonGroup13 = new ButtonGroup({
|
|||||||
strokeWidth: 4,
|
strokeWidth: 4,
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
minHeight: 100
|
minHeight: 100
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup14 = new ButtonGroup({
|
const buttonGroup14 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 960,
|
y: 960,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'Stacked button 1', action: event => console.log('clicked 1')},
|
{ label: 'Stacked button 1', action: (event) => console.log('clicked 1') },
|
||||||
{label: 'Stacked button 2', action: event => console.log('clicked 2')},
|
{ label: 'Stacked button 2', action: (event) => console.log('clicked 2') },
|
||||||
{label: 'Stacked button 3', action: event => console.log('clicked 3')},
|
{ label: 'Stacked button 3', action: (event) => console.log('clicked 3') },
|
||||||
{label: 'Stacked button 4', action: event => console.log('clicked 4')},
|
{ label: 'Stacked button 4', action: (event) => console.log('clicked 4') },
|
||||||
{label: 'Stacked button 5', action: event => console.log('clicked 5')},
|
{ label: 'Stacked button 5', action: (event) => console.log('clicked 5') },
|
||||||
{label: 'Stacked button 6', action: event => console.log('clicked 6')},
|
{ label: 'Stacked button 6', action: (event) => console.log('clicked 6') },
|
||||||
{label: 'Stacked button 7', action: event => console.log('clicked 7')},
|
{ label: 'Stacked button 7', action: (event) => console.log('clicked 7') },
|
||||||
{label: 'Stacked button 8', action: event => console.log('clicked 8')}
|
{ label: 'Stacked button 8', action: (event) => console.log('clicked 8') }
|
||||||
],
|
],
|
||||||
stackPadding: 6,
|
stackPadding: 6,
|
||||||
maxWidth: 620,
|
maxWidth: 620,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup15 = new ButtonGroup({
|
const buttonGroup15 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 1040,
|
y: 1040,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
|
{ icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36 },
|
||||||
{icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
|
{ icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927 },
|
||||||
{icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
|
{ icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201 },
|
||||||
{icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
|
{ icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00 },
|
||||||
{icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
|
{ icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af },
|
||||||
{icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
|
{ icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc },
|
||||||
{icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
|
{ icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7 }
|
||||||
],
|
],
|
||||||
orientation: 'vertical',
|
orientation: 'vertical',
|
||||||
margin: 1,
|
margin: 1,
|
||||||
maxHeight: 200,
|
maxHeight: 200,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttons16 = []
|
const buttons16 = []
|
||||||
for (let i = 1; i < 101; i++) {
|
for (let i = 1; i < 101; i++) {
|
||||||
buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16})
|
buttons16.push({
|
||||||
}
|
label: `Button ${i}`,
|
||||||
|
stroke: Math.floor(Math.random() * 16777215),
|
||||||
|
strokeWidth: 3,
|
||||||
|
radius: 16
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
buttons16.splice(6, 0, {minWidth: 50, style: 'link'})
|
buttons16.splice(6, 0, { minWidth: 50, style: 'link' })
|
||||||
const buttonGroup16 = new ButtonGroup({
|
const buttonGroup16 = new ButtonGroup({
|
||||||
x: 90,
|
x: 90,
|
||||||
y: 1040,
|
y: 1040,
|
||||||
buttons: buttons16,
|
buttons: buttons16,
|
||||||
stackPadding: 3,
|
stackPadding: 3,
|
||||||
maxWidth: 900,
|
maxWidth: 900,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup17 = new ButtonGroup({
|
const buttonGroup17 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 1270,
|
y: 1270,
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
|
{ icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport' },
|
||||||
{icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
|
{ icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar' },
|
||||||
{icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
|
{ icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe' },
|
||||||
{icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
|
{ icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash' },
|
||||||
{icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
|
{ icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining' },
|
||||||
{icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
|
{ icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist' },
|
||||||
{icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station'},
|
{ icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station' },
|
||||||
{icon: 'local_grocery_store', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Grocery store'},
|
{
|
||||||
{icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall'},
|
icon: 'local_grocery_store',
|
||||||
{icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza'},
|
type: 'checkbox',
|
||||||
{icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop'},
|
iconColorActive: 0xefc201,
|
||||||
{icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy'}
|
badge: 'Grocery store'
|
||||||
|
},
|
||||||
|
{ icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall' },
|
||||||
|
{ icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza' },
|
||||||
|
{ icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop' },
|
||||||
|
{ icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy' }
|
||||||
],
|
],
|
||||||
margin: 50,
|
margin: 50,
|
||||||
maxWidth: 400,
|
maxWidth: 400,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup18 = new ButtonGroup({
|
const buttonGroup18 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 1340,
|
y: 1340,
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'move'},
|
{ label: 'move' },
|
||||||
{label: 'explanation dried'},
|
{ label: 'explanation dried' },
|
||||||
{label: 'out catch'},
|
{ label: 'out catch' },
|
||||||
{label: 'late either'},
|
{ label: 'late either' },
|
||||||
{label: 'tell pour'},
|
{ label: 'tell pour' },
|
||||||
{label: 'willing apart airplane'},
|
{ label: 'willing apart airplane' },
|
||||||
{label: 'high war'},
|
{ label: 'high war' },
|
||||||
{label: 'future struck'},
|
{ label: 'future struck' },
|
||||||
{label: 'sense image'},
|
{ label: 'sense image' },
|
||||||
{label: 'never'},
|
{ label: 'never' },
|
||||||
{label: 'mark cloth'},
|
{ label: 'mark cloth' },
|
||||||
{label: 'everywhere due large'}
|
{ label: 'everywhere due large' }
|
||||||
],
|
],
|
||||||
maxWidth: 500,
|
maxWidth: 500,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup19 = new ButtonGroup({
|
const buttonGroup19 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 1420,
|
y: 1420,
|
||||||
buttons: [
|
buttons: [{ label: 'move' }, { label: 'explanation dried' }, { label: 'out catch' }],
|
||||||
{label: 'move'},
|
|
||||||
{label: 'explanation dried'},
|
|
||||||
{label: 'out catch'}
|
|
||||||
],
|
|
||||||
maxWidth: 500,
|
maxWidth: 500,
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonGroup20 = new ButtonGroup({
|
const buttonGroup20 = new ButtonGroup({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 1520,
|
y: 1520,
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
buttons: [
|
buttons: [{ label: 'one' }, { label: 'two' }, { label: 'three' }],
|
||||||
{label: 'one'},
|
textAlpha: 0.7,
|
||||||
{label: 'two'},
|
textActiveAlpha: 0.2
|
||||||
{label: 'three'}
|
})
|
||||||
],
|
|
||||||
textAlpha: .7,
|
|
||||||
textActiveAlpha: .2
|
|
||||||
})
|
|
||||||
|
|
||||||
const buttonGroup21 = new ButtonGroup({
|
const buttonGroup21 = new ButtonGroup({
|
||||||
x: 300,
|
x: 300,
|
||||||
y: 1520,
|
y: 1520,
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
buttons: [
|
buttons: [
|
||||||
{label: 'eins', textAlpha: 1, textActiveAlpha: .2},
|
{ label: 'eins', textAlpha: 1, textActiveAlpha: 0.2 },
|
||||||
{label: 'zwei', textAlpha: .2, textActiveAlpha: 1},
|
{ label: 'zwei', textAlpha: 0.2, textActiveAlpha: 1 },
|
||||||
{label: 'drei'}
|
{ label: 'drei' }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
|
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
|
||||||
app.scene.addChild(buttonGroup4)
|
app.scene.addChild(buttonGroup4)
|
||||||
app.scene.addChild(buttonGroup5, buttonGroup6)
|
app.scene.addChild(buttonGroup5, buttonGroup6)
|
||||||
app.scene.addChild(buttonGroup7, buttonGroup8)
|
app.scene.addChild(buttonGroup7, buttonGroup8)
|
||||||
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
|
||||||
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
|
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
|
||||||
app.scene.addChild(buttonGroup20, buttonGroup21)
|
app.scene.addChild(buttonGroup20, buttonGroup21)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/buttongroup.png
Normal file
BIN
lib/pixi/buttongroup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1>
|
||||||
Coordinates
|
<a href="../index.html">lib.</a><a href="index.html">pixi.</a>Coordinates
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
|
To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
|
||||||
|
|||||||
BIN
lib/pixi/coordinates.png
Normal file
BIN
lib/pixi/coordinates.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 KiB |
@ -1,13 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
|
|
||||||
<title>DeepZoomImage Doctests</title>
|
<title>DeepZoomImage Doctests</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../../css/doctest.css">
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
@ -26,33 +25,35 @@
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Double DeepZoomImage</h1>
|
<h1>
|
||||||
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">deepzoom.</a>
|
||||||
|
DeepZoom
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||||
as possible.
|
tiles at the larger level as fast as possible.
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<div id="div1" style="float: left;"></div>
|
<div id="div1" style="float: left"></div>
|
||||||
<div id="div2" style="float: right;"></div>
|
<div id="div2" style="float: right"></div>
|
||||||
<div style="clear: left; margin-top: 540px;" />
|
<div style="clear: left; margin-top: 540px" />
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
// deepZoom
|
// deepZoom
|
||||||
//--------------------
|
//--------------------
|
||||||
const deepZoomInfo = new DeepZoomInfo({
|
const deepZoomInfo = new DeepZoomInfo({
|
||||||
"tileSize": 128,
|
tileSize: 128,
|
||||||
"format": "jpg",
|
format: 'jpg',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 4096,
|
height: 4096,
|
||||||
"width": 4096,
|
width: 4096,
|
||||||
"path": "../assets/maps/test",
|
path: '../assets/maps/test',
|
||||||
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
|
||||||
})
|
})
|
||||||
// const deepZoomInfo = new DeepZoomInfo({
|
// const deepZoomInfo = new DeepZoomInfo({
|
||||||
// compression: [
|
// compression: [
|
||||||
@ -83,24 +84,26 @@
|
|||||||
window.app = new PIXIApp({
|
window.app = new PIXIApp({
|
||||||
width: 400,
|
width: 400,
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: 0xFFCCCCCC
|
backgroundColor: 0xffcccccc
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
div1.appendChild(app.view)
|
div1.appendChild(app.view)
|
||||||
|
|
||||||
// create the ScatterContainer
|
// create the ScatterContainer
|
||||||
//--------------------
|
//--------------------
|
||||||
const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
|
const scatterContainer1 = new ScatterContainer(app.renderer, { showBounds: true, app: app })
|
||||||
app.scene.addChild(scatterContainer1)
|
app.scene.addChild(scatterContainer1)
|
||||||
|
|
||||||
// Create the DeepZoomImage
|
// Create the DeepZoomImage
|
||||||
//--------------------
|
//--------------------
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
|
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, { app, world: scatterContainer1 })
|
||||||
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
|
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
|
||||||
minScale: 0,
|
minScale: 0,
|
||||||
maxScale: 50,
|
maxScale: 50,
|
||||||
onTransform: event => {
|
onTransform: (event) => {
|
||||||
//console.log('currentLevel', deepZoomImage1.currentLevel)
|
//console.log('currentLevel', deepZoomImage1.currentLevel)
|
||||||
deepZoomImage1.transformed(event)
|
deepZoomImage1.transformed(event)
|
||||||
}
|
}
|
||||||
@ -109,25 +112,26 @@
|
|||||||
scatterContainer1.addChild(deepZoomImage1)
|
scatterContainer1.addChild(deepZoomImage1)
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
|
|
||||||
// app2
|
// app2
|
||||||
//--------------------
|
//--------------------
|
||||||
const app2 = new PIXIApp({
|
const app2 = new PIXIApp({
|
||||||
width: 400,
|
width: 400,
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: 0xFFCCCCCC
|
backgroundColor: 0xffcccccc
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
div2.appendChild(app2.view)
|
div2.appendChild(app2.view)
|
||||||
|
|
||||||
// create the ScatterContainer
|
// create the ScatterContainer
|
||||||
//--------------------
|
//--------------------
|
||||||
const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
|
const scatterContainer2 = new ScatterContainer(app2.renderer, { showBounds: true, app: app2 })
|
||||||
app2.scene.addChild(scatterContainer2)
|
app2.scene.addChild(scatterContainer2)
|
||||||
|
|
||||||
// Create the DeepZoomImage
|
// Create the DeepZoomImage
|
||||||
//--------------------
|
//--------------------
|
||||||
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
|
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, { app: app2 })
|
||||||
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
|
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
|
||||||
minScale: 0,
|
minScale: 0,
|
||||||
maxScale: 100,
|
maxScale: 100,
|
||||||
@ -137,27 +141,27 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
scatterContainer2.addChild(deepZoomImage2)
|
scatterContainer2.addChild(deepZoomImage2)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>DeepZoomImage in DeepZoomImage</h1>
|
<h1>DeepZoomImage in DeepZoomImage</h1>
|
||||||
<p>
|
<p>
|
||||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||||
as possible.
|
tiles at the larger level as fast as possible.
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<div id="div3"></div>
|
<div id="div3"></div>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
// app3
|
// app3
|
||||||
//--------------------
|
//--------------------
|
||||||
const app3 = new PIXIApp({
|
const app3 = new PIXIApp({
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: 0xFFCCCCCC
|
backgroundColor: 0xffcccccc
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
window.app3 = app3
|
window.app3 = app3
|
||||||
|
|
||||||
@ -165,12 +169,17 @@
|
|||||||
|
|
||||||
// create the ScatterContainer
|
// create the ScatterContainer
|
||||||
//--------------------
|
//--------------------
|
||||||
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
|
const scatterContainer3 = new ScatterContainer(app3.renderer, {
|
||||||
|
app: app3,
|
||||||
|
showBounds: true,
|
||||||
|
claimEvent: false,
|
||||||
|
stopEvents: false
|
||||||
|
})
|
||||||
app3.scene.addChild(scatterContainer3)
|
app3.scene.addChild(scatterContainer3)
|
||||||
|
|
||||||
// Create the DeepZoomImage
|
// Create the DeepZoomImage
|
||||||
//--------------------
|
//--------------------
|
||||||
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, { app: app3 })
|
||||||
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
|
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
|
||||||
minScale: 0,
|
minScale: 0,
|
||||||
maxScale: 100,
|
maxScale: 100,
|
||||||
@ -197,7 +206,7 @@
|
|||||||
mask.drawRect(0, 0, 260, 240)
|
mask.drawRect(0, 0, 260, 240)
|
||||||
scatterContainer3.addChild(mask)
|
scatterContainer3.addChild(mask)
|
||||||
|
|
||||||
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, { app: app3 })
|
||||||
deepZoomImage4.x = 4
|
deepZoomImage4.x = 4
|
||||||
deepZoomImage4.y = 4
|
deepZoomImage4.y = 4
|
||||||
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
|
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
|
||||||
@ -212,8 +221,6 @@
|
|||||||
app3._deepZoomImage4 = deepZoomImage4
|
app3._deepZoomImage4 = deepZoomImage4
|
||||||
|
|
||||||
scatterContainer3.addChild(deepZoomImage4)
|
scatterContainer3.addChild(deepZoomImage4)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/deepzoom/deepzoom.png
Normal file
BIN
lib/pixi/deepzoom/deepzoom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
@ -1,13 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
|
|
||||||
<title>DeepZoomImage Doctests</title>
|
<title>DeepZoomImage Doctests</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../../css/doctest.css">
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -25,15 +24,18 @@
|
|||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>DeepZoomImage</h1>
|
<h1>
|
||||||
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
|
||||||
|
><a href="index.html">deepzoom.</a>DeepZoomImage
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom
|
||||||
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
level. This gives the user the impression that even huge pictures (up to gigapixel-images) can be zoomed
|
||||||
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
|
||||||
as possible.
|
tiles at the larger level as fast as possible.
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<div id="app">
|
<div id="app">
|
||||||
@ -42,7 +44,6 @@
|
|||||||
<div id="info"></div>
|
<div id="info"></div>
|
||||||
</div>
|
</div>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
|
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
|
||||||
// Just as in the doctest: scatter.html
|
// Just as in the doctest: scatter.html
|
||||||
class ScatterApp extends PIXIApp {
|
class ScatterApp extends PIXIApp {
|
||||||
@ -66,11 +67,10 @@
|
|||||||
app.destroy(true)
|
app.destroy(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//A new canvas has to be created
|
//A new canvas has to be created
|
||||||
//for the new view.
|
//for the new view.
|
||||||
var canvas = document.createElement("canvas")
|
var canvas = document.createElement('canvas')
|
||||||
canvas_container.appendChild(canvas);
|
canvas_container.appendChild(canvas)
|
||||||
|
|
||||||
app = new ScatterApp({
|
app = new ScatterApp({
|
||||||
resolution: state + 1,
|
resolution: state + 1,
|
||||||
@ -80,35 +80,32 @@
|
|||||||
autoResize: false,
|
autoResize: false,
|
||||||
width: 128,
|
width: 128,
|
||||||
height: 128,
|
height: 128,
|
||||||
backgroundColor: 0xFFCCCCCC
|
backgroundColor: 0xffcccccc
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
// To create a DeepZoomImage, a DeepZoomInfo has to
|
// To create a DeepZoomImage, a DeepZoomInfo has to
|
||||||
// be provided. It contains all the necessary informations
|
// be provided. It contains all the necessary informations
|
||||||
// for the DeepZoomImage, to behave as intended.
|
// for the DeepZoomImage, to behave as intended.
|
||||||
// (E.g. that it displays the right level of tiles for the current view distance.)
|
// (E.g. that it displays the right level of tiles for the current view distance.)
|
||||||
|
|
||||||
deepZoomInfo = new DeepZoomInfo(
|
deepZoomInfo = new DeepZoomInfo({
|
||||||
{
|
tileSize: 128,
|
||||||
"tileSize": 128,
|
format: 'jpg',
|
||||||
"format": "jpg",
|
overlap: 0,
|
||||||
"overlap": 0,
|
type: 'map',
|
||||||
"type": "map",
|
height: 4096,
|
||||||
"height": 4096,
|
width: 4096,
|
||||||
"width": 4096,
|
path: '../assets/maps/test',
|
||||||
"path": "../assets/maps/test",
|
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
|
||||||
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
})
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Create the DeepZoomImage
|
// Create the DeepZoomImage
|
||||||
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
|
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
|
||||||
highResolution: !!state,
|
highResolution: !!state,
|
||||||
app
|
app
|
||||||
});
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
|
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
|
||||||
// Allow more flexible scaling for debugging purposes.
|
// Allow more flexible scaling for debugging purposes.
|
||||||
@ -119,25 +116,20 @@
|
|||||||
onTransform: (event) => {
|
onTransform: (event) => {
|
||||||
deepZoomImage.transformed(event)
|
deepZoomImage.transformed(event)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
|
|
||||||
// Add the DeepZoomImage to the scene.
|
// Add the DeepZoomImage to the scene.
|
||||||
app.scene.addChild(deepZoomImage)
|
app.scene.addChild(deepZoomImage)
|
||||||
|
|
||||||
//Set info text.
|
//Set info text.
|
||||||
info.innerHTML = "resolution: " + app.renderer.resolution +
|
info.innerHTML = 'resolution: ' + app.renderer.resolution + '<br>high resolution: ' + !!state
|
||||||
"<br>high resolution: " + !!state;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Add functionality to the button.
|
// Add functionality to the button.
|
||||||
change_dpr.addEventListener("click", (event) => {
|
change_dpr.addEventListener('click', (event) => {
|
||||||
state = (state + 1) % 2
|
state = (state + 1) % 2
|
||||||
changePIXI()
|
changePIXI()
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/deepzoom/image.png
Normal file
BIN
lib/pixi/deepzoom/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 650 KiB |
@ -1,9 +1,12 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>PIXI Lib Doctests</title>
|
<title>PIXI Lib Doctests</title>
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
<meta
|
||||||
<link rel="stylesheet" href="../../../css/index.css">
|
name="viewport"
|
||||||
|
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="../../../css/index.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
|
|
||||||
@ -12,7 +15,7 @@
|
|||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<img class="icon" >
|
<img class="icon" />
|
||||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -20,19 +23,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="container" class="container">
|
<h2>
|
||||||
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
|
||||||
</div>
|
><a href="../index.html">deepzoom.</a>Doctests
|
||||||
<script>
|
</h2>
|
||||||
const index = new Index(itemTemplate, [
|
<div id="container" class="container"></div>
|
||||||
|
<script>
|
||||||
|
const index = new Index(
|
||||||
|
itemTemplate,
|
||||||
|
[
|
||||||
['Deepzoom', 'deepzoom.html'],
|
['Deepzoom', 'deepzoom.html'],
|
||||||
['Image', 'image.html'],
|
['Image', 'image.html']
|
||||||
|
|
||||||
],
|
],
|
||||||
null)
|
null
|
||||||
index.load()
|
)
|
||||||
</script>
|
index.load()
|
||||||
</body>
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/deepzoom/index.png
Normal file
BIN
lib/pixi/deepzoom/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 148 KiB |
@ -16,12 +16,12 @@
|
|||||||
<div class="flipWrapper">
|
<div class="flipWrapper">
|
||||||
<div class="flipCard">
|
<div class="flipCard">
|
||||||
<img class="flipFace front" src="" />
|
<img class="flipFace front" src="" />
|
||||||
<div class="flipFace back" style="visibility:hidden;"></div>
|
<div class="flipFace back" style="visibility: hidden"></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
|
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
|
||||||
<svg
|
<svg
|
||||||
class="flipButton backBtn"
|
class="flipButton backBtn"
|
||||||
style="visibility:hidden;"
|
style="visibility: hidden"
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
preserveAspectRatio="xMidYMid meet"
|
preserveAspectRatio="xMidYMid meet"
|
||||||
>
|
>
|
||||||
@ -41,9 +41,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Flip Effect</h1>
|
||||||
Flip Effect
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
The flip effect, which simulates a flip between a front and back view of an object by means of a 3D
|
The flip effect, which simulates a flip between a front and back view of an object by means of a 3D
|
||||||
rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as
|
rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as
|
||||||
@ -63,10 +61,8 @@
|
|||||||
</li>
|
</li>
|
||||||
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.</li>
|
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h3>
|
<h3>Example</h3>
|
||||||
Example
|
<main id="main" style="border: 1px solid red; position: relative">
|
||||||
</h3>
|
|
||||||
<main id="main" style="border: 1px solid red; position: relative;">
|
|
||||||
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
</main>
|
</main>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|||||||
BIN
lib/pixi/flipeffect.png
Normal file
BIN
lib/pixi/flipeffect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 739 KiB |
@ -1,12 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Flippable</title>
|
<title>PIXI Flippable</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -15,29 +15,31 @@
|
|||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
<script src="../3rdparty/gsap/src/minified/TweenMax.min.js"></script>
|
<script src="../3rdparty/gsap/src/minified/TweenMax.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Flippable</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Flippable</h1>
|
||||||
<p>
|
<p>
|
||||||
Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted
|
Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted (which can include
|
||||||
(which can include another PIXI.DisplayObject), and turning it over to the back can
|
another PIXI.DisplayObject), and turning it over to the back can be adjusted by many parameters in speed and
|
||||||
be adjusted by many parameters in speed and behavior.
|
behavior.
|
||||||
</p>
|
</p>
|
||||||
<p><a href="../../doc/out/Flippable.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/Flippable.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some flippable examples:</p><br />
|
<p>Let's look at some flippable examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Six flippable elements and one button.</p>
|
||||||
What you should see: Six flippable elements and one button.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 420,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
app.loadTextures([
|
app.loadTextures(
|
||||||
|
[
|
||||||
'./assets/fruit-1.jpg',
|
'./assets/fruit-1.jpg',
|
||||||
'./assets/fruit-2.jpg',
|
'./assets/fruit-2.jpg',
|
||||||
'./assets/fruit-3.jpg',
|
'./assets/fruit-3.jpg',
|
||||||
@ -48,13 +50,13 @@ app.loadTextures([
|
|||||||
'./assets/fruit-8.jpg',
|
'./assets/fruit-8.jpg',
|
||||||
'./assets/fruit-9.jpg',
|
'./assets/fruit-9.jpg',
|
||||||
'./assets/fruit-10.jpg'
|
'./assets/fruit-10.jpg'
|
||||||
], textures => {
|
],
|
||||||
|
(textures) => {
|
||||||
// Example 1
|
// Example 1
|
||||||
//--------------------
|
//--------------------
|
||||||
const sprite1 = new PIXI.Sprite(textures.get('./assets/fruit-1.jpg'))
|
const sprite1 = new PIXI.Sprite(textures.get('./assets/fruit-1.jpg'))
|
||||||
sprite1.position.set(10, 10)
|
sprite1.position.set(10, 10)
|
||||||
sprite1.scale.set(.2, .2)
|
sprite1.scale.set(0.2, 0.2)
|
||||||
const sprite2 = new PIXI.Sprite(textures.get('./assets/fruit-2.jpg'))
|
const sprite2 = new PIXI.Sprite(textures.get('./assets/fruit-2.jpg'))
|
||||||
|
|
||||||
const flippable1 = new Flippable(sprite1, sprite2, app.renderer)
|
const flippable1 = new Flippable(sprite1, sprite2, app.renderer)
|
||||||
@ -63,25 +65,25 @@ app.loadTextures([
|
|||||||
//--------------------
|
//--------------------
|
||||||
const sprite3 = new PIXI.Sprite(textures.get('./assets/fruit-3.jpg'))
|
const sprite3 = new PIXI.Sprite(textures.get('./assets/fruit-3.jpg'))
|
||||||
sprite3.position.set(10, 120)
|
sprite3.position.set(10, 120)
|
||||||
sprite3.scale.set(.2, .2)
|
sprite3.scale.set(0.2, 0.2)
|
||||||
const sprite4 = new PIXI.Sprite(textures.get('./assets/fruit-4.jpg'))
|
const sprite4 = new PIXI.Sprite(textures.get('./assets/fruit-4.jpg'))
|
||||||
|
|
||||||
const flippable2 = new Flippable(sprite3, sprite4, app.renderer, {
|
const flippable2 = new Flippable(sprite3, sprite4, app.renderer, {
|
||||||
duration: 6,
|
duration: 6,
|
||||||
ease: Bounce.easeOut,
|
ease: Bounce.easeOut,
|
||||||
shadow: true,
|
shadow: true,
|
||||||
eulerX: .8
|
eulerX: 0.8
|
||||||
})
|
})
|
||||||
|
|
||||||
// Example 3
|
// Example 3
|
||||||
//--------------------
|
//--------------------
|
||||||
const sprite5 = new PIXI.Sprite(textures.get('./assets/fruit-5.jpg'))
|
const sprite5 = new PIXI.Sprite(textures.get('./assets/fruit-5.jpg'))
|
||||||
sprite5.position.set(10, 240)
|
sprite5.position.set(10, 240)
|
||||||
sprite5.scale.set(.2, .2)
|
sprite5.scale.set(0.2, 0.2)
|
||||||
const sprite6 = new PIXI.Sprite(textures.get('./assets/fruit-6.jpg'))
|
const sprite6 = new PIXI.Sprite(textures.get('./assets/fruit-6.jpg'))
|
||||||
sprite6.position.set(400, 180)
|
sprite6.position.set(400, 180)
|
||||||
sprite6.scale.set(.3, .3)
|
sprite6.scale.set(0.3, 0.3)
|
||||||
sprite6.rotation = .3
|
sprite6.rotation = 0.3
|
||||||
|
|
||||||
const flippable3 = new Flippable(sprite5, sprite6, app.renderer, {
|
const flippable3 = new Flippable(sprite5, sprite6, app.renderer, {
|
||||||
duration: 4,
|
duration: 4,
|
||||||
@ -94,11 +96,11 @@ app.loadTextures([
|
|||||||
//--------------------
|
//--------------------
|
||||||
const sprite7 = new PIXI.Sprite(textures.get('./assets/fruit-7.jpg'))
|
const sprite7 = new PIXI.Sprite(textures.get('./assets/fruit-7.jpg'))
|
||||||
sprite7.position.set(700, 10)
|
sprite7.position.set(700, 10)
|
||||||
sprite7.scale.set(.2, .2)
|
sprite7.scale.set(0.2, 0.2)
|
||||||
const sprite8 = new PIXI.Sprite(textures.get('./assets/fruit-8.jpg'))
|
const sprite8 = new PIXI.Sprite(textures.get('./assets/fruit-8.jpg'))
|
||||||
sprite8.position.set(550, 180)
|
sprite8.position.set(550, 180)
|
||||||
sprite8.scale.set(.15, .15)
|
sprite8.scale.set(0.15, 0.15)
|
||||||
sprite8.skew.set(0, .1)
|
sprite8.skew.set(0, 0.1)
|
||||||
|
|
||||||
const flippable4 = new Flippable(sprite7, sprite8, app.renderer, {
|
const flippable4 = new Flippable(sprite7, sprite8, app.renderer, {
|
||||||
duration: 5,
|
duration: 5,
|
||||||
@ -115,12 +117,12 @@ app.loadTextures([
|
|||||||
//--------------------
|
//--------------------
|
||||||
const sprite9 = new PIXI.Sprite(textures.get('./assets/fruit-9.jpg'))
|
const sprite9 = new PIXI.Sprite(textures.get('./assets/fruit-9.jpg'))
|
||||||
sprite9.position.set(700, 130)
|
sprite9.position.set(700, 130)
|
||||||
sprite9.scale.set(.2, .2)
|
sprite9.scale.set(0.2, 0.2)
|
||||||
sprite9.skew.set(.2, .2)
|
sprite9.skew.set(0.2, 0.2)
|
||||||
const sprite10 = new PIXI.Sprite(textures.get('./assets/fruit-10.jpg'))
|
const sprite10 = new PIXI.Sprite(textures.get('./assets/fruit-10.jpg'))
|
||||||
sprite10.position.set(700, 130)
|
sprite10.position.set(700, 130)
|
||||||
sprite10.scale.set(.2, .2)
|
sprite10.scale.set(0.2, 0.2)
|
||||||
sprite10.skew.set(-.2, -.2)
|
sprite10.skew.set(-0.2, -0.2)
|
||||||
|
|
||||||
const flippable5 = new Flippable(sprite9, sprite10, app.renderer, {
|
const flippable5 = new Flippable(sprite9, sprite10, app.renderer, {
|
||||||
duration: 2,
|
duration: 2,
|
||||||
@ -143,13 +145,13 @@ app.loadTextures([
|
|||||||
graphic2.beginFill(0xcedc9c, 1)
|
graphic2.beginFill(0xcedc9c, 1)
|
||||||
graphic2.drawRect(0, 0, 160, 100)
|
graphic2.drawRect(0, 0, 160, 100)
|
||||||
for (let i = 0; i < 1000; i++) {
|
for (let i = 0; i < 1000; i++) {
|
||||||
graphic2.beginFill(Math.random() * 0xffffff << 0, 1)
|
graphic2.beginFill((Math.random() * 0xffffff) << 0, 1)
|
||||||
graphic2.lineStyle(1, Math.random() * 0xffffff << 0, 1)
|
graphic2.lineStyle(1, (Math.random() * 0xffffff) << 0, 1)
|
||||||
graphic2.drawCircle(Math.random() * 160, Math.random() * 100, 2)
|
graphic2.drawCircle(Math.random() * 160, Math.random() * 100, 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
const flippable6 = new Flippable(graphic1, graphic2, app.renderer, {
|
const flippable6 = new Flippable(graphic1, graphic2, app.renderer, {
|
||||||
eulerX: -.3
|
eulerX: -0.3
|
||||||
})
|
})
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
@ -159,7 +161,7 @@ app.loadTextures([
|
|||||||
y: 10,
|
y: 10,
|
||||||
label: 'Toggle',
|
label: 'Toggle',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
flippable1.toggle()
|
flippable1.toggle()
|
||||||
flippable2.toggle()
|
flippable2.toggle()
|
||||||
flippable3.toggle()
|
flippable3.toggle()
|
||||||
@ -170,7 +172,9 @@ app.loadTextures([
|
|||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button)
|
app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/flippable.png
Normal file
BIN
lib/pixi/flippable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1022 KiB |
@ -13,7 +13,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run();" >
|
<body onload="Doctest.run();" >
|
||||||
<h1>
|
<h1>
|
||||||
Functional Tests
|
<a href="../index.html">lib.</a><a href="index.html">pixi.</a>Functional Tests
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
If you want to test the UI in all functional aspects, it'is important to be able
|
If you want to test the UI in all functional aspects, it'is important to be able
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI ForceLayout</title>
|
<title>PIXI ForceLayout</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -16,27 +16,29 @@
|
|||||||
|
|
||||||
<script src="./lib/graphology.min.js"></script>
|
<script src="./lib/graphology.min.js"></script>
|
||||||
<script src="./lib/graphology-layout-forceatlas2.js"></script>
|
<script src="./lib/graphology-layout-forceatlas2.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>ForceLayout</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>ForceLayout</h1>
|
||||||
<p>
|
<p>
|
||||||
Comparison of a <a href="https://github.com/d3/d3-force/blob/master/README.md">D3 ForceLayout</a> with a <a href="https://github.com/graphology/graphology-layout-forceatlas2">ForceAtlas 2</a> forcelayout.
|
Comparison of a <a href="https://github.com/d3/d3-force/blob/master/README.md">D3 ForceLayout</a> with a
|
||||||
|
<a href="https://github.com/graphology/graphology-layout-forceatlas2">ForceAtlas 2</a> forcelayout.
|
||||||
</p>
|
</p>
|
||||||
<h2>Let's look at the D3 ForceLayout:</h2><br />
|
<h2>Let's look at the D3 ForceLayout:</h2>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
const app = new PIXIApp({
|
||||||
const app = new PIXIApp({
|
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 420,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
app.loadTextures([
|
.run()
|
||||||
'./assets/circle.png'
|
|
||||||
], textures => {
|
|
||||||
|
|
||||||
|
app.loadTextures(
|
||||||
|
['./assets/circle.png'],
|
||||||
|
(textures) => {
|
||||||
// add sprites
|
// add sprites
|
||||||
//--------------------
|
//--------------------
|
||||||
const sprites = []
|
const sprites = []
|
||||||
@ -46,7 +48,7 @@ app.loadTextures([
|
|||||||
sprite.x = randomInt(0, app.size.width)
|
sprite.x = randomInt(0, app.size.width)
|
||||||
sprite.y = randomInt(0, app.size.height)
|
sprite.y = randomInt(0, app.size.height)
|
||||||
sprite.width = sprite.height = 2
|
sprite.width = sprite.height = 2
|
||||||
sprite.anchor.set(.5, .5)
|
sprite.anchor.set(0.5, 0.5)
|
||||||
sprite.__random = Math.random()
|
sprite.__random = Math.random()
|
||||||
sprites.push(sprite)
|
sprites.push(sprite)
|
||||||
}
|
}
|
||||||
@ -55,8 +57,9 @@ app.loadTextures([
|
|||||||
|
|
||||||
// force simulation
|
// force simulation
|
||||||
//--------------------
|
//--------------------
|
||||||
const forceCollide = d3.forceCollide().radius(d => d.width / 2 + 1)
|
const forceCollide = d3.forceCollide().radius((d) => d.width / 2 + 1)
|
||||||
const simulation = d3.forceSimulation(sprites)
|
const simulation = d3
|
||||||
|
.forceSimulation(sprites)
|
||||||
.on('tick', () => {
|
.on('tick', () => {
|
||||||
//forceCollide.radius(d => d.radius)
|
//forceCollide.radius(d => d.radius)
|
||||||
})
|
})
|
||||||
@ -64,33 +67,41 @@ app.loadTextures([
|
|||||||
.force('x', d3.forceX(app.center.x))
|
.force('x', d3.forceX(app.center.x))
|
||||||
.force('y', d3.forceY(app.center.y))
|
.force('y', d3.forceY(app.center.y))
|
||||||
.stop()
|
.stop()
|
||||||
.force('radial', d3.forceRadial(d => {
|
.force(
|
||||||
return d.__random < .5 ? 60 : 160
|
'radial',
|
||||||
}, app.center.x, app.center.y))
|
d3.forceRadial(
|
||||||
|
(d) => {
|
||||||
|
return d.__random < 0.5 ? 60 : 160
|
||||||
|
},
|
||||||
|
app.center.x,
|
||||||
|
app.center.y
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
d3.timeout(() => {
|
d3.timeout(() => {
|
||||||
simulation.restart()
|
simulation.restart()
|
||||||
}, 500)
|
}, 500)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>D3 ForceLayout with links:</h2><br />
|
<h2>D3 ForceLayout with links:</h2>
|
||||||
|
<br />
|
||||||
<canvas id="canvas2" class="interactive"></canvas>
|
<canvas id="canvas2" class="interactive"></canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
const app2 = new PIXIApp({
|
||||||
const app2 = new PIXIApp({
|
|
||||||
view: canvas2,
|
view: canvas2,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 420,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
app2.loadTextures([
|
.run()
|
||||||
'./assets/circle2.png'
|
|
||||||
], textures => {
|
|
||||||
|
|
||||||
|
app2.loadTextures(
|
||||||
|
['./assets/circle2.png'],
|
||||||
|
(textures) => {
|
||||||
// add sprites
|
// add sprites
|
||||||
//--------------------
|
//--------------------
|
||||||
const sprites = []
|
const sprites = []
|
||||||
@ -101,7 +112,7 @@ app2.loadTextures([
|
|||||||
sprite.x = randomInt(0, app2.size.width)
|
sprite.x = randomInt(0, app2.size.width)
|
||||||
sprite.y = randomInt(0, app2.size.height)
|
sprite.y = randomInt(0, app2.size.height)
|
||||||
sprite.width = sprite.height = 16
|
sprite.width = sprite.height = 16
|
||||||
sprite.anchor.set(.5, .5)
|
sprite.anchor.set(0.5, 0.5)
|
||||||
sprites.push(sprite)
|
sprites.push(sprite)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,36 +123,40 @@ app2.loadTextures([
|
|||||||
|
|
||||||
// force simulation
|
// force simulation
|
||||||
//--------------------
|
//--------------------
|
||||||
const forceCollide = d3.forceCollide().radius(d => d.width / 2 + 4)
|
const forceCollide = d3.forceCollide().radius((d) => d.width / 2 + 4)
|
||||||
const forceLink = d3.forceLink([
|
const forceLink = d3
|
||||||
{source: 88, target: 8},
|
.forceLink([
|
||||||
{source: 47, target: 55},
|
{ source: 88, target: 8 },
|
||||||
{source: 70, target: 1},
|
{ source: 47, target: 55 },
|
||||||
{source: 12, target: 12},
|
{ source: 70, target: 1 },
|
||||||
{source: 26, target: 33},
|
{ source: 12, target: 12 },
|
||||||
{source: 48, target: 53},
|
{ source: 26, target: 33 },
|
||||||
{source: 10, target: 70},
|
{ source: 48, target: 53 },
|
||||||
{source: 68, target: 61},
|
{ source: 10, target: 70 },
|
||||||
{source: 28, target: 65},
|
{ source: 68, target: 61 },
|
||||||
{source: 12, target: 34},
|
{ source: 28, target: 65 },
|
||||||
{source: 6, target: 55},
|
{ source: 12, target: 34 },
|
||||||
{source: 9, target: 16},
|
{ source: 6, target: 55 },
|
||||||
{source: 87, target: 96},
|
{ source: 9, target: 16 },
|
||||||
{source: 64, target: 24},
|
{ source: 87, target: 96 },
|
||||||
{source: 98, target: 14},
|
{ source: 64, target: 24 },
|
||||||
{source: 18, target: 23},
|
{ source: 98, target: 14 },
|
||||||
{source: 53, target: 62},
|
{ source: 18, target: 23 },
|
||||||
{source: 11, target: 53},
|
{ source: 53, target: 62 },
|
||||||
{source: 43, target: 23},
|
{ source: 11, target: 53 },
|
||||||
{source: 80, target: 9},
|
{ source: 43, target: 23 },
|
||||||
{source: 72, target: 88},
|
{ source: 80, target: 9 },
|
||||||
{source: 62, target: 3},
|
{ source: 72, target: 88 },
|
||||||
{source: 72, target: 15},
|
{ source: 62, target: 3 },
|
||||||
{source: 84, target: 25},
|
{ source: 72, target: 15 },
|
||||||
{source: 57, target: 58},
|
{ source: 84, target: 25 },
|
||||||
{source: 87, target: 19}
|
{ source: 57, target: 58 },
|
||||||
]).id(d => d.id).strength(.05)
|
{ source: 87, target: 19 }
|
||||||
const simulation = d3.forceSimulation(sprites)
|
])
|
||||||
|
.id((d) => d.id)
|
||||||
|
.strength(0.05)
|
||||||
|
const simulation = d3
|
||||||
|
.forceSimulation(sprites)
|
||||||
.on('tick', () => {
|
.on('tick', () => {
|
||||||
links.clear()
|
links.clear()
|
||||||
links.lineStyle(1, 0xfdc02f)
|
links.lineStyle(1, 0xfdc02f)
|
||||||
@ -157,8 +172,9 @@ app2.loadTextures([
|
|||||||
d3.timeout(() => {
|
d3.timeout(() => {
|
||||||
simulation.restart()
|
simulation.restart()
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@ -1,9 +1,12 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>PIXI Lib Doctests</title>
|
<title>PIXI Lib Doctests</title>
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
<meta
|
||||||
<link rel="stylesheet" href="../../css/index.css">
|
name="viewport"
|
||||||
|
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="../../css/index.css" />
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
|
|
||||||
@ -12,7 +15,7 @@
|
|||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<img class="icon" src="thumbnails/notfound.png">
|
<img class="icon" src="thumbnails/notfound.png" />
|
||||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -20,13 +23,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="container" class="container">
|
<h2><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Doctests</h2>
|
||||||
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
|
<div id="container" class="container"></div>
|
||||||
</div>
|
<script>
|
||||||
<script>
|
const index = new Index(
|
||||||
const index = new Index(itemTemplate, [
|
itemTemplate,
|
||||||
|
[
|
||||||
['PIXI.Application', 'application.html'],
|
['PIXI.Application', 'application.html'],
|
||||||
['Application', 'app.html'],
|
['Application', 'app.html'],
|
||||||
['Badge', 'badge.html'],
|
['Badge', 'badge.html'],
|
||||||
@ -56,8 +60,9 @@ const index = new Index(itemTemplate, [
|
|||||||
['Scrollview', 'scrollview.html'],
|
['Scrollview', 'scrollview.html'],
|
||||||
['Stylus', 'stylus.html']
|
['Stylus', 'stylus.html']
|
||||||
],
|
],
|
||||||
null)
|
null
|
||||||
index.load()
|
)
|
||||||
</script>
|
index.load()
|
||||||
</body>
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/index.png
Normal file
BIN
lib/pixi/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@ -1,84 +1,92 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI LabeledGraphics</title>
|
<title>PIXI LabeledGraphics</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>LabeledGraphics</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>LabeledGraphics</h1>
|
||||||
<p>
|
<p>
|
||||||
A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows
|
A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows to place and reuse
|
||||||
to place and reuse labels, i.e. PIXI.Text objects. The labels are cached by a given key
|
labels, i.e. PIXI.Text objects. The labels are cached by a given key and only rendered anew if necessary.
|
||||||
and only rendered anew if necessary.
|
|
||||||
</p>
|
</p>
|
||||||
<p><a href="../../doc/out/LabeledGraphics.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/LabeledGraphics.html">JavaScript API</a></p>
|
||||||
<p>Let's look at an example:</p><br />
|
<p>Let's look at an example:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas1" class="interactive"></canvas>
|
<canvas id="canvas1" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: A box with a label.</p>
|
||||||
What you should see: A box with a label.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas1,
|
view: canvas1,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 150
|
height: 150
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const labeledBox = new LabeledGraphics()
|
const labeledBox = new LabeledGraphics()
|
||||||
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top'})
|
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top' })
|
||||||
labeledBox.beginFill(0x333333)
|
labeledBox.beginFill(0x333333)
|
||||||
labeledBox.drawRect(0, 0, 300, 100)
|
labeledBox.drawRect(0, 0, 300, 100)
|
||||||
labeledBox.endFill()
|
labeledBox.endFill()
|
||||||
|
|
||||||
app.scene.addChild(labeledBox)
|
app.scene.addChild(labeledBox)
|
||||||
</script>
|
</script>
|
||||||
<h2>Zoomable Labels</h2>
|
<h2>Zoomable Labels</h2>
|
||||||
<p>Labeled graphics can also be used to represent zoomable text columns in more complex layouts.
|
<p>
|
||||||
Use the mousewheel to zoom the following text column:
|
Labeled graphics can also be used to represent zoomable text columns in more complex layouts. Use the
|
||||||
|
mousewheel to zoom the following text column:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<canvas id="canvas2" class="interactive"></canvas>
|
<canvas id="canvas2" class="interactive"></canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app2 = new PIXIApp({
|
const app2 = new PIXIApp({
|
||||||
view: canvas2,
|
view: canvas2,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 150
|
height: 150
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const loremIpsum = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
const loremIpsum = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||||
At vero eos et accusam et justo duo dolores et ea rebum.`
|
At vero eos et accusam et justo duo dolores et ea rebum.`
|
||||||
|
|
||||||
const column = new LabeledGraphics()
|
const column = new LabeledGraphics()
|
||||||
const text = column.ensureLabel('key', loremIpsum, { maxWidth: 250, zoomFonts: true, justify: 'top', align: 'align'})
|
const text = column.ensureLabel('key', loremIpsum, {
|
||||||
column.beginFill(0x333333)
|
maxWidth: 250,
|
||||||
column.drawRect(0, 0, 900, 150)
|
zoomFonts: true,
|
||||||
column.endFill()
|
justify: 'top',
|
||||||
|
align: 'align'
|
||||||
|
})
|
||||||
|
column.beginFill(0x333333)
|
||||||
|
column.drawRect(0, 0, 900, 150)
|
||||||
|
column.endFill()
|
||||||
|
|
||||||
column.interactive = true
|
column.interactive = true
|
||||||
text.interactive = true
|
text.interactive = true
|
||||||
text.getLocalBounds()
|
text.getLocalBounds()
|
||||||
|
|
||||||
text.on('zoom', (event) => {
|
text.on('zoom', (event) => {
|
||||||
let factor = 1.0 + event.wheelDelta / 1000
|
let factor = 1.0 + event.wheelDelta / 1000
|
||||||
text.zoom(factor)
|
text.zoom(factor)
|
||||||
})
|
})
|
||||||
|
|
||||||
app2.view.addEventListener('mousewheel', (event) => {
|
app2.view.addEventListener('mousewheel', (event) => {
|
||||||
text.emit('zoom', event)
|
text.emit('zoom', event)
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
})
|
})
|
||||||
|
|
||||||
app2.scene.addChild(column)
|
app2.scene.addChild(column)
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/labeledgraphics.png
Normal file
BIN
lib/pixi/labeledgraphics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 609 KiB |
@ -1,12 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI List</title>
|
<title>PIXI List</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -14,28 +14,27 @@
|
|||||||
|
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>List</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>List</h1>
|
||||||
<p>
|
<p>Using the List class, any PIXI elements (PIXI.DisplayObject) can be included in a scrollable list.</p>
|
||||||
Using the List class, any PIXI elements (PIXI.DisplayObject) can be included
|
|
||||||
in a scrollable list.
|
|
||||||
</p>
|
|
||||||
<p><a href="../../doc/out/List.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/List.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some list examples:</p><br />
|
<p>Let's look at some list examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Three lists, one horizontal and two vertical.</p>
|
||||||
What you should see: Three lists, one horizontal and two vertical.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 420,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
app.loadTextures([
|
app.loadTextures(
|
||||||
|
[
|
||||||
'./assets/elephant-1.jpg',
|
'./assets/elephant-1.jpg',
|
||||||
'./assets/elephant-2.jpg',
|
'./assets/elephant-2.jpg',
|
||||||
'./assets/elephant-3.jpg',
|
'./assets/elephant-3.jpg',
|
||||||
@ -46,8 +45,8 @@ app.loadTextures([
|
|||||||
'./assets/bamboo-3.jpg',
|
'./assets/bamboo-3.jpg',
|
||||||
'./assets/bamboo-4.jpg',
|
'./assets/bamboo-4.jpg',
|
||||||
'./assets/bamboo-5.jpg'
|
'./assets/bamboo-5.jpg'
|
||||||
], textures => {
|
],
|
||||||
|
(textures) => {
|
||||||
// Example 1
|
// Example 1
|
||||||
//--------------------
|
//--------------------
|
||||||
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
|
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
|
||||||
@ -57,7 +56,7 @@ app.loadTextures([
|
|||||||
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
|
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
|
||||||
|
|
||||||
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
|
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
|
||||||
elephants.forEach(it => it.scale.set(.1, .1))
|
elephants.forEach((it) => it.scale.set(0.1, 0.1))
|
||||||
|
|
||||||
const elephantList = new List(elephants)
|
const elephantList = new List(elephants)
|
||||||
elephantList.x = 10
|
elephantList.x = 10
|
||||||
@ -72,7 +71,7 @@ app.loadTextures([
|
|||||||
const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg'))
|
const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg'))
|
||||||
|
|
||||||
const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5]
|
const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5]
|
||||||
bamboos.forEach(it => it.scale.set(.15, .15))
|
bamboos.forEach((it) => it.scale.set(0.15, 0.15))
|
||||||
|
|
||||||
const bambooList = new List(bamboos, {
|
const bambooList = new List(bamboos, {
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
@ -86,14 +85,14 @@ app.loadTextures([
|
|||||||
|
|
||||||
// Example 3
|
// Example 3
|
||||||
//--------------------
|
//--------------------
|
||||||
const style = {fontSize: 14, fill : 0xe7bc51}
|
const style = { fontSize: 14, fill: 0xe7bc51 }
|
||||||
|
|
||||||
const texts = []
|
const texts = []
|
||||||
for (let i = 0; i < 1000; i++) {
|
for (let i = 0; i < 1000; i++) {
|
||||||
const text = new PIXI.Text(`Example Text ${i}`, style)
|
const text = new PIXI.Text(`Example Text ${i}`, style)
|
||||||
text.interactive = true
|
text.interactive = true
|
||||||
text.on('tap', event => console.log(`tap text ${i}`))
|
text.on('tap', (event) => console.log(`tap text ${i}`))
|
||||||
text.on('click', event => console.log(`click text ${i}`))
|
text.on('click', (event) => console.log(`click text ${i}`))
|
||||||
texts.push(text)
|
texts.push(text)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -109,36 +108,35 @@ app.loadTextures([
|
|||||||
// Add to scene
|
// Add to scene
|
||||||
//--------------------
|
//--------------------
|
||||||
app.scene.addChild(elephantList, bambooList, textList)
|
app.scene.addChild(elephantList, bambooList, textList)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>List in a Scatter</h1>
|
<h1>List in a Scatter</h1>
|
||||||
<p>
|
<p>A PixiJS UI List is displayed inside a ScatterObject.</p>
|
||||||
A PixiJS UI List is displayed inside a ScatterObject.
|
|
||||||
</p>
|
|
||||||
<canvas id="canvas2" class="interactive"></canvas>
|
<canvas id="canvas2" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: A ScatterObject with a list in it.</p>
|
||||||
What you should see: A ScatterObject with a list in it.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
const app2 = new PIXIApp({
|
const app2 = new PIXIApp({
|
||||||
view: canvas2,
|
view: canvas2,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 420,
|
height: 420,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
app2.loadTextures([
|
app2.loadTextures(
|
||||||
|
[
|
||||||
'./assets/jungle.jpg',
|
'./assets/jungle.jpg',
|
||||||
'./assets/elephant-1.jpg',
|
'./assets/elephant-1.jpg',
|
||||||
'./assets/elephant-2.jpg',
|
'./assets/elephant-2.jpg',
|
||||||
'./assets/elephant-3.jpg',
|
'./assets/elephant-3.jpg',
|
||||||
'./assets/elephant-4.jpg',
|
'./assets/elephant-4.jpg',
|
||||||
'./assets/elephant-5.jpg'
|
'./assets/elephant-5.jpg'
|
||||||
], textures => {
|
],
|
||||||
|
(textures) => {
|
||||||
// ScatterContainer
|
// ScatterContainer
|
||||||
//--------------------
|
//--------------------
|
||||||
const scatterContainer = new ScatterContainer(app2.renderer, {
|
const scatterContainer = new ScatterContainer(app2.renderer, {
|
||||||
@ -174,7 +172,7 @@ app.loadTextures([
|
|||||||
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
|
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
|
||||||
|
|
||||||
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
|
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
|
||||||
elephants.forEach(it => it.scale.set(.15, .15))
|
elephants.forEach((it) => it.scale.set(0.15, 0.15))
|
||||||
|
|
||||||
const elephantList = new List(elephants, {
|
const elephantList = new List(elephants, {
|
||||||
height: 200
|
height: 200
|
||||||
@ -185,7 +183,9 @@ app.loadTextures([
|
|||||||
// Add to scene
|
// Add to scene
|
||||||
//--------------------
|
//--------------------
|
||||||
jungle.addChild(elephantList)
|
jungle.addChild(elephantList)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/list.png
Normal file
BIN
lib/pixi/list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1000 KiB |
@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<body onload='Doctest.run()'>
|
<body onload='Doctest.run()'>
|
||||||
<h1>GeoGraphics</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>GeoGraphics</h1>
|
||||||
<p> GeoGraphics are graphical objects, that does not store the graphics information
|
<p> GeoGraphics are graphical objects, that does not store the graphics information
|
||||||
in screen space, but in geographical coordinates. Therefore GeoGraphics must be
|
in screen space, but in geographical coordinates. Therefore GeoGraphics must be
|
||||||
placed on GeoLayers to work properly. </p>
|
placed on GeoLayers to work properly. </p>
|
||||||
|
|||||||
BIN
lib/pixi/maps/geographics.png
Normal file
BIN
lib/pixi/maps/geographics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 537 KiB |
@ -85,7 +85,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload='Doctest.run()'>
|
<body onload='Doctest.run()'>
|
||||||
<h1>GeoJson</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>GeoJson</h1>
|
||||||
<p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
|
<p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
|
||||||
pairs
|
pairs
|
||||||
to display one (or multiple) Point, Line or Polygon.
|
to display one (or multiple) Point, Line or Polygon.
|
||||||
|
|||||||
BIN
lib/pixi/maps/geojson.png
Normal file
BIN
lib/pixi/maps/geojson.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@ -1,11 +1,12 @@
|
|||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<title>PIXI Maps Doctests</title>
|
<title>PIXI Maps Doctests</title>
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<meta name="viewport"
|
<meta
|
||||||
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
|
name="viewport"
|
||||||
<link rel="stylesheet" href="../../../css/index.css">
|
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="../../../css/index.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
|
|
||||||
@ -14,7 +15,7 @@
|
|||||||
<div class="preview">
|
<div class="preview">
|
||||||
<div class="thumbnail-container">
|
<div class="thumbnail-container">
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<img class="icon" src="thumbnails/notfound.png">
|
<img class="icon" src="thumbnails/notfound.png" />
|
||||||
<!-- <iframe src="" frameborder="0"></iframe> -->
|
<!-- <iframe src="" frameborder="0"></iframe> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -36,25 +37,25 @@
|
|||||||
top: 30px;
|
top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo>img {
|
#logo > img {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header>h1 {
|
header > h1 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
word-spacing: 0.25em;
|
word-spacing: 0.25em;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header>p {
|
header > p {
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
color: rgb(207, 207, 207);
|
color: rgb(207, 207, 207);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
background-color: #4c4f4f;
|
background-color: #4c4f4f;
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
|
|
||||||
@ -64,7 +65,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -76,37 +76,38 @@
|
|||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a id="logo" target="_blank" href="http://www.iwm-tuebingen.de">
|
<h1>
|
||||||
<img src="../../../assets/logos/iwm_logo_2015_twitter.png">
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
|
||||||
</a>
|
><a href="../index.html">map.</a>Doctests
|
||||||
<h1>Maps Module</h1>
|
</h1>
|
||||||
<p>The maps module provides a handy toolkit to easily integrate maps in an application. Create a full screen map
|
<p>
|
||||||
application by using the mapapp. Utilize the GeoLayer-system to integrate maps in an existing application.
|
The maps module provides a handy toolkit to easily integrate maps in an application. Create a full
|
||||||
Draw graphics onto the map using geographical positions instead of pixel positions with the GeoGraphics.
|
screen map application by using the mapapp. Utilize the GeoLayer-system to integrate maps in an existing
|
||||||
Or just use an Overlay to quickly draw icons for each point on a map.
|
application. Draw graphics onto the map using geographical positions instead of pixel positions with the
|
||||||
|
GeoGraphics. Or just use an Overlay to quickly draw icons for each point on a map.
|
||||||
</p>
|
</p>
|
||||||
</header>
|
</header>
|
||||||
<div id="container" class="container">
|
<div id="container" class="container"></div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<script>
|
<script>
|
||||||
const index = new Index(itemTemplate, [
|
const index = new Index(
|
||||||
["GeoGraphics", "geographics.html"],
|
itemTemplate,
|
||||||
["GeoJson", "geojson.html"],
|
[
|
||||||
["GeoMap", "map.html"],
|
['GeoGraphics', 'geographics.html'],
|
||||||
["MapApp", "mapapp.html"],
|
['GeoJson', 'geojson.html'],
|
||||||
["MapProjection", "mapprojection.html"],
|
['GeoMap', 'map.html'],
|
||||||
["MapViewport", "mapviewport.html"],
|
['MapApp', 'mapapp.html'],
|
||||||
["Overlay", "overlay.html"],
|
['MapProjection', 'mapprojection.html'],
|
||||||
["Scatter", "scatter.html"]
|
['MapViewport', 'mapviewport.html'],
|
||||||
|
['Overlay', 'overlay.html'],
|
||||||
|
['Scatter', 'scatter.html']
|
||||||
],
|
],
|
||||||
null)
|
null
|
||||||
|
)
|
||||||
index.load()
|
index.load()
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/maps/index.png
Normal file
BIN
lib/pixi/maps/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
@ -1,72 +1,60 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="dark-mode">
|
<html lang="en" class="dark-mode">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Map</title>
|
<title>Map</title>
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
|
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css" />
|
||||||
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/vs2015.css" />
|
||||||
<link rel='stylesheet' href='../../../css/doctest.css'>
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.controls {
|
.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Map</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Map</h1>
|
||||||
<p>
|
<p>The Map class shows a geographical map using a scatter element.</p>
|
||||||
The Map class shows a geographical map using a scatter element.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 id="DeepZoomMap">DeepZoomMap</h2>
|
<h2 id="DeepZoomMap">DeepZoomMap</h2>
|
||||||
<p>Usually a DeepZoomMap will be used to display maps. It uses a <a
|
<p>
|
||||||
href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
|
Usually a DeepZoomMap will be used to display maps. It uses a
|
||||||
the zoom factor.</p>
|
<a href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending
|
||||||
<canvas id="deepZoomCanvas">
|
on the zoom factor.
|
||||||
|
</p>
|
||||||
</canvas>
|
<canvas id="deepZoomCanvas"> </canvas>
|
||||||
<script>
|
<script></script>
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||||
|
;(function () {
|
||||||
|
|
||||||
(function () {
|
|
||||||
|
|
||||||
// Create the mapapp.
|
// Create the mapapp.
|
||||||
let app = window.DeepZoomMapApp = new MapApp({
|
let app = (window.DeepZoomMapApp = new MapApp({
|
||||||
view: deepZoomCanvas,
|
view: deepZoomCanvas,
|
||||||
coordsLogging: true,
|
coordsLogging: true,
|
||||||
width: 512,
|
width: 512,
|
||||||
height: 512
|
height: 512
|
||||||
})
|
}))
|
||||||
|
|
||||||
|
|
||||||
// Load or specify a tilesConfig as required by the DeepZoomImage.
|
// Load or specify a tilesConfig as required by the DeepZoomImage.
|
||||||
const tilesConfig = {
|
const tilesConfig = {
|
||||||
"tileSize": 256,
|
tileSize: 256,
|
||||||
"format": "png",
|
format: 'png',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 1024,
|
height: 1024,
|
||||||
"width": 1024,
|
width: 1024,
|
||||||
"path": "../assets/maps/osm",
|
path: '../assets/maps/osm',
|
||||||
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Create a projection.
|
// Create a projection.
|
||||||
const projection = new Projection.Mercator()
|
const projection = new Projection.Mercator()
|
||||||
|
|
||||||
@ -77,7 +65,7 @@
|
|||||||
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
|
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
|
||||||
|
|
||||||
// Add the map to the app.
|
// Add the map to the app.
|
||||||
app.addMap("osm", osmMap)
|
app.addMap('osm', osmMap)
|
||||||
|
|
||||||
// Run the app when at least one map is set.
|
// Run the app when at least one map is set.
|
||||||
app.setup().run()
|
app.setup().run()
|
||||||
@ -85,39 +73,31 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2 id="imageMap">ImageMap</h2>
|
<h2 id="imageMap">ImageMap</h2>
|
||||||
<p>Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
|
<p>
|
||||||
when there are no different tiles required or available.</p>
|
Single images can be also used as maps. This can be useful for examples, debugging purposes or other
|
||||||
<canvas id="imageMapCanvas">
|
use-cases when there are no different tiles required or available.
|
||||||
|
</p>
|
||||||
</canvas>
|
<canvas id="imageMapCanvas"> </canvas>
|
||||||
<script>
|
<script></script>
|
||||||
</script>
|
|
||||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||||
|
;(function () {
|
||||||
|
|
||||||
(function () {
|
|
||||||
|
|
||||||
// Create the mapapp.
|
// Create the mapapp.
|
||||||
let app = window.ImageMapApp = new MapApp({
|
let app = (window.ImageMapApp = new MapApp({
|
||||||
view: imageMapCanvas,
|
view: imageMapCanvas,
|
||||||
coordsLogging: true,
|
coordsLogging: true,
|
||||||
width: 512,
|
width: 512,
|
||||||
height: 512
|
height: 512
|
||||||
})
|
}))
|
||||||
|
|
||||||
const mapTexture = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const mapTexture = '../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png'
|
||||||
|
|
||||||
// The images used by the image map need to be loaded beforehand.
|
// The images used by the image map need to be loaded beforehand.
|
||||||
// Therefore this loading step is required.
|
// Therefore this loading step is required.
|
||||||
app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
|
app.loadSprites([mapTexture], (sprites) => spritesLoaded(sprites), {
|
||||||
resolutionDependent: false
|
resolutionDependent: false
|
||||||
})
|
})
|
||||||
|
|
||||||
spritesLoaded = (sprites) => {
|
spritesLoaded = (sprites) => {
|
||||||
|
|
||||||
// Create a projection.
|
// Create a projection.
|
||||||
const projection = new Projection.Robinson(10)
|
const projection = new Projection.Robinson(10)
|
||||||
|
|
||||||
@ -127,19 +107,13 @@
|
|||||||
// Create the map
|
// Create the map
|
||||||
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
|
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
|
||||||
|
|
||||||
|
|
||||||
// Add the map to the app.
|
// Add the map to the app.
|
||||||
app.addMap("europe", imageMap)
|
app.addMap('europe', imageMap)
|
||||||
|
|
||||||
|
|
||||||
// Run the app when at least one map is set.
|
// Run the app when at least one map is set.
|
||||||
app.setup().run()
|
app.setup().run()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})()
|
})()
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/maps/map.png
Normal file
BIN
lib/pixi/maps/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
@ -1,34 +1,33 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="dark-mode">
|
<html lang="en" class="dark-mode">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>MapApp</title>
|
<title>MapApp</title>
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
|
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css" />
|
||||||
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/vs2015.css" />
|
||||||
<link rel='stylesheet' href='../../../css/doctest.css'>
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.controls {
|
.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>MapApp</h1>
|
<h1>
|
||||||
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>MapApp
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
This class extends the PIXIApp to simplify the process of rendering
|
This class extends the PIXIApp to simplify the process of rendering Maps in the canvas. For that reason, it
|
||||||
Maps in the canvas. For that reason, it contains useful functions
|
contains useful functions for an easier handling of maps in the canvas.
|
||||||
for an easier handling of maps in the canvas.
|
|
||||||
</p>
|
</p>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<div id="mapControl"></div>
|
<div id="mapControl"></div>
|
||||||
@ -36,35 +35,34 @@
|
|||||||
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
|
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
|
||||||
<script>
|
<script>
|
||||||
let osmConfig = {
|
let osmConfig = {
|
||||||
"projection": "mercator",
|
projection: 'mercator',
|
||||||
"type": "deepzoom",
|
type: 'deepzoom',
|
||||||
"tiles": {
|
tiles: {
|
||||||
"tileSize": 256,
|
tileSize: 256,
|
||||||
"format": "png",
|
format: 'png',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 1024,
|
height: 1024,
|
||||||
"width": 1024,
|
width: 1024,
|
||||||
"path": "../assets/maps/osm",
|
path: '../assets/maps/osm',
|
||||||
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let testConfig = {
|
let testConfig = {
|
||||||
"projection": "mercator",
|
projection: 'mercator',
|
||||||
"type": "deepzoom",
|
type: 'deepzoom',
|
||||||
"tiles": {
|
tiles: {
|
||||||
"tileSize": 128,
|
tileSize: 128,
|
||||||
"format": "jpg",
|
format: 'jpg',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 4096,
|
height: 4096,
|
||||||
"width": 4096,
|
width: 4096,
|
||||||
"path": "../assets/maps/test",
|
path: '../assets/maps/test',
|
||||||
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
let capitals = {
|
let capitals = {
|
||||||
@ -94,7 +92,7 @@
|
|||||||
let europe = '../assets/maps/pixabay/europe.jpg'
|
let europe = '../assets/maps/pixabay/europe.jpg'
|
||||||
|
|
||||||
//Preload all required sprites for the image map.
|
//Preload all required sprites for the image map.
|
||||||
app.loadSprites([europe], sprites => ready(sprites), {
|
app.loadSprites([europe], (sprites) => ready(sprites), {
|
||||||
resolutionDependent: false
|
resolutionDependent: false
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -110,7 +108,6 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
function ready(sprites) {
|
function ready(sprites) {
|
||||||
|
|
||||||
const cover = true
|
const cover = true
|
||||||
|
|
||||||
// When resources are loaded, the ImageMap can be instantiated.
|
// When resources are loaded, the ImageMap can be instantiated.
|
||||||
@ -123,14 +120,18 @@
|
|||||||
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
|
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
|
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), {
|
||||||
app.addMap("test", testMap)
|
cover
|
||||||
|
})
|
||||||
|
app.addMap('test', testMap)
|
||||||
|
|
||||||
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
|
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
|
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), {
|
||||||
app.addMap("osm", deepZoomMap)
|
cover
|
||||||
|
})
|
||||||
|
app.addMap('osm', deepZoomMap)
|
||||||
|
|
||||||
// Finally apply the map to the MapApp
|
// Finally apply the map to the MapApp
|
||||||
app.setMap('europe', imageMap)
|
app.setMap('europe', imageMap)
|
||||||
@ -140,9 +141,9 @@
|
|||||||
app.setup().run()
|
app.setup().run()
|
||||||
|
|
||||||
for (let [key, val] of Object.entries(app.mapList.maps)) {
|
for (let [key, val] of Object.entries(app.mapList.maps)) {
|
||||||
let mapBtn = document.createElement("button")
|
let mapBtn = document.createElement('button')
|
||||||
mapBtn.innerText = key
|
mapBtn.innerText = key
|
||||||
mapBtn.addEventListener("click", () => {
|
mapBtn.addEventListener('click', () => {
|
||||||
app.mapLayer.changeMap(val)
|
app.mapLayer.changeMap(val)
|
||||||
})
|
})
|
||||||
mapControl.appendChild(mapBtn)
|
mapControl.appendChild(mapBtn)
|
||||||
@ -150,14 +151,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (let [key, val] of Object.entries(capitals)) {
|
for (let [key, val] of Object.entries(capitals)) {
|
||||||
let cityBtn = document.createElement("button")
|
let cityBtn = document.createElement('button')
|
||||||
cityBtn.innerText = key
|
cityBtn.innerText = key
|
||||||
cityBtn.addEventListener("click", () => {
|
cityBtn.addEventListener('click', () => {
|
||||||
app.mapLayer.map.moveTo(val)
|
app.mapLayer.map.moveTo(val)
|
||||||
})
|
})
|
||||||
cityControl.appendChild(cityBtn)
|
cityControl.appendChild(cityBtn)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/maps/mapapp.png
Normal file
BIN
lib/pixi/maps/mapapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@ -37,7 +37,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload='Doctest.run()'>
|
<body onload='Doctest.run()'>
|
||||||
<h1>MapProjection</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>MapProjection</h1>
|
||||||
<p>The map projection calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
|
<p>The map projection calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
|
||||||
|
|
||||||
<h2>Static Squared World Map</h2>
|
<h2>Static Squared World Map</h2>
|
||||||
|
|||||||
BIN
lib/pixi/maps/mapprojection.png
Normal file
BIN
lib/pixi/maps/mapprojection.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@ -30,7 +30,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload='Doctest.run()'>
|
<body onload='Doctest.run()'>
|
||||||
<h1>Maps</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Maps</h1>
|
||||||
<p>Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods
|
<p>Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods
|
||||||
to
|
to
|
||||||
handle the maps.</p>
|
handle the maps.</p>
|
||||||
|
|||||||
@ -1,34 +1,34 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="dark-mode">
|
<html lang="en" class="dark-mode">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>MapViewport</title>
|
<title>MapViewport</title>
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
|
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css" />
|
||||||
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/vs2015.css" />
|
||||||
<link rel='stylesheet' href='../../../css/doctest.css'>
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.controls {
|
.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>MapViewport</h1>
|
<h1>
|
||||||
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
|
||||||
|
><a href="index.html">maps.</a>MapViewport
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
The MapViewport works under the hood of a map layer to track the informations about the current focus point and
|
The MapViewport works under the hood of a map layer to track the informations about the current focus point
|
||||||
zoom position.
|
and zoom position. This is important to maintain the same view when maps are changed.
|
||||||
This is important to maintain the same view when maps are changed.
|
|
||||||
</p>
|
</p>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
<div id="mapControl"></div>
|
<div id="mapControl"></div>
|
||||||
@ -36,35 +36,34 @@
|
|||||||
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
|
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
|
||||||
<script>
|
<script>
|
||||||
let osmConfig = {
|
let osmConfig = {
|
||||||
"projection": "mercator",
|
projection: 'mercator',
|
||||||
"type": "deepzoom",
|
type: 'deepzoom',
|
||||||
"tiles": {
|
tiles: {
|
||||||
"tileSize": 256,
|
tileSize: 256,
|
||||||
"format": "png",
|
format: 'png',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 1024,
|
height: 1024,
|
||||||
"width": 1024,
|
width: 1024,
|
||||||
"path": "../assets/maps/osm",
|
path: '../assets/maps/osm',
|
||||||
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let testConfig = {
|
let testConfig = {
|
||||||
"projection": "mercator",
|
projection: 'mercator',
|
||||||
"type": "deepzoom",
|
type: 'deepzoom',
|
||||||
"tiles": {
|
tiles: {
|
||||||
"tileSize": 128,
|
tileSize: 128,
|
||||||
"format": "jpg",
|
format: 'jpg',
|
||||||
"overlap": 0,
|
overlap: 0,
|
||||||
"type": "map",
|
type: 'map',
|
||||||
"height": 4096,
|
height: 4096,
|
||||||
"width": 4096,
|
width: 4096,
|
||||||
"path": "../assets/maps/test",
|
path: '../assets/maps/test',
|
||||||
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
let capitals = {
|
let capitals = {
|
||||||
@ -94,7 +93,7 @@
|
|||||||
let europe = '../assets/maps/pixabay/europe.jpg'
|
let europe = '../assets/maps/pixabay/europe.jpg'
|
||||||
|
|
||||||
//Preload all required sprites for the image map.
|
//Preload all required sprites for the image map.
|
||||||
app.loadSprites([europe], sprites => ready(sprites), {
|
app.loadSprites([europe], (sprites) => ready(sprites), {
|
||||||
resolutionDependent: false
|
resolutionDependent: false
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -110,7 +109,6 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
function ready(sprites) {
|
function ready(sprites) {
|
||||||
|
|
||||||
const cover = true
|
const cover = true
|
||||||
|
|
||||||
// When resources are loaded, the ImageMap can be instantiated.
|
// When resources are loaded, the ImageMap can be instantiated.
|
||||||
@ -123,14 +121,18 @@
|
|||||||
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
|
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
|
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), {
|
||||||
app.addMap("test", testMap)
|
cover
|
||||||
|
})
|
||||||
|
app.addMap('test', testMap)
|
||||||
|
|
||||||
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
|
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
|
||||||
app
|
app
|
||||||
})
|
})
|
||||||
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
|
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), {
|
||||||
app.addMap("osm", deepZoomMap)
|
cover
|
||||||
|
})
|
||||||
|
app.addMap('osm', deepZoomMap)
|
||||||
|
|
||||||
// Finally apply the map to the MapApp
|
// Finally apply the map to the MapApp
|
||||||
app.setMap('europe', imageMap)
|
app.setMap('europe', imageMap)
|
||||||
@ -140,9 +142,9 @@
|
|||||||
app.setup().run()
|
app.setup().run()
|
||||||
|
|
||||||
for (let [key, val] of Object.entries(app.mapList.maps)) {
|
for (let [key, val] of Object.entries(app.mapList.maps)) {
|
||||||
let mapBtn = document.createElement("button")
|
let mapBtn = document.createElement('button')
|
||||||
mapBtn.innerText = key
|
mapBtn.innerText = key
|
||||||
mapBtn.addEventListener("click", () => {
|
mapBtn.addEventListener('click', () => {
|
||||||
app.mapLayer.changeMap(val)
|
app.mapLayer.changeMap(val)
|
||||||
})
|
})
|
||||||
mapControl.appendChild(mapBtn)
|
mapControl.appendChild(mapBtn)
|
||||||
@ -150,14 +152,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (let [key, val] of Object.entries(capitals)) {
|
for (let [key, val] of Object.entries(capitals)) {
|
||||||
let cityBtn = document.createElement("button")
|
let cityBtn = document.createElement('button')
|
||||||
cityBtn.innerText = key
|
cityBtn.innerText = key
|
||||||
cityBtn.addEventListener("click", () => {
|
cityBtn.addEventListener('click', () => {
|
||||||
app.mapLayer.map.moveTo(val)
|
app.mapLayer.map.moveTo(val)
|
||||||
})
|
})
|
||||||
cityControl.appendChild(cityBtn)
|
cityControl.appendChild(cityBtn)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/maps/mapviewport.png
Normal file
BIN
lib/pixi/maps/mapviewport.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
@ -1,24 +1,20 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="dark-mode">
|
<html lang="en" class="dark-mode">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>Overlay</title>
|
<title>Overlay</title>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
|
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css" />
|
||||||
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/vs2015.css" />
|
||||||
<link rel='stylesheet' href='../../../css/doctest.css'>
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../../dist/iwmlib.js"></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png">
|
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png" />
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.inline-showcase {
|
.inline-showcase {
|
||||||
@ -31,15 +27,14 @@
|
|||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1 class="title">Overlay</h1>
|
<h1 class="title">
|
||||||
|
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Overlay
|
||||||
|
</h1>
|
||||||
<!-- <a href="../../../" class="Documentation"></a> -->
|
<!-- <a href="../../../" class="Documentation"></a> -->
|
||||||
<p class="description">
|
<p class="description">The overlayclass creates a convenient way to create and design complex map overlays.</p>
|
||||||
The overlayclass creates a convenient way to create and design
|
|
||||||
complex map overlays.
|
|
||||||
</p>
|
|
||||||
<canvas id="view" class="center"> </canvas>
|
<canvas id="view" class="center"> </canvas>
|
||||||
<script>
|
<script>
|
||||||
let app = new MapApp({
|
let app = new MapApp({
|
||||||
@ -51,25 +46,17 @@
|
|||||||
var osmworld = '../assets/maps/osm/0/0/0.png'
|
var osmworld = '../assets/maps/osm/0/0/0.png'
|
||||||
let worlOSMData = new MapProjection(new Projection.Mercator())
|
let worlOSMData = new MapProjection(new Projection.Mercator())
|
||||||
|
|
||||||
|
|
||||||
function setupMap(textures) {
|
function setupMap(textures) {
|
||||||
|
|
||||||
// Create the map!
|
// Create the map!
|
||||||
let map = new ImageMap(
|
let map = new ImageMap(new PIXI.Sprite(textures.get(osmworld)), worlOSMData)
|
||||||
new PIXI.Sprite(textures.get(osmworld)),
|
|
||||||
worlOSMData
|
|
||||||
)
|
|
||||||
|
|
||||||
// Setup the map in the mapapp.
|
// Setup the map in the mapapp.
|
||||||
app.setMap('osm', map)
|
app.setMap('osm', map)
|
||||||
app.setup().run()
|
app.setup().run()
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
|
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* To create an overlay you just need to create a JSON file.
|
* To create an overlay you just need to create a JSON file.
|
||||||
* The styles defined in the styles are cascading, meaning that
|
* The styles defined in the styles are cascading, meaning that
|
||||||
@ -111,41 +98,39 @@
|
|||||||
|
|
||||||
let exampleOverlayJSON = {
|
let exampleOverlayJSON = {
|
||||||
icon: '../../../assets/icons/place.png',
|
icon: '../../../assets/icons/place.png',
|
||||||
iconColor: "0x35aaea",
|
iconColor: '0x35aaea',
|
||||||
iconAnchor: { x: 0.5, y: 1 },
|
iconAnchor: { x: 0.5, y: 1 },
|
||||||
size: 5,
|
size: 5,
|
||||||
scale: 0.2,
|
scale: 0.2,
|
||||||
disabledColor: 0x000000,
|
disabledColor: 0x000000,
|
||||||
disabledIconColor: 0xCCCCCC,
|
disabledIconColor: 0xcccccc,
|
||||||
disabledScale: 0.5,
|
disabledScale: 0.5,
|
||||||
color: '0x3FA7EE',
|
color: '0x3FA7EE',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
name: 'Custom Icon',
|
name: 'Custom Icon',
|
||||||
fontWeight: "bold",
|
fontWeight: 'bold',
|
||||||
icon: '../../../assets/icons/beenhere.png',
|
icon: '../../../assets/icons/beenhere.png',
|
||||||
iconColor: 0x00ff00,
|
iconColor: 0x00ff00,
|
||||||
iconAlpha: 0.5,
|
iconAlpha: 0.5,
|
||||||
size: 0,
|
size: 0,
|
||||||
labelVerticalAlignment: "underneath",
|
labelVerticalAlignment: 'underneath',
|
||||||
label: 'Abidjan',
|
label: 'Abidjan',
|
||||||
location: {
|
location: {
|
||||||
x: 5.34947,
|
x: 5.34947,
|
||||||
y: -4.006472
|
y: -4.006472
|
||||||
},
|
},
|
||||||
information:
|
information: 'Here a custom icon is used. It overrides the icon setting in the global section.'
|
||||||
'Here a custom icon is used. It overrides the icon setting in the global section.'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Berlin',
|
name: 'Berlin',
|
||||||
label: "enabled",
|
label: 'enabled',
|
||||||
disabledLabel: "disabled",
|
disabledLabel: 'disabled',
|
||||||
location: {
|
location: {
|
||||||
x: 52.52543,
|
x: 52.52543,
|
||||||
y: 13.385291
|
y: 13.385291
|
||||||
},
|
},
|
||||||
information:
|
information: '... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
|
||||||
'... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
|
|
||||||
enabled: false
|
enabled: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -155,8 +140,7 @@
|
|||||||
x: -35.282025,
|
x: -35.282025,
|
||||||
y: 149.128648
|
y: 149.128648
|
||||||
},
|
},
|
||||||
information:
|
information: '... ist die Hauptstadt und achtgrößte Stadt Australiens.'
|
||||||
'... ist die Hauptstadt und achtgrößte Stadt Australiens.'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Kapstadt',
|
name: 'Kapstadt',
|
||||||
@ -165,8 +149,7 @@
|
|||||||
x: -33.925448,
|
x: -33.925448,
|
||||||
y: 18.416962
|
y: 18.416962
|
||||||
},
|
},
|
||||||
information:
|
information: `This item adjusts it's size according to the map.`
|
||||||
`This item adjusts it's size according to the map.`
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Moskau',
|
name: 'Moskau',
|
||||||
@ -195,13 +178,12 @@
|
|||||||
x: -22.8714,
|
x: -22.8714,
|
||||||
y: -43.28049
|
y: -43.28049
|
||||||
},
|
},
|
||||||
information:
|
information: '... ist eine ausgedehnte brasilianische Küstenmetropole. '
|
||||||
'... ist eine ausgedehnte brasilianische Küstenmetropole. '
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Tokio',
|
name: 'Tokio',
|
||||||
type: "factory",
|
type: 'factory',
|
||||||
label: "factory",
|
label: 'factory',
|
||||||
location: {
|
location: {
|
||||||
x: 35.696278,
|
x: 35.696278,
|
||||||
y: 139.731366
|
y: 139.731366
|
||||||
@ -214,7 +196,6 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script class="doctest" data-collapsible data-title="Overlay">
|
<script class="doctest" data-collapsible data-title="Overlay">
|
||||||
|
|
||||||
let overlay = new Overlay(exampleOverlayJSON)
|
let overlay = new Overlay(exampleOverlayJSON)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -225,13 +206,11 @@
|
|||||||
let overlayTextures = overlay.findAllTextures()
|
let overlayTextures = overlay.findAllTextures()
|
||||||
|
|
||||||
let list = [osmworld].concat(overlayTextures)
|
let list = [osmworld].concat(overlayTextures)
|
||||||
app.loadTextures(list, textures => texturesLoaded(textures), {
|
app.loadTextures(list, (textures) => texturesLoaded(textures), {
|
||||||
resolutionDependent: false
|
resolutionDependent: false
|
||||||
})
|
})
|
||||||
|
|
||||||
function texturesLoaded(textures) {
|
function texturesLoaded(textures) {
|
||||||
|
|
||||||
|
|
||||||
/** When all textures are loaded .... */
|
/** When all textures are loaded .... */
|
||||||
setupMap(textures)
|
setupMap(textures)
|
||||||
|
|
||||||
@ -244,12 +223,10 @@
|
|||||||
const vanishingTime = 1000
|
const vanishingTime = 1000
|
||||||
|
|
||||||
// Factories must return a geographics object.
|
// Factories must return a geographics object.
|
||||||
Overlay.createFactory("factory", (item) => {
|
Overlay.createFactory('factory', (item) => {
|
||||||
|
|
||||||
// This is applied to every item in the overlay that has
|
// This is applied to every item in the overlay that has
|
||||||
// the type factory'
|
// the type factory'
|
||||||
|
|
||||||
|
|
||||||
let geographics = new GeoPoint(item.location)
|
let geographics = new GeoPoint(item.location)
|
||||||
|
|
||||||
geographics.drawHandler.add((graphics) => {
|
geographics.drawHandler.add((graphics) => {
|
||||||
@ -257,10 +234,9 @@
|
|||||||
graphics.drawRect(0, 0, 10, 10)
|
graphics.drawRect(0, 0, 10, 10)
|
||||||
})
|
})
|
||||||
|
|
||||||
let text = new PIXI.Text(item.name, {fontSize: 5})
|
let text = new PIXI.Text(item.name, { fontSize: 5 })
|
||||||
geographics.graphics.addChild(text)
|
geographics.graphics.addChild(text)
|
||||||
|
|
||||||
|
|
||||||
return geographics
|
return geographics
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -282,7 +258,6 @@
|
|||||||
// correct coordinates of the map.
|
// correct coordinates of the map.
|
||||||
app.mapLayer.addLayer(exampleOverlayGeoLayer)
|
app.mapLayer.addLayer(exampleOverlayGeoLayer)
|
||||||
|
|
||||||
|
|
||||||
// Just a helper function that clears the popups and removes
|
// Just a helper function that clears the popups and removes
|
||||||
// a remaining cleaner timeout.
|
// a remaining cleaner timeout.
|
||||||
function clearPopup() {
|
function clearPopup() {
|
||||||
@ -297,8 +272,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script></script>
|
||||||
</script>
|
</body>
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/maps/overlay.png
Normal file
BIN
lib/pixi/maps/overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
@ -25,7 +25,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Scatter</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Scatter</h1>
|
||||||
<p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>
|
<p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>
|
||||||
|
|
||||||
<h2>CoverScatter</h2>
|
<h2>CoverScatter</h2>
|
||||||
|
|||||||
BIN
lib/pixi/maps/scatter.png
Normal file
BIN
lib/pixi/maps/scatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
@ -1,15 +1,14 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang='en'>
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset='UTF-8'>
|
|
||||||
<title>Utils</title>
|
<title>Utils</title>
|
||||||
<link rel='stylesheet' href='../iwmlib/lib/3rdparty/highlight/styles/default.css'>
|
<link rel="stylesheet" href="../../../lib/3rdparty/highlight/styles/default.css" />
|
||||||
<link rel='stylesheet' href='../iwmlib/lib/../css/doctest.css'>
|
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||||
<script src='../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
|
<script src="../../../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src='../iwmlib/lib/3rdparty/all.js'></script>
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src='../iwmlib/lib/all.js'></script>
|
<script src="../../../dist/iwmlib.js"></script>
|
||||||
<script src='../iwmlib/lib/pixi/all.js'></script>
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||||
<script src="all.js"></script>
|
<script src="all.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -17,65 +16,75 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Utils</h1>
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Utils</h1>
|
||||||
<p>Some utility functionalities for the Tuesch.</p>
|
<p>Some utility functionalities for the Tuesch.</p>
|
||||||
|
|
||||||
<h2>Event Handler</h2>
|
<h2>Event Handler</h2>
|
||||||
<p>
|
<p>
|
||||||
The event handler class generalizes a common design principle in javascript. When an event occurs, that is of relevance for
|
The event handler class generalizes a common design principle in javascript. When an event occurs, that is
|
||||||
other objects, then this event should be sent out to all objects, that are interested in that event. Objects interested
|
of relevance for other objects, then this event should be sent out to all objects, that are interested in
|
||||||
in that event, subscribe the event handler and get notified via a callback function.
|
that event. Objects interested in that event, subscribe the event handler and get notified via a callback
|
||||||
|
function.
|
||||||
</p>
|
</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
let result = []
|
let result = []
|
||||||
function a() { result.push("a") }
|
function a() {
|
||||||
function b() { result.push("b") }
|
result.push('a')
|
||||||
function c() { result.push("c") }
|
}
|
||||||
function d() { result.push("d") }
|
function b() {
|
||||||
function e() { result.push("e") }
|
result.push('b')
|
||||||
function f() { result.push("f") }
|
}
|
||||||
|
function c() {
|
||||||
|
result.push('c')
|
||||||
|
}
|
||||||
|
function d() {
|
||||||
|
result.push('d')
|
||||||
|
}
|
||||||
|
function e() {
|
||||||
|
result.push('e')
|
||||||
|
}
|
||||||
|
function f() {
|
||||||
|
result.push('f')
|
||||||
|
}
|
||||||
|
|
||||||
//Init and call.
|
//Init and call.
|
||||||
let eventHandler = new EventHandler("manual", { listeners: [a, b] })
|
let eventHandler = new EventHandler('manual', { listeners: [a, b] })
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), ["a", "b"].join(","))
|
Doctest.expect(result.join(','), ['a', 'b'].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
// Add single
|
// Add single
|
||||||
eventHandler.add(c)
|
eventHandler.add(c)
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), ["a", "b", "c"].join(","))
|
Doctest.expect(result.join(','), ['a', 'b', 'c'].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
// Add multiple
|
// Add multiple
|
||||||
eventHandler.addMultiple(d, e, f)
|
eventHandler.addMultiple(d, e, f)
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), ["a", "b", "c", "d", "e", "f"].join(","))
|
Doctest.expect(result.join(','), ['a', 'b', 'c', 'd', 'e', 'f'].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
//Remove inbetween
|
//Remove inbetween
|
||||||
eventHandler.remove(c)
|
eventHandler.remove(c)
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), ["a", "b", "d", "e", "f"].join(","))
|
Doctest.expect(result.join(','), ['a', 'b', 'd', 'e', 'f'].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
// Remove first
|
// Remove first
|
||||||
eventHandler.remove(a)
|
eventHandler.remove(a)
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), ["b", "d", "e", "f"].join(","))
|
Doctest.expect(result.join(','), ['b', 'd', 'e', 'f'].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
// Remove all remaining elements.
|
// Remove all remaining elements.
|
||||||
eventHandler.empty()
|
eventHandler.empty()
|
||||||
eventHandler.call()
|
eventHandler.call()
|
||||||
Doctest.expect(result.join(","), [].join(","))
|
Doctest.expect(result.join(','), [].join(','))
|
||||||
result = []
|
result = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>DomUtils</h2>
|
<h2>DomUtils</h2>
|
||||||
@ -85,50 +94,53 @@
|
|||||||
<h3>positionOnElement(element, position)</h3>
|
<h3>positionOnElement(element, position)</h3>
|
||||||
Function that returns the global position for a normalized position.
|
Function that returns the global position for a normalized position.
|
||||||
|
|
||||||
<div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>
|
<div
|
||||||
|
id="positionOnElementBox"
|
||||||
|
class="box"
|
||||||
|
style="
|
||||||
|
width: 512px;
|
||||||
|
height: 256px;
|
||||||
|
border: 1px solid black;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transform: rotate(30deg);
|
||||||
|
margin: 100px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
let target = document.getElementById('positionOnElementBox')
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
let target = document.getElementById("positionOnElementBox")
|
|
||||||
|
|
||||||
window.addEventListener("load", () => {
|
|
||||||
|
|
||||||
let positions = [
|
let positions = [
|
||||||
[0, 0],
|
[0, 0],
|
||||||
[0, 1],
|
[0, 1],
|
||||||
[1, 0],
|
[1, 0],
|
||||||
[0.5,0.5],
|
[0.5, 0.5],
|
||||||
[0.2, 0.2],
|
[0.2, 0.2],
|
||||||
[0.2, 0.8],
|
[0.2, 0.8],
|
||||||
[0.8, 0.2],
|
[0.8, 0.2],
|
||||||
[0.8, 0.8],
|
[0.8, 0.8]
|
||||||
]
|
]
|
||||||
|
|
||||||
positions.forEach(position => {
|
positions.forEach((position) => {
|
||||||
position = { x: position[0], y: position[1] }
|
position = { x: position[0], y: position[1] }
|
||||||
let transformedPosition = DomUtils.positionOnElement(target, position)
|
let transformedPosition = DomUtils.positionOnElement(target, position)
|
||||||
let dot = document.createElement("div");
|
let dot = document.createElement('div')
|
||||||
const size = 10;
|
const size = 10
|
||||||
|
|
||||||
|
|
||||||
Object.assign(dot.style, {
|
Object.assign(dot.style, {
|
||||||
width: size + "px",
|
width: size + 'px',
|
||||||
height: size + "px",
|
height: size + 'px',
|
||||||
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y -size/2+ "px",
|
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y - size / 2 + 'px',
|
||||||
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x -size/2 + "px",
|
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x - size / 2 + 'px',
|
||||||
position: "absolute",
|
position: 'absolute',
|
||||||
backgroundColor: "green",
|
backgroundColor: 'green',
|
||||||
borderRadius: "50%"
|
borderRadius: '50%'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
document.body.appendChild(dot)
|
document.body.appendChild(dot)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,41 +1,43 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Message</title>
|
<title>PIXI Message</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Message</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Message</h1>
|
||||||
<p>
|
<p>
|
||||||
A message box is a timed popup window. By default, the message window appears in the upper right corner and disappears after 5 seconds.
|
A message box is a timed popup window. By default, the message window appears in the upper right corner and
|
||||||
|
disappears after 5 seconds.
|
||||||
</p>
|
</p>
|
||||||
<p><a href="../../doc/out/Message.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/Message.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some message examples:</p><br />
|
<p>Let's look at some message examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Two buttons which start message windows.</p>
|
||||||
What you should see: Two buttons which start message windows.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let button1 = new Button({
|
let button1 = new Button({
|
||||||
x: 0,
|
x: 0,
|
||||||
label: 'Default message',
|
label: 'Default message',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const message = new Message({
|
const message = new Message({
|
||||||
app: app,
|
app: app,
|
||||||
header: 'Dies ist die Überschrift',
|
header: 'Dies ist die Überschrift',
|
||||||
@ -43,12 +45,12 @@ let button1 = new Button({
|
|||||||
})
|
})
|
||||||
app.scene.addChild(message)
|
app.scene.addChild(message)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button2 = new Button({
|
let button2 = new Button({
|
||||||
x: 170,
|
x: 170,
|
||||||
label: 'Bottom-centered message',
|
label: 'Bottom-centered message',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const message = new Message({
|
const message = new Message({
|
||||||
app: app,
|
app: app,
|
||||||
content: 'Diese Nachricht hat nur einen Text.',
|
content: 'Diese Nachricht hat nur einen Text.',
|
||||||
@ -59,20 +61,21 @@ let button2 = new Button({
|
|||||||
})
|
})
|
||||||
app.scene.addChild(message)
|
app.scene.addChild(message)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button3 = new Button({
|
let button3 = new Button({
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 60,
|
y: 60,
|
||||||
label: 'Message from PixiApp',
|
label: 'Message from PixiApp',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
let message = app.message({
|
let message = app.message({
|
||||||
content: 'Diese Nachricht verschwindet gleich wieder.'
|
content: 'Diese Nachricht verschwindet gleich wieder.'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(button1, button2)
|
app.scene.addChild(button1, button2)
|
||||||
app.scene.addChild(button3)
|
app.scene.addChild(button3)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/message.png
Normal file
BIN
lib/pixi/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 KiB |
@ -1,125 +1,130 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Modal</title>
|
<title>PIXI Modal</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Modal</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Modal</h1>
|
||||||
<p>
|
<p>
|
||||||
In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
|
In user interface design for computer applications, a modal window is a graphical control element
|
||||||
|
subordinate to an application's main window. It creates a mode that disables the main window, but keeps it
|
||||||
|
visible with the modal window as a child window in front of it. Users must interact with the modal window
|
||||||
|
before they can return to the parent application. This avoids interrupting the workflow on the main window.
|
||||||
|
Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some modal examples:</p><br />
|
<p>Let's look at some modal examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Some buttons whichs starts different modal dialogs.</p>
|
||||||
What you should see: Some buttons whichs starts different modal dialogs.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
transparent: false,
|
transparent: false,
|
||||||
backgroundColor: 0xaa2211,
|
backgroundColor: 0xaa2211,
|
||||||
theme: 'light'
|
theme: 'light'
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let button1 = new Button({
|
let button1 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Modal',
|
label: 'Modal',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({app: app})
|
const modal = new Modal({ app: app })
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button2 = new Button({
|
let button2 = new Button({
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Modal mit Inhalt',
|
label: 'Modal mit Inhalt',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
closeOnBackground: false,
|
closeOnBackground: false,
|
||||||
backgroundFillAlpha: .3,
|
backgroundFillAlpha: 0.3,
|
||||||
header: 'Dies ist die Überschrift',
|
header: 'Dies ist die Überschrift',
|
||||||
content: 'Und dies ist der Fließtext.'
|
content: 'Und dies ist der Fließtext.'
|
||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button3 = new Button({
|
let button3 = new Button({
|
||||||
x: 270,
|
x: 270,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Modal mit Fließtext',
|
label: 'Modal mit Fließtext',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
maxWidth: 400,
|
maxWidth: 400,
|
||||||
header: 'Modal mit langem Fließtext',
|
header: 'Modal mit langem Fließtext',
|
||||||
content: 'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
|
content:
|
||||||
|
'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
|
||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button4 = new Button({
|
let button4 = new Button({
|
||||||
x: 470,
|
x: 470,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Modal nur Fließtext',
|
label: 'Modal nur Fließtext',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
maxWidth: 600,
|
maxWidth: 600,
|
||||||
content: 'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
|
content:
|
||||||
|
'Die Relativitätstheorie befasst sich mit der Struktur von Raum und Zeit sowie mit dem Wesen der Gravitation. Sie besteht aus zwei maßgeblich von Albert Einstein geschaffenen physikalischen Theorien, der 1905 veröffentlichten speziellen Relativitätstheorie und der 1916 abgeschlossenen allgemeinen Relativitätstheorie. Die spezielle Relativitätstheorie beschreibt das Verhalten von Raum und Zeit aus der Sicht von Beobachtern, die sich relativ zueinander bewegen, und die damit verbundenen Phänomene.'
|
||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button5 = new Button({
|
let button5 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 70,
|
y: 70,
|
||||||
label: 'Modal mit Button',
|
label: 'Modal mit Button',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
header: 'Modal mit Button',
|
header: 'Modal mit Button',
|
||||||
content: 'Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.',
|
content: 'Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.',
|
||||||
button: {label: 'OK', action: () => modal.hide()},
|
button: { label: 'OK', action: () => modal.hide() },
|
||||||
minWidth: 450,
|
minWidth: 450,
|
||||||
maxWidth: 450,
|
maxWidth: 450,
|
||||||
closeButton: false
|
closeButton: false
|
||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button6 = new Button({
|
let button6 = new Button({
|
||||||
x: 190,
|
x: 190,
|
||||||
y: 70,
|
y: 70,
|
||||||
label: 'Modal mit ButtonGroup',
|
label: 'Modal mit ButtonGroup',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
header: 'Modal mit ButtonGroup',
|
header: 'Modal mit ButtonGroup',
|
||||||
content: 'Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr.',
|
content:
|
||||||
|
'Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr.',
|
||||||
buttonGroup: {
|
buttonGroup: {
|
||||||
buttons: [
|
buttons: [{ label: 'Abbrechen', action: (e) => modal.hide() }, { label: 'Anwenden' }]
|
||||||
{label: 'Abbrechen', action: e => modal.hide()},
|
|
||||||
{label: 'Anwenden'}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
minWidth: 450,
|
minWidth: 450,
|
||||||
maxWidth: 450,
|
maxWidth: 450,
|
||||||
@ -127,16 +132,16 @@ let button6 = new Button({
|
|||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
|
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
|
||||||
img.scale.set(.2, .2)
|
img.scale.set(0.2, 0.2)
|
||||||
|
|
||||||
let button7 = new Button({
|
let button7 = new Button({
|
||||||
x: 420,
|
x: 420,
|
||||||
y: 70,
|
y: 70,
|
||||||
label: 'Modal mit Foto',
|
label: 'Modal mit Foto',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
@ -147,23 +152,24 @@ let button7 = new Button({
|
|||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button8 = new Button({
|
let button8 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 130,
|
y: 130,
|
||||||
label: 'App Modal',
|
label: 'App Modal',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
let modal = app.modal({
|
let modal = app.modal({
|
||||||
header: 'Modal aus App gestartet',
|
header: 'Modal aus App gestartet',
|
||||||
content: 'Die größte Erfindung des menschlichen Geistes? - Die Zinseszinsen!',
|
content: 'Die größte Erfindung des menschlichen Geistes? - Die Zinseszinsen!',
|
||||||
minWidth: 80
|
minWidth: 80
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(button1, button2, button3, button4)
|
app.scene.addChild(button1, button2, button3, button4)
|
||||||
app.scene.addChild(button5, button6, button7)
|
app.scene.addChild(button5, button6, button7)
|
||||||
app.scene.addChild(button8)
|
app.scene.addChild(button8)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/modal.png
Normal file
BIN
lib/pixi/modal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 581 KiB |
@ -1,42 +1,55 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>Popover</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Popover</h1>
|
||||||
<p>
|
<p>
|
||||||
Add small overlay content, like those found in iOS, to any element for housing secondary information.
|
Add small overlay content, like those found in iOS, to any element for housing secondary information. The
|
||||||
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or
|
Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or touches an
|
||||||
touches an element. The difference is that the popover can contain much more content.
|
element. The difference is that the popover can contain much more content.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at an example of a popover:</p>
|
<p>Let's look at an example of a popover:</p>
|
||||||
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
const app = new PIXIApp({
|
||||||
const app = new PIXIApp({
|
|
||||||
view: canvas,
|
view: canvas,
|
||||||
autoResize: false,
|
autoResize: false,
|
||||||
width: 850, height: 450
|
width: 850,
|
||||||
}).setup().run()
|
height: 450
|
||||||
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let popover1 = new Popover({title: "Popover title", text: "This is the popover text.", x: 150, y: 130})
|
let popover1 = new Popover({ title: 'Popover title', text: 'This is the popover text.', x: 150, y: 130 })
|
||||||
app.scene.addChild(popover1)
|
app.scene.addChild(popover1)
|
||||||
|
|
||||||
let popover2 = new Popover({text: "This is another popover text. It has more words than the first one, some line breaks, \n\nbut no title :-(", x: 50, y: 230, placement: "right", width: 180})
|
let popover2 = new Popover({
|
||||||
app.scene.addChild(popover2)
|
text: 'This is another popover text. It has more words than the first one, some line breaks, \n\nbut no title :-(',
|
||||||
|
x: 50,
|
||||||
|
y: 230,
|
||||||
|
placement: 'right',
|
||||||
|
width: 180
|
||||||
|
})
|
||||||
|
app.scene.addChild(popover2)
|
||||||
|
|
||||||
let popover3 = new Popover({title: "Popover title 3. This title has many words but the Popover has no text...", x: 650, y: 70, placement: "left"})
|
let popover3 = new Popover({
|
||||||
app.scene.addChild(popover3)
|
title: 'Popover title 3. This title has many words but the Popover has no text...',
|
||||||
|
x: 650,
|
||||||
|
y: 70,
|
||||||
|
placement: 'left'
|
||||||
|
})
|
||||||
|
app.scene.addChild(popover3)
|
||||||
|
|
||||||
const text4 = `
|
const text4 = `
|
||||||
Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses
|
Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses
|
||||||
getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er,
|
getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er,
|
||||||
es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens
|
es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens
|
||||||
@ -49,7 +62,14 @@ und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
|
|||||||
wohlbekannten Apparat.
|
wohlbekannten Apparat.
|
||||||
`
|
`
|
||||||
|
|
||||||
let popover4 = new Popover({title: "Popover title 4", text: text4, x: 650, y: 120, width: 380, placement: "bottom", titleStyle: {
|
let popover4 = new Popover({
|
||||||
|
title: 'Popover title 4',
|
||||||
|
text: text4,
|
||||||
|
x: 650,
|
||||||
|
y: 120,
|
||||||
|
width: 380,
|
||||||
|
placement: 'bottom',
|
||||||
|
titleStyle: {
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 40,
|
fontSize: 40,
|
||||||
fontStyle: 'italic',
|
fontStyle: 'italic',
|
||||||
@ -64,14 +84,16 @@ let popover4 = new Popover({title: "Popover title 4", text: text4, x: 650, y: 12
|
|||||||
dropShadowDistance: 3,
|
dropShadowDistance: 3,
|
||||||
wordWrap: true,
|
wordWrap: true,
|
||||||
wordWrapWidth: 440
|
wordWrapWidth: 440
|
||||||
}, textStyle: {
|
},
|
||||||
|
textStyle: {
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
fill: "#76a9c9",
|
fill: '#76a9c9',
|
||||||
strokeThickness: 5,
|
strokeThickness: 5,
|
||||||
wordWrap: true
|
wordWrap: true
|
||||||
}})
|
}
|
||||||
app.scene.addChild(popover4)
|
})
|
||||||
|
app.scene.addChild(popover4)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/popover.png
Normal file
BIN
lib/pixi/popover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 981 KiB |
@ -1,77 +1,83 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Popup</title>
|
<title>PIXI Popup</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Popup</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Popup</h1>
|
||||||
<p>
|
<p>
|
||||||
This class represents a popup window that can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity.
|
This class represents a popup window that can be used to display an arbitrary view. The popup window is a
|
||||||
|
floating container that appears on top of the current activity.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some popup examples:</p><br />
|
<p>Let's look at some popup examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Three popups and a button which opens a popup.</p>
|
||||||
What you should see: Three popups and a button which opens a popup.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
transparent: false,
|
transparent: false,
|
||||||
backgroundColor: 0xcccccc
|
backgroundColor: 0xcccccc
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let popup1 = new Popup({
|
let popup1 = new Popup({
|
||||||
x: 20,
|
x: 20,
|
||||||
y: 20,
|
y: 20,
|
||||||
header: 'Popup'
|
header: 'Popup'
|
||||||
})
|
})
|
||||||
|
|
||||||
let popup2 = new Popup({
|
let popup2 = new Popup({
|
||||||
x: 140,
|
x: 140,
|
||||||
y: 30,
|
y: 30,
|
||||||
padding: 20,
|
padding: 20,
|
||||||
header: 'Popup',
|
header: 'Popup',
|
||||||
content: 'Man kann die Erfahrung nicht\nfrüh genug machen, wie\nentbehrlich man in der\nWelt ist.',
|
content: 'Man kann die Erfahrung nicht\nfrüh genug machen, wie\nentbehrlich man in der\nWelt ist.',
|
||||||
headerStyle: {fill: 0xaa3322},
|
headerStyle: { fill: 0xaa3322 },
|
||||||
textStyle: {fill: 0x5544ee, fontSize: 10}
|
textStyle: { fill: 0x5544ee, fontSize: 10 }
|
||||||
})
|
})
|
||||||
|
|
||||||
let popup3 = new Popup({
|
let popup3 = new Popup({
|
||||||
x: 330,
|
x: 330,
|
||||||
y: 20,
|
y: 20,
|
||||||
content: 'Man sollte alle Tage wenigstens ein kleines Lied hören, ein gutes Gedicht lesen,\nein treffliches Gemälde sehen und, wenn es möglich zu machen wäre,\neinige vernünftige Worte sprechen.'
|
content:
|
||||||
})
|
'Man sollte alle Tage wenigstens ein kleines Lied hören, ein gutes Gedicht lesen,\nein treffliches Gemälde sehen und, wenn es möglich zu machen wäre,\neinige vernünftige Worte sprechen.'
|
||||||
|
})
|
||||||
|
|
||||||
let button1 = new Button({
|
let button1 = new Button({
|
||||||
x: 20,
|
x: 20,
|
||||||
y: 160,
|
y: 160,
|
||||||
icon: 'speaker_notes',
|
icon: 'speaker_notes',
|
||||||
action: () => {
|
action: () => {
|
||||||
app.scene.addChild(new Popup({
|
app.scene.addChild(
|
||||||
|
new Popup({
|
||||||
x: 100,
|
x: 100,
|
||||||
y: 100,
|
y: 100,
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
header: 'Die Kunst ist eine Vermittlerin des Unaussprechlichen.',
|
header: 'Die Kunst ist eine Vermittlerin des Unaussprechlichen.',
|
||||||
stroke: 0x336699,
|
stroke: 0x336699,
|
||||||
strokeWidth: 3
|
strokeWidth: 3
|
||||||
}))
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(popup1, popup2, popup3)
|
app.scene.addChild(popup1, popup2, popup3)
|
||||||
app.scene.addChild(button1)
|
app.scene.addChild(button1)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/popup.png
Normal file
BIN
lib/pixi/popup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
@ -1,116 +1,135 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI PopupMenu</title>
|
<title>PIXI PopupMenu</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>PopupMenu</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>PopupMenu</h1>
|
||||||
<p>
|
<p>
|
||||||
A popup menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a click or touch operation. A context menu offers a limited set of choices that are available in the current state, or context, of the application to which the menu belongs. Usually the available choices are actions related to the selected object.
|
A popup menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a
|
||||||
|
click or touch operation. A context menu offers a limited set of choices that are available in the current
|
||||||
|
state, or context, of the application to which the menu belongs. Usually the available choices are actions
|
||||||
|
related to the selected object.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some popup menu examples:</p><br />
|
<p>Let's look at some popup menu examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Some buttons whichs open popup menues.</p>
|
||||||
What you should see: Some buttons whichs open popup menues.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
app.loadSprites([
|
app.loadSprites(
|
||||||
|
[
|
||||||
'./assets/popupmenu-1.jpg',
|
'./assets/popupmenu-1.jpg',
|
||||||
'./assets/popupmenu-2.jpg',
|
'./assets/popupmenu-2.jpg',
|
||||||
'./assets/popupmenu-3.jpg',
|
'./assets/popupmenu-3.jpg',
|
||||||
'./assets/popupmenu-4.jpg',
|
'./assets/popupmenu-4.jpg',
|
||||||
'./assets/popupmenu-5.jpg'
|
'./assets/popupmenu-5.jpg'
|
||||||
], sprites => {
|
],
|
||||||
|
(sprites) => {
|
||||||
const buttonGroup1 = new ButtonGroup({
|
const buttonGroup1 = new ButtonGroup({
|
||||||
buttons: [
|
buttons: [
|
||||||
{icon: 'looks_1', action: () => {
|
{
|
||||||
|
icon: 'looks_1',
|
||||||
|
action: () => {
|
||||||
const popupmenu = new PopupMenu({
|
const popupmenu = new PopupMenu({
|
||||||
items: [
|
items: [
|
||||||
{label: 'Speichern', action: () => alert('Gespeichert')},
|
{ label: 'Speichern', action: () => alert('Gespeichert') },
|
||||||
{label: 'Editieren', action: () => alert('Editiert')},
|
{ label: 'Editieren', action: () => alert('Editiert') },
|
||||||
{label: 'Löschen', action: () => alert('Gelöscht'), disabled: true}
|
{ label: 'Löschen', action: () => alert('Gelöscht'), disabled: true }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
app.scene.addChild(popupmenu)
|
app.scene.addChild(popupmenu)
|
||||||
}},
|
}
|
||||||
{icon: 'looks_2', action: () => {
|
},
|
||||||
|
{
|
||||||
|
icon: 'looks_2',
|
||||||
|
action: () => {
|
||||||
const popupmenu = new PopupMenu({
|
const popupmenu = new PopupMenu({
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
closeOnPopup: false,
|
closeOnPopup: false,
|
||||||
closeOnAction: true,
|
closeOnAction: true,
|
||||||
items: [
|
items: [
|
||||||
{label: 'Option 1'},
|
{ label: 'Option 1' },
|
||||||
{label: 'Option 2'},
|
{ label: 'Option 2' },
|
||||||
{label: 'Option 3', action: () => {}},
|
{ label: 'Option 3', action: () => {} },
|
||||||
{label: 'Option 4', action: () => {}},
|
{ label: 'Option 4', action: () => {} },
|
||||||
{label: 'Option 5'},
|
{ label: 'Option 5' },
|
||||||
{label: 'Option 6'}
|
{ label: 'Option 6' }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
popupmenu.x = 400
|
popupmenu.x = 400
|
||||||
app.scene.addChild(popupmenu)
|
app.scene.addChild(popupmenu)
|
||||||
}},
|
}
|
||||||
{icon: 'looks_3', action: () => {
|
},
|
||||||
|
{
|
||||||
|
icon: 'looks_3',
|
||||||
|
action: () => {
|
||||||
const popupmenu = new PopupMenu({
|
const popupmenu = new PopupMenu({
|
||||||
items: [
|
items: [
|
||||||
{label: 'Option 01', textStyle: {fill: 0x637a38, fontSize: 14}},
|
{ label: 'Option 01', textStyle: { fill: 0x637a38, fontSize: 14 } },
|
||||||
{label: 'Option 02', textStyle: {fill: 0x8ca351, fontSize: 14}},
|
{ label: 'Option 02', textStyle: { fill: 0x8ca351, fontSize: 14 } },
|
||||||
{label: 'Option 03', textStyle: {fill: 0xb5d16a, fontSize: 14}},
|
{ label: 'Option 03', textStyle: { fill: 0xb5d16a, fontSize: 14 } },
|
||||||
{label: 'Option 04', textStyle: {fill: 0xcedc9c, fontSize: 14}},
|
{ label: 'Option 04', textStyle: { fill: 0xcedc9c, fontSize: 14 } },
|
||||||
{label: 'Option 05', textStyle: {fill: 0x8c6e31, fontSize: 14}},
|
{ label: 'Option 05', textStyle: { fill: 0x8c6e31, fontSize: 14 } },
|
||||||
{label: 'Option 06', textStyle: {fill: 0xbda038, fontSize: 14}},
|
{ label: 'Option 06', textStyle: { fill: 0xbda038, fontSize: 14 } },
|
||||||
{label: 'Option 07', textStyle: {fill: 0xe7bc51, fontSize: 14}},
|
{ label: 'Option 07', textStyle: { fill: 0xe7bc51, fontSize: 14 } },
|
||||||
{label: 'Option 08', textStyle: {fill: 0xe7cc94, fontSize: 14}},
|
{ label: 'Option 08', textStyle: { fill: 0xe7cc94, fontSize: 14 } },
|
||||||
{label: 'Option 09', textStyle: {fill: 0x843d39, fontSize: 14}},
|
{ label: 'Option 09', textStyle: { fill: 0x843d39, fontSize: 14 } },
|
||||||
{label: 'Option 10', textStyle: {fill: 0xae4a4a, fontSize: 14}},
|
{ label: 'Option 10', textStyle: { fill: 0xae4a4a, fontSize: 14 } },
|
||||||
{label: 'Option 11', textStyle: {fill: 0xd7626c, fontSize: 14}},
|
{ label: 'Option 11', textStyle: { fill: 0xd7626c, fontSize: 14 } },
|
||||||
{label: 'Option 12', textStyle: {fill: 0xe8979c, fontSize: 14}}
|
{ label: 'Option 12', textStyle: { fill: 0xe8979c, fontSize: 14 } }
|
||||||
],
|
],
|
||||||
x: 155,
|
x: 155,
|
||||||
margin: 2
|
margin: 2
|
||||||
})
|
})
|
||||||
app.scene.addChild(popupmenu)
|
app.scene.addChild(popupmenu)
|
||||||
}},
|
}
|
||||||
{icon: 'looks_4', action: () => {
|
},
|
||||||
|
{
|
||||||
sprites.forEach(sprite => sprite.scale.set(.33, .33))
|
icon: 'looks_4',
|
||||||
|
action: () => {
|
||||||
|
sprites.forEach((sprite) => sprite.scale.set(0.33, 0.33))
|
||||||
|
|
||||||
const popupmenu = new PopupMenu({
|
const popupmenu = new PopupMenu({
|
||||||
items: [
|
items: [
|
||||||
{content: sprites.get('./assets/popupmenu-1.jpg')},
|
{ content: sprites.get('./assets/popupmenu-1.jpg') },
|
||||||
{content: sprites.get('./assets/popupmenu-2.jpg')},
|
{ content: sprites.get('./assets/popupmenu-2.jpg') },
|
||||||
{content: sprites.get('./assets/popupmenu-3.jpg')},
|
{ content: sprites.get('./assets/popupmenu-3.jpg') },
|
||||||
{content: sprites.get('./assets/popupmenu-4.jpg')},
|
{ content: sprites.get('./assets/popupmenu-4.jpg') },
|
||||||
{content: sprites.get('./assets/popupmenu-5.jpg')}
|
{ content: sprites.get('./assets/popupmenu-5.jpg') }
|
||||||
],
|
],
|
||||||
x: 220,
|
x: 220,
|
||||||
margin: 2,
|
margin: 2,
|
||||||
padding: 2
|
padding: 2
|
||||||
})
|
})
|
||||||
app.scene.addChild(popupmenu)
|
app.scene.addChild(popupmenu)
|
||||||
}}
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(buttonGroup1)
|
app.scene.addChild(buttonGroup1)
|
||||||
}, {resolutionDependent: false})
|
},
|
||||||
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/popupmenu.png
Normal file
BIN
lib/pixi/popupmenu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 KiB |
@ -1,50 +1,51 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Progress</title>
|
<title>PIXI Progress</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Progress</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Progress</h1>
|
||||||
<p>
|
<p>A progress bar can be used to show a user how far along he/she is in a process.</p>
|
||||||
A progress bar can be used to show a user how far along he/she is in a process.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2>Example 1</h2>
|
<h2>Example 1</h2>
|
||||||
<p>Let's look at the progress bar example:</p><br />
|
<p>Let's look at the progress bar example:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>
|
||||||
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
|
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
|
||||||
</p>
|
</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let progress1 = new Progress({
|
let progress1 = new Progress({
|
||||||
app: app
|
app: app
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(progress1)
|
app.scene.addChild(progress1)
|
||||||
|
|
||||||
setTimeout(() => progress1.progress = 10, 500)
|
setTimeout(() => (progress1.progress = 10), 500)
|
||||||
setTimeout(() => progress1.progress = 20, 800)
|
setTimeout(() => (progress1.progress = 20), 800)
|
||||||
setTimeout(() => progress1.progress = 50, 900)
|
setTimeout(() => (progress1.progress = 50), 900)
|
||||||
setTimeout(() => progress1.progress = 80, 1500)
|
setTimeout(() => (progress1.progress = 80), 1500)
|
||||||
setTimeout(() => progress1.progress = 100, 1700)
|
setTimeout(() => (progress1.progress = 100), 1700)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h2>Example 2</h2>
|
<h2>Example 2</h2>
|
||||||
@ -53,7 +54,7 @@ setTimeout(() => progress1.progress = 100, 1700)
|
|||||||
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
|
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
|
||||||
</p>
|
</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app2 = new PIXIApp({
|
const app2 = new PIXIApp({
|
||||||
view: canvas2,
|
view: canvas2,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
@ -63,14 +64,17 @@ const app2 = new PIXIApp({
|
|||||||
fillActive: 0xe7bc51,
|
fillActive: 0xe7bc51,
|
||||||
margin: 200
|
margin: 200
|
||||||
}
|
}
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
setTimeout(() => app2.progress(10), 1000)
|
setTimeout(() => app2.progress(10), 1000)
|
||||||
setTimeout(() => app2.progress(30), 2000)
|
setTimeout(() => app2.progress(30), 2000)
|
||||||
setTimeout(() => app2.progress(35), 2300)
|
setTimeout(() => app2.progress(35), 2300)
|
||||||
setTimeout(() => app2.progress(50), 2800)
|
setTimeout(() => app2.progress(50), 2800)
|
||||||
setTimeout(() => app2.progress(60), 3500)
|
setTimeout(() => app2.progress(60), 3500)
|
||||||
setTimeout(() => app2.progress(90), 4500)
|
setTimeout(() => app2.progress(90), 4500)
|
||||||
setTimeout(() => app2.progress(100), 5000)
|
setTimeout(() => app2.progress(100), 5000)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/progress.png
Normal file
BIN
lib/pixi/progress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
@ -4,7 +4,8 @@
|
|||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Resolution Doctest</title>
|
<title>PIXI Resolution Doctest</title>
|
||||||
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
@ -21,6 +22,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Resolution</h1>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas id="canvas"></canvas>
|
||||||
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
@ -33,10 +35,9 @@
|
|||||||
app.setup()
|
app.setup()
|
||||||
app.run()
|
app.run()
|
||||||
|
|
||||||
const textProps = {fontSize: 72, fill: 0xffffff}
|
const textProps = { fontSize: 72, fill: 0xffffff }
|
||||||
|
|
||||||
Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
|
Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
|
||||||
|
|
||||||
app.stage.removeChildren()
|
app.stage.removeChildren()
|
||||||
|
|
||||||
let sprite = null
|
let sprite = null
|
||||||
|
|||||||
@ -4,13 +4,15 @@
|
|||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Scatter Resolution Doctest</title>
|
<title>PIXI Scatter Resolution Doctest</title>
|
||||||
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter Resolution</h1>
|
||||||
<canvas id="canvas" />
|
<canvas id="canvas" />
|
||||||
<script>
|
<script>
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
@ -29,7 +31,7 @@
|
|||||||
'../examples/front__1_dpi600.png',
|
'../examples/front__1_dpi600.png',
|
||||||
'../examples/front__1_dpi1200.png'
|
'../examples/front__1_dpi1200.png'
|
||||||
],
|
],
|
||||||
sprites => {
|
(sprites) => {
|
||||||
app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
|
app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
|
||||||
app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
|
app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
|
||||||
|
|
||||||
@ -105,12 +107,15 @@
|
|||||||
|
|
||||||
// renderTexture
|
// renderTexture
|
||||||
//--------------------
|
//--------------------
|
||||||
sprites.forEach(value => {
|
sprites.forEach((value) => {
|
||||||
|
|
||||||
const matrix = new PIXI.Matrix()
|
const matrix = new PIXI.Matrix()
|
||||||
matrix.translate(-value.x, -value.y)
|
matrix.translate(-value.x, -value.y)
|
||||||
|
|
||||||
const texture = PIXI.RenderTexture.create({ width: value.width, height: value.height, resolution: 2 })
|
const texture = PIXI.RenderTexture.create({
|
||||||
|
width: value.width,
|
||||||
|
height: value.height,
|
||||||
|
resolution: 2
|
||||||
|
})
|
||||||
app.renderer.render(value, texture, true, matrix)
|
app.renderer.render(value, texture, true, matrix)
|
||||||
|
|
||||||
const sprite = new PIXI.Sprite(texture)
|
const sprite = new PIXI.Sprite(texture)
|
||||||
|
|||||||
@ -4,13 +4,15 @@
|
|||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Scatter Resolution Doctest</title>
|
<title>PIXI Scatter Resolution Doctest</title>
|
||||||
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter Resolution 2</h1>
|
||||||
<canvas id="canvas2" class="interactive">Canvas not supported</canvas>
|
<canvas id="canvas2" class="interactive">Canvas not supported</canvas>
|
||||||
<script>
|
<script>
|
||||||
class ScatterApp extends PIXIApp {
|
class ScatterApp extends PIXIApp {
|
||||||
|
|||||||
@ -1,39 +1,38 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<title>PIXI Scatter Doctest</title>
|
<title>PIXI Scatter Doctest</title>
|
||||||
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
<script src=".././3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter</h1>
|
||||||
Scatter
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts.
|
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to
|
||||||
The PIXI scatter defined here is a specialization of the
|
"scattered" layouts. The PIXI scatter defined here is a specialization of the
|
||||||
<a href="../scatter.html">abstract scatter pattern</a>.
|
<a href="../scatter.html">abstract scatter pattern</a>.
|
||||||
</p>
|
</p>
|
||||||
<p>PIXI scatter are organized in
|
<p>
|
||||||
<code>ScatterContainer</code> parent nodes and
|
PIXI scatter are organized in <code>ScatterContainer</code> parent nodes and
|
||||||
<code>DisplayObjectScatter</code> child nodes.
|
<code>DisplayObjectScatter</code> child nodes.
|
||||||
<p>Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a common use
|
</p>
|
||||||
case that the scene itself is used as the
|
|
||||||
<code>ScatterContainer</code>. The
|
<p>
|
||||||
<code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject zoomable, rotatable and translatable.</p>
|
Let's look at an example of a PIXI scatter. Since scatter objects are mainly used as main views it is a
|
||||||
|
common use case that the scene itself is used as the <code>ScatterContainer</code>. The
|
||||||
|
<code>DisplayObjectScatter</code> is simply used as a wrapper that makes any interative DisplayObject
|
||||||
|
zoomable, rotatable and translatable.
|
||||||
|
</p>
|
||||||
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
class ScatterApp extends PIXIApp {
|
class ScatterApp extends PIXIApp {
|
||||||
|
|
||||||
sceneFactory() {
|
sceneFactory() {
|
||||||
return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
|
return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
|
||||||
}
|
}
|
||||||
@ -45,9 +44,9 @@
|
|||||||
for (let key of ['women', 'king']) {
|
for (let key of ['women', 'king']) {
|
||||||
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
|
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
|
||||||
sprite.interactive = true
|
sprite.interactive = true
|
||||||
let scatter = new DisplayObjectScatter(sprite, this.renderer,
|
let scatter = new DisplayObjectScatter(sprite, this.renderer, {
|
||||||
{
|
x: x,
|
||||||
x: x, y: y,
|
y: y,
|
||||||
startScale: 0.25,
|
startScale: 0.25,
|
||||||
minScale: 0.2,
|
minScale: 0.2,
|
||||||
maxScale: 1
|
maxScale: 1
|
||||||
@ -69,21 +68,16 @@
|
|||||||
})
|
})
|
||||||
.setup()
|
.setup()
|
||||||
.run()
|
.run()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>
|
<h1>Two ScatterContainers in one canvas-element</h1>
|
||||||
Two ScatterContainers in one canvas-element
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
|
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the
|
||||||
ScatterContainer. You should interact the two images independently of each other.
|
King in the second ScatterContainer. You should interact the two images independently of each other.
|
||||||
</p>
|
</p>
|
||||||
<canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
class DoubleScatterApp extends PIXIApp {
|
class DoubleScatterApp extends PIXIApp {
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
super.setup()
|
super.setup()
|
||||||
// Obey order in which ScatterContainer are created because the
|
// Obey order in which ScatterContainer are created because the
|
||||||
@ -103,7 +97,7 @@
|
|||||||
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
|
||||||
x: 20,
|
x: 20,
|
||||||
y: 40,
|
y: 40,
|
||||||
startScale: .5
|
startScale: 0.5
|
||||||
})
|
})
|
||||||
this.scatterContainerBack.addChild(sprite1)
|
this.scatterContainerBack.addChild(sprite1)
|
||||||
|
|
||||||
@ -113,7 +107,7 @@
|
|||||||
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
|
||||||
x: 280,
|
x: 280,
|
||||||
y: 40,
|
y: 40,
|
||||||
startScale: .5
|
startScale: 0.5
|
||||||
})
|
})
|
||||||
this.scatterContainerFront.addChild(sprite2)
|
this.scatterContainerFront.addChild(sprite2)
|
||||||
return this
|
return this
|
||||||
@ -125,31 +119,31 @@
|
|||||||
autoResize: false,
|
autoResize: false,
|
||||||
width: 450,
|
width: 450,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<h1>
|
<h1>Nested Scatter</h1>
|
||||||
Nested Scatter
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
|
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed
|
||||||
another scatter is displayed on the map.
|
as scatter and another scatter is displayed on the map.
|
||||||
</p>
|
</p>
|
||||||
<canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
|
|
||||||
class NestedScatterApp extends PIXIApp {
|
class NestedScatterApp extends PIXIApp {
|
||||||
|
|
||||||
sceneFactory() {
|
sceneFactory() {
|
||||||
return new ScatterContainer(this.renderer, { application: this, showBounds: true, showPolygon: true, app: this })
|
return new ScatterContainer(this.renderer, {
|
||||||
|
application: this,
|
||||||
|
showBounds: true,
|
||||||
|
showPolygon: true,
|
||||||
|
app: this
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
super.setup()
|
super.setup()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Add the queen to ScatterContainer one
|
// Add the queen to ScatterContainer one
|
||||||
let woman = PIXI.Sprite.from('../examples/women.jpeg')
|
let woman = PIXI.Sprite.from('../examples/women.jpeg')
|
||||||
woman.interactive = true
|
woman.interactive = true
|
||||||
@ -164,25 +158,30 @@
|
|||||||
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
|
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
|
||||||
nestedKing.interactive = true
|
nestedKing.interactive = true
|
||||||
new DisplayObjectScatter(nestedKing, this.renderer, {
|
new DisplayObjectScatter(nestedKing, this.renderer, {
|
||||||
x: 20, y: 20, startScale: 0.3
|
x: 20,
|
||||||
|
y: 20,
|
||||||
|
startScale: 0.3
|
||||||
})
|
})
|
||||||
woman.addChild(nestedKing)
|
woman.addChild(nestedKing)
|
||||||
|
|
||||||
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
|
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
|
||||||
nestedQueen.interactive = true
|
nestedQueen.interactive = true
|
||||||
new DisplayObjectScatter(nestedQueen, this.renderer, {
|
new DisplayObjectScatter(nestedQueen, this.renderer, {
|
||||||
x: 40, y: 40, startScale: 0.3
|
x: 40,
|
||||||
|
y: 40,
|
||||||
|
startScale: 0.3
|
||||||
})
|
})
|
||||||
woman.addChild(nestedQueen)
|
woman.addChild(nestedQueen)
|
||||||
|
|
||||||
let king = PIXI.Sprite.from('../examples/king.jpeg')
|
let king = PIXI.Sprite.from('../examples/king.jpeg')
|
||||||
king.interactive = true
|
king.interactive = true
|
||||||
new DisplayObjectScatter(king, this.renderer, {
|
new DisplayObjectScatter(king, this.renderer, {
|
||||||
x: 200, y: 20, startScale: 1
|
x: 200,
|
||||||
|
y: 20,
|
||||||
|
startScale: 1
|
||||||
})
|
})
|
||||||
this.scene.addChild(king)
|
this.scene.addChild(king)
|
||||||
|
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -192,7 +191,9 @@
|
|||||||
autoResize: false,
|
autoResize: false,
|
||||||
width: 450,
|
width: 450,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/scatter.png
Normal file
BIN
lib/pixi/scatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 799 KiB |
@ -15,7 +15,7 @@
|
|||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Scrollview</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scrollview</h1>
|
||||||
<p>A configurable scrollbox designed for pixi.js.</p>
|
<p>A configurable scrollbox designed for pixi.js.</p>
|
||||||
<p><strong>Features:</strong></p>
|
<p><strong>Features:</strong></p>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
BIN
lib/pixi/scrollview.png
Normal file
BIN
lib/pixi/scrollview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 559 KiB |
@ -1,60 +1,63 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Slider</title>
|
<title>PIXI Slider</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Slider</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Slider</h1>
|
||||||
<p>A slider is used whenever a numeric value within a certain range is to be obtained.</p>
|
<p>A slider is used whenever a numeric value within a certain range is to be obtained.</p>
|
||||||
<p>The <strong>advantage</strong> of a slider over text input is that it becomes impossible
|
|
||||||
for the user to enter a bad value. Any value that they can pick with the slider is valid.</p>
|
|
||||||
<p>Let's look at some slider examples:</p><br />
|
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
|
||||||
<p>
|
<p>
|
||||||
What you should see: Many sliders with very different styling and behaviour.
|
The <strong>advantage</strong> of a slider over text input is that it becomes impossible for the user to
|
||||||
|
enter a bad value. Any value that they can pick with the slider is valid.
|
||||||
</p>
|
</p>
|
||||||
|
<p>Let's look at some slider examples:</p>
|
||||||
|
<br />
|
||||||
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
|
<p>What you should see: Many sliders with very different styling and behaviour.</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 450,
|
height: 450,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let slider1 = new Slider({
|
let slider1 = new Slider({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 20
|
y: 20
|
||||||
})
|
})
|
||||||
|
|
||||||
let slider2 = new Slider({
|
let slider2 = new Slider({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 70,
|
y: 70,
|
||||||
value: 85,
|
value: 85,
|
||||||
tooltip: 'Start value 85',
|
tooltip: 'Start value 85',
|
||||||
container: app.view
|
container: app.view
|
||||||
})
|
})
|
||||||
|
|
||||||
let slider3 = new Slider({
|
let slider3 = new Slider({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 120,
|
y: 120,
|
||||||
min: -1000,
|
min: -1000,
|
||||||
max: 2000,
|
max: 2000,
|
||||||
value: 300,
|
value: 300,
|
||||||
disabled: true
|
disabled: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let slider4 = new Slider({
|
let slider4 = new Slider({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 170,
|
y: 170,
|
||||||
value: -20,
|
value: -20,
|
||||||
@ -73,28 +76,29 @@ let slider4 = new Slider({
|
|||||||
onUpdate: (event, slider) => {
|
onUpdate: (event, slider) => {
|
||||||
slider.tooltip.content = slider.value
|
slider.tooltip.content = slider.value
|
||||||
},
|
},
|
||||||
onComplete: function(event) {
|
onComplete: function (event) {
|
||||||
console.log('Completed', this)
|
console.log('Completed', this)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button1 = new Button({
|
let button1 = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 240,
|
y: 240,
|
||||||
label: 'Toggle-slider-button',
|
label: 'Toggle-slider-button',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
active: true,
|
active: true,
|
||||||
action: e => {
|
action: (e) => {
|
||||||
slider5.visible = !slider5.visible
|
slider5.visible = !slider5.visible
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let slider5 = new Slider({
|
let slider5 = new Slider({
|
||||||
x: 230,
|
x: 230,
|
||||||
y: 250
|
y: 250
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(slider1, slider2, slider3, slider4)
|
app.scene.addChild(slider1, slider2, slider3, slider4)
|
||||||
app.scene.addChild(button1, slider5)
|
app.scene.addChild(button1, slider5)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/slider.png
Normal file
BIN
lib/pixi/slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
@ -1,33 +1,30 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
|
|
||||||
<title>PIXI Stylus</title>
|
<title>PIXI Stylus</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Stylus</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Stylus</h1>
|
||||||
<p>The Stylus class extends the PIXI.Graphics class and allows to draw into
|
|
||||||
a graphics object. Select the pen tool in the following example app and draw into the canvas.
|
|
||||||
</p>
|
|
||||||
<canvas id="canvas" style="border: 1px solid gray; width: 640px; height: 480px;" class="interactive"></canvas>
|
|
||||||
<p>
|
<p>
|
||||||
What you should see: A blank sytlus canvas.
|
The Stylus class extends the PIXI.Graphics class and allows to draw into a graphics object. Select the pen
|
||||||
|
tool in the following example app and draw into the canvas.
|
||||||
</p>
|
</p>
|
||||||
|
<canvas id="canvas" style="border: 1px solid gray; width: 640px; height: 480px" class="interactive"></canvas>
|
||||||
|
<p>What you should see: A blank sytlus canvas.</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
class StylusApp extends PIXIApp {
|
class StylusApp extends PIXIApp {
|
||||||
|
|
||||||
sceneFactory() {
|
sceneFactory() {
|
||||||
return new Stylus(this.renderer)
|
return new Stylus(this.renderer)
|
||||||
}
|
}
|
||||||
@ -42,9 +39,10 @@
|
|||||||
x: 16,
|
x: 16,
|
||||||
y: 16,
|
y: 16,
|
||||||
fill: buttonColor,
|
fill: buttonColor,
|
||||||
buttons: [{
|
buttons: [
|
||||||
|
{
|
||||||
icon: 'edit',
|
icon: 'edit',
|
||||||
iconColorActive: 0xFFFF00,
|
iconColorActive: 0xffff00,
|
||||||
action: (event, button) => this.toggleEditMode()
|
action: (event, button) => this.toggleEditMode()
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -73,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.palette = new ButtonGroup({
|
this.palette = new ButtonGroup({
|
||||||
type: "radio",
|
type: 'radio',
|
||||||
x: 200,
|
x: 200,
|
||||||
y: 16,
|
y: 16,
|
||||||
margin: 0,
|
margin: 0,
|
||||||
@ -85,16 +83,16 @@
|
|||||||
iconColorActive: 0x111111
|
iconColorActive: 0x111111
|
||||||
}), // tooltip: "Black",
|
}), // tooltip: "Black",
|
||||||
Object.assign({}, defaults, {
|
Object.assign({}, defaults, {
|
||||||
iconColor: 0xFFFF00,
|
iconColor: 0xffff00,
|
||||||
iconColorActive: 0xFFFF00
|
iconColorActive: 0xffff00
|
||||||
}), // tooltip: "Yellow",
|
}), // tooltip: "Yellow",
|
||||||
Object.assign({}, defaults, {
|
Object.assign({}, defaults, {
|
||||||
iconColor: 0x00FF00,
|
iconColor: 0x00ff00,
|
||||||
iconColorActive: 0x00FF00
|
iconColorActive: 0x00ff00
|
||||||
}), // tooltip: "Green",
|
}), // tooltip: "Green",
|
||||||
Object.assign({}, defaults, {
|
Object.assign({}, defaults, {
|
||||||
iconColor: 0xFF00FF,
|
iconColor: 0xff00ff,
|
||||||
iconColorActive: 0xFF00FF
|
iconColorActive: 0xff00ff
|
||||||
}) // tooltip: "Violet",
|
}) // tooltip: "Violet",
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
@ -105,7 +103,7 @@
|
|||||||
toggleEditMode() {
|
toggleEditMode() {
|
||||||
this.scene.interactive = !this.scene.interactive
|
this.scene.interactive = !this.scene.interactive
|
||||||
|
|
||||||
console.log("this.scene.interactive")
|
console.log('this.scene.interactive')
|
||||||
}
|
}
|
||||||
|
|
||||||
selectColor(button) {
|
selectColor(button) {
|
||||||
@ -144,13 +142,15 @@
|
|||||||
app.setup()
|
app.setup()
|
||||||
app.run()
|
app.run()
|
||||||
</script>
|
</script>
|
||||||
<h2>
|
<h2>References</h2>
|
||||||
References
|
|
||||||
</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://mattdesl.svbtle.com/drawing-lines-is-hard">Drawing Lines is Hard</a></li>
|
<li><a href="https://mattdesl.svbtle.com/drawing-lines-is-hard">Drawing Lines is Hard</a></li>
|
||||||
<li><a href="http://perfectionkills.com/exploring-canvas-drawing-techniques/">Exploring Canvas Drawing
|
<li>
|
||||||
Techniques</a></li>
|
<a href="http://perfectionkills.com/exploring-canvas-drawing-techniques/"
|
||||||
|
>Exploring Canvas Drawing Techniques</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
<li><a href="https://github.com/mattdesl/polyline-normals">Polyline Normals</a></li>
|
<li><a href="https://github.com/mattdesl/polyline-normals">Polyline Normals</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/stylus.png
Normal file
BIN
lib/pixi/stylus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
@ -1,45 +1,62 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Switch</title>
|
<title>PIXI Switch</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Switch</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Switch</h1>
|
||||||
<p>A switch is a visual toggle between two mutually exclusive states—on and off.</p>
|
<p>A switch is a visual toggle between two mutually exclusive states—on and off.</p>
|
||||||
<p><strong>Consider adjusting a switch’s appearance to match the style of your app.</strong> If it works well in your app, change the colors of a switch in its on and off states or use custom imagery to represent the switch.</p>
|
|
||||||
<p><strong>Use switches in table rows only.</strong> Switches are intended for use in tables, such as in a list of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation bar, use a button instead, and provide two distinct icons that communicate the states.</p>
|
|
||||||
<p><strong>Avoid adding labels to describe the values of a switch.</strong> Switches are either on or off. Providing labels that describe these states is redundant and clutters the interface.</p>
|
|
||||||
<p><strong>Consider using switches to manage the availability of related interface elements.</strong> Switches often affect other content onscreen. Enabling the Airplane Mode switch in Settings, for example, disables certain other settings, such as Cellular and Personal Hotspot. Disabling the Wi-Fi switch in Settings > Wi-Fi causes available networks and other options to disappear.</p>
|
|
||||||
<p>Let's look at some switch examples:</p><br />
|
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
|
||||||
<p>
|
<p>
|
||||||
What you should see: Many switches with very different styling and behaviour.
|
<strong>Consider adjusting a switch’s appearance to match the style of your app.</strong> If it works well
|
||||||
|
in your app, change the colors of a switch in its on and off states or use custom imagery to represent the
|
||||||
|
switch.
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Use switches in table rows only.</strong> Switches are intended for use in tables, such as in a list
|
||||||
|
of settings that can be toggled on and off. If you need similar functionality in a toolbar or navigation
|
||||||
|
bar, use a button instead, and provide two distinct icons that communicate the states.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Avoid adding labels to describe the values of a switch.</strong> Switches are either on or off.
|
||||||
|
Providing labels that describe these states is redundant and clutters the interface.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Consider using switches to manage the availability of related interface elements.</strong> Switches
|
||||||
|
often affect other content onscreen. Enabling the Airplane Mode switch in Settings, for example, disables
|
||||||
|
certain other settings, such as Cellular and Personal Hotspot. Disabling the Wi-Fi switch in Settings >
|
||||||
|
Wi-Fi causes available networks and other options to disappear.
|
||||||
|
</p>
|
||||||
|
<p>Let's look at some switch examples:</p>
|
||||||
|
<br />
|
||||||
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
|
<p>What you should see: Many switches with very different styling and behaviour.</p>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let switch1 = new Switch({
|
let switch1 = new Switch({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 20
|
y: 20
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch2 = new Switch({
|
let switch2 = new Switch({
|
||||||
x: 90,
|
x: 90,
|
||||||
y: 20,
|
y: 20,
|
||||||
fill: 0xfd355a,
|
fill: 0xfd355a,
|
||||||
@ -49,17 +66,17 @@ let switch2 = new Switch({
|
|||||||
strokeActiveWidth: 4,
|
strokeActiveWidth: 4,
|
||||||
controlStrokeActive: 0x50d968,
|
controlStrokeActive: 0x50d968,
|
||||||
controlStrokeActiveWidth: 12,
|
controlStrokeActiveWidth: 12,
|
||||||
controlStrokeActiveAlpha: .8,
|
controlStrokeActiveAlpha: 0.8,
|
||||||
tooltip: 'Dies ist ein Switch'
|
tooltip: 'Dies ist ein Switch'
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch3 = new Switch({
|
let switch3 = new Switch({
|
||||||
x: 170,
|
x: 170,
|
||||||
y: 20,
|
y: 20,
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 40,
|
height: 40,
|
||||||
fill: 0xfe9727,
|
fill: 0xfe9727,
|
||||||
fillAlpha: .5,
|
fillAlpha: 0.5,
|
||||||
fillActive: 0x5954d3,
|
fillActive: 0x5954d3,
|
||||||
stroke: 0x5ec7f8,
|
stroke: 0x5ec7f8,
|
||||||
strokeWidth: 12,
|
strokeWidth: 12,
|
||||||
@ -71,40 +88,40 @@ let switch3 = new Switch({
|
|||||||
controlStrokeWidth: 8,
|
controlStrokeWidth: 8,
|
||||||
controlStrokeActive: 0x50d968,
|
controlStrokeActive: 0x50d968,
|
||||||
controlStrokeActiveWidth: 16,
|
controlStrokeActiveWidth: 16,
|
||||||
controlStrokeActiveAlpha: .8,
|
controlStrokeActiveAlpha: 0.8,
|
||||||
controlRadiusActive: 12,
|
controlRadiusActive: 12,
|
||||||
duration: 3,
|
duration: 3,
|
||||||
durationActive: 1
|
durationActive: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch4 = new Switch({
|
let switch4 = new Switch({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 90,
|
y: 90,
|
||||||
active: true
|
active: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch5 = new Switch({
|
let switch5 = new Switch({
|
||||||
x: 90,
|
x: 90,
|
||||||
y: 90,
|
y: 90,
|
||||||
disabled: true
|
disabled: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch6 = new Switch({
|
let switch6 = new Switch({
|
||||||
x: 170,
|
x: 170,
|
||||||
y: 90,
|
y: 90,
|
||||||
active: true,
|
active: true,
|
||||||
disabled: true
|
disabled: true
|
||||||
})
|
})
|
||||||
|
|
||||||
let switch7 = new Switch({
|
let switch7 = new Switch({
|
||||||
x: 250,
|
x: 250,
|
||||||
y: 100,
|
y: 100,
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 10,
|
height: 10,
|
||||||
fill: 0xffffff,
|
fill: 0xffffff,
|
||||||
fillActive: 0xffffff,
|
fillActive: 0xffffff,
|
||||||
duration: .2,
|
duration: 0.2,
|
||||||
durationActive: .1,
|
durationActive: 0.1,
|
||||||
controlFill: 0x00ff00,
|
controlFill: 0x00ff00,
|
||||||
controlFillActive: 0xff0000,
|
controlFillActive: 0xff0000,
|
||||||
controlRadius: 15,
|
controlRadius: 15,
|
||||||
@ -117,9 +134,10 @@ let switch7 = new Switch({
|
|||||||
container: app.scene,
|
container: app.scene,
|
||||||
content: 'Das Gesetz ist der Freund des Schwachen.'
|
content: 'Das Gesetz ist der Freund des Schwachen.'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(switch1, switch2, switch3)
|
app.scene.addChild(switch1, switch2, switch3)
|
||||||
app.scene.addChild(switch4, switch5, switch6, switch7)
|
app.scene.addChild(switch4, switch5, switch6, switch7)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/switch.png
Normal file
BIN
lib/pixi/switch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 647 KiB |
@ -1,12 +1,12 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Text</title>
|
<title>PIXI Text</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
@ -15,44 +15,47 @@
|
|||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
|
|
||||||
<script src="../3rdparty/d3.min.js"></script>
|
<script src="../3rdparty/d3.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Text</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Text</h1>
|
||||||
<p>
|
<p>
|
||||||
The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).
|
The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction
|
||||||
|
with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a
|
||||||
|
tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do
|
||||||
|
not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed
|
||||||
|
when using a mouse).
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some tooltip examples:</p><br />
|
<p>Let's look at some tooltip examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Ten colored circles with different tooltips.</p>
|
||||||
What you should see: Ten colored circles with different tooltips.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 500,
|
height: 500,
|
||||||
transparent: false,
|
transparent: false,
|
||||||
backgroundColor: 0x2c2d2b
|
backgroundColor: 0x2c2d2b
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const container = new PIXI.Graphics()
|
const container = new PIXI.Graphics()
|
||||||
container.beginFill(0x58595b, 1)
|
container.beginFill(0x58595b, 1)
|
||||||
container.drawRect(0, 0, 700, 300)
|
container.drawRect(0, 0, 700, 300)
|
||||||
container.pivot.set(container.width / 2, container.height / 2)
|
container.pivot.set(container.width / 2, container.height / 2)
|
||||||
container.position.set(450, 250)
|
container.position.set(450, 250)
|
||||||
app.scene.addChild(container)
|
app.scene.addChild(container)
|
||||||
|
|
||||||
const sixthWidth = container.width / 6
|
const sixthWidth = container.width / 6
|
||||||
const halfHeight = container.height / 2
|
const halfHeight = container.height / 2
|
||||||
|
|
||||||
app.loadSprites([
|
|
||||||
'./assets/stuttgart-library.jpg',
|
|
||||||
'./assets/Arial.fnt'
|
|
||||||
], sprites => {
|
|
||||||
|
|
||||||
|
app.loadSprites(
|
||||||
|
['./assets/stuttgart-library.jpg', './assets/Arial.fnt'],
|
||||||
|
(sprites) => {
|
||||||
// PIXI.Text
|
// PIXI.Text
|
||||||
//--------------------
|
//--------------------
|
||||||
const text = new PIXI.Text('Bibliothek\nStuttgart', {fontSize: 50})
|
const text = new PIXI.Text('Bibliothek\nStuttgart', { fontSize: 50 })
|
||||||
text.x = sixthWidth
|
text.x = sixthWidth
|
||||||
text.y = halfHeight
|
text.y = halfHeight
|
||||||
text.pivot.set(text.width / 2, text.height / 2)
|
text.pivot.set(text.width / 2, text.height / 2)
|
||||||
@ -72,17 +75,17 @@ app.loadSprites([
|
|||||||
// PIXI.Sprite
|
// PIXI.Sprite
|
||||||
//--------------------
|
//--------------------
|
||||||
const sprite = sprites.get('./assets/stuttgart-library.jpg')
|
const sprite = sprites.get('./assets/stuttgart-library.jpg')
|
||||||
sprite.scale.set(.05, .05)
|
sprite.scale.set(0.05, 0.05)
|
||||||
sprite.x = sixthWidth * 5
|
sprite.x = sixthWidth * 5
|
||||||
sprite.y = halfHeight
|
sprite.y = halfHeight
|
||||||
sprite.anchor.set(.5, .5)
|
sprite.anchor.set(0.5, 0.5)
|
||||||
container.addChild(sprite)
|
container.addChild(sprite)
|
||||||
|
|
||||||
// Scale
|
// Scale
|
||||||
//--------------------
|
//--------------------
|
||||||
const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([.05, 1, 50])
|
const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([0.05, 1, 50])
|
||||||
const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([.1, 1, 10])
|
const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([0.1, 1, 10])
|
||||||
const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([.005, .05, .5])
|
const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([0.005, 0.05, 0.5])
|
||||||
|
|
||||||
// Sliders
|
// Sliders
|
||||||
//--------------------
|
//--------------------
|
||||||
@ -91,7 +94,7 @@ app.loadSprites([
|
|||||||
width: 500,
|
width: 500,
|
||||||
tooltip: 'Scale Container',
|
tooltip: 'Scale Container',
|
||||||
container: app.view,
|
container: app.view,
|
||||||
onUpdate: function() {
|
onUpdate: function () {
|
||||||
const value = scaleContainer(this.value)
|
const value = scaleContainer(this.value)
|
||||||
container.scale.set(value, value)
|
container.scale.set(value, value)
|
||||||
}
|
}
|
||||||
@ -105,7 +108,7 @@ app.loadSprites([
|
|||||||
width: 500,
|
width: 500,
|
||||||
tooltip: 'Scale Container All',
|
tooltip: 'Scale Container All',
|
||||||
container: app.view,
|
container: app.view,
|
||||||
onUpdate: function() {
|
onUpdate: function () {
|
||||||
const value = scaleContainer(this.value)
|
const value = scaleContainer(this.value)
|
||||||
container.scale.set(value, value)
|
container.scale.set(value, value)
|
||||||
|
|
||||||
@ -121,7 +124,7 @@ app.loadSprites([
|
|||||||
value: 50,
|
value: 50,
|
||||||
tooltip: 'Scale PIXI.Text',
|
tooltip: 'Scale PIXI.Text',
|
||||||
container: app.view,
|
container: app.view,
|
||||||
onUpdate: function() {
|
onUpdate: function () {
|
||||||
const value = scaleTexts(this.value)
|
const value = scaleTexts(this.value)
|
||||||
text.scale.set(value, value)
|
text.scale.set(value, value)
|
||||||
}
|
}
|
||||||
@ -134,12 +137,12 @@ app.loadSprites([
|
|||||||
value: 50,
|
value: 50,
|
||||||
tooltip: 'Scale PIXI.extras.BitmapText',
|
tooltip: 'Scale PIXI.extras.BitmapText',
|
||||||
container: app.view,
|
container: app.view,
|
||||||
onUpdate: function() {
|
onUpdate: function () {
|
||||||
const value = scaleTexts(this.value)
|
const value = scaleTexts(this.value)
|
||||||
bitmapText.scale.set(value, value)
|
bitmapText.scale.set(value, value)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
sliderBitmapText.x = app.size.width / 6 * 3 - sliderBitmapText.width / 2
|
sliderBitmapText.x = (app.size.width / 6) * 3 - sliderBitmapText.width / 2
|
||||||
sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
|
sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
|
||||||
app.scene.addChild(sliderBitmapText)
|
app.scene.addChild(sliderBitmapText)
|
||||||
|
|
||||||
@ -147,16 +150,17 @@ app.loadSprites([
|
|||||||
value: 50,
|
value: 50,
|
||||||
tooltip: 'Scale PIXI.Sprite',
|
tooltip: 'Scale PIXI.Sprite',
|
||||||
container: app.view,
|
container: app.view,
|
||||||
onUpdate: function() {
|
onUpdate: function () {
|
||||||
const value = scaleSprite(this.value)
|
const value = scaleSprite(this.value)
|
||||||
sprite.scale.set(value, value)
|
sprite.scale.set(value, value)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
sliderSprite.x = app.size.width / 6 * 5 - sliderSprite.width / 2
|
sliderSprite.x = (app.size.width / 6) * 5 - sliderSprite.width / 2
|
||||||
sliderSprite.y = app.size.height - 10 - sliderSprite.height
|
sliderSprite.y = app.size.height - 10 - sliderSprite.height
|
||||||
app.scene.addChild(sliderSprite)
|
app.scene.addChild(sliderSprite)
|
||||||
|
},
|
||||||
}, {resolutionDependent: false})
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/text-transform.png
Normal file
BIN
lib/pixi/text-transform.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 568 KiB |
@ -1,44 +1,45 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Text</title>
|
<title>PIXI Text</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Text</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Text</h1>
|
||||||
<p>
|
<p>
|
||||||
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
|
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
|
||||||
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
|
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
|
||||||
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
|
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
|
||||||
the button type to "checkbox".
|
between active/inactive, set the button type to "checkbox".
|
||||||
</p>
|
</p>
|
||||||
<p><a href="../../doc/out/Text.html">JavaScript API</a></p>
|
<p><a href="../../doc/out/Text.html">JavaScript API</a></p>
|
||||||
<p>Let's look at some text examples:</p><br />
|
<p>Let's look at some text examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Many texts with very different styling and behaviour.</p>
|
||||||
What you should see: Many texts with very different styling and behaviour.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 600,
|
height: 600,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const text1 = new Text({x: 10, y: 10})
|
const text1 = new Text({ x: 10, y: 10 })
|
||||||
|
|
||||||
app.scene.addChild(text1)
|
app.scene.addChild(text1)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
BIN
lib/pixi/text.png
Normal file
BIN
lib/pixi/text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
@ -1,88 +1,83 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Theme</title>
|
<title>PIXI Theme</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Theme</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Theme</h1>
|
||||||
<p>
|
<p>
|
||||||
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
|
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
|
||||||
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
|
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
|
||||||
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
|
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
|
||||||
the button type to "checkbox".
|
between active/inactive, set the button type to "checkbox".
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some button examples:</p><br />
|
<p>Let's look at some button examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Many buttons with very different styling and behaviour.</p>
|
||||||
What you should see: Many buttons with very different styling and behaviour.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250,
|
height: 250,
|
||||||
transparent: false
|
transparent: false
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let buttonDark = new Button({
|
let buttonDark = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 10,
|
y: 10,
|
||||||
label: 'Button with theme dark',
|
label: 'Button with theme dark',
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroupLight = new ButtonGroup({
|
let buttonGroupLight = new ButtonGroup({
|
||||||
x: 230,
|
x: 230,
|
||||||
y: 10,
|
y: 10,
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
buttons: [
|
buttons: [{ label: 'Button with', active: true }, { label: 'theme light' }],
|
||||||
{label: 'Button with', active: true},
|
|
||||||
{label: 'theme light'}
|
|
||||||
],
|
|
||||||
type: 'checkbox'
|
type: 'checkbox'
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonGroupRed = new ButtonGroup({
|
let buttonGroupRed = new ButtonGroup({
|
||||||
x: 480,
|
x: 480,
|
||||||
y: 10,
|
y: 10,
|
||||||
theme: 'red',
|
theme: 'red',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
buttons: [
|
buttons: [{ label: 'Button with', active: true }, { label: 'theme red' }],
|
||||||
{label: 'Button with', active: true},
|
|
||||||
{label: 'theme red'}
|
|
||||||
],
|
|
||||||
type: 'radio'
|
type: 'radio'
|
||||||
})
|
})
|
||||||
|
|
||||||
let switchDark = new Switch({
|
let switchDark = new Switch({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 90
|
y: 90
|
||||||
})
|
})
|
||||||
|
|
||||||
let switchLight = new Switch({
|
let switchLight = new Switch({
|
||||||
x: 80,
|
x: 80,
|
||||||
y: 90,
|
y: 90,
|
||||||
theme: 'light'
|
theme: 'light'
|
||||||
})
|
})
|
||||||
|
|
||||||
let switchRed = new Switch({
|
let switchRed = new Switch({
|
||||||
x: 150,
|
x: 150,
|
||||||
y: 90,
|
y: 90,
|
||||||
theme: 'red'
|
theme: 'red'
|
||||||
})
|
})
|
||||||
|
|
||||||
let yellowTheme = new Theme({
|
let yellowTheme = new Theme({
|
||||||
fill: 0xfecd2d,
|
fill: 0xfecd2d,
|
||||||
fillActive: 0xfe9727,
|
fillActive: 0xfe9727,
|
||||||
strokeActive: 0xfecd2d,
|
strokeActive: 0xfecd2d,
|
||||||
@ -96,15 +91,15 @@ let yellowTheme = new Theme({
|
|||||||
textStyleLarge: {
|
textStyleLarge: {
|
||||||
fontSize: 36
|
fontSize: 36
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let buttonYellow = new Button({
|
let buttonYellow = new Button({
|
||||||
x: 10,
|
x: 10,
|
||||||
y: 160,
|
y: 160,
|
||||||
theme: yellowTheme,
|
theme: yellowTheme,
|
||||||
label: 'Button with theme yellow',
|
label: 'Button with theme yellow',
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
action: event => {
|
action: (event) => {
|
||||||
const modal = new Modal({
|
const modal = new Modal({
|
||||||
app: app,
|
app: app,
|
||||||
theme: yellowTheme,
|
theme: yellowTheme,
|
||||||
@ -113,11 +108,11 @@ let buttonYellow = new Button({
|
|||||||
})
|
})
|
||||||
app.scene.addChild(modal)
|
app.scene.addChild(modal)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
|
app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
|
||||||
app.scene.addChild(switchDark, switchLight, switchRed)
|
app.scene.addChild(switchDark, switchLight, switchRed)
|
||||||
app.scene.addChild(buttonYellow)
|
app.scene.addChild(buttonYellow)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 85 KiB |
@ -1,104 +1,110 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Tooltip</title>
|
<title>PIXI Tooltip</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Tooltip</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Tooltip</h1>
|
||||||
<p>
|
<p>
|
||||||
The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).
|
The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction
|
||||||
|
with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a
|
||||||
|
tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do
|
||||||
|
not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed
|
||||||
|
when using a mouse).
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some tooltip examples:</p><br />
|
<p>Let's look at some tooltip examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Ten colored circles with different tooltips.</p>
|
||||||
What you should see: Ten colored circles with different tooltips.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
const circle1 = new PIXI.Graphics()
|
const circle1 = new PIXI.Graphics()
|
||||||
circle1.beginFill(0x5251a3)
|
circle1.beginFill(0x5251a3)
|
||||||
circle1.drawCircle(50, 50, 40)
|
circle1.drawCircle(50, 50, 40)
|
||||||
|
|
||||||
const circle2 = new PIXI.Graphics()
|
const circle2 = new PIXI.Graphics()
|
||||||
circle2.beginFill(0x8ca351)
|
circle2.beginFill(0x8ca351)
|
||||||
circle2.drawCircle(150, 50, 40)
|
circle2.drawCircle(150, 50, 40)
|
||||||
|
|
||||||
const circle3 = new PIXI.Graphics()
|
const circle3 = new PIXI.Graphics()
|
||||||
circle3.beginFill(0xbda038)
|
circle3.beginFill(0xbda038)
|
||||||
circle3.drawCircle(250, 50, 40)
|
circle3.drawCircle(250, 50, 40)
|
||||||
|
|
||||||
const circle4 = new PIXI.Graphics()
|
const circle4 = new PIXI.Graphics()
|
||||||
circle4.beginFill(0xae4a4a)
|
circle4.beginFill(0xae4a4a)
|
||||||
circle4.drawCircle(350, 50, 40)
|
circle4.drawCircle(350, 50, 40)
|
||||||
|
|
||||||
const circle5 = new PIXI.Graphics()
|
const circle5 = new PIXI.Graphics()
|
||||||
circle5.beginFill(0xa64f94)
|
circle5.beginFill(0xa64f94)
|
||||||
circle5.drawCircle(450, 50, 40)
|
circle5.drawCircle(450, 50, 40)
|
||||||
|
|
||||||
const circle6 = new PIXI.Graphics()
|
const circle6 = new PIXI.Graphics()
|
||||||
circle6.beginFill(0x6b6acf)
|
circle6.beginFill(0x6b6acf)
|
||||||
circle6.drawCircle(50, 150, 40)
|
circle6.drawCircle(50, 150, 40)
|
||||||
|
|
||||||
const circle7 = new PIXI.Graphics()
|
const circle7 = new PIXI.Graphics()
|
||||||
circle7.beginFill(0xb5d16a)
|
circle7.beginFill(0xb5d16a)
|
||||||
circle7.drawCircle(150, 150, 40)
|
circle7.drawCircle(150, 150, 40)
|
||||||
|
|
||||||
const circle8 = new PIXI.Graphics()
|
const circle8 = new PIXI.Graphics()
|
||||||
circle8.beginFill(0xe7bc51)
|
circle8.beginFill(0xe7bc51)
|
||||||
circle8.drawCircle(250, 150, 40)
|
circle8.drawCircle(250, 150, 40)
|
||||||
|
|
||||||
const circle9 = new PIXI.Graphics()
|
const circle9 = new PIXI.Graphics()
|
||||||
circle9.beginFill(0xd7626c)
|
circle9.beginFill(0xd7626c)
|
||||||
circle9.drawCircle(350, 150, 40)
|
circle9.drawCircle(350, 150, 40)
|
||||||
|
|
||||||
const circle10 = new PIXI.Graphics()
|
const circle10 = new PIXI.Graphics()
|
||||||
circle10.beginFill(0xcf6bbd)
|
circle10.beginFill(0xcf6bbd)
|
||||||
circle10.drawCircle(450, 150, 40)
|
circle10.drawCircle(450, 150, 40)
|
||||||
|
|
||||||
let tooltip1 = new Tooltip({
|
let tooltip1 = new Tooltip({
|
||||||
object: circle1,
|
object: circle1,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
content: 'Das Gesetz ist der Freund des Schwachen.'
|
content: 'Das Gesetz ist der Freund des Schwachen.'
|
||||||
})
|
})
|
||||||
|
|
||||||
let tooltip2 = new Tooltip({
|
let tooltip2 = new Tooltip({
|
||||||
object: circle2,
|
object: circle2,
|
||||||
content: 'Sieh vorwärts, Werner, und nicht hinter dich!'
|
content: 'Sieh vorwärts, Werner, und nicht hinter dich!'
|
||||||
})
|
})
|
||||||
|
|
||||||
let tooltip3 = new Tooltip({
|
let tooltip3 = new Tooltip({
|
||||||
object: circle3,
|
object: circle3,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
padding: 20,
|
padding: 20,
|
||||||
content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.'
|
content:
|
||||||
})
|
'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.'
|
||||||
|
})
|
||||||
|
|
||||||
let tooltip4 = new Tooltip({
|
let tooltip4 = new Tooltip({
|
||||||
object: circle4,
|
object: circle4,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
content: 'Stets ist die Sprache kecker als die Tat.',
|
content: 'Stets ist die Sprache kecker als die Tat.',
|
||||||
textStyle: {fill: 0x5251a3, fontSize: 20},
|
textStyle: { fill: 0x5251a3, fontSize: 20 },
|
||||||
fill: 0xa64f94,
|
fill: 0xa64f94,
|
||||||
fillAlpha: .8
|
fillAlpha: 0.8
|
||||||
})
|
})
|
||||||
|
|
||||||
let tooltip5 = new Tooltip({
|
let tooltip5 = new Tooltip({
|
||||||
object: circle5,
|
object: circle5,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.',
|
content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.',
|
||||||
@ -107,15 +113,14 @@ let tooltip5 = new Tooltip({
|
|||||||
offsetLeft: -160,
|
offsetLeft: -160,
|
||||||
offsetTop: 100,
|
offsetTop: 100,
|
||||||
delay: 3,
|
delay: 3,
|
||||||
textStyle: {fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2}
|
textStyle: { fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2 }
|
||||||
})
|
})
|
||||||
|
|
||||||
app.loadSprites([
|
app.loadSprites(
|
||||||
'./assets/tooltip-1.jpg',
|
['./assets/tooltip-1.jpg', './assets/tooltip-2.jpg'],
|
||||||
'./assets/tooltip-2.jpg'
|
(sprites) => {
|
||||||
], sprites => {
|
|
||||||
let sprite1 = sprites.get('./assets/tooltip-1.jpg')
|
let sprite1 = sprites.get('./assets/tooltip-1.jpg')
|
||||||
sprite1.scale.set(.33, .33)
|
sprite1.scale.set(0.33, 0.33)
|
||||||
let tooltip6 = new Tooltip({
|
let tooltip6 = new Tooltip({
|
||||||
object: circle6,
|
object: circle6,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
@ -123,7 +128,7 @@ app.loadSprites([
|
|||||||
})
|
})
|
||||||
|
|
||||||
let sprite2 = sprites.get('./assets/tooltip-2.jpg')
|
let sprite2 = sprites.get('./assets/tooltip-2.jpg')
|
||||||
sprite2.scale.set(.33, .33)
|
sprite2.scale.set(0.33, 0.33)
|
||||||
let tooltip7 = new Tooltip({
|
let tooltip7 = new Tooltip({
|
||||||
object: circle7,
|
object: circle7,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
@ -138,17 +143,22 @@ app.loadSprites([
|
|||||||
container: app.scene,
|
container: app.scene,
|
||||||
padding: 8,
|
padding: 8,
|
||||||
fill: 0xe7bc51,
|
fill: 0xe7bc51,
|
||||||
fillAlpha: .7,
|
fillAlpha: 0.7,
|
||||||
content: 'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.',
|
content:
|
||||||
textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
|
'Es reden und träumen die Menschen viel\nVon bessern künftigen Tagen,\nNach einem glücklichen goldenen Ziel\nSieht man sie rennen und jagen.',
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 22,
|
||||||
|
fontSize: 18,
|
||||||
|
fill: ['#843d39', '#ae4a4a', '#d7626c'],
|
||||||
|
fontStyle: 'italic'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4')
|
let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4')
|
||||||
|
|
||||||
texture1.baseTexture.on('loaded', e => {
|
texture1.baseTexture.on('loaded', (e) => {
|
||||||
|
|
||||||
let sprite3 = new PIXI.Sprite(texture1)
|
let sprite3 = new PIXI.Sprite(texture1)
|
||||||
sprite3.scale.set(.15, .15)
|
sprite3.scale.set(0.15, 0.15)
|
||||||
let tooltip9 = new Tooltip({
|
let tooltip9 = new Tooltip({
|
||||||
object: circle9,
|
object: circle9,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
@ -158,7 +168,7 @@ app.loadSprites([
|
|||||||
})
|
})
|
||||||
|
|
||||||
let sprite4 = new PIXI.Sprite(texture1)
|
let sprite4 = new PIXI.Sprite(texture1)
|
||||||
sprite4.scale.set(.1, .1)
|
sprite4.scale.set(0.1, 0.1)
|
||||||
let tooltip10 = new Tooltip({
|
let tooltip10 = new Tooltip({
|
||||||
object: circle10,
|
object: circle10,
|
||||||
container: app.scene,
|
container: app.scene,
|
||||||
@ -168,9 +178,12 @@ app.loadSprites([
|
|||||||
padding: 1
|
padding: 1
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}, {resolutionDependent: false})
|
},
|
||||||
|
{ resolutionDependent: false }
|
||||||
|
)
|
||||||
|
|
||||||
app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
|
app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
|
||||||
app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
|
app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/tooltip.png
Normal file
BIN
lib/pixi/tooltip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
@ -1,37 +1,39 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<title>PIXI Volatile</title>
|
<title>PIXI Volatile</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css" />
|
||||||
|
|
||||||
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
<script src="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>Volatile</h1>
|
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Volatile</h1>
|
||||||
<p>
|
<p>
|
||||||
The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a predetermined direction.
|
The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a
|
||||||
|
predetermined direction.
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at some volatile examples:</p><br />
|
<p>Let's look at some volatile examples:</p>
|
||||||
|
<br />
|
||||||
<canvas id="canvas" class="interactive"></canvas>
|
<canvas id="canvas" class="interactive"></canvas>
|
||||||
<p>
|
<p>What you should see: Buttons which starts an volatile animation.</p>
|
||||||
What you should see: Buttons which starts an volatile animation.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
const app = new PIXIApp({
|
const app = new PIXIApp({
|
||||||
view: canvas,
|
view: canvas,
|
||||||
width: 900,
|
width: 900,
|
||||||
height: 250
|
height: 250
|
||||||
}).setup().run()
|
})
|
||||||
|
.setup()
|
||||||
|
.run()
|
||||||
|
|
||||||
let button1 = new Button({
|
let button1 = new Button({
|
||||||
label: 'Volatile me!',
|
label: 'Volatile me!',
|
||||||
action: () => {
|
action: () => {
|
||||||
new Volatile({
|
new Volatile({
|
||||||
@ -40,15 +42,18 @@ let button1 = new Button({
|
|||||||
destroyOnComplete: false
|
destroyOnComplete: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
let button2 = new Button({
|
let button2 = new Button({
|
||||||
y: 60,
|
y: 60,
|
||||||
label: 'Volatile Text',
|
label: 'Volatile Text',
|
||||||
action: e => {
|
action: (e) => {
|
||||||
let text = new PIXI.Text('Gespeichert', Object.assign({}, button2.theme.textStyleLarge, {fill: button2.theme.primaryColor}))
|
let text = new PIXI.Text(
|
||||||
|
'Gespeichert',
|
||||||
|
Object.assign({}, button2.theme.textStyleLarge, { fill: button2.theme.primaryColor })
|
||||||
|
)
|
||||||
text.x = button2.width / 2
|
text.x = button2.width / 2
|
||||||
text.y = button2.y + (button2.height / 2) - (text.height / 2)
|
text.y = button2.y + button2.height / 2 - text.height / 2
|
||||||
app.scene.addChild(text)
|
app.scene.addChild(text)
|
||||||
new Volatile({
|
new Volatile({
|
||||||
object: text,
|
object: text,
|
||||||
@ -57,8 +62,9 @@ let button2 = new Button({
|
|||||||
distance: 400
|
distance: 400
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
app.scene.addChild(button1, button2)
|
app.scene.addChild(button1, button2)
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
BIN
lib/pixi/volatile.png
Normal file
BIN
lib/pixi/volatile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
@ -1,49 +1,42 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<title>Poppable Doctest</title>
|
<title>Poppable Doctest</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="./3rdparty/all.js"></script>
|
<script src="./3rdparty/all.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="page" onload="Doctest.run()">
|
<body id="page" onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Poppables</h1>
|
||||||
Poppables
|
|
||||||
</h1>
|
|
||||||
<p>
|
<p>
|
||||||
Poppables present information on demand in a given context. This
|
Poppables present information on demand in a given context. This is an abstract base class for Popup menus
|
||||||
is an abstract base class for Popup menus and other contextual information
|
and other contextual information like image highlights. It's main purpose is to ensure that only one
|
||||||
like image highlights. It's main purpose is to ensure that only
|
poppable at a time can be shown in a given context. Note that in an application multiple poppables can be
|
||||||
one poppable at a time can be shown in a given context. Note
|
shown in different context at the same time.
|
||||||
that in an application multiple poppables can be shown in different context
|
|
||||||
at the same time.
|
|
||||||
</p>
|
</p>
|
||||||
<p>Let's look at an example of a popup class. In this class the register
|
<p>
|
||||||
method is called by the constructor. The class also implements a close
|
Let's look at an example of a popup class. In this class the register method is called by the constructor.
|
||||||
method which is called if the second poppable is registered.
|
The class also implements a close method which is called if the second poppable is registered.
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
class ConcretePoppable extends Poppable {
|
class ConcretePoppable extends Poppable {
|
||||||
|
|
||||||
constructor(context) {
|
constructor(context) {
|
||||||
super()
|
super()
|
||||||
this.register(context)
|
this.register(context)
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
alert("closed")
|
alert('closed')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let context = window
|
let context = window
|
||||||
let a = new ConcretePoppable(context)
|
let a = new ConcretePoppable(context)
|
||||||
let b = new ConcretePoppable(context)
|
let b = new ConcretePoppable(context)
|
||||||
|
</script>
|
||||||
</script>
|
|
||||||
</p>
|
</p>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<body id="page" onload="Doctest.run()">
|
<body id="page" onload="Doctest.run()">
|
||||||
<h1>
|
<h1>
|
||||||
Popups
|
<a href="index.html">lib.</a>Popup
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
Popups present context information on demand at a specific place.
|
Popups present context information on demand at a specific place.
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1>
|
||||||
Popup Menus
|
<a href="index.html">lib.</a>Popup Menus
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
Popup menus are a simple but effective solution to the problem that context dependent commands like "Delete", "Show", "Open"
|
Popup menus are a simple but effective solution to the problem that context dependent commands like "Delete", "Show", "Open"
|
||||||
|
|||||||
136
lib/scatter.html
136
lib/scatter.html
@ -1,10 +1,10 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Scatter Doctest</title>
|
<title>Scatter Doctest</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
@ -14,10 +14,10 @@
|
|||||||
let context = debugCanvas.getContext('2d')
|
let context = debugCanvas.getContext('2d')
|
||||||
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
|
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
|
||||||
let stage = scatterContainer.polygon
|
let stage = scatterContainer.polygon
|
||||||
stage.draw(context, { stroke: "#0000FF"})
|
stage.draw(context, { stroke: '#0000FF' })
|
||||||
for(let scatter of scatterContainer.scatter.values()) {
|
for (let scatter of scatterContainer.scatter.values()) {
|
||||||
let polygon = scatter.polygon
|
let polygon = scatter.polygon
|
||||||
polygon.draw(context, { stroke: '#0000FF'})
|
polygon.draw(context, { stroke: '#0000FF' })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -25,41 +25,41 @@
|
|||||||
requestAnimationFrame((dt) => {
|
requestAnimationFrame((dt) => {
|
||||||
drawPolygons()
|
drawPolygons()
|
||||||
animatePolygons()
|
animatePolygons()
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Scatter</h1>
|
||||||
Scatter
|
<p>
|
||||||
</h1>
|
Scatter objects are UI elements that can be rotated, scaled or moved around, which typically leads to
|
||||||
<p>
|
"scattered" layouts. Scatters come in two flavours: DOM Scatters are working with arbitrary DOM elements,
|
||||||
Scatter objects are UI elements that can be rotated, scaled or moved around,
|
wheras PIXI Scatter work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here we
|
||||||
which typically leads to "scattered" layouts. Scatters come in two flavours:
|
describe the more basic DOM scatter.
|
||||||
DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter
|
</p>
|
||||||
work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here
|
<p>Let's look at an example.</p>
|
||||||
we describe the more basic DOM scatter.
|
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px">
|
||||||
</p>
|
|
||||||
<p>Let's look at an example.</p>
|
|
||||||
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
|
|
||||||
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
||||||
must also be positioned absolutely. -->
|
must also be positioned absolutely. -->
|
||||||
<img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
|
<img id="women" draggable="false" style="position: absolute" src="examples/women.jpeg" />
|
||||||
<img id="king" draggable="false" style="position: absolute;" src="examples/king.jpeg" />
|
<img id="king" draggable="false" style="position: absolute" src="examples/king.jpeg" />
|
||||||
|
|
||||||
<canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue;">
|
<canvas
|
||||||
|
id="debugCanvas"
|
||||||
|
height="280"
|
||||||
|
style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue"
|
||||||
|
>
|
||||||
Canvas not supported.
|
Canvas not supported.
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
let dx = 44
|
let dx = 44
|
||||||
|
|
||||||
let app = new App()
|
let app = new App()
|
||||||
let scatterContainer = new DOMScatterContainer(main)
|
let scatterContainer = new DOMScatterContainer(main)
|
||||||
let angle = 0 // 15
|
let angle = 0 // 15
|
||||||
for(let key of ['women', 'king']) {
|
for (let key of ['women', 'king']) {
|
||||||
let image = document.getElementById(key)
|
let image = document.getElementById(key)
|
||||||
// The DOMScatter needs initial width and height. Therefore we
|
// The DOMScatter needs initial width and height. Therefore we
|
||||||
// define the scatter when the image size is known, i.e. after loading...
|
// define the scatter when the image size is known, i.e. after loading...
|
||||||
@ -72,47 +72,51 @@ for(let key of ['women', 'king']) {
|
|||||||
rotationDegrees: angle,
|
rotationDegrees: angle,
|
||||||
throwVisibility: 88,
|
throwVisibility: 88,
|
||||||
minScale: 0.5,
|
minScale: 0.5,
|
||||||
maxScale: 1.5})
|
maxScale: 1.5
|
||||||
|
})
|
||||||
dx += 300
|
dx += 300
|
||||||
angle = -angle
|
angle = -angle
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
app.run()
|
app.run()
|
||||||
animatePolygons()
|
animatePolygons()
|
||||||
</script>
|
</script>
|
||||||
<h1>
|
<h1>Interactive Content</h1>
|
||||||
Interactive Content
|
<p>
|
||||||
</h1>
|
Scatter objects may contain interactive HTML structures. There is one major flag that allows to simulate
|
||||||
<p>
|
click events by using taps. If the scatter detects a tap it looks for clickable elements under or nearby the
|
||||||
Scatter objects may contain interactive HTML structures. There is one major flag that allows
|
event position and calls the click handler. Thus gestures can be disambiguated as moves, zooms. or taps.
|
||||||
to simulate click events by using taps. If the scatter detects a tap it looks for clickable
|
Note that on touch devices you can tap beside the object if you use an object that implements the
|
||||||
elements under or nearby the event position and calls the click handler. Thus gestures
|
ITapDelegate interface. An ITapDelegate allowes a distance that can be configured by allowClickDistance. The
|
||||||
can be disambiguated as moves, zooms. or taps.
|
default value is 44px but here we use 88px.
|
||||||
|
</p>
|
||||||
Note that on touch devices you can tap beside the object if you use an object that implements the ITapDelegate interface.
|
|
||||||
An ITapDelegate allowes a distance that can be configured by allowClickDistance. The default value is 44px but here we
|
|
||||||
use 88px.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
|
|
||||||
|
|
||||||
|
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px">
|
||||||
<div id="interactiveContent">
|
<div id="interactiveContent">
|
||||||
<img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
|
<img draggable="false" style="position: absolute" src="examples/women.jpeg" />
|
||||||
<a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
|
<a style="position: absolute; top: 10px; right: 10px; color: white" href="javascript:alert('test link')"
|
||||||
<div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
|
>A Link</a
|
||||||
<svg onclick="alert('svg clicked')" style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
>
|
||||||
|
<div onclick="alert('div clicked')" style="position: absolute; top: 30px; right: 10px; color: white">
|
||||||
|
A Div with click handler
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
onclick="alert('svg clicked')"
|
||||||
|
style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
>
|
||||||
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
||||||
<circle cx="50" cy="32" r="7" fill="white" />
|
<circle cx="50" cy="32" r="7" fill="white" />
|
||||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
|
<script class="doctest">
|
||||||
let contentContainer = new DOMScatterContainer(contentExample)
|
let contentContainer = new DOMScatterContainer(contentExample)
|
||||||
|
|
||||||
let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88})
|
let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88 })
|
||||||
new DOMScatter(interactiveContent, contentContainer, {
|
new DOMScatter(interactiveContent, contentContainer, {
|
||||||
x: 44,
|
x: 44,
|
||||||
y: 44,
|
y: 44,
|
||||||
@ -121,8 +125,8 @@ use 88px.
|
|||||||
tapDelegate,
|
tapDelegate,
|
||||||
throwVisibility: 88,
|
throwVisibility: 88,
|
||||||
minScale: 0.5,
|
minScale: 0.5,
|
||||||
maxScale: 1.5})
|
maxScale: 1.5
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run(); loaded()" >
|
<body onload="Doctest.run(); loaded()" >
|
||||||
<h1>
|
<h1>
|
||||||
Functional Tests
|
<a href="index.html">lib.</a>Functional Tests
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
If you want to test the UI in all functional aspects, it'is important to be able
|
If you want to test the UI in all functional aspects, it'is important to be able
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 270 KiB |
117
lib/uitest.html
117
lib/uitest.html
@ -1,91 +1,96 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>UITest Doctest</title>
|
<title>UITest Doctest</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()" >
|
<body onload="Doctest.run()">
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>UITest</h1>
|
||||||
UITest
|
<p>
|
||||||
</h1>
|
Testing the user interface (UI) of an application is a critical part of the software development lifecycle.
|
||||||
<p>
|
Most end users focus on the usability and aesthetics of the applications they interact with and are blind to
|
||||||
Testing the user interface (UI) of an application is a critical part of the software development lifecycle. Most end users focus on the usability and aesthetics of the applications they interact with and are blind to the underlying source code and other technical aspects that make those apps functional. A poorly designed UI will undoubtedly lead to unhappy customers, so it’s important to test early and often to prevent as many bugs as possible from reaching the UI level.
|
the underlying source code and other technical aspects that make those apps functional. A poorly designed UI
|
||||||
<br><br>
|
will undoubtedly lead to unhappy customers, so it’s important to test early and often to prevent as many
|
||||||
Graphical user interface (GUI) testing is the process of testing an application’s visual elements to ensure the images and other features that are visible to the customer behave and look as expected. This article describes what GUI testing is, its importance, and what features your GUI testing tools should have to help you ensure proper test coverage.
|
bugs as possible from reaching the UI level.
|
||||||
</p>
|
<br /><br />
|
||||||
<p>Let's look at an example.</p>
|
Graphical user interface (GUI) testing is the process of testing an application’s visual elements to ensure
|
||||||
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 380px;">
|
the images and other features that are visible to the customer behave and look as expected. This article
|
||||||
|
describes what GUI testing is, its importance, and what features your GUI testing tools should have to help
|
||||||
|
you ensure proper test coverage.
|
||||||
|
</p>
|
||||||
|
<p>Let's look at an example.</p>
|
||||||
|
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 380px">
|
||||||
<button id="button1" type="button" onclick="add1();">Click to add 1</button>
|
<button id="button1" type="button" onclick="add1();">Click to add 1</button>
|
||||||
<input id="input1" type="text" value="0">
|
<input id="input1" type="text" value="0" />
|
||||||
<hr>
|
<hr />
|
||||||
<button id="button2" type="button" onclick="add2();">Click to add 1</button>
|
<button id="button2" type="button" onclick="add2();">Click to add 1</button>
|
||||||
<input id="input2" type="text" value="0">
|
<input id="input2" type="text" value="0" />
|
||||||
<hr>
|
<hr />
|
||||||
<button id="button3" type="button" onclick="add3();">Click to add 1</button>
|
<button id="button3" type="button" onclick="add3();">Click to add 1</button>
|
||||||
<input id="input3" type="text" value="0">
|
<input id="input3" type="text" value="0" />
|
||||||
<hr>
|
<hr />
|
||||||
<svg width="200" height="70">
|
<svg width="200" height="70">
|
||||||
<circle id="circle1" cx="40" cy="40" r="30" fill="orange" onclick="changeColor(this);" />
|
<circle id="circle1" cx="40" cy="40" r="30" fill="orange" onclick="changeColor(this);" />
|
||||||
</svg>
|
</svg>
|
||||||
<hr>
|
<hr />
|
||||||
<svg width="200" height="70">
|
<svg width="200" height="70">
|
||||||
<circle id="circle2" cx="40" cy="40" r="30" fill="blue" onclick="changeColor(this);" />
|
<circle id="circle2" cx="40" cy="40" r="30" fill="blue" onclick="changeColor(this);" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
function add1() {
|
function add1() {
|
||||||
let value = parseInt(input1.value)
|
let value = parseInt(input1.value)
|
||||||
input1.value = ++value
|
input1.value = ++value
|
||||||
}
|
}
|
||||||
|
|
||||||
function add2() {
|
function add2() {
|
||||||
let value = parseInt(input2.value)
|
let value = parseInt(input2.value)
|
||||||
input2.value = ++value
|
input2.value = ++value
|
||||||
}
|
}
|
||||||
|
|
||||||
function add3() {
|
function add3() {
|
||||||
let value = parseInt(input3.value)
|
let value = parseInt(input3.value)
|
||||||
input3.value = ++value
|
input3.value = ++value
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeColor(elem) {
|
function changeColor(elem) {
|
||||||
const letters = '0123456789ABCDEF'
|
const letters = '0123456789ABCDEF'
|
||||||
let color = '#'
|
let color = '#'
|
||||||
for (var i = 0; i < 6; i++) {
|
for (var i = 0; i < 6; i++) {
|
||||||
color += letters[Math.floor(Math.random() * 16)]
|
color += letters[Math.floor(Math.random() * 16)]
|
||||||
}
|
}
|
||||||
elem.setAttribute('fill', color)
|
elem.setAttribute('fill', color)
|
||||||
}
|
}
|
||||||
|
|
||||||
const test1 = new UITest()
|
const test1 = new UITest()
|
||||||
test1.tap(button1, 1, {eventType: 'click'})
|
test1.tap(button1, 1, { eventType: 'click' })
|
||||||
test1.tap(button1, 2, {eventType: 'click'})
|
test1.tap(button1, 2, { eventType: 'click' })
|
||||||
test1.tap(button1, 5, {eventType: 'click'})
|
test1.tap(button1, 5, { eventType: 'click' })
|
||||||
test1.start()
|
test1.start()
|
||||||
|
|
||||||
const test2 = new UITest({repeat: -1})
|
const test2 = new UITest({ repeat: -1 })
|
||||||
test2.tap(button2, {eventType: 'click'})
|
test2.tap(button2, { eventType: 'click' })
|
||||||
test2.start()
|
test2.start()
|
||||||
|
|
||||||
const test3 = new UITest({repeat: -1, timeScale: 20})
|
const test3 = new UITest({ repeat: -1, timeScale: 20 })
|
||||||
test3.tap(button3, {eventType: 'click'})
|
test3.tap(button3, { eventType: 'click' })
|
||||||
test3.start()
|
test3.start()
|
||||||
|
|
||||||
const test4 = new UITest({repeat: -1})
|
const test4 = new UITest({ repeat: -1 })
|
||||||
test4.tap('#circle1', {eventType: 'click'})
|
test4.tap('#circle1', { eventType: 'click' })
|
||||||
test4.start()
|
test4.start()
|
||||||
|
|
||||||
const test5 = new UITest({onComplete: () => console.log('completed')})
|
const test5 = new UITest({ onComplete: () => console.log('completed') })
|
||||||
for (let i = 1; i < 6; i++) {
|
for (let i = 1; i < 6; i++) {
|
||||||
test5.tap('#circle2', i, {eventType: 'click'})
|
test5.tap('#circle2', i, { eventType: 'click' })
|
||||||
}
|
}
|
||||||
test5.start()
|
test5.start()
|
||||||
</script>
|
</script>
|
||||||
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
218
lib/utils.html
218
lib/utils.html
@ -1,44 +1,35 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Doctests</title>
|
<title>Doctests</title>
|
||||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||||
<link rel="stylesheet" href="../css/doctest.css">
|
<link rel="stylesheet" href="../css/doctest.css" />
|
||||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../dist/iwmlib.js"></script>
|
<script src="../dist/iwmlib.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="Doctest.run()">
|
<body onload="Doctest.run()">
|
||||||
<main>
|
<main>
|
||||||
<h1>
|
<h1><a href="index.html">lib.</a>Utils</h1>
|
||||||
Utils
|
<p>
|
||||||
</h1>
|
Utility functions can be used across modules. To avoid name conflicts most of them are defined as static
|
||||||
<p>
|
class functions (i.e. the class mainly serves as a namespace). Typically this class name is in the
|
||||||
Utility functions can be used across modules. To avoid name conflicts most
|
plural, e.g. "Points", "Dates" to ensure that existing class names like "Point", "Date" are not in
|
||||||
of them are defined as static class functions (i.e. the class mainly serves
|
conflict with the namespace.
|
||||||
as a namespace). Typically this class name is in the plural, e.g. "Points", "Dates" to ensure that
|
</p>
|
||||||
existing class names like "Point", "Date" are not in conflict with the namespace.
|
<h2>Cycle</h2>
|
||||||
</p>
|
<p>Cycles simplify to switch between values in a cyclic way.</p>
|
||||||
<h2>
|
|
||||||
Cycle
|
|
||||||
</h2>
|
|
||||||
<p>Cycles simplify to switch between values in a cyclic way.</p>
|
|
||||||
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
|
<script class="doctest">
|
||||||
let cycle = new Cycle(1, 2, 3)
|
let cycle = new Cycle(1, 2, 3)
|
||||||
Doctest.expect(cycle.next(), 1)
|
Doctest.expect(cycle.next(), 1)
|
||||||
Doctest.expect(cycle.next(), 2)
|
Doctest.expect(cycle.next(), 2)
|
||||||
Doctest.expect(cycle.next(), 3)
|
Doctest.expect(cycle.next(), 3)
|
||||||
Doctest.expect(cycle.next(), 1)
|
Doctest.expect(cycle.next(), 1)
|
||||||
|
</script>
|
||||||
|
|
||||||
</script>
|
<h2>Dates</h2>
|
||||||
|
<script class="doctest">
|
||||||
<h2>
|
|
||||||
Dates
|
|
||||||
</h2>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
let feb1900 = new Date(1900, 1, 1)
|
let feb1900 = new Date(1900, 1, 1)
|
||||||
Doctest.expect(Dates.daysInMonth(feb1900), 28)
|
Doctest.expect(Dates.daysInMonth(feb1900), 28)
|
||||||
// 1900 was no leap year
|
// 1900 was no leap year
|
||||||
@ -48,45 +39,35 @@ existing class names like "Point", "Date" are not in conflict with the namespace
|
|||||||
|
|
||||||
let mar1913 = new Date(1913, 2, 1)
|
let mar1913 = new Date(1913, 2, 1)
|
||||||
Doctest.expect(Dates.daysInMonth(mar1913), 31)
|
Doctest.expect(Dates.daysInMonth(mar1913), 31)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
A tricky problem is to iterate over years, months, and days to label timelines
|
A tricky problem is to iterate over years, months, and days to label timelines and calendars in a
|
||||||
and calendars in a consistent way. This can lead to problems with standard
|
consistent way. This can lead to problems with standard (CET) and summer time (CEST). To illustrate the
|
||||||
(CET) and summer time (CEST).
|
problem look at the following example. Although march has 31 days the formatted UTC string shows "30.3".
|
||||||
|
Also note that the standard new Date() constructor uses a zero-based month:
|
||||||
To illustrate the problem look at the following example. Although march has 31 days
|
</p>
|
||||||
the formatted UTC string shows "30.3". Also note that the standard
|
<script class="doctest">
|
||||||
new Date() constructor uses a zero-based month:
|
let format = { timeZone: 'UTC' }
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
let format = { timeZone: 'UTC'}
|
|
||||||
let lastMar1913 = new Date(1913, 2, 31)
|
let lastMar1913 = new Date(1913, 2, 31)
|
||||||
Doctest.expect(lastMar1913.toLocaleDateString("de", format), "30.3.1913")
|
Doctest.expect(lastMar1913.toLocaleDateString('de', format), '30.3.1913')
|
||||||
|
</script>
|
||||||
</script>
|
<p>The following iterators guarantee that correct labels are generated:</p>
|
||||||
<p>
|
|
||||||
The following iterators guarantee that correct labels are generated:</p>
|
|
||||||
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
|
<script class="doctest">
|
||||||
let lastDay = null
|
let lastDay = null
|
||||||
for(let day of Dates.iterDays(mar1913)) {
|
for (let day of Dates.iterDays(mar1913)) {
|
||||||
lastDay = day
|
lastDay = day
|
||||||
}
|
}
|
||||||
Doctest.expect(lastDay.toLocaleDateString("de", format), "31.3.1913")
|
Doctest.expect(lastDay.toLocaleDateString('de', format), '31.3.1913')
|
||||||
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<h2>
|
|
||||||
Sets
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Unfortunately the common set operations of other languages are missing in JavaScript. Therefore we use
|
|
||||||
a Sets helper class with static methods:
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
|
|
||||||
|
<h2>Sets</h2>
|
||||||
|
<p>
|
||||||
|
Unfortunately the common set operations of other languages are missing in JavaScript. Therefore we use a
|
||||||
|
Sets helper class with static methods:
|
||||||
|
</p>
|
||||||
|
<script class="doctest">
|
||||||
let set1 = new Set([1, 2, 3])
|
let set1 = new Set([1, 2, 3])
|
||||||
let set2 = new Set([2, 3, 4, 5])
|
let set2 = new Set([2, 3, 4, 5])
|
||||||
let set3 = new Set([2, 3, 6])
|
let set3 = new Set([2, 3, 6])
|
||||||
@ -94,54 +75,62 @@ The following iterators guarantee that correct labels are generated:</p>
|
|||||||
Doctest.expect(Array.from(Sets.intersect(set1, set2, set3)), [2, 3])
|
Doctest.expect(Array.from(Sets.intersect(set1, set2, set3)), [2, 3])
|
||||||
Doctest.expect(Array.from(Sets.union(set1, set2, set3)), [1, 2, 3, 4, 5, 6])
|
Doctest.expect(Array.from(Sets.union(set1, set2, set3)), [1, 2, 3, 4, 5, 6])
|
||||||
Doctest.expect(Array.from(Sets.difference(set2, set1, set3)), [4, 5])
|
Doctest.expect(Array.from(Sets.difference(set2, set1, set3)), [4, 5])
|
||||||
|
</script>
|
||||||
</script>
|
<h2>Polygon</h2>
|
||||||
<h2>
|
<p>
|
||||||
Polygon
|
An intersection of polygons is needed to compute the overlap of rotated rectangles. We are using the
|
||||||
</h2>
|
library <a href="https://gist.github.com/cwleonard/e124d63238bda7a3cbfa">jspolygon.js</a> but provide a
|
||||||
<p>An intersection of polygons is needed to compute the overlap of rotated rectangles.
|
more convenient API that is compatible with arrays of absolute points.
|
||||||
We are using the library <a href="https://gist.github.com/cwleonard/e124d63238bda7a3cbfa">jspolygon.js</a> but provide a more convenient API that
|
</p>
|
||||||
is compatible with arrays of absolute points.
|
<p>
|
||||||
</p>
|
To detect intersection with another Polygon object, the instance method uses the Separating Axis
|
||||||
<p>To detect intersection with another Polygon object, the instance
|
Theorem. It returns false if there is no intersection, or an object if there is. The object contains 2
|
||||||
method uses the Separating Axis Theorem. It returns false
|
fields, overlap and axis. Moving the other polygon by overlap on axis will get the polygons out of
|
||||||
if there is no intersection, or an object if there is. The object
|
intersection.
|
||||||
contains 2 fields, overlap and axis. Moving the other polygon by overlap
|
</p>
|
||||||
on axis will get the polygons out of intersection.
|
<p>
|
||||||
</p>
|
The following triangles show an overlap. Moving the triangle along the red line would remove the
|
||||||
<p>The following triangles show an overlap. Moving the triangle along the red line would remove the overlap.
|
overlap.
|
||||||
</p>
|
</p>
|
||||||
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
|
||||||
<script class="doctest">
|
<script class="doctest">
|
||||||
let context = canvas.getContext("2d")
|
let context = canvas.getContext('2d')
|
||||||
// The jspolygon syntax
|
// The jspolygon syntax
|
||||||
let a = Polygon.fromPoints([{ x: 20, y: 20}, { x: 100, y: 100}, { x: 150, y: 50}])
|
let a = Polygon.fromPoints([
|
||||||
|
{ x: 20, y: 20 },
|
||||||
|
{ x: 100, y: 100 },
|
||||||
|
{ x: 150, y: 50 }
|
||||||
|
])
|
||||||
a.draw(context)
|
a.draw(context)
|
||||||
let b = Polygon.fromPoints([{x: 70, y: 50}, {x: 150, y: 10}, {x: 200, y: 70}])
|
let b = Polygon.fromPoints([
|
||||||
|
{ x: 70, y: 50 },
|
||||||
|
{ x: 150, y: 10 },
|
||||||
|
{ x: 200, y: 70 }
|
||||||
|
])
|
||||||
b.draw(context)
|
b.draw(context)
|
||||||
|
|
||||||
context.strokeStyle = '#ff0000'
|
context.strokeStyle = '#ff0000'
|
||||||
context.beginPath()
|
context.beginPath()
|
||||||
let result = a.intersectsWith(b)
|
let result = a.intersectsWith(b)
|
||||||
if (result != false) {
|
if (result != false) {
|
||||||
let {overlap, axis} = result
|
let { overlap, axis } = result
|
||||||
context.moveTo(b.center.x, b.center.y)
|
context.moveTo(b.center.x, b.center.y)
|
||||||
let target = Points.add(b.center, { x: overlap * axis.x, y: overlap * axis.y })
|
let target = Points.add(b.center, { x: overlap * axis.x, y: overlap * axis.y })
|
||||||
context.lineTo(target.x, target.y)
|
context.lineTo(target.x, target.y)
|
||||||
}
|
}
|
||||||
context.stroke()
|
context.stroke()
|
||||||
|
</script>
|
||||||
</script>
|
<h2>Low Pass Filter</h2>
|
||||||
<h2>
|
<p>
|
||||||
Low Pass Filter
|
Low Pass Filter muffles fast (high-frequency) changes to the signal. For more information visit the
|
||||||
</h2>
|
<a href="http://en.wikipedia.org/wiki/Low-pass_filter">wikipedia article</a>.
|
||||||
<p>
|
</p>
|
||||||
Low Pass Filter muffles fast (high-frequency) changes to the signal.
|
<script class="doctest">
|
||||||
For more information visit the <a href="http://en.wikipedia.org/wiki/Low-pass_filter">wikipedia article</a>.
|
|
||||||
</p>
|
|
||||||
<script class="doctest">
|
|
||||||
let lpf = new LowPassFilter(0.5)
|
let lpf = new LowPassFilter(0.5)
|
||||||
Doctest.expect(lpf.smoothArray([10,8,9,10,12,8,50,10,12,8]), [10,9,9,10,11,9,30,20,16,12])
|
Doctest.expect(
|
||||||
|
lpf.smoothArray([10, 8, 9, 10, 12, 8, 50, 10, 12, 8]),
|
||||||
|
[10, 9, 9, 10, 11, 9, 30, 20, 16, 12]
|
||||||
|
)
|
||||||
|
|
||||||
Doctest.expect(lpf.next(20), 10.0)
|
Doctest.expect(lpf.next(20), 10.0)
|
||||||
Doctest.expect(lpf.next(20), 12.5)
|
Doctest.expect(lpf.next(20), 12.5)
|
||||||
@ -149,25 +138,26 @@ is compatible with arrays of absolute points.
|
|||||||
Doctest.expect(lpf.next(20), 15.78125)
|
Doctest.expect(lpf.next(20), 15.78125)
|
||||||
|
|
||||||
lpf = new LowPassFilter(0.2)
|
lpf = new LowPassFilter(0.2)
|
||||||
lpf.setup([10,10,10,10,10,10,10,10,10,10])
|
lpf.setup([10, 10, 10, 10, 10, 10, 10, 10, 10, 10])
|
||||||
Doctest.expect(lpf.next(20), 12.0)
|
Doctest.expect(lpf.next(20), 12.0)
|
||||||
Doctest.expect(lpf.next(10), 10.32)
|
Doctest.expect(lpf.next(10), 10.32)
|
||||||
</script>
|
</script>
|
||||||
<h2>
|
<h2>References</h2>
|
||||||
References
|
<ul>
|
||||||
</h2>
|
<li><a href="https://en.wikipedia.org/wiki/Circular_buffer"> Circular buffer </a></li>
|
||||||
<ul>
|
<li>
|
||||||
<li><a href="https://en.wikipedia.org/wiki/Circular_buffer">
|
<a href="http://stackoverflow.com/questions/20867562/create-a-date-object-with-cet-timezone">
|
||||||
Circular buffer
|
|
||||||
</a></li>
|
|
||||||
<li><a href="http://stackoverflow.com/questions/20867562/create-a-date-object-with-cet-timezone">
|
|
||||||
Create a Date object with CET timezone
|
Create a Date object with CET timezone
|
||||||
</a></li>
|
</a>
|
||||||
<li> <a href="http://stackoverflow.com/questions/315760/what-is-the-best-way-to-determine-the-number-of-days-in-a-month-with-javascript">
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="http://stackoverflow.com/questions/315760/what-is-the-best-way-to-determine-the-number-of-days-in-a-month-with-javascript"
|
||||||
|
>
|
||||||
What is the best way to determine the number of days in a month with javascript?
|
What is the best way to determine the number of days in a month with javascript?
|
||||||
</a></li>
|
</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</main>
|
||||||
</main>
|
</body>
|
||||||
</body>
|
</html>
|
||||||
|
|||||||
18689
package-lock.json
generated
18689
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@ -2,7 +2,7 @@
|
|||||||
"name": "iwmlib",
|
"name": "iwmlib",
|
||||||
"version": "2.0.0-beta.1",
|
"version": "2.0.0-beta.1",
|
||||||
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
"description": "An Open Source library for multi-touch, WebGL powered applications.",
|
||||||
"main": "index.js",
|
"main": "browser/main.js",
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "examples"
|
"example": "examples"
|
||||||
},
|
},
|
||||||
@ -45,7 +45,15 @@
|
|||||||
"stylelint-config-standard": "^28.0.0"
|
"stylelint-config-standard": "^28.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"electron": "^16.2.8",
|
||||||
|
"electron-localshortcut": "^3.1.0",
|
||||||
|
"electron-packager": "^13.1.1",
|
||||||
|
"electron-prebuilt": "^1.4.13",
|
||||||
|
"electron-prebuilt-compile": "^4.0.0",
|
||||||
|
"electron-process-manager": "^0.7.0",
|
||||||
|
"electron-rebuild": "^1.8.5",
|
||||||
"gsap": "^2.1.3",
|
"gsap": "^2.1.3",
|
||||||
|
"html": "^1.0.0",
|
||||||
"hammerjs": "^2.0.8",
|
"hammerjs": "^2.0.8",
|
||||||
"optimal-select": "^4.0.1",
|
"optimal-select": "^4.0.1",
|
||||||
"pixi-compressed-textures": "^2.0.5",
|
"pixi-compressed-textures": "^2.0.5",
|
||||||
|
|||||||
1
site/.python-version
Normal file
1
site/.python-version
Normal file
@ -0,0 +1 @@
|
|||||||
|
3.10.1
|
||||||
45
site/main.py
Normal file
45
site/main.py
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import pathlib
|
||||||
|
from ssg.tags import *
|
||||||
|
from ssg.utils import *
|
||||||
|
from markup import iwmlibdoc_document, sitemap_main
|
||||||
|
|
||||||
|
src = pathlib.Path('..')
|
||||||
|
content = src / 'lib'
|
||||||
|
|
||||||
|
async def main(path:pathlib.Path):
|
||||||
|
"""Typical main program, setting up content publishers, defining the site structure and
|
||||||
|
typical order of generating initial pages and observing subsequent changes.
|
||||||
|
"""
|
||||||
|
|
||||||
|
# 2. Build the site structure with nested context managers
|
||||||
|
with site('iwmlibdoc', path=path, doc=iwmlibdoc_document) as docsite:
|
||||||
|
# If we use symlinks the css and image files can be modified without
|
||||||
|
# notifications.
|
||||||
|
docsite.symlink(src, 'css')
|
||||||
|
docsite.symlink(src, 'assets')
|
||||||
|
docsite.symlink(src, 'dist')
|
||||||
|
# structures can be created in a loop to ensure indentical hierarchies
|
||||||
|
|
||||||
|
sitemap = page('sitemap.html',
|
||||||
|
title='Sitemap',
|
||||||
|
main=sitemap_main)
|
||||||
|
static_folder(content)
|
||||||
|
|
||||||
|
# 3. Start generation.
|
||||||
|
docsite.generate()
|
||||||
|
|
||||||
|
#print(docsite)
|
||||||
|
# 4. Let's check whether all links are working...
|
||||||
|
# site.validate()
|
||||||
|
|
||||||
|
await docsite.observe_filesystem(timeout=120)
|
||||||
|
|
||||||
|
def run():
|
||||||
|
default = pathlib.Path('.') / 'dist'
|
||||||
|
if default.exists():
|
||||||
|
shutil.rmtree(default)
|
||||||
|
default.mkdir(parents=True)
|
||||||
|
asyncio.run(main(default))
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
run()
|
||||||
107
site/markup.py
Normal file
107
site/markup.py
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
|
||||||
|
from typing import Dict, List
|
||||||
|
import ssg.document
|
||||||
|
import ssg.utils
|
||||||
|
from ssg.tags import *
|
||||||
|
from dominate.tags import *
|
||||||
|
|
||||||
|
def iwmlibdoc_document(context):
|
||||||
|
doc = ssg.document.document(title=context.title)
|
||||||
|
with doc.head:
|
||||||
|
meta(charset="utf-8")
|
||||||
|
attr(lang=context.language())
|
||||||
|
if isinstance(context, static_page):
|
||||||
|
for tag in context.soup.find_all('link'):
|
||||||
|
if href := tag.attrs.get('href'):
|
||||||
|
link(rel="stylesheet", href=href)
|
||||||
|
|
||||||
|
for tag in context.soup.find_all('script'):
|
||||||
|
if src := tag.attrs.get('src'):
|
||||||
|
script(src=src)
|
||||||
|
else:
|
||||||
|
link(rel="stylesheet", href= "css/doctest.css")
|
||||||
|
link(rel="stylesheet", href= "css/demo.css")
|
||||||
|
|
||||||
|
with doc.body:
|
||||||
|
site_navigation(context)
|
||||||
|
ssg.document.placeholder(key='main', alternatives=['body']) # here goes the special content part
|
||||||
|
site_footer(context)
|
||||||
|
return doc
|
||||||
|
|
||||||
|
def site_navigation(context):
|
||||||
|
mainmenu(context)
|
||||||
|
br()
|
||||||
|
br()
|
||||||
|
breadcrumb(context)
|
||||||
|
hr()
|
||||||
|
|
||||||
|
|
||||||
|
def level_menu(context, root):
|
||||||
|
for name, child in sorted(context.named_children.items()):
|
||||||
|
if child.folderish():
|
||||||
|
if index := child.named_children.get('index.html'):
|
||||||
|
url = '.' + index.url(relative=root)
|
||||||
|
yield dict(url=url, title=index.title)
|
||||||
|
|
||||||
|
if child.title == name:
|
||||||
|
continue
|
||||||
|
if name.endswith('.html'):
|
||||||
|
url = '.' + child.url(relative=root)
|
||||||
|
yield dict(url=url, title=child.title)
|
||||||
|
|
||||||
|
|
||||||
|
def main_menu(context):
|
||||||
|
root = context.menuroot()
|
||||||
|
if context == root:
|
||||||
|
for info in level_menu(root, root):
|
||||||
|
yield info
|
||||||
|
else:
|
||||||
|
yield dict(url= context.up() + 'sitemap.html', title="Home")
|
||||||
|
for info in level_menu(context.parent, root):
|
||||||
|
yield info
|
||||||
|
|
||||||
|
@nav(cls="breadcrumb")
|
||||||
|
def breadcrumb(context):
|
||||||
|
"""
|
||||||
|
{% macro breadcrumb(context) -%}
|
||||||
|
<nav class="breadcrumb">
|
||||||
|
{% for info in context.breadcrumb() %}
|
||||||
|
{% if info.url %}
|
||||||
|
<a href="{{info.url}}">{{info.title}}</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="#"><u>{{info.title}}</u></a>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</nav>
|
||||||
|
{% endmacro %}
|
||||||
|
"""
|
||||||
|
for info in context.breadcrumb():
|
||||||
|
if url := info.get('url'):
|
||||||
|
a(info['title'], href=url)
|
||||||
|
else:
|
||||||
|
a(info['title'], href='#')
|
||||||
|
|
||||||
|
@nav(cls="mainmenu")
|
||||||
|
def mainmenu(context:ssg.generator):
|
||||||
|
for info in main_menu(context):
|
||||||
|
if url := info.get('url'):
|
||||||
|
a(info['title'], href=url)
|
||||||
|
else:
|
||||||
|
a(info['title'], href='#')
|
||||||
|
|
||||||
|
@main
|
||||||
|
def sitemap_main(context:ssg.generator):
|
||||||
|
root = context.menuroot()
|
||||||
|
h3("Sitemap")
|
||||||
|
with ul(id="sitemap"):
|
||||||
|
for info in getsite().page_infos(relative=root):
|
||||||
|
url = info['url']
|
||||||
|
if url.endswith('.html'):
|
||||||
|
li(a(info['title'], href=url))
|
||||||
|
|
||||||
|
@footer
|
||||||
|
def site_footer(context):
|
||||||
|
hr()
|
||||||
|
date = ssg.utils.now('en')
|
||||||
|
p(f'Generated by IWMSite {date}')
|
||||||
|
|
||||||
21
site/requirements.txt
Normal file
21
site/requirements.txt
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
aiohttp
|
||||||
|
dominate
|
||||||
|
pytest
|
||||||
|
Babel
|
||||||
|
mypy
|
||||||
|
beautifulsoup4
|
||||||
|
python-socketio
|
||||||
|
requests
|
||||||
|
watchdog
|
||||||
|
|
||||||
|
# streamlit apps
|
||||||
|
streamlit==1.4.0
|
||||||
|
openpyxl
|
||||||
|
plotly
|
||||||
|
fpdf
|
||||||
|
|
||||||
|
# architecture overview
|
||||||
|
diagrams
|
||||||
|
|
||||||
|
# ssg
|
||||||
|
git+ssh://git@gitea.iwm-tuebingen.de/Medienentwicklung/iwmsite.git@master
|
||||||
Loading…
Reference in New Issue
Block a user