|
|
|
Access Your PC From The Road
Have you ever sat in front of your computer and wished you could show someone else what appeared on your screen? Maybe you were experiencing a problem, or couldn't figure out how to make something work, but you knew if someone else could see what...
All about the new SCMAD Certification Exam
Introduction
The mobile market is envisioned as the next technological wave by leading industry experts. With approximately 150 million mobile phones – roughly 3 times the user base as that of desktop computers – it might well be...
Email Spam and Phishing
It seems like the volume of email spam has doubled in the last month. Increasingly, we receive daily emails for better mortgage rates, pharmaceutical discounts, and offers to enlarge body parts we don’t even have.
The next generation of...
Five Free Tools To Help Make Your Business Grow
One of the great things about the net is all the free things you can find and use. Uh-oh, there's that word again, "free'. It's got to be one of the most over used words ever, especially on the net! Still, it never fails to thrill, or set the...
Streaming Audio Made Easy
MP3 Sound Stream - Sound Bytes by Quentin Brown December 16, 2003 Internet streaming audio is the most prevalent form of multimedia on the Internet today according to Creative, one of the leading companies in the sound hardware field. Over the last...
|
|
| |
|
|
|
|
|
|
PIM Team Case Study: Creating Text Effects With PHP and GD
PIM Team Case Study: Creating Text Effects With PHP and GD
See how you can create graphic effects on text with PHP and GD - drop shadows, arcs, fonts and colors.
Problem
A-tec Signs and Sraphics Inc. launched a web site with the idea to sell decals online. To achieve better customers ineterest the website had to integrate online decal builder. The company is offering also decals for vehicles which brought some specific requirements to the builder like having the decal text turning arround 4 types of arcs.
Goals
- Provide users with preview area
- Allow visitors to choose font and color
- Allow adding drop shadow and selecting drop shadow color
- Allow turning the text into arcs
- Real Time calculating
Solution
Because of the need for increasing customers interest we had to think about not for perfect math formulas when showing the graphs in the preview area, but for the people who will look at them.
As we will reaveal below, there were few problems going arround human appreceptions for something 'perfectly smooth' and the matchematical perfect figures.
Methodology
We were going to extensively use PHP GD library for the text effects. It provided easy changing of fonts and colors, adding drop shawdows and rotating the texts.
We had also to create color palletes which to appear when user click and disappear when color is selected (You can personally try the decals creating here). Using hidden layers and javascript was supposed to do the work.
The main problem in this site was to create 4 types of arcs so when the user selects one of them the text is created arround imaginary arc (like in the vector graphical softwares). We were going to study Bezie's formulas and create these arcs with its help.
Implementation
PIM Team Bulgaria had the task to build the full functional online decals builder with the following features:
- Decal background
Some users were supposed to have their decals placed on colored background. We had to allow the preview area to be painted in a selected background. First we created the image in temp folder:
// the name of destination image
$dest='decals/'.time().'.jpg';
//the background
imagefilledrectangle ( $im, 0, 0, 590, 60, $colors[$_POST['bcolors']]);
$colors array contains the available color which are stored by the administrator in the database.
Thus, when the visitor selects a background it is passed as parametter to imagefilledrectangle function.
- Font selection
Users should be able to select fonts for their future decals. Knowing that we can't consider all the fonts will be available on all visitor's computers we had to upload them on the web server directory.
We allowed the admin to manage the fonts, adding their names and uploading files in admin area.
The fonts in the select box came from the database. Selected font was passed in the call to imagettftext funtion which is drawing on the previously created image.
- Color Selections
The color selections had to be a palettes which appear when user clicks and disappear when color is selected. The palette had to look as a table with colors and these colors are also defined in the
admin area so they had to come dynamicly. We had to seed a static javascript function with dynamic content.
We created a PHP cycle which was taking the colors from the database and then creating a string for HTML table. This table is then passed to a javascript function which creates the palletes with the help of hidden layers:
function showTable(table)
{
mouseX = window.event.x + document.body.scrollLeft+25;
if(table=='background')
{
var content="";
var y=460;
}
if(table=='fonts')
{
var content="";
var y=690;
}
if(table=='shadows')
{
var content="";
var y=810;
}
document.getElementById('tabler').style.pixelLeft=mouseX;
document.getElementById('tabler').style.pixelTop=y;
document.getElementById('tabler').style.visibility='visible';
document.getElementById('tabler').innerHTML=content;
}
Of course, once the user select the desired color we had to hide the pallette:
function setColor(elid,color,fromid,shc)
{
document.getElementById(elid).value=color;
document.getElementById('tabler').style.visibility='hidden';
}
Thus we created nice palettes which appear and disappear on a single click and don't take much space on the screen.
- Drop Shawdows
The decals offered has the ability to have a drop shadow added so we had to add this option to the online builder. PHP however didn't offered a nice function for that. We created a procedure which draws the texts twice - once the original 100% saturated text and once the shadow with a percentage of the color and appropriate displacement. Of course the shadow was drawn on the image before the main text.
@imagettftext($img, 20, $gr[$i], $x+$dx, $ys[$i]+$dy, $scolors[$shadowcolor], "fonts/".$_POST['fonts'],$word[$i]);
- Arcs
The main problem came when we had to 'rotate' the texts thru arcs. First we created perfect Bezie funtion which to draw the curves and adjust the letter above them. But what a surprise - the curves looked perfect alone, but when we adjusted the letters above them they seemed rough.
After studying this problem we realised that the rough screen resolution and the disability to antialise the images wouldn't allow us to create nice arcs. We were standing against insoluble problem.
We decided to create few arcs with a graphical software (CorelDraw) and to see what could be wrong.
We noticed that Corel's curves were looking great after they are manually adjusted. However you can't just leave the program to create perfect curves automaticly. A human eye was needed to judge when a curve looks right and when not.
We got a totally different direction. There wasn't an universal function to help us. The solution we found was to 'manually' adjust each letter. We created a procedure with cases which were adjusting each letter on the appropriate place and with appropriate rotation depending on how long was the text. It worked!
We created 2 arrays for each arc type - one array with the positions and one array with the rotations.
The rest was simple:
if($arctype)
{
$start=(35-$l)/2;
if($start%2) $start+=1;
$gr=array_slice($gr,$start,$l);
$ys=array_slice($ys,$start,$l);
}
if(!$arctype)
{
$ys=array();
$gr=array();
//making the arrays
for($i=0;$i<$l;$i++)
{
array_push($ys,50);
array_push($gr,0);
}
}
You can go on the atec's site and try the arcs we achieved (http://atecsigns.com/decal/step_1.php).
Results
Now A-tec Sings's web builder creates perfect decals with graphs, calculates the price and allows you to add the decals to your shopping cart and chgeckout (the shopping cart software is also created by PIM Team Bulgaria).
The builder allows the visitor to create the desired decals with any color, dropped shadow, background and shape, to preview it and to calculate the cost for different sizes and quantities.
The website and builder were promoted with massive radio advertising company. At that time it was the only decal builder which allowed creating texts arround arcs.
Conclusions
- Use GD to create text effects
- Do not forget that you can create you own functions for what GD does not offer
- Do not always search for math perfect formulas. The graphical effects are intended to the human eye
- Load fonts in the server
- Use javascript and hidden layers to achieve great flexibility
About the Author
Bobby Handzhiev is senior developer in PIM Team Bulgaria
|
|
|
|
|
| Tucows Downloads - Download Freeware and Shareware Software |
| Download freeware, shareware, and demos. Maintains over 45000 software titles that are tested, rated, reviewed and ready to download. |
| www.tucows.com |
|
| Free Software Downloads and Software Reviews - Download.com |
| Download shareware, freeware and Demo software for PC, Mac, Linux, and Handhelds categorized into categories, plus software reviews. |
| www.download.com |
|
| Computer software - Wikipedia, the free encyclopedia |
| This includes application software such as a word processor, which enables a ... Application software is often purchased separately from computer hardware. ... |
| en.wikipedia.org |
|
| Shareware.com - Search for shareware programs and free software ... |
| Search for shareware programs from more than a dozen downloadable software directories. |
| www.shareware.com |
|
| Jumbo: Free & Shareware MP3 files, Games, Screen Savers & Computer ... |
| Source of free and shareware computer programs and utilities for PC and Mac. Evaluate software and read product reviews. Download games and screen savers. |
| www.jumbo.com |
|
| Computer Software in the Yahoo! Directory |
| Browse categories featuring sites devoted to computer software, including shareware and freeware download sites, operating systems, desktop customization, ... |
| dir.yahoo.com |
|
| IEEE Software |
| IEEE Computer Society's magazine covering all aspects of software, including software engineering. |
| www.computer.org |
|
| Free Downloads on ZDNet | Shareware, Trialware, Evaluation Software |
| ZDNet's Software Directory is the Web's largest library of software downloads. Covering software for Windows, Mac, and Mobile systems, ZDNet's Software ... |
| downloads.zdnet.com |
|
| FSF - The Free Software Foundation |
| Free software is a matter of liberty not price. Think of "free" as in "free speech". |
| www.fsf.org |
|
| Apple - Software |
| Software products for your digital life. ... The perfect addition for professional review. QuickTime Broadcaster. Encoding software for live events. ... |
| www.apple.com |
|
| Open Directory - Computers: Software |
| In Partnership with AOL Search. about dmoz | report abuse/spam | help. the entire directory, only in Computers/Software. Top: Computers: Software (38471) ... |
| dmoz.org |
|
| freshmeat.net: Welcome to freshmeat.net |
| About: The Web browser is probably the most frequently used software today, ... Web professionals can use the software for functional testing and regression ... |
| freshmeat.net |
|
| Software - GNU Project - Free Software Foundation (FSF) |
| Listing of the GNU software packages. |
| www.gnu.org |
|
| Sun Software |
| Get enterprise-class software--Solaris 10 OS, the Java Enterprise System, ... Sun Java StorageTek Software reduces cost and complexity with a single, ... |
| www.sun.com |
|
| Internet Real Estate.com -- owns and operates a portfolio of the ... |
| SOFTWARE.COM · SWEEPSTAKES.COM · PHONE.COM PODCAST.COM ... Software.com | Sweepstakes.com | Phone.com | Podcast.com | Shop.com | Safety.com ... |
| www.internetrealestate.com |
|
| Joel on Software |
| A weblog by Joel Spolsky, a programmer working in New York City, about software and software companies. |
| www.joelonsoftware.com |
|
| Amazon.com Software: Computer & video games, business, accounting ... |
| Online shopping for computer & video games, business & office productivity software, software from Microsoft, Apple, Adobe & more; accounting, antivirus, ... |
| www.amazon.com |
|
| IBM Software - Home Page |
| IBM home page for all of its software products, including Lotus and Tivoli, with keyword search, category browse and AZ product names. |
| www.ibm.com |
|
| Opera web browser: Homepage |
| Copyright © 2006 Opera Software ASA. All rights reserved. Skip navigation. Opera Software ... Copyright Opera Software ASA . All rights reserved. ... |
| www.opera.com |
|
| Google Directory - Computers > Software |
| Search only in Software Search the Web ... Software Categorized by Letter: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ... |
| www.google.com |
|
|