From 1b04a3f90df2d1f0d3c8a6258b59613840072227 Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Mon, 30 Nov 2015 20:48:32 +0200
Subject: [PATCH] initial work on better camera frame look and feel

---
 motioneye/static/css/main.css               | 270 ++++++++++++++------
 motioneye/static/css/ui.css                 |  13 +-
 motioneye/static/img/camera-top-buttons.svg | 174 +++++++++++++
 motioneye/static/img/logout.svg             |  56 ----
 motioneye/static/img/settings.svg           | 108 --------
 motioneye/static/img/top-bar-buttons.svg    | 225 ++++++++--------
 motioneye/static/js/main.js                 | 103 ++++++--
 motioneye/templates/main.html               |   4 +-
 8 files changed, 558 insertions(+), 395 deletions(-)
 create mode 100644 motioneye/static/img/camera-top-buttons.svg
 delete mode 100644 motioneye/static/img/logout.svg
 delete mode 100644 motioneye/static/img/settings.svg

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index 140c889..937fc46 100644
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -106,13 +106,12 @@ div.copyright-note {
 }
 
 div.page-container {
-    transition: all 0.2s linear;
-    padding: 55px 5px 3em 2%;
+    transition: all 0.1s linear;
+    padding: 50px 0.2em 50px 0px;
 }
 
 div.page-container.stretched {
     margin-left: 40%;
-    padding-left: 5px;
 }
 
 
