hacks/Pixelfade/Pixelfade.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Pixelfade",
   5         kind: "Hack",
   6         style: "background-color: yellow; background-position: center center",
   7         preferences: [
   8                 {name: "background", label: "Background", kind: "ListSelector", items: ['desktop wallpaper'].concat(colorList)}
   9         ],
  10         background: 'desktop wallpaper',
  11         components: [
  12                 {name: "canvas", nodeTag: "canvas", onclick: "canvasClick"},
  13                 {name: "wallpaperService", kind: "PalmService",
  14                  service: 'palm://com.palm.systemservice',
  15                  method: 'getPreferences',
  16                  onSuccess: "gotWallpaper"}
  17         ],
  18         create: function() {
  19                 this.inherited(arguments);
  20         },
  21         rendered: function() {
  22                 this.canvas = this.$.canvas.hasNode();
  23                 this.context = this.canvas.getContext('2d');
  24                 this.resize(window.innerWidth, window.innerHeight);
  25                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  26
  27                 this.faders = [];
  28                 for (var i = 0; i < 10; i++) {
  29                         var img = new Image();
  30                         img.src = "hacks/Pixelfade/pixelfade" + i + ".gif";
  31                         this.faders.push(img);
  32                 }
  33                 this.preferencesChanged();
  34         },
  35         start: function() {
  36                 this.resize(window.innerWidth, window.innerHeight);
  37
  38                 if (this.timer)
  39                         clearInterval(this.timer);
  40                 this.fade_val = 9;
  41                 this.fade_dir = -1;
  42                 this.fade_end = -1;
  43                 this.timer = setInterval(this.fade_all.bind(this), 50);
  44
  45                 if (!this.spotTimer)
  46                         this.spotTimer = setInterval(this.do_fade_spot.bind(this), 3000);
  47         },
  48         stop: function() {
  49                 clearInterval(this.timer);
  50                 this.timer = null;
  51                 clearInterval(this.spotTimer);
  52                 this.spotTimer = null;
  53                 clearTimeout(this.fadeInTimer);
  54                 this.fadeInTimer = null;
  55         },
  56         resize: function(w, h) {
  57                 if (!this.canvas)
  58                         return;
  59                 this.canvas.style.width = w + 'px';
  60                 this.canvas.style.height = h + 'px';
  61                 this.canvas.width = w;
  62                 this.canvas.height = h;
  63                 this.context.fillColor = 'black';
  64                 this.context.fillRect(0, 0, w, h);
  65         },
  66         hidden: function() {
  67                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  68         },
  69         preferencesChanged: function() {
  70                 if (this.background == 'desktop wallpaper') {
  71                         this.$.wallpaperService.call({
  72                                 keys: ['wallpaper'],
  73                                 subscribe: false
  74                         });
  75                 } else {
  76                         this.setStyle('background-image: none; background-color: ' + this.background);
  77                 }
  78         },
  79         canvasClick: function(inSender, inEvent) {
  80                 clearTimeout(this.fadeInTimer);
  81                 clearInterval(this.spotTimer);
  82                 this.spotTimer = setInterval(this.do_fade_spot.bind(this), 3000);
  83                 this.fader_go(inEvent.clientX, inEvent.clientY);
  84         },
  85         gotWallpaper: function(inSender, inResponse) {
  86                 enyo.log("got background: " + JSON.stringify(inResponse));
  87                 this.setStyle('background-image: url(' + inResponse.wallpaper.wallpaperFile + '); background-position: center center');
  88         },
  89         do_fade_spot: function() {
  90                 var x = Math.floor(Math.random() * this.canvas.width);
  91                 var y = Math.floor(Math.random() * this.canvas.height);
  92                 this.fader_go(x, y);
  93         },
  94         fade_all: function() {
  95                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  96                 if (this.fade_val == this.fade_end) {
  97                         clearInterval(this.timer);
  98                         this.timer = null;
  99                         if (this.fade_dir == -1)
 100                                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 101                         else
 102                                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 103                 } else {
 104                         for (var x = 0; x < this.canvas.width; x += 64) {
 105                                 for (var y = 0; y < this.canvas.height; y += 64) {
 106                                         this.context.drawImage(this.faders[this.fade_val], x, y);
 107                                 }
 108                         }
 109                 }
 110                 this.fade_val += this.fade_dir;
 111         },
 112         fader_go: function(x, y) {
 113                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 114                 this.fader_count = 0;
 115                 this.time_faders(x, y);
 116                 this.faderptr = new Array(10);
 117                 for (var i=0; i < 10; i++)
 118                         this.faderptr[i] = 0;
 119                 this.t0 = (new Date()).getTime();
 120                 this.faderRunning = true;
 121                 clearInterval(this.timer);
 122                 this.timer = setInterval(this.fader.bind(this), 50);
 123         },
 124         time_faders: function(xpos, ypos) {
 125                 this.fadertimes = [];
 126                 for (var y = 0; y < this.canvas.height; y += 64) {
 127                         for (var x = 0; x < this.canvas.width; x += 64) {
 128                                 var xd = x - xpos;
 129                                 var yd = y - ypos;
 130                                 this.fadertimes.push({
 131                                         t: 125 - Math.sqrt(xd*xd + yd*yd) / 8,
 132                                         x: x,
 133                                         y: y
 134                                 });
 135                         }
 136                 }
 137                 this.fadertimes.sort(function(a, b) { return a.t - b.t });
 138         },
 139         fader: function() {
 140                 var tnow = (new Date()).getTime();
 141                 var td = (tnow - this.t0) / 8.0;
 142                 for (var i = 0; i < 10; i++) {
 143                         while (this.faderptr[i] < this.fadertimes.length && this.fadertimes[this.faderptr[i]].t < td - i * 10) {
 144                                 var xpos = this.fadertimes[this.faderptr[i]].x;
 145                                 var ypos = this.fadertimes[this.faderptr[i]].y;
 146                                 this.context.clearRect(xpos, ypos, 64, 64);
 147                                 this.context.drawImage(this.faders[i], xpos, ypos);
 148                                 this.faderptr[i]++;
 149                         }
 150                 }
 151                 if (this.faderptr[9] >= this.fadertimes.length) {
 152                         clearTimeout(this.timer);
 153                         this.fadeInTimer = setTimeout(function() {
 154                                 this.fade_val = 9;
 155                                 this.fade_dir = -1;
 156                                 this.fade_end = -1;
 157                                 this.timer = setInterval(this.fade_all.bind(this), 50);
 158                         }.bind(this), 750);
 159                 }
 160         }
 161 });