this post was submitted on 21 Oct 2023
13 points (93.3% liked)

Web Development

3454 readers
1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS
snowe
erlingur
Ategon
13
Question: How to start with building a timeline interface (discuss.tchncs.de)
submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/webdev
5 comments fedilink hide all child comments
 

Hi,

I'm rather new to web development. For my local scouts troop I'm currently trying to build a webapp to show a big browsable timeline of the troops chronicles (We have many big folders of paper showing what the scouts did that year). I've already build the ground structure based on Django for the backend and vue for the frontend. And I can display the individual elements of the chronicles (Writings, articles, pictures; videos and audio for newer entries) in a list.

Now I want to create a component, that will display a horizontal timeline with the ability to move and zoom, showing elements depending on the zoom level with different level of detail. I want to make it easy to browse the timeline of over 70 years with entries per year (like 30 elements per year).

I already tried timeline-js, but it doesn't quite behave like I want it to be (zooming, different levels of detail,...). For me it seems, that it cannot really be customized enough to reach my goal (though I might be wrong about that).

Then I thought about building that timeline component myself, though I don't know where to start in building such a component (how to draw the timeline itself with its markings, how to draw the elements at the correct position,...)

Can you give me a hint/direction where I should look for a solution? Maybe you know a tutorial for a similar situation (creating your own complex UI components)?

Thanks in advance for your help! Currently I feel like I don't know enough to ask the correct question to a search engine for a solution.

you are viewing a single comment's thread
view the rest of the comments
[โ€“] [email protected] 1 points 1 year ago (1 children)

With TimelineJS I first tried with title-only entries. If you zoom out the entries get compresses along the time axis of course. Either they are overlapping, which looks bad and is not useful for the interaction, or you can let TimelineJS stack them. But then they stack higher and higher, overflowing the height of the timeline. A good vertical scrolling mechanism doesn't seem to be a feature (like seeing at what vertical postion you currently are).

I thought about, what I want to try. I want each entry represented by a bubble, connected to the timeline with a vertical line. The size of the bubble should change depending on how much space is available. Shrinking to a small point at minimum, growing to accomodate a small image and maybe a title (for that morphing to a rounded rectangle would be better).

Maybe this is possible with clever CSS styling of timelinejs. CSS is really a weak part for me

[โ€“] [email protected] 1 points 1 year ago

Your bubble idea could work and you will have to be comfortable with css, no way around it I guess.
I see vis.js have a lot of timeline examples you might be able to adapt to your need.