Mercurial > laserkard
diff js-lib/buy3.js @ 99:9649b14f3b38 laserkard
made main drawing function capable of rendering style selection boxes. no more pics needed
author | Robert McIntyre <rlm@mit.edu> |
---|---|
date | Tue, 27 Jul 2010 07:56:22 -0400 |
parents | 388344355ebf |
children | 595866daadbe |
line wrap: on
line diff
1.1 --- a/js-lib/buy3.js Tue Jul 27 05:14:22 2010 -0400 1.2 +++ b/js-lib/buy3.js Tue Jul 27 07:56:22 2010 -0400 1.3 @@ -3,16 +3,32 @@ 1.4 1.5 //Cards drawing functions: 1.6 1.7 - var Cards = 1.8 - {"bold" : { 1.9 - "name" :(function (text, display){ 1.10 - return display.print(10,20,text,helvetica, 25).attr( 1.11 - {"fill" : "#0F0"});}), 1.12 - "email" : (function (text, paper){ 1.13 - return paper.print(50,50,text,helvetica_I,40).attr( 1.14 - {"fill" : "red"});})} 1.15 + var magic_font_ratio = 318; //the font size for identity under .scale(1,1) 1.16 + var mfg = magic_font_ratio; 1.17 + 1.18 1.19 + 1.20 + var draw_card = (function (paper){ 1.21 + 1.22 + var helvetica = paper.getFont('HelveticaNeue', 700); 1.23 + var helveticaI = paper.getFont('HelveticaNeue', 800); 1.24 + var h = paper.height; 1.25 + var w = paper.width; 1.26 + 1.27 + return { 1.28 + "bold" : { 1.29 + "name" :(function (text){ 1.30 + return paper.print(w*0.1,h*0.2,text,helvetica).attr( 1.31 + {"fill" : "#0F0"}).scale(0.0002*h,0.00025*w,w*0.1,h*0.2);}), 1.32 + "email" : (function (text){ 1.33 + return paper.print(w*0.1,h*0.4,text,helveticaI).attr( 1.34 + {"fill" : "red"}).scale(0.0002*h,0.00025*w,w*0.1,h*0.4);})} 1.35 }; 1.36 + 1.37 + }); 1.38 + 1.39 + 1.40 + 1.41 1.42 1.43 1.44 @@ -74,7 +90,8 @@ 1.45 var helvetica_I; 1.46 1.47 var state_map = { 1.48 - bold : {ref : null}, 1.49 + bold : null, 1.50 + classic : null, 1.51 1.52 green : {ref : null, 1.53 offState : {"fill" : "#030", "scale": 1} , 1.54 @@ -108,7 +125,8 @@ 1.55 1.56 var display_init = (function (){ 1.57 state_map["display"].ref = 1.58 - display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state); 1.59 + display.rect(1, 1 , display.width - 1, display.height - 2, 20).attr( 1.60 + state_map["display"].state); 1.61 }); 1.62 1.63 var text_entry_init = (function (){ 1.64 @@ -124,20 +142,26 @@ 1.65 if ($(this).val() == $(this).attr('title')){ 1.66 $(this).val('');}})})}); 1.67 1.68 - 1.69 + var style_text = { 1.70 + phone : "617.821.9129", 1.71 + email : "rlm@mit.edu", 1.72 + website : "www.rlmcintyre.com", 1.73 + name : "Robert McIntyre", 1.74 + company : "LaserKard LLC.", 1.75 + occupation : "AI Researcher"} 1.76 1.77 1.78 var style_init = (function (){ 1.79 - state_map["bold"] = style.bold.set(); 1.80 - //var yyy = Cards.bold.name("Ru", style.bold); 1.81 - 1.82 - //for each (var item in yyy.items) {item.scale(0.5, 0.5);} 1.83 -// for (var letter in yyy) { 1.84 -// letter.scale(0.5,0.5);} 1.85 - 1.86 - state_map["bold"].push(Cards.bold.name("Robert", style.bold)); 1.87 - state_map["bold"].attr({"fill" : "red"}); //.scale(0.5, 0.5, 0, 0); 1.88 - state_map["bold"].scale(0.03, 0.03, 0 , 0); 1.89 + var draw = draw_card(style.bold); 1.90 + draw.bold.name(style_text.name); 1.91 + style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10); 1.92 + draw.bold.email(style_text.email); 1.93 + // state_map["bold"] = style.bold.set(); 1.94 + // state_map["bold"].push(Cards.bold.name(style_text.name, style.bold)); 1.95 + // state_map["bold"].push(Cards.bold.email(style_text.email, style.bold)); 1.96 + // 1.97 + // state_map["bold"].attr({"fill" : "red"}); 1.98 + // state_map["bold"].scale(0.03, 0.03, 0 , 0); 1.99 1.100 }); 1.101 1.102 @@ -147,8 +171,11 @@ 1.103 var init = (function () { 1.104 display = Raphael("card-display", 340 ,215); 1.105 color = Raphael("color-select", 300, 100); 1.106 - style.bold = Raphael("bold", 100, 100); 1.107 - //style = Raphael("style-select", 200, 70); 1.108 + 1.109 + style.bold = Raphael("bold", 170, 107); 1.110 + 1.111 + style.classic = Raphael("classic", 170 , 107); 1.112 + 1.113 helvetica = display.getFont('HelveticaNeue', 700); 1.114 helvetica_I = display.getFont('HelveticaNeue', 800); 1.115 color_select_init(); 1.116 @@ -213,10 +240,12 @@ 1.117 1.118 var display_style_update = (function (){ 1.119 var style = null; 1.120 + 1.121 return (function () { 1.122 + var draw = draw_card(display); 1.123 if (style !== order.style){ 1.124 for ( var property in card ){ 1.125 - if (!Cards[order.style][(deref(property))]){ 1.126 + if (!draw[order.style][(deref(property))]){ 1.127 $("#user" + "-" + property).toggle(400);}} 1.128 style = order.style;} 1.129 });})(); 1.130 @@ -229,12 +258,13 @@ 1.131 company : "nothing", 1.132 website : "nothing" }; 1.133 1.134 - var check_text = (function (var_name) { 1.135 + var check_text = (function (var_name) { 1.136 + var draw = draw_card(display); 1.137 if (state[deref(var_name)] !== (card[deref(var_name)]).text){ 1.138 - if (Cards[order.style][deref(var_name)]) { 1.139 + if (draw[order.style][deref(var_name)]) { 1.140 card[deref(var_name)].ref.remove(); 1.141 card[var_name].ref = 1.142 - Cards[order.style][deref(var_name)]( 1.143 + draw[order.style][deref(var_name)]( 1.144 card[deref(var_name)].text,display); 1.145 state[deref(var_name)] = card[deref(var_name)].text; 1.146 }}});