From 469f08938c27fcf6e774d92f188b1bb089283142 Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 6 Oct 2013 19:33:55 +0300
Subject: [PATCH] added no camera image

---
 doc/todo.txt             |  1 -
 static/css/main.css      |  8 ++++++
 static/img/no-camera.svg | 61 ++++++++++++++++++++++++++++++++++++++++
 static/js/main.js        |  4 +--
 4 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 static/img/no-camera.svg

diff --git a/doc/todo.txt b/doc/todo.txt
index 937f34b..d8b1a52 100644
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -2,7 +2,6 @@
 -> authentication
 
 -> hide horrible 404 image on cameras
--> camera not available background and icon design
 
 -> prevent Request closed errors by stopping mjpg clients before stopping motion
 -> make all the server http requests async
diff --git a/static/css/main.css b/static/css/main.css
index 8d2b1dd..963a70f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -373,6 +373,13 @@ div.camera-placeholder {
     bottom: 0px;
     left: 0px;
     background-color: #555;
+    text-align: center;
+}
+
+img.no-camera {
+    margin-top: 20%;
+    width: 30%;
+    opacity: 0.8;
 }
 
 div.camera-progress {
@@ -384,6 +391,7 @@ div.camera-progress {
     opacity: 0;
     transition: all 0.2s linear;
     text-align: center;
+    background-color: rgba(0, 0, 0, 1);
 }
 
 img.camera-progress {
diff --git a/static/img/no-camera.svg b/static/img/no-camera.svg
new file mode 100644
index 0000000..b7f1800
--- /dev/null
+++ b/static/img/no-camera.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   width="160"
+   height="160"
+   xml:space="preserve"
+   sodipodi:docname="no-camera.svg"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6" /><sodipodi:namedview
+     pagecolor="#969696"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     id="namedview4"
+     showgrid="false"
+     inkscape:zoom="1"
+     inkscape:cx="194.39325"
+     inkscape:cy="58.632885"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g10" /><g
+     id="g10"
+     inkscape:groupmode="layer"
+     inkscape:label="ink_ext_XXXXXX"
+     transform="matrix(1.25,0,0,-1.25,0,160)"><g
+       id="g3916"
+       transform="matrix(0.23474178,0,0,0.23474178,-6.596479,-6.504096)"><path
+         id="path28"
+         transform="matrix(0.8,0,0,-0.8,0,599)"
+         d="m 370.46875,230.75 c -25.42532,0 -48.59369,9.59353 -66.125,25.34375 l 57.96875,57.96875 c 3.96533,-0.60105 8.02296,-0.9375 12.15625,-0.9375 44.43125,0 80.4375,36.00625 80.4375,80.4375 0,4.1334 -0.33645,8.19036 -0.9375,12.15625 L 554.5,506.25 c 14.98807,-4.91141 25.8125,-18.99541 25.8125,-35.625 l 0,-162.5 c 0,-20.71 -16.79,-37.5 -37.5,-37.5 l -20.875,0 0,-7.1875 c 0,-8.9975 -7.31375,-16.28125 -16.3125,-16.28125 -8.99625,0 -16.28125,7.28375 -16.28125,16.28125 l 0,7.1875 -39.4375,0 C 431.86011,246.414 402.99373,230.75 370.46875,230.75 z m -13.59375,13 27.5,0 c 8.63,0 15.625,6.99625 15.625,15.625 0,4.41759 -1.83365,8.40792 -4.78125,11.25 l -49.1875,0 c -2.94775,-2.84208 -4.78125,-6.83241 -4.78125,-11.25 0,-8.62875 6.99625,-15.625 15.625,-15.625 z"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         inkscape:connector-curvature="0" /><path
+         id="path3901"
+         d="m 164.25,382.5 c -16.569,0 -30,-13.432 -30,-30 l 0,-130 c 0,-16.568 13.431,-30 30,-30 l 203.075,0 -35.8,35.775 c -9.41466,-5.39918 -20.31889,-8.5 -31.95,-8.5 -35.543,0 -64.35,28.831 -64.35,64.375 0,11.62338 3.11098,22.51462 8.5,31.925 L 177.3,382.5 l -13.05,0 z"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         inkscape:connector-curvature="0" /><path
+         id="path36"
+         transform="matrix(0.8,0,0,-0.8,0,599)"
+         d="m 374.0625,54.96875 c -176.1485,0 -319.5,143.28875 -319.5,319.4375 0,176.15678 143.35153,319.5 319.5,319.5 176.15077,0 319.5,-143.34335 319.5,-319.5 0,-176.14864 -143.3492,-319.4375 -319.5,-319.4375 z m 0,50 c 149.1292,0 269.5,120.31114 269.5,269.4375 0,64.41395 -22.47282,123.45239 -60,169.75 L 204.34375,164.9375 c 46.29727,-37.51599 105.31199,-59.96875 169.71875,-59.96875 z m -209.5,99.71875 379.21875,379.21875 c -46.2979,37.52569 -105.30826,60 -169.71875,60 -149.12653,0 -269.5,-120.36428 -269.5,-269.5 0,-64.4098 22.47246,-123.42872 60,-169.71875 z"
+         style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         inkscape:connector-curvature="0" /></g></g></svg>
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 430f93e..ea730cd 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -659,7 +659,6 @@ function showProgress() {
     applyButton.animate({'opacity': '1'}, 100);
     applyButton.addClass('progress');
     
-    $('img.camera').css('opacity', '0.3');
     $('div.camera-progress').css('opacity', '0.5');
 }
 
@@ -685,7 +684,6 @@ function endProgress() {
     }
     
     $('div.camera-progress').css('opacity', '0');
-    $('img.camera').css('opacity', '1');
 }
 
 function isProgress() {
@@ -1083,7 +1081,7 @@ function addCameraFrameUi(cameraId, cameraName, framerate) {
                     '</div>' +
                 '</div>' +
                 '<div class="camera-container">' +
-                    '<div class="camera-placeholder"></div>' +
+                    '<div class="camera-placeholder"><img class="no-camera" src="' + staticUrl + 'img/no-camera.svg"></div>' +
                     '<img class="camera">' +
                     '<div class="camera-progress"><img class="camera-progress"></div>' +
                 '</div>' +
-- 
2.39.5