Add zoom settings

Helioviewer-Project · Feb 12, 2024 · ba7269c · ba7269c
1 parent ac2cc56
commit ba7269c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/index.php b/index.php
@@ -1397,6 +1397,20 @@ function attr($attr, $file) {
 						<option value='604800'>1 week</option>
 						<option value='2419200'>28 days</option>
 					</select>
+					<br/>
+
+					<label id="js-zoom-label" for='js-zoom-type' class="jq-tooltip" title="Continuous zoom will smoothly zoom in and out while step zoom will leap between preprogrammed scales.">Zoom Type</label>
+					<select id='js-zoom-type' title="test" name='js-zoom-type'>
+						<option value='continuous'>continuous</option>
+						<option value='step'>step</option>
+					</select>
+					<br/>
+
+					<label id='js-focus-label' for='js-zoom-focus' class="jq-tooltip" title="Focus on mouse will make zoom operations zoom in on the mouse pointer. Focus on center will make zoom operations zoom in to the center of the viewport." >Zoom Focus</label>
+					<select id='js-zoom-focus' name='js-zoom-focus'>
+						<option value='cursor'>Focus on mouse</option>
+						<option value='center'>Focus on center</option>
+					</select>
 				</div>
 				</fieldset>
 			</form>

diff --git a/resources/js/HelioviewerWebClient.js b/resources/js/HelioviewerWebClient.js
@@ -382,14 +382,35 @@ var HelioviewerWebClient = HelioviewerClient.extend(
      * initializes event-handlers
      */
     _setupSettingsUI: function () {
-        var form, dateLatest, datePrevious, autorefresh, autoplay, duration, self = this;
+        let self = this;
+
+        let form         = $("#helioviewer-settings");
+        let dateLatest   = $("#settings-date-latest");
+        let datePrevious = $("#settings-date-previous");
+        let autorefresh  = $("#settings-latest-image");
+        let autoplay     = $("#settings-movie-play-automatic");
+        let duration     = $("#settings-movie-duration");
+        let zoom_type    = $("#js-zoom-type");
+        let zoom_focus   = $("#js-zoom-focus");
+        let zoom_label = $('#js-zoom-label')
+        zoom_label.qtip({
+            show: {
+                delay: 0
+            },
+            content: {
+                text: zoom_label.attr('title')
+            },
+        });
 
-        form         = $("#helioviewer-settings");
-        dateLatest   = $("#settings-date-latest");
-        datePrevious = $("#settings-date-previous");
-        autorefresh  = $("#settings-latest-image");
-        autoplay     = $("#settings-movie-play-automatic");
-        duration     = $("#settings-movie-duration");
+        let focus_label = $('#js-focus-label');
+        focus_label.qtip({
+            show: {
+                delay: 0
+            },
+            content: {
+                text: focus_label.attr('title')
+            },
+        })
 
         // Starting date
         if (Helioviewer.userSettings.get("options.date") === "latest") {
@@ -417,6 +438,10 @@ var HelioviewerWebClient = HelioviewerClient.extend(
         // Default movie duration
         duration.val(Helioviewer.userSettings.get("options.movies.duration"));
 
+        // Zoom config
+        zoom_type.val(Helioviewer.userSettings.get('zoom.type'));
+        zoom_focus.val(Helioviewer.userSettings.get('zoom.focus'));
+
         // Event-handlers
         dateLatest.change(function (e) {
             Helioviewer.userSettings.set("options.date", "latest");
@@ -439,7 +464,12 @@ var HelioviewerWebClient = HelioviewerClient.extend(
         duration.change(function () {
             Helioviewer.userSettings.set("options.movies.duration", parseInt(this.value, 10));
         });
-
+        zoom_focus.change(function () {
+            Helioviewer.userSettings.set("zoom.focus", this.value);
+        });
+        zoom_type.change(function () {
+            Helioviewer.userSettings.set("zoom.type", this.value);
+        });
     },
 
     /**

diff --git a/resources/js/Utility/SettingsLoader.js b/resources/js/Utility/SettingsLoader.js
@@ -205,6 +205,10 @@ var SettingsLoader = (
                 "celestialBodiesLabelsVisible" : {},
                 "celestialBodiesTrajectoriesVisible" : {}
             },
+            zoom: {
+                type: 'continuous',
+                focus: 'center'
+            },
             version: serverSettings.version
         };
     }