Random Musings of an Insane Mind

Programmers are not designers. Technical people should not design User Interfaces.

* 810 source files
* 90658 lines of code
* 10213 lines of html

For an internal project tasked to a series of programmers throughout the years without enough oversight, it is a mass of undocumented code with multiple programming styles. PHP allowed lazy programming, Smarty didn’t have some of the finesse required, so, the User Interface suffered. Functional but confusing to anyone that hadn’t worked intimately with the interface or been walked through it.

The truest statement is that it is easier for me to do things through the MySQL command line than through the application. While this does have a tendency to introduce possible typos, it has altered SQL practices here.

update table set value=123 where othervalue=246;

could have an accidental typo of

update table set value=123 where othervalue-=246;

which would have completely unintended consequences. One typo altered the DNS entries for 48000 records. Shortly after that typo, ingrained in company policy was that I never wanted to ever see a query like that executed in the command line regardless of how simple the command.

Even within code, the above command would be entered as:

update table set value=123 where othervalue in (246);

This prevented a number of potential typos. Even limit clauses with deletions were enforced to make sure things didn’t go too haywire in an update.

With Python, indenting is mandatory which results in multiple programmer’s code looking similar and easier to troubleshoot. Utilizing SQLAlchemy which enforces bind variables when talking with the database engine, we’ve eliminated the potential for a typo updating too many records. Even cascade deletes are enforced in SQLAlchemy even when running on top of MyISAM. With MVC, our data model is much better defined and we’re not tied down to remembering the relationship between two tables and possible dependencies. Conversion from the existing MySQL database to a DeclarativeBase model hasn’t been without issues, but, a simple python program allowed the generation of a simple model that took care of most of the issues. Hand tweaking the database model while developing the application has allowed for quite a bit of insight into issues that had been worked around rather than making adjustments to the database.

Fundamental design issues in the database structure were worked around with code rather than fixed. Data that should have been retained was not, relationships between tables was defined in code rather than in the database leading to a painful conversion.

When it was decided to rewrite the application in Python using TurboGears, I wasn’t that familiar with the codebase nor the user interface. Initially it was envisioned that the templates would be copied and the backend engine would be written to power those templates. After a few hours running through the application, and attempting the conversion on a number of templates, I realized the application was functional but it was extremely difficult to use in its current state. So much for having a programmer design an interface.

Some functionality from the existing system was needed so I peered into the codebase and was unprepared for that surprise. At this point it became evident that a non-programmer had designed the interface. While Smarty was a decent template language, it was not a formtool, so, methods were designed to give a consistent user experience when dealing with error handling. A single php file was responsible for display, form submission and validation and writing to the database for each ‘page’ in the application. The code inside should have been straightforward.

* Set up default CSS classes for each form field for an ‘ok’ result
* Validate any passed values and set the CSS class as ‘error’ for any value that fails validation
* Insert/Update the record if the validation passes
* Display the page

Some validation takes place numerous times throughout the application, and, for some reason one of the ‘coders’ decided that copy and paste of another function that used that same validation code was better than writing a function to do the validation. Of course when that validation method needed to be changed, it needed to be changed in eight places.

So, what should have been somewhat simple has changed considerably:

* Evaluate each page
* Redesign each page to make the process understandable
* Adjust terminology to make it understandable to the application’s users
* modify the database model
* rewrite the form and validation

A process that should have been simple has turned into quite a bit more work than anticipated. Basically, development boils down to looking at the page, figuring out what it should be, pushing the buttons to see what they do and rewriting from scratch.

TurboGears has added a considerable amount of efficiency to the process. One page that dealt with editing a page of information was reduced from 117 lines of code to 12 lines of code. Since TurboGears uses ToscaWidgets and Formencode, validation and form presentation is removed from the code resulting in a controller that contains the code that modifies the tables in the database with validated input. Since Formencode already has 95% of the validators that are needed for this project, we can rest assured that someone else has done the work to make sure that field will be properly validated. Other validation methods can be maintained and self-tested locally, but, defined in such a manner that they are reused throughout the application rather than being cut and pasted into each model that is validating data. In addition, bugs should be much less frequent as a result of a much-reduced codebase.

Due to the MVC framework and the libraries selected by the developers at TurboGears, I wouldn’t be surprised if the new codebase is 10%-15% the size of the existing application with greater functionality. The code should be more maintainable as python enforces some structure which will increase readability.

While I am not a designer, even using ToscaWidgets and makeform, the interface is much more consistent. Picking the right words, adding the appropriate help text to the fields and making sure things work as expected has resulted in a much cleaner, understandable interface.

