From f1a43c9f9240fdb9951ab6c726eab2330eff6780 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Sun, 22 Jan 2017 22:31:29 +0100 Subject: [PATCH] implementibg basic google maps function --- backend/middlewares/ThumbnailGeneratorMWs.ts | 38 +++++++++++++++---- backend/routes/GalleryRouter.ts | 10 +++++ backend/server.ts | 2 + common/config/Config.ts | 4 +- frontend/app/app.module.ts | 9 ++++- frontend/app/gallery/gallery.component.css | 3 ++ frontend/app/gallery/gallery.component.html | 4 ++ .../app/gallery/map/map.gallery.component.css | 4 ++ .../gallery/map/map.gallery.component.html | 9 +++++ .../app/gallery/map/map.gallery.component.ts | 29 ++++++++++++++ frontend/systemjs.config.js | 5 +++ package.json | 1 + 12 files changed, 108 insertions(+), 10 deletions(-) create mode 100644 frontend/app/gallery/map/map.gallery.component.css create mode 100644 frontend/app/gallery/map/map.gallery.component.html create mode 100644 frontend/app/gallery/map/map.gallery.component.ts diff --git a/backend/middlewares/ThumbnailGeneratorMWs.ts b/backend/middlewares/ThumbnailGeneratorMWs.ts index c11d381c..3ee7db1c 100644 --- a/backend/middlewares/ThumbnailGeneratorMWs.ts +++ b/backend/middlewares/ThumbnailGeneratorMWs.ts @@ -18,7 +18,7 @@ const Pool = require('threads').Pool; const pool = new Pool(Config.Client.concurrentThumbnailGenerations); pool.run( - (input: {imagePath: string, size: number, thPath: string}, done) => { + (input: {imagePath: string, size: number, makeSquare: boolean, thPath: string}, done) => { //generate thumbnail let Jimp = require("jimp"); @@ -32,11 +32,16 @@ pool.run( * * @type {number} */ - let ratio = image.bitmap.height / image.bitmap.width; - let newWidth = Math.sqrt((input.size * input.size) / ratio); - - image.resize(newWidth, Jimp.AUTO, Jimp.RESIZE_BEZIER); + if (input.makeSquare == false) { + let ratio = image.bitmap.height / image.bitmap.width; + let newWidth = Math.sqrt((input.size * input.size) / ratio); + image.resize(newWidth, Jimp.AUTO, Jimp.RESIZE_BEZIER); + } else { + let ratio = image.bitmap.height / image.bitmap.width; + image.resize(input.size / Math.min(ratio, 1), Jimp.AUTO, Jimp.RESIZE_BEZIER); + image.crop(0, 0, input.size, input.size); + } image.quality(60); // set JPEG quality image.write(input.thPath, () => { // save return done(); @@ -113,6 +118,25 @@ export class ThumbnailGeneratorMWs { size = Config.Client.thumbnailSizes[0]; } + ThumbnailGeneratorMWs.generateImage(imagePath, size, false, req, res, next); + + + } + + public static generateIcon(req: Request, res: Response, next: NextFunction) { + if (!req.resultPipe) + return next(); + + //load parameters + let imagePath = req.resultPipe; + let size: number = 30; + ThumbnailGeneratorMWs.generateImage(imagePath, size, true, req, res, next); + + + } + + private static generateImage(imagePath, size, makeSquare, req: Request, res: Response, next: NextFunction) { + //generate thumbnail path let thPath = path.join(ProjectPath.ThumbnailFolder, ThumbnailGeneratorMWs.generateThumbnailName(imagePath, size)); @@ -130,14 +154,12 @@ export class ThumbnailGeneratorMWs { } //run on other thread - pool.send({imagePath: imagePath, size: size, thPath: thPath}) + pool.send({imagePath: imagePath, size: size, thPath: thPath, makeSquare: makeSquare}) .on('done', (out) => { return next(out); }).on('error', (job, error) => { return next(new Error(ErrorCodes.GENERAL_ERROR, error)); }); - - } private static generateThumbnailName(imagePath: string, size: number): string { diff --git a/backend/routes/GalleryRouter.ts b/backend/routes/GalleryRouter.ts index 00133eed..9c286689 100644 --- a/backend/routes/GalleryRouter.ts +++ b/backend/routes/GalleryRouter.ts @@ -6,6 +6,7 @@ import {ThumbnailGeneratorMWs} from "../middlewares/ThumbnailGeneratorMWs"; export class GalleryRouter { constructor(private app: any) { + this.addGetImageIcon(); this.addGetImageThumbnail(); this.addGetImage(); this.addDirectoryList(); @@ -43,6 +44,15 @@ export class GalleryRouter { ); }; + private addGetImageIcon() { + this.app.get("/api/gallery/content/:imagePath(*\.(jpg|bmp|png|gif|jpeg))/icon", + AuthenticationMWs.authenticate, + GalleryMWs.loadImage, + ThumbnailGeneratorMWs.generateIcon, + RenderingMWs.renderFile + ); + }; + private addSearch() { this.app.get("/api/search/:text", AuthenticationMWs.authenticate, diff --git a/backend/server.ts b/backend/server.ts index b1cb5d92..e38b1878 100644 --- a/backend/server.ts +++ b/backend/server.ts @@ -21,6 +21,8 @@ export class Server { private server: any; constructor() { + console.log("using config"); + console.log(Config); this.debug = _debug("PiGallery2:server"); this.app = _express(); diff --git a/common/config/Config.ts b/common/config/Config.ts index f0f24278..320c4274 100644 --- a/common/config/Config.ts +++ b/common/config/Config.ts @@ -34,6 +34,7 @@ interface ClientConfig { enableOnScrollRendering:boolean; enableOnScrollThumbnailPrioritising:boolean; authenticationRequired:boolean; + googleApiKey: string; } export class ConfigClass { @@ -50,7 +51,8 @@ export class ConfigClass { enableCache: false, enableOnScrollRendering: true, enableOnScrollThumbnailPrioritising: true, - authenticationRequired: true + authenticationRequired: true, + googleApiKey: "" }; public setDatabaseType(type:DatabaseType) { diff --git a/frontend/app/app.module.ts b/frontend/app/app.module.ts index 6849b136..95146a6b 100644 --- a/frontend/app/app.module.ts +++ b/frontend/app/app.module.ts @@ -2,6 +2,7 @@ import {NgModule} from "@angular/core"; import {BrowserModule} from "@angular/platform-browser"; import {FormsModule} from "@angular/forms"; import {HttpModule} from "@angular/http"; +import {AgmCoreModule} from "angular2-google-maps/core"; import {AppComponent} from "./app.component"; import {appRoutes} from "./app.routing"; import {UserService} from "./model/network/user.service"; @@ -25,13 +26,18 @@ import {LoginComponent} from "./login/login.component"; import {AdminComponent} from "./admin/admin.component"; import {GalleryComponent} from "./gallery/gallery.component"; import {StringifyRole} from "./pipes/StringifyRolePipe"; +import {Config} from "./config/Config"; +import {GalleryMapComponent} from "./gallery/map/map.gallery.component"; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, - appRoutes + appRoutes, + AgmCoreModule.forRoot({ + apiKey: Config.Client.googleApiKey + }) ], declarations: [AppComponent, LoginComponent, @@ -44,6 +50,7 @@ import {StringifyRole} from "./pipes/StringifyRolePipe"; GalleryGridComponent, GalleryDirectoryComponent, GalleryLightboxComponent, + GalleryMapComponent, FrameComponent, GallerySearchComponent, GalleryNavigatorComponent, diff --git a/frontend/app/gallery/gallery.component.css b/frontend/app/gallery/gallery.component.css index e69de29b..701cea6b 100644 --- a/frontend/app/gallery/gallery.component.css +++ b/frontend/app/gallery/gallery.component.css @@ -0,0 +1,3 @@ +.sebm-google-map-container { + height: 300px; +} \ No newline at end of file diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html index bccf5913..74fb7fa6 100644 --- a/frontend/app/gallery/gallery.component.html +++ b/frontend/app/gallery/gallery.component.html @@ -7,6 +7,7 @@
+ @@ -25,6 +26,9 @@ {{_galleryService.content.searchResult.searchText}} + + +
diff --git a/frontend/app/gallery/map/map.gallery.component.css b/frontend/app/gallery/map/map.gallery.component.css new file mode 100644 index 00000000..f22105e5 --- /dev/null +++ b/frontend/app/gallery/map/map.gallery.component.css @@ -0,0 +1,4 @@ +.sebm-google-map-container { + height: 150px; + width: 200px; +} \ No newline at end of file diff --git a/frontend/app/gallery/map/map.gallery.component.html b/frontend/app/gallery/map/map.gallery.component.html new file mode 100644 index 00000000..b5215aca --- /dev/null +++ b/frontend/app/gallery/map/map.gallery.component.html @@ -0,0 +1,9 @@ + + + + \ No newline at end of file diff --git a/frontend/app/gallery/map/map.gallery.component.ts b/frontend/app/gallery/map/map.gallery.component.ts new file mode 100644 index 00000000..ec504ce7 --- /dev/null +++ b/frontend/app/gallery/map/map.gallery.component.ts @@ -0,0 +1,29 @@ +import {Component, OnChanges, Input} from "@angular/core"; +import {PhotoDTO} from "../../../../common/entities/PhotoDTO"; +import {Utils} from "../../../../common/Utils"; +@Component({ + selector: 'gallery-map', + templateUrl: 'app/gallery/map/map.gallery.component.html', + styleUrls: ['app/gallery/map/map.gallery.component.css'] +}) +export class GalleryMapComponent implements OnChanges { + + @Input() photos: Array; + + mapPhotos: Array<{latitude, longitude, iconUrl}> = []; + + + //TODO: fix zooming + ngOnChanges() { + this.mapPhotos = this.photos.filter(p => p.metadata.positionData.GPSData).map(p => { + return { + latitude: p.metadata.positionData.GPSData.latitude, + longitude: p.metadata.positionData.GPSData.longitude, + iconUrl: Utils.concatUrls("/api/gallery/content/", p.directory.path, p.directory.name, p.name, "icon") + }; + }); + + + } +} + diff --git a/frontend/systemjs.config.js b/frontend/systemjs.config.js index 4f29460e..c0d85c6d 100644 --- a/frontend/systemjs.config.js +++ b/frontend/systemjs.config.js @@ -25,6 +25,7 @@ // other libraries 'rxjs': 'npm:rxjs', + 'angular2-google-maps': 'npm:angular2-google-maps', 'ng2-cookies': 'npm:ng2-cookies/ng2-cookies' }, // packages tells the System loader how to load when no filename and/or no extension @@ -35,6 +36,10 @@ }, rxjs: { defaultExtension: 'js' + }, + "angular2-google-maps/core": { + "defaultExtension": "js", + "main": "index.js" } } }); diff --git a/package.json b/package.json index e1b80dec..db05ad18 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@angular/platform-browser-dynamic": "~2.4.1", "@angular/platform-server": "~2.4.1", "@angular/router": "~3.4.1", + "angular2-google-maps": "^0.17.0", "body-parser": "^1.15.2", "core-js": "^2.4.1", "debug": "^2.6.0",