Pushing the iPad to it's HTML5 Limit - Animated Backgrounds

Recently Bluetube built an all HTML5 web application for iPads to be used as a Kiosk.  As usual, we wanted to push things a little bit, so when the client asked about an animated background, we went with it.

Let's start with the fact that animated backgrounds on full client browsers is a no brainer.  Even full video backgrounds run fine, often thanks to JQuery plugs or working with the canvas.

Challenge #1 in iPads?  They don't support video backgrounds, and even the usual trick of laying HTML over a video playback isn't possible because you can't auto start video. 

First thought was to take advantage of the numerous flash to SVG converters available.  This was a great, real world chance to try Swiffy, Google's Flash to HTML5 converter.  https://www.google.com/doubleclick/studio/swiffy/faq.html.  Great!  How easy will this be? Get one of our designers to build an animation in Flash, convert it to HTML5! How amazing will this look?

Challenge #2: Swiffy supports all kinds of features of Flash. The problem for us is it doesn't support gradient colors.  Our animation was a "waves" or "curtain" style effect that absolutely needed color gradients to look correct.   Conversion worked great.... but lacked color.

Next idea - we'll just build an effect using JavaScript.  There are plenty of water effect demos out there, like this one that we tried to model after.  http://badassjs.com/post/932217000/water-ripple-effect-in-canvas.  Easy enough, we borrow some code and make a water ripple. Not exactly what the client wanted, but close enough.

Challenge #3 - Have you ever noticed that so many HTML5 effects are done on 300 x 200 pixel images?  Turns out, there is a good reason.   Heavily calculated animations like this don't scale well.  Look great on a desktop with quad cores at 300 x 200.  At 1024 x 768 on the iPad2, doesn't perform as well.

At this point, we're really getting a little desperate.  We're running out of ideas, but we REALLY want to make this tablet cool and we really want to find out what HTML5 can do (or can't do).

Final option: Animated gif.  It's cheesy and it's technology from 2000, but iPad supports it.  But how do we get our pre-built flash animation into an animated gif?  Turns out this is a bit of a process, made more difficult because this wasn't a timeline animation, and thus we couldn't just "export" it to animated gif.

1. Plat the SWF into a SWF capture utility that converts the live playback into an MPEG video
2. Convert MPEG video to Animated GIF

That's a hell of a process and a strange place to wind up.  I'm sure, somewhere, some Flash fanatic who thinks HTML5 is going back to the dark ages is going to have a field day with this blog. In a lot of ways, they are right.  But the future is no doubt HTML5 and in an upcoming blog post I'll talk a little about how HTML5 has allowed us to do some unique things that would be more challenging than in Flash.

So bottom line - if you want an animated background with advanced animation in your iPad application in HTML5 - the future is animated gif!

To learn more about Bluetube and our HTML5 experience, visit our website at bluetubeinteractive.com

 

Language Fallback in Sitecore 6.x

Background

Built-in language versioning in Sitecore leaves a little bit to be desired.  There are 2 major issues we see in the stock implementation of language versioning in Sitecore:

• If you attempt to retrieve an item from Sitecore that doesn't exist in the current context language, Sitecore returns an empty, useless item.
• When a version is added for a given Sitecore item, it inherits NONE of the values from any existing version.  This means any image, treelist value, droplist value, etc. are all empty/blanked out in the new language item, and you are starting with a blank slate.

Depending on how the site is structured, the first item can be less of an issue.  If we're supporting another language on a page or a whole site, it's obvious we'll need to translate any needed content into the new language.  It can be painful to add new item versions in Spanish (for instance) for every single item a page may make use of.

What's even MORE troubling is the second issue: any new language version of an item starts from scratch.  Any treelist, droplist, or droplink fields, image/media selections, etc. are all empty!  This poses a big problem, as content editors then have to click back and forth between the original language and the new language versions and essentially "recreate" the state of the item and its data.

Solution

Shared Source to the Rescue

Luckily, we're not the first people to come across these challenges.  After a bit of Googling of the issue, we came across this great blog post and video from Alex Shyba of Sitecore USA:

http://sitecoreblog.alexshyba.com/2010/11/approaching-language-fallback-with.html

the module itself can now be found at:

http://marketplace.sitecore.net/en/Modules/Language_Fallback.aspx

We believe the partial/field-level language fallback solution he created as a Sitecore shared source module is a very elegant and powerful solution to the second problem discussed above.

What is Language Fallback

Briefly, language fallback is the concept of allowing a language version of a Sitecore item to "inherit" its content from a version in another language.  For us in the USA, this normally means when we create a new version in Spanish, Chinese, etc., we want it to initially take all of its content from the existing version in English, rather than starting blank.  This accomplishes two goals:

• Gives a good starting point for translation.  Having valid content in all fields on an item allow a content editor to visually see what still needs to be translated to a new language as they review pages.
• Maintains any existing item selections for images, treelists, droplists, etc., etc.  This is a HUGE benefit and time saver for the content editor.

Brief Overview

The module can be installed as a Sitecore package, and adds a field to a Sitecore template that allows it to take part in language fallback:

 

 

Once a template is configured for fallback, you can navigate to an item based on that template and add a new version of the item in the new language.  Any fields configured for fallback will now inherit their values from the fallback language.  Any fields that have a fallback value will be marked as so (circled in the image):

 

 

 

 

 

 

 

 

 

Pitfalls

A few things to bear in mind when implementing this solution:

• A version still needs to exist for any item the page needs in the new language (see the "Background" section above).
• The shared source module is currently built against Sitecore 6.5, so you may need to rebuild it for the Sitecore environment in use.
  • In our case, we build the module against Sitecore 6.3 dlls, and had to resolve a couple of areas that weren't compatible (properties didn't exist, etc.)
