[Pro] Custom Engraving

Nate · November 1, 2011, 10:31pm

Could I create something that makes text appear in a selected area, when you type in a text box?? as apple does here
http://store.apple.com/us/engrave/MC544LL/A?select=select&product=MC544LL%2FA

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 2, 2011, 2:47pm

You can do this for real with PHP and the ImageMagick server-side library. You will need to do some programming, though. If you just want to fake it, you can carefully set up your CSS so the text appears engraved, and just float HTML over the top of the image.

As far as getting the customer’s text to appear there, that can be done with JavaScript[1] or on the server with Ruby or PHP or another scripting language.

Walter

Custom Engraving

On Nov 1, 2011, at 6:31 PM, Nate wrote:

Could I create something that makes text appear in a selected area, when you type in a text box?? as apple does here
http://store.apple.com/us/engrave/MC544LL/A?select=select&product=MC544LL%2FA

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nate · November 2, 2011, 4:16pm

Yes, all I want is exactly what you have on your demo page at
http://scripty.walterdavisstudio.com/engrave/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 2, 2011, 4:42pm

http://scripty.walterdavisstudio.com/engrave/custom.freeway.zip

That’s the file, you’ll also need the latest Protaculous Action installed in Freeway before you open it.

The CSS uses CSS3 text shadow attributes to make the embossed/engraved look to the text. That’s hot mandatory, but it makes the effect look its best. IE < 9 users won’t see that properly, but then they don’t expect much either, based on bitter experience.

As you look through the document, pay particular attention to the bits I added with the Extended dialog:

The text area field has its name set through the third tab from the left in the Inspector, and then the Item/Extended dialog was used to make sure the ID matched
Each of the HTML boxes that show the engraved text have their class set to ‘engrave’ through Item/Extended
The colored iPod text boxes are set to class=“engrave color” through the same method
The text-shadow effects are added through the Extended button in the Styles palette/Edit Style dialog

And finally, there is a tag-only style added to the Styles palette to create the color variant of the style (just changes the text color so it stands out better on the darker ground).

Walter

On Nov 2, 2011, at 12:16 PM, Nate wrote:

Yes, all I want is exactly what you have on your demo page at
Custom Engraving

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nate · November 6, 2011, 8:05pm

Thank you very much.
Is there any way to restrict the size of the text box?
Or limit the user to a certain amount of characters?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 7, 2011, 1:42am

Sure.

var limit = 20;
$('engrave').observe('keyup', function(evt){
  if($F(this).length < limit){
    var txt = this.getValue().split(/[rn]+/);
    $$('.engrave').each(function(elm){
      var tpl = elm.down('p').clone();
      elm.update();
      txt.each(function(line){
        var p = tpl.clone();
        elm.insert( p.update(line) );
      });
    });
  }
});

Set limit to the number of characters you want to allow.

Walter

On Nov 6, 2011, at 3:05 PM, Nate wrote:

Thank you very much.
Is there any way to restrict the size of the text box?
Or limit the user to a certain amount of characters?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 7, 2011, 1:32pm

I just glanced at this again, and realized that while it will stop updating the example area, it doesn’t stop the user from typing more text than allowed. Try this, which does both:

var limit = 20;
$('engrave').observe('keyup', function(evt){
 if($F(this).length < limit){
   var txt = this.getValue().split(/[rn]+/);
   $$('.engrave').each(function(elm){
     var tpl = elm.down('p').clone();
     elm.update();
     txt.each(function(line){
       var p = tpl.clone();
       elm.insert( p.update(line) );
     });
   });
 }else{
    this.setValue($F(this).substr(0,limit));
    alert('Too much text!);
  }
});

Walter

On Nov 6, 2011, at 8:42 PM, Walter Lee Davis wrote:

On Nov 6, 2011, at 3:05 PM, Nate wrote:

Thank you very much.
Is there any way to restrict the size of the text box?
Or limit the user to a certain amount of characters?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nate · November 8, 2011, 1:57pm

I have created the page with two areas for the engraving.
http://elysium.aswebsitedesign.com/engraving.html

That page works fine, yet when I tried to add the additional code for the limits on the text boxes, the engraving no longer works, including my rollover for my add to cart button.
http://elysium.aswebsitedesign.com/engravetwo.html

Do I need to place the code somewhere else?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 8, 2011, 2:49pm

Where did you copy the code for this second try from? It’s full of encoded quote marks (curly typographic quotes) and so the JavaScript doesn’t even parse, let alone run. But more worrying, you’ve got an observer for the keyup event nested inside another observer for the same event. This is only going to capture every other keystroke – if it works at all!

I’m trying to reconcile what I wrote with your desired layout. The example I posted used a single text box and did line-breaks automatically, either based on line length or the actual text entered by the user. If you want to have a single text box for each line, then the code should be different, because you don’t need to line-break the user’s input, and you don’t need to put the P tags around each line, either.

Here’s another way to look at this which makes minimal changes to the layout and code. The only thing you have to do is rename your text output boxes to match the input box that should fill them. So you have engrave and engrave2, make the HTML boxes you set to show that text have the names engraveOut and engrave2Out. Then replace all of the code in your page with just this little bit:

gist.github.com

https://gist.github.com/walterdavis/1347919

simplepastiefile.js

$$('#engrave,#engrave2').invoke('observe','keyup', function(evt){
	var limit = 20; 
	if($F(this).length < limit){ 
		var txt = this.getValue();
		var elm;
		if(elm = $(this.readAttribute('id') + 'Out')){
			elm.down('p').update(txt)
		}
	}else{ 
		this.setValue($F(this).substr(0,limit));

This file has been truncated. show original

This one block of code handles both of the lines of text, and if you wanted a third, all you need do is add a properly named and id’d text input box and matching output box. Now you no longer have to set the classname on the elements you want to have the text play back in, the only thing you have to do is name them correctly in the Title field of the Inspector. You must include placeholder text in the desired style within each of your ‘Out’ boxes, though, otherwise there’s nothing to replace.

Walter

On Nov 8, 2011, at 8:57 AM, Nate wrote:

I have created the page with two areas for the engraving.
http://elysium.aswebsitedesign.com/engraving.html

That page works fine, yet when I tried to add the additional code for the limits on the text boxes, the engraving no longer works, including my rollover for my add to cart button.
http://elysium.aswebsitedesign.com/engravetwo.html

Do I need to place the code somewhere else?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nate · November 17, 2011, 1:39pm

I have created another page from scratch. I used the new line of code that you posted and I placed it in the function body in the prototype packed library.
The page still does not recognize my code. What have I done wrong?

http://elysium.aswebsitedesign.com/engraving.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 17, 2011, 1:57pm

Your output boxes have the classnames engrave and engrave2, but instead they need to have the ID (Title in Freeway’s interface) engraveOut and engrave2Out. In your layout, these IDs are set to item15 and item15a, so just change those as noted and the effect should work. You can remove the class attributes you added using the Extended dialog, that was only needed for the other example.

Walter

On Nov 17, 2011, at 8:39 AM, Nate wrote:

I have created another page from scratch. I used the new line of code that you posted and I placed it in the function body in the prototype packed library.
The page still does not recognize my code. What have I done wrong?

http://elysium.aswebsitedesign.com/engraving.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nate · November 18, 2011, 2:31pm

Alright, that worked. Thank you for all of your help.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options