@@ -121,15 +120,23 @@ div.page-container.stretched {
 div.button.settings-button {
     margin: 1px;
     vertical-align: middle;
-    background-image: url(../img/settings.svg);
+    background-image: url(../img/top-bar-buttons.svg);
+    background-size: cover;
     width: 48px;
     height: 48px;
+    transition: transform 0.1s ease;    
+}
+
+div.settings-top-bar.open div.button.settings-button {
+    transform: rotate(90deg);
 }
 
 div.button.logout-button {
     margin: 1px;
     vertical-align: middle;
-    background-image: url(../img/logout.svg);
+    background-image: url(../img/top-bar-buttons.svg);
+    background-size: cover;
+    background-position: -100% 0px;
     width: 48px;
     height: 48px;
 }
@@ -150,10 +157,11 @@ div.button.rem-camera-button {
     display: none;
     margin: 1px;
     vertical-align: middle;
-    background-image: url(../img/settings.svg);
+    background-image: url(../img/top-bar-buttons.svg);
+    background-size: cover;
+    background-position: -200% 0px;
     width: 48px;
     height: 48px;
-    background-position: -48px 0px;
 }
 
 div.settings-top-bar.open div.button.rem-camera-button {
@@ -228,7 +236,7 @@ div.settings {
 
 div.settings.open {
     width: 40%;
-    min-width: 320px;
+    min-width: 360px;
 }
 
 body:not(.admin) div.settings {
@@ -266,7 +274,7 @@ div.settings-top-bar {
 
 div.settings-top-bar.open {
     background-color: #414141;
-    min-width: 320px;
+    min-width: 360px;
 }
 
 body:not(.admin) div.settings-top-bar {
@@ -321,9 +329,9 @@ div.settings-item-separator {
 
 #cameraSelect {
     display: none;
-    padding: 4px 1.5em 4px 4px;
+    padding: 2px 1.5em 2px 2px;
     vertical-align: middle;
-    font-size: 1.1em;
+    font-size: 1.2em;
     width: auto;
     max-width: 35%;
 }
@@ -803,34 +811,48 @@ div.camera-list {
     text-align: center;
 }
 
-div.camera-frame,
-div.camera-frame-place-holder {
+div.camera-frame {
+    width: 100%;
     position: relative;
-    width: 32%;
+    box-sizing: border-box;
     text-align: left;
     background-color: #313131;
     display: inline-block;
-    padding: 0px 3px 3px 3px;
-    border-radius: 3px;
-    transition: all 0.2s, opacity 0s;
-    margin: 2px;
+    padding: 0.2em;
+    border-radius: 0.1em;
+    border: 0.2em solid #212121;
+    border-right-width: 0px;
+    border-bottom-width: 0px;
+    transition: all 0.1s, opacity 0s;
     opacity: 0;
     vertical-align: top;
+    cursor: pointer;
 }
 
-div.camera-frame:only-child,
-div.camera-frame-place-holder:only-child {
-    width: 48%;
-}
-
-div.camera-frame-place-holder {
-    visibility: hidden;
+div.camera-frame:HOVER {
+    background-color: #414141;
 }
 
 div.camera-frame.motion-detected {
     background-color: #712727;
 }
 
+div.page-container.one-column div.camera-frame {
+    width: 100%;
+}
+
+div.page-container.two-columns div.camera-frame {
+    width: 50%;
+}
+
+div.page-container.three-columns div.camera-frame {
+    width: 33%;
+}
+
+div.page-container.four-columns div.camera-frame {
+    width: 25%;
+}
+
 div.modal-container div.camera-frame {
     width: auto;
     padding: 0px;
@@ -838,62 +860,167 @@ div.modal-container div.camera-frame {
     background-color: #414141;
 }
 
-div.camera-frame:HOVER {
-    background-color: #414141;
+div.camera-overlay {
+    position: absolute;
+    top: 0.2em;
+    right: 0.2em;
+    left: 0.2em;
+    bottom: 0.2em;
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
 
-div.camera-frame.motion-detected:HOVER {
-    background-color: #8B3636;
+div.camera-overlay.visible {
+    opacity: 1;
 }
 
-div.camera-top-bar {
-    padding: 3px 0px;
-    font-size: 20px;
-    height: 25px;
+div.camera-overlay-top,
+div.camera-overlay-bottom {
+    position: absolute;
+    background-color: rgba(49, 49, 49, 0.5);
+    left: 0px;
+    width: 100%;
 }
 
-div.modal-container div.camera-top-bar {
-    display: none;
+div.camera-frame:HOVER div.camera-overlay-top,
+div.camera-frame:HOVER div.camera-overlay-bottom {
+    background-color: rgba(65, 65, 65, 0.5);
 }
 
-span.camera-name {
-    float: left;
-    line-height: 25px;
+div.camera-frame.motion-detected div.camera-overlay-top,
+div.camera-frame.motion-detected div.camera-overlay-bottom {
+    background-color: rgba(113, 39, 39, 0.5);
 }
 
-div.camera-buttons {
-    float: right;
+div.camera-overlay-top {
+    top: 0px;
+    height: 2.5em;
+    line-height: 2.5em;
+    white-space: nowrap;
 }
 
-div.camera-button {
+div.camera-name {
     display: inline-block;
-    width: 24px;
-    height: 24px;
-    background-image: url(../img/top-bar-buttons.svg);
+    font-size: 1.5em;
+    white-space: nowrap;
+    width: 50%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+span.camera-name {
+    padding-left: 0.4em;
+}
+
+div.camera-top-buttons {
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    text-align: right;
+}
+
+div.camera-top-button {
+    background-image: url(../img/camera-top-buttons.svg);
     background-size: cover;
-    margin-left: 3px;
-    cursor: pointer;
-    transition: all 0.1s linear;
+    width: 2em;
+    height: 2em;
+    vertical-align: top;
+    margin-top: 0.25em;
+}
+
+div.camera-top-button:last-child {
+    margin-right: 0.25em;
+}
+
+div.camera-top-button.full-screen {
+    background-position: -100% 0px;
 }
 
-div.camera-button.close {
+div.camera-top-button.configure {
     background-position: 0px 0px;
 }
 
-div.camera-button.full-screen {
+div.camera-top-button.media-pictures {
     background-position: -200% 0px;
 }
 
-div.camera-button.configure {
+div.camera-top-button.media-movies {
+    background-position: -300% 0px;
+}
+
+div.camera-overlay-bottom {
+    bottom: 0px;
+    white-space: nowrap;
+    height: 4.5em;
+}
+
+div.camera-info {
+    display: inline-block;
+    white-space: nowrap;
+    width: 33%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+
+span.camera-info-name {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 50%;
+    text-align: right;
+}
+
+span.camera-info-value {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 48%;
+    text-align: left;
+    padding-left: 0.5em;
+    font-weight: bold;
+}
+
+div.camera-action-buttons {
+    display: inline-block;
+    white-space: nowrap;
+    width: 66%;
+    vertical-align: top;
+    text-align: right;
+}
+
+div.camera-action-button {
+    background-image: url(../img/camera-top-buttons.svg);
+    background-size: cover;
+    width: 4em;
+    height: 4em;
+    vertical-align: top;
+    margin: 0.25em;
+}
+
+/* div.camera-action-button:last-child { */
+/*     margin-right: 0.25em; */
+/* } */
+
+div.camera-action-button.lock {
     background-position: -100% 0px;
 }
 
-div.camera-button.media-pictures {
-    background-position: -300% 0px;
+div.camera-action-button.unlock {
+    background-position: 0px 0px;
+}
+
+div.camera-action-button.light-on {
+    background-position: -200% 0px;
+}
+
+div.camera-action-button.light-off {
+    background-position: -200% 0px;
 }
 
-div.camera-button.media-movies {
-    background-position: -400% 0px;
+div.camera-action-button.alarm {
+    background-position: -300% 0px;
 }
 
 div.camera-container {
@@ -966,12 +1093,12 @@ img.camera-progress {
     /* smaller screens */
     
     body {
-        font-size: 17px;
+        font-size: 16px;
     }
 }
 
 @media all and (max-width: 1000px) {
-    /* small screens (mobile devices) */
+    /* small screens (mobile devices, including tablets) */
     
     div.page-container.stretched {
         margin-left: 0px;
@@ -1008,38 +1135,23 @@ img.camera-progress {
 }
 
 @media all and (max-width: 400px) {
-    /* very small screens */
+    /* very small screens (older phones) */
     
     body {
-        font-size: 13px;
+        font-size: 16px;
     }
     
-    div.camera-button {
-        background-size: cover;
-        width: 24px;
-        height: 24px;
+    div.settings.open {
+        min-width: 100%;
     }
-}
 
-@media all and (max-width: 1900px) {
-    div.camera-frame, 
-    div.camera-frame-place-holder {
-        width: 48%;
+    div.settings-top-bar.open {
+        min-width: 100%;
     }
 }
 
 @media all and (max-width: 1200px) {
-    div.page-container {
-        padding-left: 1%;
-    }
-
-    div.camera-frame,
-    div.camera-frame-place-holder {
-        width: 98%;
-    }
-
-    div.camera-frame:only-child,
-    div.camera-frame-place-holder:only-child {
-        width: 98%;
+    div.camera-frame {
+        width: 100% !important;
     }
 }
diff --git a/motioneye/static/css/ui.css b/motioneye/static/css/ui.css
index d8c6a42..64d56ed 100644
--- a/motioneye/static/css/ui.css
+++ b/motioneye/static/css/ui.css
@@ -372,10 +372,11 @@ div.modal-close-button {
     position: absolute;
     top: 0.2em;
     right: 0.3em;
-    width: 1.1em;
-    height: 1.1em;
-    background-image: url(../img/top-bar-buttons.svg);
+    width: 1.5em;
+    height: 1.5em;
+    background-image: url(../img/camera-top-buttons.svg);
     background-size: cover;
+    background-position: -400% 0px;
     cursor: pointer;
 }
 
@@ -465,10 +466,4 @@ span.popup-message.error {
         min-height: 2em;
         line-height: 2em;
     }
-    
-    div.modal-close-button {
-        background-size: cover;
-        width: 24px;
-        height: 24px;
-    }
 }
diff --git a/motioneye/static/img/camera-top-buttons.svg b/motioneye/static/img/camera-top-buttons.svg
new file mode 100644
index 0000000..db32747
--- /dev/null
+++ b/motioneye/static/img/camera-top-buttons.svg
@@ -0,0 +1,174 @@
+<?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"
+   width="160"
+   height="32"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="camera-top-buttons.svg"
+   inkscape:export-filename="/media/data/projects/motioneye/static/img/top-bar-buttons.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#aaaaaa"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.74509804"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="150.49331"
+     inkscape:cy="16.048896"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:snap-intersection-paths="true"
+     showguides="false"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4156"
+       empspacing="8"
+       enabled="true"
+       visible="true"
+       snapvisiblegridlinesonly="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1020.3622)">
+    <path
+       style="fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 108,1030.3622 10,6 -10,6 z"
+       id="path3819"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+    <path
+       sodipodi:nodetypes="cccccccccccccccccccccc"
+       style="fill:#3498db;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       id="path3-0"
+       d="m 16.11329,1028.8869 c 1.51525,-1.5152 3.73031,-1.8995 5.60282,-1.1568 l -3.58249,3.5826 c -0.19802,0.1977 -0.19752,0.521 5.1e-4,0.719 l 2.19757,2.1975 c 0.19777,0.1973 0.52181,0.1983 0.71908,0 l 3.58249,-3.5826 c 0.7424,1.8724 0.35802,4.0878 -1.15672,5.6021 -1.31089,1.3115 -3.14663,1.7719 -4.83074,1.3916 l -5.90889,5.9094 c -1.083439,1.0834 -2.8403292,1.0834 -3.9237692,0 -1.0842,-1.0834 -1.0842,-2.8401 0,-3.9243 10e-4,0 0.002,0 0.004,0 l 5.9045692,-5.9051 c -0.37957,-1.6845 0.0811,-3.52 1.39202,-4.8306 z m -6.3112692,13.6744 c 0.5375402,0.5368 1.4082502,0.5368 1.9457902,0 0.536519,-0.5373 0.537029,-1.408 0,-1.9453 -0.53754,-0.5367 -1.40825,-0.5378 -1.9457902,0 -0.53728,0.5373 -0.53703,1.4078 0,1.9459 z" />
+    <circle
+       r="13"
+       cy="1036.3623"
+       cx="16.000002"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4108" />
+    <circle
+       r="13"
+       cy="1036.3623"
+       cx="48"
+       id="path3863"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 46,1030.3622 -4,0 0,4"
+       id="path3865"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path3867"
+       d="m 50,1030.3622 4,0 0,4"
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 46,1042.3622 -4,0 0,-4"
+       id="path3869"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path3871"
+       d="m 50,1042.3622 4,0 0,-4"
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <circle
+       r="13"
+       cy="1036.3623"
+       cx="112"
+       id="circle4192"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <circle
+       r="13"
+       cy="1036.3623"
+       cx="80"
+       id="circle4211"
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4213"
+       d="m 73,1030.3622 14,0 0,12 -14,0 z"
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4215"
+       d="m 73,1041.3622 5,-5 3,3 2,-2 4,4"
+       style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:#3498db;stroke-width:1px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" />
+    <circle
+       style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4219"
+       cx="83.5"
+       cy="1033.8622"
+       r="1.5" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4149"
+       cx="144"
+       cy="1036.3623"
+       r="13" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 139,1031.3622 10,10"
+       id="path4151"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 139,1041.3622 10,-10"
+       id="path4153"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
diff --git a/motioneye/static/img/logout.svg b/motioneye/static/img/logout.svg
deleted file mode 100644
index cda383d..0000000
--- a/motioneye/static/img/logout.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?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"
-   xml:space="preserve"
-   viewBox="0 0 64 64"
-   version="1.1"
-   inkscape:version="0.48.5 r10040"
-   width="100%"
-   height="100%"
-   sodipodi:docname="logout.svg"><defs
-     id="defs8" /><sodipodi:namedview
-     pagecolor="#666666"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1077"
-     inkscape:window-height="782"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="5.1943359"
-     inkscape:cx="24.357877"
-     inkscape:cy="26.948648"
-     inkscape:window-x="258"
-     inkscape:window-y="33"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg2" /><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" /><dc:title /></cc:Work></rdf:RDF></metadata><path
-     sodipodi:nodetypes="ssccccccsccccc"
-     style="fill:#3498db;fill-opacity:1"
-     id="path3"
-     d="m 21.267338,42.732446 c 3.741665,3.741354 9.807034,3.741354 13.548699,0 2.776803,-2.77657 3.490747,-6.8354 2.144089,-10.273324 l 5.763494,-5.763661 c 1.49694,-1.496847 1.496489,-3.922567 0,-5.419481 -1.496034,-1.496525 -3.922182,-1.496525 -5.419118,0 l -5.763946,5.764034 c -3.437493,-1.346908 -7.495965,-0.633431 -10.27367,2.144832 -3.740312,3.740676 -3.740765,9.806754 4.52e-4,13.5476 z m 6.435428,-6.434662 c 0.898073,0.897093 0.898073,2.353493 0,3.2516 -0.897621,0.897939 -2.35394,0.897939 -3.251561,0 -0.89717,-0.898107 -0.89717,-2.354507 0,-3.2516 0.897621,-0.898107 2.353489,-0.898107 3.251561,0 z"
-     inkscape:connector-curvature="0" /><path
-     sodipodi:type="arc"
-     style="fill:none;stroke:#3498db;stroke-width:1.80392128;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-     id="path4097"
-     sodipodi:cx="16"
-     sodipodi:cy="16.5"
-     sodipodi:rx="14"
-     sodipodi:ry="12.5"
-     d="m 30,16.5 a 14,12.5 0 1 1 -28,0 14,12.5 0 1 1 28,0 z"
-     transform="matrix(1.5714286,0,0,1.7600001,6.8571426,2.9599978)" /></svg>
\ No newline at end of file
diff --git a/motioneye/static/img/settings.svg b/motioneye/static/img/settings.svg
deleted file mode 100644
index c11c28e..0000000
--- a/motioneye/static/img/settings.svg
+++ /dev/null
@@ -1,108 +0,0 @@
-<?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"
-   width="96"
-   height="48"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="settings.svg"
-   inkscape:export-filename="/media/data/projects/motioneye/static/img/settings.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="17.085938"
-     inkscape:cx="93.239037"
-     inkscape:cy="25.695745"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1920"
-     inkscape:window-height="1027"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="1"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:bbox-paths="true"
-     inkscape:snap-bbox-edge-midpoints="true"
-     inkscape:snap-bbox-midpoints="true"
-     inkscape:object-paths="true"
-     inkscape:object-nodes="true"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-midpoints="true"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:snap-intersection-paths="true"
-     showguides="true"
-     inkscape:guide-bbox="true" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-1004.3622)">
-    <path
-       style="fill:#3498db;fill-opacity:1;stroke:none"
-       d="m 23,30 c -2.045693,0 -3.788228,1.240478 -4.5625,3 L 5,33 c -0.554,0 -1,0.446 -1,1 l 0,2 c 0,0.554 0.446,1 1,1 l 13.4375,0 c 0.774272,1.759522 2.516807,3 4.5625,3 2.045693,0 3.788228,-1.240478 4.5625,-3 L 43,37 c 0.554,0 1,-0.446 1,-1 l 0,-2 c 0,-0.554 -0.446,-1 -1,-1 L 27.5625,33 C 26.788228,31.240478 25.045693,30 23,30 z m 0,3 c 1.10457,0 2,0.89543 2,2 0,1.10457 -0.89543,2 -2,2 -1.10457,0 -2,-0.89543 -2,-2 0,-1.10457 0.89543,-2 2,-2 z"
-       transform="translate(0,1004.3622)"
-       id="rect3755"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#3498db;fill-opacity:1;stroke:none"
-       d="m 36,20 c -2.045693,0 -3.788228,1.240478 -4.5625,3 L 5,23 c -0.554,0 -1,0.446 -1,1 l 0,2 c 0,0.554 0.446,1 1,1 l 26.4375,0 c 0.774272,1.759522 2.516807,3 4.5625,3 2.045693,0 3.788228,-1.240478 4.5625,-3 L 43,27 c 0.554,0 1,-0.446 1,-1 l 0,-2 c 0,-0.554 -0.446,-1 -1,-1 l -2.4375,0 C 39.788228,21.240478 38.045693,20 36,20 z m 0,3 c 1.10457,0 2,0.89543 2,2 0,1.10457 -0.89543,2 -2,2 -1.10457,0 -2,-0.89543 -2,-2 0,-1.10457 0.89543,-2 2,-2 z"
-       transform="translate(0,1004.3622)"
-       id="rect3757"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#3498db;fill-opacity:1;stroke:none"
-       d="m 15,10 c -2.045692,0 -3.788228,1.240478 -4.5625,3 L 5,13 c -0.554,0 -1,0.446 -1,1 l 0,2 c 0,0.554 0.446,1 1,1 l 5.4375,0 c 0.774272,1.759522 2.516808,3 4.5625,3 2.045692,0 3.788228,-1.240478 4.5625,-3 L 43,17 c 0.554,0 1,-0.446 1,-1 l 0,-2 c 0,-0.554 -0.446,-1 -1,-1 L 19.5625,13 C 18.788228,11.240478 17.045692,10 15,10 z m 0,3 c 1.10457,0 2,0.89543 2,2 0,1.10457 -0.89543,2 -2,2 -1.10457,0 -2,-0.89543 -2,-2 0,-1.10457 0.89543,-2 2,-2 z"
-       transform="translate(0,1004.3622)"
-       id="rect3759"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:2.6408689;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path3764"
-       sodipodi:cx="67.901237"
-       sodipodi:cy="6.4814816"
-       sodipodi:rx="20.098766"
-       sodipodi:ry="19.518518"
-       d="m 88.000004,6.4814816 a 20.098766,19.518518 0 1 1 -40.197533,0 20.098766,19.518518 0 1 1 40.197533,0 z"
-       transform="matrix(0.74631447,0,0,0.76850096,21.324322,1023.3813)" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path3766"
-       d="m 82,1030.3622 c 0.554,0 1,-0.446 1,-1 l 0,-2 c 0,-0.554 -0.446,-1 -1,-1 -13.004,0 -8.7461,0 -20,0 -0.554,0 -1,0.446 -1,1 l 0,2 c 0,0.554 0.446,1 1,1 12.4816,0 8.4097,0 20,0 z"
-       style="fill:#3498db;fill-opacity:1;stroke:none"
-       sodipodi:nodetypes="cssccsscc" />
-  </g>
-</svg>
diff --git a/motioneye/static/img/top-bar-buttons.svg b/motioneye/static/img/top-bar-buttons.svg
index a10c006..2cc1d00 100644
--- a/motioneye/static/img/top-bar-buttons.svg
+++ b/motioneye/static/img/top-bar-buttons.svg
@@ -9,59 +9,61 @@
    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"
-   width="80"
-   height="16"
-   id="svg2"
+   width="144"
+   height="48"
+   viewBox="0 0 144 48.000001"
+   id="svg4231"
    version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="top-bar-buttons.svg"
-   inkscape:export-filename="/media/data/projects/motioneye/static/img/top-bar-buttons.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90">
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="top-bar-buttons.svg">
   <defs
-     id="defs4" />
+     id="defs4233" />
   <sodipodi:namedview
      id="base"
-     pagecolor="#b39a9a"
+     pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
-     inkscape:pageopacity="0.42745098"
+     inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.25"
-     inkscape:cx="111.39282"
-     inkscape:cy="5.668431"
+     inkscape:zoom="1"
+     inkscape:cx="130.04499"
+     inkscape:cy="17.186938"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
-     showgrid="false"
+     showgrid="true"
+     units="px"
      inkscape:window-width="1920"
-     inkscape:window-height="1030"
+     inkscape:window-height="1018"
      inkscape:window-x="0"
      inkscape:window-y="25"
      inkscape:window-maximized="1"
      inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
      inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
      inkscape:snap-bbox-edge-midpoints="true"
      inkscape:snap-bbox-midpoints="true"
      inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
      inkscape:object-nodes="true"
      inkscape:snap-smooth-nodes="true"
      inkscape:snap-midpoints="true"
      inkscape:snap-object-midpoints="true"
      inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:snap-intersection-paths="true"
-     showguides="true"
-     inkscape:guide-bbox="true" />
+     inkscape:snap-text-baseline="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4903"
+       empspacing="24" />
+  </sodipodi:namedview>
   <metadata
-     id="metadata7">
+     id="metadata4236">
     <rdf:RDF>
       <cc:Work
          rdf:about="">
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
+        <dc:title></dc:title>
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -69,116 +71,105 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(0,-1036.3622)">
-    <path
-       sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path3752"
-       sodipodi:cx="7.8036885"
-       sodipodi:cy="8.2353296"
-       sodipodi:rx="5.6186557"
-       sodipodi:ry="5.3845448"
-       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
-       transform="matrix(1.1568604,0,0,1.2071587,-1.0277779,1034.4208)" />
+     transform="translate(0,-1004.3622)">
+    <circle
+       cy="1022.3622"
+       cx="72"
+       style="fill:#3498db;fill-opacity:1;stroke:none"
+       id="path3881"
+       inkscape:export-filename="/media/data/projects/reshaped/static/img/tool-icons/tool-participants.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90"
+       r="5.5" />
     <path
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-       d="m 5.5,5.5 5,5"
-       id="path3756"
+       style="fill:#3498db;fill-opacity:1;stroke:none;enable-background:new"
+       d="m 61.999997,1037.3622 c 0,-4 3.00048,-7.8936 6.00048,-8.8936 2,1.4798 6.02601,1.5318 8,0 3,1 5.98301,4.8771 5.99952,8.8936 z"
+       id="path3883"
        inkscape:connector-curvature="0"
-       transform="translate(0,1036.3622)"
-       sodipodi:nodetypes="cc" />
-    <path
-       sodipodi:nodetypes="cc"
-       inkscape:connector-curvature="0"
-       id="path3758"
-       d="m 10.5,1041.8622 -5,5"
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path3792"
-       sodipodi:cx="7.8036885"
-       sodipodi:cy="8.2353296"
-       sodipodi:rx="5.6186557"
-       sodipodi:ry="5.3845448"
-       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
-       transform="matrix(-1.1568604,0,0,1.2071587,33.027778,1034.4209)" />
+       sodipodi:nodetypes="ccccc"
+       inkscape:export-filename="/media/data/projects/reshaped/static/img/tool-icons/tool-participants.png"
+       inkscape:export-xdpi="90"
+       inkscape:export-ydpi="90" />
+    <circle
+       cy="1028.3622"
+       cx="24"
+       id="path4099"
+       style="fill:none;stroke:#3498db;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       r="17.5" />
+    <rect
+       ry="1"
+       rx="1"
+       y="1026.3622"
+       x="14.000001"
+       height="4"
+       width="20"
+       id="rect4038"
+       style="fill:#3498db;fill-opacity:1;stroke:none" />
+    <rect
+       ry="1"
+       rx="1"
+       y="1020.3622"
+       x="14.000001"
+       height="4"
+       width="20"
+       id="rect4038-2"
+       style="fill:#3498db;fill-opacity:1;stroke:none" />
+    <rect
+       style="fill:#3498db;fill-opacity:1;stroke:none"
+       id="rect4213"
+       width="20"
+       height="4"
+       x="14.000001"
+       y="1032.3622"
+       rx="1"
+       ry="1" />
     <path
-       sodipodi:nodetypes="cc"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 111.99999,1022.3622 2,16 12,0 2,-16 z"
+       id="path4219"
        inkscape:connector-curvature="0"
-       id="path3794"
-       d="m 21.5,1046.8622 3,-3"
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+       sodipodi:nodetypes="ccccc" />
     <path
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-       d="m 24.5,1043.8622 0,-2"
-       id="path3796"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 110.99999,1019.3622 18,0"
+       id="path4221"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
        sodipodi:nodetypes="cc"
        inkscape:connector-curvature="0"
-       id="path3798"
-       d="m 24.5,1043.8622 2,0"
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+       id="path4223"
+       d="m 115.99999,1017.3622 8,0"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <path
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-       d="m 27.5,1042.8622 -1,1"
-       id="path3800"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 119.99999,1026.3622 0,9"
+       id="path4225"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
     <path
-       sodipodi:nodetypes="cc"
-       inkscape:connector-curvature="0"
-       id="path3802"
-       d="m 25.5,1040.8622 -1,1"
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       transform="matrix(-1.1568604,0,0,1.2071587,49.027778,1034.4209)"
-       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
-       sodipodi:ry="5.3845448"
-       sodipodi:rx="5.6186557"
-       sodipodi:cy="8.2353296"
-       sodipodi:cx="7.8036885"
-       id="path3759"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       sodipodi:type="arc" />
-    <path
-       sodipodi:nodetypes="ccccc"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 122.99999,1035.3622 1,-9"
+       id="path4227"
        inkscape:connector-curvature="0"
-       id="path3761"
-       d="m 36.5,1041.8622 7,0 0,5 -7,0 z"
-       style="fill:none;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
-    <path
-       style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:8.06000042;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
-       d="m 56.025,1041.1703 c -0.717378,0 -1.358863,0.3074 -1.769063,0.7819 l -1.988437,0 c -0.436275,0 -0.7875,0.3512 -0.7875,0.7875 l 0,3.375 c 0,0.4363 0.351225,0.7875 0.7875,0.7875 l 7.425,0 c 0.436275,0 0.7875,-0.3512 0.7875,-0.7875 l 0,-3.375 c 0,-0.4363 -0.351225,-0.7875 -0.7875,-0.7875 l -0.2925,0 0,-0.1012 a 0.450045,0.450045 0 1 0 -0.9,0 l 0,0.1012 -0.705938,0 c -0.409047,-0.4745 -1.051682,-0.7819 -1.769062,-0.7819 z m -0.36,0.3319 0.72,0 c 0.12465,0 0.225,0.1004 0.225,0.225 l 0,0.09 c 0,0.1247 -0.10035,0.225 -0.225,0.225 l -0.72,0 c -0.12465,0 -0.225,-0.1003 -0.225,-0.225 l 0,-0.09 c 0,-0.1246 0.10035,-0.225 0.225,-0.225 z m 0.36,1.35 c 0.919555,0 1.665,0.7455 1.665,1.665 0,0.9196 -0.745445,1.665 -1.665,1.665 -0.919553,0 -1.665,-0.7454 -1.665,-1.665 0,-0.9195 0.745447,-1.665 1.665,-1.665 z"
-       id="path3803"
-       inkscape:connector-curvature="0" />
-    <path
-       sodipodi:type="arc"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       id="path3815"
-       sodipodi:cx="7.8036885"
-       sodipodi:cy="8.2353296"
-       sodipodi:rx="5.6186557"
-       sodipodi:ry="5.3845448"
-       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
-       transform="matrix(-1.1568604,0,0,1.2071587,65.027778,1034.4209)" />
-    <path
-       transform="matrix(-1.1568604,0,0,1.2071587,81.027778,1034.4209)"
-       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
-       sodipodi:ry="5.3845448"
-       sodipodi:rx="5.6186557"
-       sodipodi:cy="8.2353296"
-       sodipodi:cx="7.8036885"
-       id="path3817"
-       style="fill:none;stroke:#3498db;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
-       sodipodi:type="arc" />
+       sodipodi:nodetypes="cc" />
     <path
-       style="fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
-       d="m 69.5,1040.8622 6,3.5 -6,3.5 z"
-       id="path3819"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 116.99999,1035.3622 -1,-9"
+       id="path4229"
        inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccc" />
+       sodipodi:nodetypes="cc" />
+    <circle
+       r="17.5"
+       style="fill:none;stroke:#3498db;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4905"
+       cx="72"
+       cy="1028.3622" />
+    <circle
+       cy="1028.3622"
+       cx="120"
+       id="circle4907"
+       style="fill:none;stroke:#3498db;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       r="17.5" />
   </g>
 </svg>
diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index ced0289..97391c8 100644
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -53,6 +53,10 @@ Object.keys = Object.keys || (function () {
     };
 })();
 
+Object.values = function (obj) {
+    return Object.keys(obj).map(function (k) {return obj[k];});
+};
+
 Object.update = function (dest, source) {
     for (var key in source) {
         if (!source.hasOwnProperty(key)) {
@@ -848,6 +852,32 @@ function getCameraProgress(cameraId) {
     return getCameraFrame(cameraId).find('div.camera-progress'); 
 }
 
+function setLayoutColumns(columns) {
+    var cssClasses = {
+        1: 'one-column',
+        2: 'two-columns',
+        3: 'three-columns',
+        4: 'four-columns'
+    };
+    
+    getPageContainer().removeClass(Object.values(cssClasses).join(' '));
+    getPageContainer().addClass(cssClasses[columns]);
+}
+
+function showCameraOverlay() {
+    getCameraFrames().find('div.camera-overlay').css('display', '');
+    setTimeout(function () {
+        getCameraFrames().find('div.camera-overlay').addClass('visible');
+    }, 10);
+}
+
+function hideCameraOverlay() {
+    getCameraFrames().find('div.camera-overlay').removeClass('visible');
+    setTimeout(function () {
+        getCameraFrames().find('div.camera-overlay').css('display', 'none');
+    }, 300);
+}
+
 
     /* settings */
 
@@ -2542,7 +2572,7 @@ function pushCameraConfig(reboot) {
     }
     
     /* also update the config stored in the camera frame div */
-    var cameraFrame = $('div.camera-frame#camera' + cameraId);
+    var cameraFrame = getCameraFrame(cameraId);
     if (cameraFrame.length) {
         Object.update(cameraFrame[0].config, cameraConfig);
     }
@@ -2592,7 +2622,7 @@ function getCameraIdsByInstance() {
      * the local instance has both the host and the port set to empty string */
     
     var cameraIdsByInstance = {};
-    $('div.camera-frame').each(function () {
+    getCameraFrames().each(function () {
         var instance;
         if (this.config.proto == 'netcam' || this.config.proto == 'v4l2') {
             instance = '';
@@ -3637,38 +3667,53 @@ function runMediaDialog(cameraId, mediaType) {
     /* camera frames */
 
 function addCameraFrameUi(cameraConfig) {
-    if (cameraConfig == null) {
-        var cameraFrameDivPlaceHolder = $('<div class="camera-frame-place-holder"></div>');
-        getPageContainer().append(cameraFrameDivPlaceHolder);
-        
-        return;
-    }
-    
     var cameraId = cameraConfig.id;
     
     var cameraFrameDiv = $(
             '<div class="camera-frame">' +
-                '<div class="camera-top-bar">' +
-                    '<span class="camera-name"></span>' +
-                    '<div class="camera-buttons">' +
-                        '<div class="button camera-button mouse-effect full-screen" title="full-screen window"></div>' +
-                        '<div class="button camera-button mouse-effect media-pictures" title="pictures"></div>' +
-                        '<div class="button camera-button mouse-effect media-movies" title="movies"></div>' +
-                        '<div class="button camera-button mouse-effect configure" title="configure"></div>' +
-                    '</div>' +
-                '</div>' +
                 '<div class="camera-container">' +
                     '<div class="camera-placeholder"><img class="no-camera" src="' + staticPath + 'img/no-camera.svg"></div>' +
                     '<img class="camera">' +
                     '<div class="camera-progress"><img class="camera-progress"></div>' +
                 '</div>' +
+                '<div class="camera-overlay">' +
+                    '<div class="camera-overlay-top">' +
+                        '<div class="camera-name"><span class="camera-name"></span></div>' +
+                        '<div class="camera-top-buttons">' +
+                            '<div class="button camera-top-button mouse-effect full-screen" title="full-screen window"></div>' +
+                            '<div class="button camera-top-button mouse-effect media-pictures" title="pictures"></div>' +
+                            '<div class="button camera-top-button mouse-effect media-movies" title="movies"></div>' +
+                            '<div class="button camera-top-button mouse-effect configure" title="configure"></div>' +
+                        '</div>' +
+                    '</div>' +
+                    '<div class="camera-overlay-bottom">' +
+                        '<div class="camera-info"></div>' +
+                        '<div class="camera-action-buttons">' +
+                            '<div class="button camera-action-button mouse-effect lock" title="lock"></div>' +
+                            '<div class="button camera-action-button mouse-effect unlock" title="unlock"></div>' +
+                            '<div class="button camera-action-button mouse-effect light-on" title="turn on light"></div>' +
+                            '<div class="button camera-action-button mouse-effect light-off" title="turn off light"></div>' +
+                            '<div class="button camera-action-button mouse-effect alarm" title="alarm"></div>' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
             '</div>');
-    
+
     var nameSpan = cameraFrameDiv.find('span.camera-name');
-    var configureButton = cameraFrameDiv.find('div.camera-button.configure');
-    var picturesButton = cameraFrameDiv.find('div.camera-button.media-pictures');
-    var moviesButton = cameraFrameDiv.find('div.camera-button.media-movies');
-    var fullScreenButton = cameraFrameDiv.find('div.camera-button.full-screen');
+    
+    var configureButton = cameraFrameDiv.find('div.camera-top-button.configure');
+    var picturesButton = cameraFrameDiv.find('div.camera-top-button.media-pictures');
+    var moviesButton = cameraFrameDiv.find('div.camera-top-button.media-movies');
+    var fullScreenButton = cameraFrameDiv.find('div.camera-top-button.full-screen');
+    
+    var cameraInfoDiv = cameraFrameDiv.find('div.camera-info');
+    
+    var lockButton = cameraFrameDiv.find('div.camera-action-button.lock');
+    var unlockButton = cameraFrameDiv.find('div.camera-action-button.unlock');
+    var lightOnButton = cameraFrameDiv.find('div.camera-action-button.light-on');
+    var lightOffButton = cameraFrameDiv.find('div.camera-action-button.light-off');
+    var alarmButton = cameraFrameDiv.find('div.camera-action-button.alarm');
+    
     var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
     var cameraProgress = cameraFrameDiv.find('div.camera-progress');
     var cameraImg = cameraFrameDiv.find('img.camera');
@@ -3720,7 +3765,7 @@ function addCameraFrameUi(cameraConfig) {
     /* fade in */
     cameraFrameDiv.animate({'opacity': 1}, 100);
     
-    /* add the button handlers */
+    /* add the top button handlers */
     configureButton.click(function () {
         doConfigureCamera(cameraId);
     });
@@ -3744,6 +3789,16 @@ function addCameraFrameUi(cameraConfig) {
         };
     }(cameraId));
     
+    /* add the top button handlers */
+    //TODO 
+    
+    // TODO move these to the refresh function
+    cameraInfoDiv.append('<span class="camera-info-name">frame rate</span>');
+    cameraInfoDiv.append('<span class="camera-info-value">25 fps</span><br>');
+    cameraInfoDiv.append('<span class="camera-info-name">temperature</span>');
+    cameraInfoDiv.append('<span class="camera-info-value">38 deg</span><br>');
+    cameraInfoDiv.css('padding-top', '1em');
+    
     /* error and load handlers */
     cameraImg[0].onerror = function () {
         this.error = true;
diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index bbc9458..3232bf9 100644
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -77,8 +77,8 @@
     <div class="header">
         <div class="header-container">
             <div class="settings-top-bar closed">
-                <div class="button settings-button mouse-effect" title="settings"></div>
-                <div class="button logout-button mouse-effect" title="switch user"></div>
+                <div class="button settings-button mouse-effect" title="settings"></div
+                ><div class="button logout-button mouse-effect" title="switch user"></div>
                 <select class="styled" id="cameraSelect" {% if not add_remove_cameras %}style="display: none;"{% endif %}></select>
                 <div class="button rem-camera-button mouse-effect" id="remCameraButton" title="remove camera" {% if not add_remove_cameras %}style="display: none;"{% endif %}></div>
                 <div class="button apply-button" id="applyButton">Apply</div>
-- 
2.39.5