-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoverlay.html
106 lines (91 loc) · 3.44 KB
/
overlay.html
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
95
96
97
98
99
100
101
102
103
104
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="remote-slide-overlay remote-slide-overlay-wrapper" id="remoteSlideOverlayWrapper">
<div style="position: absolute; right: 2px; top: 2px; z-index: 9999; min-width: 25px; min-height: 25px;">
<div id="remoteSlideStatusIcons">
<i id="remoteSlideStatus-times" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-times-circle-o fa-2x" aria-hidden="true"></i>
<i id="remoteSlideStatus-check" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
<i id="remoteSlideStatus-question" style="display: none;" class="remote-slide-overlay remote-slide-overlay-status fa fa-question-circle-o fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- TODO: display overlay while no remote is connected -->
<!-- Laser -->
<div id="rs-laser-dots">
</div>
<div id='rs-laser-dot' style='position: fixed; z-index: 9999; display: none;'><i class="fa fa-circle" aria-hidden="true"></i><span class="laser-pos"></span></div>
<!-- Laser Calibration -->
<style>
.rs-laser-dot {
position: fixed;
z-index: 2147483648; /* Yeah... https://stackoverflow.com/a/18578245 - Minimum value: 2147483647 */
}
.laser-calibration-dot {
position: fixed;
color: lime;
z-index: 2147483648;
}
.laser-calibration-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483647;
background-color: rgba(0, 0, 0, 0.7);
}
.laser-calibration-dot.topLeft {
left: 10px;
top: 10px;
}
.laser-calibration-dot.topRight {
right: 10px;
top: 10px;
}
.laser-calibration-dot.bottomLeft {
left: 10px;
bottom: 10px;
}
.laser-calibration-dot.bottomRight {
right: 10px;
bottom: 10px;
}
.laser-calibration-dot.center {
left: 50%;
top: 50%;
}
.overlay-message-content {
z-index: 2147483648;
font-size: 36px;
font-weight: bold;
color: white;
}
</style>
<div>
<div class="laser-calibration-backdrop" style="display:none;"></div>
<div class="overlay-message-content" style=" position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);"></div>
<div><!-- Top Left -->
<div class="laser-calibration-dot topLeft" style="display: none;">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
</div>
</div>
<div><!-- Top Right -->
<div class="laser-calibration-dot topRight" style="display: none;">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
</div>
</div>
<div><!-- Center -->
<div class="laser-calibration-dot center" style="display: none;">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
</div>
</div>
<div><!-- Bottom Left -->
<div class="laser-calibration-dot bottomLeft" style="display: none;">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
</div>
</div>
<div><!-- Bottom Right -->
<div class="laser-calibration-dot bottomRight" style="display: none;">
<i class="fa fa-plus fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>