1

Linear Calendar

Ben Pitts

Semester ProjectAndroid App DevelopmentComputer Science Dept, ODU

November 2013

Slides prepared by Ben Pitts

2

Linear Calendar OverviewMaking an interactive timeline• Clock or calendar• Zoom-sensitive context

▫ Far: Events collapse into series▫ Weekly: Events fall vertically beneath days▫ Hourly: Events shown on their marks

• Events saved to cloud▫ Phone’s Calendar▫ Google Calendar

• Can be extended▫ Show photos on timeline▫ Facebook photos, events▫ Emails, SMS, IMs▫ Loose annotations, virtual

whiteboard▫ Live wallpaper▫ Lockscreen

Far W

eekly

Hou

rly

3

Linear Calendar Overview

Years, months shownKey dates• Birthdays• Anniversaries• Anchor dates• Major events

only• Series collapsed

Far view Weekly view Hourly view

• Weeks, days shown

• All events shown• Events vertical

beneath days

• Hours shown• Minutes, seconds

shown dependent on scale

• Events horizontal beneath the ruler at their start/end times

4

Progress / Challenges•Challenges

▫SurfaceView vs Canvas Canvas is good enough for a prototype

▫Tracking multiple fingers reliably Must store pointer IDs Handle 1st finger up with 2nd down, avoid jumping Disregard inputs too close to each other Don’t let your time turn inside out

▫Multitouch scale algorithm Converting pixels to milliseconds Scaling the ruler’s left and right based on touch

movement in pixels ‘Correct’ multitouch – Content is anchored to your

fingertips and moves intuitively in response to input.

5

Progress / Challenges• Progress:

▫ View class▫ Ruler display: minutes/seconds

Position determined by date (in milliseconds since epoch)▫ Single-touch scrolling

Ruler slides to match finger movement▫ Two-touch scrolling/scaling

Ruler slides and scales to match position of fingers• Todo:

▫ Ruler scale: hours/minutes, days/hours, further..▫ Scale states: far, daily, hourly

Variable content detail Smooth transition between scale states

▫ Event display beneath ruler Touch events to create/view/edit/remove events Detailed event data display levels (all data when zoomed in

close, just title or shape when far away)

6

Timeline View – Custom Control• Ruler drawn between ‘left’ and

‘right’ millisecond calendar values

• Single touch panning• left,right += Δx*span/width

• Two finger panning / scaling• ‘Time’ of finger 1,2 before move

=Y1,old = ms(x1,old)y2,old = ms(x2,old)ms(x) = x*span/width + left

• Slope of new ruler scale =m = Δyold/ Δxnew

= y2,old-y1,old / x2,new–x1,new

• left = y1,old – m*x1,new

• right = m(w – x1,new) + y1,old

• Fling – GestureDetector.onScroll?