diff options
| -rw-r--r-- | kvmd/web/css/stream.css | 23 | ||||
| -rw-r--r-- | kvmd/web/index.html | 4 | ||||
| -rw-r--r-- | kvmd/web/js/mouse.js | 12 | ||||
| -rw-r--r-- | kvmd/web/js/stream.js | 2 | ||||
| -rw-r--r-- | kvmd/web/png/blank-stream.png | bin | 0 -> 346999 bytes |
5 files changed, 31 insertions, 10 deletions
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css index dc0f7baf..96b19810 100644 --- a/kvmd/web/css/stream.css +++ b/kvmd/web/css/stream.css @@ -7,13 +7,30 @@ img#stream-image { } img.stream-image-active { - cursor: crosshair; -webkit-filter: none; filter: none; } img.stream-image-inactive { + -webkit-filter: grayscale(100%) brightness(75%) sepia(75%); + filter: grayscale(100%) brightness(75%) sepia(75%); +} + +div#stream-box { + position: relative; + display: inline-block; +} +div.stream-box-active: { + cursor: crosshair; +} +div.stream-box-inactive::after { cursor: wait; - -webkit-filter: grayscale(100%) brightness(75%); - filter: grayscale(100%) brightness(75%); + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: inline-block; + background: radial-gradient(transparent 20%, black); } diff --git a/kvmd/web/index.html b/kvmd/web/index.html index 12d764f5..c7f0491f 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -205,7 +205,9 @@ <div id="stream-window" class="window" style="z-index: 1" tabindex="0"> <div class="window-header"><div class="window-grab">Stream</div></div> - <img id="stream-image" class="stream-image-inactive" alt="Loading..."/> + <div id="stream-box" class="stream-box-inactive"> + <img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" /> + </div> </div> <div id="keyboard-window" class="window" tabindex="0"> diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js index 3195582c..b9d27e67 100644 --- a/kvmd/web/js/mouse.js +++ b/kvmd/web/js/mouse.js @@ -4,12 +4,12 @@ var mouse = new function() { var __sent_pos = {x: 0, y:0}; this.init = function() { - el_stream_image = $("stream-image"); - el_stream_image.onmousedown = (event) => __buttonHandler(event, true); - el_stream_image.onmouseup = (event) => __buttonHandler(event, false); - el_stream_image.oncontextmenu = (event) => event.preventDefault(); - el_stream_image.onmousemove = __moveHandler; - el_stream_image.onwheel = (event) => __wheelHandler(event); + el_stream_box = $("stream-box"); + el_stream_box.onmousedown = (event) => __buttonHandler(event, true); + el_stream_box.onmouseup = (event) => __buttonHandler(event, false); + el_stream_box.oncontextmenu = (event) => event.preventDefault(); + el_stream_box.onmousemove = __moveHandler; + el_stream_box.onwheel = (event) => __wheelHandler(event); setInterval(__sendMove, 100); }; diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js index feb05d13..51e00a96 100644 --- a/kvmd/web/js/stream.js +++ b/kvmd/web/js/stream.js @@ -11,12 +11,14 @@ var stream = new function() { tools.info("Refreshing stream ..."); __prev_state = false; $("stream-image").className = "stream-image-inactive"; + $("stream-box").className = "stream-box-inactive"; $("stream-led").className = "led-off"; $("stream-reset-button").disabled = true; } else if (!__prev_state) { __refreshImage(); __prev_state = true; $("stream-image").className = "stream-image-active"; + $("stream-box").className = "stream-box-active"; $("stream-led").className = "led-on"; $("stream-reset-button").disabled = false; } diff --git a/kvmd/web/png/blank-stream.png b/kvmd/web/png/blank-stream.png Binary files differnew file mode 100644 index 00000000..f1e11b14 --- /dev/null +++ b/kvmd/web/png/blank-stream.png |
