Mercurial > laserkard
changeset 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 |
files | buy3.html css/buy3.css js-lib/buy3.js |
diffstat | 3 files changed, 61 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
1.1 --- a/buy3.html Tue Jul 27 05:14:22 2010 -0400 1.2 +++ b/buy3.html Tue Jul 27 07:56:22 2010 -0400 1.3 @@ -14,6 +14,9 @@ 1.4 <div id="color-select"></div> 1.5 <div id="style-select"> 1.6 <div id="bold"></div> 1.7 + <div id="classic"></div> 1.8 + <div id="direct"></div> 1.9 + <div id="arrow"></div> 1.10 </div> 1.11 <div id="card-display"></div> 1.12 <div id="pokedex"></div>
2.1 --- a/css/buy3.css Tue Jul 27 05:14:22 2010 -0400 2.2 +++ b/css/buy3.css Tue Jul 27 07:56:22 2010 -0400 2.3 @@ -9,6 +9,7 @@ 2.4 font: bold 15px "helvetica","arial", "sans-serif"; 2.5 color: white; 2.6 height: 200px; 2.7 + display : none; 2.8 } 2.9 2.10 div#text-entry {
3.1 --- a/js-lib/buy3.js Tue Jul 27 05:14:22 2010 -0400 3.2 +++ b/js-lib/buy3.js Tue Jul 27 07:56:22 2010 -0400 3.3 @@ -3,16 +3,32 @@ 3.4 3.5 //Cards drawing functions: 3.6 3.7 - var Cards = 3.8 - {"bold" : { 3.9 - "name" :(function (text, display){ 3.10 - return display.print(10,20,text,helvetica, 25).attr( 3.11 - {"fill" : "#0F0"});}), 3.12 - "email" : (function (text, paper){ 3.13 - return paper.print(50,50,text,helvetica_I,40).attr( 3.14 - {"fill" : "red"});})} 3.15 + var magic_font_ratio = 318; //the font size for identity under .scale(1,1) 3.16 + var mfg = magic_font_ratio; 3.17 + 3.18 3.19 + 3.20 + var draw_card = (function (paper){ 3.21 + 3.22 + var helvetica = paper.getFont('HelveticaNeue', 700); 3.23 + var helveticaI = paper.getFont('HelveticaNeue', 800); 3.24 + var h = paper.height; 3.25 + var w = paper.width; 3.26 + 3.27 + return { 3.28 + "bold" : { 3.29 + "name" :(function (text){ 3.30 + return paper.print(w*0.1,h*0.2,text,helvetica).attr( 3.31 + {"fill" : "#0F0"}).scale(0.0002*h,0.00025*w,w*0.1,h*0.2);}), 3.32 + "email" : (function (text){ 3.33 + return paper.print(w*0.1,h*0.4,text,helveticaI).attr( 3.34 + {"fill" : "red"}).scale(0.0002*h,0.00025*w,w*0.1,h*0.4);})} 3.35 }; 3.36 + 3.37 + }); 3.38 + 3.39 + 3.40 + 3.41 3.42 3.43 3.44 @@ -74,7 +90,8 @@ 3.45 var helvetica_I; 3.46 3.47 var state_map = { 3.48 - bold : {ref : null}, 3.49 + bold : null, 3.50 + classic : null, 3.51 3.52 green : {ref : null, 3.53 offState : {"fill" : "#030", "scale": 1} , 3.54 @@ -108,7 +125,8 @@ 3.55 3.56 var display_init = (function (){ 3.57 state_map["display"].ref = 3.58 - display.rect(1, 1, 338, 213, 20).attr(state_map["display"].state); 3.59 + display.rect(1, 1 , display.width - 1, display.height - 2, 20).attr( 3.60 + state_map["display"].state); 3.61 }); 3.62 3.63 var text_entry_init = (function (){ 3.64 @@ -124,20 +142,26 @@ 3.65 if ($(this).val() == $(this).attr('title')){ 3.66 $(this).val('');}})})}); 3.67 3.68 - 3.69 + var style_text = { 3.70 + phone : "617.821.9129", 3.71 + email : "rlm@mit.edu", 3.72 + website : "www.rlmcintyre.com", 3.73 + name : "Robert McIntyre", 3.74 + company : "LaserKard LLC.", 3.75 + occupation : "AI Researcher"} 3.76 3.77 3.78 var style_init = (function (){ 3.79 - state_map["bold"] = style.bold.set(); 3.80 - //var yyy = Cards.bold.name("Ru", style.bold); 3.81 - 3.82 - //for each (var item in yyy.items) {item.scale(0.5, 0.5);} 3.83 -// for (var letter in yyy) { 3.84 -// letter.scale(0.5,0.5);} 3.85 - 3.86 - state_map["bold"].push(Cards.bold.name("Robert", style.bold)); 3.87 - state_map["bold"].attr({"fill" : "red"}); //.scale(0.5, 0.5, 0, 0); 3.88 - state_map["bold"].scale(0.03, 0.03, 0 , 0); 3.89 + var draw = draw_card(style.bold); 3.90 + draw.bold.name(style_text.name); 3.91 + style.bold.rect(1, 1 ,style.bold.width - 1, style.bold.height - 2, 10); 3.92 + draw.bold.email(style_text.email); 3.93 + // state_map["bold"] = style.bold.set(); 3.94 + // state_map["bold"].push(Cards.bold.name(style_text.name, style.bold)); 3.95 + // state_map["bold"].push(Cards.bold.email(style_text.email, style.bold)); 3.96 + // 3.97 + // state_map["bold"].attr({"fill" : "red"}); 3.98 + // state_map["bold"].scale(0.03, 0.03, 0 , 0); 3.99 3.100 }); 3.101 3.102 @@ -147,8 +171,11 @@ 3.103 var init = (function () { 3.104 display = Raphael("card-display", 340 ,215); 3.105 color = Raphael("color-select", 300, 100); 3.106 - style.bold = Raphael("bold", 100, 100); 3.107 - //style = Raphael("style-select", 200, 70); 3.108 + 3.109 + style.bold = Raphael("bold", 170, 107); 3.110 + 3.111 + style.classic = Raphael("classic", 170 , 107); 3.112 + 3.113 helvetica = display.getFont('HelveticaNeue', 700); 3.114 helvetica_I = display.getFont('HelveticaNeue', 800); 3.115 color_select_init(); 3.116 @@ -213,10 +240,12 @@ 3.117 3.118 var display_style_update = (function (){ 3.119 var style = null; 3.120 + 3.121 return (function () { 3.122 + var draw = draw_card(display); 3.123 if (style !== order.style){ 3.124 for ( var property in card ){ 3.125 - if (!Cards[order.style][(deref(property))]){ 3.126 + if (!draw[order.style][(deref(property))]){ 3.127 $("#user" + "-" + property).toggle(400);}} 3.128 style = order.style;} 3.129 });})(); 3.130 @@ -229,12 +258,13 @@ 3.131 company : "nothing", 3.132 website : "nothing" }; 3.133 3.134 - var check_text = (function (var_name) { 3.135 + var check_text = (function (var_name) { 3.136 + var draw = draw_card(display); 3.137 if (state[deref(var_name)] !== (card[deref(var_name)]).text){ 3.138 - if (Cards[order.style][deref(var_name)]) { 3.139 + if (draw[order.style][deref(var_name)]) { 3.140 card[deref(var_name)].ref.remove(); 3.141 card[var_name].ref = 3.142 - Cards[order.style][deref(var_name)]( 3.143 + draw[order.style][deref(var_name)]( 3.144 card[deref(var_name)].text,display); 3.145 state[deref(var_name)] = card[deref(var_name)].text; 3.146 }}});