While there are some aspects of ToscaWidgets that are a little too structured for some pages, our current strategy is to develop the pages using ToscaWidgets or makeform to make things as clear as possible making notes to overload the Widget class for our special forms at a later date.

While it hasn’t been a seamless transition, it did provide a good opportunity to rework the site and see a number of the problems that the application has had for a long time.

Using the HTML from the flowplayer and red5 post, you need to change the url in the javascript to:

url: 'red5StreamDemo', live: true

You will need to use Flash Media Encoder version 2.5 which can be downloaded at adobe.com. Flash Media Encoder version 3.0 will not work with red5 and based on developer comments, will probably not be supported

It is against the license for Flash Media Encoder to use it with anything other than Flash Media Server.

Here is a screenshot of the config required to get Flash Media Encoder 2.5 to work with red5. Replace yourhostname with the name of your red5 server.

After you’ve configured the FMS Url and the Stream, click the Connect button, and then the Start button at the bottom to start encoding.

Dozens of posts on the net reference using red5 with flowplayer for rtmp streaming, but, none give you precisely the code required.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	
<script src="flowplayer-3.1.1.min.js">	

<style>
a.rtmp {
	display:block;
	width:640px;
	height:360px;	
	margin:25px 0;
	text-align:center;
}

a.rtmp img {
	border:0px;
	margin-top:140px;
}
</style>

<a class="rtmp" href="#">
<img src="http://static.flowplayer.org/img/player/btn/showme.png"  />
</a>

<script type="text/javascript">

$f("a.rtmp", "flowplayer-3.1.1.swf", { 
		
	clip: { 
		provider: 'rtmp',
// name of the .flv from /webapps/oflaDemo/streams without the .flv
                url: 'IronMan' 
	}, 
	
	plugins: {  
	  rtmp: {  
		url: '/fprt/flowplayer.rtmp-3.1.0.swf',			
		netConnectionUrl: 'rtmp://hostname/oflaDemo'
	  } 
	}     
});
</script>

Make sure you have the following files:

* flowplayer-3.1.1.swf
* flowplayer.controls-3.1.1.swf
* flowplayer.rtmp-3.1.0.swf

If you receive the error:

300: Player Initialization Failed: TypeError: Error #1009

Then you are missing flowplayer.controls-3.1.1.swf from your directory.

In the javascript,

netConnectionUrl: ‘rtmp://hostname/oflaDemo’

needs to be set the hostname of your red5 server.

url: ‘IronMan’

needs to be set to the name of the .flv in the webapps/oflaDemo/streams directory without the .flv extension

/usr/lib/red5/webapps/oflaDemo/streams# ls -1 *.flv
DarkKnight.flv
IronMan.flv
on2_flash8_w_audio.flv
test.flv

In the last few days, I’ve had a few projects come up that could have been interesting to develop on the IPhone. When the IPhone first came out, I signed up as a developer but never downloaded the SDK. Today, I took the time to download the SDK to test the emulator for the recent template design for this blog to see how it displayed on the IPhone.

The framework appears to support Python, Perl, Cocoa and Ruby as well as native C.

Here are two screenshots of this blog on the IPhone emulator.

The quick way to start up the emulator after you’ve gotten the SDK from Apple’s Developer Connection is the following:

Open up Xcode, File, New Project, Select Application underneath the IPhone Application, click Utility Application, Choose, enter a project name. After a few seconds a project window will show up with the default of Simulator – 2.2.1 | Debug. Click Build and Go and it will compile the test project and open the IPhone emulator. Click the power button at the bottom, to bring up the main menu which will show Photos, Settings, and your test application with Contacts and Safari icons at the bottom. If you open Safari, you can key in a url or use one of the existing bookmarks.

Command-left arrow or Command-right arrow will rotate the screen from Portrait to Landscape and back. You can also use the Hardware Menu and Rotate Left/Rotate Right.

While working with a project, the problem with the recursive category table being built came up. The table holds the parent_id of the category name and the result is a list with the id and the name of the category. The category name is prepended with spaces equivalent to the level of indentation.

model:

class AchievementCategory(DeclarativeBase):
	__tablename__ = 'achievement_categories'

	id = Column(mysql.MSBigInteger(20, unsigned = True), primary_key = True)
	parent_id = Column(mysql.MSBigInteger(20, unsigned = True), default = 0)
	name = Column(Unicode(80))

code:

def get_cats(n = 0, c_list = [], level = 0):
	sql = DBSession.query(AchievementCategory).filter_by(parent_id = n).order_by(AchievementCategory.name).all()
	for e in sql:
		c_list.append([e.id, level * " " + e.name, level])
		get_cats(e.id, c_list, level+1)
	return c_list

print get_cats()