DMC Corona UI – Awesome widgets for Corona SDK

I’m happy to announce the release of my new library DMC Corona UIWidgets for Corona SDK. It’s been a couple of months in the works and now I feel it’s stable enough for others to use. I put together the following screencast to give some insight into what it can do.

The library is comprised of Widgets, Styles and Controls.

Many of the Widgets, like Text or TextField, wrap other OpenGL or platform-native objects to make them behave more consistently and without a doubt give them a lot more Awesome. Some of their important core functionality is based around concepts learned from Adobe Flex.
The other items like the ScrollView and TableView are evolutions based on both code I’ve written in the past and ideas from the UIKit API from Apple iOS.
All of the components are style/theme-aware.

The Styles represent a powerful way to manage style properties and can be linked together to form an inherited cascade of style goodness. There are a couple of ways in which they can be organized, and putting everything into a single location or into full themes is really easy.

The Controls, like Navigation, are totally new and again borrow a lot of lessons from iOS. This one alone saves me from writing a lot of navigation code for complex projects. There are more cool Controls still to build.

Even though some of the ideas are from iOS, I spent a lot of time thinking about WWCD (What Would Corona Do) as I think the Corona API is one of its many strong points. At times this required more coding to ensure this complex system was easy to use. I think the result is a good blend of the two worlds.

As “side projects” to this endeavor, I re-vamped my documentation site from an aging wiki server to a sleek, modern static-website (old is new again!) which has many benefits one of which is being blazingly fast. I also put a build system in place (snakemake) to help wrangle all of the updates to the modules in the DMC Libraries (now over 40+).

There’s more work to be done for sure, but I think we’re off to a really good start. 🙂

Enjoy !

~ dmc

New release of lua_objects for Lua OOP

For those Lua OOP aficionados, I recently released a new version of lua_objects which, among other things, now includes support for:
* class mixins
* multiple-inheritance

Check out lua_objects @ github for more info.

These changes were inspired from continuing work on my Lua port of the WAMP Protocol library for Corona SDK. That project contains a lot of Python code and it has reminded me how much I like the Python language. 🙂 Some particular things I re-discovered this time around were 1. method / class decorators and 2. multiple inheritance (including mixins).

That got me working on how to bring some of these aspects to Lua when doing OOP.

After the update, I was able to move the existing Event code (add/remove listener, etc) from the lua_objects core into its own module lua_events_mix.lua. Now that Event code can be easily re-used by other projects, either as a mixin or as a (monkey) patch.

Have fun !

References

LightCharts – Lightweight charts for Flex

lightcharts-single-screenshot.png

LightCharts

A lightweight line-chart library for Flex.

Background

I created LightCharts for a project of mine that involves tracking many stock market symbols. Originally I was using the Adobe Flex Charting library, but found that performance suffered greatly given the number of charts I was using (around 60+), the amount of data displayed, and the constant real-time updates. Of course this isn’t necessarily due to poor coding on Adobe’s part, it’s just that their library contains an amazing amount of features to handle a variety of needs, consequently it’s very heavy. I didn’t need a lot of features, just a nimble way to display data.

I searched the Internet for other charting libraries which I could use and stumbled across a fantastic set of components created by Keith Peters called Minimal Comps. Keith’s library is extremely lightweight and it would have been a good fit, but MinimalComps is geared towards the pure Flash environment and not Flex – a major issue being the disparity in the component lifecycle.

Nonetheless, I was inspired by his code so I decided to use it as a starting point, adding and changing what I needed along the way.

Continue reading

Generating Random Session IDs

For any online service you must login so you can gain access to your stuff. So that you only have to put in your password once, the website must maintain a special unique character sequence called a session key to know that you have already authenticated.

There is a problem with these keys, however, if they are not truly random. This is detailed in a paper I stumbled upon entitled Brute-Force Exploitation of Web Application Session IDs by David Endler. It covers ways in which these keys can be “hacked” because they are not unique, but rather follow some sequence which can be guessed. He lists some major websites which he was able to get access to information that should have been private.

