Category Archive: Tenjin

Focus Zoom Just Like Mama Google Used To Make

I hate math.

When I say I hate math, I’m not saying that math is objectively bad. Mathematics have elegance and simplicity. They’re the purest expression of logical thought that I can think of. Mathematics are involved in every single technological advance since the wheel of sliced bread on fire 1. Computers, fundamentally math based machines, provide me my living. I literally eat because of math.

Still, though, I hate math. At least when it’s happening to me. It’s an activity that requires me to hold a multitude of abstract concepts, complex mappings, and relative truths in my head at once. Math is just too dense for my brain to comfortably unpack it and relate it to the real world. It’s like surgery. I’m 100% on board with mathematics when an expert doing it, but when I have to get involved, I’m just the guy standing with a knife wondering which part to cut.

That’s the real problem that I have with math. Once all the parts are labelled, and all that’s left is rearranging stuff to get the desired result, I’m golden. Regardless of my preference, I have to actually do it from time to time. 2

The most recent case was writing a Google Maps style scroll zoom for a recent contract. They have a viewport div with a much, much larger content div, and a desire to move about it.

The behaviour is easy to describe:

  1. it should pan when the mouse is dragged
  2. it should zoom the content canvas when the scrollwheel turns
  3. it should hold the point under the mouse cursor fixed when zooming
  4. it should not jump about as though you threatened it when you zoom

Panning was dead easy, just set the viewport’s leftScroll and topScroll properties. For zoom, though, it just liked to break rule number four. Strategy One was to find out if anyone had already described the solution somewhere. Zilch.

Strategy Two, then: mimic what I could reverse engineer from Google’s approach, and then fix the rest. Turns out that they use CSS transforms and set the transform-origin to the mouse location, which makes a lot of sense. At first, this worked for me too, but then fell apart once I zoomed at a different location.

Strategy Three consisted mostly of crying and fiddling desperately for a couple minutes with various parameters in the vain hope that I’d stumble upon the solution by accident. Maybe if I scale the – no, that’s worse… what about unscali – nope.

There are just so damn many points relative to other points in differently scaled units to come at it head-on. To complicate further, this is a graphical problem, making it hard to get meaningful data, and even harder to locate the failure points. I knew I needed to pan to offset the “movement” caused by the scale.

Ugh. Fine. It’s math time.

Immediately, this:

Movie Math


“Math is whooshy” – Hollywood

Turned into this:

Movie Math


“Maybe they only said they wanted zoom, but meant waffles instead.” – Me

So, just like in grade seven, I went to my dad. He’s an electrical engineer, much better at math than me, and has actually had to deal with a similar problem for a project of his own. Through many trials, he eventually got me to stop chasing deltas and explained that the easiest way is likely to do everything with units, like physics, and work on the unscaled version. He made the first incision and helped to label everything, which is exactly why you should make your dad be an engineer, too.

Here’s what we came up with:

First, everything we do for X can be repeated for Y, so let’s focus on one dimension.

Next, There are two units of measurement. Screen Pixels (px), and scaled virtual distances, Canvas Units (cns). The scale factor is the ratio of px/cns.

Call the point we want to zoom around Focal Point, which for us is the mouse cursor. Since everything is relative to something, lets use a second subscript to denote what it’s relative to. For example, the viewport’s origin, relative to the canvas, is Xvc.

Now, the Focus Point, relative to the canvas (Xfc), can be described with: 3

            Xvc px + Xfv px
Xfc cns = ------------------
             S px/cns

Now to scale it. Let’s prime everything to denote after-scale values:

                        
             X'vc px + X'fv px
X'fc cns = ---------------------
               S' px/cns

There are a couple of facts that are helpful here:

  1. X’fv px = Xfv px, because they are both the focus point, relative to the viewport in raw px, and so does not change.
  2. Further, X’fc cns = Xfc cns, since they both refer to the same logical location relative to the canvas and in canvas units.

We can sub in the equivalences and rearrange to solve for the X’vc px. This is what the viewport’s offset needs to be to compensate for the scaling.

X’vc px = ( Xvc px + Xvf px ) * (S’ px/can / S px/can) – Xfv px

Notes:

  1. An invention far ahead of its time.
  2. Math, that is, not surgery. Though I prefer to do both in a dark alley.
  3. Here we divide by the scaling, because we’re stretching the canvas, not the viewport. If your viewport was scaled, then you’d multiply.
