Skip to content

Commit

Permalink
Enable smooth zoom desktop (#520)
Browse files Browse the repository at this point in the history 
This enables scaling images continuously on helioviewer, rather than having discrete zoom levels.

* Remove references to old zoom controls

* Implement mousewheel smooth zoom

* Update mouse scale for smooth zoom

* Remove stale comment

* Keep markers from moving during zoom

* Keep constant UI scale during zoom

* Animate zoom in/out buttons

* Fix computing viewport tile range

* Fix zooming on focal points

* Update movie to use proper viewport coords

* Flip mousewheel direction

* Add constant-size class, update trajectory UI scale.

* Restore Config.js

* Update trajectory lines z-index
  • Loading branch information
@dgarciabriseno
dgarciabriseno authored Jan 26, 2024
1 parent b757ea0 commit 974af63
Show file tree
Hide file tree
Showing 20 changed files with 231 additions and 234 deletions.
1 change: 1 addition & 0 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ function attr($attr, $file) {
}
}
?>
<style id="js-styles"></style>
</head>
<body <?php echo ($outputType ? 'class="helioviewer-view-type-'.$outputType.'"' : '')?>>

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions resources/build/build.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<echo>concatenating JavaScript...</echo>
<concat destfile="resources/compressed/helioviewer.js" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true" eol="lf">
<filelist dir="resources/js" files="UI/TileLayerData.js, Utility/Config.js, Utility/HelperFunctions.js, Tiling/Layer/Layer.js, Tiling/Layer/TileLoader.js, Tiling/Layer/TileLayer.js, Tiling/Layer/HelioviewerTileLayer.js, Utility/KeyboardManager.js, Tiling/Manager/LayerManager.js, Tiling/Manager/TileLayerManager.js, Tiling/Manager/HelioviewerTileLayerManager.js, Image/JP2Image.js, Viewport/Helper/MouseCoordinates.js, Viewport/Helper/HelioviewerMouseCoordinates.js, Viewport/Helper/SandboxHelper.js, Viewport/Helper/ViewportMovementHelper.js, Viewport/Helper/TouchMover.js, Viewport/Helper/PinchDetector.js, Viewport/Helper/HelioviewerZoomer.js, Viewport/HelioviewerViewport.js, HelioviewerClient.js, UI/ZoomControls.js, UI/ImageScale.js, UI/Timeline.js, UI/TimelineEvents.js, Utility/InputValidator.js, Utility/SettingsLoader.js, Utility/UserSettings.js, Tiling/Manager/LayerManager.js, Events/SelectedEventsCache.js, Events/EventManager.js, Events/EventType.js, Events/EventTree.js, Events/EventFeatureRecognitionMethod.js, Events/EventLayerManager.js, Events/EventLayerManager.js, Events/HelioviewerEventLayer.js, Events/HelioviewerEventLayerManager.js, UI/TreeSelect.js, UI/ImageSelectTool.js, Media/MediaManager.js, Media/MovieManager.js, Media/ScreenshotManager.js, Media/ScreenshotManagerUI.js, UI/TileLayerAccordion.js, UI/TimeSelector.js, UI/EventLayerAccordion.js, UI/MessageConsole.js, UI/TimeControls.js, Utility/FullscreenControl.js, Utility/Tutorial.js, HelioviewerWebClient.js, UI/UserVideoGallery.js, UI/ImagePresets.js, UI/Glossary.js, UI/jquery.ui.dynaccordion.js, Viewport/CelestialBodiesSatellites.js Patches/broken_screenshots_493.js"/>
<filelist dir="resources/js" files="UI/TileLayerData.js, Utility/Config.js, Utility/HelperFunctions.js, Tiling/Layer/Layer.js, Tiling/Layer/TileLoader.js, Tiling/Layer/TileLayer.js, Tiling/Layer/HelioviewerTileLayer.js, Utility/KeyboardManager.js, Tiling/Manager/LayerManager.js, Tiling/Manager/TileLayerManager.js, Tiling/Manager/HelioviewerTileLayerManager.js, Image/JP2Image.js, Viewport/Helper/MouseCoordinates.js, Viewport/Helper/HelioviewerMouseCoordinates.js, Viewport/Helper/SandboxHelper.js, Viewport/Helper/ViewportMovementHelper.js, Viewport/Helper/TouchMover.js, Viewport/Helper/PinchDetector.js, Viewport/Helper/ScrollZoom.js, Viewport/Helper/HelioviewerZoomer.js, Viewport/HelioviewerViewport.js, HelioviewerClient.js, UI/ImageScale.js, UI/Timeline.js, UI/TimelineEvents.js, Utility/InputValidator.js, Utility/SettingsLoader.js, Utility/UserSettings.js, Tiling/Manager/LayerManager.js, Events/SelectedEventsCache.js, Events/EventManager.js, Events/EventType.js, Events/EventTree.js, Events/EventFeatureRecognitionMethod.js, Events/EventLayerManager.js, Events/EventLayerManager.js, Events/HelioviewerEventLayer.js, Events/HelioviewerEventLayerManager.js, UI/TreeSelect.js, UI/ImageSelectTool.js, Media/MediaManager.js, Media/MovieManager.js, Media/ScreenshotManager.js, Media/ScreenshotManagerUI.js, UI/TileLayerAccordion.js, UI/TimeSelector.js, UI/EventLayerAccordion.js, UI/MessageConsole.js, UI/TimeControls.js, Utility/FullscreenControl.js, Utility/Tutorial.js, HelioviewerWebClient.js, UI/UserVideoGallery.js, UI/ImagePresets.js, UI/Glossary.js, UI/jquery.ui.dynaccordion.js, Viewport/CelestialBodiesSatellites.js Patches/broken_screenshots_493.js"/>
</concat>

