[DB75]

A Little GasBum Press

A couple of months ago I decided to write a little J2ME application that allows mobile users to get the cheapest gas prices on their device - aka GasBum. This ultimately stemmed from a few conversations I had with friends and family over the labor day weekend. GasBum runs on many different devices and on some of the more popular ones such as the Nokia 7610, Nokia 6682, Nokia 6620, and Nokia 3650.

Last month I received a phone call from a guy named Brent with Advocate Magazine. He wanted to do a small phone interview so I took him up on the offer. I really didn't think it would be in the next release of the magazine, even though he said it would be. The Advocate goes out to about 100,000 readers in the Dallas area. The magazine is distributed throughout four major divisions in Dallas with my area being Lakewood. You can see the distribution numbers here.

You can check out the magazine article below and I'm excited about getting GasBum installed on many more devices over the coming month. This article gives me more credit than I deserve, but I'm appreciative nonetheless. Enjoy and thanks to everyone for all the great feedback.

Morfik's JavaScript Synthesis Technology

I'm always interested in the latest technologies and how they will enable developers to build applications that truly revolutionize the web. This technology for me currently is Flex 2.0. At one point in my life I was a stout Flash and ColdFusion developer. I still use these technologies when the task at hand requires them, but find myself straying further and further away from them. This isn't by choice, but by demand. I'm very seldom involved with projects that need a true Flash developer. Nowadays, you tend to only see Flash being leveraged in a truly rich multimedia experience, like the crazy-cool puppet control at Comcastic. If you haven't seen it, you should definitely check it out....there's some crazy physics going on behind the scenes.

Back to the point of this post. With Web 2.0 being the latest tech buzzword we're seeing some truly amazing applications and development tools spring forward. The whole concept of desktop applications running in web browsers and getting smarter by the minute may seem far-fetched, but it's where we're headed. The key is in providing developer's with the necessary tools to make this happen. Morfik is working on an IDE that will allow programmers to write object oriented code that will then get compiled down to JavaScript and HTML. This is supposedly built into an AJAX engine that removes the developer from having to write any low-level code. This is known as their JavaScript Synthesis Technology.

Near the bottom of the JST page you should notice the following quote:

"As an indication of this power, two Morfik programmers used it to build a desktop version of Google’s Gmail in just 2 months. This application is a pixel-by-pixel match of Gmail’s interface and functionality, yet it also works offline just like standard email clients such as Microsoft Outlook."

Sounds like a programmers dream. Hopefully they'll release the Gmail source as an example application because right now I'm a bit skeptical. I'm hoping to be proven wrong and in the meantime will await entry into the Pioneers Program.

Google Maps Over Flex

As a stepping stone to porting Google Maps to Flex I've taken the approach of placing the maps on top of Flex. This is done through the use of a transparent background approach where the background of the Flash movie is made to let anything underneath it show through. This is done by setting a parameter called wmode to transparent. You can see the results in the image below.

What's happening here is that the map div layer is actually getting rendered on top of the Flash movie. Therefore, it gives the appearance that the map is actually inside of Flex. From an end user standpoint you can't really tell the difference. From a development standpoint you can make JavaScript calls to communicate between Flash and the map object. This is a little extra work, but serves the purpose of what I'm trying to do initially.

I'm confident that the port of Google Maps to Flex will happen whether it's by me, somebody else, or Google themselves. I know the last option sounds crazy, but Google did recently switch all their on-line video content to Flash. Flash video is tough to beat. I can envision a truly rich mapping application with video and push technology where data arrives and is displayed automatically on the map without polling or refreshing. Map sharing could even be implemented.

With all this being said, let me get back to the point. Taking the div approach provides a seamless experience for the user. Events in Flex are broadcasted to the map div and vice versa. If you look at the following example

http://www.db75.com/dev/gmaps/flex_gmaps4.htm

You'll notice that clicking on a point in the map selects a record in the table beneath it. These are two completely different environments, one DHTML and one Flash. They communicate with each other through JavaScript calls. When a record is selected in the table the appropriate location on the map is centered in the view. One very cool thing about this is that you can use your up/down arrow keys to move through the table and watch the different points pan into view. All this functionality comes standard with the Flex DataGrid control and a simple change event is responsible for calling the JavaScript that centers the map.

