The ZAZ Blog

Image Masking

2008-10-12T05:27:24Z

Over the past few days I've seen this topic come up on the REAL Software Forums and the REALbasic NUG. There's quite a mix of information - some correct and misleading. Luckily, I've not seen information that is just flat out wrong. div.image { background-color: #AC3525; width: 64px; margin-left: auto; margin-right: auto; padding: 5px; border: 1px solid #500900; margin-top: 10px; margin-bottom: 10px; }

The double mask effect

The single most common issue I see with masking is what I call "double masking" - which is the art of applying a mask to an image that has already been masked. Below, is an original PNG image shown on a background color. This is our "correct" image:

Now, the advice I commonly see is to use another program to retrieve just the mask from the png, then import both images into REALbasic. When this happens, you end up with two images:

Notice the white background on the first image. REALbasic doesn't properly handle the alpha channel, so you'll end up with that, thus the reason for this entry. Anyway, when you apply the third image as a mask to the second, you get this:

It looks reasonably close, but it's not correct. The blue shadow is too light, and in fact, has a white ghost effect to it. It certainly looks different from the first image - and that's bad. So what went wrong? Why did we not get the original image back? That's because image two already had a masked applied, we just didn't have translucency, the translucent image we wanted was drawn onto a white backdrop.

There is a difference between a pixel that is 50% black, and a pixel that is 100% black at 50% opacity. By doing this double masking, you essentially take a 50% black pixel and make it 50% opaque which is not correct.

Solutions

There are a handful of solutions. The easiest is to use the PNG Utilities plugin. It's open source, and cross-platform. Just store your images on disk and read them at run time. But what if your project has a requirement of not using any plugins or you really want to drag your images into the IDE? Then you need to be a little more fancy.

The solution I use in such a case is a small app I wrote to properly split a PNG into a new PNG with the data (not the composite, there is a difference) on the left and the mask on the right. That project has been linked with this entry, and does require the PNG Utilities plugin mentioned earlier. When images are dropped on the app, it will turn image one into:

Then, I can simply drag that new image into the IDE and use it as necessary, with the assistance of a simple method:

That code will perfectly turn the combo image into the original image, image one. This method has the advantage of still only requiring one file per image too.

Misconceptions

Let's say you only have the composite image (image two) to work with. Well, then you're doomed and out of luck. You'll never get the image back to it's original 100% because crucial information is lost. You can, however, try to fake it and come reasonably close. Photoshop can help with this, but there's no how-to for this because every image is different. If I were going to try to do it with the sample used here, I'd use a circle select to delete everything outside the globe, and try to recreate the shadow by hand. But there is no tool that can do that for you perfectly because at that point, information is lost.

As you can tell, I like PNG. That's because it is lossless (basically meaning full quality) and smaller than JPEG. PNGs are only sometimes smaller than GIF, but GIF cannot display a full color spectrum. JPEGs can be made smaller than PNGs, but at a loss of quality. There is TIFF too, but it's not often used (besides in Apple apps) and we have the PNG Utilities plugin to work with. So I typically go with PNG every time.

]]>

Custom Controls: Finding your global screen bounds

2008-10-11T05:46:08Z

I find myself writing a fair amount of custom controls. Frequently, I find myself wanting to find the position of the mouse relative to my control. The MouseDown, MouseDrag, etc. events have this info, but if you need this in the Paint event, you must either save it to a property or get it from the system. We're exploring the latter, as it's not as simple as you might think.

]]> System.MouseX and System.MouseY will tell you where the mouse is. You might think that simply using System.MouseX - Self.Left is sufficient - but it's not. Self.Left and Self.Top only return values relative to the parent window. In today's REALbasic, ContainerControls come into play. In fact, multiple layers of ContainerControls can occur. Then, finding your control's true position on screen can become difficult.

The solution is a method I use call TrueWindow, that extends any Window (and thus ContainerControl) or RectControl. It traverses up the Window.Parent chain until it hits a Window that is not a ContainerControl.