• You must configure the site to enable language fallback
  • Normally you can use the included Sitecore.SharedSource.PartialLanguageFallback.config file that is included as part of the module in /App_Config/include.
  • We already had an include file that contains our site definitions, so the enableFallback key needed to be added to the end of that site definition to get it to work.  There seemed to be a "collision" of sorts when the site definition was patched in two separate places, and Sitecore thought the site was being defined twice.
• The "fallback value" labels will not show up if View->Standard Fields is enabled (on the ribbon/toolbar).  A separate content editor renderer is used when the content editor is in that "mode."

 

 

Validating multiple forms the ASP.NET MVC3 way, using strongly typed Views

Background

With the advent of ASP.NET MVC, we've been able to support more than one <form> tag on a page (finally).  MVC also has excellent support for out of the box validation using strongly-typed Views and its data annotations attributes on the model classes.

Combining these two features in a meaningful way is surprisingly tough to figure out the first time around, and Google is relatively devoid of people talking about it.  Let's look at how to accomplish this.

Solution

One of the keys to getting side-by-side validation going is creating a proper View hierarchy.  We need to construct our views so that we have the following nesting:

The model(s) for these views should be similarly nested:

Each of the above views should be strongly typed to the corresponding model above.  This allows us to render the partial "form views" within the main view, and pass the correct model to each, like so:

@Html.Partial("Form1", Model.Form1Model)

Rendering a strongly typed partial view in this way will allow the built in validation to take place on that model correctly, and independently of the other form view or the main view.  That is the key to the whole process.

A practical example

That all sounds great in theory, but here's how to actually wire up a working multi-form example in the real world.  We'll create a view that allows a user to perform a search using two separate sets of criteria, and two forms.  Here are the important bits:

The model

        public class SearchViewModel
    	{
		public NameSearchViewModel NameSearch { get; set; }

		public SeatSearchViewModel SeatSearch { get; set; }
	}

	public class NameSearchViewModel
	{
		[Required]
		public string Name { get; set; }
	}

	public class SeatSearchViewModel
	{
		[Required]
		public string Row { get; set; }

		[Required]
		public string Seat { get; set; }
	}

Controller

The controller action can simply return the main view, bound to the top-level model:

SearchViewModel model = new SearchViewModel
{
	NameSearch = new NameSearchViewModel(),
	SeatSearch = new SeatSearchViewModel()
};

