xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

implementing photo preview on map

Browse Source
This commit is contained in:
Patrik Braun 2017-07-20 20:07:19 +02:00
parent 9504e5a491
commit 0da83953f8
4 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
View File

@ -48,6 +48,7 @@ export class InfoPanelLightboxComponent {
getTime() { getTime() {
const date = new Date(this.photo.metadata.creationDate); const date = new Date(this.photo.metadata.creationDate);
//TODO: pad with zeros
return date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); return date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
} }

5
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.html
View File

@ -18,6 +18,11 @@
[latitude]="photo.latitude" [latitude]="photo.latitude"
[longitude]="photo.longitude" [longitude]="photo.longitude"
[iconUrl]="photo.iconUrl"> [iconUrl]="photo.iconUrl">
<agm-info-window>
<img [style.width.px]="photo.preview.width"
[style.height.px]="photo.preview.height"
[src]="photo.preview.url">
</agm-info-window>
</agm-marker> </agm-marker>
</agm-map> </agm-map>
</div> </div>

43
frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -5,6 +5,7 @@ import {FullScreenService} from "../../fullscreen.service";
import {AgmMap} from "@agm/core"; import {AgmMap} from "@agm/core";
import {IconThumbnail, ThumbnailManagerService} from "../../thumnailManager.service"; import {IconThumbnail, ThumbnailManagerService} from "../../thumnailManager.service";
import {IconPhoto} from "../../IconPhoto"; import {IconPhoto} from "../../IconPhoto";
import {Photo} from "../../Photo";
@Component({ @Component({
selector: 'gallery-map-lightbox', selector: 'gallery-map-lightbox',
@ -19,7 +20,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
public mapDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0}; public mapDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
public visible = false; public visible = false;
public opacity = 1.0; public opacity = 1.0;
mapPhotos: Array<{ latitude: number, longitude: number, iconUrl?: string, thumbnail: IconThumbnail }> = []; mapPhotos: MapPhoto[] = [];
mapCenter = {latitude: 0, longitude: 0}; mapCenter = {latitude: 0, longitude: 0};
@ViewChild("root") elementRef: ElementRef; @ViewChild("root") elementRef: ElementRef;
@ -94,18 +95,30 @@ export class GalleryMapLightboxComponent implements OnChanges {
this.mapPhotos = this.photos.filter(p => { this.mapPhotos = this.photos.filter(p => {
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData; return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData;
}).map(p => { }).map(p => {
let th = this.thumbnailService.getIcon(new IconPhoto(p)); let width = 500;
let obj: { latitude: number, longitude: number, iconUrl?: string, thumbnail: IconThumbnail } = { let height = 500;
if (p.metadata.size.width > p.metadata.size.height) {
height = width * (p.metadata.size.height / p.metadata.size.width);
} else {
width = height * (p.metadata.size.width / p.metadata.size.height);
}
const iconTh = this.thumbnailService.getIcon(new IconPhoto(p));
const obj: MapPhoto = {
latitude: p.metadata.positionData.GPSData.latitude, latitude: p.metadata.positionData.GPSData.latitude,
longitude: p.metadata.positionData.GPSData.longitude, longitude: p.metadata.positionData.GPSData.longitude,
thumbnail: th iconThumbnail: iconTh,
preview: {
width: width,
height: height,
url: (new Photo(p, width, height)).getThumbnailPath()
}
}; };
if (th.Available == true) { if (iconTh.Available == true) {
obj.iconUrl = th.Src; obj.iconUrl = iconTh.Src;
} else { } else {
th.OnLoad = () => { iconTh.OnLoad = () => {
obj.iconUrl = th.Src; obj.iconUrl = iconTh.Src;
}; };
} }
return obj; return obj;
@ -117,7 +130,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
} }
hideImages() { hideImages() {
this.mapPhotos.forEach(mp => mp.thumbnail.destroy()); this.mapPhotos.forEach((mp) => mp.iconThumbnail.destroy());
this.mapPhotos = []; this.mapPhotos = [];
} }
@ -155,3 +168,15 @@ export class GalleryMapLightboxComponent implements OnChanges {
} }
export interface MapPhoto {
latitude: number;
longitude: number;
iconUrl?: string;
iconThumbnail: IconThumbnail;
preview: {
width: number;
height: number;
url: string;
}
}

1
frontend/app/model/network/network.service.ts
View File

@ -21,6 +21,7 @@ export class NetworkService {
let headers = new Headers({'Content-Type': 'application/json'}); let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers}); let options = new RequestOptions({headers: headers});
//TODO handle long loading time
this.slimLoadingBarService.visible = true; this.slimLoadingBarService.visible = true;
this.slimLoadingBarService.start(() => { this.slimLoadingBarService.start(() => {
this.slimLoadingBarService.visible = false; this.slimLoadingBarService.visible = false;