Entwicklung multimedialer Anwendungen

(1)

Entwicklung multimedialer Anwendungen

Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm

Hochschule Harz

FB Automatisierung und Informatik

mwilhelm@hs-harz.de

http://www.miwilhelm.de

Raum 2.202

Tel. 03943 / 659 338

(2)

Fachbereich AI, Entwicklung multimedialer Anwendungen 2

Inhalt

1. Einleitung

2. Auszeichnungs-Tags / Semantische Elemente 3. Multimedia (Audio, Video)

4. CSS3 (Design) 5. SVG / Canvas

6. Tablet Ansteuerung (jQuery) 7. Geolocation

(3)

SVG in HTML

Vor HTML5 wurden Vektor-Grafiken (x/y/z) folgendermaßen entwickelt:

• Mittels Scalable Vector Graphics (SVG),

• ^{Tag: img:}

• 2/3-D-Vektorgrafik

• „Programmierung“ mittels HTML-Tags und Attributen

^Zweck:

• x/y/z Zeichnungen

• Darstellung von Molekülen (Chemie)

• Skalierbare Logos

^Link:

• http://www.selfsvg.info

• http://www.fh-wedel.de/~si/praktika/MultimediaProjekte/SVG/

SVG_Tutorial_mi3794/3_2.htm

^Programm:

(4)

SVG in HTML

(5)

SVG in HTML

(6)

SVG-Funktionen

^line

• ^x1 ^left

• ^y1 ^top

• x2 right

• y2 bottom

• ^stroke Farbe des Randes

• stroke-width Randfarbe

• fill Füllfarbe

</svg>

(7)

(8)

SVG-Funktionen

^rect

• ^x ^left

• ^y ^top

• width

• height

• ^rx Radius der senkrechten Seiten

• ^ry Radius der waagerechten Seiten

• stroke Farbe des Randes

• fill Füllfarbe

<rect id="Rechteck" x="10" y="30" width="100"

stroke-width="7" height="100" stroke="red" fill="rgb(33%,22%,100%)" />

</svg>

(9)

(10)

<rect x="5" y="5" width="100" height="100" stroke="#DE280B" stroke-width="4"

fill="#F2BD37" rx="10" ry="10"/>

fill="#F2BD37" rx="10" ry="200"/>

fill="#F2BD37" rx="300" ry="10"/>

</svg>

(11)

SVG-Funktionen

^circle

• ^cx ^left

• ^cy ^top

• r

• stroke Farbe des Randes

• ^fill ^Füllfarbe

<circle id="Kreis" cx="100" cy="100" r="45" stroke-width="7" height="100"

stroke="red" fill="rgb(33%,22%,100%)" />

</svg>

(12)

(13)

SVG-Funktionen

^ellipse

• ^cx ^left

• ^cy ^top

• rx waagerechte Achse

• ry senkrechte Achse

<ellipse id="Oval" cx="210" cy="100" rx="145" ry="45" stroke-width="7"

stroke="red" fill="rgb(33%,22%,100%)" />

</svg>

(14)

(15)

SVG-Funktionen

^polygon

• ^points x/y Punkte (40,200 300,210 500,170)

• fill Füllfarbe

• Wird automatisch geschlossen

<polygon points="200,10 250,190 160,210"

fill="rgb(33%,22%,100%)" stroke="red" stroke-width="1" />

</svg>

(16)

(17)

SVG-Funktionen

^text

• ^x ^left

• ^y ^top

• font-size

• font-family

• ^font-width

• ^stroke

• Stroke-width

(18)

<text x="10" y="20" fill="rgb(33%,22%,100%)" stroke="red" stroke-width="1"

font-size="120%" font-family="Verdana" >

mein erster Text iIlLjJ

</text>

<text x="10" y="80" fill="rgb(33%,22%,100%)" stroke="green" stroke-width="1"

font-size="120%" font-family="Times New Roman" >

</text>

</svg>

(19)

<text x="10" y="20" fill="rgb(33%,22%,100%)" stroke="red" stroke-width="1"

font-size="120%" font-family="Verdana"

transform="rotate(170.0,140,30)" >

</text>

</svg>

(20)

SVG-Funktionen

Farbverläufe

• ^gradiente

• ^radiale

• Wichtig:

• Farbverläufe funktionieren nur mit rect, polygon, circle,ellipse

• Kopplung über eine id

(21)

<defs>

</linearGradient>

</linearGradient>

</defs>

</svg>

(22)

(23)

SVG-Funktionen

^path

• ^{M = moveto} ^{m relativ}

• ^{L = lineto} ^{l relativ}

