mcpanic / pentimento

pentimento video lectures web interface

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