1) iOS Apps with Flex Mobile - I’m working on a presentation for a customer for which I will spend 50% time on my own and 50% on my customer time, but will be able to deliver it publicly. Flex mobile is pretty awesome. I’ll try to record a screencast of the presentation. iPhone, iPad…here I come. In fact on the 17th of April I’ll be giving a talk on Building iPad apps with Flex 4.6.

2) Rails 3.x…just rocks. I had a small project to create with Rails, and wow..It just flies. I bought a cool HTML template that works just great for a cool admin style Rails application. Note it’s not a public facing project.

3) iAppDesigner.com (not up yet) - During the last Denver RIA Developers Group I had an epiphany of so many technological aspects coming to a cross road, that I had a vision on of great product. This is not the first time that this happens to me, but it’s the first time that I thought…wow, this might be actually be needed by many. It happened the same day Apple announced iBook Builder…the tool to build textbooks for the rested of us. Well, my vision was for a tool to build mobile, phone and tablet apps, for the rest of us. And I had the vision of the technical aspect to build that tool. In fact I even build a proof of concept that works. That’s the worse part, where in a couple of hour I can prove that I could build a tool in few hundreds of hours or more which would be great…Just I’m not sure where to take these few hundreds of hours from….as usual…I keep too busy with day to day consulting activities. However this project will be the main driver for many of the forthcoming blog post as I like to think out loud in the form of blog entries while I code… wanna see what to expect? Then check out AwsUsageAnalyzr, it’s my notes for yet another project I didn’t release.

4) Education - I spoke on Monday with my good friend Solomon White, and he wants to focus more on education. This is definitively one aspect where I try to improve in. But education is not only the next great opportunity, but since I have kids, is really an area where I would love to be able to contribute. Learning is the essence of our society. I feel that there is a big disparity between where software craftsmanship is at it’s top today and whats teached at schools.

5) Reality! This blog entry may actually replace my beginning of year blog post about what I did and where I will go. I am a software coder, loving it, and will continue to do that professionally as long customer want me too and as long as I feel energized by it. There are so many different directions I could focus on: teaching, writing, managing, doing business but I still love coding. I can get up and code until I drop at night. That’s a gift I enjoy until I won’t :-)

6) Community. I love meeting people that have common interested. I attend several Denver user group, regional and national conferences. They are all awesome. I used to fly from Switzerland to the US to get training, now I can just drive 20 minutes to see awesome presenters and talks with awesome members of the community. All in all, if you are a geek, times are great. I have a few conference planned for the next few month and hope to meet many of you. So see you soon at MountainWest RubyConf 2012, at the Mile High Agile Conference, at 360Flex or at RailsConf 2012.

7) Small also know as mobile. It’s amazing of much creative applications and services are build around mobile concept. These phones and tablets are getting more powerful, the tools to create apps more sophisticated. So expect some noise from me on that front.

8) Big also know as the cloud. Not the iCloud crap…but the Amazon cloud stuff that works. The DropBox cloud you can easily integrate in your apps. The dropbox api can use from you mobile and desktop app. The Heroku server you can start with one command line. The EC instance you ca boot up on a dime when you need. Pusher, DynamoDb…I tell you…Your solution is in fact getting smaller thanks to these cloud services.

So welcome to my new blog I hope you will find enough good content that you will come back from time to time.

Enjoy! Daniel

This is a good read and contains many useful tips and descriptions of optimization you can apply to your application. This become really relevant when developing Flex mobile applications.

Here are the 67 tips highlighted in the document…

