/firefox.plugin/data/presentation.html - Annotate - GazeTK - Research for Cognitive Interaction

a03cd52e

Thies Pfeiffer

<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;

#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

];

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;

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);

</script>

137

</body>

138

</html>

GazeTK

blinker / firefox.plugin / data / presentation.html @ 4a410264