The paper got me thinking about how to generate random session keys, so I created some quick Python scripts using Twisted which demonstrates my solution. (This was my first time using Twisted, so it’s very possible that there is a better way to structure the code).

Solution

The character buffer in the server is used to generate new keys.

To fill the buffer:

  1. Create a list of websites which themselves deliver random web pages (eg, wikipedia)
  2. Select a website from random and ask for a random page
  3. Grab the data within the HTML body tags and put that string in the character buffer
  4. When the buffer needs more data, go back to 1.

To generate X number of keys:

  1. Grab two random lengths of the character buffer. Use one to re-seed the random generator and the other as the basis for the new session key. Create the session key using MD5 and the key seed
  2. Update() the current MD5 session key using a generated random character / string
  3. Add that key to the buffer.
  4. When the key buffer needs more keys, go back to Step 1. For every Y number of keys generated, go back to Step 0.

Notes

We don’t use a new seed for each MD5 session key because the buffer will be emptied too quickly. Of course, the settings for the buffer size, etc could be tweaked.

Performance

Running the server code on my Mac Mini (2.16GHz Dual Core) and 5 clients on another machine, I was able to service ~8000 keys/sec (~750 million keys/day).

Conclusion

My experiment satisfied my curiosity and answered the questions from my own project.

There are, of course, many tweaks that can be made. Send me the code changes to your favorites and I’ll include them.

“Click to download the client server files.”:/downloads/code/HTTP-Session-Key.zip

Resources

KryptoPhoto Photo Viewer is Released

I have released my new photo viewer, so now I can once again show “my photography”:/photography/ on this site. It currently supports the API at SmugMug.com, but I have plans for compatibility with other photo-sharing sites.

I built it using the Adobe Flex framework. You can “get more information about KryptoPhoto at MentalHijack.com.”:http://www.mentalhijack.com/software/kryptophoto/

How to do custom chart annotations in Flex

Hunting around the ‘Net, I found a few good examples of creating chart annotations in Flex.

One example app which helped me greatly was from a “blog posting by Ely Greenfield”:http://www.quietlyscheming.com/blog/2006/04/03/custom-chart-annotations/. If you’re interested, you can view it on his website: “chart annotation demo”:http://demo.quietlyscheming.com/overlayDemo/index.html.

Unfortunately, the code you can download from his site is a little old so it has problems compiling in Flex Builder 2+. I have updated the code, fixed some bugs in it and have it available here: download OverlayDemo-fixed.zip.

Ely has other interesting demos on his site which are worth checking out. Some of my favorites are: the “variable radius pie chart demo”:http://www.quietlyscheming.com/blog/charts/variable-radius-pie-chart/, the “interactive bubble chart demo”:http://www.quietlyscheming.com/blog/charts/variable-radius-pie-chart/, and the “dashed lines demo”:http://www.quietlyscheming.com/blog/charts/dashed-lines/.

h3. Resources

annotation example by Ely Greenfield

  • “http://www.quietlyscheming.com/blog/2006/04/03/custom-chart-annotations/”:http://www.quietlyscheming.com/blog/2006/04/03/custom-chart-annotations/
  • demo: “http://demo.quietlyscheming.com/overlayDemo/index.html”:http://demo.quietlyscheming.com/overlayDemo/index.html

annotation example by Brendan Meutzner

  • “http://www.stretchmedia.ca/blog/index.cfm/2007/3/28/Chart-Milestones-using-annotationElements”:http://www.stretchmedia.ca/blog/index.cfm/2007/3/28/Chart-Milestones-using-annotationElements
  • demo: “http://www.stretchmedia.ca/code_examples/chart_milestone/main.html”:http://www.stretchmedia.ca/code_examples/chart_milestone/main.html

