Commit 4d80be46 authored by Michael Murtaugh's avatar Michael Murtaugh
Browse files

missing files, annotation and virtual clip

parent a608474c
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Active Archives: Annotation</title>
<!-- jquery -->
<script src="../lib/jquery/jquery-1.7.1.min.js"></script>
<script src="../lib/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="../lib/jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<!-- syntaxhighlighter -->
<script src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<link href="../lib/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
<link href="../lib/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
<!-- AA -->
<script src="../source/jquery.ui.autoscrollable.js"></script>
<script src="../source/jquery.datetimecode.js"></script>
<script src="../source/jquery.playable.js"></script>
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.timeline.js"></script>
<style>
.annotation {
font-size: 11px;
border: 1px solid black;
width: 320px;
height: 360px;
overflow: auto;
margin-bottom: 10px;
}
.title {
border-top: 1px dotted black;
padding: 4px;
}
.section {
border-top: 1px dotted black;
padding: 4px;
}
.active {
background: pink;
}
td {
vertical-align: top;
}
.timecodes {
font-family: monospace;
font-size: 10px;
color: gray;
cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
SyntaxHighlighter.all();
$(".annotation").autoscrollable();
// Generic Playset code
$(".playset").each(function () {
var context = this;
// Activate the play button
$(".play", context).click(function () {
// console.log("click");
$(".playable", context).playable("toggle");
});
// Respond to events to update interface (optional)
$(".playable", context).bind('play', function () {
$(".play", context).text("pause");
}).bind('pause', function () {
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = $(this).playable("duration");
$(".duration", context).text($.timecode_unparse(d, false))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text($.timecode_unparse(ct, false))
});
});
var timeline_opts = {
currentTime: function (elt) {
return $(elt).playable("currentTime");
},
show: function (elt) {
$(elt).addClass("active");
$(elt).closest(".annotation").autoscrollable("scrollto", elt);
},
hide: function (elt) {
$(elt).removeClass("active");
}
};
/* Generic timeline/section code */
$("[data-start]").each(function () {
function playtarget(elt) {
var about = $(elt).closest("[about]").attr("about");
if (about) {
return $('.playable[data-src="'+about+'"]');
}
}
function playstart (elt) {
return $.timecode_parse($(elt).attr("data-start"));
}
function playend (elt) {
return $.timecode_parse($(elt).attr("data-end"));
}
var target = playtarget(this) || $("#master");
// ensure timeline inited
if (!$(target).data("timeline")) { $(target).timeline(timeline_opts) };
var start = playstart(this), end = playend(this);
target.timeline("add", this, {start: start, end: end});
// ADD IN VISUAL TIMECODE
var tc = $("<div></div>").addClass("timecodes");
tc.html($.timecode_unparse(start) + " &rarr; " + $.timecode_unparse(end));
tc.click(function () {
target.playable("currentTime", start).playable("play");
});
tc.prependTo(this);
});
});
</script>
</head>
<body>
<h1><a href="index.html">demos</a> / Annotation</h2>
<p>
Usage scenario: Playing the video drives the synchonized display of timed annotations (sections). Sections are navigational elements in that clicking (on the timecode) seeks to the matching start time in the video.
</p>
<table>
<tr>
<td>
<div class="playset">
<div class="playable" data-type="video/ogg" data-src="http://video.constantvzw.org/vj12/Michael_Moss.ogv"></div>
<div>Video: Michael Moss (<span class="currenttime"></span>/<span class="duration"></span>)</div>
<button class="play">play</button>
</div>
</td>
<td>
<div class="annotation" about="http://video.constantvzw.org/vj12/Michael_Moss.ogv">
<div style="border-bottom: 2px solid black">about="http://video.constantvzw.org/vj12/Michael_Moss.ogv"</div>
<div class="title" data-start="01:27" data-end="01:54">
stats - information as much as the math that goes along with it
</div>
<div class="title" data-start="01:54" data-end="02:10">
migration of information broadly conceived from analog to digital
</div>
<div class="title" data-start="02:10" data-end="02:30">
The poem is called the Walrus and the carpenter Lewis Carroll
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/LewisCarrollSelfPhoto.jpg/240px-LewisCarrollSelfPhoto.jpg" />
</div>
<div class="title" data-start="02:30" data-end="02:36">
<a href="http://en.wikipedia.org/wiki/Lewis_Carrol">Charles Lutwidge Dodgson</a> is a mathematician
</div>
<div class="title" data-start="02:36" data-end="03:20">
Part of the nonsense that he writes destabilize the reader from their comfortable world of reference
</div>
<div class="title" data-start="03:20" data-end="03:53">
<img src="http://www.jabberwocky.com/carroll/pics/glass20-small.gif" />
<pre>
The sun was shining on the sea,
Shining with all his might:
He did his very best to make
The billows smooth and bright--
And this was odd, because it was
The middle of the night.
The moon was shining sulkily,
Because she thought the sun
Had got no business to be there
After the day was done--
"It's very rude of him," she said,
"To come and spoil the fun!"
</pre>
</div>
<div class="title" data-start="03:53" data-end="04:35">
nonsense needs to have reference in the authentic
</div>
<div class="title" data-start="04:35" data-end="05:08">
Difference between inauthentic and authentic
</div>
<div class="title" data-start="05:08" data-end="05:43">
authenticity comes from a discipline called diplomatique 17th century. Much discussion about authenticity of the titles of monastic houses.
</div>
<div class="title" data-start="05:43" data-end="05:58">
<pre>
The sea was wet as wet could be,
The sands were dry as dry.
You could not see a cloud, because
No cloud was in the sky:
No birds were flying overhead--
There were no birds to fly.
</pre>
</div>
<div class="title" data-start="05:58" data-end="06:51">
authenticity is inevitably a retrospective activity
</div>
<div class="title" data-start="06:51" data-end="08:27">
authentication depends on absences; missing tokens. There is no day, no signature, no address that doesn't make a document inauthentic.
but absence can have been always been there; original document may miss signature.
</div>
<div class="title" data-start="08:27" data-end="09:00">
<pre>
The Walrus and the Carpenter
Were walking close at hand;
They wept like anything to see
Such quantities of sand:
"If this were only cleared away,"
They said, "it would be grand!"
"If seven maids with seven mops
Swept it for half a year.
Do you suppose," the Walrus said,
"That they could get it clear?"
"I doubt it," said the Carpenter,
And shed a bitter tear.
</pre>
</div>
<div class="title" data-start="09:00" data-end="09:28">
such quantities of sand - vast amount of granularity and stand alone objects in the digital world.
</div>
<div class="title" data-start="09:28" data-end="10:28">
financial records and granularity
in digital financial systems - no hierarchy of record keeping - no hierarchies of information - balance sheet made of quantities of sand - how many cans of beer are sold in the different shops I own. All that exist in the system are quantities of sand.
Here is an extra note
</div>
<div class="title" data-start="10:28" data-end="10:47">
Very different from analog financial systems 15th century, Venice and Genoa
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Pacioli.jpg/300px-Pacioli.jpg" />
Analog financial systems were systematized by a Franciscan friar Pacioli.
</div>
<div class="title" data-start="10:47" data-end="11:06">
He wrote the book _De Divina Proportione_ (About the divine proportions).
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Fra_Luca_Pacioli_Letter_M_1509.png/250px-Fra_Luca_Pacioli_Letter_M_1509.png" />
</div>
<div class="title" data-start="11:06" data-end="13:21">
His legacy
-> double entry book keeping (refer to aggregations of other books)
-> Proportionality in the media
Those constructs have disappeared in the digital age and we are left with quantities of sand.
Can we capture the metadata that goes with these grains of sand? And have the tool to make aggregation/disaggregation?
grain of sand = digital object -> the bit stream has identity of reference even if its identity changes
every time it is opened or closed.
[[Messiness]]
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Active Archives: Virtual timeline</title>
<!-- jquery -->
<script src="../lib/jquery/jquery-1.7.1.min.js"></script>
<script src="../lib/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="../lib/jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<!-- syntaxhighlighter -->
<script src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<link href="../lib/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
<link href="../lib/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
<!-- AA -->
<script src="../source/jquery.ui.autoscrollable.js"></script>
<script src="../source/jquery.datetimecode.js"></script>
<script src="../source/jquery.playable.js"></script>
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.timeline.js"></script>
<style>
.annotation {
font-size: 11px;
border: 1px solid black;
width: 320px;
height: 360px;
overflow: auto;
margin-bottom: 10px;
}
.title {
border-top: 1px dotted black;
padding: 4px;
}
.section {
border-top: 1px dotted black;
padding: 4px;
}
.active {
background: pink;
}
td {
vertical-align: top;
}
.timecodes {
font-family: monospace;
font-size: 10px;
color: gray;
cursor: pointer;
}
</style>
<script>
$(document).ready(function () {
SyntaxHighlighter.all();
$(".annotation").autoscrollable();
// Generic Playset code
$(".playset").each(function () {
var context = this;
// Activate the play button
$(".play", context).click(function () {
// console.log("click");
$(".playable", context).playable("toggle");
});
// Respond to events to update interface (optional)
$(".playable", context).bind('play', function () {
$(".play", context).text("pause");
}).bind('pause', function () {
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = $(this).playable("duration");
$(".duration", context).text($.timecode_unparse(d, false))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text($.timecode_unparse(ct, false))
});
});
var timeline_opts = {
currentTime: function (elt) {
return $(elt).playable("currentTime");
},
show: function (elt) {
$(elt).addClass("active");
$(elt).closest(".annotation").autoscrollable("scrollto", elt);
},
hide: function (elt) {
$(elt).removeClass("active");
}
};
/* Generic timeline/section code */
function playtarget(elt) {
var about = $(elt).closest("[about]").attr("about");
if (about) {
return $('.playable[data-src="'+about+'"]');
}
}
function playstart (elt) {
return $.timecode_parse($(elt).attr("data-start"));
}
function playend (elt) {
return $.timecode_parse($(elt).attr("data-end"));
}
$("[data-start]").each(function () {
// console.log("title", this);
var target = playtarget(this) || $("#master");
// ensure timeline inited
if (!$(target).data("timeline")) { $(target).timeline(timeline_opts) };
var start = playstart(this), end = playend(this);
target.timeline("add", this, {start: start, end: end});
// ADD IN VISUAL TIMECODE
var tc = $("<div></div>").addClass("timecodes");
tc.html($.timecode_unparse(start) + " &rarr; " + $.timecode_unparse(end));
// MAKE TIME CODES CLICKABLE
var section = this;
tc.click(function () {
// ... code for FOLLOW MODE... JUMP TARGET TO TIME
target.playable("currentTime", start).playable("play");
// ... but FOR PLAYLIST, something different, tell the player to jump to this element
// playlist_play(section);
});
tc.prependTo(this);
});
});
</script>
</head>
<body>
<h1><a href="index.html">demos</a> / Virtual timeline, simple <a href="virtual02.html">&gt;</a></h2>
<p>
Usage scenario:
</p>
<table>
<tr>
<td>
<div class="playset">
<div id="master" class="playable" data-type="void"></div>
<div>Virtual clip (<span class="currenttime"></span>/<span class="duration"></span>)</div>
<button class="play">play</button>
</div>
</td>
<td>
<div class="annotation">
<div class="title" data-start="00:00" data-end="00:10">
Introduction
</div>
<div class="title" data-start="00:05" data-end="00:20">
Some timed text.
</div>
<div class="title" data-start="00:15" data-end="00:25">
And more.
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Active Archives: Virtual timeline</title>
<!-- jquery -->
<script src="../lib/jquery/jquery-1.7.1.min.js"></script>
<script src="../lib/jquery/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="../lib/jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<!-- syntaxhighlighter -->
<script src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<link href="../lib/syntaxhighlighter/styles/shCore.css" rel="stylesheet" />
<link href="../lib/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" />
<!-- AA -->
<script src="../source/jquery.ui.autoscrollable.js"></script>
<script src="../source/jquery.datetimecode.js"></script>
<script src="../source/jquery.playable.js"></script>
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.timeline.js"></script>
<style>
.annotation {
font-size: 11px;
border: 1px solid black;
width: 320px;
height: 360px;
overflow: auto;
margin-bottom: 10px;
}
.title {
border-top: 1px dotted black;
padding: 4px;
}
.section {
border-top: 1px dotted black;
padding: 4px;
}
.active {
background: pink;
}
td {
vertical-align: top;
}
.timecodes {
font-family: monospace;
font-size: 10px;
color: gray;
cursor: pointer;
}
#timelineslider {
margin: 20px;
}
</style>
<script>
$(document).ready(function () {
SyntaxHighlighter.all();
$(".annotation").autoscrollable();
// Generic Playset code
$(".playset").each(function () {
var context = this;
// Activate the play button
$(".play", context).click(function () {
// console.log("click");
$(".playable", context).playable("toggle");
});
// Respond to events to update interface (optional)
$(".playable", context).bind('play', function () {
$(".play", context).text("pause");
}).bind('pause', function () {
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = $(this).playable("duration");
$(".duration", context).text($.timecode_unparse(d, false))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text($.timecode_unparse(ct, false))
});
});
// A timeline element is always (?) a playable ... if so, makes sense to make part of playable (plugin)
var timeline_opts = {
currentTime: function (elt) {
return $(elt).playable("currentTime");
},
show: function (elt) {
$(elt).addClass("active");
$(elt).closest(".annotation").autoscrollable("scrollto", elt);
// check for embedded playables
// call syncWith
var master = this;
$(this).playable("syncwith", $(".playable", elt), offset);
// $(".playable", elt).playable("syncWith", this); // need to ensure that this gets bound to the timeline
// sense of slave to the master...
},
hide: function (elt) {
$(elt).removeClass("active");
$(this).playable("unsyncwith", $(".playable", elt));
}
};
/* Generic timeline/section code */
function playtarget(elt) {
var about = $(elt).closest("[about]").attr("about");
if (about) {
return $('.playable[data-src="'+about+'"]');
}
}
function playstart (elt) {
return $.timecode_parse($(elt).attr("data-start"));
}
function playend (elt) {
return $.timecode_parse($(elt).attr("data-end"));
}
$("[data-start]").each(function () {
// console.log("title", this);
var target = playtarget(this) || $("#master");
// ensure timeline inited
if (!$(target).data("timeline")) { $(target).timeline(timeline_opts) };
var start = playstart(this), end = playend(this);
target.timeline("add", this, {start: start, end: end});
// ADD IN VISUAL TIMECODE
var tc = $("<div></div>").addClass("timecodes");
tc.html($.timecode_unparse(start) + " &rarr; " + $.timecode_unparse(end));
// MAKE TIME CODES CLICKABLE
var section = this;
tc.click(function () {
// ... code for FOLLOW MODE... JUMP TARGET TO TIME
target.playable("currentTime", start).playable("play");
// ... but FOR PLAYLIST, something different, tell the player to jump to this element
// playlist_play(section);
});
tc.prependTo(this);
});
/* Master Timeline: Slider Control */
var slider_playing;
$('#timelineslider').slider({
max: 100000,
start: function () {
slider_playing = $("#master").playable("playing");
// console.log("slider_playing", slider_playing);
$("#master").playable("pause");
},