 |
 |
 |
||||
 3D 3D Photo Gallery (Part 1) 3D Photo Gallery (Part 2) Audio Poor Man's MIDI Make A Metronome iPod Tricks (Part 1) iPod Tricks (Part 2) iPod Tricks (Part 3) Laugh Track Machine Audio Player with Reverb Shepard Melody RB Phone Home Build a Drum Machine Custom Controls and Windows Double Click Listbox Draggable Metal Window Double Click Canvas Custom Buttons Custom Buttons Part II iTunes-style Listboxes Custom Controls General RB Scrolling Windows Using Mesage Dialogs Case-Sensitive Word Finder Introduction to Stacks Wiggle Window JPEG in PDF Listbox Checkboxes Background Applications Listbox Auto-Find Virtual Volumes Time Tracker Software Distribution (Part 1) Software Distribution (Part 2) Software Distribution (Part 3) Software Distribution (Part 4) Exceptions Tips and Tricks Text Clippings Made Easy Graphics Drawing a Simple Gradient The SpriteSurface: Space Game Image Spinner Cropping Graphics (Part 1) Cropping Graphics (Part 2) Cropping Graphics (Part 3) Cropping Graphics (Part 4) Shimmer Graphics Lissajous Figures Simple Screen Capture Vector Graphics Kaleidoscope Images Stegonography Spirals! Image Table RB Magnifying Lens Screen Capture Color Picker Tutorial Hacks Ghost Grab Speedy Mouse Extension iTunes Plugins iTunes Skinner Mac OS X Global Hot Key Event (Carbon Events) Login Welcomer (Carbon Events) Add/Remove Buttons Resizable Sheets Mac OS X Preferences Window Using Sheets in REALbasic Build a Bundle (Part 1) Build a Bundle (Part 2) Dock Your Passwords Mac OS X Debugging REALbasic Mac OS X Icon Tutorial Animate Your Dock RB and the Command Line Menus Window Menu Templates Menu Listbox Menu Novelty Guessing Game Calendar Trivia Tile Mixer Zip Code Finder Happy Valentine's Day Merlin Simulator (Part 1) Merlin Simulator (Part 2) Merlin Simulator (Part 3) Buzzword Machine AppleSoft BASIC Printing Print to PDF Registration Registration Code Validation Network Registration Codes Resources Picture Extractor (Part 1) Picture Extractor (Part 2) Serial Caller ID (Part 1) Caller ID (Part 2) Caller ID (Part 3) Speech Speech Recognition Socket Communication Easy Peer-to-Peer File Sharing MacPAD Version Checking Display Web Image In Canvas HTML IMG Tags Version Tracking Even Smarter Instant Messaging Web Tiler JavaScript and REALbasic Stock Ticker (Part I) Stock Ticker (Part 2) AIM Mate XML Manipulation Simple XML Introduction Video Big Brother Video Capture Note: All articles without a byline were written by Erick Tejkowski. When cleaning the site I removed them because the code differed from page to page, and I have yet to put them back in.
Tell us about a bad link. |
 |
Q: When is an image not an image? Background This week's project idea was submitted by ResEx reader, Steven Canfield. If you'd like to download his project, you can get it here. Otherwise, follow along with this tutorial to see how he accomplishes the "voodoo that he do". Build the Interface Launch REALbasic and open the default window: Window1. Add the following controls to the window:
Add the Code With our interface built, double click the PushButton1 to open the Code Editor. In the Action event of the PushButton, add this code: 
Yep, that's it! Now, to explain what this code does. The main idea behind this code is to open an image, scan through each pixel in that image, and finally recreate it as an HTML table. To simplify matters, we'll name the file "HTML picture.html" and place it on the desktop. Next, we create two loops. One loop scans through the image one row at a time. The other loop (which is embedded within the first loop) scans through all columns of the image. As we loop through each pixel of the image, we extract the red, green, and blue color information from the pixel. Using this color information, we then construct the individuals cells of an HTML document. By now, I bet you're wondering what that RGBSurface stuff is about. An RGBSurface is a useful tool for scanning through the pixels of an image at high speed. The speed increase over the Pixel property of a Graphics class is amazing, so be certain to use it whenever possible. Another thing you should know about this code involves the slider. The slider is included for two reasons. First, it allows you to stretch the image to different widths. This gives you the opportunity to play with variations of the same image. It also serves a second important role. Despite using HTML as a standard, not all browsers are created equal. The slider permits you to tweak the HTML to suit your particular browser. If you plan on publishing this HTML, you may simply have to find a happy medium for the slider value that agrees with the output of popular browsers. One final note... use small images (32x32 images work well) or you may be waiting awhile for your browser to attempt to render the image. Browsers don't render tables particularly fast and it is easy to imagine how much a table of 100 rows and columns could slow down any browser. The best advice is to experiment with various image sizes until you find something that works for you. Conclusion When you're done, select Debug-Run to load your favorite image and convert it into HTML. If you'd like to download this week's example instead of typing it in, you can download the completed project. See you next week! |
|
|||
|
Please support ResExcellence by Visiting our Sponsors. One click makes a difference. |
||||||
 |
 |
 |
 |