You can even drag the horizontal divider and the map will resize appropriately. This is done again by broadcasting an event from Flex to the map div. This functionality is a bit quirky and needs some work since the map doesn't resize until the mouse is released. There is no feedback given to the user when they're dragging and if you drag upwards the map actually covers the divider.

The other key point I'd like to mention is to make sure that your div layer is placed after your Flash object/embed code. The browser renders this code from the top down so you want the map to be rendered on top of the Flash movie. I experienced some crazy results when placing the map div before the Flash code. View the source of the link above if you need an example.

With all this being said I think there's enormous potential with integrating Google Maps and Flex. Although this isn't "true" integration it does provide a tightly integrated experience for the end user. Please feel free to contact me if you have any questions about this implementation. It's very straight-forward and appears to be a viable solution (unless you're in Safari and that's a different story).

WebORB Google Maps Chat Demo

I've been talking with Joe Orbman from WebORB and he demonstrated his Google Maps chat with me last week. He asked me not to blog about it until he published the final release....so here it is:

http://www.themidnightcoders.net/examples/messageserver/chat/mapchatajax.htm

It's a cool concept because upon posting your message a DNS lookup is made that pinpoints your location and displays it on the map. I would highly recommend checking out the "SHARE MAP WITH SELECTED CLIENT" feature as it demonstrates the power of WebORB and push technology. One note to Joe, MAKE THE KILLER SHARING FUNCTIONALITY STAND OUT MORE BECAUSE IT'S HARD TO SEE!

If you're not familiar with WebORB I definitely recommend looking into it. It's definitely the only product of it's kind. It's the only product I know of that works with both AJAX and Flash clients and has built-in support for Flash Remoting.

A Blog for Everything

In my small neck of the woods I like to write about development technologies and any wild ideas that come across my mind. With that being said, it's truly amazing how many specialized blogs exist on the web. I think the last number I heard was that about 40,000 new blog sites go up in a single day. I think about all the RSS feeds I subscribe to and how all of them have very specialized content. The web is changing and more people are becoming empowered to "participate" in this once "read-only" web.

Jamie's PolkaDachs site has been getting an increasing amount of traffic and I was blown away by the fact that a blog site called Mommies with Style wanted to write about her products. You can find the post here:

http://www.mommieswithstyle.com/2005/10/possible-cure-for-pet-peeve_17.html

This isn't only a shameless plug, but also serves to represent a point. The point being that in the mid 90's I was using notepad and a program called WS_FTP Pro to upload my content to the web. Oh how the times are changing and no longer are just techies participating in creating the web's content. I think these are really exciting times for everyone involved and now if I can only get all my friends and family to start blogging.

Panning Google Maps with Flex

The more I experiment with using Google Maps in a div layer beneath Flex the more I think it's a viable solution. There are still several things that need to be tested such as using fscommand instead of getURL("javascript:myFunction"); to communicate between Flex and Google Maps.

The main issue I'm going to focus on next is dynamically sizing the map so that it fits nicely within it's container. An end user can resize the browser window as well as drag the horizontal pane bar and the map should resize accordingly. Right now it's static, but I'm hoping to get that fixed later this week. You can check out the latest here:

http://www.db75.com/dev/gmaps/flex_gmaps2.htm

You'll notice a selection in the grid will trigger a recentering of the map.

Flex and Google Maps Integration

I'm currently involved with a project where Google Maps needs to be integrated with Flex. While this souds like a trivial task if you're familiar with both technologies you'll know that they don't play nicely with each other.

What we recently concluded is that we should port Google's API to Flex so that the functionality could live entirely in Flex. After doing a good amount of research and reverse engineering this weekend I've come to the conclusion that this is a rather complicated task. It's not necessarily the code that's the problem, but getting an understanding of how Google handles converting lat/lons and linking them to tiles. Google's maps are tiled and some sort of algorithm is used to get the default tile based on location and build the map around it. There are all sorts of blog posts discussing how this was accomplished with older versions of the API. The problem is that several versions later Google has taken a different approach.

While I'm not completing giving up I'm going to research a different approach that consists of using a transparent background in Flash. This will allow the map div layer to show through as though it were actually inside the Flash content. The layer can be hidden and shown as necessary. You can see an example of it here:

