GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 01:00:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Devaev Maxim 2018-10-09 16:20:41 +03:00
parent 2c241fab44
commit a449b39c52
17 changed files with 142 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/css/about.css
View File

@ -4,10 +4,7 @@ div#about {
user-select: text; user-select: text;
} }
div#about div#about td.version {
td#about-version-kvmd,
td#about-version-python,
td#about-version-platform {
font-weight: bold; font-weight: bold;
} }

18
web/css/keyboard.css
View File

@ -105,3 +105,21 @@ div#keyboard-desktop {
div#keyboard-mobile { div#keyboard-mobile {
display: none; display: none;
} }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad */
div.keyboard {
zoom: 1.28 !important;
}
div.keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-normal);
background-color: var(--bg-color-gray);
}
div#keyboard-desktop {
display: none !important;
}
div#keyboard-mobile {
display: block !important;
}
}

36
web/css/leds.css
View File

@ -21,49 +21,43 @@
--led-spin-fast: spin 2s linear infinite; --led-spin-fast: spin 2s linear infinite;
} }
img.led-on { img.led-gray {
-webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green);
}
img.led-off {
-webkit-filter: var(--led-filter-gray); -webkit-filter: var(--led-filter-gray);
filter: var(--led-filter-gray); filter: var(--led-filter-gray);
} }
img.led-hdd-busy { img.led-green {
-webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green);
}
img.led-red {
-webkit-filter: var(--led-filter-red); -webkit-filter: var(--led-filter-red);
filter: var(--led-filter-red); filter: var(--led-filter-red);
} }
img.led-msd-writing, img.led-yellow {
img.led-hid-pak-typing {
-webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-fast);
animation: var(--led-spin-fast);
}
img.led-link-connecting {
-webkit-filter: var(--led-filter-yellow); -webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow); filter: var(--led-filter-yellow);
} }
img.led-fan-on { img.led-green-rotating-medium {
-webkit-filter: var(--led-filter-green); -webkit-filter: var(--led-filter-green);
filter: var(--led-filter-green); filter: var(--led-filter-green);
-webkit-animation: var(--led-spin-medium); -webkit-animation: var(--led-spin-medium);
animation: var(--led-spin-medium); animation: var(--led-spin-medium);
} }
img.led-fan-slow { img.led-yellow-rotating-slow {
-webkit-filter: var(--led-filter-yellow); -webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-yellow); filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-slow); -webkit-animation: var(--led-spin-slow);
animation: var(--led-spin-slow); animation: var(--led-spin-slow);
} }
img.led-fan-fail { img.led-yellow-rotating-fast {
-webkit-filter: var(--led-filter-red); -webkit-filter: var(--led-filter-yellow);
filter: var(--led-filter-red); filter: var(--led-filter-yellow);
-webkit-animation: var(--led-spin-fast);
animation: var(--led-spin-fast);
} }

9
web/css/main.css
View File

@ -15,6 +15,7 @@ a {
color: var(--fg-color-normal); color: var(--fg-color-normal);
} }
@media (hover: hover), (min--moz-device-pixel-ratio: 0) { @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -38,6 +39,7 @@ button, select {
cursor: pointer; cursor: pointer;
} }
@media (hover: hover), (min--moz-device-pixel-ratio: 0) { @media (hover: hover), (min--moz-device-pixel-ratio: 0) {
/* If we have a mouse cursor */
button:enabled:hover, select:enabled:hover { button:enabled:hover, select:enabled:hover {
color: var(--fg-color-intensive); color: var(--fg-color-intensive);
background-color: var(--bg-color-dark) !important; background-color: var(--bg-color-dark) !important;
@ -50,6 +52,7 @@ button, select {
} }
} }
@media (hover: none) { @media (hover: none) {
/* If we DON'T have a mouse cursor */
button:active, select:active { button:active, select:active {
color: var(--fg-color-intensive); color: var(--fg-color-intensive);
background-color: var(--bg-color-dark); background-color: var(--bg-color-dark);
@ -142,6 +145,12 @@ ul#ctl li a.ctl-item {
ul#ctl li a.ctl-item:hover:not(.active) { ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-hovered); background-color: var(--bg-color-hovered);
} }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad 8 */
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-ctl) !important;
}
}
ul#ctl li a.ctl-item-selected { ul#ctl li a.ctl-item-selected {
box-shadow: 0 5px 0 var(--border-color-intensive) inset; box-shadow: 0 5px 0 var(--border-color-intensive) inset;
background-color: var(--bg-color-selected) !important; background-color: var(--bg-color-selected) !important;

