Skip to content

Commit

Permalink
Add configurable zoom settings (#532)
Browse files Browse the repository at this point in the history 
* Add zoom settings

* Adhere zoom to settings
  • Loading branch information
@dgarciabriseno
dgarciabriseno authored Feb 12, 2024
1 parent ac2cc56 commit bee80d6
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 11 deletions.
14 changes: 14 additions & 0 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
46 changes: 38 additions & 8 deletions resources/js/HelioviewerWebClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down Expand Up @@ -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");
Expand All @@ -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);
});
},

/**
Expand Down
4 changes: 4 additions & 0 deletions resources/js/Utility/SettingsLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,10 @@ var SettingsLoader = (
"celestialBodiesLabelsVisible" : {},
"celestialBodiesTrajectoriesVisible" : {}
},
zoom: {
type: 'continuous',
focus: 'center'
},
version: serverSettings.version
};
}
Expand Down
59 changes: 56 additions & 3 deletions resources/js/Viewport/Helper/HelioviewerZoomer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ const MAX_THRESHOLD = 1.5;
this._maxImageScale = zoomLevels[0];
this._minImageScale = zoomLevels[zoomLevels.length - 1];
this._slider = new ZoomControls(this._maxImageScale, zoomLevels.length - 1, this._targetCenter.bind(this), this.jumpToZoomLevel.bind(this));
this._step = {
lock: false,
lastVal: 0
};
Helioviewer.userSettings.set('mobileZoomScale', 1);

// Make sure the sun is centered when the user requests centering the viewport
Expand Down Expand Up @@ -253,14 +257,26 @@ const MAX_THRESHOLD = 1.5;
* Fired when 2 fingers touch the screen
*/
pinchStart(center) {
this.setAnchorForCenter(center);
if (Helioviewer.userSettings.get('zoom.focus') == 'center') {
// If setting is set to focus on the center of the screen, always do that.
this._targetCenter();
} else {
// Focus on the target that was given by the pinch/cursor.
this.setAnchorForCenter(center);
}
this._last_size = 0;
this._step.lastVal = 0;
}

/**
* Fires as a user pinches/stretches
*/
pinchUpdate(size) {
// Don't do anything if the user has step zoom enabled.
if (Helioviewer.userSettings.get('zoom.type') == 'step') {
this._stepZoom(size)
return;
}
let change = (size - this._last_size) / 200;
this.setScale(this._scale + change);
this._last_size = size;
Expand All @@ -269,6 +285,29 @@ const MAX_THRESHOLD = 1.5;
pinchEnd() {
}

/**
* Handle step zooming if user has enabled it.
*/
_stepZoom(size) {
// Debounce the step zoom. A lot of step events can come in at once.
if (this._step.lock) {
return;
}

if (size > this._step.lastVal) {
this._zoomHelioviewer(2, true);
} else if (size < this._step.lastVal) {
this._zoomHelioviewer(0.5, false);
} else {
// zoom didn't change, don't enable the scroll lock, just do nothing.
// this happens on some high resolution touchpads (mac)
return;
}
this._step.lastVal = size;
this._step.lock = true;
setTimeout(() => {this._step.lock = false;}, 500);
}

onUpdateViewport() {
// Set anchor to center screen
let center = {
Expand Down Expand Up @@ -332,14 +371,28 @@ const MAX_THRESHOLD = 1.5;
* Executed when the zoom in button is clicked.
*/
_smoothZoomIn() {
this._animateZoom(2, 0.2);
this._targetCenter();
// Non step zoom will use zoom animation.
if (Helioviewer.userSettings.get('zoom.type') != 'step') {
this._animateZoom(2, 0.2);
} else {
// Step zoom just jumps forward
this._zoomHelioviewer(2, true);
}
}

/**
* Executed when the zoom out button is clicked.
*/
_smoothZoomOut() {
this._animateZoom(0.5, 0.2);
this._targetCenter();
// Non step zoom will use zoom animation.
if (Helioviewer.userSettings.get('zoom.type') != 'step') {
this._animateZoom(0.5, 0.2);
} else {
// step zoom will just jump out.
this._zoomHelioviewer(0.5, false);
}
}

/**
Expand Down

0 comments on commit bee80d6

Please sign in to comment.