Ext.ux.form.HtmlEditor.Formatblock = Ext.extend(Ext.util.Observable , {

	// private
	init: function(cmp){
		this.cmp = cmp;
		this.cmd = 'FormatBlock';
		this.store = new Ext.data.SimpleStore({
			fields: ['tag', 'name'],
			data : [
				['p', 'Paragraph'],
				['div', 'Div'],
				['h1', 'Header 1'],
				['h2', 'Header 2'],
				['h3', 'Header 3'],
				['h4', 'Header 4'],
				['address', 'Address'],
				['blockquote', 'Blockquote'],
				['pre', 'Preformated']
			]
		});
		this.cmp.on('render', this.onRender, this);
		this.cmp.on('initialize', this.onInit, this, {delay:100, single: true});
	},
	// private
	onInit: function(){
		Ext.EventManager.on(this.cmp.getDoc(), {
			'mousedown': this.onEditorEvent,
			'dblclick': this.onEditorEvent,
			'click': this.onEditorEvent,
			'keyup': this.onEditorEvent,
			buffer:100,
			scope: this
		});
	},

	// private
	onRender: function() {
		var tb = this.cmp.getToolbar();
		this.formatSelector = this.createFormatSelector();
		tb.add(this.formatSelector);
	},

	//private
	createFormatSelector: function(){
		var combo = new Ext.form.ComboBox({
			store: this.store,
			displayField:'name',
			valueField:'tag',
			typeAhead: true,
			mode: 'local',
			width: 80,
			triggerAction: 'all',
			emptyText:'Select a format ...',
			valueNotFoundText: 'Select a format ...',
			forceSelection: true,
			editable: false,
			listWidth: 120,
			selectOnFocus:true,
			listeners:{
				scope: this,
				'select': function(combo, record, index){
					tag = record.data.tag;
					this.insertFormatblock(tag);
					this.cmp.getToolbar().focus();
					this.cmp.deferFocus();
					this.formatSelector.reset();
				}
			}
		});
		return combo;
	},

	insertFormatblock : function(val) {
		if (val.indexOf('<') == -1)
			val = '<' + val + '>';
		if (Ext.isGecko)
			val = val.replace(/<(div|blockquote|code|dt|dd|dl|samp)>/gi, '$1');
		this.cmp.relayCmd('FormatBlock', val);
	},

	getSelection : function() {
	  win = this.cmp.getWin();
		return win.getSelection ? win.getSelection() : win.document.selection;
	},

	getRange : function() {
		var win = this.cmp.getWin(), s, r;

		try {
			if (s = this.getSelection())
				r = s.rangeCount > 0 ? s.getRangeAt(0) : (s.createRange ? s.createRange() : win.document.createRange());
		} catch (ex) {	}

		// No range found then create an empty one
		// This can occur when the editor is placed in a hidden container element on Gecko
		// Or on IE when there was an exception
		if (!r)
			r = Exi.isIE ? win.document.body.createTextRange() : win.document.createRange();

		return r;
	},	

	getNode: function(){
		var elem, e, r = this.getRange(), s = this.getSelection();
		if (!Ext.isIE) {
			// Range maybe lost after the editor is made visible again
			if (!r)
				return this.cmp.getDoc().dom.getRoot();

			e = r.commonAncestorContainer;
			// Handle selection a image or other control like element such as anchors
			if (!r.collapsed) {
				// If the anchor node is a element instead of a text node then return this element
				if (Ext.isWebKit && s.anchorNode && s.anchorNode.nodeType == 1)
					return s.anchorNode.childNodes[s.anchorOffset]; 

				if (r.startContainer == r.endContainer) {
					if (r.startOffset - r.endOffset < 2) {
						if (r.startContainer.hasChildNodes())
							e = r.startContainer.childNodes[r.startOffset];
					}
				}
			}
			elem = e.parentNode;
		} else {
			if (r.item)
				elem = r.item(0);
			else
				elem = r.parentElement();
		}
		return Ext.get(elem);
	},

	getBlocklevelElement: function(n){
		if(n){
			if (/^(P|DIV|H[1-6]|ADDRESS|BODY|BLOCKQUOTE|PRE)$/.test(n.dom.nodeName)){
				return n;
			} else {
				return this.getBlocklevelElement(n.findParentNode());
			}
		}
		return null;
	},	

	// private
	onEditorEvent: function(){
		var fs = this.formatSelector, r, p;
		p = this.getBlocklevelElement(this.getNode());
		if (p && p.dom && p.dom.nodeName != 'BODY'){
			fs.setValue(p.dom.nodeName.toLowerCase());
		} else {
			fs.reset();
		}
	}

});

Not that those myspace links to music from different bands aren’t helpful. They are. Instead of having to organize an ever growing pile of demo cds were the interesting ones always seem to be missing we now just have to check the original email and – booom there is the music. Great.

