Cocoa

For the upcoming action extension in Transloader, I’m using a UIWebView to show the webpage the user is currently browsing, so they can tap on a link they’d like to download:

UIWebView without zoomTransloader’s Action Extension, displaying a UIWebView

It’s nice, but I wanted to go an extra step. A user might zoom and scroll in Safari before launching the action extension and when they do, the web page would be shown from the top, not zoomed. Here’s how I changed that.

Context and Flow

One of the main purposes of an action extension is to allow a user access to functionality from a different app without a) leaving the current app and b) without leaving the current context (which is more or less the same, but context is the point I’d like to drive home with this post).

In that vain, I thought it would be neat to present the website a user was viewing in Safari the same way in the action extension – meaning the zoom level and scroll position.

I figured, a user browses a site, perhaps zooms in on stuff and when they find a link they’d like to download to their Mac, they press the Share button in Safari and select Transloader’s action extension.

The thing is, the UIWebView of the extension loads the website for itself again and hence starts from the top, not zoomed in. So the user is ripped out of the context, they’d have to scroll and zoom again to get to the same position they had in the Safari web view. I wanted to change that:
A user should see the same part of the website in Transloader’s action extension as the part they were viewing in Safari before tapping the Share button.

Luckily, Apple implemented a way that allows us to do just that.

Java Script Preprocessing

In an Action extension for webpages (action extensions that are displayed in the action sheet if the NSExtensionActivationSupportsWebPageWithMaxCount criteria is met), you can supply a JavaScript preprocessing file that will let you examine the contents of the webpage before your native code is called.

This way, we can extract the current page scale and the scroll position. Here’s how we do that. In the Action.js, we call our native code with these parameters:

arguments.completionFunction({
“pageXOffset”:window.pageXOffset,
“pageYOffset”:window.pageYOffset,
“pageScale”:(document.body.clientWidth/window.innerWidth),
“baseURI”:document.URL
})

– pageXOffset is the horizontal scroll value
– pageYOffset is the vertical scroll value
– pageScale is how far the user has zoomed into the page
– baseURI is the current URL displayed in Safari

With these parameters, we can do what we set out to do – display the web page in the Action extension the same way as the user left it in Safari.

In our implementation file, in the WebView’s delegate method “-webViewDidFinishLoad:”, all we basically need to do is apply these parameters to our own web view:

[self.webView.scrollView setZoomScale:self._pageScale
animated:YES];

[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@”window.scrollTo(%ld,%ld)”,self._pageXOffset,self._pageYOffset]];

For a complete project of how this exactly works, please scroll down where you’ll find a Xcode Project on Github.

And this is what it looks like in action – notice that after the Action extension is tapped, the website appears the same way as it was in Safari:

UIWebView Zoom and Scroll in Action

Example Project

TL;DR – I uploaded a demo project here on Github.

I hope you can make good use of this code – and if you do, please be sure to let me know! 🙂

—-
My name is Matt, I’m the developer of Eternal Storms Software. If you’d like to comment, you can catch me on twitter here: [twitter-follow screen_name=’eternalstorms’ show_count=’yes’] or by eMail.

Read more

At the end of September 2014, I wrote about upcoming changes in Transloader for iOS.

Transloader iOS 8 Action Extension Icon

Today Widget

In that blog post, I wrote about a Today Widget that you could use to easily paste URLs you had copied to your pasteboard on iOS.
It would look like this:

I was pretty sure this would be the way to go, but after using it for a while and iterating on it, I became more and more convinced that this was not an optimal solution.

It’s not optimal for a couple of reasons.

– Although it’s far better than before iOS 8, where you had to open the Transloader app itself to get things going, the Today Widget approach is still a little cumbersome: copy the link, open Notification Center and tap the + button
– You’d have to do this for every link you’d like to add from a website, for example
– Doing that would erase your pasteboard contents you had copied before
– It takes you out of the app’s context

Action Extensions to the Rescue

So I started looking into Action Extensions. And now, this is possible:

transloaderaction

Exactly. Instead of going back and forth to copy several links from a website to add to Transloader, it can all be done on the website itself.

If you’re on a file site itself (for example, you’re viewing a PDF in your browser), you can add it to Transloader more easily as well:

fileaction

Conclusion

I think the combination of these two, the Today Widget (where you’ll still be able to paste links into Transloader, because I think it might still be useful to a lot of users) and the Action Extension will make Transloader very accessible and easy to use on iOS 8.

It will be available soon on the App Store.

—-
My name is Matt, I’m the developer of Eternal Storms Software. If you’d like to comment, you can catch me on twitter here: [twitter-follow screen_name=’eternalstorms’ show_count=’yes’] or by eMail.

Read more

Yoink for Mac Usage Tip #9

The following explains how send screenshots directly to Yoink.
For more Usage Tips like this, click here.

I recently had a very interesting conversation with a customer of Yoink, Bogdan V. He wanted to make Yoink detect screenshots he created so they would show up in Yoink’s window.

Automator to the Rescue

I had the idea of using Automatorto create the screenshot and send it to Yoink. After experimenting around a little bit, I sent Bogdan a very rudimentary workflow (that could, if saved as an OS X Service, also be launched with a keyboard shortcut) and he immediately turned it into something awesome.

The Automator Workflow

This is the script of the workflow Bogdan came up with:

Automator Workflow Screenshot

You can download the Automator Workflow here (~59KB) (tested on OS X Yosemite 10.10.1).

Setting up the Service

  1. Download the Automator Workflow
  2. Unzip it and double-click on the resulting screencapture.workflow file
  3. In the dialog, select Install (except if you’d like to edit the script, then click on Open with Automator)
  4. It will be installed in your ~/Library/Services/ folder: Automator Service Path
  5. To confirm installation, in Finder, click on Finder in your menu bar, select Services and find Capture Screenshot to Yoink in the list: Service in Menu
  6. In your ~/Documents/ folder, create a folder titled Yoink (where captured screenshots will reside)

You have now successfully installed the Service to capture screenshots to Yoink. What you can do now is create a keyboard shortcut for it so you can more easily access this

Create a Keyboard Shortcut

  1. Launch System Preferences
  2. Click on Keyboard -> Shortcuts -> Services
  3. Find Capture Screenshot to Yoink in the list, under General:Screenshot System Preferences Keyboard Shortcuts
  4. Click on add shortcut and enter the shortcut you’d like to use to activate the service.

That’s It

That’s all there is to it. Now you can create screenshots that are then immediately available in Yoink for you to drag around.
If you find it useful, be sure to let me know on twitter (@eternalstorms) or by eMail – I’d appreciate the feedback!
Take care!

Update (October 14, 2015)

I got a bit of feedback on this – especially feedback from Pietro S. and Jeremy M. pushed me to update this post with a bit more information.
  • To make the Automator Script capture the entire display instead of just a selected portion, replace the line ‘ do shell script “screencapture -i ” & filePath ‘ with ‘do shell script “screencapture “ & filePath ‘ (removing the -i option to cause the selection)
  • Jeremy was so kind to provide an updated Automator Workflow that appended a date and timestamp to the screenshot’s filename; add two actions before the actual script (“Get Value of Variable”) with the variables Date and Timestamp and import them into the script – as in this screenshot:
    Screenshot of Automator, appending date and time to the filename
  • To use this Automator Workflow with the standard keyboard shortcut command-shift-4, you first have to deactivate the standard action in System Preferences -> Keyboard -> Shortcuts -> Screen Shots, or assign it a different keyboard shortcut: Screenshot of System Preferences

A ‘thank you’ goes to Jeremy and Pietro for the updated workflows.

Read more