http://www.db75.com/dev/gmaps/flex_gmaps.htm

This hasn't been thoroughly tested and I'm currently going through the cycles of testing a few things. Yet if this does work without any major issues this means we can leverage the Google API and not have to spend a lot of time rewriting in Flex. I'll continue to post any future findings here.

Yet Another BlueGPS Update

I've been pretty swamped lately and want to apologize to those who are waiting for the J2ME version of BlueGPS. I've been sitting on it and want to release it ASAP. I've decided to allow data to only be uploaded to my server for now and will extend this functionality later. The main dilemma I'm dealing with is uniquely identifying the device.

In the Symbian version of BlueGPS I require the user to enter their IMEI number when they create an account. You can retrieve this on your Symbian device by entering *#06#. When BlueGPS uploads data it sends the IMEI along with the request and that's how I link your location data with your device.

It's frustrating that J2ME does not give the developer access to this information so I'm working on another approach. This is crazy because even Flash Lite gives us access through a simple call: FSCommand2("GetDeviceID", "id");. This is the method I use in the daylite app that I wrote a while back. At any rate, I'll get this issue resolved and promise to release the BlueGPS beta shortly.

Syndicate Your Device's Content

At SensorLogic I spend a lot of time debating which user interface elements are right for certain tasks. I'm generally of the mindset "don't reinvent the wheel" and leverage paradigms that already exist. While this doesn't always apply, I think for 95% of the cases somebody's already solved the problem and they've paid BIG BUCKS to do it. Take Apple and Microsoft for example, they both have interface guidelines for developer's to adhere to. If you use either one of these operating systems you can either agreee or disagree with their approaches. Just be sure that they didn't just bang something out and put it on the market.

That's kind of a long introduction to get to the point I'm trying to make. I've been working hard to think outside of the box lately. At SensorLogic we work extremely hard to provide a platform to remotely monitor and control devices. The monitoring part is difficult because I truly believe there's not a "one size fits all" solution. While I know for a fact that we have one of the best M2M UI's in the marketplace, I know we can do more with it. The user interface is one of my responsibilities and this is a post to start a new way of thinking.

My thoughts lend more towards a consumer and small business experience while the company focus is mainly on the enterprise right now. With that being said, I think these ideas might be leveraged across the board. The question is "how are devices any different than humans?". Of course there are a million answers to this question, but to sum my answer up, "they aren't". I'm speaking from the perspective of interactions on the web, not daily human behavior. A human can blog, so why can't a device? I can syndicate content from John Gruber, why can't I syndicate content from my device? I can IM with friends, why can't I IM with devices?

So I'm going to start off with the syndication example and will be covering the other ideas in future posts. If you take a look at one of the screens from the SensorLogic platform you can see the telemetry device overview. Think of this telemetry device as the energy meter sitting on the side of your house:

You can see that this device has quite a few sensors that tell you usage, status, etc. Since SensorLogic provides a suite of Web services I decided the next logical step was to provide this data in an RSS feed for consumption. Using a little bit of ColdFusion magic I was able to get this data into RSS format in a matter of minutes (approx 30). You can see the output below. I've truncated the data just to keep it concise.

With a minimal amount of work I had an example up and running. I'm going to forget about the authentication piece right now since that will be something that needs to be resolved in the coming weeks. For know let's just assume everyone has permission to view my energy meter's data.

The next step was to grab an RSS reader and see if the feed was usable. I use Sage for Firefox, but any RSS 2.0 reader should work. After entering the RSS feed URL and loading it you can see the results below.

So now I have a quick summary of my device information and can set the RSS reader to check for updates on regular intervals. It would be nice to implement some sort of push functionality, but that's a completely different discussion. Any of the sensor links in the RSS feed can be clicked and for the purposes of this example you're taken directly to the SensorLogic UI.

You can now see a summary for Average Usage over a given period. This could ultimately link to any interface specific to the application. My ultimate vision is to have a home portal that brings all of my devices and appliances together in a simple interface or multiple interfaces. I haven't thought this process entirely through yet, but it seems that there's potential by preventing users from being disrupted from their normal workflow. Users generally don't want to deal with a new interface and different approach (ie 6 different remote controls in the living room) unless it's extremely simple. I'll have more ideas later and please reply if you think I'm on crack again.