Now technically, this will be enough. But I like to use a couple other tricks too. I usually create a structure, we'll call it ZAZRect, which has four integer properties: Left, Top, Width, and Height. I also create two extender methods for it: Right() and Bottom() which just calculate that for me.

I then use this nice TrueBoundary() method to instantly get the bounding rect of any control relative to the user's screen:

So there's some ground work for some upcoming tutorials I plan to write.

I hate Gmail

2008-10-06T22:33:02Z

I hated Gmail before I ever used it. Now I've been using it for about 5 months now and I've learned to complete despise it.

]]>
We use Google Apps here at REAL. I've heard when we managed our own server the e-mail system was a hassle, so letting Google handle it for us was not a bad idea. Now, we have a hosting service run our server for us, and e-mail is a breeze... for the mailing lists. All our @realsoftware.com addresses still go to Gmail.

And I really hate Gmail. I don't use the web interface, because I find it completely unusable. It wasn't so bad originally. The biggest problem was when using a desktop client, Gmail will not deliver messages with the same "from" and "to" addresses to you. They'll appear in your web inbox, but on the desktop, they hide it from you just to piss you off. I got a number of e-mails about that one, and I don't like responding with "sorry, it's out of my hands."

But now my biggest issue is Gmail keeps flagging legitimate messages as spam. Every topic notification I get from our forums keeps going to my spam box, and many of my status e-mails are too. This is really, really getting on my nerves and it's affecting the way I do my job. Well, kind of, I've added some contacts to the awful web interface, but I shouldn't have to.

I can't even turn off my spam filter and let Mail.app handle it. Worse still, since we have a Google Apps account, obviously all e-mails to realsoftware.com are part of Gmail - shouldn't it be smart enough to NOT flag inter-office emails as spam? I'm also getting complaints about Gmail's conversations making it difficult to keep track of conversations - I love the irony there. Gmail doesn't care about the "In-Reply-To" header and instead, groups conversations by subject. But since a lot of e-mails go out of customer service with the same subject to different people... you should be able to figure out where I'm going with this.

I'm tempted to work some of my trademark magic and find a way to have my address go to our server and let everybody else stay with Gmail. That way I can not worry about losing my mind and tossing myself our a window!

Please Google, stop trying to outsmart us. You suck at it.

What I've been up to

2008-09-06T03:03:58Z

Just a general post, nothing special about it.

]]> Subway

So I still do some odd-jobs for my previous employer, since I'm still the best tech guy he knows and likely the best in CT when it comes to Subway stuff. His stores are still the most high-tech Subway restaurants in CT because of the stuff I did while there.

In the middle of the lunch rush yesterday, one of the store's cash registers went down completely. Claimed it could not detect the chipset heatsink and thus would not startup. Upon opening it, one of the little loops that holds the integrated graphics chip heatsink down had snapped off.

And worse, it wasn't in the case. Still trying to figure out how it left the case, but we may never know.

Brief interlude: This computer is a Dell. I have a challenge for Dell. Can you please make a computer that does not suck with every ounce of it's existence? Is that so much to ask? We have two Dell registers, both needed their motherboards replaced, and now this one will a second time. Brilliant, way to set the bar low Dell. It takes real talent to suck that hard.

So the problem was not that the heatsink didn't exist, it was that the board could not detect it. I concluded that since the entire hook mechanism was metal, the board must be sending an electrical current through to make sure the heatsink was there. So after trying many different types of material, a stripped-clean piece of 14-gauge speaker cable did the trick to fit in the tiny holes in the motherboard. But that didn't do it. So I tried putting pressure on the heatsink as well, and presto! The computer would boot. To experiment, I removed the speaker cable yet kept pressure and the computer would not boot. I was able to conclude that the motherboard was using a combination of a pressure sensor and current sensor. So I shoved a folded-over piece of cardboard between the heatsink and the hard drive, and the computer works - although it's fragile.