1. 1. Choose an appropriate display object.
2. 2. Primitive types: Use the getSize() method to benchmark code and determine the most efficient object for the task.
3. 3. Reuse objects, when possible, instead of recreating them.
4. 4. Use object pooling, when possible.
5. 5. Delete all references to objects to make sure that garbage collection is triggered.
6. 6. Avoid filters, including filters processed through Pixel Bender.
7. 7. Use mipmapping to scale large images, if needed consider creating 3D effects manually.
8. 8. Use the Adobe® Flash® Text Engine for read-only text; use TextField objects for input text.
9. 9. Consider using simple callbacks, instead of the event model.
10. 10. Use the hasPriority HTML parameter to delay loading of offscreen SWF files.
11. 11. Freeze and unfreeze objects properly by using the REMOVED_FROM_STAGE and ADDED_TO_STAGE events.
12. 12. Use Event.ACTIVATE and Event.DEACTIVATE events to detect background inactivity and optimize your application appropriately.
13. 13. Consider disabling mouse interactions, when possible.
14. 14. Choose either timers or ENTER_FRAME events, depending on whether content is animated.
15. 15. Minimize the number of Timer objects and registered enterFrame handlers in your application.
16. 16. Stop Timer objects when not in use.
17. 17. In enterFrame event or Timer handlers, minimize the number of changes to the appearance of display objects that cause the screen to be redrawn.
18. 18. To save CPU power, limit the use of tweening, which saves CPU processing, memory, and battery life.
19. 19. Use the Vector class instead of the Array class, when possible.
20. 20. Use the drawing API for faster code execution.
21. 21. Use event capture and bubbling to minimize event handlers.
22. 22. Paint pixels using the setVector() method.
23. 23. Use String class methods such as indexOf(), substr(), or substring() instead of regular expressions for basic string finding and extraction.
24. 24. Use a non-capturing group (“(?:xxxx)”) instead of a group (“(xxxx)”) in a regular expression to group elements without isolating the contents of the group in the result.
25. 25. Consider using an alternative regular expression pattern if a regular expression performs poorly.
26. 26. For a TextField object, use the appendText() method instead of the += operator.
27. 27. Update text fields outside loops, when possible.
28. 28. Avoid using the square bracket operator, when possible.
29. 29. Inline code, when possible, to reduce the number of function calls in your code.
30. 30. Avoid evaluating statements in loops.
31. 31. Use reverse order for while loops.
32. 32. Always use the redraw regions option when building your project.
33. 33. Avoid placing content off-stage. Instead, just place objects on the display list when needed.
34. 34. Use the appropriate Stage quality setting to improve rendering.
35. 35. Avoid using the alpha property, when possible.
36. 36. In general, use the lowest possible frame rate for better performance.
37. 37. Use a low frame rate when video is the only dynamic content in your application.
38. 38. Dynamically change the frame rate of your application.
39. 39. Use the bitmap caching feature for complex vector content, when appropriate.
40. 40. Set the cacheAsBitmapMatrix property when using cached bitmaps in mobile AIR apps.
41. 41. Use the BitmapData class to create custom bitmap caching behavior.
42. 42. Isolate events such as the Event.ENTER_FRAME event in a single handler, when possible.
43. 43. Use the bitmap caching feature and the opaqueBackground property to improve text rendering performance.
44. 44. Favor using asynchronous versions of operations rather than synchronous ones, where available.
45. 45. In AIR desktop applications, consider using an opaque rectangular application window instead of a transparent window.
46. 46. Smooth shapes to improve rendering performance.
47. 47. Divide your application into multiple SWF files.
48. 48. Provide event handlers and error messages for IO errors.
49. 49. Use Flash Remoting and AMF for optimized client-server data communication.
50. 50. Cache assets locally after loading them, instead of loading them from the network each time they’re needed.
51. 51. Don’t change a SQLStatement object’s text property after executing it. Instead, use one SQLStatement instance for each SQL statement and use statement parameters to provide different values.
52. 52. Use database indexes to improve execution speed for data comparing and sorting.
53. 53. Consider pre-compiling SQL statements during application idle times.
54. 54. Group multiple SQL data change operations in a transaction.
55. 55. Process large SELECT query results in parts using the SQLStatement class’s execute() method (with prefetch parameter) and next() method.
56. 56. Consider using multiple asynchronous SQLConnection objects with a single database to execute multiple statements simultaneously.
57. 57. Avoid database schema changes.
58. 58. Use the SQLConnection.compact() method to optimize a database after schema changes.
59. 59. Use a fully qualified table name (including database name) in your SQL statement.
60. 60. Use explicit column names in SQL INSERT and SELECT statements.
61. 61. Avoid joining the same table multiple times in a statement, unless you are comparing the table to itself.
62. 62. Use JOIN (in the FROM clause) to include a table in a query instead of a subquery in the WHERE clause. This tip applies even if you only need a table’s data for filtering, not for the result set.
63. 63. Avoid SQL statements that can’t take advantage of indexes. These statements include the use of aggregate functions in a subquery, a UNION statement in a subquery, or an ORDER BY clause with a UNION statement.
64. 64. Consider avoiding the LIKE operator, especially with a leading wildcard character as in LIKE(‘%XXXX%’).
65. 65. Consider avoiding the IN operator. If the possible values are known beforehand, the IN operation can be written using AND or OR for faster execution.
66. 66. Consider alternative forms of a SQL statement to improve performance.
67. 67. Directly compare alternate SQL statements to determine which is faster.

Enjoy!
Daniel

So what was really announced last week is the following:

Yes, Adobe will stop development on the Flash Player in the Browser.
Flash Player on the mobile will continue.
Adobe AIR will continue, on the desktop and mobile.
Captive runtime of AIR allows to create “native” apps on mobile and tablets (Android, iOS and more) and desktop WIndows and OSX apps that don’t need AIR to be distributed. Yep, that continues too.

Of course Adobe tried to clarify their statements after the fact saying the transition to HTML5 will take 3 to 5 years. The following is from Adobe’s website from Andrew Shorten & Deepa Subramaniam, see: http://blogs.adobe.com/flex/2011/11/your-questions-about-flex.html

You said that you believe HTML is the “long-term solution for enterprise applications” – can you clarify this statement?

HTML5 related technologies (comprising HTML, JavaScript and CSS) are becoming increasingly capable, such that we have every reason to believe that advances in expressiveness (e.g. Canvas), performance (e.g. VM and GPU acceleration in many browsers) and application-related capabilities (e.g. offline storage, web workers) will continue at a rapid pace. In time (and depending upon your application, it could be 3-5 years from now), we believe HTML5 could support the majority of use cases where Flex is used today.

However, Flex has now, and for many years will continue to have, advantages over HTML5 for enterprise application development – in particular:

• Flex offers complete feature-level consistency across multiple platforms
• The Flex component set and programming model makes it extremely productive when building complex application user interfaces
• ActionScript is a mature language, suitable for large application development
• Supporting tools (both Adobe’s and third-party) offer a productive environment with respect to code editing, debugging and profiling

I guess Adobe’s communication just accelerated that 3 to 5 year timeframe by quite a bit.

Enjoy!

Daniel

