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

[Note: This is a guest blog post written by my cousin, Sebastian Gansrigler, about the iOS game ZEN (App Store) he and I developed during 2014]

It was around March 2014, I started to set up a basic idea for a game I wanted to create in my spare time. How about combining a Rubik’s Cube and 3D game mechanics with complex mathematical theory and provide all of this with minimalistic pixel art on a touch interface? ZEN was born.

Basic concept on paper, pixel measurements, final screenBasic concept on paper, pixel measurements, final screen

I can’t really say where the idea came from, the game was always based on the concept of a rotating cube, about revealing something that’s hidden, about stress, learning, advancing and getting better and better by repeating it over and over again. ZEN was a good name: …a school of Mahayana Buddhism that developed in China during the 6th century. The word might be translated as something like “absorption” or “meditative state”.

Since I didn’t want to use any fonts, plugins or other preset assets, I created everything from scratch. Beginning with first scribbles on paper, I subsequently moved on to Photoshop and Illustrator to build a basic grid system, alignment rules, colors, etc. I tried to treat pixels like real pixels, there’s not one element in the game that’s round or off grid. Everything had to be perfectly consistent and at the end, of course, fun to play. From then on I went into After Effects for animations and interactions.

All game elementsAll game elements

One musician I had in mind for ZEN’s sound design was Brian Grainger aka Milieu. He created the original score for “Eufloria”, which I played a few years ago on PS3 and totally loved. I wanted something relaxing, yet stressful and packed with tension. Somewhere between Mount Kimbie, Kavinsky and Baiyon. I wrote him, Brian got on board and created an amazing soundtrack (soon available on his Bandcamp) and all sound effects.

Matthias Gansrigler, my cousin, has created some great apps for OS X and iOS, so I contacted him about the game. He did all the code and actual implementation of graphics and animations. The bug fixing was most fun, as soon as something had been fixed, something else came up. Special thanks to Das Möbel in Vienna for a great location to brainstorm and discuss (and of course for the ham & cheese toasts).

Funny button bugFunny button bug

After quite a bit over half a year of production, the game was completed and went online on December 21 2014 on the App Store for iPhone and iPad.


Sebastian Gansrigler is a 20-year old photographer and designer in Vienna, Austria. He works for WDM responsible for web and graphic design. You can reach him on twitter under @gansrigler.

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