added support for custom resolutions

diff --git a/motioneye/static/js/main.js b/motioneye/static/js/main.js
index b978106dd3a955eb2817ef4c859d0901025473f1..49467b4d31664722a94e725c7b5b63bd674ae916 100644 (file)
--- a/motioneye/static/js/main.js
+++ b/motioneye/static/js/main.js
@@ -578,6 +578,18 @@ function initUI() {
         
         return true;
     }, '');
+    makeCustomValidator($('#customWidthEntry, #customHeightEntry'), function (value) {
+        if (!value) {
+            return 'this field is required';
+        }
+
+        value = Number(value);
+        if (value % 8) {
+            return "value must be a multiple of 8";
+        }
+        
+        return true;
+    }, '');
     makeCustomValidator($('#rootDirectoryEntry'), function (value) {
         if ($('#storageDeviceSelect').val() == 'custom-path' && String(value).trim() == '/') {
             return 'files cannot be created directly on the root of your system';
@@ -1371,9 +1383,9 @@ function updateConfigUI() {
         $('tr.advanced-setting, div.advanced-setting, table.advanced-setting').each(markHideAdvanced);
     }
     
-    /* hide resolution select if no resolution is selected (none matches) */
+    /* set resolution to custom if no existing value matches */
     if ($('#resolutionSelect')[0].selectedIndex == -1) {
-        $('#resolutionSelect').parents('tr:eq(0)').each(markHideLogic);
+        $('#resolutionSelect').val('custom');
     }
 
     /* video device switch */
@@ -1904,7 +1916,10 @@ function cameraUi2Dict() {
         dict['working_schedule'] = false;
     }
 
-    if ($('#resolutionSelect')[0].selectedIndex != -1) {
+    if ($('#resolutionSelect').val() == 'custom') {
+        dict.resolution = $('#customWidthEntry').val() + 'x' + $('#customHeightEntry').val();
+    }
+    else {
         dict.resolution = $('#resolutionSelect').val();
     }
 
@@ -2033,8 +2048,13 @@ function dict2CameraUi(dict) {
         dict['available_resolutions'].forEach(function (resolution) {
             $('#resolutionSelect').append('<option value="' + resolution + '">' + resolution + '</option>');
         });
+        $('#resolutionSelect').append('<option value="custom">Custom</option>');
     }
     $('#resolutionSelect').val(dict['resolution']); markHideIfNull('available_resolutions', 'resolutionSelect');
+    if (dict['resolution']) {
+        $('#customWidthEntry').val(dict['resolution'].split('x')[0]);
+        $('#customHeightEntry').val(dict['resolution'].split('x')[1]);
+    }
     
     $('#rotationSelect').val(dict['rotation']); markHideIfNull('rotation', 'rotationSelect');
     $('#framerateSlider').val(dict['framerate']); markHideIfNull('framerate', 'framerateSlider');

diff --git a/motioneye/templates/main.html b/motioneye/templates/main.html
index 76f6685a65088618527d461a070c638124ae8b4d..eda3e230ce59ebd58b3e3aa8ea69db9c96905797 100644 (file)
--- a/motioneye/templates/main.html
+++ b/motioneye/templates/main.html
@@ -292,6 +292,16 @@
                         </td>
                         <td><span class="help-mark" title="the video resolution (larger values produce better quality but require more CPU power, larger storage space and bandwidth)">?</span></td>
                     </tr>
+                    <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
+                        <td class="settings-item-label"><span class="settings-item-label">Width</span></td>
+                        <td class="settings-item-value"><input type="text" class="styled number device camera-config" id="customWidthEntry"></td>
+                        <td><span class="help-mark" title="enter a custom resolution width">?</span></td>
+                    </tr>
+                    <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
+                        <td class="settings-item-label"><span class="settings-item-label">Height</span></td>
+                        <td class="settings-item-value"><input type="text" class="styled number device camera-config" id="customHeightEntry"></td>
+                        <td><span class="help-mark" title="enter a custom resolution height">?</span></td>
+                    </tr>
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                         <td class="settings-item-value">