aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/HelpModal.vue301
-rw-r--r--src/components/SettingsModal.vue2
-rw-r--r--src/components/TimeLine.vue7
3 files changed, 263 insertions, 47 deletions
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index d0fc57a..64df474 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -5,74 +5,213 @@
<close-icon @click.stop="onClose" ref="closeRef"
class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
<h1 class="text-center text-xl sm:text-2xl font-bold pt-2 pb-1">Help</h1>
- <p class="px-4">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
+ <p class="px-4 pb-1">
+ This is an interactive historical timeline, displaying events from
+ {{dateToDisplayStr(MIN_DATE)}} to {{dateToDisplayStr(MAX_DATE)}}.
+ {{touchDevice ? 'Drag the screen' : 'Scroll or press ' + (vert ? 'up/down': 'left/right')}} to pan.
+ {{touchDevice ? 'Pinch' : 'Hold shift'}} to zoom.
</p>
<div class="flex flex-col gap-2 p-2">
- <!-- Licensing and Credits -->
<s-collapsible :class="scClasses">
<template #summary="slotProps">
<div :class="scSummaryClasses">
<down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
- Licensing and Credits
+ Visual Display
+ </div>
+ </template>
+ <template #content>
+ <div :class="contentClasses" class="space-y-3">
+ <p>
+ Initially, the main area contains one timeline, with ticks representing evenly spaced
+ points in time. A square represents a min or max date. '1k BC' means
+ 1000 BC. 'mya' and 'bya' mean millions and billions of years ago.
+ </p>
+ <img src="/timeline.png" alt="Timeline with events"
+ class="border border-stone-300 rounded mx-auto md:mx-0 md:shrink-0"/>
+ <p>
+ Events are shown as labelled images. Blue borders indicate
+ discovery events. This allows distinctions like between when a planet was discovered
+ and when it was formed.
+ </p>
+ <p>
+ Events are linked to points on the timeline that match their 'start date'.
+ For a person, this is a date of birth. For a book, this is a date of publication.
+ {{touchDevice ? 'Tap' : 'Click'}} on an event to bring up more details.
+ </p>
+ <p>
+ The timeline also has varying 'thickness', which indicates how many events
+ are present between ticks.
+ There are four levels, indicating counts of zero to over a thousand.
+ </p>
+ <p>
+ The + button at the top right adds another timeline, if there's enough space.
+ </p>
+ <p>
+ The sidebar at the {{vert ? 'right' : 'bottom'}} represents the full range of
+ possible dates. Each timeline's bounds are displayed as a yellow subregion.
+ Timelines will often look very thin, as the whole bar spans billions of years.
+ </p>
+ </div>
+ </template>
+ </s-collapsible>
+
+ <s-collapsible :class="scClasses">
+ <template #summary="slotProps">
+ <div :class="scSummaryClasses">
+ <down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
+ Other Features
</div>
</template>
<template #content>
<div :class="contentClasses">
- <p>Source code is available on GitHub, under the MIT Licence.</p>
- <h1 class="text-lg font-bold">Data Sources</h1>
- <ul class="list-disc pl-4">
+ <h1 :class="contentH1Classes">Keyboard Shortcuts</h1>
+ <ul :class="contentULClasses">
<li>
- The short descriptions, the remaining images, and other data,
- were obtained from the
- <a href="https://dumps.wikimedia.org/wikidatawiki/entities/" :style="aStyles">
- Wikidata dump</a>.
- Wikipedia page content is available under
- <a href="https://creativecommons.org/licenses/by-sa/3.0/" :style="aStyles"
- >CC BY-SA 3.0</a>.
+ <span class="font-bold">{{vert ? 'Up': 'Left'}}</span> and
+ <span class="font-bold">{{vert ? 'Down': 'Right'}}</span> pan the timeline
+ </li>
+ <li>
+ <span class="font-bold">{{vert ? 'Left' : 'Up'}}</span> and
+ <span class="font-bold">{{vert ? 'Right' : 'Down'}}</span>
+ switch between timelines
+ </li>
+ <li>
+ <span class="font-bold">Shift-{{vert ? 'Left' : 'Up'}}</span> and
+ <span class="font-bold">Shift-{{vert ? 'Right' : 'Down'}}</span>
+ zoom in and out
+ </li>
+ <li>
+ <span class="font-bold">Plus</span> and <span class="font-bold">Delete</span>
+ add and remove timelines
</li>
+ <li><span class="font-bold">Ctrl-F</span> opens the search bar</li>
+ <li><span class="font-bold">Esc</span> closes an open pane</li>
</ul>
<br/>
- <h1 class="text-lg font-bold">Other Credits</h1>
- <ul class="list-disc pl-4">
+ <h1 :class="contentH1Classes">Settings</h1>
+ <ul :class="contentULClasses">
<li>
- The UI was mostly coded in
- <a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
- and built wth <a href="https://vuejs.org/" :style="aStyles">Vue</a>,
- <a href="https://vitejs.dev/" :style="aStyles">Vite</a> &amp;
- <a href="https://pinia.vuejs.org/" :style="aStyles">Pinia</a>
+ <h2 :class="contentH2Classes">Categories</h2>
+ <p>
+ Allows filtering of displayed events by category. Examples include:
+ </p>
+ <ul :class="contentInnerULClasses">
+ <li><span class="font-bold">Event:</span> wars, disasters, celebrations</li>
+ <li><span class="font-bold">Place:</span> cities, countries, galaxies</li>
+ <li><span class="font-bold">Person:</span> writers, scientists, leaders</li>
+ <li><span class="font-bold">Organism:</span> dinosaurs, insects, plants</li>
+ <li>
+ <span class="font-bold">Work:</span> books, movies, video games
+ </li>
+ <li><span class="font-bold">Discovery:</span> inventions, ideas, places</li>
+ </ul>
+ <p class="text-xs md:text-sm text-stone-500 py-1">
+ (Unfortunately, timeline thickness isn't yet indicative of filtered events)
+ </p>
</li>
<li>
- Tree data was processed using
- <a href="https://www.python.org/" :style="aStyles">Python</a>,
- and stored using
- <a href="https://www.sqlite.org/index.html" :style="aStyles">Sqlite</a>
+ <h2 :class="contentH2Classes">Display</h2>
+ <ul :class="contentInnerULClasses">
+ <li><span class="font-bold">Only events with images:</span>
+ If enabled, only about 20% of events are shown</li>
+ <li><span class="font-bold">Minor tick text:</span>
+ Toggles labels for small-sized ticks</li>
+ <li><span class="font-bold">Event density:</span>
+ Toggles timeline thickness</li>
+ <li><span class="font-bold">Event lines:</span>
+ Toggles lines linking events to timelines</li>
+ <li><span class="font-bold">Baseline:</span>
+ Toggles the sidebar representing the full date range</li>
+ </ul>
</li>
<li>
- Styling was enhanced using
- <a href="https://tailwindcss.com/" :style="aStyles">Tailwind</a>
+ <h2 :class="contentH2Classes">Input</h2>
+ <ul :class="contentInnerULClasses">
+ <li><span class="font-bold">Pan ratio:</span>
+ Higher values mean faster panning</li>
+ <li><span class="font-bold">Zoom ratio:</span>
+ Higher values mean faster zooming</li>
+ </ul>
</li>
+ </ul>
+ <p class="mt-2">
+ {{touchDevice ? 'Tapping' : 'Clicking'}} on
+ a slider's label resets it to its default value.
+ </p>
+ </div>
+ </template>
+ </s-collapsible>
+
+ <s-collapsible :class="scClasses">
+ <template #summary="slotProps">
+ <div :class="scSummaryClasses">
+ <down-icon :class="slotProps.open ? downIconExpandedClasses : downIconClasses"/>
+ Licensing and Credits
+ </div>
+ </template>
+ <template #content>
+ <div :class="contentClasses">
+ <p>The source code is available on GitHub, under the MIT Licence.</p>
+ <br/>
+ <h1 :class="contentH1Classes">Data Sources</h1>
+ <ul :class="contentULClasses">
<li>
- The font is <a href="https://design.ubuntu.com/font/" :style="aStyles">Ubuntu Font</a>,
- licensed under
- <a href="https://ubuntu.com/legal/font-licence"
- :style="aStyles">Ubuntu font licence</a>
- </li>
- <li>Icons were used from
- <a href="https://feathericons.com/" :style="aStyles">Feathericons</a>
- and <a href="https://ionic.io/ionicons" :style="aStyles">Ionicons</a>,
- both under MIT License
+ Event data was obtained from the
+ <a href="https://dumps.wikimedia.org/wikidatawiki/entities/" :style="aStyles">
+ Wikidata dump</a> for 23/08/22. About 350,000 events were extracted.
</li>
<li>
- Images were cropped using
- <a href="https://github.com/jwagner/smartcrop.js" :style="aStyles">Smartcrop</a>
+ Event descriptions, images, and popularity were obtained via the
+ <a href="https://dumps.wikimedia.org/enwiki/" :style="aStyles">Wikimedia dump</a>
+ for 01/05/22.
+ Wikipedia page content is available under
+ <a href="https://creativecommons.org/licenses/by-sa/3.0/" :style="aStyles"
+ >CC BY-SA 3.0</a>.
+ For the source of a specific event's image, look in its info pane.
</li>
</ul>
+ <br/>
+ <div>
+ <h1 :class="contentH1Classes">Other Credits</h1>
+ <ul :class="contentULClasses">
+ <li>
+ The UI was mostly coded in
+ <a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
+ and built wth <a href="https://vuejs.org/" :style="aStyles">Vue</a>,
+ <a href="https://vitejs.dev/" :style="aStyles">Vite</a> &amp;
+ <a href="https://pinia.vuejs.org/" :style="aStyles">Pinia</a>
+ </li>
+ <li>
+ Tree data was processed using
+ <a href="https://www.python.org/" :style="aStyles">Python</a>,
+ and stored using
+ <a href="https://www.sqlite.org/index.html" :style="aStyles">Sqlite</a>
+ </li>
+ <li>
+ Styling was enhanced using
+ <a href="https://tailwindcss.com/" :style="aStyles">Tailwind</a>
+ </li>
+ <li>
+ The font is <a href="https://design.ubuntu.com/font/" :style="aStyles">Ubuntu Font</a>,
+ licensed under
+ <a href="https://ubuntu.com/legal/font-licence"
+ :style="aStyles">Ubuntu font licence</a>
+ </li>
+ <li>Icons were used from
+ <a href="https://feathericons.com/" :style="aStyles">Feathericons</a>
+ and <a href="https://ionic.io/ionicons" :style="aStyles">Ionicons</a>,
+ both under MIT License
+ </li>
+ <li>
+ Images were cropped using
+ <a href="https://github.com/jwagner/smartcrop.js" :style="aStyles">Smartcrop</a>
+ </li>
+ </ul>
+ </div>
</div>
</template>
</s-collapsible>
- <!-- FAQs -->
<s-collapsible :class="scClasses">
<template #summary="slotProps">
<div :class="scSummaryClasses">
@@ -82,31 +221,103 @@
</template>
<template #content>
<div :class="contentClasses">
- <h1 class="text-lg font-bold">Test Question</h1>
- <p>Test Answer.</p>
+ <h1 :class="contentH1Classes">How accurate is the information?</h1>
+ <div class="space-y-3">
+ <p>
+ Event data was extracted by looking for objects in the Wikidata knowledge graph that
+ have certain properties. These are not always consistent or accurate.
+ For example, an event's date might be encoded using a 'start time',
+ 'temporal range start', or 'earliest date' property, without a clear pattern.
+ </p>
+ <p>
+ Also, some properties have unclear definitions. For example, in looking for
+ creative works, a 'genre' property was used. But as it turns out, sometimes
+ fictional characters or places will also have that property, which can
+ cause unexpected results (like having Hogwarts displayed as a work).
+ </p>
+ <p>
+ As for the short descriptions, they were extracted from marked-up Wikipedia content
+ using imprecise heuristics. Many have leftover fragments of code, or incomplete
+ sentences.
+ </p>
+ </div>
+ <br/>
+ <h1 :class="contentH1Classes">
+ In the info boxes, what do terms like "1st century BC" and "O.S." mean?</h1>
+ <div class="space-y-3">
+ <p>
+ Each event can have both a start and end date, both of which may be imprecise.
+ For example, the start may range between years 1901 and 2000, which corresponds to the
+ 20th century. Similarly, the 1st century BC represents years 99 BC to 1 BC.
+ There is no year 0 BC, because 1 BC is directly followed by 1 AD.
+ </p>
+ <p>
+ Decades are like centuries, and have ranges like 1701 to 1710, generally ranging from
+ a year ending with one up to a year ending with zero. Other scales are
+ different. "2nd millenium" means 1000 to 1999. And "About 2 million years ago" means
+ 2,000,000 BC to 1,000,001 BC.
+ </p>
+ <p>
+ For dates like "1st Jan 1600 (O.S.)", the "O.S." means
+ <a href="https://en.wikipedia.org/wiki/Old_Style_and_New_Style_dates" :style="aStyles">
+ Old Style</a>, and the date is
+ in the Julian Calendar (as opposed to the Gregorian Calendar). These tend to
+ appear for events in certain countries between 1550 and 1950.
+ </p>
+ </div>
<br/>
- <h1 class="text-lg font-bold">Test Question</h1>
- <p>Test Answer.</p>
+ <h1 :class="contentH1Classes">Why am I sometimes unable to zoom into a year?</h1>
+ <p>
+ Calendar dates are only valid starting from the year {{-MIN_CAL_YEAR}} BC.
+ This is because
+ <a href="https://en.wikipedia.org/wiki/Julian_day" :style="aStyles">Julian day numbers</a>
+ are used to encode calendar dates.
+ Before this point, zooming into sub-yearly scales is disabled.
+ </p>
+ <br/>
+ <h1 :class="contentH1Classes">Why are there so many celebrities?</h1>
+ <p>
+ Events are chosen for display by popularity, which is determined using Wikipedia
+ page view counts. Celebrities tend to rank highly with this metric, regardless
+ of historical importance. This might be adjusted in future.
+ </p>
+ <br/>
+ <h1 :class="contentH1Classes">Why do some people have their faces clipped out?</h1>
+ <p>
+ Images from Wikipedia were cropped into squares semi-automatically. This sometimes
+ ends badly, with the person's chest or headwear being placed in center focus.
+ </p>
</div>
</template>
</s-collapsible>
</div>
+ <p class="text-right text-xs md:text-sm text-stone-500 pr-2 pb-2">
+ Last updated 22/01/23
+ </p>
</div>
</div>
</template>
<script setup lang="ts">
import {ref, computed} from 'vue';
+
import SButton from './SButton.vue';
import SCollapsible from './SCollapsible.vue';
import CloseIcon from './icon/CloseIcon.vue';
import DownIcon from './icon/DownIcon.vue';
+
+import {MIN_DATE, MAX_DATE, MIN_CAL_YEAR, dateToDisplayStr} from '../lib';
import {useStore} from '../store';
const rootRef = ref(null as HTMLDivElement | null)
const closeRef = ref(null as typeof CloseIcon | null);
const store = useStore();
+const touchDevice = computed(() => store.touchDevice)
+
+const props = defineProps({
+ vert: {type: Boolean, required: true},
+});
const emit = defineEmits(['close']);
@@ -125,6 +336,10 @@ const scSummaryClasses = 'relative text-center p-1 bg-stone-300 hover:brightness
const downIconClasses = 'absolute w-6 h-6 my-auto mx-1 transition-transform duration-300';
const downIconExpandedClasses = computed(() => downIconClasses + ' -rotate-90');
const contentClasses = 'py-2 px-2 text-sm md:text-base';
+const contentH1Classes = 'text-lg font-bold mb-2';
+const contentH2Classes = 'font-bold';
+const contentULClasses = 'list-disc pl-4'
+const contentInnerULClasses = 'list-[circle] pl-4'
const styles = computed(() => ({
backgroundColor: store.color.bgAlt,
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index bc4e980..e30316d 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -64,7 +64,7 @@
<div class="grid grid-cols-[100px_minmax(0,1fr)_30px] gap-1 w-fit mx-auto px-2 sm:px-4">
<!-- Row 1 -->
<label for="scrollRatio" @click="onResetOne('scrollRatio')" :class="rLabelClasses">
- Scroll ratio
+ Pan ratio
</label>
<input type="range" min="0.1" max="0.8" step="0.1" v-model.number="store.scrollRatio"
@change="onSettingChg('scrollRatio')" name="scrollRatio"/>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 26f0c8d..d935415 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -866,19 +866,20 @@ const tickToCount = computed((): Map<number, number> => {
// ========== For timeline position label ==========
const timelinePosStr = computed((): string => {
+ const moreSym = ' \u27A4';
const date1 = startIsFirstVisible.value ? startDate.value : firstDate.value;
const date2 = endIsLastVisible.value ? endDate.value : lastDate.value;
if (minorScale.value == DAY_SCALE){
const multiMonth = date1.month != date2.month;
- return `${dateToYearStr(date1)} ${MONTH_NAMES[date1.month - 1]}${multiMonth ? ' >' : ''}`;
+ return `${dateToYearStr(date1)} ${MONTH_NAMES[date1.month - 1]}${multiMonth ? moreSym : ''}`;
} else if (minorScale.value == MONTH_SCALE){
const multiYear = date1.year != date2.year;
- return `${dateToYearStr(date1)}${multiYear ? ' >' : ''}`;
+ return `${dateToYearStr(date1)}${multiYear ? moreSym : ''}`;
} else {
if (date1.year > 0){
return `${dateToYearStr(date1)} - ${dateToYearStr(date2)}`;
} else {
- return `${dateToYearStr(date1)} >`;
+ return dateToYearStr(date1) + moreSym;
}
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-24 22:46:05 +0000