36
web/css/mobile.css
View File

@ -4,26 +4,6 @@
*/ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
div.window {
padding-top: 45px !important;
}
div.window-header {
height: 35px !important;
}
div.window-grab {
height: 35px !important;
}
button.window-button-close {
height: 40px !important;
}
ul#ctl li a.ctl-item:hover:not(.active) {
background-color: var(--bg-color-ctl) !important;
}
div.keyboard {
zoom: 1.28 !important;
}
div#keyboard-window { div#keyboard-window {
visibility: visible !important; visibility: visible !important;
padding-top: 9px !important; padding-top: 9px !important;
@ -42,16 +22,6 @@
div#keyboard-window-header { div#keyboard-window-header {
display: none !important display: none !important
} }
div.keyboard div.key:hover, div.modifier:hover {
color: var(--fg-color-normal);
background-color: var(--bg-color-gray);
}
div#keyboard-desktop {
display: none !important;
}
div#keyboard-mobile {
display: block !important;
}
div#stream-window { div#stream-window {
padding-top: 3px !important; padding-top: 3px !important;
@ -83,11 +53,7 @@
height: 45px !important; height: 45px !important;
} }
div.modal-buttons button { @supports (-webkit-appearance: none) {
height: 50px !important;
}
@supports (-webkit-appearance:none) {
input[type=range].slider { input[type=range].slider {
margin: 20px 0 20px 0 !important; margin: 20px 0 20px 0 !important;
} }

19
web/css/modals.css
View File

@ -10,7 +10,7 @@ div.modal {
z-index: 2147483647; z-index: 2147483647;
} }
div.modal-window { div.modal div.modal-window {
display: table; display: table;
outline: none; outline: none;
margin: 15% auto; margin: 15% auto;
@ -22,31 +22,36 @@ div.modal-window {
background-color: var(--bg-color-light); background-color: var(--bg-color-light);
padding: 0; padding: 0;
} }
div.modal-window:focus { div.modal div.modal-window:focus {
border: var(--border-intensive-2px) !important; border: var(--border-intensive-2px) !important;
} }
div.modal div.modal-window div.modal-header {
div.modal-header {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 3px 9px 3px 9px; padding: 3px 9px 3px 9px;
border-bottom: var(--border-normal-thin); border-bottom: var(--border-normal-thin);
} }
div.modal-content { div.modal div.modal-window div.modal-content {
max-width: 500px; max-width: 500px;
max-height: 500px; max-height: 500px;
padding: 16px 9px 16px 9px; padding: 16px 9px 16px 9px;
} }
div.modal-buttons { div.modal div.modal-window div.modal-buttons {
border-top: var(--border-dark-thin); border-top: var(--border-dark-thin);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0; font-size: 0;
} }
div.modal-buttons button { div.modal div.modal-window div.modal-buttons button {
height: 40px; height: 40px;
} }
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* iPad vertical */
div.modal-buttons button {
height: 50px !important;
}
}

31
web/css/msd.css
View File

@ -18,36 +18,9 @@ table.msd-info {
margin: 0 10px 0 10px; margin: 0 10px 0 10px;
font-size: 12px; font-size: 12px;
} }
table.msd-info
td#msd-status, table.msd-info td.msd-info-value {
td#msd-current-image-name,
td#msd-current-image-size,
td#msd-storage-size,
td#msd-new-image-name,
td#msd-new-image-size {
font-weight: bold; font-weight: bold;
max-width: 310px; max-width: 310px;
overflow: hidden; overflow: hidden;
} }
div#msd-progress {
background-color: var(--bg-color-selected);
height: 1.5em;
width: 100%;
position: relative;
}
div#msd-progress:before {
color: var(--fg-color-intensive);
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 4px;
left: 0;
right: 0;
}
div#msd-progress span#msd-progress-value {
background-color: var(--bg-color-intensive);
display: inline-block;
height: 100%;
}