At a second thought I think it’s pretty smart what Adobe did. The saying goes “If you can’t beat them, join them”. In fact the Flex against HTML fight wasn’t one where Adobe had anything to win from. So they just made it loud and clear and now they are saying “We are HTML5”. In fact detaching themselves from Flex in appearance allows them to ride the new HTML5 technowave and get in the news when they upgrade their tool, bring out new HTML5 component framework or acquire hot companies like PhoneGap and TypeKit. We are HTML5!!

Adobe has already two great tools for HTML5, Muse and Edge and needs to push them way further and also needs to create or acquire a great HTML component framework such as Sencha so they call build and sell new development tools as well as design tools for the new growing crowd of HTML5 developers.

So where does that leave Flash and Flex. I use a lot Flex in the enterprise, and that’s where Adobe just did the most damage in my eyes. Go now try to convince any CTO that Flex is a good idea. Flex is a mature framework and Adobe has a great enterprise offering, but it will be hard to convince anyone that Adobe is still behind that technology after the way they managed their communication. This said I think the move of Flex to the Apache open source foundation is a great one and if managed right will give Flex a good run for years to come. Flex is still a great choice for many enterprise projects and will remain so until a solid and widely adopted HTML component framework emerges. If Adobe is smart they could provide that offering.

Flex is also a great environment to develop “native” mobile applications that can run on iOS and Android. The forthcoming Flex SDK 4.6 will show that potential and it’s a great way to create cross platform mobile and tablet applications. Adobe will not kill Adobe AIR for the mobile as it’s a too appealing growth market. But that message didn’t get through to the main stream media.

As Adobe said Flash for the desktop for games and Adobe AIR for mobile will be here for a while. But Adobe has the most to gain if they become the major player in the HTML5 field by providing tools, framework and making the web standards evolve. And they are in a good position to get there. To achieve this goal it also means that they will refocus many of their development teams and this will impact Flash and Flex. Moving the Flex SDK and some of the key developers to the Apache Foundation will allow to continue to evolve the SDK regardless of Adobe’s new focus. The move a few years ago to the Flex Sparks components and the recent addition of the new mobile components provide a great and mature framework basis for a real open source effort which I believe will have a long life even if it will become a niche environment over the long run. Note I consider Ruby on Rails a niche market, a really great one to be in. Adobe has something great with Adobe AIR for mobile and this is the one area where they could even grow their developers basis if they get their message right. For me AIR for mobile/tablets and the Flex SDK 4.6 is one solution where I can build mobile apps faster than in any other environment and this will be a great business to be in, especially for the enterprise market.

The smart enterprises will realize that Flex is stable and here to stay for the long run, even if it’s not in the spotlight. They will start HTML projects in parallel to gradually improve their developer workforce and experience in this area. They will also realize that the HTML5 frameworks and coding technics are evolving so rapidly that it will be time consuming just to keep up. Also these frameworks are not as mature and complete as in the Flex ecosystem. Finding Flex developers is difficult, but finding great HTML/Javascript developers is even harder. This said, there is no denying that pretty quickly the HTML5 tools and frameworks will catchup with what Flex offers today in ease of development for enterprise applications.

Personally I’m looking forward to see how these HTML5/Javascript tools/libraries will evolve and will play with many of them.

So where does all this leaves you, the developer. Well, it’s for sure time to jump on the new HTML/Javascript bandwagon if you haven’t yet. I cannot see many companies starting new enterprise projects with Flex. If you are into mobile or tablet development give the new Flex SDK 4.6 a try, I believe there is a great potential for Flex to become a major player in the mobile development arena…targeting “native” applications and not the browser. Yep, your heard it here first ;-)

Enjoy, Daniel

What, you are calling me a liar? :-) I must respectfully disagree with Sean. Not on the fact that he may think it’s not fun, that’s his opinion like many other Flex developers that don’t do testing. I disagree because I see many developers, in other communities, that actually really enjoy testing. If you look at the Ruby community you will see many developpers enjoying doing test driven development, enjoying writing tests, and even expanding the way you can write tests. Check out rspec, Cucumber, and the many of books and screencast on the subject. Checkout all the ruby libraries, they are all pretty well tested. There are many training classes on people that really want to improve doing testing. Many Rails projects are extremly well tested. Many Ruby developers cannot even code without writing tests first.

This said as they are many examples on how to test Ruby and Rails code it’s easier to get going on with testing in that environment. On the other hand, there are not many example of tested Flex applications and libraries. Not many toturoials on how to test your Flex application. I happend to do a lot of unit testing for my Flex apps, but I do not test everything, I use tests for more difficult aspects, when I’m not sure how to design something, when it’s slow to access a part of the application just to verify that my new code works. Then I write tests and it’s fun. How many times do you manually repeat a sequence on the UI like start the application, perform a search, click on the grid, open a record, click the calculate button…Oh no, that not right…go change some code and do it again. Well that’s not fun. Every developer I know does that thousands a time a day. Well, write a test and your workflow becomes more fun.

So why are Flex developers not testing? As I mentioned above, there is not much peer pressure to do so as not many Flex developers do testing. Also they are not many examples. In addition it’s not obvious how to test applications in many case. Often they are not written in a testable manner. Flex/ActionScript is asynchronous and event driven, that’s harder too.

They are solutions for that and Flex applications are very well suited to testing…but the sweet spot must be found. And you should start by testing the simple things that have lots of added value. Anywhere you have logic in your code that does filtering, calculation, transform data, write a test…You gonna like it. FlexUnit 4 as great support for asynchronous or event driven programming, but I agree, at first it’s not obvious how to best us that support. So again, start with the simple thing, refactor your code so that you can test it in a non-asynchronous way, that will already be helpfull.