Trying to do MVC in pure Flex

I was looking for some examples of how to structure a Flex application using MVC, but using only the Flex framework. In the long run I think I’ll be using PureMVC, but right now I am anxious to get my app working and don’t want to have to learn Yet Another Technology just to get there. Besides, shouldn’t Flex be able to stand on its own?

I found what I was looking for in the article _”An architectural blueprint for Flex applications”_ written by Joe Berkovitz. In it he talks about a way in which he architects Flex applications using pure Flex/Actionscript constructs.

Being a Flex newbie, I learned a lot from his article like how to pass variables to your own MXML tags and even customize them using Actionscript. His architecture also solves an issue I was having with Event messaging/bubbling due to the fact that it only works automatically on DisplayObject components. His design also has an interesting way of handling multiple data-services as well as the operations required for handling service communication.

Source code for the project is available in the article. I would recommended downloading it and browsing through the files.

Resources:

Converting journal entries from Outlook to MacJournal

I wrote a Python script to convert a journal file export from Microsoft Outlook to one which can be read by MacJournal.

It requires the Python module csv (included with Python 2.3 or later)

Run the script like so:

If no input or output files are listed, it will use the following defaults:

Outlook (input): @exchange_export.csv@
MacJournal (output): @macjournal_import.txt@

You can click here to download the Outlook to MacJournal Python script.

Template Method pattern handout now available

I have posted a PDF of the handout I made for my design patterns workgroup. The information came mostly from the O’Reilly book Head First Design Patterns.

The layout and typography are roughly based on the format of the book as well.

You can “click here to download the Template Method handout (pdf)”:/wp-content/uploads/2010/07/template_method.pdf.

Design Pattern: A decorator in the wild

I’ve been looking over a lot of Javascript code lately, mostly in the various AJAX libraries. It’s been interesting to see the ways in which the different projects are using the language to enable them to coexist peacefully.

Though, one such example I found was a simple function that I found at “Simon Wilson’s web site”:http://simon.incutio.com/. It solves the problem of having several Javascript modules fighting for the coveted @onload@ event in the <body> tag. I say coveted because there is only one of these events on an HTML page, and it is very important because this event is called only after the entire page is loaded. For a Javascript module, this is a good time to do an action like initialization because it guarantees that any called functions will be able to work on on a complete set of HTML tags, Javascript modules, images, etc.

h3. The Past

Before the widespread use of Javascript, the @onload@ function would simply be set in the HTML @@ tag on a page.:

And if there were several methods to be called, you could make the @onload@ function more generic by using it to call other methods:

But this only works well if you are the creator of all of the code which goes into a site.

h3. The Present

Now that we’re seeing a ton of development happening on the HTML-side of things, especially from the AJAX-world, it’s certain that folks will start using multiple Javascript modules on their sites and that some of these modules will want to get their piece of the @onload@ event.

However, a problem arises if a module isn’t careful about how it sets the @onload@ event. If it uses basic Javascript syntax it would effectively wipeout any previously defined @onload@ functions:

Enter in “Simon’s addLoadEvent function”:http://simon.incutio.com/archive/2004/05/26/addLoadEvent which uses Javascript closures wrapped in a decorator-like fashion to allow more than one function to be assigned to the ‘onload’ event at runtime.

This is the code listing pasted from Simon’s site:

However, I will note that this solution is not a pure example of the decorator pattern because:

  1. The definition from my Head Start book states “The Decoration Pattern involves a set of decorator classes that are used to wrap concrete components.” In this example the concrete component, the very innermost function, is of the same class as the closure decorators – a function – and not of a separate object type.

  2. Also the function objects get called themselves rather then a separate method on a class object. However, I think this would be ok if you consider each function having an equivalent to Python’s @call@ method. This method would then be the common interface between the objects.

In any event, pure Decorator or not, this is a clever way to use Javascript to solve this web problem and at least deserves a Decorator Honorable Mention.