added support for zoom in/out action buttons

diff --git a/motioneye/config.py b/motioneye/config.py
index ba590f0c75195fac2a70bf6af50e4f7feff7829c..b6b6e4e0740fd7efc3e09926629631ff4eeeb233 100644 (file)
--- a/motioneye/config.py
+++ b/motioneye/config.py
@@ -40,7 +40,7 @@ import v4l2ctl
 
 _CAMERA_CONFIG_FILE_NAME = 'thread-%(id)s.conf'
 _MAIN_CONFIG_FILE_NAME = 'motion.conf'
-_ACTIONS = ['lock', 'unlock', 'light_on', 'light_off', 'alarm_on', 'alarm_off', 'up', 'right', 'down', 'left']
+_ACTIONS = ['lock', 'unlock', 'light_on', 'light_off', 'alarm_on', 'alarm_off', 'up', 'right', 'down', 'left', 'zoom_in', 'zoom_out']
 
 _main_config_cache = None
 _camera_config_cache = {}

diff --git a/motioneye/static/css/main.css b/motioneye/static/css/main.css
index fd81a9cb0dec58fa63e1415b7dbb539824cb6509..356207ad2cbeccfa4470eaf7aa2da746302c3877 100644 (file)
--- a/motioneye/static/css/main.css
+++ b/motioneye/static/css/main.css
@@ -1096,6 +1096,14 @@ div.camera-action-button.left {
     background-position: -1200% 0px;
 }
 
+div.camera-action-button.zoom-in {
+    background-position: -1300% 0px;
+}
+
+div.camera-action-button.zoom-out {
+    background-position: -1400% 0px;
+}
+
 div.camera-container {
     position: relative;
     padding: 0px;

diff --git a/motioneye/static/img/camera-action-buttons.svg b/motioneye/static/img/camera-action-buttons.svg
index c3bd52d01e3f5e9085e4ab033317ab95c83c3515..5eeeb93c6615ff3060bb56a287a02a568cf448bd 100644 (file)
--- a/motioneye/static/img/camera-action-buttons.svg
+++ b/motioneye/static/img/camera-action-buttons.svg
@@ -28,8 +28,8 @@
      inkscape:pageopacity="0.74509804"
      inkscape:pageshadow="2"
      inkscape:zoom="1"
-     inkscape:cx="449.26208"
-     inkscape:cy="22.330471"
+     inkscape:cx="562.2256"
+     inkscape:cy="12.256296"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -69,7 +69,7 @@
         <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>
@@ -254,5 +254,73 @@
        id="path4174"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cccccccc" />
+    <circle
+       r="13"
+       cy="1032.3623"
+       cx="540"
+       id="circle4165"
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <ellipse
+       style="fill:none;stroke:#3498db;stroke-width:0.99999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4169"
+       cx="537.5"
+       cy="1029.8622"
+       rx="5"
+       ry="5.0000157" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 541,1033.3622 2,2"
+       id="path4171"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4176"
+       d="m 543,1035.3622 3,3"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4178"
+       d="m 537.5,1026.3622 0,7"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 541,1029.8622 -7,0"
+       id="path4180"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <circle
+       style="fill:none;stroke:#3498db;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle4182"
+       cx="580"
+       cy="1032.3623"
+       r="13" />
+    <ellipse
+       ry="5.0000157"
+       rx="5"
+       cy="1029.8622"
+       cx="577.5"
+       id="ellipse4184"
+       style="fill:none;stroke:#3498db;stroke-width:0.99999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4186"
+       d="m 581,1033.3622 2,2"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 583,1035.3622 3,3"
+       id="path4188"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path4192"
+       d="m 581,1029.8622 -7,0"
+       style="fill:none;fill-rule:evenodd;stroke:#3498db;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
   </g>
 </svg>

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index d0d4b65c353053ca3b5633beb00029fb0c57404a..26a2ec786c02b4d9a882d2636dfdbf4078713beb 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -3974,6 +3974,8 @@ function addCameraFrameUi(cameraConfig) {
                                 '<div class="button icon camera-action-button mouse-effect down" title="down"></div>' +
                                 '<div class="button icon camera-action-button mouse-effect left" title="left"></div>' +
                                 '<div class="button icon camera-action-button mouse-effect right" title="right"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect zoom-in" title="zoom in"></div>' +
+                                '<div class="button icon camera-action-button mouse-effect zoom-out" title="zoom out"></div>' +
                             '</div>' +
                         '</div>' +
                     '</div>' +
@@ -4002,6 +4004,8 @@ function addCameraFrameUi(cameraConfig) {
     var rightButton = cameraFrameDiv.find('div.camera-action-button.right');
     var downButton = cameraFrameDiv.find('div.camera-action-button.down');
     var leftButton = cameraFrameDiv.find('div.camera-action-button.left');
+    var zoomInButton = cameraFrameDiv.find('div.camera-action-button.zoom-in');
+    var zoomOutButton = cameraFrameDiv.find('div.camera-action-button.zoom-out');
     
     var cameraOverlay = cameraFrameDiv.find('div.camera-overlay');
     var cameraPlaceholder = cameraFrameDiv.find('div.camera-placeholder');
@@ -4109,6 +4113,8 @@ function addCameraFrameUi(cameraConfig) {
         'right': rightButton,
         'down': downButton,
         'left': leftButton,
+        'zoom_in': zoomInButton,
+        'zoom_out': zoomOutButton
     };
     
     cameraConfig.actions.forEach(function (action) {
@@ -4144,7 +4150,8 @@ function addCameraFrameUi(cameraConfig) {
         cameraOverlay.find('div.camera-overlay-bottom').addClass('few-buttons');
     }
     else {
-        cameraOverlay.find('div.camera-action-buttons-wrapper').css('width', Math.ceil(cameraConfig.actions.length / 2) * 2.5 + 'em');
+        //cameraOverlay.find('div.camera-action-buttons-wrapper').css('width', Math.ceil(cameraConfig.actions.length / 2) * 2.5 + 'em');
+        cameraOverlay.find('div.camera-action-buttons-wrapper').css('width', 4 * 2.5 + 'em');
     }
 
     var FPS_LEN = 4;