So I came to the conclusion that I won’t be able to convince Flex developers that testing is needed and even fun. I can only hope that as a Flex developer you will start using FlexUnit 4 and try to add tests to your application and persevere and find the sweet spot on where testing is fun and makes you more productive. If you persevere you will like many Ruby developers become a better developer, write better code and faster.

I finally like Sean’s balanced view on test driven development: “But would I use TDD for every project I work on? Probably not. For personal “one-off” projects or projects I know will not see much future maintenance, the slower development time is simply not worth it. For serious, long-term projects however, TDD is now a must.”

Testing remains hard, but it’s just essential if you want to become a great, agile, developer.

Persevere and testing will become your friend!

Enjoy! Daniel

A while back I looked into accessing Redis directly from Flex and I found an existing library, as3redis that however didn’t support the new unified request protocol. So I wrote a minimalist wrapper that now allows to send commands to a redis server.

To access the Redis server from Flex just instantiate a Redis instance:

1
2
3

<redis:Redis id="server"
             connected="server_connectedHandler(event)"
             result="server_resultHandler(event)" />

Then you can send commands:

1
2
3

server.send("SET A 123");
server.send("GET A");
server.send(["rpush", "messages", "message one"]);

Note it’s not a good idea to connect a Flex application directly to Redis. Redis is usually used in the context of an application server that protects it’s access in the same way that Flex doesn’t connect directly to a database. However they may be cases that this could be useful.

Enjoy!

Daniel

Enjoy!

Daniel

He prepared twelve html5 exercises that walked the about 250 attendees through various features of html5 over a 2.5 hour session. It’s fun to have time to work on these features. The high point was having about 200 computers using Websockets to send data back and forth with his server. He created a small ruby program that used EventMachine::WebSocket and it was holding up quite well all these connections.

Here are the notes I took during this tutorial

You can download his tutorial and all files from https://github.com/subelsky/html5tutorial. Look at the tutorial.html file for instructions.

Here are a few highlights of his talk:

1 - Feature Detection

By using the Modernizr library, we used modernizr-1.7.js, you can detect difference html5 of your browser.

For example:

• Modernizr.canvas
• Modernizr.websockets

2 - Basic Canvas Drawing

You can get a 2d context and draw on the canvas via that context. You can use fillRect and other primitives like moveTo and lineTo to draw.

    var canvas = document.getElementById("main");
    var context = canvas.getContext("2d");
    context.fillRect(0,0,20,20);

Here I just created a loop to generate 180 rectangles. Note they are clipped due to the width of the canvas.

3 - Canvas Image Manipulation

    var img = new Image();
    img.src = "http://www.flickr.com/photos/50183640@N05/5616041841/";
    img.onload = function() {
    context.drawImage(img,0,110);
    };

4 - Basic Animation

    var characters = new Image();
    characters.src = "http://onrails.org/files/20110516_characters.gif";

    characters.onload = function() {
      $(window).keyup(move);
    };

      context.clearRect(0,0,width,height);
      context.drawImage(characters,33,0,32,32,x,y,32,32);   

5 - Fun With Forms

    <input id="username" placeholder="Your name" autofocus>
    <input id="fn" placeholder="First name">

    <input id="size" type="range" min="4" max="320" step="8" value="60">

    function draw() {
      context.clearRect(0,0,width,height);
      context.drawImage(characters,33,0,32,32,0,0,sizeAmt,sizeAmt);
    }   

6 - Local Storage

    localStorage.setItem('shaz','bot')
    localStorage.getItem('shaz')
    localStorage.length // return 1
    localStorage.clear()

7 - Canvas Cleanup

  canvas { 
    background-color: black;
  }

  input { display: block; } 

8 - Web Sockets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class TutorialServer
  def run
    EventMachine.run do
      EventMachine::WebSocket.start(:host => @host, :port => @port) do |socket|
        socket.onmessage do |msg|
          @logger.info "received: #{msg}"
          broadcast(msg)
        end
      end
      EventMachine::add_periodic_timer(10) { broadcast(JSON.generate({ :type => "ping" })) }
    end
  end

  def broadcast(msg)
    @sockets.keys.each { |socket| socket.send(msg) }
  end
end
TutorialServer.new('0.0.0.0',8011).run

1
2
3
4
5

// create the socket  
var ws = new WebSocket("ws://exp.subelsky.com:8011");

// sent to position+name to server
ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));

And much more..

A lot of my work is for enterprises for software that is hidden behind closed doors but since I started helping out Thought Equity I have a few visible apps under my belt. Just in time for March madness they released a new version of the http://vault.ncca.com, see my last year’s entry on “under the hood of a cool flex project.”

And to capture all that meta data regarding games and movies they created a whole server side infrastructure but they also needed a pretty face for all that power and I got lucky to be one of the main coder on the T3 Metadata Editor.

It’s fun to work on software that ends up in the press, here are a few extracts found on the web:

http://www.msnbc.msn.com/id/42355987

Sony Pictures is utilizing the T3 Metadata Editor to:
• Search by actor, line of dialogue, location, and a range of other parameters so that they can create interactive features that enable fans to search for words within the script and share their favorite moments
• Manage restrictions around product placements, talent clearances, and music in order to dynamically create trailers, clips, and other edits for online promotion, social linking, and targeted ads

From http://videonuze.com/blogs/?2011-04-08/Sony-Pictures-Taps-Value-of-Archive-With-Thought-Equity-s-Metadata-Editor/&id=3025