<echo>concatenating CSS...</echo>
Expand Down Expand Up @@ -90,7 +90,7 @@

<echo>concatenating JavaScript...</echo>
<concat destfile="resources/compressed/helioviewer-embed.js" encoding="UTF-8" outputencoding="UTF-8" fixlastline="true">
<filelist dir="resources/js" files="UI/TileLayerData.js, Utility/Config.js, Utility/HelperFunctions.js, Tiling/Layer/Layer.js, Tiling/Layer/TileLoader.js, Tiling/Layer/TileLayer.js, Tiling/Layer/HelioviewerTileLayer.js, Utility/KeyboardManager.js, Tiling/Manager/LayerManager.js, Tiling/Manager/TileLayerManager.js, Tiling/Manager/HelioviewerTileLayerManager.js, Image/JP2Image.js, Viewport/Helper/MouseCoordinates.js, Viewport/Helper/HelioviewerMouseCoordinates.js, Viewport/Helper/SandboxHelper.js, Viewport/Helper/ViewportMovementHelper.js, Viewport/HelioviewerViewport.js, HelioviewerClient.js, UI/ZoomControls.js, UI/ImageScale.js, UI/ImagePresets.js, UI/TimeSelector.js, Utility/InputValidator.js, Utility/SettingsLoader.js, Utility/UserSettings.js, Utility/Tutorial.js, Tiling/Manager/LayerManager.js, Events/EventManager.js, Events/EventType.js, Events/EventTree.js, Events/EventFeatureRecognitionMethod.js, Events/EventLayerManager.js, Events/EventLayerManager.js, Events/HelioviewerEventLayer.js, Events/HelioviewerEventLayerManager.js, HelioviewerEmbeddedClient.js"/>
<filelist dir="resources/js" files="UI/TileLayerData.js, Utility/Config.js, Utility/HelperFunctions.js, Tiling/Layer/Layer.js, Tiling/Layer/TileLoader.js, Tiling/Layer/TileLayer.js, Tiling/Layer/HelioviewerTileLayer.js, Utility/KeyboardManager.js, Tiling/Manager/LayerManager.js, Tiling/Manager/TileLayerManager.js, Tiling/Manager/HelioviewerTileLayerManager.js, Image/JP2Image.js, Viewport/Helper/MouseCoordinates.js, Viewport/Helper/HelioviewerMouseCoordinates.js, Viewport/Helper/SandboxHelper.js, Viewport/Helper/ViewportMovementHelper.js, Viewport/HelioviewerViewport.js, HelioviewerClient.js, UI/ImageScale.js, UI/ImagePresets.js, UI/TimeSelector.js, Utility/InputValidator.js, Utility/SettingsLoader.js, Utility/UserSettings.js, Utility/Tutorial.js, Tiling/Manager/LayerManager.js, Events/EventManager.js, Events/EventType.js, Events/EventTree.js, Events/EventFeatureRecognitionMethod.js, Events/EventLayerManager.js, Events/EventLayerManager.js, Events/HelioviewerEventLayer.js, Events/HelioviewerEventLayerManager.js, HelioviewerEmbeddedClient.js"/>
</concat>

