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  		}}});