Skip to content

Calendar and timeline: first ideas and implementation

Sylvain Willy edited this page Oct 9, 2021 · 1 revision

This page presents the first ideas and the implementation of the calendar app featuring the "Week" and "Timeline" views.

The main idea is to allow the infinitime firmware to be able to display events for the next 7 days when synchronized with a device capable of it. For the proof of concept we implemented the functionality with a device running a fork of the Android application Gadgetbridge.

UI

To presents the events, we thought of two distinct use cases.

Timetable: Overview of the week

The goal of this view would be to easily and quickly have an overview of the coming week or be able to check availability of a time slot.

The first draft of UI suggest a timetable with a simple busy/available code. The table would be initialy empty and a block would be drawn to indicate the time slot contains an event. This can be later extended with different styles or colors, by example: to represent a category or event.

A very ugly attempt with flashy colors for debugging can be seen in the following picture. Sorry for the inversion between the "day" and "hours" axis. I do not have a better picture for now since the project has been on standby for months. timetable_debug

Timeline: Event details (and more?)

The goal of this view is to allow the user to browse events and see their details. To that end, the first draft suggest a simple "scroll through all" kind of navigation.

The current proof-of-concept implementation displays a title and a time range. event_info

Here, you can see paper mockups of something more complete. On the left, the app could indicate the day of the week. Of course, the date, time, title and description of the event. On the right, the user could see the number of events saved in the watch (kind of a scrollbar). event_details_mockup

Extension

The timeline is a perfect place to display anything calendar related. The Pebble smartwatch was(is) using a view similar to this proposal to display the weather, alarms and more. See this article from Hardwarezone Pebble announces new Time smartwatch and Timeline interface.

Navigation

The first draft allows the user to navigate the views by swiping. It features a few with a help message. The stats screen now represents the timetable. This is an old picture... help

Idea: The navigation could be also seen as tree. While the user swipes (up/down) through the events, swapping to the right would go to more details for the current event then swiping left would go back to the event list.

Implementation

WARNING

This documents an implementation from March 2021. It is certainly not up to date with the current mechanisms of Infinitime or Gadgetbridge.

The logic is split in four :

  • Gadgetbridge manages the current states of the watch and instructs to add or remove events.
  • An Infinitime BLE service reacts to those requests in the background
  • An "event manager" stores the events (interface between the BLE service and the timeline app)
  • Timeline app: An infinitime app that queries the event manager and displays the UI described above

Synchronization

Gadgetbridge already has the feature for synchronizing calendar events. It just takes to implement to methods designed to handle insertion and deletion of events. Gadgetbridge remembers the state of the watch and manages everything.

Gadgetbridge

To enable Gadgetbridge to use the correct BLE characteristic (think of it as a register or variable if you don't know about BLE), we need to specify their IDs. This was done app/src/main/java/nodomain/freeyourgadget/gadgetbridge/devices/pinetime/PineTimeJFConstants.java#L39-L42

Then, we implement the two methods onAddCalendarEvent and onDeleteCalendarEvent in app/src/main/java/nodomain/freeyourgadget/gadgetbridge/service/devices/pinetime/PineTimeJFSupport.java#L414-L457

Infinitime

First, we need to create the calendar service. The service registers it's CalCallback function to the BLE service for the two BLE characteristics IDs (the ones in the Gadgetbridge file PineTimeJFConstants.java, see above). The CalCallback will then call the OnCommand method of the service which handle the command: either add or delete an event in the calender manager (see below).

Then, the calendar manager allows the service to save and delete events and it allows the timeline app to iterate through the events.

Then, the service and manager must be integrated to the system :

Timeline/Calendar app

It's a simple Infinitime app without big logic. All it does is display the events from the calendar manager.