Designtion Labs is a blog showcasing current programming projects.

Designtion Cell PDF Reader Improvements - custom page size and iPhone fixes

Designtion has made two improvements to the Cell PDF Reader service. First, there were some reported iPhone xhtml incompatibilities that have been resolved. Second, recognizing that mobile devices all have memory, screen, and internet connection differences, you can now customize the size of the PDF pages for optimization for your phone. 1x (~1k per page) is the default and should be compatible with all devices. However, you can choose up to 5x now (~5k per page) to display more content at a time for higher-powered devices. (5x looks better on the iphone in landscape view!) You can change this via the dropdown in your user home screen. The pages read / maximum pages ratio of each document will change accordingly.

Posted in wap, xhtml, wurfl, conversion, wml, opera mini, Projects, Safari, mobile, PHP by Designtion | No Comments »

Read Any PDF on Your Cell Phone

Designtion is proud to announce our new Cell PDF Reader^TM, which allows you to convert the text of any PDF on the web to your cell phone. This service stores the text on our site, splits the text into pages, saves the page number you’re on, allows you to password protect your PDFs and manage and delete them, and gives you a convenient index of your PDFs for quick access later.

You can search for PDFs on the web in two steps. Simply use the search page to choose a PDF to convert, and then confirm the title of the PDF. Cell PDF Reader is free and does not require registration (though registration is optional). Since it is part of Designtion Mobile, it should be compatible with any web-enabled wireless device (including iPhones).

1) First you need to get to our site. The easiest thing is to go to designtion.com on your phone and click on the Cell PDF Reader link. Here are some tips on how to do that.

2) Here is the Cell PDF Reader home page. If you have the address of a PDF you’d like to convert, enter it here — otherwise click on Search for a PDF to convert.

3) Enter in any search term you want - there are millions of PDFs on the web. Here we entered in ‘hacky sack’ and got 1,380 results.

4) Scroll through your results and click the Convert link for the PDF you want to convert.

5) The address and title of the PDF should populate the main form. If you prefer, rename the file to something more meaningful to you. When you’re ready, click Convert to Text.

6) Your PDF is converted successfully! The system assigns you a user ID here so you can log in later. You also have the option of entering an email address and password, or just reading the PDF you converted. Click Read PDF.

7) Now you’re reading the text of the PDF. Note that all the text in the PDF, including image footers, sidebars, and diagram text is converted, so text chunks may appear out of order, but the main text is there.

8) The page navigation (links to Previous / Next pages) is at the bottom of each page, as well as First and Last page links, links back to Designtion, and a link to your User Home. Click through a couple pages and then click on User Home.

9) This is your User Home, which lists the PDFs you’ve converted, what page number you’re on, and a link to delete each one. You can convert new PDFs and search for new ones from here. This page is meant to be bookmarked, but let’s password protect it first so that other people can’t read / delete your PDFs. Click Password Protect this page.

10) Here you can set a Code (password) that protects your page. For easy access, this code is included in plain text in the URL of your home page, so don’t choose a code that you use as a password anywhere else. You can enter your email address, which enables you to log in with your email and code instead of your user ID and code. Providing your email address will also allow us to send you occasional updates about new cool services from Designtion. Once you’ve entered your info and hit Submit, you will be given a permanent link to your User Home including your code [and email] in the URL. Click on this link.

11) Here is an example of a password protected User Home. From here you can access any of your PDFs or convert new ones. This is definitely the page you should bookmark!

Note: if a new PDF conversion request times out, try going back to your bookmarked User Home, and chances are your new PDF will be converted anyway and listed there.

This is a brand-new service and Designtion appreciates your feedback. Please tell us what you think!

Edit: You can now customize the page size of the PDFs shown on your phone.

Posted in xhtml, wurfl, conversion, wap, wml, Projects, mobile, PHP by Designtion | No Comments »

Designtion Mobile

