Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

pentimento video lectures web interface

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

pentimento

pentimento video lectures web interface

setup

Files

Root folder must contain all .js, .css, and .html files
Images must be in root/images subfolder
Lecture and audio files (.lec, .mp3, .ogg) must be in root/lectures subfolder
.lec and .mp3/.ogg files should have the same filename (lecture1.lec, lecture1.mp3, lecture1.ogg)

HTML

index.html (or desired index page):

  • Include jQuery (js) and generator.js
  • Insert <span class=".lec">NAME</span> for each lecture
  • generator.js will generate the links

lecture.html - similar to youtube.com/watch:

  • Include jQuery (js) and jQueryUI (js and css)
  • Define a div with class name "pentimento"
  • Include videolec.js after div.pentimento
  • Every included lecture will use this HTML page

Structures

URL

RootPage.com/lecture.html?n=FILENAME&t=TIMESTAMP&end=ENDTIME&tm=TRANSFORM

  • filename: name of the lecture file (lecture1 for lecture1.lec/.mp3/.ogg)
  • timestamp (optional): time to seek to on load
  • endtime (optional, not used yet): specify end point of lecture segment, if only a specific part needs to be watched
  • transform (optional, only present if in freePosition): [tx,ty,tz]
    • tx: x-translation
    • ty: y-translation
    • tz: zoom

More parameters can be easily added in videolec.js

.lec Files:

{

  • durationInSeconds: number,
  • height: number,
  • width: number,
  • cameraTransforms: [{

    • m11: number,
    • m12: number,
    • m21: number,
    • m22: number,
    • time: number,
    • tx: number,
    • ty: number

    }, {...}],

  • pageFlips: [{

    • page: number,
    • time: number

    }, {...}],

  • visuals: [{

    • type: string,
    • doesItGetDeleted: boolean,
    • tDeletion: number,
    • tEndEdit: number,
    • tMin: number,
    • properties: [{
      • type: string,
      • alpha: number,
      • alphaFill: number,
      • blue: number,
      • blueFill: number,
      • green: number,
      • greenFill: number,
      • red: number,
      • redFill: number,
      • thickness: number,
      • time: number

    }, {...}],

    • vertices: [{
      • x: number,
      • y: number,
      • t: number,
      • pressure: number

    }, {...}]

    }]

}

HTML (generated within div.pentimento)

link back to index page
div.lecture

  • canvas.video - main video window
  • div.onScreenStatus - contains fading play/pause indicator icon
  • div.captions - CURRENTLY UNUSED, can hold sutitles
  • div.controls - bottom control bar
    • div#slider - video scrubber
      • div.tick - green bar showing furthest point watched
    • div.buttons
      • button.start - play/pause
      • button.slowDown - decreases playback speed
      • button.speedUp - increases playback speed
      • button.help - brings up about dialog
    • div#totalTime - current time / total time
    • button.volume - toggles mute
    • div.volumeSlider - volume control
    • audio.audio - contains sources for lecture audio
    • div.speedDisplay - displays playback speed if not 1x
  • div.zoomRect - indicator box for shift-drag to zoom in on region
  • div.sideButtons - side control bar
    • button.transBtns#zoomIn - all .transBtns styled similarly
    • button.transBtns#revertPos - re-find and follow lecture camera
    • button.transBtns#seeAll - zooms out maximally to view everything
    • button.transBtns#zoomOut
    • button.transBtns#fullscreen
    • button.transBtns#screenshotURL - opens screenshot in new tab
    • button.transBtns#timeStampURL - toggles link popup
    • div.URLinfo - popup containing state-saved URL and embedding code
      • button#linkbutton - displays state-saved link in text box
      • button#embedbutton - displays iframe embed code in text box
      • textarea.URLs - text box

Player Behavior

User Interactions

  • Click - seeks nearest point within minDistance, goes to point in lecture
  • Double-Click - zooms in/out on click point
  • Drag - pan around
    • Shift-Drag - zoom in on selected region
  • Scroll - pan around
    • Shift-Scroll - zoom in/out on center of screen

Playback

  • All strokes rendered for every frame
    • Each stroke is 1 polygon, properties determined by data
    • Strokes beyond current time but before furthest reached point are gray
  • Animation uses quintic easing
  • Camera transform linearly interpolated from timestamped data transforms
  • Lower bound on size: 400px wide
  • Saves current timestamp and transform in localStorage

Data Preprocessing

  • Flips y coordinates
  • Obtains extrema for bounding transforms
  • Translates colors into RGB strings
  • Simplifies extremely close points
  • Amplifies low-pressure beginning/end of strokes
  • Straightens almost-linear strokes, simplifies again
  • Inserts break property for points that break the calligraphy 45-degree line
Something went wrong with that request. Please try again.