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                 this.preferencesChanged();
  21         },
  22         rendered: function() {
  23                 this.canvas = this.$.canvas.hasNode();
  24                 this.context = this.canvas.getContext('2d');
  25                 this.resize(window.innerWidth, window.innerHeight);
  26                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  27
  28                 this.faders = [];
  29                 for (var i = 0; i < 10; i++) {
  30                         var img = new Image();
  31                         img.src = "hacks/Pixelfade/pixelfade" + i + ".gif";
  32                         this.faders.push(img);
  33                 }
  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                 this.canvas.style.width = w + 'px';
  58                 this.canvas.style.height = h + 'px';
  59                 this.canvas.width = w;
  60                 this.canvas.height = h;
  61                 this.context.fillColor = 'black';
  62                 this.context.fillRect(0, 0, w, h);
  63         },
  64         hidden: function() {
  65                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  66         },
  67         preferencesChanged: function() {
  68                 if (this.background == 'desktop wallpaper') {
  69                         this.$.wallpaperService.call({
  70                                 keys: ['wallpaper'],
  71                                 subscribe: false
  72                         });
  73                 } else {
  74                         this.setStyle('background-image: none; background-color: ' + this.background);
  75                 }
  76         },
  77         canvasClick: function(inSender, inEvent) {
  78                 clearTimeout(this.fadeInTimer);
  79                 clearInterval(this.spotTimer);
  80                 this.spotTimer = setInterval(this.do_fade_spot.bind(this), 3000);
  81                 this.fader_go(inEvent.clientX, inEvent.clientY);
  82         },
  83         gotWallpaper: function(inSender, inResponse) {
  84                 enyo.log("got background: " + JSON.stringify(inResponse));
  85                 this.setStyle('background-image: url(' + inResponse.wallpaper.wallpaperFile + '); background-position: center center');
  86         },
  87         do_fade_spot: function() {
  88                 var x = Math.floor(Math.random() * this.canvas.width);
  89                 var y = Math.floor(Math.random() * this.canvas.height);
  90                 this.fader_go(x, y);
  91         },
  92         fade_all: function() {
  93                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  94                 if (this.fade_val == this.fade_end) {
  95                         clearInterval(this.timer);
  96                         this.timer = null;
  97                         if (this.fade_dir == -1)
  98                                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  99                         else
 100                                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 101                 } else {
 102                         for (var x = 0; x < this.canvas.width; x += 64) {
 103                                 for (var y = 0; y < this.canvas.height; y += 64) {
 104                                         this.context.drawImage(this.faders[this.fade_val], x, y);
 105                                 }
 106                         }
 107                 }
 108                 this.fade_val += this.fade_dir;
 109         },
 110         fader_go: function(x, y) {
 111                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 112                 this.fader_count = 0;
 113                 this.time_faders(x, y);
 114                 this.faderptr = new Array(10);
 115                 for (var i=0; i < 10; i++)
 116                         this.faderptr[i] = 0;
 117                 this.t0 = (new Date()).getTime();
 118                 this.faderRunning = true;
 119                 clearInterval(this.timer);
 120                 this.timer = setInterval(this.fader.bind(this), 50);
 121         },
 122         time_faders: function(xpos, ypos) {
 123                 this.fadertimes = [];
 124                 for (var y = 0; y < this.canvas.height; y += 64) {
 125                         for (var x = 0; x < this.canvas.width; x += 64) {
 126                                 var xd = x - xpos;
 127                                 var yd = y - ypos;
 128                                 this.fadertimes.push({
 129                                         t: 125 - Math.sqrt(xd*xd + yd*yd) / 8,
 130                                         x: x,
 131                                         y: y
 132                                 });
 133                         }
 134                 }
 135                 this.fadertimes.sort(function(a, b) { return a.t - b.t });
 136         },
 137         fader: function() {
 138                 var tnow = (new Date()).getTime();
 139                 var td = (tnow - this.t0) / 8.0;
 140                 for (var i = 0; i < 10; i++) {
 141                         while (this.faderptr[i] < this.fadertimes.length && this.fadertimes[this.faderptr[i]].t < td - i * 10) {
 142                                 var xpos = this.fadertimes[this.faderptr[i]].x;
 143                                 var ypos = this.fadertimes[this.faderptr[i]].y;
 144                                 this.context.clearRect(xpos, ypos, 64, 64);
 145                                 this.context.drawImage(this.faders[i], xpos, ypos);
 146                                 this.faderptr[i]++;
 147                         }
 148                 }
 149                 if (this.faderptr[9] >= this.fadertimes.length) {
 150                         clearTimeout(this.timer);
 151                         this.fadeInTimer = setTimeout(function() {
 152                                 this.fade_val = 9;
 153                                 this.fade_dir = -1;
 154                                 this.fade_end = -1;
 155                                 this.timer = setInterval(this.fade_all.bind(this), 50);
 156                         }.bind(this), 750);
 157                 }
 158         }
 159 });