The best way to describe the services is as follows:

“Juxio is a new visual way to communicate. Individuals and businesses use Juxio to combine images, text and more into mashable, visual streams called Juxes to share across social media and in print. Juxes are created on both our Web and iPhone apps. In the future we will support additional mobile devices. By making Juxio available anywhere at any time, we hope you find more ways to create new meaning.”

ThoughtFaqtory have been involved in the development of Juxio since the beginning of 2009. We were brought on-board to develop the web application, using Adobe Flex, Flash and ColdFusion. The biggest challenge in developing the web application was the client wanted the Juxios to be a maximum of 72″ x 36″ in size. One of the challenges we faced in the design phase was how we were going to handle the memory issues. We designed the application with these potential issues in mind.

The first idea we had was to use a tile layout and only render the tiles which were on the screen. This would reduce the memory load because only a portion of the Juxio would be stored in memory. But when zooming out so that the entire Juxio is shown we would have to store the entire Juxio in memory anyway. We could not afford to have the entire Juxio in memory because it could cause the application to crash due to insufficient resources. The team had to find a way to use less memory per inch of the Juxio. The biggest consumer of this was the images, so we looked at optimizing the system used to load and store images.

We worked on a system that would download an image stored in the cloud, scale and crop it to best fit the component it belongs to. A snapshot was taken of the transformed image and the original one is discarded. The smaller image is then rendered and kept in memory. Depending on the size of the original image we saved a significant amount of resources. The disadvantage of this approach is that when scaling an image we lose image quality. But because we are scaling down and not up, the loss is not as great. We also found that by taking the snapshot with Adobe Flash’s highest quality rendering mode we limited this loss.

One of the requirements was to render a 76” x 36” at 300 pixel per inch (PPI) PDF for print. Standard web graphics are 72 PPI to put this into perspective. An image of this size and quality would be 744 MB. While we could compress the image for the PDF, we would still need to create all of the pixels in order to compress them. It would be unfeasible to allow the Juxio to be edited at this quality. The team had to find a way to edit the Juxio at a low resolution and output it into a high resolution.

We decided to edit the Juxio with the standard 72 PPI and then scale it to 300 PPI when outputting to PDF. In order to create a 300 PPI image we needed to scale the Juxio up 4 times. Adobe Flash Drawing API is done using vector graphics and wouldn’t lose quality when scaling them up to the desired size. We used embedded font’s so that Adobe Flash would scale the text without losing quality too. But the images obviously pose a problem when scaled up 4 times the size. So we had scale the original image up by 4 to fit into it’s image component (explained earlier). Now the image stored in memory would be the correct size for the required 300 PPI to output to PDF. Essentially we were storing a 300 PPI image in memory. When the Juxio is edited, the image is scaled down and rendered at 72 PPI. Once the Juxio is being outputted, the image maintains its 300 PPI.

The screen shot below shows a set of images that have been cropped to match the exact size of the rectangle, so memory usage is minimal.

Screen shot of a Juxio created using the web application - built using Adobe Flex technology

The team were very happy with the results and the effort that went into prototyping the different scenarios, it definitely paid off. That was the first of many obstacles that we encountered in the design and implementation phases of the project. We are continually adding new features as users become more advanced which allows the creation of even greater content. In the next article we will dive deeper into the functionality of the web application that make it such a powerful and unique product.

Earlier this year Juxio asked us to develop an iPhone application that allowed users to create Juxes (*smaller versions of Juxios) based on selection of templates using there iOS devices. Designing a mobile application requires a different approach compared to a web application on the desktop. Firstly, the screen size is a lot smaller, you are required to think on a screen by screen basis when designing mobile applications. When we started to design the iPhone app with the client, we need to take into account the hardware, form factor, screen size, orientation, input methods and other capabilities such as GPS and camera etc.

The one major challenge when designing for a mobile device is to take into account the network connectivity. Users take their phones everywhere with them which means variable Internet connectivity or sometimes non at all. So ideally the application should work in offline mode and check whether a network connection is available before sending or receiving data from the device.

So that is exactly what our team did, we designed and developed the application to work with or without a network connection. The app is smart enough to know when a connection is available and sync the data appropriately. Implementing a robust syncing framework is quite challenging but when it’s working can be a very rewarding experience. This functionality was essential in keeping the users different devices and web application in sync. We kept the process very simple for the user, there was no conflict management, that was all handled within the framework.

The next biggest challenge was implementing a layout engine for the different templates that the user can choose from. This was developed using Core Graphics API and is a little more complicated compared to using Adobe Flex and the Adobe Flash Drawing API. Each template is rendered based on a data structure defined in XML, and both the web and iPhone apps understand this structure.

To enable cross device content creation, sharing and display, we persist XML which is used by the layout engine to render the Juxio. The XML used to create the Template is modified by the users when they add content to the Juxio. This XML which describes the user’s Juxio is persisted to the cloud and allows the iPhone or web application to load and render the persisted Juxio.

Link to the TechCrunch article on Juxio when it launched in August 2010 as a private beta.

* A Juxio is created using the web application

* A Jux is created using the iPhone application

]]> http://thoughtfaqtory.com/blog/2010/12/07/juxio-project-featured-on-techcrunch/feed/ 0 http://thoughtfaqtory.com/blog/2010/05/10/thoughtfaqtorys-now-offering-mobile-development-services/?utm_source=rss&utm_medium=rss&utm_campaign=thoughtfaqtorys-now-offering-mobile-development-services http://thoughtfaqtory.com/blog/2010/05/10/thoughtfaqtorys-now-offering-mobile-development-services/#comments Mon, 10 May 2010 08:38:30 +0000 Simon http://thoughtfaqtory.com/blog/?p=311

ThoughtFaqtory originally offered development services on Adobe Flex and AIR platforms. We have created many great experiences for small to large corporations in the USA, Europe and South Africa.

At the end of last year, we decided to embark on offering services in the mobile space. The type of platforms we currently develop for are iPhone, iPad, Android and Adobe Flash Platform for mobile devices. We actually have a few iPad’s floating around the office. Another technology we are looking forward to this year is AIR for Android, Flash Player 10.1 for mobile devices and Flex Mobile Framework (codenamed Slider). This is very exciting, because it allows our company to leverage existing ActionScript 3 skills and apply them to mobile devices.

We forsee that from 2010, there is going to be large demand for development of custom software solutions on mobile devices. A number of our team members are currently working on iPhone and iPad solutions for products that already have a web presence. Many companies are creating mobile experiences from existing products that are already available to the public. Then there are the products exclusive to mobile devices such as Foursquare and Gowalla, these types of products require location-based services function correctly.

ThoughtFaqtory is looking forward to this year as the mobile development space heats up.

See you at Net Prophet 2010 event on the 13th May 2010, Mutual Park, Pinelands, Cape Town.