So I called Dell to begin the process of getting a new motherboard. Turns out, the system is out of warranty. I was told they would not simply sell me a motherboard, I had to have some sort of service contract. But in order to get a service contract, the computer had to undergo an inspection - which it would fail. Thus, Dell is completely useless. We found the same motherboard from a third-party and I'll install it when it arrives. In the meantime, we have a computer that is functional only thanks to cardboard and a piece of speaker cable.

REAL

Not much I can say here, since I'm still employed with REAL. But I did just complete a miniature logic processor for something special we're cooking up - not something I really wanted to do, but there was no better way. I'm a bit proud of it though. And no, I did not base my code on AngelLogic - sorry Theo, I just don't care.

HIToolbar 1.1.3 Released

2008-08-23T05:50:19Z

Even though I should be working on getting two other projects made public, I thought I would update HIToolbar first. Since it broke on REALbasic 2008r3, it made sense that this one should get more attention.

]]> This release is merely a maintenance release to keep the code up-to-date.

But this is also the first release in my steps towards making everything more "open" and to that end, you'll notice that the updated HIToolbar page contains the URL for the source control. The download is also nothing more than an export of the same url.

As such, the demo project is included but the app is not built. The documentation is included, but as the original RTF instead of a PDF. And the structure is a little different inside too.

Looking forward, HIToolbar has two potential issues in the future.

First, the required PNGUtilities plugin has been deprecated. This means I should find a new way to convert an RB picture object into a MemoryBlock containing the PNG data. I never liked requiring a plugin anyway. I'm proactively working on this.

Second... Cocoa. This project will need to be updated significantly to support Cocoa. In fact, even the name will be completely wrong as the Cocoa version is NSToolbar. They are slightly different, but largely similar. This is why my search field is Mac OS X Search Field and not HISearchField - I planned better!

HIToolbar will likely still run in Cocoa projects, but could also fail miserably. Luckily, since I have early access to REALbasic releases, I may be able to have the showstopper bugs worked out before Cocoa is ready for the public. No promises though. It will still be a Carbon toolbar in a Cocoa window... really silly... but it'd at least not break your code. That'll give me enough time to re-work the code so it uses HIToolbar on Carbon and NSToolbar on Cocoa if necessary.

Determining if a window should be highlighted

2008-08-01T14:29:41Z

I've been working on a window designed to look similar to Safari. This means a window with a "Unified" toolbar and tabs that blend into said toolbar.

]]> The issue I have been having though is when sheets are involved. If you bring up the "Report Bug" sheet in Safari, you will notice that the window stays "active" - it's still drawn like it's in the foreground. So I used the code I posted earlier to determine if the window had a sheet attached, and drew the tabs active in that case.

But wait, it's not that simple. What if the window has a sheet attached, but the sheet is not the foreground window? This was becoming complicated.

That is, until I found the IsWindowHilited() Carbon function. This function, very simply, gives you a boolean stating wether or not to draw your controls in the foreground or background. Enjoy

Does a window have a sheet?

2008-08-01T06:44:30Z

So Norman Palardy recently posted some code for detecting if a window has a sheet attached. Charles Yeomans took this code and modified it to work without subclassing window.

I take it one step further, and fix a bug...

]]> See, when I tried to use the code, I quickly ran into an issue: MessageDialog. When showing a MessageDialog as a sheet, the current code returns false. That's because the code loops through the REALbasic windows until it finds a sheet window, then asks for the parent of that sheet, and compares the result of that to the window passed to it. But MessageDialog is not a subclass of Window.

So we need to delve deeper into the Carbon API.

When a sheet window is created, a Window Group is created as well and the sheet is then grouped with the parent window. This is how the two stay "linked" together. We'll exploit that.

First, we find the group of the window in question. Then, we loop through all the windows using declares until we find one that is in the same window group and is a sheet. This is done completely using declares, which is good, because it'll work for both window-based sheets and MessageDialog sheets.

