[Pro] Custom Engraving

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

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

  1. 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

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

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
http://scripty.walterdavisstudio.com/engrave/


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

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

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

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

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

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:

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

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

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

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


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