From: Calin Crisan <ccrisan@gmail.com>
Date: Mon, 30 Nov 2015 18:48:32 +0000 (+0200)
Subject: initial work on better camera frame look and feel
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=1b04a3f90df2d1f0d3c8a6258b59613840072227;p=motioneye-debian
initial work on better camera frame look and feel
---
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>