Refactor Scenes and Libraries SVG overlay

2024-05-31 12:58:24 +02:00 · 2024-05-31 12:58:24 +02:00 · bcc96dea31
commit bcc96dea31
parent c8187f3f5e
4 changed files with 240 additions and 42 deletions
--- a/poetry.lock
+++ b/poetry.lock
@ -1,8 +1,7 @@
+# This file is automatically @generated by Poetry 1.8.3 and should not be changed by hand.
 package = []

 [metadata]
-lock-version = "1.1"
+lock-version = "2.0"
 python-versions = "^3.9"
-content-hash = "5b80bcf39bc22fc51a0c05260792ccc8bde494467670046c58c64725c897eb75"
-
-[metadata.files]
+content-hash = "c595a0588c25d58f3e3834ad7169126836d262b925fe6ca9b5d540dcf301d254"
--- a/src/LibrariesSvg.svelte
+++ b/src/LibrariesSvg.svelte
@ -0,0 +1,205 @@
+<g
+   id="APM"
+   transform="translate(298.72484444444126, 433.0485336906215)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle484" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle486" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text488"
+      >Archaeological Collection</text
+   >
+</g>
+<g
+   id="OTM"
+   transform="translate(1745.5955555555556, 3603.1193459656633)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle491" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle493" />
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="4.1199999"
+      x="-35" text-anchor="end"
+      id="text495">Allard Pierson Depot</text
+   >
+</g>
+<g
+   id="BC"
+   transform="translate(298.72484444444126, 393.0485336906215)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle498" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle500" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text502"
+      >Handbibliotheek</text
+   >
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="38"
+      x="311.19113"
+      id="text1097">Allard Pierson</text
+   >
+</g>
+<g
+   id="ARTIS"
+   transform="translate(807.0959555555783, 551.9470916540013)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle505" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle507" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text509"
+      >Artis Bibliotheek</text
+   >
+</g>
+<g
+   id="BHBPU"
+   transform="translate(408.1404000000112, 307.58142297433403)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle512" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle514" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text516"
+      >Bushuis - pickup location</text
+   >
+</g>
+<g
+   id="CEDLA"
+   transform="translate(710.2181777777914, 820.5062916831351)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle519" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle521" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text523">CEDLA</text
+   >
+</g>
+<g
+   id="UBGW"
+   transform="translate(160.2826222222393, 520.1182633671162)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle526" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle528" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text530"
+      >GW-collecties UB</text
+   >
+</g>
+<g
+   id="IVIR"
+   transform="translate(730.9048444444488, 682.295035560214)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle533" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle535" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text537">IViR</text>
+</g>
+<g
+   id="IWO"
+   transform="translate(1775.5955555555554, 3553.1193459656633)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle540" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle542" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text544"
+      >IWO-depot</text
+   >
+</g>
+<g
+   id="JB"
+   transform="translate(740.9048444444488, 750.295035560214)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle547" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle549" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text551"
+      >Juridische Bibliotheek</text
+   >
+</g>
+<g
+   id="REC"
+   transform="translate(699.5315111111087, 623.2141384588231)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle554" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle556" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text558"
+      >Library Learning Centre Roeterseiland</text
+   >
+</g>
+<g
+   id="AMC"
+   transform="translate(1767.38706666667, 3460.8911949512853)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle561" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle563" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="3.5" text-anchor="end" x="-35" id="text565"
+      >Medische Bibliotheek</text
+   >
+</g>
+<g
+   id="PCHH"
+   transform="translate(222.92706666665254, 150.79690464423038)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle568" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle570" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text572"
+      >P.C.Hoofthuis</text
+   >
+</g>
+<g
+   id="BETA"
+   transform="translate(1687.8959555555593, 1008.3027457312287)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle575" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle577" />
+   <text
+      class="nodeTitle s-vynWWFEzB3Z5"
+      y="4.1199999"
+      x="-35" text-anchor="end"
+      id="text579">Sciencepark Bibliotheek</text
+   >
+</g>
+<g
+   id="UBB"
+   transform="translate(220.2826222222393, 630.1182633671162)"
+   class="s-vynWWFEzB3Z5"
+>
+   <circle r="5" class="s-vynWWFEzB3Z5" id="circle582" />
+   <circle r="20" class="s-vynWWFEzB3Z5" id="circle584" />
+   <text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text586"
+      >UB Singel</text
+   >
+</g>
+<path
+   style=""
+   d="M 492.42998,401.08039 H 593.04204 V 442.57506 L 579.95449,442.42775"
+   id="path1093"
+/>
+<path
+   style=""
+   d="M 593.04204,421.82772 604.96062,421.82773"
+   id="path1095"
+/>
+
+<style lang="scss">
+   circle:first-child {
+      fill: white;
+      stroke: none;
+   }
+   circle {
+      fill: none;
+      stroke: white;
+      stroke-width: 10;
+   }
+   text {
+      fill: white;
+      font-size: 15pt;
+   }
+   path{
+      stroke: white;
+      fill: none;
+      stroke-width: 2px;
+   }
+</style>
--- a/src/Viz.svelte
+++ b/src/Viz.svelte
@ -1,7 +1,8 @@
 <script lang="ts">
    import parsed_requests from "/data/parsed_requests.json";
-    import { draw, slide } from "svelte/transition";
+    import { draw, slide, fade } from "svelte/transition";
    import { fps } from "@sveu/browser";
