-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.php
115 lines (107 loc) · 3.52 KB
/
index.php
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
<?php
require("config.php");
require("devices.php");
$camera = @intval($_GET["camera"]);
$fullscreen = isset($_GET["fullscreen"]);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<link rel="stylesheet" href="theme.css" type="text/css" media="all" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.css" type="text/css" />
<title><?php echo $page_title ?></title>
<body class="<?php echo $fullscreen ? "fullscreen" : "" ?>">
<div id="menu">
<div id="printers"></div>
<div id="rightbottom">
<div id="controls">
Saturation
<div id="saturation" class="slider"></div>
Brightness
<div id="brightness" class="slider"></div>
</div>
<?php
if ($homepage)
{
echo "<div id=\"homepage\">";
echo "<a href=\"$homepage\">Home page</a>";
echo "</div>";
}
?>
</div>
</div>
<div id="cameras">
<?php
if (!$fullscreen) {
$cameras = getCameras($video_dev_glob, $rulesets);
if (!array_key_exists(strval($camera), $cameras)) {
$first_cam = array_key_first($cameras);
if ($first_cam != NULL) {
$camera = intval($first_cam);
}
}
}
?>
<a href="./?camera=<?php echo $camera . ($fullscreen ? "" : "&fullscreen") ?>">
<img data-src="camera.php?id=<?php echo $camera ?>&full" id="mainCamera" class="camera">
</a>
<div class="othercameras">
<?php foreach($cameras as $c => $_) { ?>
<a href="./?camera=<?php echo $c ?>">
<img data-src="camera.php?id=<?php echo $c ?>" class="camera">
</a>
<?php } ?>
</div>
</div>
<script>
$("#saturation").slider({
orientation: "horizontal",
range: "min",
min: 10,
max: 300,
value: localStorage.getItem("saturation") ? localStorage.getItem("saturation") : 100,
change: function(event, ui) {
localStorage.setItem("saturation", ui.value);
setCameras();
}
});
$("#brightness").slider({
orientation: "horizontal",
range: "min",
min: 10,
max: 900,
value: localStorage.getItem("brightness") ? localStorage.getItem("brightness") : 100,
change: function(event, ui) {
localStorage.setItem("brightness", ui.value);
setCameras();
}
});
function setCameras() {
var saturation = localStorage.getItem("saturation") || 100;
var brightness = localStorage.getItem("brightness") || 100;
$(".camera").css("filter", "saturate("+saturation+"%) brightness("+brightness+"%)");
$(".camera").css("-webkit-filter","saturate("+saturation+"%) brightness("+brightness+"%)");
$(".camera").css("-moz-filter", "saturate("+saturation+"%) brightness("+brightness+"%)");
$(".camera").css("-o-filter", "saturate("+saturation+"%) brightness("+brightness+"%)");
$(".camera").css("-ms-filter", "saturate("+saturation+"%) brightness("+brightness+"%)");
console.log("set saturation = "+saturation+", brightness = "+brightness);
}
setCameras();
function refresh() {
if (document.visibilityState == "visible") {
console.log("reloading...");
$(".camera").each(function() {
$(this).attr("src", $(this).attr("data-src")+"&"+new Date().getTime());
});
$("#printers").load("printers.php");
} else {
console.log("not visible - skipping reload...");
}
}
refresh();
setInterval(refresh, <?php echo $cache_delay * 1000 ?>);
</script>