splatone 0.0.1

package/lib/util.js

@@ -0,0 +1,180 @@
+// tri-grid-utils.mjs
+// Utilities for triangular lattices on a triangle polygon (GeoJSON) using Turf.js.
+// Exports:
+//  - triangleLatticeByDivisions(triangle, divisions, { interiorOnly })
+//  - divisionsForClosestCount(N, { interiorOnly })
+//  - incircleDiameter(triangle)
+//
+// npm i @turf/turf @turf/helpers @turf/invariant
+import { featureCollection, point } from '@turf/helpers';
+import { area, distance } from '@turf/turf';
+import { getCoords } from '@turf/invariant';
+
+/**
+ * @typedef {import('geojson').Position} Position
+ * @typedef {import('geojson').Feature<import('geojson').Polygon>} PolygonFeature
+ * @typedef {import('geojson').FeatureCollection<import('geojson').Point>} PointFC
+ */
+
+/** 内部で使う: 三角形ポリゴンから3頂点を取り出す（[lng,lat]×3） */
+function extractTriangleVertices(triangle /** @type {PolygonFeature} */) {
+    let ring = getCoords(triangle)[0];
+    // 閉ループ (v0 == v_last) の場合は末尾を落とす
+    if (
+        ring.length === 4 &&
+        ring[0][0] === ring[3][0] &&
+        ring[0][1] === ring[3][1]
+    ) {
+        ring = ring.slice(0, 3);
+    }
+    if (!ring || ring.length !== 3) {
+        throw new Error('triangle polygon must have exactly 3 vertices');
+    }
+    return /** @type {[Position, Position, Position]} */ (ring);
+}
+
+/**
+ * 三角形ポリゴン内に「辺 m 等分」の正三角格子（頂点格子）を生成
+ * @param {PolygonFeature} triangle - 三角形（外輪の最初=最後が同一点でもOK）
+ * @param {number} divisions - 辺の等分数 m (1以上の整数)
+ * @param {{ interiorOnly?: boolean }} [opts] - true=境界を除外（内部点のみ）
+ * @returns {PointFC}
+ */
+export function triangleLatticeByDivisions(triangle, divisions, opts = {}) {
+    const { interiorOnly = false } = opts;
+    const m = Math.max(1, Math.floor(divisions));
+
+    const [A, B, C] = extractTriangleVertices(triangle);
+
+    const pts = [];
+    if (!interiorOnly) {
+        // 境界含む: i+j+k=m, i,j,k >= 0
+        for (let i = 0; i <= m; i++) {
+            for (let j = 0; j <= m - i; j++) {
+                const k = m - i - j;
+                const a = i / m,
+                    b = j / m,
+                    c = k / m;
+                const lng = a * A[0] + b * B[0] + c * C[0];
+                const lat = a * A[1] + b * B[1] + c * C[1];
+                pts.push(point([lng, lat], { i, j, k }));
+            }
+        }
+    } else {
+        // 内部のみ: i,j,k >= 1 となる点（m>=2 のときだけ存在）
+        if (m < 2) return featureCollection([]);
+        for (let i = 1; i <= m - 1; i++) {
+            for (let j = 1; j <= m - i - 1; j++) {
+                const k = m - i - j;
+                if (k < 1) continue;
+                const a = i / m,
+                    b = j / m,
+                    c = k / m;
+                const lng = a * A[0] + b * B[0] + c * C[0];
+                const lat = a * A[1] + b * B[1] + c * C[1];
+                pts.push(point([lng, lat], { i, j, k }));
+            }
+        }
+    }
+    return featureCollection(pts);
+}
+
+/**
+ * 目標の点数 N に最も近い「辺の等分数 m」を高速に求める
+ * - 境界を含む点数: T_all(m) = (m+1)(m+2)/2
+ * - 内部点のみ  : T_in (m) = (m-1)m/2
+ * @param {number} N - 目標点数 (>0)
+ * @param {{ interiorOnly?: boolean }} [opts] - true=内部点のみ基準
+ * @returns {{ m:number, count:number, diff:number }}
+ */
+export function divisionsForClosestCount(N, opts = {}) {
+    const { interiorOnly = false } = opts;
+    if (!Number.isFinite(N) || N <= 0) {
+        return { m: 0, count: 0, diff: Math.max(0, Math.floor(N || 0)) };
+    }
+
+    // 連続解（正の根）
+    // all: (m+1)(m+2)/2 ≈ N → m ≈ (-3 + sqrt(1+8N))/2
+    // in : (m-1)m/2    ≈ N → m ≈ (1 + sqrt(1+8N))/2
+    const mCont = interiorOnly
+        ? (1 + Math.sqrt(1 + 8 * N)) / 2
+        : (-3 + Math.sqrt(1 + 8 * N)) / 2;
+
+    const mMin = interiorOnly ? 2 : 0;
+    const candidates = [Math.floor(mCont), Math.ceil(mCont)].map((m) =>
+        Math.max(mMin, m)
+    );
+
+    let best = /** @type {{ m:number, count:number, diff:number } | null} */ (null);
+    for (const m of candidates) {
+        const count = interiorOnly ? ((m - 1) * m) / 2 : ((m + 1) * (m + 2)) / 2;
+        const diff = Math.abs(count - N);
+        if (!best || diff < best.diff || (diff === best.diff && m < best.m)) {
+            best = { m, count, diff };
+        }
+    }
+    return /** @type {any} */ (best);
+}
+
+/**
+ * 三角形の内接円の直径（メートル）を返す
+ * D = 4A / P （A: 面積[m^2], P: 周長[m]）
+ * @param {PolygonFeature} triangle
+ * @returns {number} diameterMeters
+ */
+export function incircleDiameter(triangle) {
+    const [A, B, C] = extractTriangleVertices(triangle);
+
+    // 周長 P（m）
+    const a = distance(point(B), point(C), { units: 'meters' }); // |BC|
+    const b = distance(point(C), point(A), { units: 'meters' }); // |CA|
+    const c = distance(point(A), point(B), { units: 'meters' }); // |AB|
+    const P = a + b + c;
+
+    // 面積 A（m^2）
+    const A_m2 = area(triangle);
+
+    if (P <= 0 || A_m2 <= 0) {
+        throw new Error('degenerate triangle (zero perimeter or area)');
+    }
+    return (4 * A_m2) / P; // 直径 D
+}
+
+// まとめて import したい場合用
+export default {
+    triangleLatticeByDivisions,
+    divisionsForClosestCount,
+    incircleDiameter,
+};
+
+/* -------------------------
+USAGE (example):
+
+import { polygon } from '@turf/turf';
+import {
+  triangleLatticeByDivisions,
+  divisionsForClosestCount,
+  incircleDiameter
+} from './util.js';
+
+const tri = polygon([[
+  [139.70, 35.65],
+  [139.75, 35.65],
+  [139.725, 35.70],
+  [139.70, 35.65],
+]]);
+
+// 1) m 等分の格子（境界含む）
+const m = 10;
+const fcAll = triangleLatticeByDivisions(tri, m); // (m+1)(m+2)/2 点
+
+// 2) 目標 N に最も近い m を探す → その m で格子生成
+const targetN = 25;
+const { m: bestM } = divisionsForClosestCount(targetN, { interiorOnly: false });
+const fcClosest = triangleLatticeByDivisions(tri, bestM);
+
+// 3) 内接円の直径（メートル）
+const D = incircleDiameter(tri);
+console.log('incircle diameter (m):', D);
+
+-------------------------- */

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "splatone",
+  "version": "0.0.1",
+  "description": "Multi-layer Composite Heatmap",
+  "homepage": "https://github.com/YokoyamaLab/Splatone#readme",
+  "bugs": {
+    "url": "https://github.com/YokoyamaLab/Splatone/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YokoyamaLab/Splatone.git"
+  },
+  "license": "MIT",
+  "author": "Shohei Yokoyama (Tokyo Metropolitan University)",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "crawler": "./crawler.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@turf/turf": "^7.2.0",
+    "chroma-js": "^3.1.2",
+    "ejs": "^3.1.10",
+    "express": "^5.1.0",
+    "flickr-sdk": "^7.1.0",
+    "iwanthue": "^2.0.0",
+    "open": "^10.2.0",
+    "piscina": "^5.1.3",
+    "socket.io": "^4.8.1",
+    "uniqid": "^5.4.0",
+    "yargs": "^18.0.0"
+  }
+}