<echo>concatenating CSS...</echo>
Expand Down
6 changes: 5 additions & 1 deletion resources/css/celestial-bodies.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
z-index: 100;
text-shadow: 0px 0px 2px #000, 0px 0px 4px #000, 0px 0px 6px #000;
white-space: nowrap;
transform-origin: top left;
}

.celestial-bodies-label:hover {
Expand All @@ -15,7 +16,8 @@
}

.hover-date-container {
transform : translateY(-90px) translateX(-45px) rotate(-45deg);
transform : translateY(-20px) rotate(-45deg);
transform-origin : bottom left;
position : absolute;
width : 210px;
height : 20px;
Expand All @@ -33,6 +35,7 @@
left : 0px;
bottom : 0px;
z-index : 200;
transform-origin: bottom left;
}

.observer-jstree {
Expand Down Expand Up @@ -125,6 +128,7 @@
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
transform-origin: top left;
}
.body-popup h1 {
display: inline-block;
Expand Down
2 changes: 2 additions & 0 deletions resources/css/events.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
height: 39px;
position: absolute;
width: 23px;
transform-origin: bottom;
}
.event-label, .event-label-hover {
color: white;
Expand Down Expand Up @@ -69,6 +70,7 @@
text-overflow: ellipsis;
white-space: nowrap;
width: 340px;
transform-origin: left top;
}
.event-popup h1 {
display: inline-block;
Expand Down
4 changes: 2 additions & 2 deletions resources/js/Events/EventMarker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ var EventMarker = Class.extend(
// Create event marker DOM node
this.eventMarkerDomNode = $('<div/>');
this.eventMarkerDomNode.attr({
'class' : "event-marker"
'class' : "event-marker constant-size"
});

var id = this.id;
Expand Down Expand Up @@ -873,7 +873,7 @@ var EventMarker = Class.extend(
this.eventPopupDomNode = $('<div/>');
this.eventPopupDomNode.hide();
this.eventPopupDomNode.attr({
'class' : "event-popup"
'class' : "event-popup constant-size"
});

this.eventPopupDomNode.html(content);
Expand Down
6 changes: 4 additions & 2 deletions resources/js/HelioviewerClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
/*jslint browser: true, white: true, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: true,
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
/*global document, window, $, Class, TooltipHelper, HelioviewerViewport,
KeyboardManager, SettingsLoader, ZoomControls, assignTouchHandlers
KeyboardManager, SettingsLoader, assignTouchHandlers
*/
"use strict";

Expand All @@ -27,6 +27,7 @@ var HelioviewerClient = Class.extend(
this._checkBrowser(); // Determines browser support

this.serverSettings = serverSettings;
this.zoomLevels = zoomLevels;

Helioviewer.api = serverSettings['backEnd'];
Helioviewer.dataType = "json";
Expand Down Expand Up @@ -98,7 +99,8 @@ var HelioviewerClient = Class.extend(
marginTop : marginTop,
marginBottom : marginBottom,
warnMouseCoords: Helioviewer.userSettings.get(
'notifications.coordinates')
'notifications.coordinates'),
zoomLevels : this.zoomLevels
});
},

Expand Down
6 changes: 1 addition & 5 deletions resources/js/HelioviewerEmbeddedClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxlen: 120, sub: true */
/*global document, window, $, HelioviewerClient, TooltipHelper,
HelioviewerViewport, KeyboardManager, Helioviewer,
SettingsLoader, ZoomControls, assignTouchHandlers */
SettingsLoader, assignTouchHandlers */
"use strict";
var HelioviewerEmbeddedClient = HelioviewerClient.extend(
/** @lends HelioviewerWebClient.prototype */
Expand Down Expand Up @@ -43,10 +43,6 @@ var HelioviewerEmbeddedClient = HelioviewerClient.extend(

// Get available data sources and initialize viewport
this._initViewport("body", date, 0, 0);

// User Interface components
this.zoomControls = new ZoomControls('#zoomControls', imageScale, zoomLevels,
this.serverSettings.minImageScale, this.serverSettings.maxImageScale);
},

/**
Expand Down
8 changes: 1 addition & 7 deletions resources/js/HelioviewerWebClient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
/*global document, window, $, HelioviewerClient, ImageSelectTool, MovieBuilder,
TooltipHelper, HelioviewerViewport, ScreenshotBuilder, ScreenshotHistory,
MovieHistory, UserVideoGallery, MessageConsole, Helioviewer,
KeyboardManager, SettingsLoader, TimeControls,
ZoomControls, ScreenshotManagerUI, MovieManagerUI, assignTouchHandlers,
KeyboardManager, SettingsLoader, TimeControls, ScreenshotManagerUI, MovieManagerUI, assignTouchHandlers,
TileLayerAccordion, VisualGlossary, _gaq */
"use strict";
var HelioviewerWebClient = HelioviewerClient.extend(
Expand Down Expand Up @@ -111,11 +110,6 @@ var HelioviewerWebClient = HelioviewerClient.extend(
this.messageConsole = new MessageConsole();
this.keyboard = new KeyboardManager();

// User Interface components
this.zoomControls = new ZoomControls('#zoomControls', imageScale,
zoomLevels, this.serverSettings.minImageScale,
this.serverSettings.maxImageScale);

this.earthScale = new ImageScale();

this.displayBlogFeed(7, true);
Expand Down
2 changes: 1 addition & 1 deletion resources/js/Media/MovieManagerUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ var MovieManagerUI = MediaManagerUI.extend(
*/
_loadMovieQueueParameters: function (roi) {
if (typeof roi === "undefined") {
roi = helioviewer.getZoomedRegionOfInterest();
roi = helioviewer.getViewportRegionOfInterest();
}

var layers = helioviewer.getVisibleLayers(roi);
Expand Down
2 changes: 1 addition & 1 deletion resources/js/Media/ScreenshotManagerUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ var ScreenshotManagerUI = MediaManagerUI.extend(
celestialBodiesTrajectories, screenshot, self = this;

if (typeof roi === "undefined") {
roi = helioviewer.getZoomedRegionOfInterest();
roi = helioviewer.getViewportRegionOfInterest();
}

imageScale = helioviewer.getZoomedImageScale();
Expand Down
11 changes: 6 additions & 5 deletions resources/js/Tiling/Manager/TileLayerManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,8 @@ var TileLayerManager = LayerManager.extend(
var old, ts, self, vp;
old = this.tileVisibilityRange;
// Expand to fit tile increment
ts = this.tileSize;
let zoom = (Helioviewer.userSettings.get('mobileZoomScale') || 1);
ts = this.tileSize * zoom;
vp = {
top: vpCoords.top - ts - (vpCoords.top % ts),
left: vpCoords.left - ts - (vpCoords.left % ts),
Expand All @@ -141,10 +142,10 @@ var TileLayerManager = LayerManager.extend(

// Indices to display (one subtracted from ends to account for "0th" tiles).
this.tileVisibilityRange = {
xStart : vp.left / ts,
yStart : vp.top / ts,
xEnd : (vp.right / ts) - 1,
yEnd : (vp.bottom / ts) - 1
xStart : Math.round(vp.left / ts),
yStart : Math.round(vp.top / ts),
xEnd : Math.round((vp.right / ts) - 1),
yEnd : Math.round((vp.bottom / ts) - 1)
};

self = this;
Expand Down
149 changes: 0 additions & 149 deletions resources/js/UI/ZoomControls.js
View file

This file was deleted.

Loading

0 comments on commit 974af63

Please sign in to comment.