ac01af11a4d70fcf90f42e31391c717b5a082d5b
[Hacks.git] / 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 });