But myspace, oooh. I mean this could be done so much nicer. And basically myspace is this huge lock-in. The only obvious way to post information to myspace seems to be manual input. Open the editor and type away. This is about as silly as the interface Zitty and Tip are providing to input your dates free of charge. Actually, come to think of it the way Zitty and Tip are doing it is even worse. They are using some silly java applet to let you input your dates, one by one and you have to navigate through some kind of calendar that simply takes ages. I mean, there are standards for this kind of thing. Ical or rdf or if you must you could provide a custom api but a java applet is simply the worst possible user experience. Which is most likely intentional since they want you to pay money to a company so they can do it for you. I wonder whether this is legal. I should ask a lawyer because I strongly suspect this is monopolistic behaviour forbidden by law. Watch for another post on that topic.

Back to silly myspace. As I said, this is the age of webservices and of course I don’t want to retype stuff already on the net just to be up to date on some silly page that is 90% obnoxious and 10% fun. So there is no rdf or ical reader available from myspace and nobody seems to have gotten around to creating such a myspace app. And I didn’t want to dive into open social just for such a little task. Maybe I’ll do when I have time.

This is what I ended up doing: I created a javascript ical application using a javascript ical parser and a javascript extension to the date object to output formated date strings. Then I whipped up a little DOM script that will write the parsed and formated dates into a blank html page. Next, I thought I’d just use a little iframe on myspace and include this page and I’m done. No such luck. No iframes on myspace. They are filtered. Which in addition to the fact that you can’t use javascript is probably the reason why everybody is using these silly flash widgets on myspace pages. So I figure, ok let’s find some flash app that basically functions as iframe loading a html page from somewhere and display it. Since I run linux and I don’t really like flash to begin with, I have neither the tools nor the knowledge to create such a flash app. So I looked around the net and found a number of tutorials on how to do just that but no ready to use swf file. None.

Just when I was about to give up I came across myhtmlspace430 which basically provides an extra editable area for your myspace page, but allows the iframe tag. So problem solved. I’m sure there are other methods but this works for me. In case anybody is interested, here is the javascript code ical used to parse ical and output to html. Remember that you can’t pull ical calendars from anything but your own domain using the javascript xmlhttprequest object.

At ausland we wanted to be able to easily record our shows. In addition we wanted to be able to stream any show through our webserver. Early on we had dubbed this project ‘One Button Recording’. The idea was that it should very easy to use so that even people with little or no knowledge about the involved technologies could do it.

The hardware used is:

• a donated pentium 4 2.8Ghz computer
• two condenser oktava microphones
• a microphone preamp build from a kit
• a donated hammerfall dsp soundcard

Since I am the ‘IT departement’ at ausland and since I had stopped using Windows some time ago I decided to use Linux for this project. I’ve used debian on servers, but on my desktop machines I use Ubuntu exclusively. So I decided to put this project together using Ubuntu Studio 8.04.

Basic setup was simple: Ubuntu recognised the Hammerfall DSP soundcard. The Hammerfall DSP card works best with Jack and Ardour. But since this soundcard is multichannel, being able to record anything meant that all users had to have at least some idea about how to route channels.

Our ‘Audio departement’ Elle quickly created a template for Ardour, but being able to record anything still involved something like 12 steps. So the first item on my list was to open ardour with a new session that used the template. Sadly this wasn’t possible from the commandline. The solution was to to first build the new session files from an empty session created using the template. Then ardour could be started using these session files. This would leave the user with an ardour window where simply clicking on the record button would start recording what come in from the microphones.

Of course this didn’t cover streaming our recorded sounds. For streaming I decided to use icecast2 on the server and darkice an the audio workstation. Darkice works with Jack, but it didn’t connect the right sound card inputs with the darkice outputs. I looked around and found python bindings for Jack that offered a way to manipulate the connections within jack.

Since those were python bindings I decided to write my little application in python. I knew that python bindings existed for gtk+, allowing me to easily create GUI for my software. I had not worked with python before but that actually added to the challenge.

recording-und-streaming-gui

The GUI was to be as simple as possible: Two buttons: one that started and stopped darkice and one that started ardour.

I used Micah Carricks pygtk tutorial to get me up and running for the GUI. This worked fairly well once I understood the basic layout principles of GTK, even though I did run into some problems using the gtk-builder. I think I had messed up my glade file doing some copy-paste in Glade and builder did not create a gui from my xml. I suspect that some of the widget ids were not unique. However I didn’t really check that and instead simply rebuild my GUI in glade this time being careful not to duplicate any ids.

After finishing the GUI I created two new python classes, one to create the session files and start ardour, the other one to start darkice and manipulate the jack connections. All of this was pretty straight forward, the only bigger problem I ran into was that I needed my software to wait for some time after starting darkice before I could create the necessary jack connections. I solved this using the pexpect python module, which also gave me functions to monitor health of the started subprocesses.

The one thing I did not manage was to pipe the output of the darkice subprocess into a gtk textview. I found some fairly simple example on how to do this, however this did not work for me. Maybe I’ll investigate this further some other time.

I’ll be cleaning up the sources and move the hardcoded path and file informations into a config file and then I’ll be posting it on this blog, maybe it will be of use to somebody with a similar setup.

Update:
Here is the recordinggui. I didn’t do much cleanup. But I’m sure you can figure it out if needed.