RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: show clusters of photos on the map

pull/376/head
Raymond Huang 2023-02-08 11:59:04 +08:00
parent 93b4b0274e
commit 7d01849f8e
8 changed files with 258 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
appinfo/routes.php
View File

@ -77,6 +77,8 @@ return [
['name' => 'Download#file', 'url' => '/api/download/{handle}', 'verb' => 'GET'],
['name' => 'Download#one', 'url' => '/api/stream/{fileid}', 'verb' => 'GET'],
['name' => 'Location#clusters', 'url' => '/api/locations/clusters', 'verb' => 'GET'],
// Config API
['name' => 'Other#setUserConfig', 'url' => '/api/config/{key}', 'verb' => 'PUT'],

83
lib/Controller/ApiBase.php
View File

@ -329,6 +329,89 @@ class ApiBase extends Controller
return \OCA\Memories\Util::facerecognitionIsEnabled($this->config, $this->getUID());
}
/**
* Get transformations depending on the request.
*
* @param bool $aggregateOnly Only apply transformations for aggregation (days call)
*/
protected function getTransformations(bool $aggregateOnly)
{
$transforms = [];
// Add extra information, basename and mimetype
if (!$aggregateOnly && ($fields = $this->request->getParam('fields'))) {
$fields = explode(',', $fields);
$transforms[] = [$this->timelineQuery, 'transformExtraFields', $fields];
}
// Filter for one album
if ($this->albumsIsEnabled()) {
if ($albumId = $this->request->getParam('album')) {
$transforms[] = [$this->timelineQuery, 'transformAlbumFilter', $albumId];
}
}
// Other transforms not allowed for public shares
if (null === $this->userSession->getUser()) {
return $transforms;
}
// Filter only favorites
if ($this->request->getParam('fav')) {
$transforms[] = [$this->timelineQuery, 'transformFavoriteFilter'];
}
// Filter only videos
if ($this->request->getParam('vid')) {
$transforms[] = [$this->timelineQuery, 'transformVideoFilter'];
}
// Filter only for one face on Recognize
if (($recognize = $this->request->getParam('recognize')) && $this->recognizeIsEnabled()) {
$transforms[] = [$this->timelineQuery, 'transformPeopleRecognitionFilter', $recognize];
$faceRect = $this->request->getParam('facerect');
if ($faceRect && !$aggregateOnly) {
$transforms[] = [$this->timelineQuery, 'transformPeopleRecognizeRect', $recognize];
}
}
// Filter only for one face on Face Recognition
if (($face = $this->request->getParam('facerecognition')) && $this->facerecognitionIsEnabled()) {
$currentModel = (int) $this->config->getAppValue('facerecognition', 'model', -1);
$transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionFilter', $currentModel, $face];
$faceRect = $this->request->getParam('facerect');
if ($faceRect && !$aggregateOnly) {
$transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionRect', $face];
}
}
// Filter only for one tag
if ($this->tagsIsEnabled()) {
if ($tagName = $this->request->getParam('tag')) {
$transforms[] = [$this->timelineQuery, 'transformTagFilter', $tagName];
}
}
// Limit number of responses for day query
$limit = $this->request->getParam('limit');
if ($limit) {
$transforms[] = [$this->timelineQuery, 'transformLimitDay', (int) $limit];
}
// Filter geological bounds
$minLat = $this->request->getParam('minLat');
$maxLat = $this->request->getParam('maxLat');
$minLng = $this->request->getParam('minLng');
$maxLng = $this->request->getParam('maxLng');
if ($minLat && $maxLat && $minLng && $maxLng) {
$transforms[] = [$this->timelineQuery, 'transformBoundFilter', $minLat, $maxLat, $minLng, $maxLng];
}
return $transforms;
}
/**
* Helper to get one file or null from a fiolder.
*/

83
lib/Controller/DaysController.php
View File