return View(model);

The view

Name search partial view

@model Model.NameSearchViewModel

@using (Ajax.BeginForm(new AjaxOptions() { Url = "/namesearch/"))
{
	<label for="name">Name</label>
	@Html.TextBoxFor(m => m.Name, new { id = "name" })
	@Html.ValidationMessageFor(m => m.Name, "Please enter a name")
	<input id="nameSearch" type="image" src="/assets/images/btn-search.png" alt="search" />
}

The other form partial is very similar, so is being left out intentionally.

Main View, render the partials

@model Model.SearchViewModel

<h3>Search By</h3>
@Html.Partial("NameSearch", Model.NameSearch)
<p>OR</p>
@Html.Partial("SeatSearch", Model.SeatSearch)
		

That's it!  MVC takes care of the difficult stuff and we're able to write cleaner, more efficient code.

Our favorite two Umbraco packages

With the multitude of Umbraco packages available, it’s hard to sort through the noise and find the most useful ones.With that in mind, we wanted to share our two favorite ones.

UComponents

http://our.umbraco.org/projects/backoffice-extensions/ucomponents

UComponents has a vast array of data types and other useful tools. We find that Umbraco’s built in data types do not always fit our needs. That's where UComponents fills the gap. If we can’t find what we need with the built in data types, we can usually find a UComponent data type that does.

 Umbraco XPath Evaluator

http://our.umbraco.org/projects/developer-tools/umbraco-xpath-evaluator

Umbraco’s built in development tools leave much to be desired. Our favorite tool is the XPath Evaluator. It allows you to test your XPath queries against the live Umbraco XML. It's indispensible when creating new XPath queries to search Umbraco. XPath Evaluator is simple but powerful.

How to get Titanium to build with IOS6 and XCode 4.5

We are working on some enhancements for the Seatow assistance application and need to update it to IOS6.  This involves some prep with the continuous Titanium SDK builds ( that are nearly ready for IOS6 GA), Xcode 4.5 and the new IOS simulator.  

I ran into a few issues as follows

1. Xcode's path has changed including the tools, from /Developer to /Applications/Xcode.app/Contents/Developer
2. The XCode command line tools had to be installed
3. The simulator kept crashing due to the Titanium project needing to be updated.

I used the current continious build for Titanium which include IOS6 support :

http://builds.appcelerator.com.s3.amazonaws.com/index.html

1) fix the developer paths

To fix paths, I followed this blog post to link the /Developer paths to the /Applications/Xcode.app/Contents/Developer so I could run xcode command line properly

http://seanfreitag.wordpress.com/2012/02/17/fixing-ios-simulator-via-command-line-on-xcode-4-3/

2) install command line tools and fix developer links

In Xcode 4.5 go into preference, select the downloads tab and click install on the "install' button next to the Command Line Tools

3) I was still getting the following error :

INFO] Launching application in Simulator 2012-09-21 18:02:28.525 ios-sim[3718:d07] _developerFolderPath(): Bundle not found for DevToolsFoundation_BundleIdentifier. 2012-09-21 18:02:28.551 ios-sim[3718:d07] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFDictionary setObject:forKey:]: attempt to insert nil value (key: DTDeveloperDirDeveloperDomain)' *** First throw call stack: ( 0 CoreFoundation 0x00007fff953a5f56 __exceptionPreprocess + 198 1 libobjc.A.dylib 0x00007fff8e073d5e objc_exception_throw + 43 2 CoreFoundation 0x00007fff953a5d8a +[NSException raise:format:arguments:] + 106 3 CoreFoundation 0x00007fff953a5d14 +[NSException raise:format:] + 116 4 CoreFoundation 0x00007fff95362c4b -[__NSCFDictionary setObject:forKey:] + 219 5 DevToolsFoundation 0x000000010001bda5 -[DTDeveloperPaths _developerFolderPath] + 409 6 DevToolsFoundation 0x000000010001b962 -[DTDeveloperPaths _pathForDirectory:inDomain:forVersionPathComponent:] + 290 7 DevToolsFoundation 0x000000010001b704 -[DTDeveloperPaths preferredPathForDirectory:inDomains:forToolsVersion:] + 205 8 iPhoneSimulatorRemoteClient 0x000000010000c720 +[DTiPhoneSimulatorSystemRoot knownRoots] + 164 9 ios-sim 0x0000000100002cf0 -[iPhoneSimulator runWithArgc:argv:] + 864 10 ios-sim 0x000000010000373b main + 155 11 ios-sim 0x0000000100001694 start + 52 12 ??? 0x0000000000000007 0x0 + 7 )