• H = horizontal lineto h relativ

• V = vertical lineto v relativ

• C = curveto c relativ

• S = smooth curveto s relativ

• Q = quadratic Bézier curve q relativ

• T = smooth quadratic Bézier curveto tm relativ

• A = elliptical Arc a relativ

• Z = closepathx zm relativ

• ^stroke

• Stroke-width

(24)

•<svg height="210" width="400">

</svg>

Beispielcode: nächste Seite

(25)

<path id="lineBC" d="M 250 50 l 150 300" stroke="red"

stroke-width="3" fill="none" />

</g>

</g>

</svg>

</g> Gruppe

(26)

Canvas in HTML

Neue Grafiktag:

• Tag: canvas

• 2/3-D-Vektorgrafik

• „Programmierung“ mittels Java-Skript

• Zugriff mittels „CanvasRenderingContext2D“

• Der Skript-Abschnitt muss nach dem Canvas-bereich platziert werden.

^Zweck:

• x/y/z Zeichnungen

• Darstellung von Molekülen (Chemie)

• Skalierbare Logos

^Links:

• http://www.w3schools.com/html/html5_canvas.asp

• http://t3n.de/news/zukunft-browsens-10-481809/

• https://developer.mozilla.org/de/demos/tag/tech:canvas

• https://html.spec.whatwg.org/multipage/scripting.html#the-canvas- element

(27)

Canvas-Funktionen

Farben, Styles, Schatten

• ^fillStyle

• strokeStyle

• shadowColor

• shadowBlur

• shadowOffsetX

• shadowOffsetY

• createLinearGradient

• createPattern

• createRadialGradient

• addColorStop

(28)

Canvas-Funktionen

^line

• moveTo(x,y)

• lineTo(x,y)

• lineWidth ctx.lineWidth=10;

• lineCap ctx.lineCap="round"; (butt, round, square)

• ^lineJoin ctx.lineJoin="round"; (bevel, round, miter)

• ^miterLimit ctx.lineJoin="miter"; ctx.miterLimit=5;

• setLineDash ctx.setLineDash([5]); ([5,10])

• lineJoin Zeichnen zwei Segemente

• stroke Farbe des Striches

(29)

Your browser does not support the HTML5 canvas tag.

</canvas>

<script type="application/javascript" >

var c = document.getElementById("myCanvas");

if (c.getContext){

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

ctx.closePath();

} else {

alert("No support for canvas");

}

</script>

(30)

(31)

var ctx = document.getElementById('canvas').getContext('2d');

for (i=0;i<15;i++){

ctx.lineWidth = 1+i;

ctx.beginPath();

ctx.moveTo(5+i*20,5);

ctx.lineTo(5+i*20,240);

ctx.stroke();

ctx.closePath();

} }

(32)

Canvas-Funktionen

^Rectangle

• ^fillrect draw: x, y, width, height

• ^fillStyle ="red"

• strokeRect draw: x, y, width, height (no Fill)

• strokeStyle

• ^{With path:}

• ^rect draw: , x, y, width, height

• ^clearRect draw: x, y, width, height

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

</script>

(33)

ctx.lineWidth=4;

ctx.strokeStyle="blue";

ctx.rect(30,10,150,20); // with path ctx.lineWidth=4;

ctx.strokeStyle="green";

ctx.strokeRect(30,70,150,20);

ctx.beginPath();

ctx.lineWidth=4;

ctx.strokeStyle="red";

ctx.rect(30,100,150,20); // with path ctx.stroke();

rect. vs. strokeRect

(34)

Canvas-Funktionen

^Circle

• Gibt es nicht

^Arc

^{With path:}

• arc(x,y, r, α, β, anticlockwise);

• anticlockwise = false: im Uhrzeigersinn

• anticlockwise = true: gegen den Uhrzeigersinn

• arc(x,y, r, 0, 2 * Math.PI, false);

• lineWidth

• fillStyle ="red"

• ^fill

• strokeStyle Randfarbe

(35)

ctx.beginPath();

ctx.arc(100, 100, 75, 0, 2 * Math.PI, false);

ctx.stroke();

ctx.beginPath();

ctx.lineWidth=5;

ctx.stroke();

ctx.beginPath();

ctx.lineWidth=3;

ctx.fillStyle="red";

ctx.fill();

ctx.stroke();

(36)

(37)

Arc mit einem Halbkreis (0 bis Math.PI)

(38)

Canvas-Funktionen

^ellipse

^{with path:}

• ellipse(x,y, rx, ry, rotation, α, β, anticlockwise);

• anticlockwise = false: im Uhrzeigersinn

