-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
94 lines (90 loc) · 6.09 KB
/
index.html
File metadata and controls
94 lines (90 loc) · 6.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Computerized Social Panorama</title>
<!-- import dependencies -->
<script src="js/TweenLite.min.js"></script> <!-- let objects dis-/appear -->
<script src="js/Draggable.min.js"></script> <!-- drag objects -->
<script src="js/CSSPlugin.min.js"></script> <!-- enable CSS animation -->
<script src="js/howler.js"></script> <!-- play sounds smoothly -->
<!-- own styles and logic -->
<link rel="stylesheet" href="gpstyle.css" />
<script src="gpscripts.js"></script>
</head>
<body oncontextmenu="return false;" style="background-color: #220011;"> <!-- disable right click -->
<div id="ctrBox">
<!-- boundied svg viewbox where all things happen -->
<svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1400 900">
<defs>
<path id="bowupperleft" d="M 25.709221,44.088699 A 22.111607,20.977678 0 0 1 31.980694,28.923786 22.111607,20.977678 0 0 1 47.80027,22.589289" />
<!-- ### first define all usable graphic elements -->
<symbol id="svgFrame">
<polygon points="240 2,1160 2,1160 880,240 880" style="fill:none;stroke-width:1px;stroke:#AA7777;" />
</symbol>
<symbol id="svgNextArrow">
<polygon points="0 30,90 30,90 0,150 60,90 120,90 90,0 90" style="fill:green;stroke:#44EE22;stroke-width:2px" />
</symbol>
<symbol id="svgRepeatArrow">
<polygon points="0 60,60 0,60 30,90 30,120 0,120 30,150 30,150 90,120 90,120 120,90 90,60 90,60 120" style="fill:yellow;stroke:#FF9944;stroke-width:2px" />
</symbol>
<symbol id="svgAbortCross">
<polygon points="30 0,60 30,90 0,120 30,90 60,120 90,90 120,60 90,30 120,0 90,30 60,0 30" style="fill:red;stroke:#FF3388;stroke-width:2px" />
</symbol>
<symbol id="svgNoSeeCircle">
<circle cx="65" cy="65" r="60" style="fill:#2233EE;stroke:#5566FF;stroke-width:2px;" />
<circle cx="65" cy="65" r="30" style="fill:#220011;stroke:#5566FF;stroke-width:2px;" />
</symbol>
<symbol id="svgPersonNoseEar"> <!-- Symbol for persons with nose and ears (not used yet) -->
<circle cx="60" cy="60" r="50" />
<ellipse cx="8" cy="60" rx="8" ry="15" />
<ellipse cx="112" cy="60" rx="8" ry="15" />
<polygon points="60 0,80 20, 40 20" />
</symbol>
<symbol id="svgPersonCircle"> <!-- Symbol for personens as circle only -->
<circle cx="60" cy="60" r="40" stroke-width="2px" />
</symbol>
<symbol id="svgConcentricCircle"> <!-- circles for evaluating visual distance -->
<circle cx="700" cy="450" r="80" fill="none" stroke-dasharray="10,20" stroke="#666666" stroke-width="3" />
<circle cx="700" cy="450" r="160" fill="none" stroke-dasharray="10,30" stroke="#555555" stroke-width="3" />
<circle cx="700" cy="450" r="250" fill="none" stroke-dasharray="10,40" stroke="#4A4A4A" stroke-width="3" />
<circle cx="700" cy="450" r="350" fill="none" stroke-dasharray="10,50" stroke="#404040" stroke-width="3" />
<circle cx="700" cy="450" r="520" fill="none" stroke-dasharray="10,60" stroke="#373737" stroke-width="3" />
<circle cx="700" cy="450" r="700" fill="none" stroke-dasharray="10,70" stroke="#2F2F2F" stroke-width="3" />
</symbol>
<symbol id="svgStartButton">
<polygon points="0 5,5 0,250 0,255 5, 255 55, 250 60,5 60,0 55" fill="#116622" stroke="orange" stroke-width="3" />
<text x="35" y="48" style="font-family:verdana;font-size:50px;font-weight:bold;fill:orange;">START</text>
</symbol>
<symbol id="svgAudiotestButton">
<polygon points="0 5,5 0,250 0,255 5, 255 55, 250 60,5 60,0 55" fill="#441100" stroke="orange" stroke-width="3" />
<text x="30" y="40" style="font-family:verdana;font-size:30px;font-weight:bold;fill:orange;">AUDIOTEST</text>
</symbol>
</defs>
<!-- ### now set up all elements on specific positions, but leave most of them invisible -->
<!-- intro text
<text id="introtext" x="0" y="50" text-anchor="middle"><textpath style="font-family:verdana;font-size:12px;font-style:bold;fill:beige" visibility="visible" xlink:href="#bowupperleft">Explore your personal social panorama!</textpath></text>-->
<!-- circles -->
<use id="circles" xlink:href="#svgConcentricCircle" opacity="0.0" />
<!-- me in the middle -->
<use id="me" xlink:href="#svgPersonNoseEar" transform="translate(657,410) scale(0.7)" fill="beige" opacity="0.0" />
<!-- movable persons -->
<use id="p3" style="cursor:grab" xlink:href="#svgPersonCircle" transform="translate(100,120)" fill="grey" opacity="0.0" />
<use id="p2" style="cursor:grab" xlink:href="#svgPersonCircle" transform="translate(100,150)" fill="#BB3333" opacity="0.0" />
<use id="p1" style="cursor:grab" xlink:href="#svgPersonCircle" transform="translate(100,180)" fill="#33BB33" opacity="0.0" />
<!-- buttons -->
<use id="audiotestbutton" class="svgButton" onclick="playaudiotest()" xlink:href="#svgAudiotestButton" transform="translate(600,200)" opacity="0.0" />
<use id="noseebutton" class="svgButton" onclick="nosee()" xlink:href="#svgNoSeeCircle" transform="translate(1210,100) scale(0.6)" opacity="0.0" />
<use id="repeatbutton" class="svgButton" onclick="repeat()" xlink:href="#svgRepeatArrow" transform="translate(1200,425) scale(0.6)" opacity="0.0" />
<use id="okbutton" class="svgButton" onclick="next()" xlink:href="#svgNextArrow" transform="translate(1200,750) scale(0.6)" opacity="0.0" />
<use id="startbutton" class="svgButton" onclick="start()" xlink:href="#svgStartButton" transform="translate(600,520)" opacity="0.0" />
<!-- spinner while loading sounds -->
<image id="spinner" x="610" y="290" width="200px" height="200px" xlink:href="gfx/loader.gif" visibility="hidden" />
<!-- language flags -->
<image id="flagEN" x="150" y="500" width="400px" height="200px" onclick="chooseEN()" xlink:href="gfx/English_language.png" visibility="hidden" opacity="0.0" />
<image id="flagDE" x="850" y="500" width="400px" height="200px" onclick="chooseDE()" xlink:href="gfx/Germany.png" visibility="hidden" opacity="0.0" />
<!-- debug display -->
<text id="debugtext" x="35" y="48" style="font-family:verdana;font-size:12px;fill:white;" visibility="hidden">p1 p2 p3</text>
</svg>
</div>
</body></html>