iwmlib/lib/scatter.html

121 lines
4.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>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>
function drawPolygons() {
debugCanvas.width = main.getBoundingClientRect().width
let context = debugCanvas.getContext('2d')
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
let stage = scatterContainer.polygon
stage.draw(context, { stroke: '#0000FF'})
for(let scatter of scatterContainer.scatter.values()) {
let polygon = scatter.polygon
polygon.draw(context, { stroke: '#0000FF'})
}
}
function animatePolygons() {
requestAnimationFrame((dt) => {
drawPolygons()
animatePolygons()
})
}
</script>
</head>
<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. Scatters come in two flavours:
DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter
work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here
we describe the more basic DOM scatter.
</p>
<p>Let's look at an example.</p>
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
must also be positioned absolutely. -->
<img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
<img id="king" draggable="false" style="position: absolute;" src="examples/king.jpeg" />
<canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue;">
Canvas not supported.
</canvas>
</div>
<script class="doctest">
let dx = 44
let app = new App()
let scatterContainer = new DOMScatterContainer(main)
let angle = 0 // 15
for(let key of ['women', 'king']) {
let image = document.getElementById(key)
// The DOMScatter needs initial width and height. Therefore we
// define the scatter when the image size is known, i.e. after loading...
image.onload = (e) => {
let scatter = new DOMScatter(image, scatterContainer, {
x: dx,
y: 44,
width: e.target.naturalWidth,
height: e.target.naturalHeight,
rotationDegrees: angle,
throwVisibility: 88,
minScale: 0.5,
maxScale: 1.5})
dx += 300
angle = -angle
}
}
app.run()
animatePolygons()
</script>
<h1>
Interactive Content
</h1>
<p>
Scatter objects may contain interactive HTML structures. There is one major flag that allows
to simulate click events by using taps. If the scatter detects a tap it looks for clickable
elements under or nearby the event position and calls the click handler. Thus gestures
can be disambiguated as moves, zooms. or taps.
</p>
<div id="main2" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
must also be positioned absolutely. -->
<div id="interactiveContent">
<img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
<a style="position:absolute; top: 10px; right: 10px; color:white;" href="https://www.iwm-tuebingen.de" target="_blank">A Link</a>
<div onclick="alert('clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
</div>
</div>
<script class="doctest">
let app2 = new App()
let scatterContainer2 = new DOMScatterContainer(main2, { stopEvents: true})
let scatter2 = new DOMScatter(interactiveContent, scatterContainer2, {
x: 44,
y: 44,
width: 274,
height: 184,
throwVisibility: 88,
minScale: 0.5,
maxScale: 1.5})
app2.run()
</script>
</body>