As Dan Weiner, VP of Marketing and Products at Thought Equity explained, Sony will turn what has been a non-scalable, highly manual process for understanding a film’s music clearances, product placements and talent clearances, among other things, into a technology-driven process. Ellen Goodridge, VP, Global Digital Strategy and Operations at Sony Pictures said frame-level metadata will let it create innovative digital movie extras like search and music playlists that add to the value and relevance of our digital offerings and make digital movie purchases more collectable for consumers. The deal again shows that in the digital age metadata is the coin of the realm.

You can find out more on the products home’s page :

A Flex App? Yea, Flex is really cool and allowed us to create a nice visualization of the meta data. For this end I created a custom component that allows to show thousands of entries and annotations visually. The new version in the works support hierarchies and drag and drop editing. As a framework when Cameron started the project he used the Parsley framework as one of the component was developed in pure Actionscript and we thought that Parsley could simplify integration. I still prefer Swiz, but Parsley is working out for this project.

Thanks again to the awesome team at Thought Equity, this is a fun project!

Enjoy!

Daniel Wanja.

I created the MiFi app during the 360iDev conference on September 29th 2009 and submitted the app the same day. I released a fix a month later and didn’t touch the application since. I wasn’t using my Mifi card much until recently when I realized that the app wasn’t working on iOS 4.1. Then I checked the comments for the Mi-Fi app on the AppStore and realized that there where hundreds of comments of people that have the same issue. Sorry for being so late to realize that. Once I found that out I had to decide wether to remove the application from the store or fix it. So I reopened the project and realized that the way it was written wouldn’t work in the new Titanium SDK. Despite of the work I decided to rewrite/reorganized the code and voila…Mi-Fi 1.2 for iOS 4.1 should now work better than ever. I did not restyle the application, it could look better but it’s still functional. I also didn’t add any feature but at least you should get the battery and reception levels that are the most important features. Another feature I should add soon is to be able to set the ip address of your Mi-Fi card in case you changed from the default address.

What is stranger to me is how many people downloaded the application, knowing that it didn’t work on iOS4. About 400 downloads a week…man.. many people must be wondering what this application does and in fact did, as the reviews show. Well, that should be fixed. Sorry for the delay! Here is the weekly sales trend:

I also saw someone created a $2.99 version of the same app called MyMiFi it does the same thing but it has a nicer design I would say. Maybe I should give “paid” a try and will release this one for $.99 cents….or should I? The fact is that I really don’t care about selling 10 apps or even 100 apps at $.99…I maybe wouldn’t say the say if I sold 1000…So free it stays.

Now internally I had to rewrite the application as somehow the Titanium SDK changed enough that I couldn’t get it to work. So the new code is also a lot cleaner, so maybe I could add a few features soon:

In short this is the app.js

1
2
3
4
5
6
7
8
9
10
11

Titanium.include('resource.js');
Titanium.include('parser.js');
Titanium.include('controller.js');

var controller = new Controller();
controller.start();

var webview = Titanium.UI.createWebView({url:'index.html', controller:controller});
var window = Titanium.UI.createWindow({fullscreen: true });
window.add(webview);
window.open();

As you see it loads the index.html which renders the main view. Index.html loads index.js which declares a listener to the update_view event.

1
2
3

Ti.App.addEventListener('update_view',function(e) {
  //..update the view using jquery based on e.state and e.info
})

The controller class checks every two seconds the state of the mifi card by getting the mifi status on the following url: “http://192.168.1.1/getStatus.cgi?dataType=TEXT”. It then parse the data (different for each version of the card) and creates a unified javascript structure and fire the update_view event:

1

 Titanium.App.fireEvent('update_view', {state:this.currentState, info:info});

To make the calls to the mifi card I wrote a Resource class that abstracts the xhr request

1
2

 this.mifi = new Resource("http://192.168.1.1/getStatus.cgi?dataType=TEXT");
 this.mifi.index(this.mifiResult.bind(this));

Internally the resource uses the createHTTPClient and makes a standard ajax get call. I haven’t tried to use jquery’s .get function directly but assume it may not work with Titanium without some hacking…

1
2
3

      var xhr = Titanium.Network.createHTTPClient();
      xhr.open("GET", url);
      xhr.send();

So Titanium rocks and works pretty well, at least for many iPhone apps. Now let’s see how long it takes for the approval of another app that I submitted yesterday….

Enjoy! Daniel Wanja

I’ll be taking notes during the day and updating this page as we go one.

UPDATE: Now that I typed all that I realized that Justin put up the slides and code on his blog: http://blog.classsoftware.com/.

Connecting Arduino Hardware to Flex: Justin Mclean

twitter: justinmclean Justin is from Sydney, Australia.

Content: * Arduino platform, how to program and how to connect to Flex * 2/3 Arduino 1/3 Flex * Hands on

So we’ll go through the followings:

• Digital Inputs
• Digital Outputs
• Analogue Inputs
• Pulse Width Modulation
• Serial Communication
• Connecting to Flex
• Review and wrap up

So Justin gave each attendee one board and a set of components. The board is open source hardware. I think that’s pretty cool. Feels like the hardware kit I bought for my 6 years son. The board is $25 and with all the components it’s about $40.

The hardware is provided to all participants by sparkfun.com

Software

http://arduino.cc/en/Main/Software

Also install the serial driver: FTDIUSBSerialDriver_10_4_10_5_10_6