package/plugins/flickr/index.js

@@ -0,0 +1,55 @@
+// plugins/hello/index.js
+import { PluginBase } from '../../lib/PluginBase.js';
+import { bbox, polygon, centroid, booleanPointInPolygon, featureCollection } from '@turf/turf';
+
+export default class FlickrPlugin extends PluginBase {
+    static id = 'flickr';               // 必須
+    static name = 'Flickr Plugin';      // 任意
+    static description = 'Flickrからジオタグ付きデータを収集する。';
+    static version = '1.0.0';
+
+    async stop() {
+        //this.api.log(`[${this.constructor.id}] stop`);
+    }
+
+    // 任意の公開メソッド
+    async crawl({ hexGrid, triangles/*, tags*/, categories, max_upload_date, sessionId }) {
+        if (!this.started) {
+            this.start();
+        }
+
+        const getTrianglesInHex = (hex, triangles) => {
+            const hexPoly = polygon(hex.geometry.coordinates);
+            const selected = triangles.features.filter(tri => {
+                const triPoly = polygon(tri.geometry.coordinates);
+                const triCent = centroid(triPoly);
+                return booleanPointInPolygon(triCent, hexPoly);
+            });
+            return featureCollection(selected);
+        }
+        const hexQuery = {};
+        const ks = Object.keys(hexGrid.features);
+        await Promise.all(ks.map(async k => {
+            const item = hexGrid.features[k];
+            hexQuery[item.properties.hexId] = {};
+            const cks = Object.keys(categories);
+            await Promise.all(cks.map(ck => {
+                const tags = categories[ck];
+                //console.log("tag=",ck,"/",tags);
+                hexQuery[item.properties.hexId][ck] = { photos: [], tags, final: false };
+                this.api.emit('splatone:start', {
+                    plugin: 'flickr',
+                    API_KEY: this.options.API_KEY,
+                    hex: item,
+                    triangles: getTrianglesInHex(item, triangles),
+                    bbox: bbox(item.geometry),
+                    category: ck,
+                    tags,
+                    max_upload_date,
+                    sessionId
+                });
+            }));
+        }));
+        return `Flickr, ${this.options.API_KEY}, ${hexGrid.features.length} bboxes processed.`;
+    }
+}