Continue Reading

Managing a GoDaddy email address through GMail

GMail is pretty great. Easy to use, accessible regardless of machine, and free. Both Jason and I like to use it for our primary accounts 1. Back in the day, as shiny new business owners, we obviously also wanted to have gleaming, veneered Tenjin-branded addresses.

So, we originally just set up GoDaddy 2 with “Forwarding”-type, <xyz>@tenjin.ca addresses and pointed the spam-cannons at our GMail nexus 3 accounts. Fast forward a couple years, and we need to set up a new email account 4. So we just go in, and make a new Forwarding account, right? Ha! Ha! Gotcha. DevOps, IT and other support never Just Works.

Turns out that Google has, in the interim period, changed its policy on how Send-Mail-As works. It needs to log in with SMTP over SSL 5 now.

After far too much googling about Google I managed to piece together some facts:

  1. There doesn’t seem to be any one place where this process, specifically for GoDaddy, is definitively outlined.
  2. Most people in the Google forums essentially tried random combinations until it worked
  3. The ones who didn’t likely gave up and started constructing a colourful logo-shaped voodoo doll
  4. I hate the internet. And the Web. And especially email protocols.
  5. On the plus side, this process will remove the ugly “via” and “on behalf of” sender tags that reveal the original GMail source.

Once many Bothans died to bring me that new information 6, I cobbled together The Solution. Here it is, generalized 7 so that all you need to do is replace “bob” with your appropriate email name, and “example.com” with your own domain.

Tell GMail to manage a GoDaddy email

Bob wants to use bob@gmail.com to seamlessly manage his GoDaddy email, bob@example.com.

  1. Create a regular Godaddy email account – not a forwarding account.
    1. Log into GoDaddy.
    2. Under Products, find Email. Click Launch
    3. If you have a forwarding account, you’ll need to delete it first.
    4. Click Create to create a regular account for the desired address (eg. bob@example.com). We have enough from the addresses we’re managing, but you might need to buy a package or whatever.
  2. Login to your GMail account. If you don’t have one yet, create it.
  3. Tell GMail how to send mail through your GoDaddy domain.
    1. Click the Gear icon (top right), choose Settings.
    2. Click on -> Accounts and Import ->
    3. Under Send mail as ->, click Add another email address you own
    4. Name: Your name
    5. Email address: Your GoDaddy email address (eg. bob@example.com)
    6. Click Next Step
    7. Use these settings
      • SMTP Server: smtpout.secureserver.net
      • Port: 465
      • Username: Your full GoDaddy email address (eg. bob@example.com)
      • Password: Your Godaddy email account password
      • Select Secured connection using SSL
      • Click Add Account
      • Log into your GoDaddy webmail and grab the verification code that GMail sent. Use that to complete the process.
  4. Tell GMail how to receive mail from your GoDaddy domain
    1. While still under Gear -> Settings -> Accounts and Import,
    2. Scroll down for the Check mail from other accounts (using POP3) section
    3. Click Add a POP3 mail account you own
    4. Email address: Your GoDaddy email address (eg. bob@example.com)
    5. Click Next Step
    6. Use these settings:
      • Username: Your full GoDaddy email again (eg. bob@example.com)
      • Password: Your GoDaddy email account password.
      • POP server: your POP mail server, which is at your domain (eg. mail.example.com). You might also be able to use pop.secureserver.net
      • Port: 995 [this is the SSL port. You want email to be as secure as possible.]
      • Check Always use a secure connection (SSL) when retrieving mail.
      • Leave Leave a copy of retrieved messages on the server unchecked. Enabling this would only eventually fill up the GoDaddy inboxover time. Since we want to use GMail entirely, it makes more sense for this setting to be off.

There you go. That should now run email through your own domain.

Notes:

  1. I should call them “nexus” accounts. It sounds way cooler to call things a “nexus”.
  2. Yeah, deal with it. I’m sure there are better, hipper Dee Enn Esses out there. It’s a devil-you-know-slash-convenience relationship.
  3. See? I told you. Cool as a Canadian cucumber.
  4. For reasons to be explained later.
  5. Okay, maybe SSL isn’t technically required for it to *work* but I can’t imagine anyone wanting to do emaily things in the clear.
  6. I lie. I already knew #3.
  7. It’s possible that this might be even further generalizable to other DNS providers, but that’s left as an exercise for the reader.
Continue Reading