IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added minimal navigation breadcrumbs to doctests.

Browse Source
This commit is contained in:
Uwe Oestermeier
2023-05-09 13:25:39 +02:00
parent 13e0473328
commit 9501264f08
71 changed files with 5700 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/app.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Application</h1>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Application</h1>
<p>
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
lib/pixi/application.html
+32 -28
View File
@@ -1,36 +1,40 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIXI.Application Doctest</title>
<title>PIXI.Application Doctest</title>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../../css/doctest.css" />
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body>
<h1>Vanilla PIXI.Application</h1>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script>
const app = new PIXI.Application({
width: 450,
height: 150
})
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Vanilla PIXI.Application</h1>
// Add the view to the DOM
document.body.appendChild(app.view)
<script>
const app = new PIXI.Application({
width: 450,
height: 150
})
// ex, add display objects
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
sprite.scale.set(.3, .3)
app.stage.addChild(sprite)
// Add the view to the DOM
document.body.appendChild(app.view)
sprite.interactive = true
sprite.buttonMode = true
sprite.on('click', e => {
console.log('sprite clicked')
})
</script>
</body>
// ex, add display objects
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
sprite.scale.set(0.3, 0.3)
app.stage.addChild(sprite)
sprite.interactive = true
sprite.buttonMode = true
sprite.on('click', (e) => {
console.log('sprite clicked')
})
</script>
</body>
</html>
lib/pixi/badge.html
+7 -23
View File
@@ -5,10 +5,7 @@
<title>PIXI Badge</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" />
<script src="../3rdparty/highlight/highlight.pack.js"></script>
@@ -18,16 +15,12 @@
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Badge</h1>
<p>
Small and adaptive tag for adding context to just about any content.
</p>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Badge</h1>
<p>Small and adaptive tag for adding context to just about any content.</p>
<p>Let's look at some badge examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Badges, badges, badges...
</p>
<p>What you should see: Badges, badges, badges...</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
@@ -120,13 +113,11 @@
fill: 0xfe9727
})
let sprite1 = new PIXI.Sprite(
PIXI.Texture.from('./assets/badge-1.mp4')
)
let sprite1 = new PIXI.Sprite(PIXI.Texture.from('./assets/badge-1.mp4'))
sprite1.scale.set(0.05, 0.05)
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)
sprite1.scale.set(0.05, 0.05)
sprite1.alpha = 0.5
@@ -145,14 +136,7 @@
})
app.scene.addChild(circle1, circle2)
app.scene.addChild(
button1,
button2,
button3,
button4,
button5,
button6
)
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(badge1, badge2, badge3)
</script>
</body>
lib/pixi/blurfilter.html
+44 -43
View File
@@ -1,50 +1,51 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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=".././3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>BlurFilter</h1>
<p>
The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can specify
a range (defined as a PIXI.Rectangle) on which the filter should be applied.
</p>
<h2>Example with Image</h2>
<p>Let's look at an example of creating a new blur filter near the bottom:</p>
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).
</p>
<script class="doctest">
// Create the app
const app = new PIXIApp({
view: canvas,
width: 480,
height: 270,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>BlurFilter</h1>
<p>
The BlurFilter class creates a blur filter on the renderer. In contrast to the PIXI BlurFilter, you can
specify a range (defined as a PIXI.Rectangle) on which the filter should be applied.
</p>
<h2>Example with Image</h2>
<p>Let's look at an example of creating a new blur filter near the bottom:</p>
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: A sniffing hedgehog and three blurred areas (with different strengths of blur).</p>
<script class="doctest">
// Create the app
const app = new PIXIApp({
view: canvas,
width: 480,
height: 270,
transparent: false
})
.setup()
.run()
// Load a video and add it to the scene
const videoSprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
videoSprite.width = app.size.width
videoSprite.height = app.size.height
app.scene.addChild(videoSprite)
// Load a video and add it to the scene
const videoSprite = new PIXI.Sprite(PIXI.Texture.from('assets/blurfilter.mp4'))
videoSprite.width = app.size.width
videoSprite.height = app.size.height
app.scene.addChild(videoSprite)
// Create three filters and assign them to the scene
const blurFilter1 = new BlurFilter(new PIXI.Rectangle(40, 40, 120, 80))
const blurFilter2 = new BlurFilter(new PIXI.Circle(240, 140, 60), 150)
const blurFilter3 = new BlurFilter(new PIXI.Rectangle(380, 40, 100, 100), 20)
app.scene.filters = [blurFilter1, blurFilter2, blurFilter3]
</script>
</body>
// Create three filters and assign them to the scene
const blurFilter1 = new BlurFilter(new PIXI.Rectangle(40, 40, 120, 80))
const blurFilter2 = new BlurFilter(new PIXI.Circle(240, 140, 60), 150)
const blurFilter3 = new BlurFilter(new PIXI.Rectangle(380, 40, 100, 100), 20)
app.scene.filters = [blurFilter1, blurFilter2, blurFilter3]
</script>
</body>
</html>
lib/pixi/button.html
+408 -301
View File
@@ -1,338 +1,445 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Button</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
the button type to "checkbox".
</p>
<p><a href="../../doc/out/Button.html">JavaScript API</a></p>
<p>Let's look at some button examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Many buttons with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 600,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Button</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
between active/inactive, set the button type to "checkbox".
</p>
<p><a href="../../doc/out/Button.html">JavaScript API</a></p>
<p>Let's look at some button examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Many buttons with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 600,
transparent: false
})
.setup()
.run()
const button1 = new Button({x: 10, y: 10})
const button1 = new Button({ x: 10, y: 10 })
const button2 = new Button({
theme: 'red',
x: 60,
y: 10,
label: 'Button',
type: 'checkbox',
action: e => {
console.info('Button clicked')
}
})
const button2 = new Button({
theme: 'red',
x: 60,
y: 10,
label: 'Button',
type: 'checkbox',
action: (e) => {
console.info('Button clicked')
}
})
const button3 = new Button({
x: 150,
y: 10,
label: 'Checkbox button',
type: 'checkbox',
action: e => {
console.info('Button clicked', e)
}
})
const button3 = new Button({
x: 150,
y: 10,
label: 'Checkbox button',
type: 'checkbox',
action: (e) => {
console.info('Button clicked', e)
}
})
const button4 = new Button({
x: 330,
y: 10,
label: 'Disabled button',
disabled: true,
action: e => {
console.info('Disabled button clicked')
}
})
const button4 = new Button({
x: 330,
y: 10,
label: 'Disabled button',
disabled: true,
action: (e) => {
console.info('Disabled button clicked')
}
})
const button5 = new Button({
x: 500,
y: 10,
label: 'Active button',
active: true
})
const button5 = new Button({
x: 500,
y: 10,
label: 'Active button',
active: true
})
const button6 = new Button({
x: 650,
y: 10,
label: 'Active disabled button',
type: 'checkbox',
active: true,
disabled: true
})
const button6 = new Button({
x: 650,
y: 10,
label: 'Active disabled button',
type: 'checkbox',
active: true,
disabled: true
})
const button7 = new Button({
x: 10,
y: 70,
label: 'Icon button',
type: 'checkbox',
active: true,
icon: 'arrow_back'
})
const button7 = new Button({
x: 10,
y: 70,
label: 'Icon button',
type: 'checkbox',
active: true,
icon: 'arrow_back'
})
const button8 = new Button({
x: 180,
y: 70,
theme: 'light',
label: 'Icon button',
icon: 'arrow_forward',
type: 'checkbox',
iconPosition: 'right'
})
const button8 = new Button({
x: 180,
y: 70,
theme: 'light',
label: 'Icon button',
icon: 'arrow_forward',
type: 'checkbox',
iconPosition: 'right'
})
const button9 = new Button({
x: 10,
y: 130,
type: 'checkbox',
icon: 'play_arrow',
iconActive: 'pause'
})
const button9 = new Button({
x: 10,
y: 130,
type: 'checkbox',
icon: 'play_arrow',
iconActive: 'pause'
})
const button10 = new Button({
x: 60,
y: 130,
icon: 'stop',
action: function() {
this.iconColor = Math.round(Math.random() * 16777215)
}
})
const button10 = new Button({
x: 60,
y: 130,
icon: 'stop',
action: function () {
this.iconColor = Math.round(Math.random() * 16777215)
}
})
const button11 = new Button({
x: 110,
y: 130,
icon: 'star_border',
tooltip: 'Bookmark'
})
const button11 = new Button({
x: 110,
y: 130,
icon: 'star_border',
tooltip: 'Bookmark'
})
const button12 = new Button({
x: 10,
y: 190,
icon: 'airplay',
fillAlpha: 0,
strokeAlpha: 0,
iconColor: 0xdd0000,
iconColorActive: 0x00dd00,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
type: 'checkbox'
})
const button12 = new Button({
x: 10,
y: 190,
icon: 'airplay',
fillAlpha: 0,
strokeAlpha: 0,
iconColor: 0xdd0000,
iconColorActive: 0x00dd00,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
type: 'checkbox'
})
const button13 = new Button({
x: 50,
y: 190,
label: 'Button',
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
textStyle: {
fontSize: 20,
stroke: 'brown',
fill: 'orange',
strokeThickness: 4,
miterLimit: 1,
letterSpacing: 6
},
textStyleActive: {
fontSize: 20,
stroke: 'orange',
fill: 'brown',
strokeThickness: 4,
fontWeight: 'bold',
miterLimit: 1,
letterSpacing: 5
},
type: 'checkbox'
})
const button13 = new Button({
x: 50,
y: 190,
label: 'Button',
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0,
textStyle: {
fontSize: 20,
stroke: 'brown',
fill: 'orange',
strokeThickness: 4,
miterLimit: 1,
letterSpacing: 6
},
textStyleActive: {
fontSize: 20,
stroke: 'orange',
fill: 'brown',
strokeThickness: 4,
fontWeight: 'bold',
miterLimit: 1,
letterSpacing: 5
},
type: 'checkbox'
})
const button14 = new Button({
x: 10,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle'
})
const button14 = new Button({
x: 10,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle'
})
const button15 = new Button({
x: 200,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null
})
const button15 = new Button({
x: 200,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null
})
const button16 = new Button({
x: 400,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle',
active: true
})
const button16 = new Button({
x: 400,
y: 250,
label: 'Button',
type: 'checkbox',
icon: null,
iconActive: 'add_circle',
active: true
})
const button17 = new Button({
x: 600,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null,
active: true
})
const button17 = new Button({
x: 600,
y: 250,
label: 'Button',
type: 'checkbox',
icon: 'add_circle',
iconActive: null,
active: true
})
let graphic1 = new PIXI.Graphics()
graphic1.beginFill(0xd7a3f9)
graphic1.drawCircle(10, 10, 10)
let graphic1 = new PIXI.Graphics()
graphic1.beginFill(0xd7a3f9)
graphic1.drawCircle(10, 10, 10)
let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30)
let graphic2 = new PIXI.Graphics()
graphic2.beginFill(0x40c3f2)
graphic2.drawCircle(30, 30, 30)
const button18 = new Button({
x: 10,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic1,
iconActive: graphic2
})
const button18 = new Button({
x: 10,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic1,
iconActive: graphic2
})
let graphic3 = new PIXI.Graphics()
graphic3.beginFill(0xfd6b6a)
graphic3.drawCircle(2, 2, 2)
let graphic3 = new PIXI.Graphics()
graphic3.beginFill(0xfd6b6a)
graphic3.drawCircle(2, 2, 2)
let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40)
let graphic4 = new PIXI.Graphics()
graphic4.beginFill(0xf8ce2d)
graphic4.drawCircle(40, 40, 40)
const button19 = new Button({
x: 200,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic3,
iconActive: graphic4,
active: true,
iconPosition: 'right'
})
const button19 = new Button({
x: 200,
y: 310,
label: 'Button',
type: 'checkbox',
icon: graphic3,
iconActive: graphic4,
active: true,
iconPosition: 'right'
})
const button20 = new Button({
x: 400,
y: 310,
label: 'Link Button',
type: 'checkbox',
style: 'link',
action: event => {
console.log('Link button clicked')
}
})
const button20 = new Button({
x: 400,
y: 310,
label: 'Link Button',
type: 'checkbox',
style: 'link',
action: (event) => {
console.log('Link button clicked')
}
})
const button21 = new Button({
x: 600,
y: 310,
minWidth: 70,
minHeight: 70,
icon: 'loop',
type: 'checkbox',
style: 'link'
})
const button21 = new Button({
x: 600,
y: 310,
minWidth: 70,
minHeight: 70,
icon: 'loop',
type: 'checkbox',
style: 'link'
})
const button22 = new Button({
x: 10,
y: 440,
icon: 'play_arrow',
badge: '19'
})
const button22 = new Button({
x: 10,
y: 440,
icon: 'play_arrow',
badge: '19'
})
const button23 = new Button({
x: 100,
y: 440,
icon: 'stop',
badge: 'Stop'
})
const button23 = new Button({
x: 100,
y: 440,
icon: 'stop',
badge: 'Stop'
})
const button24 = new Button({
x: 200,
y: 440,
icon: 'star_border',
badge: {
content: 'Bookmark',
align: 'center',
verticalAlign: 'bottom',
offsetTop: 8,
radius: 14,
fill: 0xfe832d
}
})
const button24 = new Button({
x: 200,
y: 440,
icon: 'star_border',
badge: {
content: 'Bookmark',
align: 'center',
verticalAlign: 'bottom',
offsetTop: 8,
radius: 14,
fill: 0xfe832d
}
})
const button25 = new Button({
x: 300,
y: 460,
icon: 'add',
badge: {
content: 'Sweden',
align: 'center',
verticalAlign: 'top',
offsetTop: -20,
radius: 12,
fill: 0x5856d6
}
})
const button25 = new Button({
x: 300,
y: 460,
icon: 'add',
badge: {
content: 'Sweden',
align: 'center',
verticalAlign: 'top',
offsetTop: -20,
radius: 12,
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']
setInterval(() => {
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
button25.layout()
}, 1000)
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'
]
setInterval(() => {
button25.badge.content = countries[Math.floor(Math.random() * countries.length)]
button25.layout()
}, 1000)
const button26 = new Button({
x: 10,
y: 520,
label: 'add',
type: 'checkbox',
strokeActive: 0x28a745,
textStyleActive: {
fill: 0x28a745
},
textAlpha: .2,
textActiveAlpha: .6
})
const button26 = new Button({
x: 10,
y: 520,
label: 'add',
type: 'checkbox',
strokeActive: 0x28a745,
textStyleActive: {
fill: 0x28a745
},
textAlpha: 0.2,
textActiveAlpha: 0.6
})
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21)
app.scene.addChild(button22, button23, button24, button25)
app.scene.addChild(button26)
</script>
</body>
</html>
app.scene.addChild(button1, button2, button3, button4, button5, button6)
app.scene.addChild(button7, button8)
app.scene.addChild(button9, button10, button11)
app.scene.addChild(button12, button13)
app.scene.addChild(button14, button15, button16, button17)
app.scene.addChild(button18, button19, button20, button21)
app.scene.addChild(button22, button23, button24, button25)
app.scene.addChild(button26)
</script>
</body>
</html>
lib/pixi/buttongroup.html
+361 -346
View File
@@ -1,375 +1,390 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-eqv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>ButtonGroup</h1>
<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>Let's look at some button groups:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Many button groups with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 1000,
height: 1700
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>ButtonGroup</h1>
<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>Let's look at some button groups:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Many button groups with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 1000,
height: 1700
})
.setup()
.run()
const buttonGroup1 = new ButtonGroup({
x: 10,
y: 10,
buttons: [
{icon: 'keyboard_arrow_left'},
{icon: 'keyboard_arrow_up'},
{icon: 'keyboard_arrow_down'},
{icon: 'keyboard_arrow_right'}
]
})
const buttonGroup1 = new ButtonGroup({
x: 10,
y: 10,
buttons: [
{ icon: 'keyboard_arrow_left' },
{ icon: 'keyboard_arrow_up' },
{ icon: 'keyboard_arrow_down' },
{ icon: 'keyboard_arrow_right' }
]
})
const buttonGroup2 = new ButtonGroup({
x: 260,
y: 10,
buttons: [
{icon: 'directions_walk', tooltip: 'Gehen'},
{icon: 'directions_run', tooltip: 'Laufen'},
{icon: 'directions_bike', tooltip: 'Fahrrad'},
{icon: 'directions_bus', tooltip: 'Bus'},
{icon: 'directions_car', tooltip: 'Auto'},
{icon: 'directions_boat', tooltip: 'Schiff'},
{icon: 'directions_railway', tooltip: 'Bahn'}
],
margin: 0,
stroke: 0x0088ff,
strokeWidth: 3
})
const buttonGroup2 = new ButtonGroup({
x: 260,
y: 10,
buttons: [
{ icon: 'directions_walk', tooltip: 'Gehen' },
{ icon: 'directions_run', tooltip: 'Laufen' },
{ icon: 'directions_bike', tooltip: 'Fahrrad' },
{ icon: 'directions_bus', tooltip: 'Bus' },
{ icon: 'directions_car', tooltip: 'Auto' },
{ icon: 'directions_boat', tooltip: 'Schiff' },
{ icon: 'directions_railway', tooltip: 'Bahn' }
],
margin: 0,
stroke: 0x0088ff,
strokeWidth: 3
})
const buttonGroup3 = new ButtonGroup({
x: 610,
y: 10,
buttons: [
{icon: 'laptop'},
{label: 'Linux'},
{icon: 'laptop_windows', label: 'Windows', align: 'center'},
{icon: 'laptop_mac', iconPosition: 'right', label: 'macOS'}
],
margin: 0,
stroke: 0xffffff,
strokeWidth: 1
})
const buttonGroup3 = new ButtonGroup({
x: 610,
y: 10,
buttons: [
{ icon: 'laptop' },
{ label: 'Linux' },
{ icon: 'laptop_windows', label: 'Windows', align: 'center' },
{ icon: 'laptop_mac', iconPosition: 'right', label: 'macOS' }
],
margin: 0,
stroke: 0xffffff,
strokeWidth: 1
})
const buttonGroup4 = new ButtonGroup({
x: 10,
y: 90,
buttons: [
{label: 'Button 1', action: (event, button) => console.log(button.id)},
{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}
],
margin: 40,
minWidth: 180,
minHeight: 60,
textStyle: {
fill: '#f8ce2d'
},
stroke: 0xffffff,
strokeWidth: 1
})
const buttonGroup4 = new ButtonGroup({
x: 10,
y: 90,
buttons: [
{ label: 'Button 1', action: (event, button) => console.log(button.id) },
{ label: 'Button 2', action: (event, button) => console.log(button.id), radius: 0 },
{
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,
minWidth: 180,
minHeight: 60,
textStyle: {
fill: '#f8ce2d'
},
stroke: 0xffffff,
strokeWidth: 1
})
const buttonGroup5 = new ButtonGroup({
x: 10,
y: 180,
buttons: [
{label: 'ButtonGroup'},
{label: 'of', active: true},
{label: 'type'},
{minWidth: 30, style: 'link'},
{label: 'checkbox', active: true}
],
margin: 6,
type: 'checkbox'
})
const buttonGroup5 = new ButtonGroup({
x: 10,
y: 180,
buttons: [
{ label: 'ButtonGroup' },
{ label: 'of', active: true },
{ label: 'type' },
{ minWidth: 30, style: 'link' },
{ label: 'checkbox', active: true }
],
margin: 6,
type: 'checkbox'
})
const buttonGroup6 = new ButtonGroup({
x: 450,
y: 180,
buttons: [
{label: 'ButtonGroup'},
{label: 'of'},
{label: 'type', active: true},
{label: 'radio'}
],
margin: 0,
type: 'radio'
})
const buttonGroup6 = new ButtonGroup({
x: 450,
y: 180,
buttons: [
{ label: 'ButtonGroup' },
{ label: 'of' },
{ label: 'type', active: true },
{ label: 'radio' }
],
margin: 0,
type: 'radio'
})
const buttonGroup7 = new ButtonGroup({
x: 10,
y: 250,
theme: 'light',
buttons: [
{label: 'ButtonGroup'},
{label: 'of'},
{label: 'style'},
{label: 'link'},
{label: 'with'},
{label: 'one exception', style: 'default'}
],
style: 'link'
})
const buttonGroup7 = new ButtonGroup({
x: 10,
y: 250,
theme: 'light',
buttons: [
{ label: 'ButtonGroup' },
{ label: 'of' },
{ label: 'style' },
{ label: 'link' },
{ label: 'with' },
{ label: 'one exception', style: 'default' }
],
style: 'link'
})
const buttonGroup8 = new ButtonGroup({
x: 610,
y: 250,
buttons: [
{icon: 'airline_seat_legroom_extra'},
{icon: 'airline_seat_legroom_normal'},
{icon: 'airline_seat_legroom_reduced'},
{icon: 'wifi_tethering', type: 'checkbox'}
],
type: 'radio',
margin: 0
})
const buttonGroup8 = new ButtonGroup({
x: 610,
y: 250,
buttons: [
{ icon: 'airline_seat_legroom_extra' },
{ icon: 'airline_seat_legroom_normal' },
{ icon: 'airline_seat_legroom_reduced' },
{ icon: 'wifi_tethering', type: 'checkbox' }
],
type: 'radio',
margin: 0
})
const buttonGroup9 = new ButtonGroup({
x: 10,
y: 320,
buttons: [
{icon: 'attachment'},
{icon: 'autorenew'},
{icon: 'backup'},
{icon: 'apps'}
],
orientation: 'vertical',
minWidth: 70
})
const buttonGroup9 = new ButtonGroup({
x: 10,
y: 320,
buttons: [{ icon: 'attachment' }, { icon: 'autorenew' }, { icon: 'backup' }, { icon: 'apps' }],
orientation: 'vertical',
minWidth: 70
})
const buttonGroup10 = new ButtonGroup({
x: 100,
y: 320,
buttons: [
{label: 'Vertical'},
{label: 'ButtonGroup'},
{label: 'align: left', active: true},
{label: 'margin: 0'}
],
orientation: 'vertical',
stroke: 0xff0000,
strokeWidth: 3,
align: 'left',
margin: 0
})
const buttonGroup10 = new ButtonGroup({
x: 100,
y: 320,
buttons: [
{ label: 'Vertical' },
{ label: 'ButtonGroup' },
{ label: 'align: left', active: true },
{ label: 'margin: 0' }
],
orientation: 'vertical',
stroke: 0xff0000,
strokeWidth: 3,
align: 'left',
margin: 0
})
const buttonGroup11 = new ButtonGroup({
x: 250,
y: 320,
buttons: [
{label: 'Vertical', active: true, verticalAlign: 'top'},
{label: 'ButtonGroup'},
{label: 'centered', active: true, disabled: true, verticalAlign: 'middle'},
{label: 'of', disabled: true, align: 'left'},
{label: 'type'},
{label: 'checkbox', align: 'right', verticalAlign: 'bottom'}
],
orientation: 'vertical',
margin: 0,
align: 'center',
verticalAlign: 'bottom',
minHeight: 100,
minWidth: 100,
stroke: 0x22ee22,
type: 'checkbox'
})
const buttonGroup11 = new ButtonGroup({
x: 250,
y: 320,
buttons: [
{ label: 'Vertical', active: true, verticalAlign: 'top' },
{ label: 'ButtonGroup' },
{ label: 'centered', active: true, disabled: true, verticalAlign: 'middle' },
{ label: 'of', disabled: true, align: 'left' },
{ label: 'type' },
{ label: 'checkbox', align: 'right', verticalAlign: 'bottom' }
],
orientation: 'vertical',
margin: 0,
align: 'center',
verticalAlign: 'bottom',
minHeight: 100,
minWidth: 100,
stroke: 0x22ee22,
type: 'checkbox'
})
const buttonGroup12 = new ButtonGroup({
x: 400,
y: 320,
buttons: [
{label: 'Controls', disabled: true},
{icon: 'play_arrow'},
{icon: 'pause', active: true, align: 'left'},
{icon: 'stop', verticalAlign: 'bottom'}
],
orientation: 'vertical',
margin: 0,
align: 'right',
type: 'radio'
})
const buttonGroup12 = new ButtonGroup({
x: 400,
y: 320,
buttons: [
{ label: 'Controls', disabled: true },
{ icon: 'play_arrow' },
{ icon: 'pause', active: true, align: 'left' },
{ icon: 'stop', verticalAlign: 'bottom' }
],
orientation: 'vertical',
margin: 0,
align: 'right',
type: 'radio'
})
const buttonGroup13 = new ButtonGroup({
x: 520,
y: 320,
buttons: [
{label: 'Volume', align: 'center', disabled: true},
{icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top'},
{icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9},
{icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right'},
{icon: 'volume_up', label: 'Lauter', align: 'right', iconPosition: 'right', verticalAlign: 'bottom'}
],
orientation: 'vertical',
margin: 0,
type: 'radio',
stroke: 0x7b4073,
strokeWidth: 4,
minWidth: 200,
minHeight: 100
})
const buttonGroup13 = new ButtonGroup({
x: 520,
y: 320,
buttons: [
{ label: 'Volume', align: 'center', disabled: true },
{ icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top' },
{ icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9 },
{ icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right' },
{
icon: 'volume_up',
label: 'Lauter',
align: 'right',
iconPosition: 'right',
verticalAlign: 'bottom'
}
],
orientation: 'vertical',
margin: 0,
type: 'radio',
stroke: 0x7b4073,
strokeWidth: 4,
minWidth: 200,
minHeight: 100
})
const buttonGroup14 = new ButtonGroup({
x: 10,
y: 960,
buttons: [
{label: 'Stacked button 1', action: event => console.log('clicked 1')},
{label: 'Stacked button 2', action: event => console.log('clicked 2')},
{label: 'Stacked button 3', action: event => console.log('clicked 3')},
{label: 'Stacked button 4', action: event => console.log('clicked 4')},
{label: 'Stacked button 5', action: event => console.log('clicked 5')},
{label: 'Stacked button 6', action: event => console.log('clicked 6')},
{label: 'Stacked button 7', action: event => console.log('clicked 7')},
{label: 'Stacked button 8', action: event => console.log('clicked 8')}
],
stackPadding: 6,
maxWidth: 620,
app
})
const buttonGroup14 = new ButtonGroup({
x: 10,
y: 960,
buttons: [
{ label: 'Stacked button 1', action: (event) => console.log('clicked 1') },
{ label: 'Stacked button 2', action: (event) => console.log('clicked 2') },
{ label: 'Stacked button 3', action: (event) => console.log('clicked 3') },
{ label: 'Stacked button 4', action: (event) => console.log('clicked 4') },
{ label: 'Stacked button 5', action: (event) => console.log('clicked 5') },
{ label: 'Stacked button 6', action: (event) => console.log('clicked 6') },
{ label: 'Stacked button 7', action: (event) => console.log('clicked 7') },
{ label: 'Stacked button 8', action: (event) => console.log('clicked 8') }
],
stackPadding: 6,
maxWidth: 620,
app
})
const buttonGroup15 = new ButtonGroup({
x: 10,
y: 1040,
buttons: [
{icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
{icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
{icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
{icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
{icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
{icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
{icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
],
orientation: 'vertical',
margin: 1,
maxHeight: 200,
app
})
const buttonGroup15 = new ButtonGroup({
x: 10,
y: 1040,
buttons: [
{ icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36 },
{ icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927 },
{ icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201 },
{ icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00 },
{ icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af },
{ icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc },
{ icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7 }
],
orientation: 'vertical',
margin: 1,
maxHeight: 200,
app
})
const buttons16 = []
for (let i = 1; i < 101; i++) {
buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16})
}
const buttons16 = []
for (let i = 1; i < 101; i++) {
buttons16.push({
label: `Button ${i}`,
stroke: Math.floor(Math.random() * 16777215),
strokeWidth: 3,
radius: 16
})
}
buttons16.splice(6, 0, {minWidth: 50, style: 'link'})
const buttonGroup16 = new ButtonGroup({
x: 90,
y: 1040,
buttons: buttons16,
stackPadding: 3,
maxWidth: 900,
app
})
buttons16.splice(6, 0, { minWidth: 50, style: 'link' })
const buttonGroup16 = new ButtonGroup({
x: 90,
y: 1040,
buttons: buttons16,
stackPadding: 3,
maxWidth: 900,
app
})
const buttonGroup17 = new ButtonGroup({
x: 10,
y: 1270,
buttons: [
{icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
{icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
{icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
{icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
{icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
{icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
{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_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,
maxWidth: 400,
app
})
const buttonGroup17 = new ButtonGroup({
x: 10,
y: 1270,
buttons: [
{ icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport' },
{ icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar' },
{ icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe' },
{ icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash' },
{ icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining' },
{ icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist' },
{ 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_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,
maxWidth: 400,
app
})
const buttonGroup18 = new ButtonGroup({
x: 10,
y: 1340,
buttons: [
{label: 'move'},
{label: 'explanation dried'},
{label: 'out catch'},
{label: 'late either'},
{label: 'tell pour'},
{label: 'willing apart airplane'},
{label: 'high war'},
{label: 'future struck'},
{label: 'sense image'},
{label: 'never'},
{label: 'mark cloth'},
{label: 'everywhere due large'}
],
maxWidth: 500,
app
})
const buttonGroup18 = new ButtonGroup({
x: 10,
y: 1340,
buttons: [
{ label: 'move' },
{ label: 'explanation dried' },
{ label: 'out catch' },
{ label: 'late either' },
{ label: 'tell pour' },
{ label: 'willing apart airplane' },
{ label: 'high war' },
{ label: 'future struck' },
{ label: 'sense image' },
{ label: 'never' },
{ label: 'mark cloth' },
{ label: 'everywhere due large' }
],
maxWidth: 500,
app
})
const buttonGroup19 = new ButtonGroup({
x: 10,
y: 1420,
buttons: [
{label: 'move'},
{label: 'explanation dried'},
{label: 'out catch'}
],
maxWidth: 500,
app
})
const buttonGroup19 = new ButtonGroup({
x: 10,
y: 1420,
buttons: [{ label: 'move' }, { label: 'explanation dried' }, { label: 'out catch' }],
maxWidth: 500,
app
})
const buttonGroup20 = new ButtonGroup({
x: 10,
y: 1520,
type: 'checkbox',
buttons: [
{label: 'one'},
{label: 'two'},
{label: 'three'}
],
textAlpha: .7,
textActiveAlpha: .2
})
const buttonGroup20 = new ButtonGroup({
x: 10,
y: 1520,
type: 'checkbox',
buttons: [{ label: 'one' }, { label: 'two' }, { label: 'three' }],
textAlpha: 0.7,
textActiveAlpha: 0.2
})
const buttonGroup21 = new ButtonGroup({
x: 300,
y: 1520,
type: 'checkbox',
buttons: [
{label: 'eins', textAlpha: 1, textActiveAlpha: .2},
{label: 'zwei', textAlpha: .2, textActiveAlpha: 1},
{label: 'drei'}
]
})
const buttonGroup21 = new ButtonGroup({
x: 300,
y: 1520,
type: 'checkbox',
buttons: [
{ label: 'eins', textAlpha: 1, textActiveAlpha: 0.2 },
{ label: 'zwei', textAlpha: 0.2, textActiveAlpha: 1 },
{ label: 'drei' }
]
})
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
app.scene.addChild(buttonGroup20, buttonGroup21)
</script>
</body>
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
app.scene.addChild(buttonGroup20, buttonGroup21)
</script>
</body>
</html>
lib/pixi/coordinates.html
+1 -1
View File
@@ -15,7 +15,7 @@
<body onload="Doctest.run()">
<h1>
Coordinates
<a href="../index.html">lib.</a><a href="index.html">pixi.</a>Coordinates
</h1>
<p>
To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems.
lib/pixi/deepzoom/deepzoom.html
+195 -188
View File
@@ -1,219 +1,226 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<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="../../../css/doctest.css" />
<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="../../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.pixi.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">deepzoom.</a>
DeepZoom
</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
tiles at the larger level as fast as possible.
</p>
<br />
<div id="div1" style="float: left"></div>
<div id="div2" style="float: right"></div>
<div style="clear: left; margin-top: 540px" />
<script class="doctest">
// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
tileSize: 128,
format: 'jpg',
overlap: 0,
type: 'map',
height: 4096,
width: 4096,
path: '../assets/maps/test',
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
})
// const deepZoomInfo = new DeepZoomInfo({
// compression: [
// "dds"
// ],
// clip: {
// minLevel: 12,
// maxLevel: 20,
// startCol: 275215,
// startRow: 181050,
// bounds: {
// min: [48.458353, 8.96484374976547],
// max: [48.5747899110263, 9.14062499976523]
// }
// },
// tileSize: 512,
// format: "png",
// overlap: 0,
// type: "map",
// height: 131072,
// width: 131072,
// path: "../../../var/tuesch/luftbild_2016_full",
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
// })
<body onload="Doctest.run()">
<h1>Double DeepZoomImage</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
as possible.
</p>
<br />
<div id="div1" style="float: left;"></div>
<div id="div2" style="float: right;"></div>
<div style="clear: left; margin-top: 540px;" />
<script class="doctest">
// app
//--------------------
window.app = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xffcccccc
})
.setup()
.run()
// deepZoom
//--------------------
const deepZoomInfo = new DeepZoomInfo({
"tileSize": 128,
"format": "jpg",
"overlap": 0,
"type": "map",
"height": 4096,
"width": 4096,
"path": "../assets/maps/test",
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
})
// const deepZoomInfo = new DeepZoomInfo({
// compression: [
// "dds"
// ],
// clip: {
// minLevel: 12,
// maxLevel: 20,
// startCol: 275215,
// startRow: 181050,
// bounds: {
// min: [48.458353, 8.96484374976547],
// max: [48.5747899110263, 9.14062499976523]
// }
// },
// tileSize: 512,
// format: "png",
// overlap: 0,
// type: "map",
// height: 131072,
// width: 131072,
// path: "../../../var/tuesch/luftbild_2016_full",
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
// })
div1.appendChild(app.view)
// app
//--------------------
window.app = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
div1.appendChild(app.view)
// create the ScatterContainer
//--------------------
const scatterContainer1 = new ScatterContainer(app.renderer, { showBounds: true, app: app })
app.scene.addChild(scatterContainer1)
// create the ScatterContainer
//--------------------
const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer1)
// Create the DeepZoomImage
//--------------------
setTimeout(() => {
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, { app, world: scatterContainer1 })
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
minScale: 0,
maxScale: 50,
onTransform: (event) => {
//console.log('currentLevel', deepZoomImage1.currentLevel)
deepZoomImage1.transformed(event)
}
})
// Create the DeepZoomImage
//--------------------
setTimeout(() => {
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
scatterContainer1.addChild(deepZoomImage1)
}, 1000)
// app2
//--------------------
const app2 = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xffcccccc
})
.setup()
.run()
div2.appendChild(app2.view)
// create the ScatterContainer
//--------------------
const scatterContainer2 = new ScatterContainer(app2.renderer, { showBounds: true, app: app2 })
app2.scene.addChild(scatterContainer2)
// Create the DeepZoomImage
//--------------------
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, { app: app2 })
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
minScale: 0,
maxScale: 50,
onTransform: event => {
//console.log('currentLevel', deepZoomImage1.currentLevel)
deepZoomImage1.transformed(event)
maxScale: 100,
onTransform: (event) => {
deepZoomImage2.transformed(event)
}
})
scatterContainer1.addChild(deepZoomImage1)
}, 1000)
// app2
//--------------------
const app2 = new PIXIApp({
width: 400,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
div2.appendChild(app2.view)
scatterContainer2.addChild(deepZoomImage2)
</script>
// create the ScatterContainer
//--------------------
const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
app2.scene.addChild(scatterContainer2)
<h1>DeepZoomImage in DeepZoomImage</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
tiles at the larger level as fast as possible.
</p>
<br />
<div id="div3"></div>
<script class="doctest">
// app3
//--------------------
const app3 = new PIXIApp({
width: 900,
height: 500,
backgroundColor: 0xffcccccc
})
.setup()
.run()
// Create the DeepZoomImage
//--------------------
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
minScale: 0,
maxScale: 100,
onTransform: (event) => {
deepZoomImage2.transformed(event)
}
})
window.app3 = app3
scatterContainer2.addChild(deepZoomImage2)
div3.appendChild(app3.view)
</script>
// create the ScatterContainer
//--------------------
const scatterContainer3 = new ScatterContainer(app3.renderer, {
app: app3,
showBounds: true,
claimEvent: false,
stopEvents: false
})
app3.scene.addChild(scatterContainer3)
<h1>DeepZoomImage in DeepZoomImage</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
as possible.
</p>
<br />
<div id="div3"></div>
<script class="doctest">
// Create the DeepZoomImage
//--------------------
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, { app: app3 })
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
minScale: 0,
maxScale: 100,
startScale: 2,
autoBringToFront: false,
onTransform: (event) => {
deepZoomImage3.transformed(event)
}
})
// app3
//--------------------
const app3 = new PIXIApp({
width: 900,
height: 500,
backgroundColor: 0xFFCCCCCC
}).setup().run()
app3._deepZoomImage3 = deepZoomImage3
window.app3 = app3
div3.appendChild(app3.view)
scatterContainer3.addChild(deepZoomImage3)
// create the ScatterContainer
//--------------------
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
app3.scene.addChild(scatterContainer3)
// Create the second DeepZoomImage
//--------------------
const border = new PIXI.Graphics()
border.beginFill(0x282828, 1)
border.drawRect(0, 0, 264, 244)
scatterContainer3.addChild(border)
// Create the DeepZoomImage
//--------------------
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
minScale: 0,
maxScale: 100,
startScale: 2,
autoBringToFront: false,
onTransform: (event) => {
deepZoomImage3.transformed(event)
}
})
const mask = new PIXI.Graphics()
mask.beginFill(0x282828, 1)
mask.drawRect(0, 0, 260, 240)
scatterContainer3.addChild(mask)
app3._deepZoomImage3 = deepZoomImage3
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, { app: app3 })
deepZoomImage4.x = 4
deepZoomImage4.y = 4
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
minScale: 0,
maxScale: 100,
onTransform: (event) => {
deepZoomImage4.transformed(event)
}
})
deepZoomImage4.mask = mask
scatterContainer3.addChild(deepZoomImage3)
// Create the second DeepZoomImage
//--------------------
const border = new PIXI.Graphics()
border.beginFill(0x282828, 1)
border.drawRect(0, 0, 264, 244)
scatterContainer3.addChild(border)
const mask = new PIXI.Graphics()
mask.beginFill(0x282828, 1)
mask.drawRect(0, 0, 260, 240)
scatterContainer3.addChild(mask)
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
deepZoomImage4.x = 4
deepZoomImage4.y = 4
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
minScale: 0,
maxScale: 100,
onTransform: (event) => {
deepZoomImage4.transformed(event)
}
})
deepZoomImage4.mask = mask
app3._deepZoomImage4 = deepZoomImage4
scatterContainer3.addChild(deepZoomImage4)
</script>
</body>
app3._deepZoomImage4 = deepZoomImage4
scatterContainer3.addChild(deepZoomImage4)
</script>
</body>
</html>
lib/pixi/deepzoom/image.html
+119 -127
View File
@@ -1,143 +1,135 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<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="../../../css/doctest.css" />
<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="../../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>DeepZoomImage</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
as possible.
</p>
<br />
<div id="app">
<button id="change_dpr">Change Pixel Ratio</button>
<div id="canvas_container"></div>
<div id="info"></div>
</div>
<script class="doctest">
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
// Just as in the doctest: scatter.html
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
}
}
let app
let state = 0
//Destroys the PIXIApp element and the corresponding canvas,
//to reinstantiate the entire application.
changePIXI()
function changePIXI() {
if (typeof app != 'undefined') {
//The parameter destroys the canvas, when destroying the app.
// Not deleting a new canvas resulted in some
// weird PIXI error.
app.destroy(true)
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
//A new canvas has to be created
//for the new view.
var canvas = document.createElement("canvas")
canvas_container.appendChild(canvas);
app = new ScatterApp({
resolution: state + 1,
//Default parameters
view: canvas,
autoResize: false,
width: 128,
height: 128,
backgroundColor: 0xFFCCCCCC
}).setup().run()
// To create a DeepZoomImage, a DeepZoomInfo has to
// be provided. It contains all the necessary informations
// for the DeepZoomImage, to behave as intended.
// (E.g. that it displays the right level of tiles for the current view distance.)
deepZoomInfo = new DeepZoomInfo(
{
"tileSize": 128,
"format": "jpg",
"overlap": 0,
"type": "map",
"height": 4096,
"width": 4096,
"path": "../assets/maps/test",
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
});
// Create the DeepZoomImage
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
highResolution: !!state,
app
});
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
// Allow more flexible scaling for debugging purposes.
minScale: 0,
maxScale: 100,
// Notify the DeepZoomImage, when it's container has
// been transformed (translated, scaled, rotated, ...)
onTransform: (event) => {
deepZoomImage.transformed(event)
<body onload="Doctest.run()">
<h1>
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
><a href="index.html">deepzoom.</a>DeepZoomImage
</h1>
<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 user the impression that even huge pictures (up to gigapixel-images) can be zoomed
instantaneously, since the tiles at smaller levels are scaled immediately and overloaded by more detailed
tiles at the larger level as fast as possible.
</p>
<br />
<div id="app">
<button id="change_dpr">Change Pixel Ratio</button>
<div id="canvas_container"></div>
<div id="info"></div>
</div>
<script class="doctest">
// When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
// Just as in the doctest: scatter.html
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
}
});
}
let app
let state = 0
// Add the DeepZoomImage to the scene.
app.scene.addChild(deepZoomImage)
//Set info text.
info.innerHTML = "resolution: " + app.renderer.resolution +
"<br>high resolution: " + !!state;
}
// Add functionality to the button.
change_dpr.addEventListener("click", (event) => {
state = (state + 1) % 2
//Destroys the PIXIApp element and the corresponding canvas,
//to reinstantiate the entire application.
changePIXI()
})
</script>
</body>
function changePIXI() {
if (typeof app != 'undefined') {
//The parameter destroys the canvas, when destroying the app.
// Not deleting a new canvas resulted in some
// weird PIXI error.
app.destroy(true)
}
//A new canvas has to be created
//for the new view.
var canvas = document.createElement('canvas')
canvas_container.appendChild(canvas)
app = new ScatterApp({
resolution: state + 1,
//Default parameters
view: canvas,
autoResize: false,
width: 128,
height: 128,
backgroundColor: 0xffcccccc
})
.setup()
.run()
// To create a DeepZoomImage, a DeepZoomInfo has to
// be provided. It contains all the necessary informations
// for the DeepZoomImage, to behave as intended.
// (E.g. that it displays the right level of tiles for the current view distance.)
deepZoomInfo = new DeepZoomInfo({
tileSize: 128,
format: 'jpg',
overlap: 0,
type: 'map',
height: 4096,
width: 4096,
path: '../assets/maps/test',
urlTileTemplate: '{path}/{level}/{column}/{row}.{format}'
})
// Create the DeepZoomImage
deepZoomImage = new DeepZoomImage(deepZoomInfo, {
highResolution: !!state,
app
})
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
// Allow more flexible scaling for debugging purposes.
minScale: 0,
maxScale: 100,
// Notify the DeepZoomImage, when it's container has
// been transformed (translated, scaled, rotated, ...)
onTransform: (event) => {
deepZoomImage.transformed(event)
}
})
// Add the DeepZoomImage to the scene.
app.scene.addChild(deepZoomImage)
//Set info text.
info.innerHTML = 'resolution: ' + app.renderer.resolution + '<br>high resolution: ' + !!state
}
// Add functionality to the button.
change_dpr.addEventListener('click', (event) => {
state = (state + 1) % 2
changePIXI()
})
</script>
</body>
</html>
lib/pixi/deepzoom/index.html
+40 -33
View File
@@ -1,38 +1,45 @@
<html>
<head>
<title>PIXI Lib Doctests</title>
<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" />
<link rel="stylesheet" href="../../../css/index.css">
<head>
<title>PIXI Lib Doctests</title>
<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"
/>
<link rel="stylesheet" href="../../../css/index.css" />
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<template id="itemTemplate">
<a class="wrapper" href="">
<div class="preview">
<div class="thumbnail-container">
<div class="thumbnail">
<img class="icon" >
<!-- <iframe src="" frameborder="0"></iframe> -->
</div>
<template id="itemTemplate">
<a class="wrapper" href="">
<div class="preview">
<div class="thumbnail-container">
<div class="thumbnail">
<img class="icon" />
<!-- <iframe src="" frameborder="0"></iframe> -->
</div>
</div>
<div class="title"></div>
</div>
<div class="title"></div>
</div>
</a>
</template>
</head>
<body>
<div id="container" class="container">
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
</div>
<script>
const index = new Index(itemTemplate, [
['Deepzoom', 'deepzoom.html'],
['Image', 'image.html'],
],
null)
index.load()
</script>
</body>
</a>
</template>
</head>
<body>
<div id="container" class="container">
<a style="position: absolute; left: 22px; top: 12px" target="_blank" href="http://www.iwm-tuebingen.de"
>IWMLib PIXI DeepZoom</a
>
</div>
<script>
const index = new Index(
itemTemplate,
[
['Deepzoom', 'deepzoom.html'],
['Image', 'image.html']
],
null
)
index.load()
</script>
</body>
</html>
lib/pixi/flipeffect.html
+5 -9
View File
@@ -16,12 +16,12 @@
<div class="flipWrapper">
<div class="flipCard">
<img class="flipFace front" src="" />
<div class="flipFace back" style="visibility:hidden;"></div>
<div class="flipFace back" style="visibility: hidden"></div>
</div>
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
<svg
class="flipButton backBtn"
style="visibility:hidden;"
style="visibility: hidden"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet"
>
@@ -41,9 +41,7 @@
</template>
</head>
<body onload="Doctest.run()">
<h1>
Flip Effect
</h1>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Flip Effect</h1>
<p>
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
@@ -63,10 +61,8 @@
</li>
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.</li>
</ul>
<h3>
Example
</h3>
<main id="main" style="border: 1px solid red; position: relative;">
<h3>Example</h3>
<main id="main" style="border: 1px solid red; position: relative">
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
</main>
<script class="doctest">
lib/pixi/flippable.html
+159 -155
View File
@@ -1,176 +1,180 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../3rdparty/gsap/src/minified/TweenMax.min.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Flippable</h1>
<p>
Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted
(which can include another PIXI.DisplayObject), and turning it over to the back can
be adjusted by many parameters in speed and behavior.
</p>
<p><a href="../../doc/out/Flippable.html">JavaScript API</a></p>
<p>Let's look at some flippable examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Six flippable elements and one button.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
}).setup().run()
<script src="../3rdparty/gsap/src/minified/TweenMax.min.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Flippable</h1>
<p>
Using the Flippable class, any PIXI element (PIXI.DisplayObject) can be back-mounted (which can include
another PIXI.DisplayObject), and turning it over to the back can be adjusted by many parameters in speed and
behavior.
</p>
<p><a href="../../doc/out/Flippable.html">JavaScript API</a></p>
<p>Let's look at some flippable examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Six flippable elements and one button.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
})
.setup()
.run()
app.loadTextures([
'./assets/fruit-1.jpg',
'./assets/fruit-2.jpg',
'./assets/fruit-3.jpg',
'./assets/fruit-4.jpg',
'./assets/fruit-5.jpg',
'./assets/fruit-6.jpg',
'./assets/fruit-7.jpg',
'./assets/fruit-8.jpg',
'./assets/fruit-9.jpg',
'./assets/fruit-10.jpg'
], textures => {
app.loadTextures(
[
'./assets/fruit-1.jpg',
'./assets/fruit-2.jpg',
'./assets/fruit-3.jpg',
'./assets/fruit-4.jpg',
'./assets/fruit-5.jpg',
'./assets/fruit-6.jpg',
'./assets/fruit-7.jpg',
'./assets/fruit-8.jpg',
'./assets/fruit-9.jpg',
'./assets/fruit-10.jpg'
],
(textures) => {
// Example 1
//--------------------
const sprite1 = new PIXI.Sprite(textures.get('./assets/fruit-1.jpg'))
sprite1.position.set(10, 10)
sprite1.scale.set(0.2, 0.2)
const sprite2 = new PIXI.Sprite(textures.get('./assets/fruit-2.jpg'))
// Example 1
//--------------------
const sprite1 = new PIXI.Sprite(textures.get('./assets/fruit-1.jpg'))
sprite1.position.set(10, 10)
sprite1.scale.set(.2, .2)
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)
// Example 2
//--------------------
const sprite3 = new PIXI.Sprite(textures.get('./assets/fruit-3.jpg'))
sprite3.position.set(10, 120)
sprite3.scale.set(0.2, 0.2)
const sprite4 = new PIXI.Sprite(textures.get('./assets/fruit-4.jpg'))
// Example 2
//--------------------
const sprite3 = new PIXI.Sprite(textures.get('./assets/fruit-3.jpg'))
sprite3.position.set(10, 120)
sprite3.scale.set(.2, .2)
const sprite4 = new PIXI.Sprite(textures.get('./assets/fruit-4.jpg'))
const flippable2 = new Flippable(sprite3, sprite4, app.renderer, {
duration: 6,
ease: Bounce.easeOut,
shadow: true,
eulerX: 0.8
})
const flippable2 = new Flippable(sprite3, sprite4, app.renderer, {
duration: 6,
ease: Bounce.easeOut,
shadow: true,
eulerX: .8
})
// Example 3
//--------------------
const sprite5 = new PIXI.Sprite(textures.get('./assets/fruit-5.jpg'))
sprite5.position.set(10, 240)
sprite5.scale.set(0.2, 0.2)
const sprite6 = new PIXI.Sprite(textures.get('./assets/fruit-6.jpg'))
sprite6.position.set(400, 180)
sprite6.scale.set(0.3, 0.3)
sprite6.rotation = 0.3
// Example 3
//--------------------
const sprite5 = new PIXI.Sprite(textures.get('./assets/fruit-5.jpg'))
sprite5.position.set(10, 240)
sprite5.scale.set(.2, .2)
const sprite6 = new PIXI.Sprite(textures.get('./assets/fruit-6.jpg'))
sprite6.position.set(400, 180)
sprite6.scale.set(.3, .3)
sprite6.rotation = .3
const flippable3 = new Flippable(sprite5, sprite6, app.renderer, {
duration: 4,
ease: Circ.easeInOut,
shadow: true,
useBackTransforms: true
})
const flippable3 = new Flippable(sprite5, sprite6, app.renderer, {
duration: 4,
ease: Circ.easeInOut,
shadow: true,
useBackTransforms: true
})
// Example 4
//--------------------
const sprite7 = new PIXI.Sprite(textures.get('./assets/fruit-7.jpg'))
sprite7.position.set(700, 10)
sprite7.scale.set(0.2, 0.2)
const sprite8 = new PIXI.Sprite(textures.get('./assets/fruit-8.jpg'))
sprite8.position.set(550, 180)
sprite8.scale.set(0.15, 0.15)
sprite8.skew.set(0, 0.1)
// Example 4
//--------------------
const sprite7 = new PIXI.Sprite(textures.get('./assets/fruit-7.jpg'))
sprite7.position.set(700, 10)
sprite7.scale.set(.2, .2)
const sprite8 = new PIXI.Sprite(textures.get('./assets/fruit-8.jpg'))
sprite8.position.set(550, 180)
sprite8.scale.set(.15, .15)
sprite8.skew.set(0, .1)
const flippable4 = new Flippable(sprite7, sprite8, app.renderer, {
duration: 5,
ease: Elastic.easeOut.config(1, 0.3),
transformEase: Elastic.easeOut.config(1, 0.3),
shadow: true,
focus: 600,
near: 50,
far: 10000,
useBackTransforms: true
})
const flippable4 = new Flippable(sprite7, sprite8, app.renderer, {
duration: 5,
ease: Elastic.easeOut.config(1, 0.3),
transformEase: Elastic.easeOut.config(1, 0.3),
shadow: true,
focus: 600,
near: 50,
far: 10000,
useBackTransforms: true
})
// Example 5
//--------------------
const sprite9 = new PIXI.Sprite(textures.get('./assets/fruit-9.jpg'))
sprite9.position.set(700, 130)
sprite9.scale.set(0.2, 0.2)
sprite9.skew.set(0.2, 0.2)
const sprite10 = new PIXI.Sprite(textures.get('./assets/fruit-10.jpg'))
sprite10.position.set(700, 130)
sprite10.scale.set(0.2, 0.2)
sprite10.skew.set(-0.2, -0.2)
// Example 5
//--------------------
const sprite9 = new PIXI.Sprite(textures.get('./assets/fruit-9.jpg'))
sprite9.position.set(700, 130)
sprite9.scale.set(.2, .2)
sprite9.skew.set(.2, .2)
const sprite10 = new PIXI.Sprite(textures.get('./assets/fruit-10.jpg'))
sprite10.position.set(700, 130)
sprite10.scale.set(.2, .2)
sprite10.skew.set(-.2, -.2)
const flippable5 = new Flippable(sprite9, sprite10, app.renderer, {
duration: 2,
useBackTransforms: true
})
const flippable5 = new Flippable(sprite9, sprite10, app.renderer, {
duration: 2,
useBackTransforms: true
})
// Example 6
//--------------------
const graphic1 = new PIXI.Graphics()
graphic1.position.set(700, 280)
graphic1.beginFill(0x6b6acf, 1)
graphic1.drawRect(0, 0, 160, 100)
graphic1.lineStyle(1, 0xe7bc51, 1)
for (let i = 0; i < 100; i++) {
graphic1.drawCircle(Math.random() * 160, Math.random() * 100, 2)
}
// Example 6
//--------------------
const graphic1 = new PIXI.Graphics()
graphic1.position.set(700, 280)
graphic1.beginFill(0x6b6acf, 1)
graphic1.drawRect(0, 0, 160, 100)
graphic1.lineStyle(1, 0xe7bc51, 1)
for (let i = 0; i < 100; i++) {
graphic1.drawCircle(Math.random() * 160, Math.random() * 100, 2)
}
const graphic2 = new PIXI.Graphics()
graphic2.position.set(700, 280)
graphic2.beginFill(0xcedc9c, 1)
graphic2.drawRect(0, 0, 160, 100)
for (let i = 0; i < 1000; i++) {
graphic2.beginFill((Math.random() * 0xffffff) << 0, 1)
graphic2.lineStyle(1, (Math.random() * 0xffffff) << 0, 1)
graphic2.drawCircle(Math.random() * 160, Math.random() * 100, 2)
}
const graphic2 = new PIXI.Graphics()
graphic2.position.set(700, 280)
graphic2.beginFill(0xcedc9c, 1)
graphic2.drawRect(0, 0, 160, 100)
for (let i = 0; i < 1000; i++) {
graphic2.beginFill(Math.random() * 0xffffff << 0, 1)
graphic2.lineStyle(1, Math.random() * 0xffffff << 0, 1)
graphic2.drawCircle(Math.random() * 160, Math.random() * 100, 2)
}
const flippable6 = new Flippable(graphic1, graphic2, app.renderer, {
eulerX: -0.3
})
const flippable6 = new Flippable(graphic1, graphic2, app.renderer, {
eulerX: -.3
})
// Button
//--------------------
const button = new Button({
x: 400,
y: 10,
label: 'Toggle',
type: 'checkbox',
action: (e) => {
flippable1.toggle()
flippable2.toggle()
flippable3.toggle()
flippable4.toggle()
flippable5.toggle()
flippable6.toggle()
}
})
// Button
//--------------------
const button = new Button({
x: 400,
y: 10,
label: 'Toggle',
type: 'checkbox',
action: e => {
flippable1.toggle()
flippable2.toggle()
flippable3.toggle()
flippable4.toggle()
flippable5.toggle()
flippable6.toggle()
}
})
app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button)
}, {resolutionDependent: false})
</script>
</body>
app.scene.addChild(sprite1, sprite3, sprite5, sprite7, sprite9, graphic1, button)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>
lib/pixi/flippable.test.html
+1 -1
View File
@@ -13,7 +13,7 @@
</head>
<body onload="Doctest.run();" >
<h1>
Functional Tests
<a href="../index.html">lib.</a><a href="index.html">pixi.</a>Functional Tests
</h1>
<p>
If you want to test the UI in all functional aspects, it'is important to be able
lib/pixi/forcelayout.html
+162 -146
View File
@@ -1,164 +1,180 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="./lib/graphology.min.js"></script>
<script src="./lib/graphology-layout-forceatlas2.js"></script>
</head>
<body onload="Doctest.run()">
<h1>ForceLayout</h1>
<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.
</p>
<h2>Let's look at the D3 ForceLayout:</h2><br />
<canvas id="canvas" class="interactive"></canvas>
<script class="doctest">
<script src="./lib/graphology.min.js"></script>
<script src="./lib/graphology-layout-forceatlas2.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>ForceLayout</h1>
<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.
</p>
<h2>Let's look at the D3 ForceLayout:</h2>
<br />
<canvas id="canvas" class="interactive"></canvas>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
})
.setup()
.run()
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
}).setup().run()
app.loadTextures(
['./assets/circle.png'],
(textures) => {
// add sprites
//--------------------
const sprites = []
app.loadTextures([
'./assets/circle.png'
], textures => {
for (let i = 0; i < 100; i++) {
const sprite = new PIXI.Sprite(textures.get('./assets/circle.png'))
sprite.x = randomInt(0, app.size.width)
sprite.y = randomInt(0, app.size.height)
sprite.width = sprite.height = 2
sprite.anchor.set(0.5, 0.5)
sprite.__random = Math.random()
sprites.push(sprite)
}
// add sprites
//--------------------
const sprites = []
app.scene.addChild(...sprites)
for (let i = 0; i < 100; i++) {
const sprite = new PIXI.Sprite(textures.get('./assets/circle.png'))
sprite.x = randomInt(0, app.size.width)
sprite.y = randomInt(0, app.size.height)
sprite.width = sprite.height = 2
sprite.anchor.set(.5, .5)
sprite.__random = Math.random()
sprites.push(sprite)
}
// force simulation
//--------------------
const forceCollide = d3.forceCollide().radius((d) => d.width / 2 + 1)
const simulation = d3
.forceSimulation(sprites)
.on('tick', () => {
//forceCollide.radius(d => d.radius)
})
.force('collide', forceCollide)
.force('x', d3.forceX(app.center.x))
.force('y', d3.forceY(app.center.y))
.stop()
.force(
'radial',
d3.forceRadial(
(d) => {
return d.__random < 0.5 ? 60 : 160
},
app.center.x,
app.center.y
)
)
app.scene.addChild(...sprites)
d3.timeout(() => {
simulation.restart()
}, 500)
},
{ resolutionDependent: false }
)
</script>
// force simulation
//--------------------
const forceCollide = d3.forceCollide().radius(d => d.width / 2 + 1)
const simulation = d3.forceSimulation(sprites)
.on('tick', () => {
//forceCollide.radius(d => d.radius)
})
.force('collide', forceCollide)
.force('x', d3.forceX(app.center.x))
.force('y', d3.forceY(app.center.y))
.stop()
.force('radial', d3.forceRadial(d => {
return d.__random < .5 ? 60 : 160
}, app.center.x, app.center.y))
<h2>D3 ForceLayout with links:</h2>
<br />
<canvas id="canvas2" class="interactive"></canvas>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 420,
transparent: false
})
.setup()
.run()
d3.timeout(() => {
simulation.restart()
}, 500)
app2.loadTextures(
['./assets/circle2.png'],
(textures) => {
// add sprites
//--------------------
const sprites = []
}, {resolutionDependent: false})
for (let i = 0; i < 100; i++) {
const sprite = new PIXI.Sprite(textures.get('./assets/circle2.png'))
sprite.id = i
sprite.x = randomInt(0, app2.size.width)
sprite.y = randomInt(0, app2.size.height)
sprite.width = sprite.height = 16
sprite.anchor.set(0.5, 0.5)
sprites.push(sprite)
}
</script>
app2.scene.addChild(...sprites)
<h2>D3 ForceLayout with links:</h2><br />
<canvas id="canvas2" class="interactive"></canvas>
<script class="doctest">
const links = new PIXI.Graphics()
app2.scene.addChildAt(links, 0)
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 420,
transparent: false
}).setup().run()
// force simulation
//--------------------
const forceCollide = d3.forceCollide().radius((d) => d.width / 2 + 4)
const forceLink = d3
.forceLink([
{ source: 88, target: 8 },
{ source: 47, target: 55 },
{ source: 70, target: 1 },
{ source: 12, target: 12 },
{ source: 26, target: 33 },
{ source: 48, target: 53 },
{ source: 10, target: 70 },
{ source: 68, target: 61 },
{ source: 28, target: 65 },
{ source: 12, target: 34 },
{ source: 6, target: 55 },
{ source: 9, target: 16 },
{ source: 87, target: 96 },
{ source: 64, target: 24 },
{ source: 98, target: 14 },
{ source: 18, target: 23 },
{ source: 53, target: 62 },
{ source: 11, target: 53 },
{ source: 43, target: 23 },
{ source: 80, target: 9 },
{ source: 72, target: 88 },
{ source: 62, target: 3 },
{ source: 72, target: 15 },
{ source: 84, target: 25 },
{ source: 57, target: 58 },
{ source: 87, target: 19 }
])
.id((d) => d.id)
.strength(0.05)
const simulation = d3
.forceSimulation(sprites)
.on('tick', () => {
links.clear()
links.lineStyle(1, 0xfdc02f)
for (let link of forceLink.links()) {
links.moveTo(link.source.x, link.source.y)
links.lineTo(link.target.x, link.target.y)
}
})
.force('collide', forceCollide)
.force('link', forceLink)
.stop()
app2.loadTextures([
'./assets/circle2.png'
], textures => {
// add sprites
//--------------------
const sprites = []
for (let i = 0; i < 100; i++) {
const sprite = new PIXI.Sprite(textures.get('./assets/circle2.png'))
sprite.id = i
sprite.x = randomInt(0, app2.size.width)
sprite.y = randomInt(0, app2.size.height)
sprite.width = sprite.height = 16
sprite.anchor.set(.5, .5)
sprites.push(sprite)
}
app2.scene.addChild(...sprites)
const links = new PIXI.Graphics()
app2.scene.addChildAt(links, 0)
// force simulation
//--------------------
const forceCollide = d3.forceCollide().radius(d => d.width / 2 + 4)
const forceLink = d3.forceLink([
{source: 88, target: 8},
{source: 47, target: 55},
{source: 70, target: 1},
{source: 12, target: 12},
{source: 26, target: 33},
{source: 48, target: 53},
{source: 10, target: 70},
{source: 68, target: 61},
{source: 28, target: 65},
{source: 12, target: 34},
{source: 6, target: 55},
{source: 9, target: 16},
{source: 87, target: 96},
{source: 64, target: 24},
{source: 98, target: 14},
{source: 18, target: 23},
{source: 53, target: 62},
{source: 11, target: 53},
{source: 43, target: 23},
{source: 80, target: 9},
{source: 72, target: 88},
{source: 62, target: 3},
{source: 72, target: 15},
{source: 84, target: 25},
{source: 57, target: 58},
{source: 87, target: 19}
]).id(d => d.id).strength(.05)
const simulation = d3.forceSimulation(sprites)
.on('tick', () => {
links.clear()
links.lineStyle(1, 0xfdc02f)
for (let link of forceLink.links()) {
links.moveTo(link.source.x, link.source.y)
links.lineTo(link.target.x, link.target.y)
}
})
.force('collide', forceCollide)
.force('link', forceLink)
.stop()
d3.timeout(() => {
simulation.restart()
}, 1000)
}, {resolutionDependent: false})
</script>
</body>
d3.timeout(() => {
simulation.restart()
}, 1000)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>
lib/pixi/index.html
+66 -58
View File
@@ -1,63 +1,71 @@
<html>
<head>
<title>PIXI Lib Doctests</title>
<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" />
<link rel="stylesheet" href="../../css/index.css">
<head>
<title>PIXI Lib Doctests</title>
<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"
/>
<link rel="stylesheet" href="../../css/index.css" />
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.js"></script>
<template id="itemTemplate">
<a class="wrapper" href="">
<div class="preview">
<div class="thumbnail-container">
<div class="thumbnail">
<img class="icon" src="thumbnails/notfound.png">
<!-- <iframe src="" frameborder="0"></iframe> -->
</div>
<template id="itemTemplate">
<a class="wrapper" href="">
<div class="preview">
<div class="thumbnail-container">
<div class="thumbnail">
<img class="icon" src="thumbnails/notfound.png" />
<!-- <iframe src="" frameborder="0"></iframe> -->
</div>
</div>
<div class="title"></div>
</div>
<div class="title"></div>
</div>
</a>
</template>
</head>
<body>
<div id="container" class="container">
<a style="position: absolute; left: 22px; top: 12px;" target="_blank" href="http://www.iwm-tuebingen.de">IWM</a>
</div>
<script>
const index = new Index(itemTemplate, [
['PIXI.Application', 'application.html'],
['Application', 'app.html'],
['Badge', 'badge.html'],
['Button', 'button.html'],
['ButtonGroup', 'buttongroup.html'],
['Coordinates', 'coordinates.html'],
['DeepZoom', 'deepzoom/index.html'],
['Flippable', 'flippable.html'],
['LabeledGraphics', 'labeledgraphics.html'],
['List', 'list.html'],
['Maps', 'maps/index.html'],
['Message', 'message.html'],
['Modal', 'modal.html'],
['Tooltip', 'tooltip.html'],
['Popover', 'popover.html'],
['Popup', 'popup.html'],
['PopupMenu', 'popupmenu.html'],
['Progress', 'progress.html'],
['Slider', 'slider.html'],
['Switch', 'switch.html'],
['Volatile', 'volatile.html'],
['Scatter', 'scatter.html'],
['Flip Effect', 'flipeffect.html'],
['Blur Filter', 'blurfilter.html'],
['Text', 'text.html'],
['Text Transform', 'text-transform.html'],
['Scrollview', 'scrollview.html'],
['Stylus', 'stylus.html']
],
null)
index.load()
</script>
</body>
</a>
</template>
</head>
<body>
<div id="container" class="container">
<a style="position: absolute; left: 22px; top: 12px" target="_blank" href="http://www.iwm-tuebingen.de"
>IWMLib PIXI Doctests</a
>
</div>
<script>
const index = new Index(
itemTemplate,
[
['PIXI.Application', 'application.html'],
['Application', 'app.html'],
['Badge', 'badge.html'],
['Button', 'button.html'],
['ButtonGroup', 'buttongroup.html'],
['Coordinates', 'coordinates.html'],
['DeepZoom', 'deepzoom/index.html'],
['Flippable', 'flippable.html'],
['LabeledGraphics', 'labeledgraphics.html'],
['List', 'list.html'],
['Maps', 'maps/index.html'],
['Message', 'message.html'],
['Modal', 'modal.html'],
['Tooltip', 'tooltip.html'],
['Popover', 'popover.html'],
['Popup', 'popup.html'],
['PopupMenu', 'popupmenu.html'],
['Progress', 'progress.html'],
['Slider', 'slider.html'],
['Switch', 'switch.html'],
['Volatile', 'volatile.html'],
['Scatter', 'scatter.html'],
['Flip Effect', 'flipeffect.html'],
['Blur Filter', 'blurfilter.html'],
['Text', 'text.html'],
['Text Transform', 'text-transform.html'],
['Scrollview', 'scrollview.html'],
['Stylus', 'stylus.html']
],
null
)
index.load()
</script>
</body>
</html>
lib/pixi/labeledgraphics.html
+77 -69
View File
@@ -1,84 +1,92 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>LabeledGraphics</h1>
<p>
A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows
to place and reuse labels, i.e. PIXI.Text objects. The labels are cached by a given key
and only rendered anew if necessary.
</p>
<p><a href="../../doc/out/LabeledGraphics.html">JavaScript API</a></p>
<p>Let's look at an example:</p><br />
<canvas id="canvas1" class="interactive"></canvas>
<p>
What you should see: A box with a label.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas1,
width: 900,
height: 150
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>LabeledGraphics</h1>
<p>
A labeled graphics extends the PIXI.Graphics class with an ensureLabel method that allows to place and reuse
labels, i.e. PIXI.Text objects. The labels are cached by a given key and only rendered anew if necessary.
</p>
<p><a href="../../doc/out/LabeledGraphics.html">JavaScript API</a></p>
<p>Let's look at an example:</p>
<br />
<canvas id="canvas1" class="interactive"></canvas>
<p>What you should see: A box with a label.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas1,
width: 900,
height: 150
})
.setup()
.run()
const labeledBox = new LabeledGraphics()
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top'})
labeledBox.beginFill(0x333333)
labeledBox.drawRect(0, 0, 300, 100)
labeledBox.endFill()
const labeledBox = new LabeledGraphics()
labeledBox.ensureLabel('key', 'This is a label in a box', { justify: 'top' })
labeledBox.beginFill(0x333333)
labeledBox.drawRect(0, 0, 300, 100)
labeledBox.endFill()
app.scene.addChild(labeledBox)
</script>
<h2>Zoomable Labels</h2>
<p>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>
app.scene.addChild(labeledBox)
</script>
<h2>Zoomable Labels</h2>
<p>
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>
<canvas id="canvas2" class="interactive"></canvas>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 150
}).setup().run()
<canvas id="canvas2" class="interactive"></canvas>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 150
})
.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.`
const column = new LabeledGraphics()
const text = column.ensureLabel('key', loremIpsum, { maxWidth: 250, zoomFonts: true, justify: 'top', align: 'align'})
column.beginFill(0x333333)
column.drawRect(0, 0, 900, 150)
column.endFill()
const column = new LabeledGraphics()
const text = column.ensureLabel('key', loremIpsum, {
maxWidth: 250,
zoomFonts: true,
justify: 'top',
align: 'align'
})
column.beginFill(0x333333)
column.drawRect(0, 0, 900, 150)
column.endFill()
column.interactive = true
text.interactive = true
text.getLocalBounds()
column.interactive = true
text.interactive = true
text.getLocalBounds()
text.on('zoom', (event) => {
let factor = 1.0 + event.wheelDelta / 1000
text.zoom(factor)
})
text.on('zoom', (event) => {
let factor = 1.0 + event.wheelDelta / 1000
text.zoom(factor)
})
app2.view.addEventListener('mousewheel', (event) => {
text.emit('zoom', event)
event.preventDefault()
})
app2.view.addEventListener('mousewheel', (event) => {
text.emit('zoom', event)
event.preventDefault()
})
app2.scene.addChild(column)
</script>
</body>
app2.scene.addChild(column)
</script>
</body>
</html>
lib/pixi/list.html
+166 -166
View File
@@ -1,191 +1,191 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()">
<h1>List</h1>
<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>Let's look at some list examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Three lists, one horizontal and two vertical.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>List</h1>
<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>Let's look at some list examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Three lists, one horizontal and two vertical.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 420,
transparent: false
})
.setup()
.run()
app.loadTextures([
'./assets/elephant-1.jpg',
'./assets/elephant-2.jpg',
'./assets/elephant-3.jpg',
'./assets/elephant-4.jpg',
'./assets/elephant-5.jpg',
'./assets/bamboo-1.jpg',
'./assets/bamboo-2.jpg',
'./assets/bamboo-3.jpg',
'./assets/bamboo-4.jpg',
'./assets/bamboo-5.jpg'
], textures => {
app.loadTextures(
[
'./assets/elephant-1.jpg',
'./assets/elephant-2.jpg',
'./assets/elephant-3.jpg',
'./assets/elephant-4.jpg',
'./assets/elephant-5.jpg',
'./assets/bamboo-1.jpg',
'./assets/bamboo-2.jpg',
'./assets/bamboo-3.jpg',
'./assets/bamboo-4.jpg',
'./assets/bamboo-5.jpg'
],
(textures) => {
// Example 1
//--------------------
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
// Example 1
//--------------------
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
elephants.forEach((it) => it.scale.set(0.1, 0.1))
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
elephants.forEach(it => it.scale.set(.1, .1))
const elephantList = new List(elephants)
elephantList.x = 10
elephantList.y = 10
const elephantList = new List(elephants)
elephantList.x = 10
elephantList.y = 10
// Example 2
//--------------------
const bamboo1 = new PIXI.Sprite(textures.get('./assets/bamboo-1.jpg'))
const bamboo2 = new PIXI.Sprite(textures.get('./assets/bamboo-2.jpg'))
const bamboo3 = new PIXI.Sprite(textures.get('./assets/bamboo-3.jpg'))
const bamboo4 = new PIXI.Sprite(textures.get('./assets/bamboo-4.jpg'))
const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg'))
// Example 2
//--------------------
const bamboo1 = new PIXI.Sprite(textures.get('./assets/bamboo-1.jpg'))
const bamboo2 = new PIXI.Sprite(textures.get('./assets/bamboo-2.jpg'))
const bamboo3 = new PIXI.Sprite(textures.get('./assets/bamboo-3.jpg'))
const bamboo4 = new PIXI.Sprite(textures.get('./assets/bamboo-4.jpg'))
const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg'))
const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5]
bamboos.forEach((it) => it.scale.set(0.15, 0.15))
const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5]
bamboos.forEach(it => it.scale.set(.15, .15))
const bambooList = new List(bamboos, {
orientation: 'horizontal',
width: 300,
app
})
bambooList.x = 200
bambooList.y = 10
const bambooList = new List(bamboos, {
orientation: 'horizontal',
width: 300,
app
})
bambooList.x = 200
bambooList.y = 10
window.bambooList = bambooList
window.bambooList = bambooList
// Example 3
//--------------------
const style = { fontSize: 14, fill: 0xe7bc51 }
// Example 3
//--------------------
const style = {fontSize: 14, fill : 0xe7bc51}
const texts = []
for (let i = 0; i < 1000; i++) {
const text = new PIXI.Text(`Example Text ${i}`, style)
text.interactive = true
text.on('tap', (event) => console.log(`tap text ${i}`))
text.on('click', (event) => console.log(`click text ${i}`))
texts.push(text)
}
const texts = []
for (let i = 0; i < 1000; i++) {
const text = new PIXI.Text(`Example Text ${i}`, style)
text.interactive = true
text.on('tap', event => console.log(`tap text ${i}`))
text.on('click', event => console.log(`click text ${i}`))
texts.push(text)
}
const textList = new List(texts, {
orientation: 'vertical',
height: 200,
padding: 2,
app
})
textList.x = 200
textList.y = 200
const textList = new List(texts, {
orientation: 'vertical',
height: 200,
padding: 2,
app
})
textList.x = 200
textList.y = 200
// Add to scene
//--------------------
app.scene.addChild(elephantList, bambooList, textList)
},
{ resolutionDependent: false }
)
</script>
// Add to scene
//--------------------
app.scene.addChild(elephantList, bambooList, textList)
<h1>List in a Scatter</h1>
<p>A PixiJS UI List is displayed inside a ScatterObject.</p>
<canvas id="canvas2" class="interactive"></canvas>
<p>What you should see: A ScatterObject with a list in it.</p>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 420,
transparent: false
})
.setup()
.run()
}, {resolutionDependent: false})
</script>
app2.loadTextures(
[
'./assets/jungle.jpg',
'./assets/elephant-1.jpg',
'./assets/elephant-2.jpg',
'./assets/elephant-3.jpg',
'./assets/elephant-4.jpg',
'./assets/elephant-5.jpg'
],
(textures) => {
// ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app2.renderer, {
showBounds: true,
showPolygon: true,
app: app2,
stopEvents: true,
claimEvents: true
})
<h1>List in a Scatter</h1>
<p>
A PixiJS UI List is displayed inside a ScatterObject.
</p>
<canvas id="canvas2" class="interactive"></canvas>
<p>
What you should see: A ScatterObject with a list in it.
</p>
<script class="doctest">
app2.scene.addChild(scatterContainer)
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 420,
transparent: false
}).setup().run()
// ScatterObject
//--------------------
const jungle = new PIXI.Sprite(textures.get('./assets/jungle.jpg'))
jungle.interactive = true
const scatter = new DisplayObjectScatter(jungle, app2.renderer, {
x: 200,
y: 20,
startScale: 1,
minScale: 0.25,
maxScale: 1
})
app2.loadTextures([
'./assets/jungle.jpg',
'./assets/elephant-1.jpg',
'./assets/elephant-2.jpg',
'./assets/elephant-3.jpg',
'./assets/elephant-4.jpg',
'./assets/elephant-5.jpg'
], textures => {
scatterContainer.addChild(jungle)
// ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app2.renderer, {
showBounds: true,
showPolygon: true,
app: app2,
stopEvents: true,
claimEvents: true
})
// Example 1
//--------------------
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
app2.scene.addChild(scatterContainer)
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
elephants.forEach((it) => it.scale.set(0.15, 0.15))
// ScatterObject
//--------------------
const jungle = new PIXI.Sprite(textures.get('./assets/jungle.jpg'))
jungle.interactive = true
const scatter = new DisplayObjectScatter(jungle, app2.renderer, {
x: 200,
y: 20,
startScale: 1,
minScale: 0.25,
maxScale: 1
})
const elephantList = new List(elephants, {
height: 200
})
elephantList.x = 10
elephantList.y = 10
scatterContainer.addChild(jungle)
// Example 1
//--------------------
const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))
const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
elephants.forEach(it => it.scale.set(.15, .15))
const elephantList = new List(elephants, {
height: 200
})
elephantList.x = 10
elephantList.y = 10
// Add to scene
//--------------------
jungle.addChild(elephantList)
}, {resolutionDependent: false})
</script>
</body>
// Add to scene
//--------------------
jungle.addChild(elephantList)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>
lib/pixi/maps/geographics.html
+1 -1
View File
@@ -32,7 +32,7 @@
<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
in screen space, but in geographical coordinates. Therefore GeoGraphics must be
placed on GeoLayers to work properly. </p>
lib/pixi/maps/geojson.html
+1 -1
View File
@@ -85,7 +85,7 @@
</head>
<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
pairs
to display one (or multiple) Point, Line or Polygon.
lib/pixi/maps/map.html
+82 -108
View File
@@ -1,123 +1,103 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>Map</title>
<head>
<meta charset="UTF-8" />
<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="../../3rdparty/highlight/styles/vs2015.css" />
<link rel="stylesheet" href="../../../css/doctest.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='../../../css/doctest.css'>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
.controls {
display: flex;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>Map</h1>
<p>
The Map class shows a geographical map using a scatter element.
</p>
<h2 id="DeepZoomMap">DeepZoomMap</h2>
<p>Usually a DeepZoomMap will be used to display maps. It uses a <a
href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
the zoom factor.</p>
<canvas id="deepZoomCanvas">
</canvas>
<script>
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
(function () {
// Create the mapapp.
let app = window.DeepZoomMapApp = new MapApp({
view: deepZoomCanvas,
coordsLogging: true,
width: 512,
height: 512
})
// Load or specify a tilesConfig as required by the DeepZoomImage.
const tilesConfig = {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
<style>
.controls {
display: flex;
}
</style>
</head>
<body onload="Doctest.run()">
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Map</h1>
<p>The Map class shows a geographical map using a scatter element.</p>
// Create a projection.
const projection = new Projection.Mercator()
// Create a map data object.
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
// Create the map
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
// Add the map to the app.
app.addMap("osm", osmMap)
// Run the app when at least one map is set.
app.setup().run()
})()
</script>
<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
when there are no different tiles required or available.</p>
<canvas id="imageMapCanvas">
</canvas>
<script>
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
(function () {
<h2 id="DeepZoomMap">DeepZoomMap</h2>
<p>
Usually a DeepZoomMap will be used to display maps. It uses a
<a href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending
on the zoom factor.
</p>
<canvas id="deepZoomCanvas"> </canvas>
<script></script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
;(function () {
// Create the mapapp.
let app = window.ImageMapApp = new MapApp({
let app = (window.DeepZoomMapApp = new MapApp({
view: deepZoomCanvas,
coordsLogging: true,
width: 512,
height: 512
}))
// Load or specify a tilesConfig as required by the DeepZoomImage.
const tilesConfig = {
tileSize: 256,
format: 'png',
overlap: 0,
type: 'map',
height: 1024,
width: 1024,
path: '../assets/maps/osm',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
// Create a projection.
const projection = new Projection.Mercator()
// Create a map data object.
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
// Create the map
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
// Add the map to the app.
app.addMap('osm', osmMap)
// Run the app when at least one map is set.
app.setup().run()
})()
</script>
<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 when there are no different tiles required or available.
</p>
<canvas id="imageMapCanvas"> </canvas>
<script></script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
;(function () {
// Create the mapapp.
let app = (window.ImageMapApp = new MapApp({
view: imageMapCanvas,
coordsLogging: true,
width: 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.
// Therefore this loading step is required.
app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
app.loadSprites([mapTexture], (sprites) => spritesLoaded(sprites), {
resolutionDependent: false
})
spritesLoaded = (sprites) => {
// Create a projection.
const projection = new Projection.Robinson(10)
@@ -127,19 +107,13 @@
// Create the map
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
// Add the map to the app.
app.addMap("europe", imageMap)
app.addMap('europe', imageMap)
// Run the app when at least one map is set.
app.setup().run()
}
})()
</script>
</body>
</html>
</script>
</body>
</html>
lib/pixi/maps/mapapp.html
+140 -140
View File
@@ -1,163 +1,163 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>MapApp</title>
<head>
<meta charset="UTF-8" />
<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="../../3rdparty/highlight/styles/vs2015.css" />
<link rel="stylesheet" href="../../../css/doctest.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='../../../css/doctest.css'>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
.controls {
display: flex;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>MapApp</h1>
<p>
This class extends the PIXIApp to simplify the process of rendering
Maps in the canvas. For that reason, it contains useful functions
for an easier handling of maps in the canvas.
</p>
<canvas id="canvas"></canvas>
<div id="mapControl"></div>
<div id="cityControl" class="controls"></div>
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
<script>
let osmConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
<style>
.controls {
display: flex;
}
}
</style>
</head>
let testConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 128,
"format": "jpg",
"overlap": 0,
"type": "map",
"height": 4096,
"width": 4096,
"path": "../assets/maps/test",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
<body onload="Doctest.run()">
<h1>
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>MapApp
</h1>
<p>
This class extends the PIXIApp to simplify the process of rendering Maps in the canvas. For that reason, it
contains useful functions for an easier handling of maps in the canvas.
</p>
<canvas id="canvas"></canvas>
<div id="mapControl"></div>
<div id="cityControl" class="controls"></div>
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
<script>
let osmConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 256,
format: 'png',
overlap: 0,
type: 'map',
height: 1024,
width: 1024,
path: '../assets/maps/osm',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
}
</script>
<script class="doctest">
let capitals = {
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
// You may define a focus point ...
let focus = capitals.paris
// ... and a zoom level.
let zoom = 1
// Name has to be app (like all other PIXIApps).
const app = (window.app = new MapApp({
focus,
zoom,
view: canvas,
coordsLogging: true,
width: 512,
height: 512
}))
// As map an image of europe is used.
let europe = '../assets/maps/pixabay/europe.jpg'
//Preload all required sprites for the image map.
app.loadSprites([europe], sprites => ready(sprites), {
resolutionDependent: false
})
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
let testConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 128,
format: 'jpg',
overlap: 0,
type: 'map',
height: 4096,
width: 4096,
path: '../assets/maps/test',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
</script>
<script class="doctest">
let capitals = {
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
})
function ready(sprites) {
// You may define a focus point ...
let focus = capitals.paris
const cover = true
// ... and a zoom level.
let zoom = 1
// When resources are loaded, the ImageMap can be instantiated.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
// Name has to be app (like all other PIXIApps).
const app = (window.app = new MapApp({
focus,
zoom,
view: canvas,
coordsLogging: true,
maxScale: 1,
cover
width: 512,
height: 512
}))
// As map an image of europe is used.
let europe = '../assets/maps/pixabay/europe.jpg'
//Preload all required sprites for the image map.
app.loadSprites([europe], (sprites) => ready(sprites), {
resolutionDependent: false
})
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
app.addMap("test", testMap)
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
app.addMap("osm", deepZoomMap)
function ready(sprites) {
const cover = true
// Finally apply the map to the MapApp
app.setMap('europe', imageMap)
// The app requires a map before beeing able to run.
// So start the app here.
app.setup().run()
for (let [key, val] of Object.entries(app.mapList.maps)) {
let mapBtn = document.createElement("button")
mapBtn.innerText = key
mapBtn.addEventListener("click", () => {
app.mapLayer.changeMap(val)
// When resources are loaded, the ImageMap can be instantiated.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
coordsLogging: true,
maxScale: 1,
cover
})
mapControl.appendChild(mapBtn)
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), {
cover
})
app.addMap('test', testMap)
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), {
cover
})
app.addMap('osm', deepZoomMap)
// Finally apply the map to the MapApp
app.setMap('europe', imageMap)
// The app requires a map before beeing able to run.
// So start the app here.
app.setup().run()
for (let [key, val] of Object.entries(app.mapList.maps)) {
let mapBtn = document.createElement('button')
mapBtn.innerText = key
mapBtn.addEventListener('click', () => {
app.mapLayer.changeMap(val)
})
mapControl.appendChild(mapBtn)
}
}
}
for (let [key, val] of Object.entries(capitals)) {
let cityBtn = document.createElement("button")
cityBtn.innerText = key
cityBtn.addEventListener("click", () => {
app.mapLayer.map.moveTo(val)
})
cityControl.appendChild(cityBtn)
}
</script>
</body>
</html>
for (let [key, val] of Object.entries(capitals)) {
let cityBtn = document.createElement('button')
cityBtn.innerText = key
cityBtn.addEventListener('click', () => {
app.mapLayer.map.moveTo(val)
})
cityControl.appendChild(cityBtn)
}
</script>
</body>
</html>
lib/pixi/maps/mapprojection.html
+1 -1
View File
@@ -37,7 +37,7 @@
</head>
<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>
<h2>Static Squared World Map</h2>
lib/pixi/maps/maps.html
+1 -1
View File
@@ -30,7 +30,7 @@
</head>
<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
to
handle the maps.</p>
lib/pixi/maps/mapviewport.html
+141 -140
View File
@@ -1,163 +1,164 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>MapViewport</title>
<head>
<meta charset="UTF-8" />
<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="../../3rdparty/highlight/styles/vs2015.css" />
<link rel="stylesheet" href="../../../css/doctest.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='../../../css/doctest.css'>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
.controls {
display: flex;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>MapViewport</h1>
<p>
The MapViewport works under the hood of a map layer to track the informations about the current focus point and
zoom position.
This is important to maintain the same view when maps are changed.
</p>
<canvas id="canvas"></canvas>
<div id="mapControl"></div>
<div id="cityControl" class="controls"></div>
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
<script>
let osmConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
<style>
.controls {
display: flex;
}
}
</style>
</head>
let testConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 128,
"format": "jpg",
"overlap": 0,
"type": "map",
"height": 4096,
"width": 4096,
"path": "../assets/maps/test",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
<body onload="Doctest.run()">
<h1>
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
><a href="index.html">maps.</a>MapViewport
</h1>
<p>
The MapViewport works under the hood of a map layer to track the informations about the current focus point
and zoom position. This is important to maintain the same view when maps are changed.
</p>
<canvas id="canvas"></canvas>
<div id="mapControl"></div>
<div id="cityControl" class="controls"></div>
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
<script>
let osmConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 256,
format: 'png',
overlap: 0,
type: 'map',
height: 1024,
width: 1024,
path: '../assets/maps/osm',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
}
</script>
<script class="doctest">
let capitals = {
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
// You may define a focus point ...
let focus = capitals.paris
// ... and a zoom level.
let zoom = 1
// Name has to be app (like all other PIXIApps).
const app = (window.app = new MapApp({
focus,
zoom,
view: canvas,
coordsLogging: true,
width: 512,
height: 512
}))
// As map an image of europe is used.
let europe = '../assets/maps/pixabay/europe.jpg'
//Preload all required sprites for the image map.
app.loadSprites([europe], sprites => ready(sprites), {
resolutionDependent: false
})
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
let testConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 128,
format: 'jpg',
overlap: 0,
type: 'map',
height: 4096,
width: 4096,
path: '../assets/maps/test',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
</script>
<script class="doctest">
let capitals = {
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
})
function ready(sprites) {
// You may define a focus point ...
let focus = capitals.paris
const cover = true
// ... and a zoom level.
let zoom = 1
// When resources are loaded, the ImageMap can be instantiated.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
// Name has to be app (like all other PIXIApps).
const app = (window.app = new MapApp({
focus,
zoom,
view: canvas,
coordsLogging: true,
maxScale: 1,
cover
width: 512,
height: 512
}))
// As map an image of europe is used.
let europe = '../assets/maps/pixabay/europe.jpg'
//Preload all required sprites for the image map.
app.loadSprites([europe], (sprites) => ready(sprites), {
resolutionDependent: false
})
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
app.addMap("test", testMap)
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
app.addMap("osm", deepZoomMap)
function ready(sprites) {
const cover = true
// Finally apply the map to the MapApp
app.setMap('europe', imageMap)
// The app requires a map before beeing able to run.
// So start the app here.
app.setup().run()
for (let [key, val] of Object.entries(app.mapList.maps)) {
let mapBtn = document.createElement("button")
mapBtn.innerText = key
mapBtn.addEventListener("click", () => {
app.mapLayer.changeMap(val)
// When resources are loaded, the ImageMap can be instantiated.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
coordsLogging: true,
maxScale: 1,
cover
})
mapControl.appendChild(mapBtn)
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), {
cover
})
app.addMap('test', testMap)
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), {
cover
})
app.addMap('osm', deepZoomMap)
// Finally apply the map to the MapApp
app.setMap('europe', imageMap)
// The app requires a map before beeing able to run.
// So start the app here.
app.setup().run()
for (let [key, val] of Object.entries(app.mapList.maps)) {
let mapBtn = document.createElement('button')
mapBtn.innerText = key
mapBtn.addEventListener('click', () => {
app.mapLayer.changeMap(val)
})
mapControl.appendChild(mapBtn)
}
}
}
for (let [key, val] of Object.entries(capitals)) {
let cityBtn = document.createElement("button")
cityBtn.innerText = key
cityBtn.addEventListener("click", () => {
app.mapLayer.map.moveTo(val)
})
cityControl.appendChild(cityBtn)
}
</script>
</body>
</html>
for (let [key, val] of Object.entries(capitals)) {
let cityBtn = document.createElement('button')
cityBtn.innerText = key
cityBtn.addEventListener('click', () => {
app.mapLayer.map.moveTo(val)
})
cityControl.appendChild(cityBtn)
}
</script>
</body>
</html>
lib/pixi/maps/overlay.html
+257 -284
View File
@@ -1,304 +1,277 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>Overlay</title>
<head>
<meta charset="UTF-8" />
<title>Overlay</title>
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css" />
<link rel="stylesheet" href="../../3rdparty/highlight/styles/vs2015.css" />
<link rel="stylesheet" href="../../../css/doctest.css" />
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png" />
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
<link rel='stylesheet' href='../../../css/doctest.css'>
<style>
.inline-showcase {
display: flex;
}
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
</style>
</head>
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png">
<style>
.inline-showcase {
display: flex;
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1 class="title">Overlay</h1>
<!-- <a href="../../../" class="Documentation"></a> -->
<p class="description">
The overlayclass creates a convenient way to create and design
complex map overlays.
</p>
<canvas id="view" class="center"> </canvas>
<script>
let app = new MapApp({
view,
width: 512,
height: 512,
coordsLogging: true
})
var osmworld = '../assets/maps/osm/0/0/0.png'
let worlOSMData = new MapProjection(new Projection.Mercator())
function setupMap(textures) {
// Create the map!
let map = new ImageMap(
new PIXI.Sprite(textures.get(osmworld)),
worlOSMData
)
// Setup the map in the mapapp.
app.setMap('osm', map)
app.setup().run()
}
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
/**
* To create an overlay you just need to create a JSON file.
* The styles defined in the styles are cascading, meaning that
* the styles can be defined on the top level, or directly at the
* single items. If the style is not defined in the item, the top-level style will be used.
* If the top-level style is not defined either, the default style is applied.
*
* The structure of an overlay file is as follows:
*
* {
* //COMMENT: Top-Level
*
* //COMMENT: Frequently used properties are:
* size: 500,
* color: 0xFF00FF,
* fillAlpha:0.5
*
* icon: 'path/to/icon.png'
* iconColor: 0xFFFFFF,
* "items": [
* //COMMENT: Items are defined in the items array.
* {
* location: {
* //COMMENT: Location must be defined.
* x: LAT_VALUE,
* y: LNG_VALUE
* }
* },{
* color: 0xFF0000,
* location: {
* //COMMENT: Location must be defined.
* x: LAT_VALUE,
* y: LNG_VALUE
* }
* }
* ]
* }
*/
let exampleOverlayJSON = {
icon: '../../../assets/icons/place.png',
iconColor: "0x35aaea",
iconAnchor: { x: 0.5, y: 1 },
size: 5,
scale: 0.2,
disabledColor: 0x000000,
disabledIconColor: 0xCCCCCC,
disabledScale: 0.5,
color: '0x3FA7EE',
items: [
{
name: 'Custom Icon',
fontWeight: "bold",
icon: '../../../assets/icons/beenhere.png',
iconColor: 0x00ff00,
iconAlpha: 0.5,
size: 0,
labelVerticalAlignment: "underneath",
label: 'Abidjan',
location: {
x: 5.34947,
y: -4.006472
},
information:
'Here a custom icon is used. It overrides the icon setting in the global section.'
},
{
name: 'Berlin',
label: "enabled",
disabledLabel: "disabled",
location: {
x: 52.52543,
y: 13.385291
},
information:
'... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
enabled: false
},
{
name: 'Canberra',
location: {
x: -35.282025,
y: 149.128648
},
information:
'... ist die Hauptstadt und achtgrößte Stadt Australiens.'
},
{
name: 'Kapstadt',
location: {
x: -33.925448,
y: 18.416962
},
information:
`This item adjusts it's size according to the map.`
},
{
name: 'Moskau',
location: {
x: 55.750892,
y: 37.622799
},
information:
'... die kosmopolitische Hauptstadt Russlands, liegt im Westen des Landes und wird von der Moskwa durchflossen.'
},
{
name: 'Washington, D.C.',
location: {
x: 38.89565,
y: -77.031407
},
information:
'... ist die Hauptstadt der USA und eine kompakte Stadt am Potomac River, die an die Bundesstaaten Maryland und Virginia grenzt.'
},
{
name: 'Rio de Janeiro',
location: {
x: -22.8714,
y: -43.28049
},
information:
'... ist eine ausgedehnte brasilianische Küstenmetropole. '
},
{
name: 'Tokio',
type: "factory",
label: "factory",
location: {
x: 35.696278,
y: 139.731366
},
information:
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
}
]
}
</script>
<script class="doctest" data-collapsible data-title="Overlay">
let overlay = new Overlay(exampleOverlayJSON)
/**
* Textures should be loaded using the app's texture loader.
* With the findTexture method all required Textures within the
* overlays are loaded.
*/
let overlayTextures = overlay.findAllTextures()
let list = [osmworld].concat(overlayTextures)
app.loadTextures(list, textures => texturesLoaded(textures), {
resolutionDependent: false
})
function texturesLoaded(textures) {
/** When all textures are loaded .... */
setupMap(textures)
//Retrieve all overlay textures.
overlay.selectTextures(textures)
// Just some Helpers for the Popups.
let popup = null
let cleaner = null
const vanishingTime = 1000
// Factories must return a geographics object.
Overlay.createFactory("factory", (item) => {
// This is applied to every item in the overlay that has
// the type factory'
let geographics = new GeoPoint(item.location)
geographics.drawHandler.add((graphics) => {
graphics.beginFill(item.color, item.fillAlpha)
graphics.drawRect(0, 0, 10, 10)
})
let text = new PIXI.Text(item.name, {fontSize: 5})
geographics.graphics.addChild(text)
return geographics
<body onload="Doctest.run()">
<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> -->
<p class="description">The overlayclass creates a convenient way to create and design complex map overlays.</p>
<canvas id="view" class="center"> </canvas>
<script>
let app = new MapApp({
view,
width: 512,
height: 512,
coordsLogging: true
})
var osmworld = '../assets/maps/osm/0/0/0.png'
let worlOSMData = new MapProjection(new Projection.Mercator())
function setupMap(textures) {
// Create the map!
let map = new ImageMap(new PIXI.Sprite(textures.get(osmworld)), worlOSMData)
// Setup the map in the mapapp.
app.setMap('osm', map)
app.setup().run()
}
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
/**
*
* The actual PIXI elements are created when the overlay.create() is called.
* This returns an GeoLayer which can be directly put onto the map's Maplayer (or any other GeoLayer).
*
* INFO: MapLayer and GeoLayer are specialized container for PIXI. They are meant to
* place PIXI Elements according to their world-coordinates (lat/lng position), instead
* of actual pixel values.
*
* To create an overlay you just need to create a JSON file.
* The styles defined in the styles are cascading, meaning that
* the styles can be defined on the top level, or directly at the
* single items. If the style is not defined in the item, the top-level style will be used.
* If the top-level style is not defined either, the default style is applied.
*
* The structure of an overlay file is as follows:
*
* {
* //COMMENT: Top-Level
*
* //COMMENT: Frequently used properties are:
* size: 500,
* color: 0xFF00FF,
* fillAlpha:0.5
*
* icon: 'path/to/icon.png'
* iconColor: 0xFFFFFF,
* "items": [
* //COMMENT: Items are defined in the items array.
* {
* location: {
* //COMMENT: Location must be defined.
* x: LAT_VALUE,
* y: LNG_VALUE
* }
* },{
* color: 0xFF0000,
* location: {
* //COMMENT: Location must be defined.
* x: LAT_VALUE,
* y: LNG_VALUE
* }
* }
* ]
* }
*/
let exampleOverlayGeoLayer = overlay.create()
let exampleOverlayJSON = {
icon: '../../../assets/icons/place.png',
iconColor: '0x35aaea',
iconAnchor: { x: 0.5, y: 1 },
size: 5,
scale: 0.2,
disabledColor: 0x000000,
disabledIconColor: 0xcccccc,
disabledScale: 0.5,
color: '0x3FA7EE',
items: [
{
name: 'Custom Icon',
fontWeight: 'bold',
icon: '../../../assets/icons/beenhere.png',
iconColor: 0x00ff00,
iconAlpha: 0.5,
size: 0,
labelVerticalAlignment: 'underneath',
label: 'Abidjan',
location: {
x: 5.34947,
y: -4.006472
},
information: 'Here a custom icon is used. It overrides the icon setting in the global section.'
},
{
name: 'Berlin',
label: 'enabled',
disabledLabel: 'disabled',
location: {
x: 52.52543,
y: 13.385291
},
information: '... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
enabled: false
},
{
name: 'Canberra',
// When placed on the mapLayer, the PIXI Graphic elements, that
// reside inside GeoGraphic Objects are placed automatically at the
// correct coordinates of the map.
app.mapLayer.addLayer(exampleOverlayGeoLayer)
location: {
x: -35.282025,
y: 149.128648
},
information: '... ist die Hauptstadt und achtgrößte Stadt Australiens.'
},
{
name: 'Kapstadt',
location: {
x: -33.925448,
y: 18.416962
},
information: `This item adjusts it's size according to the map.`
},
{
name: 'Moskau',
// Just a helper function that clears the popups and removes
// a remaining cleaner timeout.
function clearPopup() {
if (popup) {
popup.parent.removeChild(popup)
popup = null
}
location: {
x: 55.750892,
y: 37.622799
},
information:
'... die kosmopolitische Hauptstadt Russlands, liegt im Westen des Landes und wird von der Moskwa durchflossen.'
},
{
name: 'Washington, D.C.',
if (cleaner != null) {
clearTimeout(cleaner)
location: {
x: 38.89565,
y: -77.031407
},
information:
'... ist die Hauptstadt der USA und eine kompakte Stadt am Potomac River, die an die Bundesstaaten Maryland und Virginia grenzt.'
},
{
name: 'Rio de Janeiro',
location: {
x: -22.8714,
y: -43.28049
},
information: '... ist eine ausgedehnte brasilianische Küstenmetropole. '
},
{
name: 'Tokio',
type: 'factory',
label: 'factory',
location: {
x: 35.696278,
y: 139.731366
},
information:
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
}
]
}
</script>
<script class="doctest" data-collapsible data-title="Overlay">
let overlay = new Overlay(exampleOverlayJSON)
/**
* Textures should be loaded using the app's texture loader.
* With the findTexture method all required Textures within the
* overlays are loaded.
*/
let overlayTextures = overlay.findAllTextures()
let list = [osmworld].concat(overlayTextures)
app.loadTextures(list, (textures) => texturesLoaded(textures), {
resolutionDependent: false
})
function texturesLoaded(textures) {
/** When all textures are loaded .... */
setupMap(textures)
//Retrieve all overlay textures.
overlay.selectTextures(textures)
// Just some Helpers for the Popups.
let popup = null
let cleaner = null
const vanishingTime = 1000
// Factories must return a geographics object.
Overlay.createFactory('factory', (item) => {
// This is applied to every item in the overlay that has
// the type factory'
let geographics = new GeoPoint(item.location)
geographics.drawHandler.add((graphics) => {
graphics.beginFill(item.color, item.fillAlpha)
graphics.drawRect(0, 0, 10, 10)
})
let text = new PIXI.Text(item.name, { fontSize: 5 })
geographics.graphics.addChild(text)
return geographics
})
/**
*
* The actual PIXI elements are created when the overlay.create() is called.
* This returns an GeoLayer which can be directly put onto the map's Maplayer (or any other GeoLayer).
*
* INFO: MapLayer and GeoLayer are specialized container for PIXI. They are meant to
* place PIXI Elements according to their world-coordinates (lat/lng position), instead
* of actual pixel values.
*
*/
let exampleOverlayGeoLayer = overlay.create()
// When placed on the mapLayer, the PIXI Graphic elements, that
// reside inside GeoGraphic Objects are placed automatically at the
// correct coordinates of the map.
app.mapLayer.addLayer(exampleOverlayGeoLayer)
// Just a helper function that clears the popups and removes
// a remaining cleaner timeout.
function clearPopup() {
if (popup) {
popup.parent.removeChild(popup)
popup = null
}
if (cleaner != null) {
clearTimeout(cleaner)
}
}
}
}
</script>
<script>
</script>
</body>
</html>
</script>
<script></script>
</body>
</html>
lib/pixi/maps/scatter.html
+1 -1
View File
@@ -25,7 +25,7 @@
</head>
<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>
<h2>CoverScatter</h2>
lib/pixi/maps/utils.html
+126 -114
View File
@@ -1,134 +1,146 @@
<!doctype html>
<html lang='en'>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Utils</title>
<link rel="stylesheet" href="../../../lib/3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../../../css/doctest.css" />
<script src="../../../lib/3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="all.js"></script>
<head>
<meta charset='UTF-8'>
<title>Utils</title>
<link rel='stylesheet' href='../iwmlib/lib/3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../iwmlib/lib/../css/doctest.css'>
<script src='../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
<script src='../iwmlib/lib/3rdparty/all.js'></script>
<script src='../iwmlib/lib/all.js'></script>
<script src='../iwmlib/lib/pixi/all.js'></script>
<script src="all.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<style>
body {
position: relative;
}
</style>
</head>
<body onload="Doctest.run()">
<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>
<body onload="Doctest.run()">
<h1>Utils</h1>
<p>Some utility functionalities for the Tuesch.</p>
<h2>Event Handler</h2>
<p>
The event handler class generalizes a common design principle in javascript. When an event occurs, that is
of relevance for other objects, then this event should be sent out to all objects, that are interested in
that event. Objects interested in that event, subscribe the event handler and get notified via a callback
function.
</p>
<script class="doctest">
let result = []
function a() {
result.push('a')
}
function b() {
result.push('b')
}
function c() {
result.push('c')
}
function d() {
result.push('d')
}
function e() {
result.push('e')
}
function f() {
result.push('f')
}
<h2>Event Handler</h2>
<p>
The event handler class generalizes a common design principle in javascript. When an event occurs, that is of relevance for
other objects, then this event should be sent out to all objects, that are interested in that event. Objects interested
in that event, subscribe the event handler and get notified via a callback function.
</p>
<script class="doctest">
let result = []
function a() { result.push("a") }
function b() { result.push("b") }
function c() { result.push("c") }
function d() { result.push("d") }
function e() { result.push("e") }
function f() { result.push("f") }
//Init and call.
let eventHandler = new EventHandler('manual', { listeners: [a, b] })
eventHandler.call()
Doctest.expect(result.join(','), ['a', 'b'].join(','))
result = []
//Init and call.
let eventHandler = new EventHandler("manual", { listeners: [a, b] })
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b"].join(","))
result = []
// Add single
eventHandler.add(c)
eventHandler.call()
Doctest.expect(result.join(','), ['a', 'b', 'c'].join(','))
result = []
// Add single
eventHandler.add(c)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "c"].join(","))
result = []
// Add multiple
eventHandler.addMultiple(d, e, f)
eventHandler.call()
Doctest.expect(result.join(','), ['a', 'b', 'c', 'd', 'e', 'f'].join(','))
result = []
// Add multiple
eventHandler.addMultiple(d, e, f)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "c", "d", "e", "f"].join(","))
result = []
//Remove inbetween
eventHandler.remove(c)
eventHandler.call()
Doctest.expect(result.join(','), ['a', 'b', 'd', 'e', 'f'].join(','))
result = []
//Remove inbetween
eventHandler.remove(c)
eventHandler.call()
Doctest.expect(result.join(","), ["a", "b", "d", "e", "f"].join(","))
result = []
// Remove first
eventHandler.remove(a)
eventHandler.call()
Doctest.expect(result.join(','), ['b', 'd', 'e', 'f'].join(','))
result = []
// Remove first
eventHandler.remove(a)
eventHandler.call()
Doctest.expect(result.join(","), ["b", "d", "e", "f"].join(","))
result = []
// Remove all remaining elements.
eventHandler.empty()
eventHandler.call()
Doctest.expect(result.join(','), [].join(','))
result = []
</script>
// Remove all remaining elements.
eventHandler.empty()
eventHandler.call()
Doctest.expect(result.join(","), [].join(","))
result = []
<h2>DomUtils</h2>
Utility functions that help handling the DOM.
<h3>positionOnElement(element, position)</h3>
Function that returns the global position for a normalized position.
</script>
<div
id="positionOnElementBox"
class="box"
style="
width: 512px;
height: 256px;
border: 1px solid black;
box-sizing: border-box;
transform: rotate(30deg);
margin: 100px;
"
></div>
<h2>DomUtils</h2>
<script class="doctest">
let target = document.getElementById('positionOnElementBox')
Utility functions that help handling the DOM.
window.addEventListener('load', () => {
let positions = [
[0, 0],
[0, 1],
[1, 0],
[0.5, 0.5],
[0.2, 0.2],
[0.2, 0.8],
[0.8, 0.2],
[0.8, 0.8]
]
<h3>positionOnElement(element, position)</h3>
Function that returns the global position for a normalized position.
positions.forEach((position) => {
position = { x: position[0], y: position[1] }
let transformedPosition = DomUtils.positionOnElement(target, position)
let dot = document.createElement('div')
const size = 10
<div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>
Object.assign(dot.style, {
width: size + 'px',
height: size + 'px',
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y - size / 2 + 'px',
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x - size / 2 + 'px',
position: 'absolute',
backgroundColor: 'green',
borderRadius: '50%'
})
<script class="doctest">
let target = document.getElementById("positionOnElementBox")
window.addEventListener("load", () => {
let positions = [
[0, 0],
[0, 1],
[1, 0],
[0.5,0.5],
[0.2, 0.2],
[0.2, 0.8],
[0.8, 0.2],
[0.8, 0.8],
]
positions.forEach(position => {
position = { x: position[0], y: position[1] }
let transformedPosition = DomUtils.positionOnElement(target, position)
let dot = document.createElement("div");
const size = 10;
Object.assign(dot.style, {
width: size + "px",
height: size + "px",
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y -size/2+ "px",
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x -size/2 + "px",
position: "absolute",
backgroundColor: "green",
borderRadius: "50%"
document.body.appendChild(dot)
})
document.body.appendChild(dot)
})
})
</script>
</body>
</html>
</script>
</body>
</html>
lib/pixi/message.html
+72 -69
View File
@@ -1,78 +1,81 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Message</h1>
<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.
</p>
<p><a href="../../doc/out/Message.html">JavaScript API</a></p>
<p>Let's look at some message examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Two buttons which start message windows.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Message</h1>
<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.
</p>
<p><a href="../../doc/out/Message.html">JavaScript API</a></p>
<p>Let's look at some message examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Two buttons which start message windows.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
})
.setup()
.run()
let button1 = new Button({
x: 0,
label: 'Default message',
action: e => {
const message = new Message({
app: app,
header: 'Dies ist die Überschrift',
content: 'Und dies ist der Text der Meldung.'
})
app.scene.addChild(message)
}
})
let button1 = new Button({
x: 0,
label: 'Default message',
action: (e) => {
const message = new Message({
app: app,
header: 'Dies ist die Überschrift',
content: 'Und dies ist der Text der Meldung.'
})
app.scene.addChild(message)
}
})
let button2 = new Button({
x: 170,
label: 'Bottom-centered message',
action: e => {
const message = new Message({
app: app,
content: 'Diese Nachricht hat nur einen Text.',
autoClose: false,
closeButton: true,
align: 'center',
verticalAlign: 'bottom'
})
app.scene.addChild(message)
}
})
let button2 = new Button({
x: 170,
label: 'Bottom-centered message',
action: (e) => {
const message = new Message({
app: app,
content: 'Diese Nachricht hat nur einen Text.',
autoClose: false,
closeButton: true,
align: 'center',
verticalAlign: 'bottom'
})
app.scene.addChild(message)
}
})
let button3 = new Button({
x: 0,
y: 60,
label: 'Message from PixiApp',
action: e => {
let message = app.message({
content: 'Diese Nachricht verschwindet gleich wieder.'
})
}
})
let button3 = new Button({
x: 0,
y: 60,
label: 'Message from PixiApp',
action: (e) => {
let message = app.message({
content: 'Diese Nachricht verschwindet gleich wieder.'
})
}
})
app.scene.addChild(button1, button2)
app.scene.addChild(button3)
</script>
</body>
app.scene.addChild(button1, button2)
app.scene.addChild(button3)
</script>
</body>
</html>
lib/pixi/modal.html
+161 -155
View File
@@ -1,169 +1,175 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Modal</h1>
<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.
</p>
<p>Let's look at some modal examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Some buttons whichs starts different modal dialogs.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false,
backgroundColor: 0xaa2211,
theme: 'light'
}).setup().run()
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Modal</h1>
<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.
</p>
<p>Let's look at some modal examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Some buttons whichs starts different modal dialogs.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false,
backgroundColor: 0xaa2211,
theme: 'light'
})
.setup()
.run()
let button1 = new Button({
x: 10,
y: 10,
label: 'Modal',
action: e => {
const modal = new Modal({app: app})
app.scene.addChild(modal)
}
})
let button1 = new Button({
x: 10,
y: 10,
label: 'Modal',
action: (e) => {
const modal = new Modal({ app: app })
app.scene.addChild(modal)
}
})
let button2 = new Button({
x: 100,
y: 10,
label: 'Modal mit Inhalt',
action: e => {
const modal = new Modal({
app: app,
closeOnBackground: false,
backgroundFillAlpha: .3,
header: 'Dies ist die Überschrift',
content: 'Und dies ist der Fließtext.'
})
app.scene.addChild(modal)
}
})
let button2 = new Button({
x: 100,
y: 10,
label: 'Modal mit Inhalt',
action: (e) => {
const modal = new Modal({
app: app,
closeOnBackground: false,
backgroundFillAlpha: 0.3,
header: 'Dies ist die Überschrift',
content: 'Und dies ist der Fließtext.'
})
app.scene.addChild(modal)
}
})
let button3 = new Button({
x: 270,
y: 10,
label: 'Modal mit Fließtext',
action: e => {
const modal = new Modal({
app: app,
maxWidth: 400,
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.'
})
app.scene.addChild(modal)
}
})
let button3 = new Button({
x: 270,
y: 10,
label: 'Modal mit Fließtext',
action: (e) => {
const modal = new Modal({
app: app,
maxWidth: 400,
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.'
})
app.scene.addChild(modal)
}
})
let button4 = new Button({
x: 470,
y: 10,
label: 'Modal nur Fließtext',
action: e => {
const modal = new Modal({
app: app,
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.'
})
app.scene.addChild(modal)
}
})
let button4 = new Button({
x: 470,
y: 10,
label: 'Modal nur Fließtext',
action: (e) => {
const modal = new Modal({
app: app,
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.'
})
app.scene.addChild(modal)
}
})
let button5 = new Button({
x: 10,
y: 70,
label: 'Modal mit Button',
action: e => {
const modal = new Modal({
app: app,
header: 'Modal mit Button',
content: 'Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.',
button: {label: 'OK', action: () => modal.hide()},
minWidth: 450,
maxWidth: 450,
closeButton: false
})
app.scene.addChild(modal)
}
})
let button5 = new Button({
x: 10,
y: 70,
label: 'Modal mit Button',
action: (e) => {
const modal = new Modal({
app: app,
header: 'Modal mit Button',
content: 'Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.',
button: { label: 'OK', action: () => modal.hide() },
minWidth: 450,
maxWidth: 450,
closeButton: false
})
app.scene.addChild(modal)
}
})
let button6 = new Button({
x: 190,
y: 70,
label: 'Modal mit ButtonGroup',
action: e => {
const modal = new Modal({
app: app,
header: 'Modal mit ButtonGroup',
content: 'Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr.',
buttonGroup: {
buttons: [
{label: 'Abbrechen', action: e => modal.hide()},
{label: 'Anwenden'}
]
},
minWidth: 450,
maxWidth: 450,
closeButton: false
})
app.scene.addChild(modal)
}
})
let button6 = new Button({
x: 190,
y: 70,
label: 'Modal mit ButtonGroup',
action: (e) => {
const modal = new Modal({
app: app,
header: 'Modal mit ButtonGroup',
content:
'Seit die Mathematiker über die Relativitätstheorie hergefallen sind, verstehe ich sie selbst nicht mehr.',
buttonGroup: {
buttons: [{ label: 'Abbrechen', action: (e) => modal.hide() }, { label: 'Anwenden' }]
},
minWidth: 450,
maxWidth: 450,
closeButton: false
})
app.scene.addChild(modal)
}
})
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
img.scale.set(.2, .2)
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
img.scale.set(0.2, 0.2)
let button7 = new Button({
x: 420,
y: 70,
label: 'Modal mit Foto',
action: e => {
const modal = new Modal({
app: app,
minWidth: 0,
padding: 0,
content: img,
closeButton: false,
closeOnPopup: true
})
app.scene.addChild(modal)
}
})
let button7 = new Button({
x: 420,
y: 70,
label: 'Modal mit Foto',
action: (e) => {
const modal = new Modal({
app: app,
minWidth: 0,
padding: 0,
content: img,
closeButton: false,
closeOnPopup: true
})
app.scene.addChild(modal)
}
})
let button8 = new Button({
x: 10,
y: 130,
label: 'App Modal',
action: e => {
let modal = app.modal({
header: 'Modal aus App gestartet',
content: 'Die größte Erfindung des menschlichen Geistes? - Die Zinseszinsen!',
minWidth: 80
})
}
})
let button8 = new Button({
x: 10,
y: 130,
label: 'App Modal',
action: (e) => {
let modal = app.modal({
header: 'Modal aus App gestartet',
content: 'Die größte Erfindung des menschlichen Geistes? - Die Zinseszinsen!',
minWidth: 80
})
}
})
app.scene.addChild(button1, button2, button3, button4)
app.scene.addChild(button5, button6, button7)
app.scene.addChild(button8)
</script>
</body>
app.scene.addChild(button1, button2, button3, button4)
app.scene.addChild(button5, button6, button7)
app.scene.addChild(button8)
</script>
</body>
</html>
lib/pixi/popover.html
+81 -59
View File
@@ -1,42 +1,55 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()" >
<h1>Popover</h1>
<p>
Add small overlay content, like those found in iOS, to any element for housing secondary information.
The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or
touches an element. The difference is that the popover can contain much more content.
</p>
<p>Let's look at an example of a popover:</p>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Popover</h1>
<p>
Add small overlay content, like those found in iOS, to any element for housing secondary information. The
Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or touches an
element. The difference is that the popover can contain much more content.
</p>
<p>Let's look at an example of a popover:</p>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
autoResize: false,
width: 850,
height: 450
})
.setup()
.run()
const app = new PIXIApp({
view: canvas,
autoResize: false,
width: 850, height: 450
}).setup().run()
let popover1 = new Popover({ title: 'Popover title', text: 'This is the popover text.', x: 150, y: 130 })
app.scene.addChild(popover1)
let popover1 = new Popover({title: "Popover title", text: "This is the popover text.", x: 150, y: 130})
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
})
app.scene.addChild(popover2)
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})
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'
})
app.scene.addChild(popover3)
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"})
app.scene.addChild(popover3)
const text4 = `
const text4 = `
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,
es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens
@@ -49,29 +62,38 @@ und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat.
`
let popover4 = new Popover({title: "Popover title 4", text: text4, x: 650, y: 120, width: 380, placement: "bottom", titleStyle: {
fontFamily: 'Arial',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#6b6acf', '#d7626c'], // gradient
stroke: '#393879',
strokeThickness: 6,
dropShadow: true,
dropShadowColor: '#e7bc51',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 3,
wordWrap: true,
wordWrapWidth: 440
}, textStyle: {
fontFamily: 'Arial',
fontSize: 10,
fill: "#76a9c9",
strokeThickness: 5,
wordWrap: true
}})
app.scene.addChild(popover4)
</script>
</body>
let popover4 = new Popover({
title: 'Popover title 4',
text: text4,
x: 650,
y: 120,
width: 380,
placement: 'bottom',
titleStyle: {
fontFamily: 'Arial',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#6b6acf', '#d7626c'], // gradient
stroke: '#393879',
strokeThickness: 6,
dropShadow: true,
dropShadowColor: '#e7bc51',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 3,
wordWrap: true,
wordWrapWidth: 440
},
textStyle: {
fontFamily: 'Arial',
fontSize: 10,
fill: '#76a9c9',
strokeThickness: 5,
wordWrap: true
}
})
app.scene.addChild(popover4)
</script>
</body>
</html>
lib/pixi/popup.html
+73 -67
View File
@@ -1,77 +1,83 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Popup</h1>
<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.
</p>
<p>Let's look at some popup examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Three popups and a button which opens a popup.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false,
backgroundColor: 0xcccccc
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Popup</h1>
<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.
</p>
<p>Let's look at some popup examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Three popups and a button which opens a popup.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false,
backgroundColor: 0xcccccc
})
.setup()
.run()
let popup1 = new Popup({
x: 20,
y: 20,
header: 'Popup'
})
let popup1 = new Popup({
x: 20,
y: 20,
header: 'Popup'
})
let popup2 = new Popup({
x: 140,
y: 30,
padding: 20,
header: 'Popup',
content: 'Man kann die Erfahrung nicht\nfrüh genug machen, wie\nentbehrlich man in der\nWelt ist.',
headerStyle: {fill: 0xaa3322},
textStyle: {fill: 0x5544ee, fontSize: 10}
})
let popup2 = new Popup({
x: 140,
y: 30,
padding: 20,
header: 'Popup',
content: 'Man kann die Erfahrung nicht\nfrüh genug machen, wie\nentbehrlich man in der\nWelt ist.',
headerStyle: { fill: 0xaa3322 },
textStyle: { fill: 0x5544ee, fontSize: 10 }
})
let popup3 = new Popup({
x: 330,
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.'
})
let popup3 = new Popup({
x: 330,
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.'
})
let button1 = new Button({
x: 20,
y: 160,
icon: 'speaker_notes',
action: () => {
app.scene.addChild(new Popup({
x: 100,
y: 100,
closeButton: true,
header: 'Die Kunst ist eine Vermittlerin des Unaussprechlichen.',
stroke: 0x336699,
strokeWidth: 3
}))
}
})
let button1 = new Button({
x: 20,
y: 160,
icon: 'speaker_notes',
action: () => {
app.scene.addChild(
new Popup({
x: 100,
y: 100,
closeButton: true,
header: 'Die Kunst ist eine Vermittlerin des Unaussprechlichen.',
stroke: 0x336699,
strokeWidth: 3
})
)
}
})
app.scene.addChild(popup1, popup2, popup3)
app.scene.addChild(button1)
</script>
</body>
app.scene.addChild(popup1, popup2, popup3)
app.scene.addChild(button1)
</script>
</body>
</html>
lib/pixi/popupmenu.html
+127 -108
View File
@@ -1,116 +1,135 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>PopupMenu</h1>
<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.
</p>
<p>Let's look at some popup menu examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Some buttons whichs open popup menues.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>PopupMenu</h1>
<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.
</p>
<p>Let's look at some popup menu examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Some buttons whichs open popup menues.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
})
.setup()
.run()
app.loadSprites([
'./assets/popupmenu-1.jpg',
'./assets/popupmenu-2.jpg',
'./assets/popupmenu-3.jpg',
'./assets/popupmenu-4.jpg',
'./assets/popupmenu-5.jpg'
], sprites => {
app.loadSprites(
[
'./assets/popupmenu-1.jpg',
'./assets/popupmenu-2.jpg',
'./assets/popupmenu-3.jpg',
'./assets/popupmenu-4.jpg',
'./assets/popupmenu-5.jpg'
],
(sprites) => {
const buttonGroup1 = new ButtonGroup({
buttons: [
{
icon: 'looks_1',
action: () => {
const popupmenu = new PopupMenu({
items: [
{ label: 'Speichern', action: () => alert('Gespeichert') },
{ label: 'Editieren', action: () => alert('Editiert') },
{ label: 'Löschen', action: () => alert('Gelöscht'), disabled: true }
]
})
app.scene.addChild(popupmenu)
}
},
{
icon: 'looks_2',
action: () => {
const popupmenu = new PopupMenu({
closeButton: true,
closeOnPopup: false,
closeOnAction: true,
items: [
{ label: 'Option 1' },
{ label: 'Option 2' },
{ label: 'Option 3', action: () => {} },
{ label: 'Option 4', action: () => {} },
{ label: 'Option 5' },
{ label: 'Option 6' }
]
})
popupmenu.x = 400
app.scene.addChild(popupmenu)
}
},
{
icon: 'looks_3',
action: () => {
const popupmenu = new PopupMenu({
items: [
{ label: 'Option 01', textStyle: { fill: 0x637a38, fontSize: 14 } },
{ label: 'Option 02', textStyle: { fill: 0x8ca351, fontSize: 14 } },
{ label: 'Option 03', textStyle: { fill: 0xb5d16a, fontSize: 14 } },
{ label: 'Option 04', textStyle: { fill: 0xcedc9c, fontSize: 14 } },
{ label: 'Option 05', textStyle: { fill: 0x8c6e31, fontSize: 14 } },
{ label: 'Option 06', textStyle: { fill: 0xbda038, fontSize: 14 } },
{ label: 'Option 07', textStyle: { fill: 0xe7bc51, fontSize: 14 } },
{ label: 'Option 08', textStyle: { fill: 0xe7cc94, fontSize: 14 } },
{ label: 'Option 09', textStyle: { fill: 0x843d39, fontSize: 14 } },
{ label: 'Option 10', textStyle: { fill: 0xae4a4a, fontSize: 14 } },
{ label: 'Option 11', textStyle: { fill: 0xd7626c, fontSize: 14 } },
{ label: 'Option 12', textStyle: { fill: 0xe8979c, fontSize: 14 } }
],
x: 155,
margin: 2
})
app.scene.addChild(popupmenu)
}
},
{
icon: 'looks_4',
action: () => {
sprites.forEach((sprite) => sprite.scale.set(0.33, 0.33))
const buttonGroup1 = new ButtonGroup({
buttons: [
{icon: 'looks_1', action: () => {
const popupmenu = new PopupMenu({
items: [
{label: 'Speichern', action: () => alert('Gespeichert')},
{label: 'Editieren', action: () => alert('Editiert')},
{label: 'Löschen', action: () => alert('Gelöscht'), disabled: true}
]
})
app.scene.addChild(popupmenu)
}},
{icon: 'looks_2', action: () => {
const popupmenu = new PopupMenu({
closeButton: true,
closeOnPopup: false,
closeOnAction: true,
items: [
{label: 'Option 1'},
{label: 'Option 2'},
{label: 'Option 3', action: () => {}},
{label: 'Option 4', action: () => {}},
{label: 'Option 5'},
{label: 'Option 6'}
]
})
popupmenu.x = 400
app.scene.addChild(popupmenu)
}},
{icon: 'looks_3', action: () => {
const popupmenu = new PopupMenu({
items: [
{label: 'Option 01', textStyle: {fill: 0x637a38, fontSize: 14}},
{label: 'Option 02', textStyle: {fill: 0x8ca351, fontSize: 14}},
{label: 'Option 03', textStyle: {fill: 0xb5d16a, fontSize: 14}},
{label: 'Option 04', textStyle: {fill: 0xcedc9c, fontSize: 14}},
{label: 'Option 05', textStyle: {fill: 0x8c6e31, fontSize: 14}},
{label: 'Option 06', textStyle: {fill: 0xbda038, fontSize: 14}},
{label: 'Option 07', textStyle: {fill: 0xe7bc51, fontSize: 14}},
{label: 'Option 08', textStyle: {fill: 0xe7cc94, fontSize: 14}},
{label: 'Option 09', textStyle: {fill: 0x843d39, fontSize: 14}},
{label: 'Option 10', textStyle: {fill: 0xae4a4a, fontSize: 14}},
{label: 'Option 11', textStyle: {fill: 0xd7626c, fontSize: 14}},
{label: 'Option 12', textStyle: {fill: 0xe8979c, fontSize: 14}}
],
x: 155,
margin: 2
})
app.scene.addChild(popupmenu)
}},
{icon: 'looks_4', action: () => {
const popupmenu = new PopupMenu({
items: [
{ content: sprites.get('./assets/popupmenu-1.jpg') },
{ content: sprites.get('./assets/popupmenu-2.jpg') },
{ content: sprites.get('./assets/popupmenu-3.jpg') },
{ content: sprites.get('./assets/popupmenu-4.jpg') },
{ content: sprites.get('./assets/popupmenu-5.jpg') }
],
x: 220,
margin: 2,
padding: 2
})
app.scene.addChild(popupmenu)
}
}
]
})
sprites.forEach(sprite => sprite.scale.set(.33, .33))
const popupmenu = new PopupMenu({
items: [
{content: sprites.get('./assets/popupmenu-1.jpg')},
{content: sprites.get('./assets/popupmenu-2.jpg')},
{content: sprites.get('./assets/popupmenu-3.jpg')},
{content: sprites.get('./assets/popupmenu-4.jpg')},
{content: sprites.get('./assets/popupmenu-5.jpg')}
],
x: 220,
margin: 2,
padding: 2
})
app.scene.addChild(popupmenu)
}}
]
})
app.scene.addChild(buttonGroup1)
}, {resolutionDependent: false})
</script>
</body>
app.scene.addChild(buttonGroup1)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>
lib/pixi/progress.html
+69 -65
View File
@@ -1,76 +1,80 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Progress</h1>
<p>
A progress bar can be used to show a user how far along he/she is in a process.
</p>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Progress</h1>
<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>
<p>Let's look at the progress bar example:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
}).setup().run()
<h2>Example 1</h2>
<p>Let's look at the progress bar example:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
})
.setup()
.run()
let progress1 = new Progress({
app: app
})
let progress1 = new Progress({
app: app
})
app.scene.addChild(progress1)
app.scene.addChild(progress1)
setTimeout(() => progress1.progress = 10, 500)
setTimeout(() => progress1.progress = 20, 800)
setTimeout(() => progress1.progress = 50, 900)
setTimeout(() => progress1.progress = 80, 1500)
setTimeout(() => progress1.progress = 100, 1700)
</script>
setTimeout(() => (progress1.progress = 10), 500)
setTimeout(() => (progress1.progress = 20), 800)
setTimeout(() => (progress1.progress = 50), 900)
setTimeout(() => (progress1.progress = 80), 1500)
setTimeout(() => (progress1.progress = 100), 1700)
</script>
<h2>Example 2</h2>
<canvas id="canvas2" class="interactive"></canvas>
<p>
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
</p>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 250,
transparent: false,
progress: {
height: 20,
fillActive: 0xe7bc51,
margin: 200
}
}).setup().run()
<h2>Example 2</h2>
<canvas id="canvas2" class="interactive"></canvas>
<p>
What you should see: When the page finished loading, a progress bar should overlay the PixiJS application.
</p>
<script class="doctest">
const app2 = new PIXIApp({
view: canvas2,
width: 900,
height: 250,
transparent: false,
progress: {
height: 20,
fillActive: 0xe7bc51,
margin: 200
}
})
.setup()
.run()
setTimeout(() => app2.progress(10), 1000)
setTimeout(() => app2.progress(30), 2000)
setTimeout(() => app2.progress(35), 2300)
setTimeout(() => app2.progress(50), 2800)
setTimeout(() => app2.progress(60), 3500)
setTimeout(() => app2.progress(90), 4500)
setTimeout(() => app2.progress(100), 5000)
</script>
</body>
setTimeout(() => app2.progress(10), 1000)
setTimeout(() => app2.progress(30), 2000)
setTimeout(() => app2.progress(35), 2300)
setTimeout(() => app2.progress(50), 2800)
setTimeout(() => app2.progress(60), 3500)
setTimeout(() => app2.progress(90), 4500)
setTimeout(() => app2.progress(100), 5000)
</script>
</body>
</html>
lib/pixi/resolution.html
+4 -3
View File
@@ -4,7 +4,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
@@ -21,6 +22,7 @@
</style>
</head>
<body>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Resolution</h1>
<canvas id="canvas"></canvas>
<script class="doctest">
@@ -33,10 +35,9 @@
app.setup()
app.run()
const textProps = {fontSize: 72, fill: 0xffffff}
const textProps = { fontSize: 72, fill: 0xffffff }
Mousetrap.bind(['1', '2', '3', '4', '5'], (event, key) => {
app.stage.removeChildren()
let sprite = null
lib/pixi/scatter-resolution-2.html
+10 -5
View File
@@ -4,13 +4,15 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body>
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter Resolution</h1>
<canvas id="canvas" />
<script>
const app = new PIXIApp({
@@ -29,7 +31,7 @@
'../examples/front__1_dpi600.png',
'../examples/front__1_dpi1200.png'
],
sprites => {
(sprites) => {
app.scatterContainerFront = new ScatterContainer(app.renderer, { app })
app.scatterContainerBack = new ScatterContainer(app.renderer, { app })
@@ -105,12 +107,15 @@
// renderTexture
//--------------------
sprites.forEach(value => {
sprites.forEach((value) => {
const matrix = new PIXI.Matrix()
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)
const sprite = new PIXI.Sprite(texture)
lib/pixi/scatter-resolution.html
+3 -1
View File
@@ -4,13 +4,15 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<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>
<script>
class ScatterApp extends PIXIApp {
lib/pixi/scatter.html
+67 -66
View File
@@ -1,39 +1,38 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIXI Scatter 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PIXI Scatter 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>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Scatter</h1>
<p>
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to
"scattered" layouts. The PIXI scatter defined here is a specialization of the
<a href="../scatter.html">abstract scatter pattern</a>.
</p>
<p>
PIXI scatter are organized in <code>ScatterContainer</code> parent nodes and
<code>DisplayObjectScatter</code> child nodes.
</p>
<body onload="Doctest.run()">
<h1>
Scatter
</h1>
<p>
Scatter objects are UI elements that can be rotated, scaled or moved around which typically leads to "scattered" layouts.
The PIXI scatter defined here is a specialization of the
<a href="../scatter.html">abstract scatter pattern</a>.
</p>
<p>PIXI scatter are organized in
<code>ScatterContainer</code> parent nodes and
<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
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>
<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>
<script class="doctest">
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, showPolygon: true, app: this })
}
@@ -45,13 +44,13 @@
for (let key of ['women', 'king']) {
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{
x: x, y: y,
startScale: 0.25,
minScale: 0.2,
maxScale: 1
})
let scatter = new DisplayObjectScatter(sprite, this.renderer, {
x: x,
y: y,
startScale: 0.25,
minScale: 0.2,
maxScale: 1
})
this.scene.addChild(sprite)
scatter.zoom(0.5, { animate: 1.0 })
x += 100
@@ -69,21 +68,16 @@
})
.setup()
.run()
</script>
<h1>
Two ScatterContainers in one canvas-element
</h1>
<h1>Two ScatterContainers in one canvas-element</h1>
<p>
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the King in the second
ScatterContainer. You should interact the two images independently of each other.
You see two ScatterContainers within the same HTML-canvas-element. The Queen is included in the first, the
King in the second ScatterContainer. You should interact the two images independently of each other.
</p>
<canvas id="canvas2" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class DoubleScatterApp extends PIXIApp {
setup() {
super.setup()
// Obey order in which ScatterContainer are created because the
@@ -103,7 +97,7 @@
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
x: 20,
y: 40,
startScale: .5
startScale: 0.5
})
this.scatterContainerBack.addChild(sprite1)
@@ -113,7 +107,7 @@
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
x: 280,
y: 40,
startScale: .5
startScale: 0.5
})
this.scatterContainerFront.addChild(sprite2)
return this
@@ -125,31 +119,31 @@
autoResize: false,
width: 450,
height: 250
}).setup().run()
})
.setup()
.run()
</script>
<h1>
Nested Scatter
</h1>
<h1>Nested Scatter</h1>
<p>
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed as scatter and
another scatter is displayed on the map.
Sometimes it can be required, that multiple scatters are nested in one another. E.g. when a map is displayed
as scatter and another scatter is displayed on the map.
</p>
<canvas id="canvas3" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
class NestedScatterApp extends PIXIApp {
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() {
super.setup()
// Add the queen to ScatterContainer one
let woman = PIXI.Sprite.from('../examples/women.jpeg')
woman.interactive = true
@@ -164,25 +158,30 @@
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
nestedKing.interactive = true
new DisplayObjectScatter(nestedKing, this.renderer, {
x: 20, y: 20, startScale: 0.3
x: 20,
y: 20,
startScale: 0.3
})
woman.addChild(nestedKing)
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
nestedQueen.interactive = true
new DisplayObjectScatter(nestedQueen, this.renderer, {
x: 40, y: 40, startScale: 0.3
x: 40,
y: 40,
startScale: 0.3
})
woman.addChild(nestedQueen)
let king = PIXI.Sprite.from('../examples/king.jpeg')
king.interactive = true
new DisplayObjectScatter(king, this.renderer, {
x: 200, y: 20, startScale: 1
x: 200,
y: 20,
startScale: 1
})
this.scene.addChild(king)
return this
}
}
@@ -192,7 +191,9 @@
autoResize: false,
width: 450,
height: 250
}).setup().run()
})
.setup()
.run()
</script>
</body>
</body>
</html>
lib/pixi/scrollview.html
+1 -1
View File
@@ -15,7 +15,7 @@
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<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><strong>Features:</strong></p>
<p>
lib/pixi/slider.html
+92 -88
View File
@@ -1,100 +1,104 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Slider</h1>
<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>
What you should see: Many sliders with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 450,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<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>
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>What you should see: Many sliders with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 450,
transparent: false
})
.setup()
.run()
let slider1 = new Slider({
x: 10,
y: 20
})
let slider1 = new Slider({
x: 10,
y: 20
})
let slider2 = new Slider({
x: 10,
y: 70,
value: 85,
tooltip: 'Start value 85',
container: app.view
})
let slider2 = new Slider({
x: 10,
y: 70,
value: 85,
tooltip: 'Start value 85',
container: app.view
})
let slider3 = new Slider({
x: 10,
y: 120,
min: -1000,
max: 2000,
value: 300,
disabled: true
})
let slider3 = new Slider({
x: 10,
y: 120,
min: -1000,
max: 2000,
value: 300,
disabled: true
})
let slider4 = new Slider({
x: 10,
y: 170,
value: -20,
width: 600,
height: 8,
fill: 0xda3031,
stroke: 0xf9bc2e,
strokeWidth: 2,
controlStrokeWidth: 4,
controlRadius: 24,
theme: 'red',
tooltip: 'Range: 0 - 100',
onStart: (event, slider) => {
console.log('Started', event)
},
onUpdate: (event, slider) => {
slider.tooltip.content = slider.value
},
onComplete: function(event) {
console.log('Completed', this)
}
})
let slider4 = new Slider({
x: 10,
y: 170,
value: -20,
width: 600,
height: 8,
fill: 0xda3031,
stroke: 0xf9bc2e,
strokeWidth: 2,
controlStrokeWidth: 4,
controlRadius: 24,
theme: 'red',
tooltip: 'Range: 0 - 100',
onStart: (event, slider) => {
console.log('Started', event)
},
onUpdate: (event, slider) => {
slider.tooltip.content = slider.value
},
onComplete: function (event) {
console.log('Completed', this)
}
})
let button1 = new Button({
x: 10,
y: 240,
label: 'Toggle-slider-button',
type: 'checkbox',
active: true,
action: e => {
slider5.visible = !slider5.visible
}
})
let button1 = new Button({
x: 10,
y: 240,
label: 'Toggle-slider-button',
type: 'checkbox',
active: true,
action: (e) => {
slider5.visible = !slider5.visible
}
})
let slider5 = new Slider({
x: 230,
y: 250
})
let slider5 = new Slider({
x: 230,
y: 250
})
app.scene.addChild(slider1, slider2, slider3, slider4)
app.scene.addChild(button1, slider5)
</script>
</body>
app.scene.addChild(slider1, slider2, slider3, slider4)
app.scene.addChild(button1, slider5)
</script>
</body>
</html>
lib/pixi/stylus.html
+146 -146
View File
@@ -1,156 +1,156 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<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="../../css/doctest.css" />
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>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>
What you should see: A blank sytlus canvas.
</p>
<script class="doctest">
class StylusApp extends PIXIApp {
sceneFactory() {
return new Stylus(this.renderer)
}
setup() {
let buttonColor = 0x666666
super.setup()
this.tools = new ButtonGroup({
type: 'checkbox',
margin: 0,
x: 16,
y: 16,
fill: buttonColor,
buttons: [{
icon: 'edit',
iconColorActive: 0xFFFF00,
action: (event, button) => this.toggleEditMode()
},
{
icon: 'undo',
action: (event, button) => this.undo(button)
},
{
icon: 'redo',
action: (event, button) => this.redo(button)
},
{
icon: 'delete',
action: (event, button) => this.clear(button)
}
]
})
this.scene.addChild(this.tools)
let defaults = {
icon: 'brightness_1',
action: (event, button) => this.selectColor(button),
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0
<body onload="Doctest.run()">
<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>What you should see: A blank sytlus canvas.</p>
<script class="doctest">
class StylusApp extends PIXIApp {
sceneFactory() {
return new Stylus(this.renderer)
}
this.palette = new ButtonGroup({
type: "radio",
x: 200,
y: 16,
margin: 0,
strokeAlpha: 0,
fill: buttonColor,
buttons: [
Object.assign({}, defaults, {
iconColor: 0x111111,
iconColorActive: 0x111111
}), // tooltip: "Black",
Object.assign({}, defaults, {
iconColor: 0xFFFF00,
iconColorActive: 0xFFFF00
}), // tooltip: "Yellow",
Object.assign({}, defaults, {
iconColor: 0x00FF00,
iconColorActive: 0x00FF00
}), // tooltip: "Green",
Object.assign({}, defaults, {
iconColor: 0xFF00FF,
iconColorActive: 0xFF00FF
}) // tooltip: "Violet",
]
})
this.scene.addChild(this.palette)
this.scene.interactive = false
setup() {
let buttonColor = 0x666666
super.setup()
this.tools = new ButtonGroup({
type: 'checkbox',
margin: 0,
x: 16,
y: 16,
fill: buttonColor,
buttons: [
{
icon: 'edit',
iconColorActive: 0xffff00,
action: (event, button) => this.toggleEditMode()
},
{
icon: 'undo',
action: (event, button) => this.undo(button)
},
{
icon: 'redo',
action: (event, button) => this.redo(button)
},
{
icon: 'delete',
action: (event, button) => this.clear(button)
}
]
})
this.scene.addChild(this.tools)
let defaults = {
icon: 'brightness_1',
action: (event, button) => this.selectColor(button),
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0
}
this.palette = new ButtonGroup({
type: 'radio',
x: 200,
y: 16,
margin: 0,
strokeAlpha: 0,
fill: buttonColor,
buttons: [
Object.assign({}, defaults, {
iconColor: 0x111111,
iconColorActive: 0x111111
}), // tooltip: "Black",
Object.assign({}, defaults, {
iconColor: 0xffff00,
iconColorActive: 0xffff00
}), // tooltip: "Yellow",
Object.assign({}, defaults, {
iconColor: 0x00ff00,
iconColorActive: 0x00ff00
}), // tooltip: "Green",
Object.assign({}, defaults, {
iconColor: 0xff00ff,
iconColorActive: 0xff00ff
}) // tooltip: "Violet",
]
})
this.scene.addChild(this.palette)
this.scene.interactive = false
}
toggleEditMode() {
this.scene.interactive = !this.scene.interactive
console.log('this.scene.interactive')
}
selectColor(button) {
this.scene.color = button.opts.iconColor
}
undo(button) {
this.scene.undo()
setTimeout(() => {
button.active = false
}, 200)
}
redo(button) {
this.scene.redo()
setTimeout(() => {
button.active = false
}, 200)
}
clear(button) {
this.scene.clearAll()
setTimeout(() => {
button.active = false
}, 200)
}
}
toggleEditMode() {
this.scene.interactive = !this.scene.interactive
console.log("this.scene.interactive")
}
selectColor(button) {
this.scene.color = button.opts.iconColor
}
undo(button) {
this.scene.undo()
setTimeout(() => {
button.active = false
}, 200)
}
redo(button) {
this.scene.redo()
setTimeout(() => {
button.active = false
}, 200)
}
clear(button) {
this.scene.clearAll()
setTimeout(() => {
button.active = false
}, 200)
}
}
const app = new StylusApp({
view: canvas,
width: 640,
height: 480,
autoResize: false
})
window.app = app
app.setup()
app.run()
</script>
<h2>
References
</h2>
<ul>
<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
Techniques</a></li>
<li><a href="https://github.com/mattdesl/polyline-normals">Polyline Normals</a></li>
</ul>
</body>
const app = new StylusApp({
view: canvas,
width: 640,
height: 480,
autoResize: false
})
window.app = app
app.setup()
app.run()
</script>
<h2>References</h2>
<ul>
<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 Techniques</a
>
</li>
<li><a href="https://github.com/mattdesl/polyline-normals">Polyline Normals</a></li>
</ul>
</body>
</html>
lib/pixi/switch.html
+130 -112
View File
@@ -1,125 +1,143 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Switch</h1>
<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>
What you should see: Many switches with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<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>
<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>What you should see: Many switches with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
})
.setup()
.run()
let switch1 = new Switch({
x: 10,
y: 20
})
let switch1 = new Switch({
x: 10,
y: 20
})
let switch2 = new Switch({
x: 90,
y: 20,
fill: 0xfd355a,
fillActive: 0x5954d3,
controlFill: 0xfecd2d,
controlFillActive: 0xfd413b,
strokeActiveWidth: 4,
controlStrokeActive: 0x50d968,
controlStrokeActiveWidth: 12,
controlStrokeActiveAlpha: .8,
tooltip: 'Dies ist ein Switch'
})
let switch2 = new Switch({
x: 90,
y: 20,
fill: 0xfd355a,
fillActive: 0x5954d3,
controlFill: 0xfecd2d,
controlFillActive: 0xfd413b,
strokeActiveWidth: 4,
controlStrokeActive: 0x50d968,
controlStrokeActiveWidth: 12,
controlStrokeActiveAlpha: 0.8,
tooltip: 'Dies ist ein Switch'
})
let switch3 = new Switch({
x: 170,
y: 20,
width: 100,
height: 40,
fill: 0xfe9727,
fillAlpha: .5,
fillActive: 0x5954d3,
stroke: 0x5ec7f8,
strokeWidth: 12,
strokeActive: 0xfd355a,
strokeActiveWidth: 4,
controlFill: 0xfecd2d,
controlFillActive: 0xfd413b,
controlStroke: 0xfd413b,
controlStrokeWidth: 8,
controlStrokeActive: 0x50d968,
controlStrokeActiveWidth: 16,
controlStrokeActiveAlpha: .8,
controlRadiusActive: 12,
duration: 3,
durationActive: 1
})
let switch3 = new Switch({
x: 170,
y: 20,
width: 100,
height: 40,
fill: 0xfe9727,
fillAlpha: 0.5,
fillActive: 0x5954d3,
stroke: 0x5ec7f8,
strokeWidth: 12,
strokeActive: 0xfd355a,
strokeActiveWidth: 4,
controlFill: 0xfecd2d,
controlFillActive: 0xfd413b,
controlStroke: 0xfd413b,
controlStrokeWidth: 8,
controlStrokeActive: 0x50d968,
controlStrokeActiveWidth: 16,
controlStrokeActiveAlpha: 0.8,
controlRadiusActive: 12,
duration: 3,
durationActive: 1
})
let switch4 = new Switch({
x: 10,
y: 90,
active: true
})
let switch4 = new Switch({
x: 10,
y: 90,
active: true
})
let switch5 = new Switch({
x: 90,
y: 90,
disabled: true
})
let switch5 = new Switch({
x: 90,
y: 90,
disabled: true
})
let switch6 = new Switch({
x: 170,
y: 90,
active: true,
disabled: true
})
let switch6 = new Switch({
x: 170,
y: 90,
active: true,
disabled: true
})
let switch7 = new Switch({
x: 250,
y: 100,
width: 100,
height: 10,
fill: 0xffffff,
fillActive: 0xffffff,
duration: .2,
durationActive: .1,
controlFill: 0x00ff00,
controlFillActive: 0xff0000,
controlRadius: 15,
controlRadiusActive: 12,
controlStroke: 0x00aa00,
controlStrokeWidth: 3,
controlStrokeActive: 0xaa0000,
controlStrokeActiveWidth: 2,
tooltip: {
container: app.scene,
content: 'Das Gesetz ist der Freund des Schwachen.'
}
})
let switch7 = new Switch({
x: 250,
y: 100,
width: 100,
height: 10,
fill: 0xffffff,
fillActive: 0xffffff,
duration: 0.2,
durationActive: 0.1,
controlFill: 0x00ff00,
controlFillActive: 0xff0000,
controlRadius: 15,
controlRadiusActive: 12,
controlStroke: 0x00aa00,
controlStrokeWidth: 3,
controlStrokeActive: 0xaa0000,
controlStrokeActiveWidth: 2,
tooltip: {
container: app.scene,
content: 'Das Gesetz ist der Freund des Schwachen.'
}
})
app.scene.addChild(switch1, switch2, switch3)
app.scene.addChild(switch4, switch5, switch6, switch7)
</script>
</body>
app.scene.addChild(switch1, switch2, switch3)
app.scene.addChild(switch4, switch5, switch6, switch7)
</script>
</body>
</html>
lib/pixi/text-transform.html
+148 -144
View File
@@ -1,162 +1,166 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
<script src="../3rdparty/d3.min.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Text</h1>
<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).
</p>
<p>Let's look at some tooltip examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Ten colored circles with different tooltips.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 500,
transparent: false,
backgroundColor: 0x2c2d2b
}).setup().run()
<script src="../3rdparty/d3.min.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Text</h1>
<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).
</p>
<p>Let's look at some tooltip examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Ten colored circles with different tooltips.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 500,
transparent: false,
backgroundColor: 0x2c2d2b
})
.setup()
.run()
const container = new PIXI.Graphics()
container.beginFill(0x58595b, 1)
container.drawRect(0, 0, 700, 300)
container.pivot.set(container.width / 2, container.height / 2)
container.position.set(450, 250)
app.scene.addChild(container)
const container = new PIXI.Graphics()
container.beginFill(0x58595b, 1)
container.drawRect(0, 0, 700, 300)
container.pivot.set(container.width / 2, container.height / 2)
container.position.set(450, 250)
app.scene.addChild(container)
const sixthWidth = container.width / 6
const halfHeight = container.height / 2
const sixthWidth = container.width / 6
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
//--------------------
const text = new PIXI.Text('Bibliothek\nStuttgart', { fontSize: 50 })
text.x = sixthWidth
text.y = halfHeight
text.pivot.set(text.width / 2, text.height / 2)
container.addChild(text)
// PIXI.Text
//--------------------
const text = new PIXI.Text('Bibliothek\nStuttgart', {fontSize: 50})
text.x = sixthWidth
text.y = halfHeight
text.pivot.set(text.width / 2, text.height / 2)
container.addChild(text)
// PIXI.BitmapText
//--------------------
const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
font: '50px Arial',
align: 'left'
})
bitmapText.x = sixthWidth * 3
bitmapText.y = halfHeight
bitmapText.pivot.set(bitmapText.width / 2, bitmapText.height / 2)
container.addChild(bitmapText)
// PIXI.BitmapText
//--------------------
const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
font: '50px Arial',
align: 'left'
})
bitmapText.x = sixthWidth * 3
bitmapText.y = halfHeight
bitmapText.pivot.set(bitmapText.width / 2, bitmapText.height / 2)
container.addChild(bitmapText)
// PIXI.Sprite
//--------------------
const sprite = sprites.get('./assets/stuttgart-library.jpg')
sprite.scale.set(0.05, 0.05)
sprite.x = sixthWidth * 5
sprite.y = halfHeight
sprite.anchor.set(0.5, 0.5)
container.addChild(sprite)
// PIXI.Sprite
//--------------------
const sprite = sprites.get('./assets/stuttgart-library.jpg')
sprite.scale.set(.05, .05)
sprite.x = sixthWidth * 5
sprite.y = halfHeight
sprite.anchor.set(.5, .5)
container.addChild(sprite)
// Scale
//--------------------
const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([0.05, 1, 50])
const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([0.1, 1, 10])
const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([0.005, 0.05, 0.5])
// Scale
//--------------------
const scaleContainer = d3.scaleLinear().domain([0, 50, 100]).range([.05, 1, 50])
const scaleTexts = d3.scaleLinear().domain([0, 50, 100]).range([.1, 1, 10])
const scaleSprite = d3.scaleLinear().domain([0, 50, 100]).range([.005, .05, .5])
// Sliders
//--------------------
const sliderContainer = new Slider({
value: 50,
width: 500,
tooltip: 'Scale Container',
container: app.view,
onUpdate: function () {
const value = scaleContainer(this.value)
container.scale.set(value, value)
}
})
sliderContainer.x = app.size.width / 2 - sliderContainer.width / 2
sliderContainer.y = 10
app.scene.addChild(sliderContainer)
// Sliders
//--------------------
const sliderContainer = new Slider({
value: 50,
width: 500,
tooltip: 'Scale Container',
container: app.view,
onUpdate: function() {
const value = scaleContainer(this.value)
container.scale.set(value, value)
}
})
sliderContainer.x = app.size.width / 2 - sliderContainer.width / 2
sliderContainer.y = 10
app.scene.addChild(sliderContainer)
const sliderContainerAll = new Slider({
value: 50,
width: 500,
tooltip: 'Scale Container All',
container: app.view,
onUpdate: function () {
const value = scaleContainer(this.value)
container.scale.set(value, value)
const sliderContainerAll = new Slider({
value: 50,
width: 500,
tooltip: 'Scale Container All',
container: app.view,
onUpdate: function() {
const value = scaleContainer(this.value)
container.scale.set(value, value)
text.scale.set(1 / value, 1 / value)
bitmapText.scale.set(1 / value, 1 / value)
}
})
sliderContainerAll.x = app.size.width / 2 - sliderContainerAll.width / 2
sliderContainerAll.y = 55
app.scene.addChild(sliderContainerAll)
text.scale.set(1 / value, 1 / value)
bitmapText.scale.set(1 / value, 1 / value)
}
})
sliderContainerAll.x = app.size.width / 2 - sliderContainerAll.width / 2
sliderContainerAll.y = 55
app.scene.addChild(sliderContainerAll)
const sliderText = new Slider({
value: 50,
tooltip: 'Scale PIXI.Text',
container: app.view,
onUpdate: function () {
const value = scaleTexts(this.value)
text.scale.set(value, value)
}
})
sliderText.x = app.size.width / 6 - sliderText.width / 2
sliderText.y = app.size.height - 10 - sliderText.height
app.scene.addChild(sliderText)
const sliderText = new Slider({
value: 50,
tooltip: 'Scale PIXI.Text',
container: app.view,
onUpdate: function() {
const value = scaleTexts(this.value)
text.scale.set(value, value)
}
})
sliderText.x = app.size.width / 6 - sliderText.width / 2
sliderText.y = app.size.height - 10 - sliderText.height
app.scene.addChild(sliderText)
const sliderBitmapText = new Slider({
value: 50,
tooltip: 'Scale PIXI.extras.BitmapText',
container: app.view,
onUpdate: function () {
const value = scaleTexts(this.value)
bitmapText.scale.set(value, value)
}
})
sliderBitmapText.x = (app.size.width / 6) * 3 - sliderBitmapText.width / 2
sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
app.scene.addChild(sliderBitmapText)
const sliderBitmapText = new Slider({
value: 50,
tooltip: 'Scale PIXI.extras.BitmapText',
container: app.view,
onUpdate: function() {
const value = scaleTexts(this.value)
bitmapText.scale.set(value, value)
}
})
sliderBitmapText.x = app.size.width / 6 * 3 - sliderBitmapText.width / 2
sliderBitmapText.y = app.size.height - 10 - sliderBitmapText.height
app.scene.addChild(sliderBitmapText)
const sliderSprite = new Slider({
value: 50,
tooltip: 'Scale PIXI.Sprite',
container: app.view,
onUpdate: function() {
const value = scaleSprite(this.value)
sprite.scale.set(value, value)
}
})
sliderSprite.x = app.size.width / 6 * 5 - sliderSprite.width / 2
sliderSprite.y = app.size.height - 10 - sliderSprite.height
app.scene.addChild(sliderSprite)
}, {resolutionDependent: false})
</script>
</body>
const sliderSprite = new Slider({
value: 50,
tooltip: 'Scale PIXI.Sprite',
container: app.view,
onUpdate: function () {
const value = scaleSprite(this.value)
sprite.scale.set(value, value)
}
})
sliderSprite.x = (app.size.width / 6) * 5 - sliderSprite.width / 2
sliderSprite.y = app.size.height - 10 - sliderSprite.height
app.scene.addChild(sliderSprite)
},
{ resolutionDependent: false }
)
</script>
</body>
</html>
lib/pixi/text.html
+38 -37
View File
@@ -1,44 +1,45 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Text</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
the button type to "checkbox".
</p>
<p><a href="../../doc/out/Text.html">JavaScript API</a></p>
<p>Let's look at some text examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Many texts with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 600,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Text</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
between active/inactive, set the button type to "checkbox".
</p>
<p><a href="../../doc/out/Text.html">JavaScript API</a></p>
<p>Let's look at some text examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Many texts with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 600,
transparent: false
})
.setup()
.run()
const text1 = new Text({x: 10, y: 10})
const text1 = new Text({ x: 10, y: 10 })
app.scene.addChild(text1)
</script>
</body>
</html>
app.scene.addChild(text1)
</script>
</body>
</html>
lib/pixi/theme.html
+104 -109
View File
@@ -1,123 +1,118 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Theme</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make
buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set
the button type to "checkbox".
</p>
<p>Let's look at some button examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Many buttons with very different styling and behaviour.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Theme</h1>
<p>
The Button class defines a clickable/touchable button. Use custom button styles for actions in forms,
dialogs, and more with support for multiple sizes, states, and more. Buttons will appear pressed when
active. Make buttons look inactive by setting the disabled state to true. To allow changing the state
between active/inactive, set the button type to "checkbox".
</p>
<p>Let's look at some button examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Many buttons with very different styling and behaviour.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250,
transparent: false
})
.setup()
.run()
let buttonDark = new Button({
x: 10,
y: 10,
label: 'Button with theme dark',
type: 'checkbox'
})
let buttonDark = new Button({
x: 10,
y: 10,
label: 'Button with theme dark',
type: 'checkbox'
})
let buttonGroupLight = new ButtonGroup({
x: 230,
y: 10,
theme: 'light',
buttons: [
{label: 'Button with', active: true},
{label: 'theme light'}
],
type: 'checkbox'
})
let buttonGroupLight = new ButtonGroup({
x: 230,
y: 10,
theme: 'light',
buttons: [{ label: 'Button with', active: true }, { label: 'theme light' }],
type: 'checkbox'
})
let buttonGroupRed = new ButtonGroup({
x: 480,
y: 10,
theme: 'red',
margin: 0,
buttons: [
{label: 'Button with', active: true},
{label: 'theme red'}
],
type: 'radio'
})
let buttonGroupRed = new ButtonGroup({
x: 480,
y: 10,
theme: 'red',
margin: 0,
buttons: [{ label: 'Button with', active: true }, { label: 'theme red' }],
type: 'radio'
})
let switchDark = new Switch({
x: 10,
y: 90
})
let switchDark = new Switch({
x: 10,
y: 90
})
let switchLight = new Switch({
x: 80,
y: 90,
theme: 'light'
})
let switchLight = new Switch({
x: 80,
y: 90,
theme: 'light'
})
let switchRed = new Switch({
x: 150,
y: 90,
theme: 'red'
})
let switchRed = new Switch({
x: 150,
y: 90,
theme: 'red'
})
let yellowTheme = new Theme({
fill: 0xfecd2d,
fillActive: 0xfe9727,
strokeActive: 0xfecd2d,
strokeActiveWidth: 4,
textStyle: {
fill: 0x5ec7f8
},
textStyleActive: {
fill: 0x5954d3
},
textStyleLarge: {
fontSize: 36
}
})
let yellowTheme = new Theme({
fill: 0xfecd2d,
fillActive: 0xfe9727,
strokeActive: 0xfecd2d,
strokeActiveWidth: 4,
textStyle: {
fill: 0x5ec7f8
},
textStyleActive: {
fill: 0x5954d3
},
textStyleLarge: {
fontSize: 36
}
})
let buttonYellow = new Button({
x: 10,
y: 160,
theme: yellowTheme,
label: 'Button with theme yellow',
type: 'checkbox',
action: event => {
const modal = new Modal({
app: app,
theme: yellowTheme,
header: 'Theme',
content: 'Yellow'
})
app.scene.addChild(modal)
}
})
let buttonYellow = new Button({
x: 10,
y: 160,
theme: yellowTheme,
label: 'Button with theme yellow',
type: 'checkbox',
action: (event) => {
const modal = new Modal({
app: app,
theme: yellowTheme,
header: 'Theme',
content: 'Yellow'
})
app.scene.addChild(modal)
}
})
app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
app.scene.addChild(switchDark, switchLight, switchRed)
app.scene.addChild(buttonYellow)
</script>
</body>
</html>
app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
app.scene.addChild(switchDark, switchLight, switchRed)
app.scene.addChild(buttonYellow)
</script>
</body>
</html>
lib/pixi/tooltip.html
+162 -149
View File
@@ -1,176 +1,189 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Tooltip</h1>
<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).
</p>
<p>Let's look at some tooltip examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Ten colored circles with different tooltips.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Tooltip</h1>
<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).
</p>
<p>Let's look at some tooltip examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Ten colored circles with different tooltips.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
})
.setup()
.run()
const circle1 = new PIXI.Graphics()
circle1.beginFill(0x5251a3)
circle1.drawCircle(50, 50, 40)
const circle1 = new PIXI.Graphics()
circle1.beginFill(0x5251a3)
circle1.drawCircle(50, 50, 40)
const circle2 = new PIXI.Graphics()
circle2.beginFill(0x8ca351)
circle2.drawCircle(150, 50, 40)
const circle2 = new PIXI.Graphics()
circle2.beginFill(0x8ca351)
circle2.drawCircle(150, 50, 40)
const circle3 = new PIXI.Graphics()
circle3.beginFill(0xbda038)
circle3.drawCircle(250, 50, 40)
const circle3 = new PIXI.Graphics()
circle3.beginFill(0xbda038)
circle3.drawCircle(250, 50, 40)
const circle4 = new PIXI.Graphics()
circle4.beginFill(0xae4a4a)
circle4.drawCircle(350, 50, 40)
const circle4 = new PIXI.Graphics()
circle4.beginFill(0xae4a4a)
circle4.drawCircle(350, 50, 40)
const circle5 = new PIXI.Graphics()
circle5.beginFill(0xa64f94)
circle5.drawCircle(450, 50, 40)
const circle5 = new PIXI.Graphics()
circle5.beginFill(0xa64f94)
circle5.drawCircle(450, 50, 40)
const circle6 = new PIXI.Graphics()
circle6.beginFill(0x6b6acf)
circle6.drawCircle(50, 150, 40)
const circle6 = new PIXI.Graphics()
circle6.beginFill(0x6b6acf)
circle6.drawCircle(50, 150, 40)
const circle7 = new PIXI.Graphics()
circle7.beginFill(0xb5d16a)
circle7.drawCircle(150, 150, 40)
const circle7 = new PIXI.Graphics()
circle7.beginFill(0xb5d16a)
circle7.drawCircle(150, 150, 40)
const circle8 = new PIXI.Graphics()
circle8.beginFill(0xe7bc51)
circle8.drawCircle(250, 150, 40)
const circle8 = new PIXI.Graphics()
circle8.beginFill(0xe7bc51)
circle8.drawCircle(250, 150, 40)
const circle9 = new PIXI.Graphics()
circle9.beginFill(0xd7626c)
circle9.drawCircle(350, 150, 40)
const circle9 = new PIXI.Graphics()
circle9.beginFill(0xd7626c)
circle9.drawCircle(350, 150, 40)
const circle10 = new PIXI.Graphics()
circle10.beginFill(0xcf6bbd)
circle10.drawCircle(450, 150, 40)
const circle10 = new PIXI.Graphics()
circle10.beginFill(0xcf6bbd)
circle10.drawCircle(450, 150, 40)
let tooltip1 = new Tooltip({
object: circle1,
container: app.scene,
content: 'Das Gesetz ist der Freund des Schwachen.'
})
let tooltip1 = new Tooltip({
object: circle1,
container: app.scene,
content: 'Das Gesetz ist der Freund des Schwachen.'
})
let tooltip2 = new Tooltip({
object: circle2,
content: 'Sieh vorwärts, Werner, und nicht hinter dich!'
})
let tooltip2 = new Tooltip({
object: circle2,
content: 'Sieh vorwärts, Werner, und nicht hinter dich!'
})
let tooltip3 = new Tooltip({
object: circle3,
container: app.scene,
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.'
})
let tooltip3 = new Tooltip({
object: circle3,
container: app.scene,
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.'
})
let tooltip4 = new Tooltip({
object: circle4,
container: app.scene,
content: 'Stets ist die Sprache kecker als die Tat.',
textStyle: {fill: 0x5251a3, fontSize: 20},
fill: 0xa64f94,
fillAlpha: .8
})
let tooltip4 = new Tooltip({
object: circle4,
container: app.scene,
content: 'Stets ist die Sprache kecker als die Tat.',
textStyle: { fill: 0x5251a3, fontSize: 20 },
fill: 0xa64f94,
fillAlpha: 0.8
})
let tooltip5 = new Tooltip({
object: circle5,
container: app.scene,
content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.',
fillAlpha: 0,
strokeAlpha: 0,
offsetLeft: -160,
offsetTop: 100,
delay: 3,
textStyle: {fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2}
})
let tooltip5 = new Tooltip({
object: circle5,
container: app.scene,
content: 'Hier gilt es, Schütze, deine Kunst zu zeigen:\nDas Ziel ist würdig, und der Preis ist groß.',
fillAlpha: 0,
strokeAlpha: 0,
offsetLeft: -160,
offsetTop: 100,
delay: 3,
textStyle: { fill: 0x5251a3, fontSize: 20, stroke: 0xeeeeee, strokeThickness: 2 }
})
app.loadSprites([
'./assets/tooltip-1.jpg',
'./assets/tooltip-2.jpg'
], sprites => {
let sprite1 = sprites.get('./assets/tooltip-1.jpg')
sprite1.scale.set(.33, .33)
let tooltip6 = new Tooltip({
object: circle6,
container: app.scene,
content: sprite1
})
app.loadSprites(
['./assets/tooltip-1.jpg', './assets/tooltip-2.jpg'],
(sprites) => {
let sprite1 = sprites.get('./assets/tooltip-1.jpg')
sprite1.scale.set(0.33, 0.33)
let tooltip6 = new Tooltip({
object: circle6,
container: app.scene,
content: sprite1
})
let sprite2 = sprites.get('./assets/tooltip-2.jpg')
sprite2.scale.set(.33, .33)
let tooltip7 = new Tooltip({
object: circle7,
container: app.scene,
padding: 0,
content: sprite2,
fillAlpha: 0,
strokeAlpha: 0
})
let sprite2 = sprites.get('./assets/tooltip-2.jpg')
sprite2.scale.set(0.33, 0.33)
let tooltip7 = new Tooltip({
object: circle7,
container: app.scene,
padding: 0,
content: sprite2,
fillAlpha: 0,
strokeAlpha: 0
})
let tooltip8 = new Tooltip({
object: circle8,
container: app.scene,
padding: 8,
fill: 0xe7bc51,
fillAlpha: .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.',
textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
})
let tooltip8 = new Tooltip({
object: circle8,
container: app.scene,
padding: 8,
fill: 0xe7bc51,
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.',
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)
sprite3.scale.set(0.15, 0.15)
let tooltip9 = new Tooltip({
object: circle9,
container: app.scene,
content: sprite3,
offsetTop: 100,
offsetLeft: 30
})
let sprite3 = new PIXI.Sprite(texture1)
sprite3.scale.set(.15, .15)
let tooltip9 = new Tooltip({
object: circle9,
container: app.scene,
content: sprite3,
offsetTop: 100,
offsetLeft: 30
})
let sprite4 = new PIXI.Sprite(texture1)
sprite4.scale.set(0.1, 0.1)
let tooltip10 = new Tooltip({
object: circle10,
container: app.scene,
content: sprite4,
offsetTop: 100,
offsetLeft: -100,
padding: 1
})
})
},
{ resolutionDependent: false }
)
let sprite4 = new PIXI.Sprite(texture1)
sprite4.scale.set(.1, .1)
let tooltip10 = new Tooltip({
object: circle10,
container: app.scene,
content: sprite4,
offsetTop: 100,
offsetLeft: -100,
padding: 1
})
})
}, {resolutionDependent: false})
app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
</script>
</body>
app.scene.addChild(circle1, circle2, circle3, circle4, circle5)
app.scene.addChild(circle6, circle7, circle8, circle9, circle10)
</script>
</body>
</html>
lib/pixi/volatile.html
+62 -56
View File
@@ -1,64 +1,70 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<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="../../css/doctest.css">
<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="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Volatile</h1>
<p>
The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a predetermined direction.
</p>
<p>Let's look at some volatile examples:</p><br />
<canvas id="canvas" class="interactive"></canvas>
<p>
What you should see: Buttons which starts an volatile animation.
</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
}).setup().run()
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Volatile</h1>
<p>
The Volatile class facilitates the "disappear" of any PixiJS DisplayObjects. Elements are "dimmed" in a
predetermined direction.
</p>
<p>Let's look at some volatile examples:</p>
<br />
<canvas id="canvas" class="interactive"></canvas>
<p>What you should see: Buttons which starts an volatile animation.</p>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
width: 900,
height: 250
})
.setup()
.run()
let button1 = new Button({
label: 'Volatile me!',
action: () => {
new Volatile({
object: button1,
direction: 'right',
destroyOnComplete: false
})
}
})
let button1 = new Button({
label: 'Volatile me!',
action: () => {
new Volatile({
object: button1,
direction: 'right',
destroyOnComplete: false
})
}
})
let button2 = new Button({
y: 60,
label: 'Volatile Text',
action: e => {
let text = new PIXI.Text('Gespeichert', Object.assign({}, button2.theme.textStyleLarge, {fill: button2.theme.primaryColor}))
text.x = button2.width / 2
text.y = button2.y + (button2.height / 2) - (text.height / 2)
app.scene.addChild(text)
new Volatile({
object: text,
direction: 'right',
duration: 4,
distance: 400
})
}
})
let button2 = new Button({
y: 60,
label: 'Volatile Text',
action: (e) => {
let text = new PIXI.Text(
'Gespeichert',
Object.assign({}, button2.theme.textStyleLarge, { fill: button2.theme.primaryColor })
)
text.x = button2.width / 2
text.y = button2.y + button2.height / 2 - text.height / 2
app.scene.addChild(text)
new Volatile({
object: text,
direction: 'right',
duration: 4,
distance: 400
})
}
})
app.scene.addChild(button1, button2)
</script>
</body>
app.scene.addChild(button1, button2)
</script>
</body>
</html>