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.

REALbasic for Dummies
by Erick Tejkowski

$19.99 @ Amazon

Files are in Stuffit 6.5 or earlier, or ZIP format.
Download Stuffit Expander

Tell us about a bad link.

Cropping Graphics Part III 03-05-03

Due to illness, I was unable to post the third part of the Cropping Graphics tutorial last Thursday. To help you catch up, we'll cover two tutorials this week. Instead of the usual REALbasic News, today we'll look at Part 3 of the tutorial. Then, next time we'll complete the project. These tutorials cover the basics of how to implement click-and-drag graphics selection and cropping, like you'll find in many popular applications (e.g.Photoshop, iPhoto, and the Finder). This week we'll add some more color and give the user another selection choice.

The tutorial emulates a Cocoa project available from Apple. As we progress through the project each week, we'll add various features to mimic the original Apple example. So, go check out the original code and come back here ready for some REALbasic coding. NOTE: This demo is made with OS X in mind.

Augment the Interface
Launch REALbasic and open a copy of the last project. Add another PopupMenu control (named PopupMenu2) to Window1. Click the Edit button in the InitialValue property of PopupMenu2 in the Properties window. In the dialog that appears, add the following words (each on its own line): Plain, Finder, iPhoto. Then, edit the existing PopupMenu1 control. Click the Edit button in the InitialValue property of PopupMenu1 in the Properties window. In the dialog that appears, add the color "Gray" ("Grey" for you Canadians. :-) You can position the controls anywhere in the window that you want. Here's what a sample interface might look like.

That's it for the interface additions this time. Let's move on to the code.

Add the Code
Double-click the Window Editor of Window1 to open the Code Editor. Click on the existing DrawMask method and change its code to:

  
  pictureMask = newpicture(canvas1.width,canvas1.height,32)
  select case popupMenu1.listindex
  case 0
    //red
    pictureMask.graphics.foreColor = rgb(255,0,0)
  case 1
    //red
    pictureMask.graphics.foreColor = rgb(0,255,0)
  case 2
    //blue
    pictureMask.graphics.foreColor = rgb(0,0,255)
  case 3
    //grey
    pictureMask.graphics.foreColor = rgb(200,200,200)
  end select
  pictureMask.graphics.fillrect 0,0,canvas1.width,canvas1.height
  pictureMask.mask.graphics.foreColor = rgb(192,192,192)
  pictureMask.mask.graphics.fillrect 0,0,canvas1.width,canvas1.height
  

Then, navigate to the MouseDrag event of Canvas1 Remove the code that you have there in favor of the new code. This bit of code incorporates features in the first and second parts of this tutorial. It also adds the new iPhoto selection style. Further, it takes the new PopupMenu2 control into account. Because this code snippet is a tad lengthy and exta-wide (for web browsers), I stuck it in a textbox for easier "copy and pasting".

//Canvas1.MouseDrag dim g as graphics g=pictureSrc.graphics if lastx<>x OR lasty<>y then lastX = X lastY = Y g.foreColor=rgb(200,200,200) g.drawpicture scenery,0,0 g.drawrect startX,startY,lastX-startX,lastY-startY g=me.graphics g.foreColor=rgb(200,200,200) g.drawpicture scenery,0,0 select case popupMenu2.listindex case 0 //plain style select case popupMenu1.listindex case 0 //red g.foreColor = rgb(255,0,0) case 1 //green g.foreColor = rgb(0,255,0) case 2 //blue g.foreColor = rgb(0,0,255) case 3 //grey g.foreColor = rgb(200,200,200) end select if startX <lastX and startY<lastY then g.drawrect startX,startY,lastX-startX,lastY-startY elseif startX> lastX and startY>lastY then g.drawrect lastX,lastY,startX-lastX,startY-lastY elseif startX>lastX then g.drawrect lastX,startY,startX-lastX,lastY-startY elseif startY>lastY then g.drawrect startX,lastY,lastX-startX,startY-lastY end if case 1 //Finder style if startX <lastX and startY<lastY then g.drawrect startX,startY,lastX-startX,lastY-startY g.drawpicture pictureMask,startX+1,startY+1,lastX-startX-1,lastY-startY-1 elseif startX> lastX and startY>lastY then g.drawrect lastX,lastY,startX-lastX,startY-lastY g.drawpicture pictureMask,lastX+1,lastY+1,startX-lastX-1,startY-lastY-1 elseif startX>lastX then g.drawrect lastX,startY,startX-lastX,lastY-startY g.drawpicture pictureMask,lastX+1,startY+1,startX-lastX-1,lastY-startY-1 elseif startY>lastY then g.drawrect startX,lastY,lastX-startX,startY-lastY g.drawpicture pictureMask,startX+1,lastY+1,lastX-startX-1,startY-lastY-1 end if case 2 //iPhoto style if startX <lastX and startY<lastY then g.drawrect startX,startY,lastX-startX,lastY-startY g.drawpicture pictureMask,0,0,me.width,me.height g.drawpicture scenery,startX+1,startY+1,lastX-startX-1,lastY-startY-1,startX+1,startY+1,lastX-startX-1,lastY-startY-1 elseif startX> lastX and startY>lastY then g.drawrect lastX,lastY,startX-lastX,startY-lastY g.drawpicture pictureMask,0,0,me.width,me.height g.drawpicture scenery,lastX+1,lastY+1,startX-lastX-1,startY-lastY-1,lastX+1,lastY+1,startX-lastX-1,startY-lastY-1 elseif startX>lastX then g.drawrect lastX,startY,startX-lastX,lastY-startY g.drawpicture pictureMask,0,0,me.width,me.height g.drawpicture scenery,lastX+1,startY+1,startX-lastX-1,lastY-startY-1,lastX+1,startY+1,startX-lastX-1,lastY-startY-1 elseif startY>lastY then g.drawrect startX,lastY,lastX-startX,startY-lastY g.drawpicture pictureMask,0,0,me.width,me.height g.drawpicture scenery,startX+1,lastY+1,lastX-startX-1,startY-lastY-1,startX+1,lastY+1,lastX-startX-1,startY-lastY-1 end if end select end if

Select Debug-Run to test your work. Click and drag in the image on the left side of the window to view a cropped version on the right side. Play around with the colors and the selection styles to see how it works.

Conclusion
You can download the completed project for this week here. We'll continue adding features to the project next time. See you then!

---

Please support ResExcellence by Visiting our Sponsors. One click makes a difference.

Download REALbasic and create your own software!