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.

  • g6d3np81@kbin.social
    3·
    11 months ago

    Events?? TimelineJS3/blob/master/API.md
    Not sure what else is available if you want to build the component yourself though.

    but note that because TimelineJS’s primary use case is the embedded iframe, some of these methods have not been thoroughly tested.

    I think you can replicate most of its function with vue alone, skip all the tedious work with vueuse. Lazy-load with Intersection Observer. Basic events and refs for zoom level.

    I would start with putting all entries into a usable format. A CMS will help a lot. Maybe a JSON from your django server containing batch of entries, its timestamp, length, importance, tags, etc. Anything that is required to place entry on the timeline properly in vue.

    EDIT:
    Have you tried the official tutorial?

    • lucullus@discuss.tchncs.deOPEnglish
      1·
      11 months ago

      Thanks for your answer!

      Actually I already have the entries in a proper JSON format. I build my django API endpoints to get a batch of entries with all their details, including URLs for the actual media. Only the visualization is not how I would like it to be. I already have a visualization, that is list-like and looks good, but is not suitable for the mass of entries the endproduct will have to hold. Thus a zoomable timeline.

      I know about TImelineJS’s events, but that didn’t really help me. One of the problems I encountered was with stacking or not stacking the elements, when zooming out. Maybe I need to dig more in CSS to dynamically size each entry based on … what exactly? Zoom position? Collision with other entries? Somehow calculated density of entries? You see, I’m very much confused and overwhelmed. I don’t want to invest much time in a direction, that will not lead to the right place.

      I will have a look at the tutorial and vueuse. Previously I followed a 4h tutorial on youtube, which was about vue and django in conjunction. Maybe after that tutorial I understand, how I might build the timeline myself.