Chapter 13 HTML5 Functions - Networking...

Web Programming Networking Laboratory 1/50

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory

Chapter 13

HTML5 Functions

Prepared by H. Ahn and H. Choo


Chapter 13 Outline

13.1 SVG

13.2 Drag-and-drop

13.3 HTML5 Geolocation

13.4 HTML5 Web Worker


13.1 SVG

Scalable Vector Graphics (SVG) is an XML-based vector image format

SVG is used to define vector-based graphics on the Web

SVG is recommended by W3C since 1999


SVG graphics don’t lose quality when enlarged or resized

All elements and attributes in an SVG file are animatable

SVG images can be created and edited with any text editor

13.1 SVG


SVG is a language for describing 2D graphics in XML

► SVG is XML based, which means that every element is available within the

SVG DOM

► In SVG, each drawn shape is remembered as an object

► If attributes of an SVG object are changed, the browser can automatically

re-render the shape

Canvas draws 2D graphics, on the fly with a JavaScript

► Canvas is rendered pixel by pixel

► In canvas, once the graphic is drawn, it is forgotten by the browser

► If its position should be changed, the entire scene needs to be redrawn,

including any objects that might have been covered by the graphic

13.1 SVGDifference between SVG and Canvas


13.1 SVGDifference between SVG and Canvas

SVG Canvas

500% Scale 500% Scale


13.1 SVGCircle Example

<!DOCTYPE html><html><body>

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-

width="4" fill="yellow" /></svg>

</body></html>


13.1 SVGCircle Example

fill="blue"fill="red"


13.1 SVGRectangle Example


<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke

-width:10;stroke:rgb(0,0,0)" /></svg>

</body></html>


13.1 SVGRectangle Example


13.1 SVGRounded Rectangle Example


<svg width="400" height="180"><rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

</body></html>


13.1 SVGRounded Rectangle Example

rx="20" ry="20"

rx="50" ry="50" rx="100" ry="100"


13.1 SVGPolygon Example


<svg width="300" height="300"><polygon points="100,20 250,160 160,210"

style="fill: red; stroke: black; stroke-width: 3" /></svg>

</body></html>


13.1 SVGPolygon Example


13.1 SVGLogo Example

<!DOCTYPE html><html><body><svg height="130" width="500"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

</linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-

family="Verdana" x=“40" y="86">SKKU</text></svg>

</body></html>


13.1 SVGLogo Example


13.1 SVGPolyline Example


<svg><polyline points="10,10 150,20 180,70 230,80"

style="fill: none; stroke: red; stroke-width: 3" /></svg>

</body></html>


13.1 SVGPolyline Example


13.1 SVGAnimation Example


<svg><rect width="100" height="100" fill="red">

<animate attributeName="height" from="0" to="100" dur="10s" />

</rect></svg>

</body></html>






<svg height="500" width="500"><circle r="100" cx="150" cy="110" fill="slategrey"

stroke="#000" stroke-width="7"><animate attributeName="r" from="0" to="100" dur="3s" /><animate attributeName="cx" from="50" to="150" dur="3s"

/></circle>

</svg>

</body></html>




13.2 Drag and Drop

Drag and drop is one of the most popular user interfaces in Windows

Dragging an object to another application with the mouse

In HTML5, drag and drop is part of the standard: Any element can be

draggable

Drag

Drop


13.2 Drag and DropEvents

Drag source Passing elements Drop target


13.2 Drag and DropExample

<!DOCTYPE html><html><head>

<style>#shopping_cart {

width: 450px;height: 100px;padding: 10px;border: 1px dotted red;

}</style><script>

function allowDrop(e) {e.preventDefault();

}



function handleDragStart(e) {e.dataTransfer.effectAllowed = 'move';e.dataTransfer.setData("Text", e.target.id);

}

function handleDrop(e) {e.preventDefault();var src = e.dataTransfer.getData("Text");e.target.appendChild(document.getElementById(src));

}</script>

</head>



<body><p>Move things by dragging.</p><div id="shopping_cart"

ondrop="handleDrop(event)" ondragover="allowDrop(event)"></div>

<br><img id="img1" src="tv.png" draggable="true"

ondragstart="handleDragStart(event)" width="150" height="100">

<img id="img2" src="audio.png" draggable="true" ondragstart="handleDragStart(event)" width="150"

height="100"><img id="Img3" src="camera.png" draggable="true"

ondragstart="handleDragStart(event)" width="150" height="100"></body></html>


13.2 Drag and DropExample - Result


13.2 Drag and DropExample - Result


13.3 HTML5 Geolocation

The HTML Geolocation API is used to get the geographical position of a

user

Geolocation allows you to share your location with a website


