Wednesday, August 20, 2014
I am planning to use this blog to share some of the technical details that I am working through for the upcoming version of Timeline 3D for OS X Yosemite and Timeline 3D for iOS 8.
After the conceptual design of a major new release, usually the first code that I develop is centered around the document format. I need a document format that can meet the goals of the release and that can also have a migration path from the previous formats the software has used.
New platforms and features have new requirements. After all, Timeline 3D was originally designed before the iPhone, iPad, and iCloud, not to mention the changes in the Mac platform during that time. Timeline 3D also did not originally support embedded images, movies, and audio.
Timeline 3D is almost ten years old and has supported six different file formats in that time. These formats include a custom binary format, SQLite Core Data store, XML Core Data store, as well as the ability to import and export tab-delimited text.
The file extensions have been txt, bdt, bdt2, bdt3, and bdt4 (short for Bee Docs’ Timeline). The new format will have a file extension "TL3D".
For the new version of Timeline 3D, my main goals have been cross-platform compatibility and support for syncing data. To this end, I designed a file format that is a folder structure of text (JSON format) files and media files in their native format (JPG, PNG, PDF, MP4...). Each event in the timeline has it's own folder with a data file and media files.
The new format is inherently cross-platform because it is just text and media files. There is nothing OS X specific, iOS specific, or even Apple specific about the format. If I wanted to build Timeline 3D for another platform or have a web server generate Timeline 3D files, the file format would still work.
The new format is also atomic. Change the tags in an event and only one little text file needs to be saved and synced. Change the image in an event and only two image files need to get synced (the media you added and a jpg thumbnail).
Since QuickLook and Spotlight were introduced, I have stored the thumbnail, preview, and search data within the file format. If I did this in a synced app, you could potentially be syncing large multimedia data every time there is a minor change to an event title or date. So, the new format uses an external QuickLook and Spotlight generator embedded in the Timeline 3D app. That information is now generated by your Mac as needed and not synced with the file format.
While the file format is not an aspect of software that customers think about often, the file format is the foundation of the features and performance that are critical to the app. The new format should be a great foundation for Timeline 3D for the next decade.
Wednesday, July 23, 2014
To all of my loyal Timeline 3D customers, thank you very much for your support! I have some exciting and important news regarding Timeline 3D for Mac and iOS. First, the bad news...
Yosemite and Timeline 3D v3
Timeline 3D v3 and Easy Timeline for Mac are not compatible with Yosemite OS X 10.10. I built the core functionality of these apps 6-7 years ago on features of the operating system that are no longer supported by Apple. I will be discontinuing Easy Timeline from the App Store immediately. Timeline 3D v3 for Mac will continue to sell for those customers running OS X 10.6—10.9.
If you are interested in running Apple's beta of Yosemite, please be aware that there is not yet a version of Timeline 3D that will run on it. My suggestion is to use our iOS app until we are able to ship a new OS X application (more info on that below).
Timeline 3D in the Future
For several years, I have been anticipating these changes and have been developing technologies to support a transition. My goal for Timeline 3D is to allow a seamless experience across your Mac, iPhone, and iPad. I was pleased to see Apple reveal a similar vision for their platforms at this year’s WWDC.
Many of the next generation features are shipping in the iOS app already and will be coming to a brand new OS X version of Timeline 3D over the next few months. This strategy has many benefits.
Timeline 3D for OS X benefits:
Speed and Stability — Build on modern OS X frameworks and technologies.
iCloud sync with other Macs and with iOS
Retina display support for 3D presentations.
Better animations and lighting in 3D timelines.
Faster, smarter, and more accurate date parsing in all localizations
Per-timeline localization — For example, build a French timeline if you are in the UK
Auto-save and document versions
3D web exports using WebGL
Simplicity — No more tweaking fonts and image sizes to get a timeline to fit on a page.
Continuity Features — Seamlessly move between Apple devices without loosing your place.
App Store Distribution — Timeline 3D for OS X is coming to the App Store!
Timeline 3D for iOS gains:
Support of iOS 8 features and devices
iCloud sync with Macs and other iOS devices
Movie Export — Render HD movies of your 3D timeline.
Continuity Features — Seamlessly move between Apple devices without loosing your place.
Please note that this ground-up redesign means that some features that have been a part of Timeline 3D for Mac will not be available immediately on the new version, for example, event rows and event colors. As I bring new features to Timeline 3D, they will be added to both platforms at the same time whenever it makes sense to do so.
Timeline 3D for OS X will support OS X 10.10 and above. The new Timeline 3D for iOS will support iOS 8 and above. I expect to launch the new versions soon after Apple officially launches their new operating systems later this year.
Timeline 3D is going freemium. For free, anyone will be able to download Timeline 3D for OS X or iOS, make and edit timelines, and present them in 3D. You also will be able to sync timelines over iCloud and share timeline documents using AirDrop or Dropbox. There is no time limit and no limits to the number of timelines or events that you can create and present.
If you are a regular user of Timeline 3D, there will be an option to purchase unlimited exports, in which case the app will never present an in-app purchase option to you again.
If you prefer an à la carte option, then exporting your timeline will require an in-app purchase. There will be a fee each time you print or export a PDF, PowerPoint slideshow, Keynote slideshow, HD Movie, or WebGL website. For example, if you use the timeline occasionally for a homework project, the software should be much less expensive for you than it is now.
The new pricing model is designed to allow people to use the core features of Timeline 3D without paying (there are no free trials in the App Store). It also allows schools to install a usable version of Timeline 3D on every iPad and Mac for free. It allows current customers to make the switch without paying to gain access to their existing timelines, and it enables you to send your timeline document to someone who does not yet own the software without requiring them to purchase.
I am excited about the future of Timeline 3D. The work I am doing now builds on over 10 years of experience with timeline software and thousands of support conversations. I am also a bit nervous, because I know that it may be a bumpy few months during the transition for some of you. I am committed to making the transition as fair and as painless as possible for existing customers.
Wednesday, December 04, 2013
One of the most beloved features on Timeline 3D is our ability to create Keynote presentations from your timeline automatically. If you have not used the feature before, it renders 3D images or movie segments based on your timeline and places them in presentation slides creating the illusion of animating through history.
Of course, the Timeline 3D application can present your timeline as well, but the nice thing about using slideshow software is that you can integrate your timeline into your other content and also send the slideshow to computers that do not have Timeline 3D installed.
Unfortunately, Apple recently made changes to iWork that prevent this feature from working. We were caught off guard, because Apple did not pre-announce these changes before public release (unlike OS updates, which have developer betas). Many of you sent us e-mails to let us know that you are missing this feature.
This is not the first time that Keynote has changed the way that it interfaces with third-party apps. When Keynote was first announced in 2003, Steve Jobs highlighted the XML file format, which could be “hacked” by third-party developers. The first time we integrated Timeline 3D with Keynote, we used the Keynote file format to generate the presentations.
At some point, the iWork file format changed to a proprietary format, and it became necessary to use AppleScript to build Keynote presentation. In other words, instead of building a Keynote file directly, Timeline 3D instructed Keynote to build the presentation for us.
With the most recent release of Keynote (6.0), Apple has completely re-engineered Keynote with more modern technologies and with more iOS compatibility. Unfortunately, they removed most of their AppleScript support, which makes it much more difficult for third-party apps to create or manipulate slideshow content.
Apple has hinted that AppleScript support may be coming back in the future, but for now it is gone and so is our ability to control Keynote.
Meanwhile, over the past decade, our friends at Microsoft have been opening up their MS Office file formats... For PowerPoint, the latest versions default to the PPTX file format, which is well documented XML format.
Fortunately for iWork users, Keynote can also open PPTX files!
So, for the past few weeks, we’ve been working on a way for Timeline 3D to export PPTX files. Besides replacing the lost Keynote feature, there are several advantages to this approach.
The PPTX file can be opened with Keynote, PowerPoint for Mac, or PowerPoint for Windows. This will make things easier for MS Office users.
Because we can generate the file directly, you do not need to own Keynote or PowerPoint to generate these presentations.
Even if you do own Keynote or PowerPoint, those applications to not need to launch in order to generate a slideshow.
And most importantly…
One more thing…
We are adding the ability to create slideshows to Timeline 3D for iOS!
The same technology we use to create PPTX files on the Mac can also work on your iPhone or iPad. That means that you can create a PowerPoint or Keynote presentation on your mobile device and then send that slideshow to a PC via Mail or Dropbox, or you can open it directly in Keynote on your iOS device.
At this time, Timeline 3D for iOS can create slideshows using still images but not movie segments (the Mac version can do both).
This will be a significant upgrade. Especially for our customers who use our software in a Microsoft Windows or MS Office environment.
The new slideshow features are available in Timeline 3D for Mac today. The new version of Timeline 3D for iOS has been submitted to the App Store and should be available in the next few weeks.
Wednesday, September 25, 2013
When we launched our original web publishing service on the Mac, we received a lot of feedback from customers who wanted to tweek and customize the timelines in order to integrate them into their websites more fluidly.
I designed that publishing service to be a very simple, one-click, web publishing service with much of the complexity hidden on our servers.
This time around, our new web publishing feature (debuting on Timeline 3D for iOS 7) aims to maintain the same ease-of-use for the people that just want to share a timeline, but also aims to be more hackable for programmers and design pros.
Hosting your own files
Timeline 3D for iOS 7 enables you to export all of the web files required for your timeline to Dropbox, allowing you the opportunity to manage the hosting yourself. For example, you could publish the timeline on a secure server (like an intranet). It also gives you an opportunity to modify the files before publishing.
Customize Style Sheets
Web designers may want to change some of the colors and styles of their published timelines via CSS, and we are providing access to the individual web files to enable them to do so.
However, there are a handful of CSS settings that might be useful for tweaking. I have formatted these settings in a human-readable layout with plenty of comments and placed them near the top of the “index.html” file. These settings should be easy to find and modify for experienced web developers.
While the timelines themselves use pre-rendered graphics and cannot be modified via CSS, the color and behavior of the navigation controls can.
For example, you may want to adjust the HTML body background to match the color of the page the timeline will be embedded in so that any rounding errors around the edges of the pixels are not visible.
You may also want to change the color of the bee-line at the bottom of the timeline to match your logo or the media within your timeline events.
Finally, you may have licensed a custom font for your website, and you can change the CSS to use that font for the bee-line mouse overs.
Adding custom poster image
As an example of another “hackable” element, you may have a special situation where you want to display a poster image that is clicked to load the interactive timeline.
Perhaps the poster image contains instructions on how to use the keyboard to navigate the interactive timeline. Or, perhaps you want a highly optimized poster image to save some bandwidth on a site with millions of visitors.
Now that you have access to the files, you can add content like this before the timeline loads.
How to embed a timeline into your website
By default, if you navigate to the web timeline, it will adjust to fill the window of your web browser (or your screen if you are on a mobile device).
If you embed the timeline into your website using a standard iframe tag, it will automatically size to that iframe. For example, the timeline embedded in my announcement blog post uses code like this:
<iframe src="http://i.interactivetimeline.com/demo/index.html" width="500" height="365" frameborder="0" scrolling="no"> </iframe> <p> <a href="http://i.interactivetimeline.com/demo/index.html"> View Full Size </a> </p>
Embed at any size
Our web publishing customers have told us that they want more flexibility to embed the timeline into their websites at any size. For example, I know this blog post will be 500px wide when styled for our website. If I include images, movies, and timelines, then I want them to be 500px wide.
I may want a long and skinny timeline to use as a header for my website or a portrait-sized timeline to use beside an article.
This is now possible with web timelines published with Timeline 3D for iOS.
As I discussed last week, our new web publishing feature has two modes. It uses WebGL in browsers that support it. When the timeline is shown in WebGL, it will always adapt exactly to the window or frame that surrounds it. The size and aspect ratio do not matter.
If the end user’s browser does not support WebGL, then we show them an interactive sequence of pre-rendered images instead. Since these are pre-rendered, they are not quite as flexible on the size.
We render out each image in about a dozen different aspect ratios if you publish with the default settings in Timeline 3D. Not only that, but each image is rendered in three different resolutions.
The result of this magic is that the timeline always looks great, fills the available space, and uses bandwidth appropriately.
If you are embedding the timeline in your website, be sure to test it on a non-WebGL browser and tweak the aspect ratio until the timeline fills the iframe completely.
If the aspect ratio your coded is not available as a pre-rendered size, then there will be a border around the entire image. When you hit a pre-rendered aspect ratio exactly (or within a few pixels), the border will go away and the image will display to the edges of the frame.
Pro Tip: A more efficient render
As you may expect, it takes some time, battery power, and bandwidth for your iOS device to render all these image variations and upload them.
If you are planning to present your timeline exclusively within an embedded iframe, and if you know the aspect ratio of that iframe in advance, then you can select that aspect ratio in Timeline 3D.
If you choose a specific aspect ratio, Timeline 3D will skip all of the files that are not needed for that situation.
Specifying an aspect ratio before publishing also has the benefit of using nice simple ratios for easily calculating the optimal embedding size. “Adaptive” uses actual pixel ratios of common mobile browser, which are not as mathematically pure.
As you can see, the options for publishing a timeline are now more advanced. You can tell by the length of this post!
Our hope is that designers, web programmers, and news media will find Timeline 3D to be a valuable and flexible tool for telling their stories. If you have any questions about web publishing, please send us an e-mail at firstname.lastname@example.org.
Wednesday, September 18, 2013
Personally, one of my favorite features in iOS 7 is one that many people seem to be overlooking. That is “Dynamic Type,” which gives you the opportunity to tell the operating system what size fonts you prefer, and then apps that support Dynamic Type can adjust accordingly.
When adapting Timeline 3D for iOS 7, this is one of the first features on which I focused.
Here is an animated image of our Timeline 3D’s event list, event detail page, and the Dynamic Type setting. You can see how each of them look with different size settings. Click the animation for the full size.
Obviously, the font sizes are changing. It may be less obvious that the layout is changing too. The image size, the margins, and the list spacing are all adjusting according to the font metrics.
For example, the app always tries to keep the event details within a single screen if it is practical to do so. As a result, the kangaroo image gets smaller as the text around it grows larger. There are design rules that govern the size of the image. So, it will only shrink to a minimum size, and then, if the event needs more room, the layout will introduce a vertical scroll.
Furthermore, the fonts are not all scaling in a linear proportion. Notice that the event dates in the list do not grow as fast as the event notes on the middle screen.
There is one more interesting note to point out from our support of Dynamic Text. The feature, in its stock configuration, provides variations of Helvetica Neue to apps. We wanted to use Brandon Text for our app, because it is more beautiful and readable than Helvetica Neue at small sizes. Therefore, I built a custom Dynamic Text system that forms a layer between the stock system and our app. This custom system translates your preferences into the font faces, weights, and sizes that our app's design language is built upon.
Monday, September 16, 2013
I am excited to introduce a new way for sharing interactive timelines. This revolutionary new web publishing feature uses next-generation web and rendering technology in completely new ways and will debut with Timeline 3D for iOS 7.
Interactive 3D timelines on the web!
For years, I have been thinking about how to render 3D timelines in a web browser. Many of you have e-mailed and asked for this capability too. Until recently, however, I did not believe that it would be technically feasible.
Why don't you just use…
I received many suggestions along the lines of “Why don't you just use Flash to present 3D timelines?” There are several reasons. The most important reason is that Flash is not available on most mobile platforms, and it is falling out of favor on desktop platforms as well. Many people have Flash disabled in order to avoid annoying ads in their browser.
The second issue with Flash is technical. In a nutshell, Flash was not designed for this kind of work, and it would be very challenging to get it to work well for 3D timelines. It is more suited to 2D animations than 3D animations.
…HTML5 / CSS Animations?
Similarly, I received suggestions like “Why don't you just use HTML5?”
CSS Animations and CSS Transforms are great, but they are not designed for the advanced 3D animations that are happening in Timeline 3D. Yes, CSS transforms can display an image in perspective. But they cannot be used to implement technical features such as dynamic texture loading to the GPU, fragment shading for lighting, and other effects that make our animations look so good.
The new kid in town
Then a new technology emerged that looked promising. WebGL uses code similar to OpenGL. I am using OpenGL in Timeline 3D, so that is good. WebGL also enables advanced coordination with the GPU, which is also good. Promising!
However, WebGL also has challenges. It has only recently become adapted by desktop browsers and is not yet available on many mobile browsers. Most WebGL implementations that you can find at this point are technology demos that are cool but would not be practical in a real-world website. For example, I want web timelines that can be included in a major news media story with viewers using every platform and browser.
Then I realized…
WebGL would be the best way to show an interactive timeline in the web. But until it becomes ubiquitous, I would need a fallback — something that looks like the WebGL version but does not require WebGL.
So crazy, it just might work!
What if we pre-rendered every event as a 3D image, then stitched them together with HTML5 / CSS animations? We also could pre-render bitmap textures required by WebGL and present the WebGL animations for the browsers that supported it.
I dismissed this idea at first. Each website actually would need to be two websites, the WebGL and the pre-rendered one. Sounds complex!
Ideally, pre-rendering the images would need to be done at multiple sizes if we wanted the timeline to resize within it's frame. Rendering 3D images is a lot of processing work, especially for a mobile device. Would an iPhone or iPad even be capable of rendering and uploading hundreds of images?
So I had an idea, but it required something that has never been done with WebGL, along with intensive offline 3D rendering on a mobile device, which is rarely attempted. And, why not try to build it in time for the new version of Timeline 3D for iOS 7? What could possibly go wrong?!
Cutting edge technology, in your hands
Well, fortunately, not much has gone wrong. The project has come together quite well. We are shipping a first peak at the feature in our iOS 7 update for Timeline 3D.
You can now publish interactive web timelines from your iPhone or iPad!
Those timelines can be viewed on any web browser. On a WebGL browser, the timelines will be fully animated and interactive in 3D. WebGL-capable browsers include Chrome, Firefox, Opera, and Internet Exporer 11. WebGL is an opt-in feature of desktop Safari.
On other browsers, such as mobile Safari, the timelines are also 3D and interactive, though they will use cross-fading images instead of actual 3D motion graphics.
Either way, the timelines can be navigated with a mouse, keyboard shortcuts, or touch gestures.
Just the beginning
Please note that this is very new technology that we are continuing to improve. In fact, we have chosen not to advertise the feature in our App Store marketing until it is a bit more mature. Think of it as a stealth feature known only by our closest friends.
At this point, web publishing can take your iPhone or iPad quite a while to render the many images required. Processing will pause if you switch to another app, since the rendering requires the full resources of the CPU and GPU.
Your feedback will be valuable and will help us improve the feature. You can start by viewing the timeline above in your favorite web browser and letting us know how it goes. You can always reach us at email@example.com with questions and comments.
Over the next few weeks, I will go into more detail on how the web publishing works and how you will be able to integrate it with your existing websites.