GasBum 1.0 on Download.com

I've received a decent amount of feedback about being able to download GasBum without having to give away your email address to some guy you've never met. This seems to be a reasonable request so I've placed the app on download.com where you can grab it without providing any information:

http://www.download.com/GasBum/3000-11138_4-10434792.html

Yes you're beating the system, but you might lag when it comes to updates. Your email address will only be used to notify you of software updates and any new products that I might end up developing. So feel free to give it up sooner or later!

Wiring Widgets to Devices in Your Home

I've been wanting to do this post for a while and I'm finally able to get around to it. The thought is to use a widget to represent a device in your home that can be monitored and controlled. The term "wiring" may be misleading, but the concept is to create some sort of virtual connection between the widget and remote device. In this example I have a light bulb widget that monitors and controls an LED. The LED resides on the SensorLogic QA table where we have lot of different devices that enable us to easily provide remote demos. You can see in the picture below that the table is monitored through an Axis network camera:

In the image above you can see the light bulb widget next to the video stream of the QA table. The light bulb represents the LED in the off state. It's hard to make out exactly where the LED is, but you'll be able to see it in the image below. My ultimate vision is to create all sorts of widgets that represent different devices in your home. The light bulb widget can ultimately be connected to the lamp next to your bed or on your front porch and doesn't have to be tied to an LED. Using SensorLogic's M2M Platform you could add the intelligence to tell the porch light to turn on every night at 8:00PM and off at 7:00AM. The possibilities are endless.

The light bulb displays the current state of the LED. When it's double clicked a command is sent to the M2M Platform telling the LED to turn on. All of this is done with some AJAX, Web Services, and SMS magic. I will go into more details of implementation in a future post. The developer is ultimately responsible for the UI piece which handles the presentation of the widget and the hook into SensorLogic's Web Services. The widget can be run in a web browser and I'm working on a version that's compatible with Konfabulator. I also intend on getting a version that runs on a J2ME compatible device. The goal is not only to connect all sorts of devices in the home but provide a rich user experience....something that is exciting and fun for the user. M2M doesn't have to be a dull experience and in my opinion should be extremely visual.

After the light bulb has been double clicked you'll see that the LED eventually turns on. Let me explain what "eventually" means. From a UI standpoint the widget is double clicked and the appropriate image is displayed, in this case the light bulb's on state. The problem is that the LED is not truly on yet. There's the delay of the command getting to the M2M Platform and the delay with the SMS making it down to the device. The device then takes this SMS message, processes it, and either turns the LED on or off. This entire process can take up to a minute. If you look at the difference in timestamps between the image below and the one above you'll see that it's about 15 seconds shy of a minute.

I'm working on some different concepts of how to manage when the UI displays a state that isn't truly indicative of the device state. This might be some sort of greyed out "pending" image that lets the user know that the command is being processed. I'll post the completed concept when it's ready. If the device that controls the LED were connected over ethernet then there would be much less of a delay and the "pending" state might be unncessary.

With all this being said there are a couple of things that I'd like to point out. Connected devices are coming. Actually, they're already here but I wouldn't consider them mainstream. Web developers should grasp the concept of M2M and what it means to them. There's huge potential here for developers to create applications that tie to devices in the home, field, car, office, etc. Think of all the insanely talented developers out there writing applications and the potential of these apps/widgets representing data from connected devices.

The other point I'd like to make is that there needs to be a developer community. At SensorLogic we're talking about it and I'm starting to pull together bits and pieces and trying to formulate a plan (at least in my head). I think of Amazon, Google, and ebay that released a set of APIs for developers to use and build applications. These companies saw the benefit in doing this and couldn't even fathom the amazing applications that would be developed using their technologies. SensorLogic already has a majority of the infrastructure in place and I'm going to be sharing any knowledge I can from a UI perspective.

One last note: I'm working with a network enabled thermostat from Proliphix that enables you to remotely monitor and control temperature. I'm going to have a nifty widget available in the next few days and will post the outcome. It seems to a very powerful device and even has a web server built in. I'm excited about the potential of this device and am looking forward to getting it all hooked up.