Skip to content

Commit

Permalink
hand wave example
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinkerer
tinkerer committed Dec 12, 2012
1 parent a385636 commit bc44979
Show file tree
Hide file tree
Showing 3 changed files with 1,123 additions and 0 deletions.
316 changes: 316 additions & 0 deletions Versaworks/index6.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
<html><head><title>Scrolling Test</title>

<script type="text/javascript" src="zig.js"></script>

<style>
body
{
margin: 0 auto;
}
#overlay
{
display: block;
position: absolute;
bottom: 0px;
height: 200px;
left: 0px;
width: 100%;

background: -webkit-radial-gradient(center center, ellipse cover, rgba(255,255,255,0.7) 0%,rgba(0,0,0,0.9) 90%);
z-index: 65534;
margin: 0 auto;

}
#pageView
{
position: fixed;
frameborder: 0;
scrolling: no;
height: 100%;
top: 0px;
bottom:300px;
width: 100%;
margin:0 auto;
padding: 0;
border: none;
}
#hmenu
{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
margin:0 auto;
}
#container
{
position: relative;
width: 80%; /* or whatever */
/*height: 300px; /* or whatever */
overflow: hidden;
white-space: nowrap;
text-align:center;
margin:0 auto;
}
#thumbnail-list
{
display: inline-block;
}
#thumbnail-list li
{
display: inline-block;
width: 300px; /* or whatever */
height: 70%; or whatever */
margin: 20px;
padding: 0px;
background: blue;
}
#arrow-left
{
position:absolute;
height: 100%;
left:0px;
}
#arrow-right
{
position:absolute;
height: 100%;
right:0px;
}
#scrolling-content
{
display:inline-block;
overflow:hidden;
width:80%;
}
</style>
</head>
<body>

<div style="display: block;">
<iframe data-overlay="true" id="pageView" src = "http://www.versaworks.net/go.ashx?l=95jwx6dwintrzczkwowcgms6bh&t=h"></iframe>

<div id="overlay"><div id="hmenu">
<div id="container">
<img id="arrow-left" src='arrow/arrowL.png' >
<div id="scrolling-content">
<ul id="thumbnail-list">
<li data-overlay="false" data-link="http://www.versaworks.net/go.ashx?l=n166z6h5aahw3mj3wphec6y5dh">Injury Diagram (SilverLight)</li>
<li data-overlay="true" data-link="http://www.versaworks.net/HtmlViewer.ashx?Dd_ContentId=bf8cd70b-a124-4927-bd27-43d22dce54c9&Dd_ContentType=Dashboard">Injury Diagram (HTML5 dashboard)</li>
<li data-overlay="false" data-link="http://www.versaworks.net/go.ashx?l=95jwx6dwintrzczkwowcgms6bh">SF Area Diagram (SilverLight)</li>
<li data-overlay="true" data-link="http://www.versaworks.net/go.ashx?l=95jwx6dwintrzczkwowcgms6bh&t=h">SF Area Digram (HTML5, share)</li>
<li data-overlay="false" data-link="http://www.versaworks.net/go.ashx?l=nd84eir8myewtgjckptg4c5dwc">Census Trend (SilverLight)</li>
<li data-overlay="true" data-link="http://www.versaworks.net/HtmlViewer.ashx?Dd_ContentId=f850e708-d86f-4c6b-97b5-f85e617bc0ec&Dd_ContentType=Dashboard">Censure Trend (HTML5 dashboard)</li>
<li data-overlay="false" data-link="http://www.versaworks.net/go.ashx?l=bnopojrq881rfq5ewk56h4rojw">Executive Dashboard (SilverLight)</li>
<li data-overlay="true" data-link="http://www.versaworks.net/HtmlViewer.ashx?Dd_ContentId=7df3005e-96f1-4115-9c52-5afd35e43602&Dd_ContentType=Dashboard">Executive Dashboard (HTML5)</li>
</ul>
</div>
<img id="arrow-right" src='arrow/arrowR.png' >
</div>
</div>
</div>
</div>
<script>


var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"arrow/arrowR.png",
"arrow/arrowL.png",
"arrow/arrowLG.png",
"arrow/arrowRG.png"
)




//var hmenu = document.getElementById("hmenu");
//hmenu.style.top = (window.innerHeight / 2) - 100 +'px';

var left = .1;
var right = .9;
var hyst = .05;

