blinker / firefox.plugin / data / home / home.html @ master
History | View | Annotate | Download (4.114 KB)
| 1 |
<html>
|
|---|---|
| 2 |
<head>
|
| 3 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| 4 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> |
| 5 |
<title>Blickbrowser - Presentation</title> |
| 6 |
|
| 7 |
|
| 8 |
<style>
|
| 9 |
#content {
|
| 10 |
width: 100%;
|
| 11 |
position:absolute;
|
| 12 |
top: 200px;
|
| 13 |
text-align: center;
|
| 14 |
}
|
| 15 |
.presentationDiv {
|
| 16 |
line-height:200px;
|
| 17 |
color:white;
|
| 18 |
font-weight:bold;
|
| 19 |
text-shadow: -1px 0 #13D1EB, 0 1px #13D1EB, 1px 0 #13D1EB, 0 -1px #13D1EB;
|
| 20 |
display:inline-block;
|
| 21 |
margin:auto;
|
| 22 |
background-color: #13D1EB;
|
| 23 |
border:2px solid #74D7E5;
|
| 24 |
width:200px;
|
| 25 |
height:200px;
|
| 26 |
}
|
| 27 |
|
| 28 |
.presentationDiv.triggered {
|
| 29 |
color:white;
|
| 30 |
font-weight:bold;
|
| 31 |
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
|
| 32 |
display:inline-block;
|
| 33 |
margin:auto;
|
| 34 |
background-color: #053e46;
|
| 35 |
border:2px solid #74D7E5;
|
| 36 |
width:200px;
|
| 37 |
height:200px;
|
| 38 |
}
|
| 39 |
|
| 40 |
.number5{
|
| 41 |
line-height: 1em;
|
| 42 |
}
|
| 43 |
|
| 44 |
.button {
|
| 45 |
display:inline-block;
|
| 46 |
width:auto;
|
| 47 |
height: 40px;
|
| 48 |
cursor: pointer;
|
| 49 |
color: #FFFFFF;
|
| 50 |
font-weight:bold;
|
| 51 |
background-color: #13D1EB;
|
| 52 |
border:2px solid #74D7E5;
|
| 53 |
/*line-height: 40px;*/
|
| 54 |
padding:5px;
|
| 55 |
|
| 56 |
}
|
| 57 |
|
| 58 |
#showGazeInformation{
|
| 59 |
text-align: left;
|
| 60 |
line-height: 1em;
|
| 61 |
height:auto;
|
| 62 |
}
|
| 63 |
|
| 64 |
</style>
|
| 65 |
|
| 66 |
</head>
|
| 67 |
<body>
|
| 68 |
<div id="content"> |
| 69 |
|
| 70 |
<div data-gaze='{"gazeEnter":{"funcType":"dynamic","func":" document.getElementById(\"number1\").className = \"presentationDiv triggered\"; "}}' class="presentationDiv" id="number1">gazeEnter Example</div> |
| 71 |
<div data-gaze='{"gazeLeave":{"funcType":"dynamic","func":" document.getElementById(\"number2\").className = \"presentationDiv triggered\"; "}}' class="presentationDiv" id="number2">gazeLeave Example</div> |
| 72 |
<div data-gaze='{"gazeOver":{"funcType":"dynamic","func":" var number3 = document.getElementById(\"number3\"); number3.className = \"presentationDiv triggered\"; if (number3.innerHTML == \"gazeOver Example\"){number3.innerHTML =\"0\";} number3.innerHTML = parseInt(number3.innerHTML)+1 "}}' class="presentationDiv" id="number3">gazeOver Example</div> |
| 73 |
<div data-gaze='{"isFixated":{"funcType":"dynamic","func":" document.getElementById(\"number4\").className = \"presentationDiv triggered\"; "}}' class="presentationDiv" id="number4">isFixated Example</div> |
| 74 |
<br /> |
| 75 |
<br /> |
| 76 |
|
| 77 |
<div data-gaze='{"isFixated":{"funcType":"dynamic","func":" unsafeWindow.doAlert(\"This alert message has been triggered by a function in this website, just by looking at the corresponding box.\"); "}}' class="presentationDiv number5" id="number5">Call page-script (This website) function from addOn</div> |
| 78 |
|
| 79 |
<br /> |
| 80 |
<br /> |
| 81 |
<div id='showNotification' class="button">Call content-script (AddOn) function from this website</div> |
| 82 |
<br /> |
| 83 |
<br /> |
| 84 |
<div id='showGazeInformation' class="button">Click here to get current gaze position:</div> |
| 85 |
<br /> |
| 86 |
<br /> |
| 87 |
<br /> |
| 88 |
<br /> |
| 89 |
<a href="http://www.google.de">Simple Link To Google</a> |
| 90 |
</div>
|
| 91 |
|
| 92 |
<script>
|
| 93 |
//var gazeInfo = window.getGazeInformation();
|
| 94 |
|
| 95 |
var texts = ["This is a notification function from the addon-script, called by the page-script.",
|
| 96 |
"Hello from the 'showNotification' function inside the addon script.",
|
| 97 |
"It is easy to access the addon's functions if you know which ones exist.",
|
| 98 |
"The addon script's functions can be accessed from a foreign website."
|
| 99 |
];
|
| 100 |
|
| 101 |
|
| 102 |
|
| 103 |
var lastnum = 0;
|
| 104 |
function calcNewNum(){
|
| 105 |
|
| 106 |
var newnum = Math.floor((Math.random() * 3));
|
| 107 |
|
| 108 |
while(newnum == lastnum){
|
| 109 |
newnum = Math.floor((Math.random() * 3));
|
| 110 |
}
|
| 111 |
|
| 112 |
lastnum = newnum;
|
| 113 |
console.log("newnum:"+newnum);
|
| 114 |
return newnum;
|
| 115 |
|
| 116 |
}
|
| 117 |
|
| 118 |
document.getElementById('showNotification').onclick = function(){
|
| 119 |
window.showNotification('envelope-o',texts[calcNewNum()]);
|
| 120 |
};
|
| 121 |
|
| 122 |
document.getElementById("showGazeInformation").onclick = function () {
|
| 123 |
getGazeInformation();
|
| 124 |
document.getElementById("showGazeInformation").innerHTML = "call content-script (AddOn) function Example: <br />X: "+ window.gazeInformationX +"<br />Y: "+ window.gazeInformationY ;
|
| 125 |
console.log("gazeinfo_X: "+ window.gazeInformationX);
|
| 126 |
console.log("gazeinfo_Y: "+ window.gazeInformationY);
|
| 127 |
};
|
| 128 |
|
| 129 |
function doAlert(str){
|
| 130 |
alert(str);
|
| 131 |
}
|
| 132 |
|
| 133 |
|
| 134 |
|
| 135 |
|
| 136 |
</script>
|
| 137 |
</body>
|
| 138 |
</html>
|