GIF,ASP,article,will,walk,through,entire,proc
Quick Search for:  in language:    
GIF,ASP,article,will,walk,through,entire,proc
   Code/Articles » |  Newest/Best » |  Community » |  Jobs » |  Other » |  Goto » | 
CategoriesSearch Newest CodeCoding ContestCode of the DayAsk A ProJobsUpload
ASP/ VbScript Stats

 Code: 144,429 lines
 Jobs: 168 postings

 
Sponsored by:

 

You are in:

 
Login


 

 


Latest Code Ticker for ASP/ VbScript
Click here to see a screenshot of this code!Ping in ASP
By Michele_Garneri on 10/28

(Screen Shot)

Embed Real Player Object
By Ziae Mousavi m. on 10/27


Set Country --> Combobox
By Hohl David on 10/27


Client Side Sorting of records
By Ravi Rajan on 10/26


Recordset paging with images
By Ravi Rajan on 10/26


Click here to see a screenshot of this code!Online photo catalogue VBScript 2.1
By Ivan Loire on 10/26

(Screen Shot)

GPS 1.4 WYSIWYG
By Guo Xu on 10/25


Click here to see a screenshot of this code!A Network Monitor tool from ActivXperts Software Inc.
By Freddy Hofstadt on 10/25

(Screen Shot)

Socket samples based on Winsock, TCP/IP and client/server communication
By Ronny Bright on 10/25


Click here to put this ticker on your site!


Add this ticker to your desktop!


Daily Code Email
To join the 'Code of the Day' Mailing List click here!





Affiliate Sites



 
 
   

How to make Dynamic GIF Color Palettes

Print
Email
 

Submitted on: 4/30/2001 12:13:34 PM
By: Lewis Moten  
Level: Advanced
User Rating: By 3 Users
Compatibility:ASP (Active Server Pages)

Users have accessed this article 5025 times.
 

(About the author)
 
     In this article, I will walk you through the entire process on how to property create the GIF images, and then transfer them to my custom template file format. From there, an ASP page can read these templates, generate a color palette, and return a GIF image to the browser.

This article has accompanying files

 
 
Terms of Agreement:   
By using this article, you agree to the following terms...   
1) You may use this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.   
2) You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
3) You may link to this article from another website, but ONLY if it is not wrapped in a frame. 
4) You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.

There have been many times where I have been stomped on how I can allow users to customize the look of my sites, without sacraficing the quality of the site. The main problem comes when you want to allow users to change the colors, but you have Anti-Aliased images. The first thing I would usually do would be to take the image down to 2 colors, and make one of them transparent. This left the user with a color that they could not change, and an image with blocky edges.

Recently, I got an idea to see if I could change the palette of GIF images dynamically. I looked into the format of GIF's and got my hands on a Hex editor and found the solution was rather simple.

In this article, I will walk you through the entire process on how to property create the GIF images, and then transfer them to my custom template file format. From there, an ASP page can read these templates, generate a color palette, and return a GIF image to the browser.


Creating the GIF

For our demonstration, I will create a "Go" button. These can commonly be used to submit search queries and navigation drop downs. I use 2 colors to make this image. Black (000000) and White (FFFFFF). It is important to use these two colors so that we can get a full color range in our palette between the two colors with the highest contrast.

I created an Anti-Aliased circle to prevent the blocky edges, and I also created the text with Crisp Anti-Aliasing as well. After the image is finnished, we need to convert the color mode to Indexed Color (256 colors or less). I prefer to index to 8 colors. It keeps the palette small, yet retains most of the Anti-Aliasing that we need.

It is important to make sure that the colors are not forced when using Adobe. This helps our color table to be indexed from the brightest color to the darkest. If we force the colors, then two colors, Black and White, will prefix our gradient - making it a little harder for us to work with the process. Take a look at the color table (Image\Mode\Color Table ...).

To help me identify the colors easier later on when looking at the binary data of the image, I like to change these colors to the following values:

  1. #FFFFFF rgb(255,255,255)
  2. #DCDCDC rgb(220,220,220)
  3. #B3B3B3 rgb(179,179,179)
  4. #707070 rgb(112,112,112)
  5. #3F3F3F rgb(63,63,63)
  6. #1C1C1C rgb(28,28,28)
  7. #070707 rgb(7,7,7)
  8. #000000 rgb(0,0,0)

Creating a Template

Our image is ready to be saved. I saved mine as "GoButton.gif". The next step is the fun part. You need to get a Hex Editor to view the binary data of the image. I like the popular program Ultra Edit. When you open the file, you should see information displayed simular to that in the following image.