Designtion is proud to announce our newest service, Designtion Mobile, making designtion available for mobile devices. Designtion now uses the WURFL repository as implemented by WALL 4 PHP, meaning that our home page will now detect over 22,000 devices and serve wml or xhtml data that’s compatible with your phone. To visit designtion mobile, simply go to designtion.com on your cell phone.

Most cell phones enable you to enter an address in manually. Try clicking on ‘web’ or ‘t-zones’ and clicking on your menu. From there you should be able to ‘enter address’. If your cellphone is not detected automatically, you can enter in the address http://designtion.com/?cell=true instead. Designtion recommends Opera Mini, a Java browser that you can download onto your phone that generally works better than the native browser on most phones. You can go to operamini.com on your cellphone to download it. Designtion Mobile is compatible with opera mini - if you want to see it in action in emulation on your computer, go to http://www.operamini.com/demo/, hit menu, enter address, and type in designtion.com.

Designtion currently offers two cell services - Designtion Trip Planner, which gives you on-the-go access to Chicago’s public transportation trip planner, and Designtion Cell PDF, a new service that allows you to convert PDFs to text you can read on your cell phone. The phone number link from our cell site also allows you to call us from your phone with a click of a button. Please give these new services a shot and tell us what you think!

Posted in wap, xhtml, wurfl, wml, opera mini, Projects, mobile, PHP by Designtion | 1 Comment »

Safari for PC

Wow!
http://www.apple.com/safari/

Apple released their super fast browser Safari for PC. So far it’s great. There’s a lot of the OS X feel that they ported over quite nicely, like the changing size preferences window and smooth drag and drop bookmark effects.

The form elements in page renders are OS X’s and even the fonts are the same. The embossed menus look the same as OS X as well except they’re darker. The grey is darker too and lacks that brushed metal feel. Still this is very impressive. This is way better than Apple’s early ports of Itunes for PC.

Currently I’m testing all of Designtion’s sites in this new browser on the market. So far, so good, as they have all been tested on Safari for OS X. Flash came preinstalled, which was a good move on Apple’s part.

Posted in Safari by Designtion | No Comments »

Updating Javascript Order Forms to be Firefox Friendly with Object Oriented Programming

There is a javascript script out on the internet that is quite useful for making dynamic shopping carts:

http://javascript.internet.com/forms/order-form.html

The code is credited as created by Paul DeBrino of infinity-rd.com. This script appears all over the web and has been online since at least 2002. It worked great with Internet Explorer, Safari, and Opera, and is the base of Designtion’s prices page.

It worked wonderfully until Firefox came along. Firefox generally handles websites more gracefully and is generally pretty forgiving, but perplexingly, is more strict about javascript variables then every other browser. Firefox has become my favorite browser on all platforms, and embarrassingly, it’s taken me a year to write an overhaul of the prices page to be compatible with Firefox.

It turns out that Firefox doesn’t respect custom properties of form elements. The script linked from above works like this: The radio button “Sauce” was assigned an additional custom property, “price”, for use in calculating the total price of the form.

<input name="Sauce" value="none" price="0.00" onclick="this.form.total.value=CheckChoice(this);" type="radio" />

Other variations of this form on the internet have used other values such as priorval, taxval, etc. for keeping track of additional variables. The script would then calculate the total by referencing these values like this:

hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);

The problem is that Firefox doesn’t support referencing these values at all. It won’t complain about the HTML when you add the additional properties to the input, but when you try to access them or use them in calculations you get undefined values and NANs, respectively. Firefox only respects input properties that are defined by the DOM, such as name, value, checked, readonly, disabled, etc.

I could have redone this by creating all of my variables as hidden inputs and just used their value property as variables. However, my pricing form has 204 variables total, and making an input for each seemed inefficient, especially since I was using the same properties over and over. It made sense to make this script object oriented. We can make a javascript object that has all of the custom properties we want and Firefox will like it:

