ToolScape is a web interface for browsing and watching tutorial videos. It features a storyboard video summary for faster scanning and interactive timeline for non-sequential watching.
Apache, PHP5, MySQL
Standard-compliant web browser with HTML5 and CSS3
archive
: old prototypes for reference.css
: all stylesheets.img
: all images and automatically-generated thumbnails for labels.js
: all Javascript code resides here. Third party libraries should be added to thelibs
directory.video
: all video files and their Youtube metadata files (.info.json). Subdirectories:ff
: all Fast Forward summariessc
: all Scene Clip summariesscripts
: scripts for downloading and processing videosthumbs
: thumbnail sprites for the thumbnail preview feature in the video player
Media files are not in the repository, so you need to download them.
- thumbnails (extract to
[toolscape_root]/img/thumbnails
) - video (extract to
[toolscape_root]/video
)
- Update
conn.php
with correct MySQL connection information. - Set up an empty MySQL database called
video_tutorial
, or name you specified inconn.php
. - Then import tables and records from
vt.sql
. This file assumesvideo_tutorial
to be the database name. Be careful if you want to use another name for database.- command line: TBD
- phpmyadmin: Go to
import
, selectvt.sql
, and done.
Make sure img/thumbnails/
directory is accessible by the user PHP runs in.
You can verify the username in PHP by adding echo exec('whoami');
to a blank PHP file.
ToolScape requires ffmpeg for video processing and thumbnail generation. Make sure the ffmpeg path is correctly configured.
- Verify you machine's ffmpeg path by running
which ffmpeg
from command line. - Then, modify
conn.php
to reflect the correct path.
Refer to ffmpeg installation instructions if you need to compile ffmpeg on Linux.
Open index.php
and enter admin
as your username.
After logging in, skip ahead to Part 2-1
or set URL to list.php?part=2&step=list&cond=A&tid=4&iid=1
.
Change tid
and iid
parameters for different tasks and interfaces, respectively.
tid
values and task descriptions
- Motion Blur
- Background Removal
- Lomo Effect
- Retro Effect
- Photo to Sketch
- Teeth Whitening
iid
values and interface descriptions
- ToolScape
- YouTube
- Text only + step-by-step
From the ToolScape's list.php
page, click on the (label)
link associated with each video.