Just a few notes to dash off today before I’m back to the grind.

Metro and FontAwesome

I wanted a Metro tile look without having the high overhead with the Telerik set of controls, and a Windows 8 or WPF application was off limits per my client. And, I only had a few days to put together a demo. What to do?

Well, the good news is there’s a host of CSS options for you out there. This site has a comprehensive set of stylings that work OOTB. The one I chose was metro-bootstrap from this site – http://talkslab.github.io/metro-bootstrap/ – and a full description of sample components a la Bootstrap are here: http://talkslab.github.io/metro-bootstrap/components.html. So putting together an icon was fairly easy. (On FontAwesome, here’s an icon cheatsheet – excellent! http://fontawesome.io/cheatsheet/) And in a jiffy, I had a clickable interface that displayed tiles without having to jump through a lot of hoops – so I could focus on the data and not the look and feel. Yay!

Hotspots

Feels weird to say this but I’ve never put hotspots on an image before. Yet the operators at this facility think in terms of physical machines – so it makes sense for the UI to key off of a factory layout. The idea is, when you hover over a particular area or click it, a list of the part numbers in progress at that station will display. To do this, I installed Expression Web and took my snapshot and dropped a set of rectangular hotspots on the image:

Once this was done I took the raw HTML and translated the coords to a set of Left/Top/Right/Bottom elements the way the asp:ImageMap control prefers, see below:

 

And, voila – a clickable image map. HTML5 goes even further with its <map> element – you can do some pretty neat things without having to resort to a ImageMap or a similar control, and keep it native. Enjoy!

Other Links

• Telerik has a LiveTiles with regular updates from a client side web service: http://demos.telerik.com/aspnet-ajax/tilelist/examples/livetiles/defaultcs.aspx
• http://msdn.microsoft.com/en-us/library/cc295120.aspx – modying hotspot codebehind behavior