function cartObject(){
this.price=0;
this.priorval=0;
}

You can add whatever properties you want–Designtion’s prices page uses design prices, programming prices, and hosting costs:

function designtionCartObject(){
this.designvalue=0;
this.progvalue=0;
this.additionalvalue=0;
this.priordesignval=0;
this.priorprogval=0;
this.prioraddvalue=0;
this.priorval=0;
this.price=0;
}

Then, you initialize the object like this:

var duckSauceObj = new cartObject();

Finally, you assign values to your custom properties in your object in InitForm(), so that your objects have the right values whenever the form is loaded:

function InitForm()
{
duckSauceObj.price=10.99;
sauceObj.priorval=0;
[...]
}

Now, we’ll modify checkChoice to take both the object (for calculating prices) and the radio button (for handling input) as inputs:

	function CheckChoice(cartObject, whichbox)
	{
			//Handle differently, depending on type of input box.
			if (whichbox.type == "radio")
			{
				//First, back out the prior radio selection's price from the total:
				document.myform.hiddentotal.value = eval(document.myform.hiddentotal.value) - eval(document.myform.hiddenpriorradio.value);
				//Then, save the current radio selection's price:
				document.myform.hiddenpriorradio.value = eval(cartObject.price);
				//Now, apply the current radio selection's price to the total:
				document.myform.hiddentotal.value = eval(document.myform.hiddentotal.value) + eval(cartObject.price);
			}
			else
			{
				//If box was checked, accumulate the checkbox value as the form total,
				//Otherwise, reduce the form total by the checkbox value:
				if (whichbox.checked == false)
					{ document.myform.hiddentotal.value = eval(document.myform.hiddentotal.value) - eval(whichbox.value); }
				else 	{ document.myform.hiddentotal.value = eval(document.myform.hiddentotal.value) + eval(whichbox.value); }
			}

			//Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
			if (document.myform.hiddentotal.value < 0)
				{
				InitForm();
				}

			//Now, return with formatted total:
			return(formatCurrency(document.myform.hiddentotal.value));

	}

Note: I deleted this statement (and its closing bracket) because it was not neccessary and messed up the references to cartObject:

with (whichbox.form)
{

Finally, you can call the modified checkChoice function like this:

<input name="Sauce" value="No Website" onclick="checkChoice(duckSauceObj,this);" type="radio" />

Make sure you don’t name your object the same name as your input name. This shouldn’t break things but does because firefox gets confused about what element or object you’re talking about.

Make sure to call InitForm() in your body tag to initialize the form and variables.

<body onload="InitForm();" onreset="InitForm();">

Voila! Now you have a Firefox-compatible object-oriented javascript pricing form.

A fully functional example of this code is available here: updated_pricing_form_ex.html

This should go without saying, but your form needs to do some sort of post-processing and validation, or at the very least, human validation before any transactions take place, as javascript (and HTML forms) are extremely hackable.

If you would like Designtion to design you a form like this please contact us.

Posted in Javascript, Projects by Designtion | No Comments »

Customized Designs Flash Banner and Build-Your-Own-Display Form

Designtion teamed up with Customized Designs, a very cool Colorado-based design company that creatively incorporates LEDs, fiber optics, unique materials, and more into their Lighted Liquor Displays. Designtion built a simple flash banner for the interactive “Build Your Own Liquor Display” section of the website:

The “Build Your Own Liquor Display” interactive form was also programmed and recently updated by Designtion. It features a page-by-page summary and progress report, complex javascript interaction and effects, and immediate pricing based on a variety of customizations including types of lighting, type of material, number of steps, length, finish, rails, and more.

Please visit Customized Designs and take a look at their truly innovative and creative products. The people over there are a pleasure to work with.

If you would like to have Designtion create your own customized form for your website, please contact us.

Posted in Javascript, Projects, PHP by Designtion | No Comments »

Copyright 2007 Designtion