Skip to content

Commit

Permalink
Changes: New timeline generation mechanism, normalized to 24 hours
Browse files Browse the repository at this point in the history
  • Loading branch information
@diorahman
diorahman committed Feb 7, 2014
1 parent cf47189 commit 6b353b2
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 158 deletions.
1 change: 1 addition & 0 deletions system/Makefile.am
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ system_DATA = \
style.css \
texture.jpg \
xml-background.js \
xml2json.js \
$(NULL)

CLEANFILES = \
Expand Down
1 change: 1 addition & 0 deletions system/desktop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="desktop.css" />
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="xml2json.js"></script>
<script type="text/javascript" src="xml-background.js"></script>
<script type="text/javascript" src="desktop.js"></script>
</head>
Expand Down
19 changes: 11 additions & 8 deletions system/desktop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@ var Utils = Utils || (function () {

var desktop = (function() {
var desktopData = null;
var xml = new XmlBackground();

window.xml = xml;

var hideLauncher = function() {
$("#launcher").css("display", "none");
}
Expand Down Expand Up @@ -174,13 +170,13 @@ var desktop = (function() {
var setBackground = function(file) {
if (file) {
// reset
xml.reset();
xmlBg.reset();

// ends with
if (file.split(".").pop() == "xml") {

// set xml file
xml.setFile(file);
xmlBg.load(file);

} else {

Expand All @@ -207,6 +203,13 @@ var desktop = (function() {
$(document).ready(function() {
desktop.init();

// testing using local file
// desktop.setBackground("file:///Users/diorahman/Experiments/projects/blankon/dir/temp/themes/Adwaita/backgrounds/adwaita-timed.xml");
// to do testing using local file, we can do following test:
//
//
desktop.setBackground("file:///Users/diorahman/Experiments/projects/blankon/dir/temp/themes/Adwaita/backgrounds/adwaita-timed.xml");

// setTimeout(function(){
// desktop.setBackground("file:///Users/diorahman/Experiments/projects/blankon/dir/temp/themes/Adwaita/backgrounds/good-night.jpg");
// }, 1000);

});
264 changes: 114 additions & 150 deletions system/xml-background.js
View file
Original file line number Diff line number Diff line change
@@ -1,193 +1,157 @@
// starttime | state1 | transition | state2 | transition | state3 | transition
// 07.00 | 1 | 2 | 1 | 2 | 1 | 2
// | 0 | 1 | 3 | 4 | 6 | 7

// handlers
window.handle = {
var handle = {
timeout : null
}

var XmlBackground = function() {
/*
* Use singleton pattern to maintain a single background sequence items handler object
*/
if (XmlBackground.prototype.instance) {
return XmlBackground.prototype.instance;
}
XmlBackground.prototype.instance = this;
};

XmlBackground.prototype.setFile = function(file) {

// set file and load it
this.file = file;
this.load();

};

XmlBackground.prototype.load = function() {

// loading file from local disk
if (!this.file) {
return;
}
var XmlBg = function(){};
XmlBg.prototype.load = function(file){
var self = this;

$.ajax({
url: self.file
}).done(function(data) {
self.$data = $(data);
self.run();
url: file,
cache: false,
dataType : "text",
processData : false,
})
.done( function (data) {
self.parse (data);
});
};
}

XmlBackground.prototype.getItem = function() {
XmlBg.prototype.parse = function (data) {
var seq = $.xml2json(data);

// get current date
var now = new Date();
var acc = 0;
var i = this.$data.children().length - 1;
var delta = (now - this.startTime) / 1000;
if (seq.hasOwnProperty("background")) {
var bg = seq.background;

var self = this;
var startTime = bg.starttime;

while (i > 1) {
this.startTick = new Date();
this.startTick.setHours(startTime.hour);
this.startTick.setMinutes(startTime.minute);
this.startTick.setSeconds(startTime.second);

var item = this.$data.children()[i];
var timeline = [];

if (item.nodeName.toLowerCase() != "starttime" && delta >= (item.delta) ) {

var hasNext = i < (this.$data.children().length - 1);
var nextItem;
var when = 0;
var initialOpacity = 1.0;
for (var i = 0; i < bg.static.length; i++) {
bg.static[i].type = "static";
bg.transition[i].type = "transition";
timeline.push(bg.static[i]);
timeline.push(bg.transition[i]);
}

if (hasNext) {
for (var i = 0; i < timeline.length; i++) {
if (i == 0) {
timeline[i].span = 0;
}
else {
timeline[i].span = timeline[i - 1].span + parseInt(timeline[i - 1].duration);
}

}

nextItem = this.$data.children()[ i + 1 ];
this.timeline = timeline;
this.where();
}
}

// when is in seconds
when = nextItem.delta - delta;
initialOpacity = 1 - (when/nextItem.duration);
//"00.00 - 23"
//"07.00 - 06.00"
//
// where are we? (search for a time-frame inside the timeline)
//
XmlBg.prototype.where = function(){

if (nextItem.nodeName.toLowerCase() == "transition") {
var now = new Date();
var delta = (now - this.startTick).valueOf()/1000;
var frame;

// handle next item
self.transitionDuration = when;
if (delta < 0) {
delta = 24 + (delta / 3600);
delta *= 3600;
}

// background - to
self.handleItem(nextItem);
var timeline = this.timeline;
var i = timeline.length;

// need hacks on this. The initial opacity should reflect current setup
$("#bg").css("opacity", initialOpacity);
$("#overlay").css("opacity", 1 - initialOpacity);
while (i--) {
var frame = timeline[i];
if (frame.span <= delta) {
// we got the frame here;
this.handle(frame, frame.duration - (delta - frame.span));
break;
}
}
}

$("#bg").css("-webkit-transition-property", "opacity");
$("#bg").css("-webkit-transition-duration", self.transitionDuration + "s");
$("#bg").css("-webkit-transition-timing-function", "linear");
$("#bg").css("opacity", 1.0);
XmlBg.prototype.handle = function (frame, next){

// overlay - from
$("#overlay").css("-webkit-transition-property", "opacity");
var self = this;

// especially this line
$("#overlay").css("-webkit-transition-duration", self.transitionDuration + "s");
$("#overlay").css("-webkit-transition-timing-function", "linear");
$("#overlay").css("opacity", 0.0);
}
else {
if (frame.type == "static") {

// handle item
self.handleItem(item);
}

} else {
// handle current item
self.handleItem(item);
}
// do render image
$("#overlay").css("opacity", 0.0);
$("#bg").css("background-image", "url(" + frame.file + ")");

if (nextItem && when) {
} else {

if (window.handle.timeout) {
clearTimeout(window.handle.timeout);
}

window.handle.timeout = setTimeout(function(){
self.getItem();
}, when * 1000);
// do css animation
$("#overlay").css("background-image", "url(" + frame.from + ")");
$("#bg").css("background-image", "url(" + frame.to.replace("bright-day", "good-night") + ")");

}
var initialOpacity = next/frame.duration;

// break the loop
break;
}
$("#overlay").css("opacity", initialOpacity);
$("#bg").css("opacity", 1 - initialOpacity);

i--;
}
}
self.next = next;

XmlBackground.prototype.handleItem = function(item) {

var file;
// next tick to set webkit transition
setTimeout(function(){

$("#overlay").css("-webkit-transition-property", "opacity");
$("#overlay").css("-webkit-transition-duration", self.next + "s");
$("#overlay").css("-webkit-transition-timing-function", "linear");
$("#overlay").css("opacity", 0.0);

if (item.nodeName.toLowerCase() == "static") {
$("#bg").css("-webkit-transition-property", "opacity");
$("#bg").css("-webkit-transition-duration", self.next + "s");
$("#bg").css("-webkit-transition-timing-function", "linear");
$("#bg").css("opacity", 1.0);

file = item.querySelector("file").textContent;
$("#bg").css("background-image", "url(" + file + ")");
}, 1);
}

} else {

overlay = item.querySelector("from").textContent;
file = item.querySelector("to").textContent;
clearTimeout(window.handle.timeout);

$("#overlay").css("background-image", "url(" + overlay + ")");
$("#bg").css("background-image", "url(" + file + ")");
window.handle.timeout = setTimeout(function(){
self.where();
}, next * 1000);

}
console.log("handle");
}

XmlBackground.prototype.reset = function() {
XmlBg.prototype.reset = function (){

// reset timeout
if (window.handle.timeout) {
clearTimeout(window.handle.timeout);
}
clearTimeout(window.handle.timeout);

// reset transition
$("#overlay").css("transition", "none");
$("#bg").css("transition", "none");
}
$("#overlay").css("-webkit-transition-property", "none");
$("#overlay").css("-webkit-transition-duration", "none");

XmlBackground.prototype.run = function() {

// start time
var $startTime = this.$data.find("starttime");
$("#bg").css("-webkit-transition-property", "none");
$("#bg").css("-webkit-transition-duration", "none");

// new Date();
this.startTime = new Date();
this.startTime.setHours($startTime.find("hour").text());
this.startTime.setMinutes($startTime.find("minute").text());
this.startTime.setSeconds($startTime.find("second").text());

// accumulation
var acc = 0;

// Populate deltas of each item
for (var i = 0; i < this.$data.children().length; i ++) {

// item children
var item = this.$data.children()[i];

// if not starttime element
if (item.nodeName.toLowerCase() != "starttime") {

// set delta
item.delta = item.delta || 0;
item.i = i;
item.duration = parseInt(item.querySelector("duration").textContent);

item.delta += (acc + item.duration);
acc = item.delta;
}
}
setTimeout(function(){
$("#bg").css("opacity", 1.0);
$("#overlay").css("opacity", 0.0);
}, 1);
}

//
this.getItem();
};
$(function(){
var xmlBg = new XmlBg();
window.xmlBg = xmlBg;
});
Loading

0 comments on commit 6b353b2

Please sign in to comment.