-
Notifications
You must be signed in to change notification settings - Fork 0
/
driver_fpv.html
122 lines (116 loc) · 3.48 KB
/
driver_fpv.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1" />
<style>
body {
margin: 0px;
background: #0e0e0e;
text-align: center;
overflow: hidden;
}
img {
-webkit-user-select: none;
height: 100%;
transform: scale(0.5, 0.5);
overflow: hidden;
/* position: absolute; */
float: left;
z-index: 1000;
}
</style>
</head>
<body
style="
margin: 0px;
background: #0e0e0e;
text-align: center;
overflow: hidden;
"
>
<img
id="ll-shooter"
style="
-webkit-user-select: none;
height: 100%;
transform: translateX(-90px) scale(0.5, 0.5);
overflow: hidden;
/* position: absolute; */
float: left;
z-index: 1000;
"
src="http://10.17.41.11:5800"
/>
<img
id="ll-right"
style="
-webkit-user-select: none;
height: 100%;
transform: translateX(+90px) scale(0.5, 0.5);
overflow: hidden;
/* position: absolute; */
float: left;
z-index: 1000;
"
src="http://10.17.41.12:5800"
/>
<!-- <img
id="B"
style="
-webkit-user-select: none;
height: 100%;
transform: scale(0.5, 0.5);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
display: none;
"
src="http://0.0.0.0"
/> -->
<!-- <div id="A" style="position: absolute; top: 0; left: 0; z-index: 1000; color: white">A</div>
<div
id="B"
style="position: absolute; top: 0; left: 0; display: none; color: white"
>
B
</div>
-->
<script>
const refreshTimeSeconds = 5;
const blankingIntervalSeconds = 1;
const src = "http://10.17.41.11:5800";
const blankSrc = "http://0.0.0.0";
const USE_DOUBLE_BUFFER = true;
let visibleId = "A";
let invisibleId = "B";
// setInterval(() => {
// if (USE_DOUBLE_BUFFER) {
// console.log("double buffer switching to " + visibleId);
// //1. load image in background
// document.getElementById(invisibleId).src = src + "?ts=" + Date.now();
// document.getElementById(invisibleId).style.display = "none";
// document.getElementById(invisibleId).style.zIndex = "0";
// setTimeout(() => {
// //2. after blankingIntervalSeconds, move background in front of foreground and show
// console.log(
// "swap front: hide " + visibleId + "-> show " + invisibleId
// );
// document.getElementById(invisibleId).style.display = "";
// document.getElementById(invisibleId).style.display = "1000";
// document.getElementById(visibleId).style.zIndex = "0";
// setTimeout(() => {
// console.log("hide back " + visibleId);
// //3. after another blankingIntervalSeconds, unrender the background one
// document.getElementById(visibleId).style.display = "none";
// document.getElementById(visibleId).style.src = blankSrc;
// invisibleId = visibleId;
// visibleId = visibleId === "A" ? "B" : "A";
// }, blankingIntervalSeconds * 1000);
// }, blankingIntervalSeconds * 1000);
// } else {
// window.location.reload();
// }
// }, refreshTimeSeconds * 1000);
</script>
</body>
</html>