package/plugins/flickr/worker.js

@@ -0,0 +1,77 @@
+import { createFlickr } from "flickr-sdk"
+import { point, featureCollection } from "@turf/helpers";
+import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
+
+export default async function ({
+    API_KEY = "",
+    bbox = [0, 0, 0, 0],
+    tags = "",
+    category = "",
+    max_upload_date = null,
+    hex = null,
+    triangles = null,
+}) {
+    const { flickr } = createFlickr(API_KEY);
+    const baseParams = {
+        bbox: bbox.join(','),
+        tags: tags,
+        max_upload_date: max_upload_date,
+
+    };
+    const res = await flickr("flickr.photos.search", {
+        ...baseParams,
+        has_geo: 1,
+        extras: "date_upload,date_taken,owner_name,geo,url_s,tags",
+        per_page: 250,
+        page: 1,
+        sort: "date-posted-desc"
+    });
+    //console.log(baseParams);
+    //console.log("[(Crawl)", hex.properties.hexId, category, "]", (new Date(max_upload_date * 1000)).toLocaleString(), "-> photos:", res.photos.photo.length, "/", res.photos.total);
+    const ids = [];
+    const authors = {};
+    const photos = featureCollection(res.photos.photo.filter(photo => {
+        authors[photo.owner] ??= 0;
+        authors[photo.owner]++;
+        return booleanPointInPolygon(point([photo.longitude, photo.latitude]), hex);
+    }).map(photo => {
+        ids.push(photo.id);
+        const getTriangleContainingPoint = (point, triangles) => {
+            const rtn = triangles.features.filter(tri => {
+                return booleanPointInPolygon(point, tri);
+            });
+            return rtn[0]?.properties?.triangleId.split('-')[1] || null;
+        }
+        return point(
+            [photo.longitude, photo.latitude],
+            {
+                ...photo,
+                splatone_plugin: 'flickr',
+                splatone_hexId: hex.properties.hexId,
+                splatone_triId: getTriangleContainingPoint(point([photo.longitude, photo.latitude]), triangles),
+            }
+        );
+    }));
+    const outside = res.photos.photo.length - photos.features.length;
+    //console.log(JSON.stringify(photos, null, 4));
+    let next_max_upload_date
+        = res.photos.photo.length > 0
+            ? (res.photos.photo[res.photos.photo.length - 1].dateupload) - (res.photos.photo[res.photos.photo.length - 1].dateupload == res.photos.photo[0].dateupload ? 1 : 0)
+            : null;
+    if (Object.keys(authors).length == 1) {
+        const window = res.photos.photo[res.photos.photo.length - 1].dateupload - res.photos.photo[0].dateupload;
+        console.warn("[Warning]", `High posting activity detected for ${Object.keys(authors)} within {$window}. the crawler will skip the next 24 hours.`);
+        next_max_upload_date -= 60 * 60 * 24;
+    }
+    return {
+        photos,
+        hexId: hex.properties.hexId,
+        tags,
+        category,
+        next_max_upload_date,
+        total: res.photos.total,
+        outside: outside,
+        ids,
+        final: res.photos.photo.length == res.photos.total
+    };
+}

