1 / 6

Linear Calendar

Slides prepared by Ben Pitts. November 2013. Linear Calendar. Ben Pitts Semester Project Android App Development Computer Science Dept , ODU. Linear Calendar Overview. Far Weekly Hourly. Making an interactive timeline Clock or calendar

ellie
Download Presentation

Linear Calendar

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Slides prepared by Ben Pitts November2013 Linear Calendar Ben Pitts Semester Project Android App Development Computer Science Dept, ODU

  2. Linear Calendar Overview Far Weekly Hourly Making 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

  3. Linear Calendar Overview Years, months shown Key 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 • SurfaceViewvs 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?

More Related