There isn't an excellent amount of error checking, but then again, the API does leave a lot of room for something to go wrong.

 0
      if GetWindowGroup(nextWind) = windGroup then
        if GetWindowClass(nextwind,windclass) <> 0 then
          return false
        end
        if windclass = kSheetWindowClass then
          return true
        end
      end
      nextWind = GetNextWindow(nextWind)
    wend
    
    return false
  #else
    return false
  #endif
End Function"); ?>

The ZAZ's Open Source Roadmap

2008-07-28T05:42:42Z

I've got a brand new open source project coming up. In fact, the code is already complete and in use, I'm just working on the documentation... and this one will have significant documentation. I imagine that nearly every REALbasic project will want this code included.

]]> But why am I writing this, you ask? (or maybe you didn't.)

Because this project will be handled a little differently, hopefully for the better. First of all, the project is fully under version control and you will have public read-only access to the repository. It is my plan to move all my projects into this as well. This means you will have access to bleeding-edge code (if you so dare), even access to separate branches and new projects before they are announced or ready. The repository will not contain documentation. You will be welcome to poke around however you wish, but it will be a use-at-your-own risk feature. I will still be making ready-to-use distributions available as well, just like I do now. The only difference is the distribution will contain the project in RB's version control format, rather than binary format.

I'm also going to be using a real issue tracker, integrated with the repository. I will make the URL for this available to the public. The issue tracker requires a user to create an account before submitting tickets - which I do not like. So I will be making it possible to submit tickets without an account through this website. Thankfully, the issue tracker has an API I can make use of for many things.

Lastly, both the subversion repository and the issue tracker will allow multiple users and permissions. As such, I can invite additional developers, should the need arise.

My goal is to make my open source stuff more open source.

Best. Song. Ever.

2008-07-15T05:06:03Z

I'm going to keep this short and simple. View the picture.

]]> If you don't quite understand, play more games. If you already consider yourself a gamer and don't get it, get off your crappy Xbox and play real games!

I am in love with the song at the credits. Found a recording online, converted it to an AAC and put some good artwork on it (the artwork is not mine), added the lyrics and presto! Now I can confuse the hell out of anybody that rides in the car with me.

Relove for the iPhone

2008-07-11T04:13:51Z

I used the leaked iPhone 2.0 firmware. It's like I when I first bought the iPhone over a year ago - I can't put it down.

But this time, I can keep adding features. Some will be better when push support comes in September, like AIM and NetNewsWire, but it's pretty damn cool.

My personal favorite new app is Shazam. That's one really cool thing Verizon customers could have over me - but this is here now and free!

OmniFocus is pretty great too, I'm keeping it synched with my desktop.

I'm sure you'll read about this everywhere else, but I felt like saying something here.

:: Sent from my iPhone, BTW ::

Figures...

2008-06-19T03:53:30Z

I've been working on an internal tool for REAL Software that is probably my best web app to date. It's a web 2.0 app, feels like a desktop app, on caliber with some of the .Mac stuff. Really sweet.

And yet, I'll never get to show the world.

Figures.

Tropical Sillyness

2008-06-18T04:45:34Z

So, I stumbled across a trailer I thought I might check out.

Tropic Thunder - don't bother. Just to view the trailer, the website asks for too much personal information.

]]> My problem with this trailer is that it asked for my personal information - first & last names, zip code, and birthday. Seeing as they don't need that information, I decided to fill in some fake info. Real zip code, fake everything else.

Would you know it, they're actually checking government records! When the info was declined, it was suggested that I use past information if I have recently moved and to make sure the info I entered matched my driver's license.

So let me understand this correctly. A commercial movie website has managed to gain the ability to check driver's license info. Sure, our government wouldn't be stupid enough to actually sell the relevant bits of info to the studio - would they? It must be a one-way, verify-only system... right?