var list = document.getElementById("scrolling-content");
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var scrollAmt = 10;
var scrollTime = 10;
var intval = null;
var scrolling = false;

function startScroll(dir)
{
//console.log("direction: " + dir);
if (!scrolling){
scrolling = true;
if (ele)
{
ele.style.background = '';
ele = '';
}

if (dir == 0)
{
intval = window.setInterval("list.scrollLeft-=scrollAmt;",scrollTime)
arrowLeft.src = "arrow/arrowLG.png";
}
else
{
intval = window.setInterval("list.scrollLeft+=scrollAmt;",scrollTime)
arrowRight.src = "arrow/arrowRG.png";
}
}
}
function stopScroll()
{
window.clearInterval(intval);
arrowRight.src = "arrow/arrowR.png";
arrowLeft.src = "arrow/arrowL.png";
scrolling = false;
}
var ele;
var pageView = document.getElementById("pageView");
var fader = zig.controls.Fader(zig.Orientation.X);
fader.addEventListener('valuechange', function (f) {
//console.log('Fader value: ' + f.value);
rect = list.getBoundingClientRect();
if (!scrolling)
{
updateEl();
}



if (f.value < right-hyst)
{
stopScroll();
}
if (f.value > left+hyst)
{
stopScroll();
}
if (f.value < left)
{
startScroll(0);
}

if (f.value > right)
{
startScroll(1);
}

})
function updateEl()
{
//console.log("update El");
el = document.elementFromPoint(rect.left + fader.value*rect.width, rect.top + rect.height/2);

if (el && (el != ele) && (el.tagName.toUpperCase() == "LI"))
{
if (ele){ele.style.background = "";}
el.style.background = "red";
ele = el;
console.log(el.innerHTML);
}

}

// PushDetector
var pushDetector = zig.controls.PushDetector();
pushDetector.addEventListener('push', function(pd) {
console.log('PushDetector: Push');
ele.style.background = "green";
});
pushDetector.addEventListener('release', function(pd) {
console.log('PushDetector: Release');
ele.style.background = "blue";
});
pushDetector.addEventListener('click', function(pd) {
console.log('PushDetector: Click');
pageView.src = ele.getAttribute("data-link");
pageView.setAttribute('data-overlay',ele.getAttribute("data-overlay"));
ele.style.background = "yellow";
window.setTimeout(killSession,500);

});
zig.singleUserSession.addListener(pushDetector);


zig.singleUserSession.addEventListener('userengaged', function(user) {
console.log('User started UI session: ' + user.id);
});
zig.singleUserSession.addEventListener('userdisengaged', function(user) {
console.log('User ended UI session: ' + user.id);
});
zig.singleUserSession.addEventListener('sessionstart', function(initialPosition) {
console.log('Session started at ' + initialPosition);
document.getElementById("overlay").style.display='block';
if (pageView.getAttribute('data-overlay') == "false")
{
// pageView.style.display='none';
}


});
zig.singleUserSession.addEventListener('sessionend', function() {
console.log('Session ended')
document.getElementById("overlay").style.display='none';
if (pageView.getAttribute('data-overlay') == "false")
{
pageView.style.display = 'block';
}
});

zig.singleUserSession.addListener(fader);
function killSession()
{
var sus = zig.singleUserSession.engagedHSD;
if (sus)
{
console.log("SuS ended by killSession ASDHKSAJHFKSUHFDSKFNKSJDHFBNDKSJHFBDSKJFBDSKJFBDS");
sus.stopSession();
}
else
{
console.log("non sus");
}
}

//label map drawing script
function drawLM(plugin) {
var lm = plugin.labelMap;
if (lm.length == 0) return;
var canv = document.getElementById('labelMap');
var ctx = canv.getContext('2d');
var pix = ctx.createImageData(160,120);
var data = pix.data;
var srcData = Base64.decode(lm);
var pixel = 0;
var col = 0;
for(var i = 0; i < 160*120; i++) {
pixel = srcData[i*2] | (srcData[i*2 + 1] << 3);
if (pixel != 0) {
data[i*4] = 255;
col = pixel % 16;
data[i*4 + 1] = col*16;
data[i*4 + 2] = ((col+8) % 16)*16;

}
data[i*4 + 3] = 255;

}
ctx.putImageData(pix, 0, 0);
}



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

0 comments on commit bc44979

Please sign in to comment.