Bugus menu highlighting.
1.1 --- a/factory/v2012/script.js Fri Jan 06 17:41:08 2012 +0100
1.2 +++ b/factory/v2012/script.js Fri Jan 06 18:28:31 2012 +0100
1.3 @@ -10,11 +10,13 @@
1.4 image.onload = init_logo;
1.5 image.src = "images/logobase.png";
1.6 $("#logo").click(handle_click);
1.7 - $("#logo").hover(function() {
1.8 + $("#logo").hover(function(event) {
1.9 $(this).css("cursor", "pointer");
1.10 }, function() {
1.11 $(this).css("cursor", "auto");
1.12 });
1.13 + $("#logo").mousemove(function(event) { handle_hover(event); });
1.14 + $("#logo").mouseout(function(event) { handle_mouse_out(event); });
1.15 $("#sim").mousemove(function(event) { simulation.mouse_moved(mouse_pos(event, "#sim")); });
1.16 var onEachFrame;
1.17 if (window.webkitRequestAnimationFrame) {
1.18 @@ -102,28 +104,87 @@
1.19 if (ces && x >= ces["min_x"] && x <= ces["max_x"]
1.20 && y >= ces["min_y"] && y <= ces["max_y"]) {
1.21 ces["func"](event.target.id, ces);
1.22 + last_colours[0] = black;
1.23 break;
1.24 }
1.25 }
1.26 }
1.27
1.28 +function handle_hover(event) {
1.29 + var xy = mouse_pos(event, "#logo");
1.30 + var x = xy[0];
1.31 + var y = xy[1];
1.32 + for (var i in click_events[event.target.id]) {
1.33 + var ces = click_events[event.target.id][i];
1.34 + if (ces && x >= ces["min_x"] && x <= ces["max_x"]
1.35 + && y >= ces["min_y"] && y <= ces["max_y"]) {
1.36 + highlight_menu(event.target.id, ces);
1.37 + break;
1.38 + }
1.39 + }
1.40 +}
1.41 +
1.42 +function handle_mouse_out(event) {
1.43 + highlight_menu(event.target.id, null);
1.44 +}
1.45 +
1.46 function switch_page(id, params) {
1.47 var page = params["args"][0];
1.48 $("body").load(page);
1.49 document.location.href = page;
1.50 }
1.51 +var last_highlight;
1.52 +var last_colours = new Array();
1.53 +function highlight_menu(id, p) {
1.54 + if (last_highlight == p) {
1.55 + return;
1.56 + }
1.57 + var canvas = document.getElementById("logo");
1.58 + var context = canvas.getContext("2d");
1.59 + var image = context.getImageData(0, 0, menu_width, menu_height);
1.60 + if (p) {
1.61 + var page = p["args"][0];
1.62 + var min_x = p["min_x"];
1.63 + var max_x = p["max_x"];
1.64 + var min_y = p["min_y"];
1.65 + var max_y = p["max_y"];
1.66 + console.log(page);
1.67 + last_colours[0] = colour_area(image, min_x + 10, max_x - 10, 0, 60, orange);
1.68 + last_colours[1] = colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, white);
1.69 + console.log(last_colours);
1.70 + }
1.71 + if (last_highlight && last_colours && last_colours[0] && last_colours[1]) {
1.72 + page = last_highlight["args"][0];
1.73 + min_x = last_highlight["min_x"];
1.74 + max_x = last_highlight["max_x"];
1.75 + min_y = last_highlight["min_y"];
1.76 + max_y = last_highlight["max_y"];
1.77 + colour_area(image, min_x + 10, max_x - 10, 0, 60, last_colours[0]);
1.78 + colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, last_colours[1]);
1.79 + }
1.80 + context.putImageData(image, 0, 0);
1.81 + last_highlight = p;
1.82 +}
1.83
1.84 function colour_area(image, min_x, max_x, min_y, max_y, colour) {
1.85 - var pixels = image.data;
1.86 + var pixels = image.data;
1.87 + var old_colour;
1.88 for (var y = min_y; y <= max_y; y += 1) {
1.89 for (var x = min_x; x <= max_x; x += 1) {
1.90 var pix_colour = getPixel(image, x, y);
1.91 if (pix_colour.a > 0) {
1.92 - colour.a = pix_colour.a;
1.93 - setPixel(image, x, y, colour);
1.94 + colour.a = pix_colour.a;
1.95 + setPixel(image, x, y, colour);
1.96 + if (pix_colour.a == 255) {
1.97 + old_colour = new Colour(pix_colour.r,
1.98 + pix_colour.g,
1.99 + pix_colour.b,
1.100 + pix_colour.a);
1.101 + }
1.102 }
1.103 }
1.104 - }
1.105 + }
1.106 + return old_colour;
1.107 }
1.108
1.109 function init_logo(event) {
1.110 @@ -379,10 +440,10 @@
1.111 }
1.112
1.113 var white = new Colour(255, 255, 255);
1.114 -var black = new Colour(0, 0, 0);
1.115 -var orange = new Colour(201, 87, 35);
1.116 -var green = new Colour(90, 215, 21);
1.117 -var background = new Colour(34, 34, 34);
1.118 +var black = new Colour(0, 0, 0, 255);
1.119 +var orange = new Colour(201, 87, 35, 255);
1.120 +var green = new Colour(90, 215, 21, 255);
1.121 +var background = new Colour(34, 34, 34, 255);
1.122
1.123 function setPixel(image, x, y, colour) {
1.124 var index = 4 * (x + y * image.width);
2.1 --- a/script.js Fri Jan 06 17:41:08 2012 +0100
2.2 +++ b/script.js Fri Jan 06 18:28:31 2012 +0100
2.3 @@ -10,11 +10,13 @@
2.4 image.onload = init_logo;
2.5 image.src = "images/logobase.png";
2.6 $("#logo").click(handle_click);
2.7 - $("#logo").hover(function() {
2.8 + $("#logo").hover(function(event) {
2.9 $(this).css("cursor", "pointer");
2.10 }, function() {
2.11 $(this).css("cursor", "auto");
2.12 });
2.13 + $("#logo").mousemove(function(event) { handle_hover(event); });
2.14 + $("#logo").mouseout(function(event) { handle_mouse_out(event); });
2.15 $("#sim").mousemove(function(event) { simulation.mouse_moved(mouse_pos(event, "#sim")); });
2.16 var onEachFrame;
2.17 if (window.webkitRequestAnimationFrame) {
2.18 @@ -102,28 +104,87 @@
2.19 if (ces && x >= ces["min_x"] && x <= ces["max_x"]
2.20 && y >= ces["min_y"] && y <= ces["max_y"]) {
2.21 ces["func"](event.target.id, ces);
2.22 + last_colours[0] = black;
2.23 break;
2.24 }
2.25 }
2.26 }
2.27
2.28 +function handle_hover(event) {
2.29 + var xy = mouse_pos(event, "#logo");
2.30 + var x = xy[0];
2.31 + var y = xy[1];
2.32 + for (var i in click_events[event.target.id]) {
2.33 + var ces = click_events[event.target.id][i];
2.34 + if (ces && x >= ces["min_x"] && x <= ces["max_x"]
2.35 + && y >= ces["min_y"] && y <= ces["max_y"]) {
2.36 + highlight_menu(event.target.id, ces);
2.37 + break;
2.38 + }
2.39 + }
2.40 +}
2.41 +
2.42 +function handle_mouse_out(event) {
2.43 + highlight_menu(event.target.id, null);
2.44 +}
2.45 +
2.46 function switch_page(id, params) {
2.47 var page = params["args"][0];
2.48 $("body").load(page);
2.49 document.location.href = page;
2.50 }
2.51 +var last_highlight;
2.52 +var last_colours = new Array();
2.53 +function highlight_menu(id, p) {
2.54 + if (last_highlight == p) {
2.55 + return;
2.56 + }
2.57 + var canvas = document.getElementById("logo");
2.58 + var context = canvas.getContext("2d");
2.59 + var image = context.getImageData(0, 0, menu_width, menu_height);
2.60 + if (p) {
2.61 + var page = p["args"][0];
2.62 + var min_x = p["min_x"];
2.63 + var max_x = p["max_x"];
2.64 + var min_y = p["min_y"];
2.65 + var max_y = p["max_y"];
2.66 + console.log(page);
2.67 + last_colours[0] = colour_area(image, min_x + 10, max_x - 10, 0, 60, orange);
2.68 + last_colours[1] = colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, white);
2.69 + console.log(last_colours);
2.70 + }
2.71 + if (last_highlight && last_colours && last_colours[0] && last_colours[1]) {
2.72 + page = last_highlight["args"][0];
2.73 + min_x = last_highlight["min_x"];
2.74 + max_x = last_highlight["max_x"];
2.75 + min_y = last_highlight["min_y"];
2.76 + max_y = last_highlight["max_y"];
2.77 + colour_area(image, min_x + 10, max_x - 10, 0, 60, last_colours[0]);
2.78 + colour_area(image, min_x + 10, max_x - 10, 60, max_y - 10, last_colours[1]);
2.79 + }
2.80 + context.putImageData(image, 0, 0);
2.81 + last_highlight = p;
2.82 +}
2.83
2.84 function colour_area(image, min_x, max_x, min_y, max_y, colour) {
2.85 - var pixels = image.data;
2.86 + var pixels = image.data;
2.87 + var old_colour;
2.88 for (var y = min_y; y <= max_y; y += 1) {
2.89 for (var x = min_x; x <= max_x; x += 1) {
2.90 var pix_colour = getPixel(image, x, y);
2.91 if (pix_colour.a > 0) {
2.92 - colour.a = pix_colour.a;
2.93 - setPixel(image, x, y, colour);
2.94 + colour.a = pix_colour.a;
2.95 + setPixel(image, x, y, colour);
2.96 + if (pix_colour.a == 255) {
2.97 + old_colour = new Colour(pix_colour.r,
2.98 + pix_colour.g,
2.99 + pix_colour.b,
2.100 + pix_colour.a);
2.101 + }
2.102 }
2.103 }
2.104 - }
2.105 + }
2.106 + return old_colour;
2.107 }
2.108
2.109 function init_logo(event) {
2.110 @@ -379,10 +440,10 @@
2.111 }
2.112
2.113 var white = new Colour(255, 255, 255);
2.114 -var black = new Colour(0, 0, 0);
2.115 -var orange = new Colour(201, 87, 35);
2.116 -var green = new Colour(90, 215, 21);
2.117 -var background = new Colour(34, 34, 34);
2.118 +var black = new Colour(0, 0, 0, 255);
2.119 +var orange = new Colour(201, 87, 35, 255);
2.120 +var green = new Colour(90, 215, 21, 255);
2.121 +var background = new Colour(34, 34, 34, 255);
2.122
2.123 function setPixel(image, x, y, colour) {
2.124 var index = 4 * (x + y * image.width);