I can't know for sure, but this is kind of creepy. If this were a government website, I'd feel a little better about it - but this is for a commercial website. They shouldn't have such easy access to this information! If I didn't know better, I'd say this was a phishing attempt (though a really dumb one).

I'm not seeing this movie. I'd do well not to see anything by DreamWorks too, not much good comes from them anyway.

Source-Controlled Website

2008-06-15T04:05:07Z

This concept is so simple and easy, I'm amazed I had not yet thought of it. See, I keep a subdomain of this website which I use as a sandbox. I draft new designs or concepts with it. But it's always been a complete pain to bring the sandbox to the live site. I don't want to overwrite too many or the wrong files, and I made the mistake of keeping subdomain files inside my www directory. It's a mess, and I know better now.

]]> When I started with REAL Software, they were working towards keeping their website under version control. I finished the job. Their start, while not perfect, was a good start that gave me the idea for the right way to do it.

The way it's setup now is brilliant. Making changes to the website and making them live is insanely easy. I'm going to be setting this up for my personal website. Here's what you'll want to do.

You'll need a couple of things. Most importantly, you need SSH access to your webserver. If you don't have this, you're dead in the water. My host, Made2Own, has cost-effective shared hosting plans (like I'm using now) for around $8-$15 a month. You'll need their developer package which is an additional $5 a month, but the price is excellent and I have been very happy with this host - and believe me, I've been through plenty.

You'll also need a repository. You can technically host it from your webserver, which will have the fastest data transfer times, but I'd recommend using a 3rd-party. Why? Backup. By keeping your repository elsewhere, you have an automatic backup of your website files. Of course, that won't help your databases, but it's one less thing to worry about. I'm likely to use Beanstalk myself.

I'm going to be making some assumptions here. This is not a subversion tutorial. There are plenty out there. I also do not know where your repository is kept. So instead, just follow along with the concepts.

You need to first import your current website to the repository. Subversion's import command makes that easy. Make certain you import your website into your trunk because branches are very useful for this concept. After that, you need to do something scary: break your website. We can do this with minimal downtime though. Do not simply delete your www dir and do a checkout. That will take your website down for a while. Instead, checkout your trunk to a temp dir, like www_new. Then rename www to www_old and www_new to www. You'll have nearly zero downtime. Test your website and have a blast. If all went well, you can remove www_old.

Now, you can setup a sandbox. If you don't have a sandbox subdomain, create one. Do not but the subdomain's contents in the www dir. That would be pointless. If you're using cPanel, delete the dir that cPanel creates for you. Next, do a checkout of the trunk to create the sandbox directory. Bingo, you should have a perfectly mirrored website for your sandbox. Test it out. If you get errors, you probably did something foolish and hard-coded your directory names. If you've ever moved a website before, you'll learn quickly to use an environmental variable such as DOCUMENT_ROOT, or as I do, define your own in the .htaccess file.

Make your changes to sandbox, commit them, then do an update on the www. Bingo, you've just brought changes to your live server.

Now for some advanced tips.

Create an FTP login to only give you access to the sandbox. That way, you can only update the sandbox site. There is no harm in updating the public version, since either copy can commit changes, but it's best to work in this manner.

Use the svn propedit command to ignore your .htaccess file. This file will be completely ignored, so you can have different versions for the sandbox and public sites. Then, you can use a SetEnv command in each .htaccess to make an environmental variable IS_STAGING_SERVER. Your code can then reference this variable and react accordingly.

You can create a third subdomain, call it volatile, and use that for a completely separate branch of development. Maybe you're working on something that will take weeks to do, but you'll want to be able to update your website in the meantime. Creating a branch will allow you to do so, without interrupting the main site. When you're ready, you can merge your branch into the trunk and continue with life.

A word of caution: your .svn directories will be visible to the public. First, if you have not yet done so, turn off directory indexing. This is a generally bad thing. It'll only help a little though. If you have access to your apache config, you can use a directive to block access to those directories. If not, you'll want to use your .htaccess file and use a Rewrite to simply change any URL containing .svn to something else - like your main domain. You want to match more than just URLs ending in .svn, because snoopers can access the files directly.