Other Hardwares

• ATmega micro-controller from Atmel. It mostly runs in cars.
• Arduino Duemilanove
• Arduino Pro and Pro mini
• Lyllypad (warable)
• Funnell IO
• Mega
• Many others

ATMega328

• Hight performance low power RISC
• 16 Mzh up to 16 mips (faster as your first pc you owned - if you are a bit older)
• 32K of Memory
• SPI and 2 wire serial interfaces
• External interrupts, timers, pulse width modulation

IDE

• IDE open sourcee and cross platform.
• Based on the Processing language
• Many open source sketches (projects) and libraries availables. Ethernet library, servers, …

First Program

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

int ledPin =  13;    // LED connected to digital pin 13

// The setup() method runs once, when the sketch starts
void setup()   {
  // initialize the digital pin as an output:
  pinMode(ledPin, OUTPUT);
}

// the loop() method runs over and over again,
// as long as the Arduino has power

void loop()
{
  digitalWrite(ledPin, HIGH);   // set the LED on
  delay(1000);                  // wait for a second
  digitalWrite(ledPin, LOW);    // set the LED off
  delay(1000);                  // wait for a second
}

Now this will make the led blink:

Programming

• C like language based o wiring
• Write code and compile in IDE
• Upload compiled code using USB
• Hard to debug

Circuit Basics

• Ground and power
• Potential difference required for current ot flow
• Conductors and resistors

Digital Inputs/Outputs

• Digital pins on Arduino are dual purpose
• Digital logic and voltage on = 5V off = 0V
• Can be set to be input or output via pinMode

Variables

• boolean, char, byte, int, long, float, double, string and array
• int 16 bits, long 32 bits, float 32 bits
• Strings are nul terminated ‘\0’
• Declare by ; eg int i;

It’s actually C++…What?! At a Flex conferences :-)

Setup Function

• Used for initialization
• Run when program loaded or board reset
• Best place to place calls to pinMode

LEDs

• Current will only flow in one direction
• Longest pin connect to positive side, shortest to ground
• Dont’ connect directly to power source use in series with resistors

Resistors

• Resistors limit current flowing through them
• Value and tolerance indicated by cooler bands
• Resistor values for LEDs
• For RGB or LEG digits you need multiple resitors
• REG/GREEN/BLUE 180 oms, WHITE/ULTRAVIOLET 100 oms

Debugging ia Serial Port

• Use Serial.begin to set speed
• Serial.print, Serial.println to output
• Use serial monitor in IDE to view

Blinking LED

Same program that the first program but this time we just set the led to the pin 3 which is connected to the board.

Digital Inputs

• Some logic as inputs; hight 95V0 or low (0V)
• Simplest digital input switch
• Call pinMode to set as digital input as input

Connect Switch

• Wire up push button on breadboard
• Change code to turn light on/off

Now switches have three states (on, off, and in between) to the board needs to be wired to take that into account so you can program it accordingly. We added a very high resistence (10k) next to switch to ensure that the switch reports 0V when not clicked.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

int led = 3;
int button = 4;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  pinMode(button, INPUT);
}

void loop() {
  if (digitalRead(button) == HIGH)  {
    Serial.println("on");
    digitalWrite(led, HIGH);
  } else {
    Serial.println("off");
    digitalWrite(led, LOW);
  }
}

So let’s look at the wiring and how the switch operates:

Internal Pullup Resistors

• Set mode to input
• digitalWrite to HIGHT to turn on
• digitalWrite to LOW to turn off

So there is something like the 10K resistor built-in the board to avoid using an extra resistor on the board to make sure the switch values are on or off.

Switch Issues

• Switches can bounce and give and off values while switching
• Noise can give false results
• More a problem when switching needs to be counted
• Use timer to solve issue (time = millis())

Analog Inputs & Potentiometer

• Can read values via analogRead
• Result is in range 0 to 1023 (10 bits)
• Potentiometer is Variable resistor
• Eg Read potentiometer values with Analog Inputs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

int led = 3;
int pot = 0;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
}

void loop() {
    int value = analogRead(pot);
    digitalWrite(led, HIGH);
    // Set delay based on analog input
    delay(value);
    digitalWrite(led, LOW);
    delay(value);
}

So now when the potentiometer is turned to the right a value of 1023 is returned and the lights blinks on and off for about 1 seconds. Turning to the left makes the delay shorted (down to 0) and you can get it to run blink really fast.

LDR

• Light dependent resistor (high resistance)
• Set flash rate based on value of LDR

This is a great full day tutorial and everyone seems to have fun. It’s pretty basic, but it’s the first time I program hardware.

Now we are writing fadeIn and fadeOut functions and get the light to pulse on and off