Notice that I hilighted a specific range of data. If you look at the colors that I suggested to replace the palette colors, you will see that they match. Next - open a text editor such as Note Pad and type in all the characters as you see them. You may want to double check to make sure you didn't forget any and they are written correctly. It is ok to use spaces and new lines to help you read the text file easier.

Now we will start adding tags to represent each color. The tags range from [1] and incriment to the maximum color. In my case - I chose 8 colors, to I will replace each one (from lightest to darkest) with a tag. Look at the image below for a detailed representation.

You may have noticed some extra information in the header of the text file. The number 8, and two colors FFFFFF and 000000 and they are all delimited by the semicolin ";" character. The first number represents how many colors there are in the palette. The second item represents the default color to display as the first color. And the third itme represents the last default color. In this case, I chose black and white so that I will see the image in its original color scheme when it rendures if I do not specify other colors.

Creating the ASP

Our ASP page will need some data passed to it from the query string so that we know what image to return, and the colors to display it in. I have also set it up with a Debug flag.

SRC Source of the image. (Can be Physical "C:\GoButton.txt" or a URL "/GoButton.txt")
FirstHex Hex color to start the color range with
LastHex Hex color to end the color range with
Debug Set to True. If viewing the page directly within your browser, you will be able to see custom error/success messages along with the HEX values defined in the template

If our ASP page comes into any errors, such as a non-existing file, a transparent GIF will be returned so it will look as if the Image didn't load, but it will not display the common "broken-link" graphics that you would normally see in browsers.

Our page looks for the text file and loads it into memory. If a color was not specified or invalid, (such as FirstHex or LastHex), then it will replace that color with the default color.

Our color palette is then created. We attempt to easily phase each part of the first color (Red, Green, Blue) into the LastHex's color parts. We then loop through each of the final color range and replace the tags ([1], [2], ...) that were defined in the original text file.

The last part is where we actually return the binary data. We loop through each hex value and convert it to the byte it represents. The Response.BinaryWrite method is used along with defining the content type as "image/gif". The browser understands the content type and rendures the image!

In Conclusion

This is an interesting approach to solving custom color problems on websites. You may want to note however, that this may put a damper on the performance of your website if it has a lot of traffic. The constant reading files from the file system will be your bottleneck. The good news is most recent browsers will cache the images returned as long as the query string matches.

I may have been a little short comming on the workings of the ASP code. You can view the code in "Image.asp" for more detailed information of the process going on. Also, a demonstration is included with the zip archive that will let you dynamically change the image that is loaded along with its color. 4 Other image templates are included for your enjoyment.

This article was written by Lewis Moten on April 30, 2001.

winzip iconDownload article

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. Afterdownloading it, you will need a program like Winzipto decompress it.

Virus note:All files are scanned once-a-day by Planet Source Code for viruses,but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:
1)Re-scan downloaded files using your personal virus checker before using it.
2)NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

If you don't have a virus scanner, you can get one at many places on the net including:McAfee.com

 
Terms of Agreement:   
By using this article, you agree to the following terms...   
1) You may use this article in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.   
2) You MAY NOT redistribute this article (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
3) You may link to this article from another website, but ONLY if it is not wrapped in a frame. 
4) You will abide by any additional copyright restrictions which the author may have placed in the article or article's description.


Other 96 submission(s) by this author

 

 
Report Bad Submission
Use this form to notify us if this entry should be deleted (i.e contains no code, is a virus, etc.).
Reason:
 
Your Vote!

What do you think of this article(in the Advanced category)?
(The article with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor See Voting Log
 
Other User Comments

 There are no comments on this submission.
 
Add Your Feedback!
Note:Not only will your feedback be posted, but an email will be sent to the code's author in your name.

NOTICE: The author of this article has been kind enough to share it with you.  If you have a criticism, please state it politely or it will be deleted.

For feedback not related to this particular article, please click here.
 
Name:
Comment:

 

Categories | Articles and Tutorials | Advanced Search | Recommended Reading | Upload | Newest Code | Code of the Month | Code of the Day | All Time Hall of Fame | Coding Contest | Search for a job | Post a Job | Ask a Pro Discussion Forum | Live Chat | Feedback | Customize | ASP/ VbScript Home | Site Home | Other Sites | About the Site | Feedback | Link to the Site | Awards | Advertising | Privacy

Copyright© 1997 by Exhedra Solutions, Inc. All Rights Reserved.  By using this site you agree to its Terms and Conditions.  Planet Source Code (tm) and the phrase "Dream It. Code It" (tm) are trademarks of Exhedra Solutions, Inc.