html {
height: 100%;
+ -webkit-tap-highlight-color: transparent;
}
body {
padding: 50px 0.2em 50px 0px;
}
+div.page-container.four-columns {
+ font-size: 12px;
+}
+
div.page-container.stretched {
margin-left: 40%;
+ font-size: 16px;
+}
+
+div.page-container.three-columns.stretched {
+ font-size: 12px;
+}
+
+div.page-container.four-columns.stretched {
+ font-size: 10px;
}
/* icons & icon buttons */
div.button.settings-button {
- margin: 1px;
+ border: 1px solid transparent;
vertical-align: middle;
background-image: url(../img/top-bar-buttons.svg);
background-size: cover;
}
div.button.logout-button {
- margin: 1px;
+ border: 1px solid transparent;
vertical-align: middle;
background-image: url(../img/top-bar-buttons.svg);
background-size: cover;
div.button.rem-camera-button {
display: none;
- margin: 1px;
+ border: 1px solid transparent;
vertical-align: middle;
background-image: url(../img/top-bar-buttons.svg);
background-size: cover;
opacity: 0;
vertical-align: top;
cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
div.camera-frame:HOVER {
div.camera-overlay-top,
div.camera-overlay-bottom {
position: absolute;
- background-color: rgba(49, 49, 49, 0.5);
+ background-color: rgba(49, 49, 49, 0.8);
left: 0px;
width: 100%;
}
div.camera-frame:HOVER div.camera-overlay-top,
div.camera-frame:HOVER div.camera-overlay-bottom {
- background-color: rgba(65, 65, 65, 0.5);
+ background-color: rgba(65, 65, 65, 0.8);
}
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);
+ background-color: rgba(113, 39, 39, 0.8);
}
div.camera-overlay-top {
div.camera-top-button {
background-image: url(../img/camera-top-buttons.svg);
background-size: cover;
- width: 2em;
- height: 2em;
+ width: 2.5em;
+ height: 2.5em;
vertical-align: top;
- margin-top: 0.25em;
-}
-
-div.camera-top-button:last-child {
- margin-right: 0.25em;
}
div.camera-top-button.full-screen {
div.camera-overlay-bottom {
bottom: 0px;
white-space: nowrap;
- height: 4.5em;
+ height: 5em;
+}
+
+div.camera-overlay-bottom.few-buttons {
+ height: 2.5em;
}
div.camera-info {
display: inline-block;
white-space: nowrap;
- width: 33%;
+ width: 50%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
+ text-align: left;
+ line-height: 5em;
}
-span.camera-info-name {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 50%;
- text-align: right;
+div.camera-overlay-bottom.few-buttons div.camera-info {
+ line-height: 2.5em;
}
-span.camera-info-value {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 48%;
- text-align: left;
+span.camera-info {
padding-left: 0.5em;
- font-weight: bold;
}
div.camera-action-buttons {
display: inline-block;
- white-space: nowrap;
- width: 66%;
+ width: 50%;
vertical-align: top;
text-align: right;
}
+div.camera-action-buttons-wrapper {
+ width: 10em;
+ display: inline-block;
+ white-space: normal;
+}
+
div.camera-action-button {
- background-image: url(../img/camera-top-buttons.svg);
+ background-image: url(../img/camera-action-buttons.svg);
background-size: cover;
- width: 4em;
- height: 4em;
+ width: 2.5em;
+ height: 2.5em;
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;
+ background-position: 0px 0px;
}
div.camera-action-button.unlock {
- background-position: 0px 0px;
+ background-position: -100% 0px;
}
div.camera-action-button.light-on {
}
div.camera-action-button.light-off {
- background-position: -200% 0px;
+ background-position: -300% 0px;
}
-div.camera-action-button.alarm {
- background-position: -300% 0px;
+div.camera-action-button.alarm-on {
+ background-position: -400% 0px;
+}
+
+div.camera-action-button.alarm-off {
+ background-position: -500% 0px;
+}
+
+div.camera-action-button.snapshot {
+ background-position: -600% 0px;
+}
+
+div.camera-action-button.record-start {
+ background-position: -700% 0px;
+}
+
+div.camera-action-button.record-stop {
+ background-position: -800% 0px;
}
div.camera-container {
body {
font-size: 16px;
}
+
+ div.page-container.stretched {
+ font-size: 10px;
+ }
+
+ div.page-container.four-columns.stretched {
+ font-size: 8px;
+ }
}
@media all and (max-width: 1000px) {
div.page-container.stretched {
margin-left: 0px;
+ font-size: 16px;
}
-
+
div.settings.open {
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
background-color: rgba(40, 40, 40, 0.9);
div.settings-top-bar.open {
min-width: 100%;
}
+
+ div.page-container.stretched {
+ font-size: 16px;
+ }
}
@media all and (max-width: 1200px) {
+ div.page-container {
+ font-size: 16px !important;
+ }
+
div.camera-frame {
width: 100% !important;
}
}
div.button.mouse-effect {
- opacity: 0.7;
+ opacity: 0.8;
transition: opacity 0.1s ease;
}
opacity: 0.7;
}
+div.icon.mouse-effect:ACTIVE {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
/* check box */
div.modal-close-button {
position: absolute;
- top: 0.2em;
- right: 0.3em;
- width: 1.5em;
- height: 1.5em;
+ top: 0px;
+ right: 0px;
+ margin-top: -5px;
+ margin-right: -5px;
+ width: 2.5em;
+ height: 2.5em;
background-image: url(../img/camera-top-buttons.svg);
background-size: cover;
background-position: -400% 0px;
--- /dev/null
+<?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="360"
+ height="40"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="camera-action-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="7.9999999"
+ inkscape:cx="56.963083"
+ inkscape:cy="9.783066"
+ 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="20"
+ 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,-1012.3622)">
+ <circle
+ r="13"
+ cy="1032.3623"
+ cx="20.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="1032.3623"
+ cx="60"
+ id="path3863"
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <circle
+ r="13"
+ cy="1032.3623"
+ cx="100"
+ id="circle4211"
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ d="m 100,1025.3622 a 5,5 0 0 0 -5,5 5,5 0 0 0 3,4.5801 l 0,4.4199 4,0 0,-4.4238 a 5,5 0 0 0 3,-4.5762 5,5 0 0 0 -5,-5 z"
+ id="path4219"
+ inkscape:connector-curvature="0" />
+ <circle
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="circle4149"
+ cx="340"
+ cy="1032.3623"
+ r="13" />
+ <path
+ style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 14,1030.3622 0,9 12,0 0,-9 -12,0 z m 6,1.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -0.5,1.1152 l 0,2.8848 -2,0 0,-2.8848 a 1.5,1.5 0 0 1 -0.5,-1.1152 1.5,1.5 0 0 1 1.5,-1.5 z"
+ id="path4150"
+ inkscape:connector-curvature="0" />
+ <path
+ style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ d="m 16.0001,1030.3622 c 0,-2.4852 1.790817,-4.4998 3.9999,-4.4998 2.209083,0 3.9999,2.0146 3.9999,4.4998"
+ id="path4170"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="csc" />
+ <path
+ id="path4173"
+ d="m 54,1030.3622 0,9 12,0 0,-9 -12,0 z m 6,1.5 a 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -0.5,1.1152 l 0,2.8848 -2,0 0,-2.8848 a 1.5,1.5 0 0 1 -0.5,-1.1152 1.5,1.5 0 0 1 1.5,-1.5 z"
+ style="fill:#3498db;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ inkscape:connector-curvature="0" />
+ <path
+ sodipodi:nodetypes="csc"
+ inkscape:connector-curvature="0"
+ id="path4175"
+ d="m 56.450322,1031.0227 c -0.431551,-2.4474 0.982228,-5.7424 3.15775,-6.126 2.175522,-0.3836 3.391928,0.4655 4.720515,2.7369"
+ style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+ <circle
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="circle4180"
+ cx="140"
+ cy="1032.3623"
+ r="13" />
+ <path
+ id="path4182"
+ d="m 140,1025.3622 a 5,5 0 0 0 -5,5 5,5 0 0 0 3,4.5801 l 0,4.4199 4,0 0,-4.4238 a 5,5 0 0 0 3,-4.5762 5,5 0 0 0 -5,-5 z"
+ style="opacity:1;fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ inkscape:connector-curvature="0" />
+ <path
+ sodipodi:nodetypes="cccc"
+ inkscape:connector-curvature="0"
+ id="path4218"
+ d="m 220,1025.3622 c 4,1 2,8 7,11 l -14,0 c 5,-3 3,-10 7,-11 z"
+ style="fill:none;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <circle
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="circle4220"
+ cx="220"
+ cy="1032.3623"
+ r="13" />
+ <path
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ d="m 222,1038.3622 c 0,1.1046 -0.89543,2 -2,2 -1.10457,0 -2,-0.8954 -2,-2"
+ id="path4222"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="csc" />
+ <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 180,1025.3622 c 4,1 2,8 7,11 l -14,0 c 5,-3 3,-10 7,-11 z"
+ id="path4225"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccc" />
+ <circle
+ r="13"
+ cy="1032.3623"
+ cx="180"
+ id="circle4227"
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="csc"
+ inkscape:connector-curvature="0"
+ id="path4229"
+ d="m 182,1038.3622 c 0,1.1046 -0.89543,2 -2,2 -1.10457,0 -2,-0.8954 -2,-2"
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+ <circle
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="circle4233"
+ cx="300"
+ cy="1032.3623"
+ r="13" />
+ <circle
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="path4235"
+ cx="300"
+ cy="1032.3622"
+ r="6" />
+ <rect
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ id="rect4239"
+ width="10"
+ height="10"
+ x="335"
+ y="1027.3622" />
+ <circle
+ r="13"
+ cy="1032.3623"
+ cx="260"
+ id="circle4264"
+ style="fill:none;stroke:#3498db;stroke-width:1.99999988;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ style="opacity:1;fill:#3498db;fill-opacity:1;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+ d="m 258,1025.3622 -1,2 -2,0 c -1.108,0 -2,0.892 -2,2 l 0,6 c 0,1.108 0.892,2 2,2 l 10,0 c 1.108,0 2,-0.892 2,-2 l 0,-6 c 0,-1.108 -0.892,-2 -2,-2 l -2,0 -1,-2 -4,0 z m 2,3 a 4,4 0 0 1 4,4 4,4 0 0 1 -4,4 4,4 0 0 1 -4,-4 4,4 0 0 1 4,-4 z"
+ id="path4266"
+ inkscape:connector-curvature="0" />
+ </g>
+</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"
+ width="200"
+ height="40"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
inkscape:pageopacity="0.74509804"
inkscape:pageshadow="2"
inkscape:zoom="1"
- inkscape:cx="150.49331"
- inkscape:cy="16.048896"
+ inkscape:cx="40.412118"
+ inkscape:cy="7.9982113"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
<inkscape:grid
type="xygrid"
id="grid4156"
- empspacing="8"
+ empspacing="20"
enabled="true"
visible="true"
snapvisiblegridlinesonly="false" />
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
- transform="translate(0,-1020.3622)">
+ transform="translate(0,-1012.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"
+ d="m 136,1026.3622 10,6 -10,6 z"
id="path3819"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
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" />
+ d="m 20.11329,1024.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.840329,1.0834 -3.923769,0 -1.0842,-1.0834 -1.0842,-2.8401 0,-3.9243 0.001,0 0.002,0 0.004,0 l 5.904569,-5.9051 c -0.37957,-1.6845 0.0811,-3.52 1.39202,-4.8306 z m -6.311269,13.6744 c 0.53754,0.5368 1.40825,0.5368 1.94579,0 0.536519,-0.5373 0.537029,-1.408 0,-1.9453 -0.53754,-0.5367 -1.40825,-0.5378 -1.94579,0 -0.53728,0.5373 -0.53703,1.4078 0,1.9459 z" />
<circle
r="13"
- cy="1036.3623"
- cx="16.000002"
+ cy="1032.3623"
+ cx="20.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"
+ cy="1032.3623"
+ cx="60"
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"
+ d="m 58,1026.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"
+ d="m 62,1026.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"
+ d="m 58,1038.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"
+ d="m 62,1038.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"
+ cy="1032.3623"
+ cx="140"
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"
+ cy="1032.3623"
+ cx="100"
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"
+ d="m 93,1026.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"
+ sodipodi:nodetypes="ccccccc"
inkscape:connector-curvature="0"
id="path4215"
- d="m 73,1041.3622 5,-5 3,3 2,-2 4,4"
+ d="m 93,1038.3622 0,-1 5,-5 3,3 2,-2 4,4 0,1"
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"
+ cx="103.5"
+ cy="1029.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"
+ cx="180"
+ cy="1032.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"
+ d="m 175,1027.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"
+ d="m 175,1037.3622 10,-10"
id="path4153"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
var signatureRegExp = new RegExp('[^a-zA-Z0-9/?_.=&{}\\[\\]":, _-]', 'g');
var initialConfigFetched = false; /* used to workaround browser extensions that trigger stupid change events */
var pageContainer = null;
+var overlayVisible = false;
/* Object utilities */
buttonsDiv.show();
if (windowWidth < 1000) {
- mediaListDiv.width(parseInt(windowWidth * 0.8));
- mediaListDiv.height(parseInt(windowHeight * 0.7));
- groupsDiv.width(parseInt(windowWidth * 0.8));
+ mediaListDiv.width(windowWidth - 30);
+ mediaListDiv.height(windowHeight - 140);
+ groupsDiv.width(windowWidth - 30);
groupsDiv.height('');
groupsDiv.addClass('small-screen');
}
'<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 class="button icon camera-top-button mouse-effect full-screen" title="full-screen window"></div>' +
+ '<div class="button icon camera-top-button mouse-effect media-pictures" title="pictures"></div>' +
+ '<div class="button icon camera-top-button mouse-effect media-movies" title="movies"></div>' +
+ '<div class="button icon camera-top-button mouse-effect configure" title="configure"></div>' +
'</div>' +
'</div>' +
'<div class="camera-overlay-bottom">' +
- '<div class="camera-info"></div>' +
+ '<div class="camera-info">' +
+ '<span class="camera-info fps"></span>' +
+ '</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 class="camera-action-buttons-wrapper">' +
+ '<div class="button icon camera-action-button mouse-effect lock" title="lock"></div>' +
+ '<div class="button icon camera-action-button mouse-effect light-on" title="turn light on"></div>' +
+ '<div class="button icon camera-action-button mouse-effect alarm-on" title="turn alarm on"></div>' +
+ '<div class="button icon camera-action-button mouse-effect snapshot" title="take a snapshot"></div>' +
+ '<div class="button icon camera-action-button mouse-effect unlock" title="unlock"></div>' +
+ '<div class="button icon camera-action-button mouse-effect light-off" title="turn light off"></div>' +
+ '<div class="button icon camera-action-button mouse-effect alarm-off" title="turn alarm off"></div>' +
+ '<div class="button icon camera-action-button mouse-effect record-start" title="record"></div>' +
+ '</div>' +
'</div>' +
'</div>' +
'</div>' +
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 alarmOnButton = cameraFrameDiv.find('div.camera-action-button.alarm-on');
+ var alarmOffButton = cameraFrameDiv.find('div.camera-action-button.alarm-off');
+ var snapshotButton = cameraFrameDiv.find('div.camera-action-button.snapshot');
+ var recordButton = cameraFrameDiv.find('div.camera-action-button.record');
+ var cameraOverlay = cameraFrameDiv.find('div.camera-overlay');
var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
var cameraProgress = cameraFrameDiv.find('div.camera-progress');
var cameraImg = cameraFrameDiv.find('img.camera');
progressImg.attr('src', staticPath + 'img/camera-progress.gif');
cameraProgress.click(function () {
- doFullScreenCamera(cameraId);
+ showCameraOverlay();
+ overlayVisible = true;
+ });
+
+ cameraOverlay.click(function () {
+ hideCameraOverlay();
+ overlayVisible = false;
+ });
+
+ cameraOverlay.find('div.camera-overlay-top, div.camera-overlay-bottom').click(function () {
+ return false;
});
cameraProgress.addClass('visible');
};
}(cameraId));
- /* add the top button handlers */
- //TODO
+ /* add the action button handlers */
+// if (cameraConfig.at-most-4-buttons) {
+// cameraOverlay.find('div.camera-overlay-bottom').addClass('few-buttons');
+// }
+ //TODO add handlers
- // 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');
+ // TODO move this to the refresh function
+ cameraInfoDiv.append('');
/* error and load handlers */
cameraImg[0].onerror = function () {
camera = cameras[i];
addCameraFrameUi(camera);
}
+
+ /* overlay is always hidden after creating the frames */
+ hideCameraOverlay();
if ($('#cameraSelect').find('option').length < 2 && isAdmin()) {
/* invite the user to add a camera */
titleBar.append(titleSpan);
if (options.closeButton) {
- var closeButton = $('<div class="button modal-close-button mouse-effect" title="close"></div>');
+ var closeButton = $('<div class="button icon modal-close-button mouse-effect" title="close"></div>');
closeButton.click(hideModalDialog);
titleBar.append(closeButton);
}
<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 icon settings-button mouse-effect" title="settings"></div
+ ><div class="button icon 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 icon 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>
{% if hostname %}<div class="hostname">{{hostname}}</div>{% endif %}
</div>
projects / motioneye-debian / commitdiff