I created a new Titanium project and copied my Resources folder over with associated images, app.js etc, then compiled, and it worked.  Hope this helps someone else with Xcode 4.5 and Titanium.

Cheers.
Grant.

Limiting Sitecore Rich Text Editor Buttons by Security Role

Recently, we were asked by a client to restrict the buttons different content editors see in Sitecore's Rich Text Editor by role.  The idea being that general content editors didn't need advanced HTML controls, or in their case, even features such as changing color or font which could lead to inconsistent visuals.  Those controls are important however for more advanced editors and publishers, where being able to take advantage of the advanced features such as tables, fonts, and even media embeds is important.

This seems like a relatively easy thing to do since Sitecore has a powerful editor.  And it is... but it isn't necessarily as straightforward as you would think.

I'll recap briefly where the configuration is for Sitecore's Rich Text Editor and how to get to the items that make up the configuration.

 

 

Rich Text Editor configuration is stored in the Core database at/sitecore/system/Settings/Html Editor Profiles.   Rich Text Default is the default configuration. You can override this on any Rich Text Field by pointing to a different location.

If you use multiple profiles, you'll need to apply this to all of them, but to keep things simple I will be focusing on just the default.

Open the Security Editor and select the role you wish to edit. In this example, I'm going to use the Author role.

Navigate to the path above in the Core database.

Browse to the toolbars. In this example, I'm using the default, so there is a single toolbar. In the full (which is commonly renamed and used), there are three.  First, turn off item inheritance, then apply Read Permissions to the buttons you wish to show in the toolbar.  All other buttons should have their inheritance turned off.

 

If you want to turn off an entire toolbar, simply remove the inheritace from the toolbar - you do not need to turn off or change permissions on individual buttons unless you only want to show buttons within that toolbar.

Final note- you can use the deny read rather than inheritance and allow.  This is typically much faster. However, keep in mind in Sitecore that deny reads win out over allows. So if a user is in a role with a Deny and a role with an Allow, they will not be granted permissions.

The end result?  Logged in as Author you only see the 2 buttons we allowed.

This result should work on any of the Sitecore 6.X versions, including the 6.4 and higher with the change in the Rich Text Editor.

 

 

 

 

Mediating multiple views with a common base class with a single mediator

There are many situations where multiple views will need to share a common Mediator class. For example, games may have several on screen elements(views) that have the same behavior but will operate independently.

 
RobotLegs provides a simple but not very well documented mechanism for achieving
 
Whereas the following is the syntax for the standard mediator mapping to a view:
 mediatorMap.mapView( View Class, Mediator Class )

 Mapping multiple views with the same base class to a single mediator you only need to add an additional parameter  to the mapping call:  

mediatorMap.mapView( View Class, Medaitor Class, View Base Class)
 
The single mediator class will now mediate each of your various views independently.

Loading site-specific CSS files into Sitecore's rich text editor

Background

We work with a lot of multi-site Sitecore installations, and generally feel this is an area Sitecore excels at... however...

The Sitecore content editor interface does have some areas that don't lend it to good multi-site use though, one of which is the rich text editor.  Ideally the CSS dropdown in the editor would display CSS classes from a site-specific CSS file.  Unfortunately, out of the box Sitecore does not have the facility to do this.

Without the ability to have site-specific CSS classes, the admins for each site in a multi site installation would be forced to share a CSS file and see styles for all of the other sites - not the greatest user experience.