void fadeIn(int led) {
  for (int i=0; i<256; i++) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void fadeOut(int led) {
  for (int i=255; i >= 0; i--) {
    analogWrite(led, i);
    delayMicroseconds(5000);
  }
}

void loop() {
    fadeIn(led);    
    fadeOut(led);  
}  

Now we replace the light sensor by a temperature sensor. There are also air quality sensors, breathalyzers.

Flex

Communication between Flex and Arduinos.

• Software on Arduino (Firmata)
• USB serial to socket proxy
• Flex event based library to talk to socket (as3Glue)

Firmata is an Arduino library that support a binary protocol over serial interface. It’s Bi-directiona. Use version 2.

In the Arduino IDE let’s load the StandardFirmata program (File|Examples|Firmata|StandardFirmata). It’s a 286 lines program similar to the code we wrote so far, but more complex.

Server Proxy

From http://arduino.cc/en/Main/Software the server proxy (end of page)

To configure proxy first find what your serial device is. In terminal do: ls /dev/cu*

/dev/cu.Bluetooth-Modem
/dev/cu.Bluetooth-PDA-Sync
/dev/cu.usbserial-A600ailA

Then add this line to your serproxy.cfg: serial_device=/dev/cu.usbserial-A600ailA

Then we just start the server proxy: $ ./serproxy Serproxy - (C)1999 Stefano Busti, (C)2005 David A. Mellis - Waiting for clients

Now in Flex you need to add the as3glue code (http://code.google.com/p/as3glue/) then you can drive arduino as follows:

private var arduino:Arduino = new Arduino();

private function init():void {
    arduino.addEventListener(ArduinoEvent.FIRMWARE_VERSION, turnLedOn);         
}

private function turnLedOn(event:ArduinoEvent):void {
    arduino.setPinMode(13, Arduino.OUTPUT);
    arduino.writeDigitalPin(13, Arduino.HIGH);
}

A qik look at the class room in the middle of coding their Flex app to drive their Arduino device:

Now we are going to write some Flex code to have some buttons that turn on/off some functions of the board.

private var arduino:Arduino = new Arduino();
private const pin:int = 3;
private const button:int = 4;


private function arduinoInit(event:Event):void {
    arduino.enableDigitalPinReporting();
    arduino.setPinMode(pin, Arduino.OUTPUT);
    arduino.setPinMode(button, Arduino.INPUT);
    
    arduino.addEventListener(ArduinoEvent.DIGITAL_DATA, buttonChanged);
}

private function buttonChanged(event:ArduinoEvent):void {
    if (event.pin==button) {
        event.value == Arduino.HIGH ? turnOn() : turnOff();
    }
}

private function turnOn():void {
    arduino.writeDigitalPin(pin, Arduino.HIGH);
}

private function turnOff():void {
    arduino.writeDigitalPin(pin, Arduino.LOW);
}

Thanks Justin, great talk!

Thought Equity Motion and NCAA two days ago officially released the Ncaa Vault. A cool Flex app backed by an incredible video database with awesome metedata about each game…and released just in time for March Madness.

Here are a few of the announcements and online articles describing the services:

• NCAA® and Thought Equity Motion Unveil First Ever Video-Powered Vault for NCAA March Madness® - by Thought Equity
• N.C.A.A. Tournament Goes Online, Clip by Clip - by the New York Times
• Say Hello to NCAA Vault, Adieu to Productivity - by Wired

In fact with the Vault you can have a URL right into a specific moment of any game and Wired picked out a great last second tying shot.

The twittersphere feedback is also pretty impressive.

This is the most visible Flex app I worked on :-) Late January Cameron Pope contacted me to ask if I could help on a Flex project for NCAA and Thought Equity. The funny part is that I didn’t know that Cameron was such a great Flex developer, I met him via the Denver Ruby on Rails User Group (derailed) and I also didn’t know what NCAA was (don’t shoot, I didn’t grow up in the US and we don’t have TV). So when I asked my father in law about NCAA and realized it was about Basketball I was intrigued by what type of application we needed to build. Cameron showed me the mockups built by Donny Wells which is just an awesome graphical designer. These mockups where just incredible and then I was presented the video service technology the Thought Equity Motion team put together, and I was just blown away and though that this would be a cool project to work on.

Cameron was the main Flex developer and I just worked part time on Monday’s on this project. If you need and incredible Flex developer just contact Cameron.

Now let’s dive more into the Flex nitty-gritty details:

For the mvc architecture we used the Swiz Framework and this turned out to work exceptionally well. Swiz sports some dependency injection features that can be enabled via the [Autowire] tag and I was surprised when I realized I could also just use that feature in an item render. Let’s look at a little detail…For the play by play timeline if a play is in the future it is displayed in bold:

So each line of the timelime is rendered by the TimeLineItemRender and you can just autowire the model which contains the playhead position.

      [Autowire]
      [Bindable]
      public var vaultModel:Vault;

The we can set the style name accordingly based on the play’s start time and the current playhead position:

   styleName="{data.startTime < vaultModel.playheadPosition ? 'past' : 'future'}" 

The style of the application was created by the designer and Cameron did a great job reproducing it using Degrapha for skinning () using an approach similar to this example (example source)

Most of my work was around the searching, bug fixing and general architecture overview. We took a similar approach to the one I described here in order to avoid most of the server round trips during searching.

The Flex app is just a pretty face, behind the scene Thought Equity provides an incredible services that they will expose in many ways, the start can be seen here and all that data will be able to be accessed via API and other means.

This was a short but incredible project for me, the guys at Though Equity have such an incredible vision on how to turn these sport videos into something so much bigger! Thank you guys for getting me on board.

Enjoy! Daniel Wanja

You can find more information on Amazon Relational Database Service (API Version 2009-10-16) here.

Prerequisite: you need to signup for an account on aws.amazon.com, it can be used for EC2, S3, SimpleDb and all the other services AWS provides.

1) Install the Command Line Toolkit

First thing, go download the command line toolkit and read the README.TXT on how to install it. In short you unzip the files, I did put mine at /Developer/aws/RDSCli-1.0.001. Then you create a credential file which contains your AWS access key id and secret key. Then I configured my ~/.bash_profile as follows:

1
2
3
4

