<html lang="en">
|
<head>
|
<meta charset="utf-8" />
|
<meta name="viewport" content="width=1024" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<title>Ljubljana Hardware Meetup :: Sputnik, 24.10.2019</title>
|
|
<meta name="description" content="Short presentation of what hash tabes are, how they are implemented and how to use them when you are an electrical engineer. This presentation is based on impress.js default demo presentation" />
|
<meta name="author" content="Samo Penic" />
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
|
|
<link href="impress.js/css/impress-demo.css" rel="stylesheet" />
|
|
<link rel="shortcut icon" href="favicon.png" />
|
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
<style>
|
div.linkedlist{
|
width:120px;height:35px;border:1px solid #000;font-size:16px;display:inline-block;padding-left:10px;margin-left:30px;
|
}
|
div.linkedlist::before{
|
content: '\1F82A';
|
font-size: 16pt;
|
left: -1.5em;
|
margin-top:-5px;
|
position: relative;
|
}
|
|
div.addrvertical{
|
width:90px;height:35px;border:1px solid #000;background:grey;color:white;font-size:16px;display:inline-block
|
}
|
|
</style>
|
</head>
|
|
<body class="impress-not-supported">
|
|
<div class="fallback-message">
|
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
|
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
|
</div>
|
|
<div id="impress">
|
<script>
|
var names;
|
var phones;
|
var memory;
|
var backupmemory;
|
var insert_idx=0;
|
var insert_idx_without_collision=0;
|
function hash(stringval){
|
hashval= 0;
|
strlen=stringval.length;
|
i=0;
|
for(i=0;i<strlen;i++){
|
hashval=hashval+stringval.charCodeAt(0);
|
}
|
console.log(stringval + " == " + hashval %13);
|
return hashval % 13;
|
}
|
|
function currentInner(element,data_index){
|
element.innerHTML="Inserting <b>"+names[data_index]+ "</b>. Calculated hash_function is: <b>" + hash(names[data_index])+"</b>";
|
}
|
|
|
|
function insertMissingIntoLL(data_index){
|
if(data_index==-1) data_index=insert_idx;
|
hashval=hash(names[data_index]);
|
console.log("f"+hashval);
|
elll=document.getElementById("ll"+hashval);
|
elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
|
|
memory[hashval]=data_index;
|
insert_idx++;
|
if(insert_idx==13){
|
document.getElementById("currll").innerHTML="DONE!";
|
alert("Completed!");
|
}
|
else {
|
currentInner(document.getElementById("s1current"), insert_idx);
|
currentInner(document.getElementById("currll"), insert_idx);
|
}
|
|
}
|
|
function insertMissingIntoOpen(data_index){
|
insert_idx=insert_index_without_collision;
|
if(data_index==-1) data_index=insert_idx;
|
hashval=hash(names[data_index]);
|
console.log("f"+hashval);
|
oldhashval=hashval;
|
while(backupmemory[hashval]!=-1) hashval=(hashval+1)%13;
|
backupmemory[hashval]=data_index;
|
insert_idx++;
|
insert_index_without_collision++;
|
console.log(names[data_index] + "==> REMAPPED ==>" + hashval);
|
|
el1=document.getElementById("o"+hashval);
|
el2=document.getElementById("of"+hashval);
|
|
el1.innerHTML=names[data_index];
|
el2.innerHTML=phones[data_index];
|
if(oldhashval!=hashval){
|
el1.style.color="red";
|
el2.style.color="red";
|
}
|
if(insert_idx==13){
|
document.getElementById("open1current").innerHTML="DONE!";
|
alert("Completed!");
|
} else{
|
currentInner(document.getElementById("open1current"), insert_idx);
|
}
|
//}
|
|
}
|
|
function insertIntoMemory(data_index){
|
if(data_index==-1) data_index=insert_idx;
|
hashval=hash(names[data_index]);
|
console.log("f"+hashval);
|
if(memory[hashval]!=-1){
|
alert("Collision!!!");
|
insert_index_without_collision=insert_idx;
|
}
|
else{
|
el1=document.getElementById("f"+hashval);
|
el2=document.getElementById("nf"+hashval);
|
|
el1.innerHTML=names[data_index];
|
el2.innerHTML=phones[data_index];
|
|
elll=document.getElementById("ll"+hashval);
|
elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
|
|
el1=document.getElementById("o"+hashval);
|
el2=document.getElementById("of"+hashval);
|
|
el1.innerHTML=names[data_index];
|
el2.innerHTML=phones[data_index];
|
|
memory[hashval]=data_index;
|
backupmemory[hashval]=data_index;
|
insert_idx++;
|
if(insert_idx==13){
|
alert("Completed!");
|
}
|
else {
|
currentInner(document.getElementById("s1current"), insert_idx);
|
currentInner(document.getElementById("open1current"), insert_idx);
|
currentInner(document.getElementById("currll"), insert_idx);
|
}
|
}
|
}
|
|
|
function loadNames(){
|
names=[
|
document.getElementById("name1").value,
|
document.getElementById("name2").value,
|
document.getElementById("name3").value,
|
document.getElementById("name4").value,
|
document.getElementById("name5").value,
|
document.getElementById("name6").value,
|
document.getElementById("name7").value,
|
document.getElementById("name8").value,
|
document.getElementById("name9").value,
|
document.getElementById("name10").value,
|
document.getElementById("name11").value,
|
document.getElementById("name12").value,
|
document.getElementById("name13").value
|
];
|
phones=[1,2,3,4,5,6,7,8,9,10,11,12,13]
|
for(i=0;i<13;i++){
|
phones[i]="(01)"+Math.floor((Math.random() * 9000) + 1000)+"-"+Math.floor((Math.random() * 900) + 100);
|
}
|
memory=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
|
backupmemory=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
|
|
|
/* Slide 1 actions */
|
//Names goes into storages s0-s4 on first slide...
|
document.getElementById("s0").innerHTML=names[0];
|
document.getElementById("s1").innerHTML=names[1];
|
document.getElementById("s2").innerHTML=names[2];
|
document.getElementById("s3").innerHTML=names[3];
|
document.getElementById("n0").innerHTML=phones[0];
|
document.getElementById("n1").innerHTML=phones[1];
|
document.getElementById("n2").innerHTML=phones[2];
|
document.getElementById("n3").innerHTML=phones[3];
|
//
|
document.getElementById("intro0").innerHTML=names[0];
|
document.getElementById("s0result").innerHTML=document.getElementById("s0").innerHTML;
|
document.getElementById("s3value").innerHTML=document.getElementById("s3").innerHTML;
|
document.getElementById("s0number").innerHTML=document.getElementById("n0").innerHTML;
|
/* End Slide 1 */
|
|
/*Filling the values into array demo until collision occurs */
|
|
currentInner(document.getElementById("s1current"), 0);
|
|
}
|
|
|
</script>
|
|
|
<div id="naslovnica" class="step slide" data-x="-1000" data-y="-1500">
|
<h1>Hardware Meetup - Sputnik, 24. October 2019</h1>
|
<q>Hash tables</q><br />
|
|
<p class="center"> ... the basic background of their implementations.</p><br />
|
|
<p class="footnote">Samo Penič</p>
|
<img src="images/hashtag.png" style="width:500px" />
|
</div>
|
|
<!--
|
|
The `id` attribute of the step element is used to identify it in the URL, but it's optional.
|
If it is not defined, it will get a default value of `step-N` where N is a number of slide.
|
|
So in the example below it'll be `step-2`.
|
|
The hash part of the url when this step is active will be `#/step-2`.
|
|
You can also use `#step-2` in a link, to point directly to this particular step.
|
|
Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
|
Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
|
|
-->
|
<div class="step slide vsebina" data-x="-250" data-y="-1250" data-z="1500">
|
<h1 class="naslov">About me...</h1>
|
<img class="samo" src="images/Samo1.png">
|
|
<ul>
|
<li> phD in Electrical engineering</li>
|
<li> working at the Faculty of electrical engineering, teaching fundamentals of EM fields</li>
|
<li> promoting open source since... ever?</li>
|
<li> hobby programmer </li>
|
</ul>
|
|
</div>
|
|
|
<div class="step slide vsebina" data-x="0" data-y="-1500" data-z="0">
|
<h1 class="naslov">What is a hash table</h1>
|
<p>Sometimes also called associative array or dictionary. <b>It is a data structure used to map key into values</b></p>
|
<br /><br />
|
<p class="center">phone_number["<span id='intro0'>Yoda</span>"]</p><br />
|
<p class="center" style="font-size:18pt"> stores and returns us the information stored for variable, object, ...</p>
|
<br /><br />
|
<p style="font-size:18pt">It is widely used to build things such us dictionaries, telephone books, book indexes, ...</p><br />
|
<p>Hash table provide <b>Insertion, Deletion and Retreival</b> in <b>constant time</b>!</p>
|
</div>
|
|
|
|
<div class="step slide vsebina" data-x="1000" data-y="-1500" data-z="0">
|
<h1 class="naslov">However...</h1>
|
|
<p class="" style="margin-bottom:30px">The computer memory is accessible by addressing the data numerically.</p>
|
|
<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">phone[0]</div><div id="s0">Yoda</div><div id="n0" style="font-size:15pt">(01)321-4321</div></span>
|
<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">phone[1]</div><div id="s1">Obi</div><div id="n1" style="font-size:15pt">(01)222-2222</div></span>
|
<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">phone[2]</div><div id="s2">Luke</div><div id="n2" style="font-size:15pt">(01)123-1234</div></span>
|
<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">phone[3]</div><div id="s3">Darth</div><div id="n3" style="font-size:15pt">(01)111-1111</div></span>
|
<p style="margin-top:30px;font-size:15pt">e.g.: Accessing the item at memory location phone[0] yields name <b><span id="s0result">Yoda</span></b> and his phone number: <span id="s0number">(01)321-4321 (order reversed it is)</span></p><br />
|
|
<p>Finding phone number of <span id="s3value">Darth</span> requires linear search through the array, which is not efficient.</p>
|
|
</div>
|
|
<!-- <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
|
</div>
|
-->
|
|
<div class="step slide vsebina" data-x="1000" data-y="-500" data-z="750" data-rotate-x="90">
|
<h1 class="naslov">Building a phonebook...</h1>
|
<form>
|
<table style="width:100%;">
|
<col width="70%">
|
<col width="30%">
|
<tr>
|
<td>
|
<ol style="font-size:16pt;">
|
</li> Name: <input id="name1"></input><br />
|
</li> Name: <input id="name2"></input><br />
|
</li> Name: <input id="name3"></input><br />
|
</li> Name: <input id="name4"></input><br />
|
</li> Name: <input id="name5"></input><br />
|
</li> Name: <input id="name6"></input><br />
|
</li> Name: <input id="name7"></input><br />
|
</li> Name: <input id="name8"></input><br />
|
</li> Name: <input id="name9"></input><br />
|
</li> Name: <input id="name10"></input><br />
|
</li> Name: <input id="name11"></input><br />
|
</li> Name: <input id="name12"></input><br />
|
</li> Name: <input id="name13"></input><br />
|
</ol>
|
</td>
|
<td>
|
<button onClick="loadNames()">Save data</button><br />
|
</td>
|
</tr>
|
</table>
|
</form>
|
</div>
|
|
|
<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="0">
|
<h1 class="naslov">Mapping key to index</h1>
|
|
<p>... is performed by so called hash functions. It can be as simple as <b>sum(ascii_code[i]) % array_size</b></p><br />
|
|
<p>Let's try it out for our phone directory (array_size=13):</p><br />
|
<div id="s1current"></div><br />
|
<button onclick="insertIntoMemory(-1);">Insert</button>
|
<br /><br />
|
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[0]</div><div id="f0" style="font-size:18px"> </div><div id="nf0" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[1]</div><div id="f1" style="font-size:18px"> </div><div id="nf1" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[2]</div><div id="f2" style="font-size:18px"> </div><div id="nf2" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[3]</div><div id="f3" style="font-size:18px"> </div><div id="nf3" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[4]</div><div id="f4" style="font-size:18px"> </div><div id="nf4" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[5]</div><div id="f5" style="font-size:18px"> </div><div id="nf5" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[6]</div><div id="f6" style="font-size:18px"> </div><div id="nf6" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[7]</div><div id="f7" style="font-size:18px"> </div><div id="nf7" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[8]</div><div id="f8" style="font-size:18px"> </div><div id="nf8" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[9]</div><div id="f9" style="font-size:18px"> </div><div id="nf9" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[10]</div><div id="f10" style="font-size:18px"> </div><div id="nf10" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[11]</div><div id="f11" style="font-size:18px"> </div><div id="nf11" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[12]</div><div id="f12" style="font-size:18px"> </div><div id="nf12" style="font-size:11pt"> </div></span>
|
|
</div>
|
|
|
<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="-1500">
|
<h1 class="naslov">Collisions!</h1>
|
|
<p>They will occur. The probability depends on Load factor (LF=number_of_items/array_size)</p><br />
|
|
<p>We can cope with collisions in different of ways:</p><br />
|
<ul>
|
<li>Closed addressing (chaining)
|
<li>Open addressing (linear probing)
|
<li>using alternate hash functions
|
<li>Resize the array ;)
|
</ul>
|
</div>
|
|
|
<div class="step slide vsebina" data-x="2000" data-y="-2500" data-z="0">
|
<h1 class="naslov">Closed addressing</h1>
|
<table style="width:100%">
|
<col width="70%">
|
<col width="30%">
|
<tr>
|
<td>
|
<div id='ll0'><div class="addrvertical">phone[0]</div></div>
|
<div id='ll1'><div class="addrvertical">phone[1]</div></div>
|
<div id='ll2'><div class="addrvertical">phone[2]</div></div>
|
<div id='ll3'><div class="addrvertical">phone[3]</div></div>
|
<div id='ll4'><div class="addrvertical">phone[4]</div></div>
|
<div id='ll5'><div class="addrvertical">phone[5]</div></div>
|
<div id='ll6'><div class="addrvertical">phone[6]</div></div>
|
<div id='ll7'><div class="addrvertical">phone[7]</div></div>
|
<div id='ll8'><div class="addrvertical">phone[8]</div></div>
|
<div id='ll9'><div class="addrvertical">phone[9]</div></div>
|
<div id='ll10'><div class="addrvertical">phone[10]</div></div>
|
<div id='ll11'><div class="addrvertical">phone[11]</div></div>
|
<div id='ll12'><div class="addrvertical">phone[12]</div></div>
|
<div id='ll13'><div class="addrvertical">phone[13]</div></div>
|
</td>
|
<td>
|
<div id="currll"></div>
|
<button onclick="insertMissingIntoLL(-1);">Insert</button>
|
|
</td>
|
|
</tr>
|
</table>
|
|
</div>
|
|
|
<div class="step slide vsebina" data-x="2000" data-y="-3500" data-z="0">
|
<h1 class="naslov">Open addressing</h1>
|
|
<div id="open1current"></div><br />
|
<button onclick="insertMissingIntoOpen(-1);">Insert</button>
|
<br /><br />
|
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[0]</div><div id="o0" style="font-size:18px"> </div><div id="of0" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[1]</div><div id="o1" style="font-size:18px"> </div><div id="of1" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[2]</div><div id="o2" style="font-size:18px"> </div><div id="of2" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[3]</div><div id="o3" style="font-size:18px"> </div><div id="of3" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[4]</div><div id="o4" style="font-size:18px"> </div><div id="of4" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[5]</div><div id="o5" style="font-size:18px"> </div><div id="of5" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[6]</div><div id="o6" style="font-size:18px"> </div><div id="of6" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[7]</div><div id="o7" style="font-size:18px"> </div><div id="of7" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[8]</div><div id="o8" style="font-size:18px"> </div><div id="of8" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[9]</div><div id="o9" style="font-size:18px"> </div><div id="of9" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[10]</div><div id="o10" style="font-size:18px"> </div><div id="of10" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[11]</div><div id="o11" style="font-size:18px"> </div><div id="of11" style="font-size:11pt"> </div></span>
|
<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">phone[12]</div><div id="o12" style="font-size:18px"> </div><div id="of12" style="font-size:11pt"> </div></span>
|
</div>
|
|
|
|
<div class="step slide vsebina" data-x="3000" data-y="-1500" data-z="0">
|
<h1 class="naslov">Hash function has to...</h1>
|
<ul>
|
<li>minimize collisions
|
<li>uniformly distribute hash values
|
<li>be easy to calculate
|
</ul>
|
</div>
|
|
<div class="step slide vsebina" data-x="4000" data-y="-1500" data-z="0" data-rotate="90">
|
<h1 class="naslov">Python dictionaries</h1>
|
<p>Python relys heavily on dictionaries, so it is important they are efficient. Uses open addressing multihash to minimize collisions.</p>
|
<pre style="font-size:15pt;margin-top:-10px">
|
<code>
|
table = [None] * n;
|
for hash, key, value in entries:
|
perturb = hash
|
i = hash % n
|
while table[i] is not None:
|
#collision
|
i = (5 * i * perturb + 1) % n
|
perturb >>= 5
|
table[i] = (key, value)
|
</code></pre>
|
|
<p>See talk: Raymond Hettinger -- Modern dictionaries (SF Python 2006)</p>
|
</div>
|
|
|
<div class="step slide vsebina" data-x="4000" data-y="-2500" data-z="0" data-rotate="90">
|
<h1 class="naslov">Hash tables in firmware</h1>
|
<ul>
|
<li>Hash tables have average time complexity around O(1) for I,L,D
|
<li>Do not resize tables - plan in advance
|
<li>Use the power of prime numbers
|
<li>Storing pointers of data in hash is not a bad idea (!)
|
<ul style="margin-left:50px">
|
<li>to save memory, when data is large
|
<li>to get ordered dict if needed
|
</ul>
|
</div>
|
|
|
<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
|
</div>
|
|
|
|
</div>
|
|
<div id="impress-toolbar"></div>
|
|
<div class="hint">
|
<p>Use a spacebar or arrow keys to navigate. <br/>
|
Press 'P' to launch speaker console.</p>
|
</div>
|
<script>
|
if ("ontouchstart" in document.documentElement) {
|
document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
|
}
|
</script>
|
|
<script src="impress.js/js/impress.js"></script>
|
<script>impress().init();</script>
|
|
|
</body>
|
</html>
|
