1
0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-25 02:04:15 +02:00

implementibg basic google maps function

This commit is contained in:
Braun Patrik 2017-01-22 22:31:29 +01:00
parent ba4cad7bef
commit f1a43c9f92
12 changed files with 108 additions and 10 deletions

View File

@ -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 {

View File

@ -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,

View File

@ -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();

View File

@ -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) {

View File

@ -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,

View File

@ -0,0 +1,3 @@
.sebm-google-map-container {
height: 300px;
}

View File

@ -7,6 +7,7 @@
<div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
<gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar>
<gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map>
<gallery-directory *ngFor="let directory of _galleryService.content.directory.directories"
[directory]="directory"></gallery-directory>
<gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
@ -25,6 +26,9 @@
<strong>{{_galleryService.content.searchResult.searchText}}</strong>
</li>
</ol>
<gallery-map [photos]="_galleryService.content.searchResult.photos"></gallery-map>
<div *ngFor="let directory of _galleryService.content.searchResult.directories">
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
</div>

View File

@ -0,0 +1,4 @@
.sebm-google-map-container {
height: 150px;
width: 200px;
}

View File

@ -0,0 +1,9 @@
<sebm-google-map [zoom]="0">
<sebm-google-map-marker
*ngFor="let photo of mapPhotos"
[latitude]="photo.latitude"
[longitude]="photo.longitude"
[iconUrl]="photo.iconUrl">
</sebm-google-map-marker>
</sebm-google-map>

View File

@ -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<PhotoDTO>;
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")
};
});
}
}

View File

@ -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"
}
}
});

View File

@ -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",