Refactor Scenes and Libraries SVG overlay
This commit is contained in:
Ruben van de Ven
parent
c8187f3f5e
commit
bcc96dea31
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue