0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update sequences dialog

Browse source
This commit is contained in:
rolux 2012-06-16 12:00:42 +00:00
parent 7476db5b47
commit 982cafe1fb
1 changed files with 220 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

402
static/js/pandora/sequencesDialog.js
View file

@ -4,159 +4,30 @@
pandora.ui.sequencesDialog = function() { pandora.ui.sequencesDialog = function() {
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), var dialogSize = {
dialogWidth = Math.round(window.innerWidth * 0.9), height: Math.round((window.innerHeight - 48) * 0.9),
width: Math.round(window.innerWidth * 0.9)
},
left = getLeft(),
fixedRatio = 16/9, fixedRatio = 16/9,
fps = 25, fps = 25,
item = pandora.getItemIdAndPosition(), item = pandora.getItemIdAndPosition(),
mode = pandora.user.ui.sequenceMode, itemWidth = 160,
sequence, sequence,
sidebarWidth = 160,
$item, $item,
$list, $list,
$tabPanel = Ox.TabPanel({ $innerPanel = Ox.SplitPanel({
content: function(mode) { elements: [
var $splitPanel = Ox.SplitPanel({ {element: Ox.Element(), size: itemWidth},
elements: [ {element: Ox.Element()}
{
element: Ox.Element(),
size: sidebarWidth
},
{
element: Ox.Element()
}
],
orientation: 'horizontal'
});
$dialog && $dialog.disableButton('open');
pandora.api.get({
id: item.id,
keys: ['director', 'duration', 'title', 'videoRatio']
}, function(result) {
Ox.extend(item, result.data);
pandora.api.getSequence({
id: item.id,
mode: mode,
position: item.position
}, function(result) {
// result.data: {hash, id, in, out}
sequence = Ox.extend({}, item, result.data);
$item = Ox.IconList({
fixedRatio: fixedRatio,
item: getItem,
/*
items: [item],
*/
///*
items: function(data, callback) {
setTimeout(function() {
callback({
data: {items: data.keys ? [sequence] : 1},
status: {code: 200, text: 'ok'}
});
}, 250);
},
//*/
max: 0,
orientation: 'both',
size: 128,
sort: [{key: 'id', operator: '+'}],
unique: 'id'
});
$list = Ox.IconList({
fixedRatio: fixedRatio,
item: getItem,
items: function(data, callback) {
pandora.api.findSequences(Ox.extend(data, {
query: {
conditions: [
{key: 'id', value: sequence.id, operator: '!='},
{key: 'mode', value: mode, operator: '=='},
{key: 'hash', value: sequence.hash, operator: '=='}
],
operator: '&'
}
}), callback);
},
keys: ['director', 'id', 'title', 'videoRatio'],
max: 1,
orientation: 'both',
size: 128,
sort: Ox.clone(pandora.user.ui.sequenceSort),
unique: 'id'
})
.bindEvent({
init: function(data) {
$status.html(
Ox.formatNumber(data.items) + ' Clip'
+ (data.items == 1 ? '' : 's')
);
},
open: changeClip,
select: function(data) {
$dialog[
data.ids.length ? 'enableButton' : 'disableButton'
]('open');
},
pandora_sequencesort: function(data) {
Ox.print('SEQUENCESORT:', data)
$list.options({sort: data.value});
}
});
Ox.print('SEQUENCE::', sequence)
$clipButtons[sequence['in'] > 0 ? 'enableButton' : 'disableButton']('previous');
$clipButtons[sequence.out < item.duration ? 'enableButton' : 'disableButton']('next');
$splitPanel.replaceElement(0, $item);
$splitPanel.replaceElement(1, $list);
$image.attr({src: getImageURL(mode, sequence.hash)});
});
});
return $splitPanel;
},
tabs: [
{id: 'shape', title: 'Similar Shapes', selected: pandora.user.ui.sequenceMode == 'shape'},
{id: 'color', title: 'Similar Colors', selected: pandora.user.ui.sequenceMode == 'color'}
]
})
.bindEvent({
change: function(data) {
pandora.UI.set({sequenceMode: data.selected});
}
}),
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
disabled: true,
id: 'open',
title: 'Open Selected Clip',
width: 128
}).bindEvent({
click: openClip
}),
Ox.Button({
id: 'close',
title: 'Close',
width: 64
}).bindEvent({
click: function() {
$dialog.close();
}
})
], ],
closeButton: true, orientation: 'horizontal'
content: $tabPanel,
height: dialogHeight,
keys: {escape: 'close'},
maximizeButton: true,
padding: 0,
removeOnClose: true,
title: 'Similar Clips',
width: dialogWidth
}), }),
$toolbar = $tabPanel.children('.OxBar'), $toolbar = Ox.Bar({size: 24}),
$clipButtons = Ox.ButtonGroup({ $clipButtons = Ox.ButtonGroup({
buttons: [ buttons: [
@ -170,12 +41,35 @@ pandora.ui.sequencesDialog = function() {
click: function(data) { click: function(data) {
item.position = data.id == 'previous' item.position = data.id == 'previous'
? sequence['in'] - 1 / fps : sequence.out; ? sequence['in'] - 1 / fps : sequence.out;
$status.html('Loading...'); $item = null;
$tabPanel.reloadPanel(); getClips();
} }
}) })
.appendTo($toolbar), .appendTo($toolbar),
$modeButtons = Ox.ButtonGroup({
buttons: [
{id: 'shape', title: 'Similar Shapes'},
{id: 'color', title: 'Similar Colors'}
],
selectable: true,
value: pandora.user.ui.sequenceMode
})
.bindEvent({
change: function(data) {
pandora.UI.set({sequenceMode: data.value});
getClips();
}
})
.css({
position: 'absolute',
left: left,
top: '4px',
width: '256px',
textAlign: 'center'
})
.appendTo($toolbar),
$orderButton = Ox.Button({ $orderButton = Ox.Button({
title: getTitle(), title: getTitle(),
tooltip: getTooltip(), tooltip: getTooltip(),
@ -218,6 +112,53 @@ pandora.ui.sequencesDialog = function() {
.css({float: 'right', margin: '4px 2px'}) .css({float: 'right', margin: '4px 2px'})
.appendTo($toolbar), .appendTo($toolbar),
$outerPanel = Ox.SplitPanel({
elements: [
{element: $toolbar, size: 24},
{element: $innerPanel}
],
orientation: 'vertical'
}),
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
disabled: true,
id: 'open',
title: 'Open Selected Clip',
width: 128
}).bindEvent({
click: openClip
}),
Ox.Button({
id: 'close',
title: 'Close',
width: 64
}).bindEvent({
click: function() {
$dialog.close();
}
})
],
closeButton: true,
content: $outerPanel,
height: dialogSize.height,
keys: {escape: 'close'},
maximizeButton: true,
padding: 0,
removeOnClose: true,
title: 'Similar Clips',
width: dialogSize.width
})
.bindEvent({
resize: function(data) {
dialogSize = data;
left = getLeft();
$modeButtons.css({left: left});
$status.css({left: left});
}
}),
$statusbar = $dialog.children('.OxButtonsbar'), $statusbar = $dialog.children('.OxButtonsbar'),
$image = $('<img>') $image = $('<img>')
@ -234,65 +175,158 @@ pandora.ui.sequencesDialog = function() {
$status = Ox.Element() $status = Ox.Element()
.css({ .css({
float: 'left', position: 'absolute',
width: dialogWidth - 408 + 'px', // 2 * (4 + 128 + 4 + 64 + 4) left: left,
margin: '6px 0 0 168px', // 4 + 128 + 4 + 64 + 4 - 8 - 24 - 4 top: '6px',
width: '256px',
fontSize: '9px', fontSize: '9px',
textAlign: 'center' textAlign: 'center'
}) })
.html('Loading...') .html('Loading...')
.appendTo($statusbar); .appendTo($statusbar);
$($tabPanel.find('.OxButtonGroup')[0]).css({width: '256px'}); getClips();
function changeClip(data) { function changeClip(data) {
var split = data.ids[0].replace('-', '/').split('/'); var split = data.ids[0].replace('-', '/').split('/');
item.id = split[0]; item.id = split[0];
item.position = parseFloat(split[1]); item.position = parseFloat(split[1]);
$status.html('Loading...'); $item = null;
$tabPanel.reloadPanel(); getClips();
} }
function getImageURL(mode, hash) { function getClips() {
$dialog && $dialog.disableButton('open');
$status && $status.html('Loading...');
pandora.api.get({
id: item.id,
keys: ['director', 'duration', 'title', 'videoRatio']
}, function(result) {
Ox.extend(item, result.data);
pandora.api.getSequence({
id: item.id,
mode: pandora.user.ui.sequenceMode,
position: item.position
}, function(result) {
// result.data: {hash, id, in, out}
Ox.print('RD:::', result.data)
sequence = Ox.extend({}, item, result.data);
$clipButtons[sequence['in'] > 0 ? 'enableButton' : 'disableButton']('previous');
$clipButtons[sequence.out < item.duration ? 'enableButton' : 'disableButton']('next');
if (!$item) {
$item = Ox.IconList({
fixedRatio: fixedRatio,
item: getItem,
/*
items: [item],
*/
///*
items: function(data, callback) {
setTimeout(function() {
callback({
data: {items: data.keys ? [sequence] : 1},
status: {code: 200, text: 'ok'}
});
}, 250);
},
//*/
max: 0,
orientation: 'both',
size: 128,
sort: [{key: 'id', operator: '+'}],
unique: 'id'
});
$innerPanel.replaceElement(0, $item);
}
$list = Ox.IconList({
fixedRatio: fixedRatio,
item: getItem,
items: function(data, callback) {
pandora.api.findSequences(Ox.extend(data, {
query: {
conditions: [
{key: 'id', value: sequence.id, operator: '!='},
{key: 'mode', value: pandora.user.ui.sequenceMode, operator: '=='},
{key: 'hash', value: sequence.hash, operator: '=='}
],
operator: '&'
}
}), callback);
},
keys: ['director', 'id', 'title', 'videoRatio'],
max: 1,
orientation: 'both',
size: 128,
sort: Ox.clone(pandora.user.ui.sequenceSort),
unique: 'id'
})
.bindEvent({
init: function(data) {
$status.html(
Ox.formatNumber(data.items) + ' Clip'
+ (data.items == 1 ? '' : 's')
);
},
open: changeClip,
select: function(data) {
$dialog[
data.ids.length ? 'enableButton' : 'disableButton'
]('open');
},
pandora_sequencesort: function(data) {
Ox.print('SEQUENCESORT:', data)
$list.options({sort: data.value});
}
});
$innerPanel.replaceElement(1, $list);
Ox.print('SEQUENCE::', sequence)
$image.attr({src: getImageURL(sequence.hash)});
});
});
}
function getImageURL(hash) {
var canvas = $('<canvas>').attr({width: 8, height: 8})[0], var canvas = $('<canvas>').attr({width: 8, height: 8})[0],
context = canvas.getContext('2d'), context = canvas.getContext('2d'),
imageData = context.getImageData(0, 0, 8, 8), imageData = context.getImageData(0, 0, 8, 8),
data = imageData.data; data = imageData.data;
if (mode == 'shape') { if (hash) {
Ox.loop(8, function(y) { if (pandora.user.ui.sequenceMode == 'shape') {
var value = parseInt(hash.substr(14 - y * 2, 2), 16); Ox.loop(8, function(y) {
Ox.loop(8, function(x) { var value = parseInt(hash.substr(14 - y * 2, 2), 16);
var color = value & Math.pow(2, x) ? 255 : 0, Ox.loop(8, function(x) {
index = y * 32 + x * 4; var color = value & Math.pow(2, x) ? 255 : 0,
Ox.loop(3, function(i) { index = y * 32 + x * 4;
data[index + i] = color; Ox.loop(3, function(i) {
data[index + i] = color;
});
data[index + 3] = 255;
}); });
data[index + 3] = 255;
}); });
}); } else if (pandora.user.ui.sequenceMode == 'color') {
} else if (mode == 'color') { Ox.loop(8, function(part) {
Ox.loop(8, function(part) { var x = part % 4 * 2,
var x = part % 4 * 2, y = Math.floor(part / 4) * 4,
y = Math.floor(part / 4) * 4, value = parseInt(hash.substr(14 - part * 2, 2), 16),
value = parseInt(hash.substr(14 - part * 2, 2), 16), // RRRGGGBB
// RRRGGGBB color = [
color = [ (value >> 5) * 32,
(value >> 5) * 32, (value >> 2 & 7) * 32,
(value >> 2 & 7) * 32, (value & 3) * 64
(value & 3) * 64 ];
]; Ox.loop(4, function(dy) {
Ox.loop(4, function(dy) { Ox.loop(2, function(dx) {
Ox.loop(2, function(dx) { var index = (y + dy) * 32 + (x + dx) * 4;
var index = (y + dy) * 32 + (x + dx) * 4; Ox.loop(3, function(i) {
Ox.loop(3, function(i) { data[index + i] = color[i];
data[index + i] = color[i]; });
data[index + 3] = 255;
}); });
data[index + 3] = 255; });
});
}); });
}); }
context.putImageData(imageData, 0, 0);
} }
context.putImageData(imageData, 0, 0);
return canvas.toDataURL(); return canvas.toDataURL();
} }
@ -310,6 +344,10 @@ pandora.ui.sequencesDialog = function() {
}; };
} }
function getLeft() {
return Math.floor((dialogSize.width - 256) / 2) + 'px';
}
function getTitle() { function getTitle() {
return pandora.user.ui.sequenceSort[0].operator == '+' ? 'up' : 'down'; return pandora.user.ui.sequenceSort[0].operator == '+' ? 'up' : 'down';
} }