@ -172,89 +172,6 @@ class DaysController extends ApiBase
return $this->day($id);
}
/**
* Get transformations depending on the request.
*
* @param bool $aggregateOnly Only apply transformations for aggregation (days call)
*/
private function getTransformations(bool $aggregateOnly)
{
$transforms = [];
// Add extra information, basename and mimetype
if (!$aggregateOnly && ($fields = $this->request->getParam('fields'))) {
$fields = explode(',', $fields);
$transforms[] = [$this->timelineQuery, 'transformExtraFields', $fields];
}
// Filter for one album
if ($this->albumsIsEnabled()) {
if ($albumId = $this->request->getParam('album')) {
$transforms[] = [$this->timelineQuery, 'transformAlbumFilter', $albumId];
}
}
// Other transforms not allowed for public shares
if (null === $this->userSession->getUser()) {
return $transforms;
}
// Filter only favorites
if ($this->request->getParam('fav')) {
$transforms[] = [$this->timelineQuery, 'transformFavoriteFilter'];
}
// Filter only videos
if ($this->request->getParam('vid')) {
$transforms[] = [$this->timelineQuery, 'transformVideoFilter'];
}
// Filter only for one face on Recognize
if (($recognize = $this->request->getParam('recognize')) && $this->recognizeIsEnabled()) {
$transforms[] = [$this->timelineQuery, 'transformPeopleRecognitionFilter', $recognize];
$faceRect = $this->request->getParam('facerect');
if ($faceRect && !$aggregateOnly) {
$transforms[] = [$this->timelineQuery, 'transformPeopleRecognizeRect', $recognize];
}
}
// Filter only for one face on Face Recognition
if (($face = $this->request->getParam('facerecognition')) && $this->facerecognitionIsEnabled()) {
$currentModel = (int) $this->config->getAppValue('facerecognition', 'model', -1);
$transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionFilter', $currentModel, $face];
$faceRect = $this->request->getParam('facerect');
if ($faceRect && !$aggregateOnly) {
$transforms[] = [$this->timelineQuery, 'transformPeopleFaceRecognitionRect', $face];
}
}
// Filter only for one tag
if ($this->tagsIsEnabled()) {
if ($tagName = $this->request->getParam('tag')) {
$transforms[] = [$this->timelineQuery, 'transformTagFilter', $tagName];
}
}
// Limit number of responses for day query
$limit = $this->request->getParam('limit');
if ($limit) {
$transforms[] = [$this->timelineQuery, 'transformLimitDay', (int) $limit];
}
// Filter geological bounds
$minLat = $this->request->getParam('minLat');
$maxLat = $this->request->getParam('maxLat');
$minLng = $this->request->getParam('minLng');
$maxLng = $this->request->getParam('maxLng');
if ($minLat && $maxLat && $minLng && $maxLng) {
$transforms[] = [$this->timelineQuery, 'transformBoundFilter', $minLat, $maxLat, $minLng, $maxLng];
}
return $transforms;
}
/**
* Preload a few "day" at the start of "days" response.
*

91
lib/Controller/LocationController.php 100644
View File

@ -0,0 +1,91 @@
<?php
declare(strict_types=1);
/**
* @copyright Copyright (c) 2022 Varun Patil <radialapps@gmail.com>
* @author Varun Patil <radialapps@gmail.com>
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
namespace OCA\Memories\Controller;
use OCP\AppFramework\Http;
use OCP\AppFramework\Http\JSONResponse;
class LocationController extends ApiBase
{
/**
* @NoAdminRequired
*
* @PublicPage
*
* @NoCSRFRequired
*/
public function clusters(): JSONResponse
{
// Get the folder to show
try {
$uid = $this->getUID();
} catch (\Exception $e) {
return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_PRECONDITION_FAILED);
}
// Get the folder to show
$root = null;
try {
$root = $this->getRequestRoot();
} catch (\Exception $e) {
return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_NOT_FOUND);
}
// Just check bound parameters but not use them; they are used in transformation
$minLat = $this->request->getParam('minLat');
$maxLat = $this->request->getParam('maxLat');
$minLng = $this->request->getParam('minLng');
$maxLng = $this->request->getParam('maxLng');
if (!$minLat || !$maxLat || !$minLng || !$maxLng) {
return new JSONResponse(['message' => 'Parameters missing'], Http::STATUS_PRECONDITION_FAILED);
}
// Zoom level is used to determine the size of boxes
$zoomLevel = $this->request->getParam('zoom');
if (!$zoomLevel || !is_numeric($zoomLevel)) {
return new JSONResponse(['message' => 'Invalid zoom level'], Http::STATUS_PRECONDITION_FAILED);
}
// A tweakable parameter to determine the number of boxes in the map
$clusterDensity = 3;
$boxSize = 180.0 / (2 ** $zoomLevel * $clusterDensity);
try {
$clusters = $this->timelineQuery->getMapClusters(
$boxSize,
$root,
$uid,
$this->isRecursive(),
$this->isArchive(),
$this->getTransformations(true),
);
return new JSONResponse($clusters);
} catch (\Exception $e) {
return new JSONResponse(['message' => $e->getMessage()], Http::STATUS_INTERNAL_SERVER_ERROR);
}
}
}

42
lib/Db/TimelineQueryDays.php
View File