The Solution(s) - old and new

We've solved this for a while by using code similar to what's found on the Sitecore Developer Network.  This worked great for a time, but as of Sitecore 6.4 it stopped working.

So what happened?  The default.aspx and the code-behind class that are key to the above solution are still present in Sitecore 6.4, but they are not used.

Thankfully, we found a great blog post on the subject by Mark Stiles that pointed us toward the correct solution for Sitecore 6.4+.  The revamped rich text editor uses a handful of new classes, and, as always, knowing where to look makes all the difference.  A big thanks to Mark, as no one else on the Sitecore Developer Network or elsewhere seems to be talking about this.  (Just a note: I would recommend inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorPage and overriding OnLoad, rather than copying it from Reflector or similar as it appears Mark did).

Inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorPage allowed us to support site-specific CSS files in the RTE and keep the level of user-friendliness our clients have come to expect.

 

Bluetube is a cutting edge digital agency that designs and builds native mobile, mobile web, tablet, social, and presence solutions.  You can find out more about Bluetube at www.bluetubeinteractive.com.

Trouble connecting to Acer Iconia A100 with FlashBuilder 4.1.6

The Problem

We are building an app for one of our clients that will be targetted to the Acer Aconia A100.  Windows recognized the tablet no problem, but flex builder would not see the device when trying to "run" on the device in the choose device dialog ( appears have to you hit run).

I solved it by editing the usb drivers file provided by adobe and adding the acer iconia 100 to the file then updating the drivers are follows :

Get the acer hardware id

1. under the start menu go to "devices and printers"
2. Right click on the acer iconia and (may be called MTP) 
3. Select "properties"
4. click the "hardware" tab
5. click the properties button inside the tab
6. click the "details" tab
7. change the property drop down to "hardware id's"
8. Select the first value and right click and select "copy"  - View this photo
9. DO NOT CLOSE THE DIALOG
   
   

Update the driver file provided by Adobe

1. Navigate to the folder where flex is installed, for example on my machine its at : 
   
   D:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\
    
2. The driver file is located under the utilites folder :
    
   Adobe Flash Builder 4.6\utilities\drivers\android android_winusb.inf
3. Edit this file and find go to the end of the  section [Google.NTamd64] and copy one of the existing devices and chnage the USB portio of the value to the device ID you copied ealier,  e.g. : 
   
   ; Acer Iconia
   A100%CompositeAdbInterface% = USB_Install, USB\VID_0502&PID_3348&REV_9999&MI_01 
    
4. Save The file
5. Go back to the dialog you left open and click the Driver Tab and select "update driver"
6. select "browse my computer for driver software" and navigate to the utilities/android folder where you save the updated /inf file e.g.
   
   D:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\utilities\drivers\android
   
   
   
7. click 'next", say ok to windows warnings about the driver not being signed, and let the install complete.
8. You should now be able to run your app from flash builder and see your device in the  choose device dialog

NInject and Umbraco Trouble? Or simply need to extend Global.asax?

So Bluetube Interactive has recently been doing a lot of Umbraco projects, rolling out several new sites on the platform.  As a method of speeding development, all of our projects leverage Injection frameworks and our framework of choice for .NET is NInject.  However, due Umbraco and NInject both want to extend the Global.asax, which isn't possible.  So what is a developer to do?

The answer is surprisingly simple.  Although Umbraco does in fact extend Global.asax in its own class, it turns out it does not have a significant use... or at least one not significant enough to prevent us from wanting to use our Injection framework of choice.

In the bin folder, find a remove the following file:

App_global.asax.dll

Having issue with App_Browsers too?  It seems Umbraco inherits from that as well.

App_Browsers.dll

Both can be safely removed and at least to this point, we have not seen a negative impact.

Also, remmber with NInject you'll want to inherit from Ninject.Web.UserControlBase, not from WebControlBase.

Bluetube Interactive is a cutting edge digital agency that designs and builds native mobile, mobile web, tablet, social, and presence solutions.  You can find out more about Bluetube Interactive at www.bluetubeinteractive.com