• anticlockwise = true: gegen den Uhrzeigersinn

• ^lineWidth

• fill

(39)

if (c.getContext){

ctx.beginPath();

ctx.lineWidth=3;

ctx.ellipse(150, 100, 125, 55, 0, 0, 2*Math.PI, false);

ctx.fill();

ctx.stroke();

}

else {

}

Ellipse

(40)

(41)

Canvas-Funktionen

^text

^{ohne path:}

• fillText(text, x,y, [maxWidth]);

• Siehe unten

• strokeText(text, x,y, [maxWidth]);

• ^font ="30px Verdana";

• fill

• textAlign = "left" || "right" || "center" || "start" || "end";

• textBaseline = "top" || "hanging" || "middle" || "alphabetic" ||

"ideographic" || "bottom";

• textAlign = "ltr" || "rtl" || "inherit";

(42)

if (c.getContext){

ctx.font = "44px Verdana";

ctx.fillText("fillText",20,60);

ctx.strokeText("fillText: strokeText",20,150);

}

else {

} // ]]>

</script>

(43)

(44)

Canvas-Funktionen

bezierCurveTo ^{mit path:}

• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

• ^cp1x 1. Kontrollpunkt, x-Koordinate

• ^cp1y 1. Kontrollpunkt, y-Koordinate

• ^cp2x 2. Kontrollpunkt, x-Koordinate

• ^cp2y 2. Kontrollpunkt, y-Koordinate

• x Endpunkt, x-Koordinate

• ^y Endpunkt, y-Koordinate

(45)

if (c.getContext){

ctx.beginPath();

var x1=230; var y1=30;

var x2=150; var y2=70;

var xStart = 50; var yStart=20;

var xEnd = 50; var yEnd=100;

ctx.moveTo(xStart,yStart);

ctx.bezierCurveTo(x1, y1, x2, y2, xEnd, yEnd);

ctx.stroke(); // wichtig ctx.strokeStyle="green";

drawMarker(ctx, xStart, yStart, 20);

drawMarker(ctx, xEnd, yEnd, 20);

drawMarker(ctx, x1, y1, 20);

drawMarker(ctx, x2, y2, 20);

function drawMarker(ctx, x, y, width) {

"use strict;"

var w2=width*0.5;

ctx.beginPath();

ctx.moveTo(x-w2,y-w2);

ctx.lineTo(x+w2,y+w2);

ctx.moveTo(x+w2,y-w2);

ctx.lineTo(x-w2,y+w2);

ctx.stroke();

return;

}

(46)

(47)

Canvas-Funktionen

Draw an Image

var img = document.getElementById("scream");

drawImage(img,10,10)

if (c.getContext){

var img = document.getElementById("lageplan");

ctx.drawImage(img,10,10);

}

(48)

(49)

<h1>12. Canvas Beispiel, Image</h1>

<br />

</canvas>

 // darf nicht aktiv sein, sonst verschwindet das Bild

function myDrawImage() {

if (c.getContext){

var img = document.getElementById("lageplan");

ctx.drawImage(img,10,10);

}

(50)

(51)

<canvas id="myCanvas" width="500" height="500" style="border:1px solid

#FF0000;" >

</canvas>

// <![CDATA[

"use strict;"

var particles = [];

var patriclesNum = 500;

var w = 500;

var h = 500;

var colors = ['#f35d4f','#f36849','#c0d988','#6ddaf1','#f1e85b'];

(52)

function Factory(){

this.x = Math.round( Math.random() * w);

this.y = Math.round( Math.random() * h);

this.rad = Math.round( Math.random() * 1) + 1;

this.rgba = colors[ Math.round( Math.random() * 3) ];

this.vx = Math.round( Math.random() * 3) - 1.5;

this.vy = Math.round( Math.random() * 3) - 1.5;

}

(53)

function draw(){

ctx.clearRect(0, 0, w, h);

ctx.globalCompositeOperation = 'lighter';

for(var i = 0;i < patriclesNum; i++){

var temp = particles[i];

var factor = 1;

for(var j = 0; j<patriclesNum; j++){

var temp2 = particles[j];

ctx.linewidth = 0.5;

if(temp.rgba == temp2.rgba && findDistance(temp, temp2)<50){

ctx.strokeStyle = temp.rgba;

ctx.beginPath();

ctx.moveTo(temp.x, temp.y);

ctx.lineTo(temp2.x, temp2.y);

ctx.stroke();

factor++;

}

(54)

ctx.fillStyle = temp.rgba;

ctx.strokeStyle = temp.rgba;

ctx.beginPath();

ctx.arc(temp.x, temp.y, temp.rad*factor, 0, Math.PI*2, true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.arc(temp.x, temp.y, (temp.rad+5)*factor, 0, Math.PI*2, true);

ctx.stroke();

ctx.closePath();

temp.x += temp.vx;

temp.y += temp.vy;

if(temp.x > w)temp.x = 0;

if(temp.x < 0)temp.x = w;

if(temp.y > h)temp.y = 0;

if(temp.y < 0)temp.y = h;

} // for(var i = 0;i < patriclesNum; i++){

} // function draw

(55)

function findDistance(p1,p2){

return Math.sqrt( Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) );

}

window.requestAnimFrame = ( function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 1000 / 60);

};

} )();

(56)

(function init(){

for(var i = 0; i < patriclesNum; i++){

particles.push(new Factory);

} } )();

(function loop(){

draw();

requestAnimFrame(loop);

})();

// ]]>

</script>

(57)

(58)

// <![CDATA[

"use strict;"

function moveMove(event) {

"use strict;"

var mouseX = Math.round (event.clientX);

var mouseY = Math.round (event.clientY);

container = document.getElementById("container");

bounds = container.getBoundingClientRect();

mx = event.clientX - bounds.left;

my = event.clientY - bounds.top;

man = true;

} // ]]>

</script>

(59)

<body>

<h1>30000 Particles</h1>

<h2>A study creating performant particles with Canvas 2D</h2>

<h3>Use your mouse</h3>

<br />

<canvas id="myCanvas" width="600" height="400" style="border:1px solid

#FF0000;" >

</canvas>

</div>

(60)

// <![CDATA[

"use strict;"

var ROWS = 100;

var COLS = 300;

var NUM_PARTICLES = ROWS*COLS;

var THICKNESS = 80*80; // Math.pow( 80, 2 );

var SPACING = 3;

var MARGIN = 100;

var COLOR = 220;

var DRAG = 0.95;

var EASE = 0.25;

(61)

var ctx;

var canvas;

var particle;

var mouse;

var stats;

var list;

var tog;

var man;

var dx, dy;

var mx, my;

var d, t, f;

var a, b;

var i, n;

var w, h;

var p, s;

var r, c;

// define a class particle = { vx: 0,

vy: 0, x: 0, y: 0 };

(62)

function init() {

canvas = document.getElementById("myCanvas");

if (!canvas) alert("c ist null");

ctx = canvas.getContext("2d");

if (!ctx) alert("ctx ist null");

man = false;

tog = true;

list = [];

w = canvas.width = COLS * SPACING + MARGIN * 2;

h = canvas.height = ROWS * SPACING + MARGIN * 2;

for ( i = 0; i < NUM_PARTICLES; i++ ) { p = Object.create( particle ); // p = new particle();

p.x = p.ox = MARGIN + SPACING * ( i % COLS );

p.y = p.oy = MARGIN + SPACING * Math.floor( i / COLS );

list[i] = p;

} // for ( i = 0; i < NUM_PARTICLES; i++ ) }

(63)

function step() {

if ( stats ) stats.begin();

if ( tog = !tog ) { if ( !man ) {

t = +new Date() * 0.001;

mx = w * 0.5 + ( Math.cos( t * 2.1 ) * Math.cos( t * 0.9 ) * w * 0.45 );

my = h * 0.5 + ( Math.sin( t * 3.2 ) * Math.tan( Math.sin( t * 0.8 ) ) * h * 0.45 );

}

for ( i = 0; i < NUM_PARTICLES; i++ ) { p = list[i];

d = ( dx = mx - p.x ) * dx + ( dy = my - p.y ) * dy;

f = -THICKNESS / d;

if ( d < THICKNESS ) { t = Math.atan2( dy, dx );

p.vx += f * Math.cos(t);

p.vy += f * Math.sin(t);

}

(64)

p.x += ( p.vx *= DRAG ) + (p.ox - p.x) * EASE;

p.y += ( p.vy *= DRAG ) + (p.oy - p.y) * EASE;

} // for ( i = 0; i < NUM_PARTICLES; i++ ) { } // if ( tog = !tog ) {

else {

b = ( a = ctx.createImageData( w, h ) ).data;

for ( i = 0; i < NUM_PARTICLES; i++ ) { p = list[i];

b[n = ( ~~p.x + ( ~~p.y * w ) ) * 4] = b[n+1] = b[n+2] = COLOR, b[n+3] = 255;

}

ctx.putImageData( a, 0, 0 );

}

if ( stats ) stats.end();

requestAnimationFrame( step );

} // step init();

step();

// ]]> </script>