package/public/style.css

@@ -0,0 +1,318 @@
+/* ====== Map base ====== */
+html,
+body {
+  overflow-x: hidden;
+}
+
+html,
+body,
+#map {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* ====== Hamburger Button ====== */
+.hamburger {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1100;
+  /* Leaflet control (z-index 1000~) より上 */
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: #fff;
+  border-radius: 10px;
+  width: 44px;
+  height: 44px;
+  font-size: 22px;
+  line-height: 42px;
+  text-align: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+}
+
+/* ====== Slide-over Panel (Right) ====== */
+.sidepanel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1200;
+  height: 100%;
+  width: min(88vw, 360px);
+  background: #ffffff;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidepanel.open {
+  transform: translateX(0%);
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid #eee;
+}
+
+.panel-header h2 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.icon-btn {
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.panel-body {
+  padding: 12px 14px 18px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.panel-section {
+  margin-bottom: 16px;
+}
+
+.muted {
+  color: #666;
+  font-size: 13px;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 8px 0;
+}
+
+.field>span {
+  font-size: 14px;
+  color: #333;
+}
+
+.field input[type="number"],
+.field input[type="text"],
+.field select {
+  flex: 1;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+  background: #fff;
+}
+
+.check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+  font-size: 14px;
+}
+
+.panel-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.btn {
+  border: 1px solid #ddd;
+  background: #fafafa;
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 14px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
+}
+
+.btn:hover {
+  background: #f2f2f2;
+}
+
+.bbox-row {
+  margin-top: 10px;
+}
+
+.bbox-label {
+  display: inline-block;
+  font-size: 12px;
+  color: #444;
+  background: #f7f7f7;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 3px 6px;
+}
+
+/* ====== Overlay behind the panel ====== */
+.panel-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1150;
+  background: rgba(0, 0, 0, .25);
+  backdrop-filter: blur(1px);
+}
+
+/* ====== Leaflet.draw Rectangle style (minor tune) ====== */
+.leaflet-draw-toolbar a {
+  border-radius: 8px !important;
+}
+
+.map-bottom-left-control {
+  width: 160px;
+  /* 好きな幅 */
+  height: 50px;
+  /* 好きな高さ */
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, .12);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
+  overflow: auto;
+  /* 中身が溢れたらスクロール */
+  backdrop-filter: blur(6px);
+  /* 対応ブラウザで半透明の質感UP */
+}
+
+.map-bottom-left-control .panel-contents {
+  padding: 10px;
+}
+
+.map-bottom-left-progressbar {
+  width: 500px;
+  /* 好きな幅 */
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, .12);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
+  overflow: visible;
+  backdrop-filter: blur(6px);
+}
+
+.map-bottom-left-legend {
+  width: 160px;
+  /* 好きな幅 */
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, .12);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
+  overflow: visible;
+  backdrop-filter: blur(6px);
+  /* 対応ブラウザで半透明の質感UP */
+}
+.map-bottom-left-progressbar .panel-contents,
+.map-bottom-left-legend .panel-contents {
+  padding: 10px;
+}
+
+.legend_ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.legend_circle {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  background: skyblue;
+}
+
+.legend_category {
+  padding-left: 0.5em;
+  vertical-align: super;
+  font-weight: bold;
+}
+
+/* プログレスバー */
+:root {
+--pb-height: 14px;
+--pb-radius: 999px;
+--pb-track: hsl(220 10% 18% / 0.25);
+--pb-fill: linear-gradient(90deg, hsl(200 90% 60%), hsl(260 90% 65%));
+--pb-border: hsl(220 10% 90% / 0.6);
+--pb-shadow: 0 1px 0 hsl(0 0% 100% / 0.3) inset,
+0 0 0 1px hsl(220 10% 5% / 0.04) inset,
+0 1px 2px hsl(220 20% 10% / 0.25);
+--pb-transition: 240ms cubic-bezier(.2,.8,.2,1);
+}
+
+
+@media (prefers-color-scheme: dark) {
+:root {
+--pb-track: hsl(220 10% 30% / 0.35);
+--pb-border: hsl(220 10% 25% / 0.9);
+}
+}
+
+
+/* 任意幅: 親要素の幅に追従（100%）。必要に応じて親に width を指定してください。 */
+.progress-wrap { width: 100%; max-width: 100%; }
+
+
+.progress {
+--value: 0; /* 0 - 100 */
+position: relative;
+width: 100%;
+height: var(--pb-height);
+background: var(--pb-track);
+border-radius: var(--pb-radius);
+overflow: clip;
+box-shadow: var(--pb-shadow);
+border: 1px solid var(--pb-border);
+}
+
+
+.progress__bar {
+width: calc(var(--value) * 1%);
+height: 100%;
+background: var(--pb-fill);
+background-size: 200% 100%;
+transition: width var(--pb-transition);
+}
+
+
+.progress__label {
+position: absolute;
+inset: 0; display: grid; place-items: center;
+font-size: 12px; font-variant-numeric: tabular-nums;
+color: hsl(0 0% 100% / .9);
+pointer-events: none;
+text-shadow: 0 1px 1px #0006;
+}
+
+
+/* サイズのプリセット（任意で利用） */
+.is-sm { --pb-height: 8px; }
+.is-lg { --pb-height: 22px; }
+
+/* ダウンロードボタン */
+  .dl-btn{
+    display:inline-flex; align-items:center; gap:6px;
+    height:32px; padding:0 10px; border:1px solid #ccc; border-radius:8px;
+    background:#fff; color:#333; font-size:13px; line-height:1; cursor:pointer;
+    box-shadow:0 1px 2px rgba(0,0,0,.06);
+  }
+  .dl-btn:hover{ background:#f7f7f7; }
+  .dl-btn:active{ transform:translateY(1px); }
+  .dl-btn:focus{ outline:2px solid #2684ff33; outline-offset:2px; }
+  /* 画面が極端に狭い時はラベルを省略（任意） */
+  @media (max-width: 420px){
+    .dl-btn .label{ display:none; }
+    .dl-btn{ width:32px; padding:0; justify-content:center; }
+  }
+  .center-x {
+    display: flex;
+    justify-content: center;  /* 横中央 */
+  }