+    import LibrariesSvg from "./LibrariesSvg.svelte";

    import { All, Scene, Timeline } from "./scenes/Scenes";
    import {
@ -236,6 +237,7 @@
        {#each $drawn_motions as m}
            <path
                in:draw|global={{ duration: m.duration }}
+                out:fade={{duration: 1000}}
                d={m.movement.d}
                style="opacity: {opacity}"
            ></path>
@ -248,13 +250,14 @@
        {/each}
    </g>
    <g id="libraries">
-        {#each locations.values() as node}
+        <LibrariesSvg />
+        <!-- {#each locations.values() as node}
            <g id={node.code} transform="translate({node.x}, {node.y})">
                <circle r="5"></circle>
                <circle r="20"></circle>
                <text class="nodeTitle" y="13" x="35">{node.name}</text>
            </g>
-        {/each}
+        {/each} -->
    </g>
 </svg>

@ -316,15 +319,7 @@
            display:block;
        }
    }
-    #libraries circle:first-child {
-        fill: white;
-        stroke: none;
-    }
-    #libraries circle {
-        fill: none;
-        stroke: white;
-        stroke-width: 10;
-    }
+    
    path {
        stroke: #bc89ff;
        stroke-width: 2px;
@ -335,10 +330,7 @@
        stroke-width: 4;
        opacity: 1;
    }
-    text {
-        fill: white;
-        font-size: 30pt;
-    }
+    

    /* path:not(.selected) {
        opacity: 0;
--- a/src/scenes/Scenes.ts
+++ b/src/scenes/Scenes.ts
@ -1,31 +1,35 @@
 import type { Writable } from "svelte/store";
-import type { Data, Item, Motion, Movement, VizData } from "../lib/types";
+import type { Data, Item, Log, Motion, Movement, VizData } from "../lib/types";

 export class Scene {
    rendered_elements: String[] = []
+    data: Data;
+    viz_data: VizData;
+    nextScene: CallableFunction;
+
+    constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
+        this.data = data;
+        this.viz_data = viz_data;
+        this.nextScene = nextScene;
+    }
+    
    stop() {
        console.log("TODO: stop timeout")
    }
 }

 export class All extends Scene {
-    allMovements: Movement[]
-    motions: Writable<Motion[]>
    interval: number
    step: number = 0
-    nextScene: CallableFunction
    locationCounts = new Map<Location, { in: number, out: number }>()

    constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
-        super()
-
-        this.nextScene = nextScene
+        super(data, viz_data, nextScene);

        // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
        // when done, trigger parent.done()
-        this.allMovements = data.movements;
+        // this.allMovements = data.movements;

-        this.motions = viz_data.drawn_motions
        // TODO: group by hour and have it last nr-of-hours * interval
        // TODO: then, add a timeline
        // TODO: then, add an overlay with relevant events, e.g. 
@ -37,23 +41,23 @@ export class All extends Scene {
        this.interval = setInterval(this.tick.bind(this), 500);

        // clear the motions when kicking off:
-        this.motions.update(items => []);
+        this.viz_data.drawn_motions.update(items => []);
    }

    tick() {
        const n = 10
-        if (this.step >= this.allMovements.length) {
+        if (this.step >= this.data.movements.length) {
            console.log('this', 'done')
            // todo: ease out all entries
            this.nextScene()
            return;
        }
-        let movements: Movement[] = this.allMovements.slice(this.step, this.step + n);
+        let movements: Movement[] = this.data.movements.slice(this.step, this.step + n);

        // duration 5000 + Math.random() * 10000
        let motions: Motion[] = movements.map((m) => ({ duration: 5000, movement: m }));

-        this.motions.update(items => ([...items, ...motions]))
+        this.viz_data.drawn_motions.update(items => ([...items, ...motions]))
        this.step += n;
    }

@ -68,16 +72,12 @@ export class All extends Scene {
 export class Timeline extends Scene {
    movements: Movement[]
    item: Item
-    motions: Writable<Motion[]>
    interval: number
    step: number = 0
-    nextScene: CallableFunction
    locationCounts = new Map<Location, { in: number, out: number }>()

    constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
-        super()
-
-        this.nextScene = nextScene
+        super(data, viz_data, nextScene);

        // start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
        // when done, trigger parent.done()
@ -87,8 +87,8 @@ export class Timeline extends Scene {
        this.movements = movements
        console.log(item, movements)

-        this.motions = viz_data.drawn_motions
-        this.motions.update(items => [])
+        // this.motions = viz_data.drawn_motions
+        this.viz_data.drawn_motions.update(items => [])

        this.interval = setInterval(this.tick.bind(this), 3000);

@ -113,9 +113,11 @@ export class Timeline extends Scene {
        }
        
        // duration 5000 + Math.random() * 10000
-        const motion: Motion = { duration: 2000, movement: this.movements[this.step] };
+        const mov = this.movements[this.step]
+        const motion: Motion = { duration: 2000, movement: mov };
+        const log: Log = { date: new Date, title: `Transfer to ${mov.target.name}`, description: "" };
        console.log(motion, motion.movement.source, motion.movement.target)
-        this.motions.update(items => ([...items, motion]))
+        this.viz_data.drawn_motions.update(items => ([...items, motion]))
        this.step += 1;
    }