23
web/css/progress.css Normal file
View File

@ -0,0 +1,23 @@
div.progress {
background-color: var(--bg-color-selected);
height: 1.5em;
width: 100%;
position: relative;
}
div.progress:before {
color: var(--fg-color-intensive);
content: attr(data-label);
font-size: 0.8em;
position: absolute;
text-align: center;
top: 4px;
left: 0;
right: 0;
}
div.progress span.progress-value {
background-color: var(--bg-color-intensive);
display: inline-block;
height: 100%;
}

24
web/css/windows.css
View File

@ -15,7 +15,7 @@ div.window:focus {
border: var(--border-intensive-2px) !important; border: var(--border-intensive-2px) !important;
} }
div.window-header { div.window div.window-header {
overflow: hidden; overflow: hidden;
top: 0; top: 0;
left: 0; left: 0;
@ -28,7 +28,7 @@ div.window-header {
border-bottom: var(--border-normal-thin); border-bottom: var(--border-normal-thin);
} }
div.window-grab { div.window div.window-header div.window-grab {
overflow: hidden; overflow: hidden;
top: 0; top: 0;
left: 0; left: 0;
@ -39,13 +39,13 @@ div.window-grab {
padding: 3px 0 2px 20px; padding: 3px 0 2px 20px;
} }
div.window-header-grabbed { div.window div.window-header-grabbed {
color: var(--fg-color-intensive); color: var(--fg-color-intensive);
background-color: var(--bg-color-intensive); background-color: var(--bg-color-intensive);
border-bottom: var(--border-intensive-thin); border-bottom: var(--border-intensive-thin);
} }
button.window-button-close { div.window div.window-header button.window-button-close {
position: absolute; position: absolute;
top: -2px; top: -2px;
right: -6px; right: -6px;
@ -55,3 +55,19 @@ button.window-button-close {
color: var(--fg-color-inactive); color: var(--fg-color-inactive);
display: inline-block; display: inline-block;
} }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad */
div.window {
padding-top: 45px !important;
}
div.window div.window-header {
height: 35px !important;
}
div.window div.window-header div.window-grab {
height: 35px !important;
}
div.window div.window-header button.window-button-close {
height: 40px !important;
}
}

39
web/index.html
View File

@ -16,6 +16,7 @@
<link rel="stylesheet" href="css/leds.css"> <link rel="stylesheet" href="css/leds.css">
<link rel="stylesheet" href="css/sliders.css"> <link rel="stylesheet" href="css/sliders.css">
<link rel="stylesheet" href="css/switches.css"> <link rel="stylesheet" href="css/switches.css">
<link rel="stylesheet" href="css/progress.css">
<link rel="stylesheet" href="css/stream.css"> <link rel="stylesheet" href="css/stream.css">
<link rel="stylesheet" href="css/hid.css"> <link rel="stylesheet" href="css/hid.css">
<link rel="stylesheet" href="css/msd.css"> <link rel="stylesheet" href="css/msd.css">
@ -62,10 +63,10 @@
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img data-dont-hide-menu id="link-led" class="led-off" src="svg/link-led.svg" /> <img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
<img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" /> <img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
<img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" /> <img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" /> <img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
System &#8628; System &#8628;
</a> </a>
<div data-dont-hide-menu class="ctl-dropdown-content"> <div data-dont-hide-menu class="ctl-dropdown-content">
@ -118,8 +119,8 @@
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" /> <img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
<img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" /> <img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
ATX &#8628; ATX &#8628;
</a> </a>
<div class="ctl-dropdown-content ctl-dropdown-content-buttons"> <div class="ctl-dropdown-content ctl-dropdown-content-buttons">
@ -134,7 +135,7 @@
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" /> <img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
Mass Storage &#8628; Mass Storage &#8628;
</a> </a>
<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content"> <div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
@ -177,7 +178,7 @@
<table class="msd-info"> <table class="msd-info">
<tr> <tr>
<td>Status: </td> <td>Status: </td>
<td id="msd-status"></td> <td id="msd-status" class="msd-info-value"></td>
</tr> </tr>
</table> </table>
<hr> <hr>
@ -185,15 +186,15 @@
<table class="msd-info"> <table class="msd-info">
<tr> <tr>
<td>Current image:</td> <td>Current image:</td>
<td id="msd-current-image-name"></td> <td id="msd-current-image-name" class="msd-info-value"></td>
</tr> </tr>
<tr> <tr>
<td>Image size:</td> <td>Image size:</td>
<td id="msd-current-image-size"></td> <td id="msd-current-image-size" class="msd-info-value"></td>
</tr> </tr>
<tr> <tr>
<td>Storage size:</td> <td>Storage size:</td>
<td id="msd-storage-size"></td> <td id="msd-storage-size" class="msd-info-value"></td>
</tr> </tr>
</table> </table>
<hr> <hr>
@ -210,17 +211,17 @@
<table class="msd-info"> <table class="msd-info">
<tr> <tr>
<td>New name:</td> <td>New name:</td>
<td id="msd-new-image-name"></td> <td id="msd-new-image-name" class="msd-info-value"></td>
</tr> </tr>
<tr> <tr>
<td>Upload size:</td> <td>Upload size:</td>
<td id="msd-new-image-size"></td> <td id="msd-new-image-size" class="msd-info-value"></td>
</tr> </tr>
</table> </table>
<hr> <hr>
<div class="ctl-dropdown-content-text"> <div class="ctl-dropdown-content-text">
<div id="msd-progress"> <div id="msd-progress" class="progress">
<span id="msd-progress-value"></span> <span id="msd-progress-value" class="progress-value"></span>
</div> </div>
</div> </div>
<hr> <hr>
@ -237,7 +238,7 @@
<li class="ctl-right-actions"> <li class="ctl-right-actions">
<div class="ctl-dropdown"> <div class="ctl-dropdown">
<a class="ctl-item" href="#"> <a class="ctl-item" href="#">
<img data-dont-hide-menu id="hid-pak-led" class="led-off" src="svg/gear-led.svg" /> <img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
Shortcuts &#8628; Shortcuts &#8628;
</a> </a>
<div data-dont-hide-menu class="ctl-dropdown-content"> <div data-dont-hide-menu class="ctl-dropdown-content">
@ -537,15 +538,15 @@
<table> <table>
<tr> <tr>
<td>Kvmd:</td> <td>Kvmd:</td>
<td id="about-version-kvmd"></td> <td id="about-version-kvmd" class="version"></td>
</tr> </tr>
<tr> <tr>
<td>Python:</td> <td>Python:</td>
<td id="about-version-python"></td> <td id="about-version-python" class="version"></td>
</tr> </tr>
<tr> <tr>
<td>Platform:</td> <td>Platform:</td>
<td id="about-version-platform"></td> <td id="about-version-platform" class="version"></td>
</tr> </tr>
</table> </table>
<p> <p>

8
web/js/atx.js
View File

@ -28,13 +28,13 @@ function Atx() {
self.setState = function(state) { self.setState = function(state) {
__setButtonsBusy(state.busy); __setButtonsBusy(state.busy);
$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off"); $("atx-power-led").className = (state.leds.power ? "led-green" : "led-gray");
$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off"); $("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
}; };
self.clearState = function() { self.clearState = function() {
$("atx-power-led").className = "led-off"; $("atx-power-led").className = "led-gray";
$("atx-hdd-led").className = "led-off"; $("atx-hdd-led").className = "led-gray";
}; };
var __clickButton = function(button, timeout, confirm_msg) { var __clickButton = function(button, timeout, confirm_msg) {

4
web/js/hid.js
View File

@ -153,7 +153,7 @@ function Hid() {
if (ok) { if (ok) {
$("hid-pak-text").disabled = true; $("hid-pak-text").disabled = true;
$("hid-pak-button").disabled = true; $("hid-pak-button").disabled = true;
$("hid-pak-led").className = "led-hid-pak-typing"; $("hid-pak-led").className = "led-yellow-rotating-fast";
$("hid-pak-led").title = "Autotyping..."; $("hid-pak-led").title = "Autotyping...";
tools.debug("Paste-as-keys:", text); tools.debug("Paste-as-keys:", text);
@ -168,7 +168,7 @@ function Hid() {
$("hid-pak-text").value = ""; $("hid-pak-text").value = "";
$("hid-pak-text").disabled = false; $("hid-pak-text").disabled = false;
$("hid-pak-button").disabled = false; $("hid-pak-button").disabled = false;
$("hid-pak-led").className = "led-off"; $("hid-pak-led").className = "led-gray";
$("hid-pak-led").title = ""; $("hid-pak-led").title = "";
} }
}); });

4
web/js/keyboard.js
View File

@ -71,10 +71,10 @@ function Keyboard() {
var __updateLeds = function() { var __updateLeds = function() {
if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) { if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
$("hid-keyboard-led").className = "led-on"; $("hid-keyboard-led").className = "led-green";
$("hid-keyboard-led").title = "Keyboard captured"; $("hid-keyboard-led").title = "Keyboard captured";
} else { } else {
$("hid-keyboard-led").className = "led-off"; $("hid-keyboard-led").className = "led-gray";
$("hid-keyboard-led").title = "Keyboard free"; $("hid-keyboard-led").title = "Keyboard free";
} }
}; };

4
web/js/mouse.js
View File

@ -55,10 +55,10 @@ function Mouse() {
var __updateLeds = function() { var __updateLeds = function() {
if (__ws && __stream_hovered) { if (__ws && __stream_hovered) {
$("hid-mouse-led").className = "led-on"; $("hid-mouse-led").className = "led-green";
$("hid-mouse-led").title = "Mouse tracked"; $("hid-mouse-led").title = "Mouse tracked";
} else { } else {
$("hid-mouse-led").className = "led-off"; $("hid-mouse-led").className = "led-gray";
$("hid-mouse-led").title = "Mouse free"; $("hid-mouse-led").title = "Mouse free";
} }
}; };

6
web/js/msd.js
View File

@ -103,18 +103,18 @@ function Msd() {
var __applyState = function() { var __applyState = function() {
if (__state.connected_to === "server") { if (__state.connected_to === "server") {
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
$("msd-led").className = "led-on"; $("msd-led").className = "led-green";
$("msd-status").innerHTML = $("msd-led").title = "Connected to Server"; $("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
} else if (__state.busy) { } else if (__state.busy) {
if (!__upload_http) { if (!__upload_http) {
$("msd-another-another-user-uploads").style.display = "block"; $("msd-another-another-user-uploads").style.display = "block";
} }
$("msd-led").className = "led-msd-writing"; $("msd-led").className = "led-yellow-rotating-fast";
$("msd-status").innerHTML = $("msd-led").title = "Uploading new image"; $("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
} else { } else {
$("msd-another-another-user-uploads").style.display = "none"; $("msd-another-another-user-uploads").style.display = "none";
$("msd-led").className = "led-off"; $("msd-led").className = "led-gray";
if (__state.in_operate) { if (__state.in_operate) {
$("msd-status").innerHTML = $("msd-led").title = "Connected to KVM"; $("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
} else { } else {

10
web/js/session.js
View File

@ -33,12 +33,12 @@ function Session(atx, hid, msd) {
}; };
var __startPoller = function() { var __startPoller = function() {
$("link-led").className = "led-link-connecting"; $("link-led").className = "led-yellow";
$("link-led").title = "Connecting..."; $("link-led").title = "Connecting...";
var http = tools.makeRequest("GET", "/wsauth", function() { var http = tools.makeRequest("GET", "/wsauth", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 200) { if (http.status === 200) {
__ws = new WebSocket((location.protocol == "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws"); __ws = new WebSocket((location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws");
__ws.onopen = __wsOpenHandler; __ws.onopen = __wsOpenHandler;
__ws.onmessage = __wsMessageHandler; __ws.onmessage = __wsMessageHandler;
__ws.onerror = __wsErrorHandler; __ws.onerror = __wsErrorHandler;
@ -51,7 +51,7 @@ function Session(atx, hid, msd) {
}; };
var __wsOpenHandler = function(event) { var __wsOpenHandler = function(event) {
$("link-led").className = "led-on"; $("link-led").className = "led-green";
$("link-led").title = "Connected"; $("link-led").title = "Connected";
tools.debug("WebSocket opened:", event); tools.debug("WebSocket opened:", event);
atx.loadInitialState(); atx.loadInitialState();
@ -85,7 +85,7 @@ function Session(atx, hid, msd) {
}; };
var __wsCloseHandler = function(event) { var __wsCloseHandler = function(event) {
$("link-led").className = "led-off"; $("link-led").className = "led-gray";
tools.debug("WebSocket closed:", event); tools.debug("WebSocket closed:", event);
if (__ping_timer) { if (__ping_timer) {
clearInterval(__ping_timer); clearInterval(__ping_timer);
@ -95,7 +95,7 @@ function Session(atx, hid, msd) {
atx.clearState(); atx.clearState();
__ws = null; __ws = null;
setTimeout(function() { setTimeout(function() {
$("link-led").className = "led-link-connecting"; $("link-led").className = "led-yellow";
setTimeout(__startPoller, 500); setTimeout(__startPoller, 500);
}, 500); }, 500);
}; };

6
web/js/stream.js
View File

@ -46,7 +46,7 @@ function Stream() {
tools.info("Refreshing stream ..."); tools.info("Refreshing stream ...");
$("stream-image").className = "stream-image-inactive"; $("stream-image").className = "stream-image-inactive";
$("stream-box").classList.add("stream-box-inactive"); $("stream-box").classList.add("stream-box-inactive");
$("stream-led").className = "led-off"; $("stream-led").className = "led-gray";
$("stream-led").title = "Stream inactive"; $("stream-led").title = "Stream inactive";
$("stream-screenshot-button").disabled = true; $("stream-screenshot-button").disabled = true;
$("stream-quality-slider").disabled = true; $("stream-quality-slider").disabled = true;
@ -56,7 +56,7 @@ function Stream() {
__prev_state = false; __prev_state = false;
} else if (http.status === 200) { } else if (http.status === 200) {
if ($("stream-quality-slider").value != response.source.quality && !__quality_timer) { if ($("stream-quality-slider").value !== response.source.quality && !__quality_timer) {
$("stream-quality-slider").value = response.source.quality; $("stream-quality-slider").value = response.source.quality;
$("stream-quality-value").innerHTML = response.source.quality + "%"; $("stream-quality-value").innerHTML = response.source.quality + "%";
} }
@ -88,7 +88,7 @@ function Stream() {
$("stream-image").src = "/streamer/stream?t=" + new Date().getTime(); $("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
$("stream-image").className = "stream-image-active"; $("stream-image").className = "stream-image-active";
$("stream-box").classList.remove("stream-box-inactive"); $("stream-box").classList.remove("stream-box-inactive");
$("stream-led").className = "led-on"; $("stream-led").className = "led-green";
$("stream-led").title = "Stream is active"; $("stream-led").title = "Stream is active";
$("stream-screenshot-button").disabled = false; $("stream-screenshot-button").disabled = false;
$("stream-quality-slider").disabled = false; $("stream-quality-slider").disabled = false;