Using ColdFusion’s CFImage tag to create an iPhone icon red dot alert effect
May 27, 2009 4:05pm by swood |
ColdFusion |
Here is how to create the red dot overlay commonly used on the Apple iPhone and iPod to indicate various conditions within application such as waiting email, apps needing updating, etc.
Note: this requires ColdFusion 8.01
Here is an example of the effect we are going to create
Step 1: Get your images in order
You will need some icons and the 3 overlay images that you can download here. If you like the size of these images, you can use them as is, otherwise you will probably have to create you own to your own size specifications.
My iPhone icon
red dot overlay – left
red dot overlay – center
red dot overlay – right
Step 2: Write yer code
This code will re-create the following DEMO
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| <cfparam name="form.minutesLogged" default=""/>
<cfif form.minutesLogged neq "">
<cfscript>
mainImage = ImageRead("icon/icon_watch_8px.png");
ImageSetAntialiasing(mainImage,"on");
overlayLeft = ImageRead("overlay/red_overlay_left_sh.png");
overlayCenter = ImageRead("overlay/red_overlay_center_sh.png");
overlayRight = ImageRead("overlay/red_overlay_right_sh.png");
lenMinutes = Len(form.minutesLogged);
//Construct the Overlay Image
//left image: 13px
//center image: 7px
//right image: 12px
x = 2;
y = ImageGetHeight(mainImage) - ImageGetHeight(overlayCenter);
ImagePaste(mainImage,overlayLeft,x,y);
//Drop in center pieces as necessary
x = x + 13;
for(i=1; i lt lenMinutes; i++) {
ImagePaste(mainImage,overlayCenter,x,y);
x = x + 7;
}
ImagePaste(mainImage,overlayRight,x,y);
//Construct the Overlay Image
//Write Number
x = 11;
y = ImageGetHeight(mainImage) - 11;
textStyle = StructNew();
textStyle.style = "bold";
textStyle.size = 12;
textStyle.font = "Arial";
textStyle.underline = "no";
ImageDrawText(mainImage,form.minutesLogged,x,y,textStyle);
//Write Number
ImageWrite(mainImage,"temp/icon_watch_8px.png");
</cfscript>
<cfelse>
<cfscript>
mainImage = ImageRead("icon/icon_watch_8px.png");
ImageWrite(mainImage,"temp/icon_watch_8px.png");
</cfscript>
</cfelse></cfif>
<div style="padding: 10 10 10 10;">
<p>cfImage iPhone Demo</p>
<p>Original Image: (icon with 8 pixel white space border)</p>
<p><img src="temp/icon_watch_8px.png" style="padding:10 10 10 50;"/></p>
<cfform action="#cgi.SCRIPT_NAME#" method="post">
<cfinput name="minutesLogged" value="#form.minutesLogged#" size="10"/>
<cfinput type="submit" name="submitValue" value="Enter Minutes"/>
<a href="index.cfm">reset</a><br /><br />
</cfform>
</div> |
Recent Comments