Lastly, if you're on the Mac and not using Coda, get it first. It's the best damn web IDE I've ever used, and the built-in terminal will allow quick publishing.

Now go create havoc on your sandbox! If you cause trouble, you can just use a revert command! There were many concepts explained here, so maybe I'll go into more detail in the future, but here's something to chew on for now.

Finally, a new day job

2008-04-16T21:37:25Z

So after five and a half years with Subway, I have found a new job that's actually in the industry I have real talent in. Not to say hadn't done a good job managing over a hundred teenagers, it just isn't what I want to do. Not to mention it requires me to work about 50 hours a week over 6 days. If I were single and had no friends, it wouldn't be so bad, but considering neither of those are true it really gets to me sometimes.

But no more. I just signed and returned an offer letter.

]]> A few weeks ago, I was contacted by a company regarding an opening in their engineering team. I was called before the job was made public, and my initial conversation went very well. I was asked to send over some examples of my work, which I did, and we scheduled a phone interview with one of the existing engineers. That went very well. After about an hour, we hung up our phones and I expected to hear back maybe later that day or the next. Nope, I got a call about ten minutes later - to setup a time to fly me out there.

This was a Thursday, I was at their office on Monday. Talk about short notice. The experience was fantastic, and a lot of fun. I spent the day with them, and since I knew many of their names ahead of time, felt very comfortable.

My return flight was terrible, I literally spent twelve hours returning home, only six of which were actually flying. It was 2:30 when I actually made it back.

I didn't hear anything for a couple days, which worried me. Then I get an email from the lead engineer stating they had decided not to hire me.

What? Really? After all that? Why?

Basically, I don't have any experience with a team development environment which was a source of concern and the main reason they had decided not to hire me. I spent another day pretty depressed, because I was really looking forward to working there. Then, literally as I'm talking to a friend about the entire situation, I get a call from the original person who contacted me. He explained what happened, and brought up the idea of a different position. The new position would work more with the website and such like that, which I have a lot of experience in. It paid a bit less, but still acceptable. This way, they could see how I work and potentially get an engineer position in the future as it becomes available - granted I prove myself. Which I will.

So I talked to a different couple people on Monday. It went well. Well enough that a couple hours later, I was offered the position.

My head is still wrapping around the idea. I love it, but I've been with Subway for so long (and never left a job before) that it almost doesn't seem real. But it is. I have to move. Far away. To a state I'm less than fond of. But Kelly loves the idea and location, so it's not all bad. And the cost of living is cheaper. I'll lose seasons, but that's okay. (note to self: stop using sentence fragments.)

Luckily, I can work remote until after the wedding, then we'll move. That makes life much easier, since we already have everything booked.

My last day with Subway will be May second. I have the weekend to adjust, then I fly out Monday the fifth for my first day on May the sixth. They need me on-site for the first two weeks - which won't be ideal as I have to live out of a hotel with no car for the time. But it'll be okay.

Oh, and the company is REAL Software, makers of the wonderful REALbasic. I figured I'd save that until the end.

AnimationKit 2.0 Released

2008-03-30T16:50:08Z

I have finally found some free time, so I decided to release a brand new version of AnimationKit. This new version is significantly changed, and will break existing code. It does, however, include some great new features.

]]> First of all, the Start and Stop methods are no longer needed - AnimationKit will start and stop itself automatically, saving vital system resources.

But most importantly, there is a completely new class structure. The new AKTask class handles the generic code to describe an animation, while the AKMoveTask is a subclass used to describe a movement. AKMoveTask is the newer version of AnimationTask.

The great new feature is AKFrameTask - an AKTask subclass which allows very simple graphic-based animations. Animations such as progress wheels are now very easy to accomplish.

So check it out, though be prepared to update some code.