export AWS_RDS_HOME=/Developer/aws/RDSCli-1.0.001
export AWS_CREDENTIAL_FILE=$AWS_RDS_HOME/credential-file-path.conf
export JAVA_HOME=/Library/Java/Home
export PATH=$AWS_RDS_HOME/bin:$PATH

to see that the command line toolkit is setup correctly type $rds –help

You will need the command line tool to execute several commands described here after.

2) Create an Instance

Let’s create a MySQL Server instance. RDS offers the following 5 server instance classes:

• db.m1.small (1.7 GB of RAM, $0.11 per hour)
• db.m1.large (7.5 GB of RAM, $0.44 per hour)
• db.m1.xlarge (15 GB of RAM, $0.88 per hour)
• db.m2.2xlarge (34 GB of RAM, $1.55 per hour)
• db.m2.4xlarge (68 GB of RAM, $3.10 per hour)

I will choose a small instance which I will call dbserver1 with a database name db1 and allocate 5g of database space. I also set the master username as admin and password as secret.

1

$ rds-create-db-instance --db-instance-identifier db1 --allocated-storage 5 --db-instance-class db.m1.small --engine MySQL5.1 --master-username admin --master-user-password secret --db-name db1 --headers

The output is the following:

1
2
3
4
5
6

DBINSTANCE  DBInstanceId  Class        Engine    Storage  Master Username  Status    Backup Retention
DBINSTANCE  db1           db.m1.small  mysql5.1  5        admin            creating  1               
      SECGROUP  Name     Status
      SECGROUP  default  active
      PARAMGRP  Group Name        Apply Status
      PARAMGRP  default.mysql5.1  in-sync

Now you have a server running and you are being billed $0.11 per hour, that’s like $80 a month without bandwidth but with backup…and it took only 2 minutes to get going. Can’t beat that.

To see all the instances you have you can issue the

1

rds-describe-db-instances --headers

3) Grant Network Access

So I will grant access from my notebook, assuming the ip address is 24.19.0.48 (you can also specify ranges i.e. 24.19.0.0/50). (Note that access was revoked by AWS, not sure why??)

1

rds-authorize-db-security-group-ingress default --cidr-ip 24.19.0.48 --headers

I also have an ec2 instance which I want to grant access to

1

rds-authorize-db-security-group-ingress default --ec2-security-group-name watchthatsite --ec2-security-group-owner-id 526541544691

Note the ec2-security-group-owner-id is your Amazon AWS account number, you can find it for example on you account activity page. To see your security configuration issue the following command: rds-describe-db-security-groups default –headers

4) Using the Database

To use your database you first need to find out the endpoint address of your new server. So describe you instances:

1

rds-describe-db-instances --headers command

1
2
3
4
5
6

DBINSTANCE  DBInstanceId  Created                   Class        Engine    Storage  Master Username  Status     Endpoint Address                              Port  AZ          Backup Retention
DBINSTANCE  db1           2009-10-28T22:53:31.666Z  db.m1.small  mysql5.1  5        admin            available  db1.cyhik6zpub5c.us-east-1.rds.amazonaws.com  3306  us-east-1b  1               
      SECGROUP  Name     Status
      SECGROUP  default  active
      PARAMGRP  Group Name        Apply Status
      PARAMGRP  default.mysql5.1  in-sync

You find out your endpoint address, for me db1.cyhik6zpub5c.us-east-1.rds.amazonaws.com

So now you can connect to your database:

1

mysql -h db1.cyhik6zpub5c.us-east-1.rds.amazonaws.com -P 3306 -u admin -p db1

Let’s configure my Rails application to point to that database and run a migration:

So I change my config/database.yml to point to the above database

1
2
3
4
5
6
7

development:
    adapter: mysql
    host: db1.cyhik6zpub5c.us-east-1.rds.amazonaws.com
    reconnect: false
    database: db1
    username: admin
    password: secret

1

 rake db:migrate

Wow, seem to work.

Let connect to the mysql console and do a show tables;

+-------------------+
| Tables_in_db1     |
+-------------------+
| schema_migrations | 
| users             | 
| watches           | 
+-------------------+

Yep, all there.

Now I still have to move my old production database to the new one, so let’s dump the data from my old database:

1

mysqldump watchthatsite_development -u admin > wts.sql

and reload that data in the new database:

1

mysql -h db1.cyhik6zpub5c.us-east-1.rds.amazonaws.com -P 3306 -u admin -p db1 < wts.sql

Restarting my Rails server…That’s all!

Enjoy, Daniel.

Kacie had the vision for the whole concept, a simple to use quilt builder that removes lots of the hassle of calculating how much fabric of what color is needed and allows to play with blocks, shapes and colors. She drew a paper prototype that really highlights the tag line of their site” Innovating Traditional Quilting”. Quiltivate.com offer much more than a Quilt Builder, it’s a blog and a community centered around the art and craft of quilting. Over the last year I spent a couple of hours here and there, well a little more than that, to transform the paper prototype into a real Flex application. Rather than writing about what the tool does and how it does it, let’s have a little look at behind the scene of the Quilt Builder with this video:

Behind the scene: Quiltivate.com a beautiful Flex on Rails website. from daniel wanja.

Check out quiltivate.com for a video on how to really use the Quilt Builder and go try it out. As it’s fresh out of the gates their may be a little quirks here and there, so please let me know what you find. So thank you Kacie and Phil for getting me on this project, it was really fun!

Enjoy, Daniel.