r/ub-movements
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better timing and text and layout

Browse source
This commit is contained in:
Ruben van de Ven 2024-06-22 16:03:32 +02:00
parent 1590fa5615
commit 7e0f414c66
4 changed files with 55 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
parse_data.py
View file

@ -39,10 +39,14 @@ def filter_date(date: str):
return date
def clean_title(title: str) -> str:
return title.removesuffix('/').strip()
with open("data/batch2/Rapport_transit_1.csv", encoding='utf-8-sig') as fp:
# items
reader = csv.DictReader(fp, delimiter=",")
for item in reader:
item['Title'] = clean_title(item['Title'])
item['Publication Date'] = filter_date(item['Publication Date'])
item['Sort Date'] = item['Publication Date'][-4:] # some dates are ranges, only sort by last year
items.append(item)

33
src/Viz.svelte
View file

@ -160,6 +160,7 @@
occurences: occurences,
};
let tease_title = writable(true); //.filter((m, i) => i < 100);
let drawn_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
$: opacity = Math.max(0.055, Math.min(0.3, 70 / $drawn_motions.length));
let overlay_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
@ -167,6 +168,7 @@
let current_item = writable(<Item | null>null); //.filter((m, i) => i < 100);
const viz_data: VizData = {
tease_title: tease_title,
drawn_motions: drawn_motions,
overlay_motions: overlay_motions,
events: events,
@ -219,7 +221,9 @@
});
</script>
<h1>library of <span id="motiontitle">motions</span></h1>
{#if $tease_title}
<h1 in:fade={{duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
{/if}
<div id="about">
<span
>Work by <em>Ruben van de Ven</em> for the
@ -303,6 +307,7 @@
</div>
{#if $current_item}
<div id="current">
<h3>Logbook of</h3>
<h2>{$current_item.title}</h2>
<p>{[$current_item.Date, $current_item.Publisher, $current_item.Place].filter((e) => e).join(', ')}</p>
</div>
@ -334,6 +339,13 @@
.entry {
display: flex;
flex-direction: row;
h3{
margin-bottom: 10px;;
}
p{
margin:0;
}
.date {
width: 180px;
}
@ -350,6 +362,7 @@
height: var(--divider-width);
width: var(--divider-width);
background-color: rgb(79 70 229);
// background-color: rgba(70, 229, 112, 1);;
border-radius: calc(var(--divider-width) / 2);
// border: solid 5px black;
flex-grow: 0;
@ -375,9 +388,22 @@
}
p {
}
padding-bottom: 30px;;
}
}
}
h1{
animation: fadeout;
animation-duration: 3s;
animation-delay: 10s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeout{
0%{opacity: 1;}
100%{opacity: 0;}
}
#fps {
position: absolute;
top: 10px;
@ -420,8 +446,9 @@
}
}
#overlay_motions path {
stroke: rgba(255, 255, 0, 0.641);
stroke-width: 5;
// strokrgba(70, 229, 120, 0.641)41);
stroke: rgba(70, 229, 112, 0.5);
stroke-width: 4;
opacity: 1;
}

3
src/lib/types.ts
View file

@ -92,7 +92,7 @@ export function importMovement(idx, orig: Object, locations: Map<string, Locatio
target: target,
item: item,
start_date: new Date(orig["Event Start Date and Time"]), // TODO: validate unfortunate M/D/Y format
end_date: new Date(orig["Event Start Date and Time"]), // TODO: validate unfortunate M/D/Y format
end_date: new Date(orig["Event End Date and Time"]), // TODO: validate unfortunate M/D/Y format
_original: orig,
d: "", // bit of a hacky workaround, refactor in object
};
@ -125,6 +125,7 @@ export type Log = {
// Type used by the scenes with all reactive Writables for drawable objects
export type VizData = {
tease_title: Writable<Boolean>,
drawn_motions: Writable<Motion[]>,
overlay_motions: Writable<Motion[]>,
events: Writable<Log[]>,

24
src/scenes/Scenes.ts
View file

@ -61,6 +61,8 @@ export class All extends Scene {
constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
super(data, viz_data, nextScene);
viz_data.tease_title.set(true)
// start setInterval to trigger additions per 100 or so to drawn_movements (rendered on map)
// when done, trigger parent.done()
// this.allMovements = data.movements;
@ -130,6 +132,8 @@ export class Timeline extends Scene {
constructor(data: Data, viz_data: VizData, nextScene: CallableFunction) {
super(data, viz_data, nextScene);
viz_data.tease_title.set(false)
// clear canvas
// this.viz_data.drawn_motions.update(items => [])
@ -150,7 +154,7 @@ export class Timeline extends Scene {
console.log('start timeline', item, movements)
this.interval = setInterval(this.tick.bind(this), 3000);
this.interval = setInterval(this.tick.bind(this), 5000);
}
@ -171,15 +175,16 @@ export class Timeline extends Scene {
}
const pick = item_movements[Math.floor(Math.random() * item_movements.length)]
pick[1].sort((a: Movement, b: Movement) => (a.end_date - b.end_date))
pick[1].sort((a: Movement, b: Movement) => (b.end_date - a.end_date)) // reverse order
return pick;
}
tick() {
if (this.step >= this.movements.length) {
console.log('this', 'done')
clearInterval(this.interval)
setTimeout(this.nextScene.bind(this), 5000)
// todo: ease out all entries
this.nextScene()
// this.nextScene()
return;
}
@ -188,7 +193,16 @@ export class Timeline extends Scene {
this.drawMovements([mov], 2000, true)
// const motion: Motion = { duration: 2000, movement: mov };
// TODO: also consider end date
const log: Log = { date: mov.start_date, title: `Transfer to ${mov.target.name}`, description: "" };
let title = this.step === 0 ?
`'${mov.item.title}' arrived at ${mov.target.name}`:
`Item arrived at ${mov.target.name}`;
let description = `Travelling from ${mov.source.name}`;
const log: Log = { date: mov.end_date, title: title, description: description };
// const log2: Log = { date: mov.start_date, title: title_send, description: "" };
// console.log(motion, motion.movement.source, motion.movement.target)
// this.viz_data.overlay_motions.update(items => ([...items, motion]))
this.viz_data.events.update(items => ([...items, log]))