13.3 HTML5 GeolocationGeolocation Object

var geolocation = navigator.geolocation;

Method Description

getCurrentPosition() Returns the user's position

watchPosition() Returns the current position of the user and continues to

return updated position as the user moves

clearWatch Stops the watchPosition() method


13.3 HTML5 GeolocationExample

<!DOCTYPE html><html><body><script>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

var x = document.getElementById("demo");function getLocation() {

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);

} else {



x.innerHTML = "Geolocation is not supported by this browser.";

}}function showPosition(position) {

x.innerHTML = "Latitude: " + position.coords.latitude +"<br>Longitude: " + position.coords.longitude;

}</script></body></html>




13.3 HTML5 GeolocationExample - Mark on a map


<p id="demo">Click the button to get your position.</p><button onclick="getLocation()">Try It</button><div id="mapholder"></div>

<script>var x = document.getElementById("demo");function getLocation() {

if (navigator.geolocation) {navigator.geolocation.watchPosition(showPosition);

} else {x.innerHTML = "Geolocation is not supported by this

browser.";}

}



function showPosition(position) {var latlon = position.coords.latitude + "," +

position.coords.longitude;var img_url =

"https://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&key=AIzaSyBu-

916DdpKAjTmJNIgngS6HL_kDIKU0aU";document.getElementById("mapholder").innerHTML = "<img

src='"+img_url+"'>";}

function showError(error) {switch(error.code) {

case error.PERMISSION_DENIED:x.innerHTML = "User denied the request for

Geolocation."break;



case error.POSITION_UNAVAILABLE:x.innerHTML = "Location information is unavailable."break;

case error.TIMEOUT:x.innerHTML = "The request to get user location

timed out."break;

case error.UNKNOWN_ERROR:x.innerHTML = "An unknown error occurred."break;

}}</script>

</body></html>


13.3 HTML5 GeolocationExample - Result


13.3 HTML5 GeolocationThe getCurrentPosition() Method

Property Returns

coords.latitude The latitude as a decimal number (always returned)

coords.longitude The longitude as a decimal number (always returned)

coords.accuracy The accuracy of position (always returned)

coords.altitude The altitude in meters above the mean sea level (returned if available)

coords.altitudeAcc

uracy

The altitude accuracy of position (returned if available)

coords.heading The heading as degrees clockwise from North (returned if available)

coords.speed The speed in meters per second (returned if available)

timestamp The date/time of the response (returned if available)


13.3 HTML5 GeolocationGet Location while Moving

Call watchPosition() on geolocation object

► watchPosition(): Returns the current position of the user and continues to

return updated position as the user moves (like the GPS in a car).

► clearWatch(): stops the watchPosition () method




<button onclick="startGeolocation()">위치 정보 시작</button><button onclick="stopGeolocation()">위치 정보 중지</button><div id="target"></div><script>

var id;var myDiv = document.getElementById("target");function startGeolocation() {

if (navigator.geolocation) {id =

navigator.geolocation.watchPosition(showGeolocation);}

}



function showGeolocation(location) {myDiv.innerHTML = "(위도: " +

location.coords.latitude +", 경도: " + location.coords.longitude + ")";

}function stopGeolocation() {

if (navigator.geolocation) {navigator.geolocation.clearWatch(id);

}}

</script></body></html>



It keep update the current position until the user stops


13.4 HTML5 Web Worker

When executing scripts in an HTML page, the page becomes

unresponsive until the script is finished

A web worker is a JavaScript that runs in the background, without

affecting the performance of the page

Users can continue to do whatever they want:

► Clicking, selecting things, etc., while the web worker runs in the background


13.4 HTML5 Web WorkerCounting Example

// worker.js// javascropt source to find prime number

var i = 0;

function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);

}

timedCount();




<p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button>

<script>var w;

function startWorker() {if(typeof(Worker) !== "undefined") {

if(typeof(w) == "undefined") {w = new Worker("worker.js");

}w.onmessage = function(event) {



document.getElementById("result").innerHTML = event.data;};

} else {document.getElementById("result").innerHTML = "Sorry,

your browser does not support Web Workers...";}

}

function stopWorker() { w.terminate();w = undefined;

}</script>

</body></html>




13.4 HTML5 Web WorkerFinding Prime Number Example

// worker2.js// javascript source to find prime number

var n = 1;search: while (true) {

n += 1;for (var i = 2; i <= Math.sqrt(n) ; i += 1)

if (n % i == 0)continue search;

// deliver prime number to a web page whenever it finds itpostMessage(n);

}


13.4 HTML5 Web WorkerExample – Find Prime Number

Date post:	19-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

Chapter 13 HTML5 Functions - Networking...

Documents