@ -195,6 +195,48 @@ trait TimelineQueryDays
return $this->processDay($rows, $uid, $root);
}
public function getMapClusters(
float $boxSize,
TimelineRoot &$root,
string $uid,
bool $recursive,
bool $archive,
array $queryTransforms = []
): array {
$query = $this->connection->getQueryBuilder();
// Get the average location of each cluster
$avgLat = $query->createFunction('AVG(latitude) AS avgLat');
$avgLng = $query->createFunction('AVG(longitude) AS avgLng');
$count = $query->createFunction('COUNT(*) AS count');
$query->select($avgLat, $avgLng, $count)
->from('memories', 'm')
;
// JOIN with filecache for existing files
$query = $this->joinFilecache($query, $root, $recursive, $archive);
// Group by cluster
$groupFunction = $query->createFunction('latitude DIV '.$boxSize.', longitude DIV '.$boxSize);
$query->groupBy($groupFunction);
// Apply all transformations (including map bounds)
$this->applyAllTransforms($queryTransforms, $query, $uid);
$cursor = $this->executeQueryWithCTEs($query);
$res = $cursor->fetchAll();
$cursor->closeCursor();
$clusters = [];
foreach ($res as $cluster) {
$clusters[] =
['center' => [(float) $cluster['avgLat'], (float) $cluster['avgLng']], 'count' => (float) $cluster['count']]
;
}
return $clusters;
}
/**
* Process the days response.
*

36
src/components/top-matter/LocationTopMatter.vue
View File

@ -4,11 +4,19 @@
style="height: 100%; width: 100%; margin-right: 3.5em; z-index: 0"
:zoom="zoom"
ref="map"
@moveend="getBoundary"
@zoomend="getBoundary"
@moveend="updateMapAndTimeline"
@zoomend="updateMapAndTimeline"
>
<l-tile-layer :url="url" :attribution="attribution" />
<v-marker-cluster> </v-marker-cluster>
<!-- <v-marker-cluster ref="markerCluster"> -->
<l-marker
v-for="cluster in clusters"
:key="cluster.center.toString()"
:lat-lng="cluster.center"
>
<l-popup :content="cluster.count.toString()" />
</l-marker>
<!-- </v-marker-cluster> -->
</l-map>
</div>
</template>
@ -18,9 +26,11 @@ import { defineComponent, PropType } from "vue";
import { LMap, LTileLayer, LMarker, LPopup } from "vue2-leaflet";
import Vue2LeafletMarkerCluster from "vue2-leaflet-markercluster";
import "leaflet/dist/leaflet.css";
import { IRow, IPhoto } from "../../types";
import { IPhoto, MarkerClusters } from "../../types";
import { Icon } from "leaflet";
import axios from "axios";
import { API } from "../../services/API";
type D = Icon.Default & {
_getIconUrl?: string;
@ -50,6 +60,7 @@ export default defineComponent({
attribution:
'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
zoom: 1,
clusters: [] as MarkerClusters[],
}),
watch: {
@ -60,6 +71,7 @@ export default defineComponent({
mounted() {
this.createMatter();
this.updateMapAndTimeline();
},
computed: {
@ -74,15 +86,29 @@ export default defineComponent({
this.name = <string>this.$route.params.name || "";
},
getBoundary() {
async updateMapAndTimeline() {
let map = this.$refs.map as LMap;
//let markerCluster = this.$refs.markerCluster as Vue2LeafletMarkerCluster;
let boundary = map.mapObject.getBounds();
let zoomLevel = map.mapObject.getZoom().toString();
this.$parent.$emit("updateBoundary", {
minLat: boundary.getSouth(),
maxLat: boundary.getNorth(),
minLng: boundary.getWest(),
maxLng: boundary.getEast(),
});
const query = new URLSearchParams();
query.set("minLat", boundary.getSouth().toString());
query.set("maxLat", boundary.getNorth().toString());
query.set("minLng", boundary.getWest().toString());
query.set("maxLng", boundary.getEast().toString());
query.set("zoom", zoomLevel);
const url = API.Q(API.CLUSTERS(), query);
const res = await axios.get(url);
this.clusters = res.data;
},
},
});

4
src/services/API.ts
View File

@ -115,4 +115,8 @@ export class API {
static CONFIG(setting: string) {
return gen(`${BASE}/config/{setting}`, { setting });
}
static CLUSTERS() {
return tok(gen(`${BASE}/locations/clusters`));
}
}

5
src/types.ts
View File

@ -243,3 +243,8 @@ export type MapBoundary = {
minLng: number;
maxLng: number;
}
export type MarkerClusters = {
center: [number, number];
count: number;
}