actionshrimp.com

Speech Bubble Popups containing a View for Android MapView

Dave — Thu, 12 May 2011 19:41:22 +0000

I’ve recently been playing around with Android, and have been building a small app that uses MapView to display various locations on the map.

I succeeded in drawing markers on the MapView using ItemizedOverlay, but was having a fair bit of difficulty drawing little bubble popups that appeared when you tapped on the OverlayItems (which unfortunately isn’t available in the API as a ‘standard’ feature). My main problem was I wanted to be able to draw a full View on top of the map at the right location. I had a good old search on Google for a while, and couldn’t seem to find any easy way to do this, so I thought I’d write up how I ended up with the bubble in the screenshot. (Now I know how it’s done however, the Google results seem a lot more knowledgeable on the subject – I was probably searching for the wrong things )

My first approach was to build a subclass of Overlay and override its draw() method, where I converted the View to a Drawable to draw it directly onto the MapView canvas (passed to draw() ). This worked, but naturally events would no longer work properly in the View if it contained things like buttons, so it was back to the drawing board.

Next, I tried subclassing Dialog, and used a custom Dialog theme with my bubble background. The View I wanted was just injected into the Dialog through its setContentView method. This worked again, but I found myself fighting with the Dialog class a fair bit, and positioning it turned out to be a bit fiddly – there had to be a better way.

Finally I discovered that MapView inherits from the Android ViewGroup, which means it can contain other Views. After a bit more probing, and a peek at the implementation of android-mapviewballoons (which is excellent, but didn’t quite fit my purposes due to lack of custom balloon layouts) found a way to do it which should probably have been obvious from the outset! The general approach is to add a new child View to the MapView, and then use the MapView.LayoutParams to position it.

Here’s a quick outline example if you’re unfamiliar (the View I’m displaying has a NinePatch as the background attribute of a top level LinearLayout, which makes the bubble wrap the content):

This is in the initial activity setup – my balloon is re-used for all OverlayItems drawn on my map:

//Reference to our MapView
MapView mapView = (MapView) activity.findViewById(R.id.mapview);

//Get a LayoutInflater and load up the view we want to display.
//The false in inflater.inflate prevents the bubble View being added to the MapView straight away
LayoutInflater inflater = activity.getLayoutInflater();
LinearLayout bubble = (LinearLayout) inflater.inflate(R.layout.bubble, mapView, false);

//Set up the bubble's close button
ImageButton bubbleClose = (ImageButton) bubble.findViewById(R.id.bubbleclose);
bubbleClose.setOnClickListener(new View.OnClickListener() {
	public void onClick(View v) {
		Animation fadeOut = AnimationUtils.loadAnimation(ResultsMapResultsDisplayer.this.activity, R.anim.fadeout);
		bubble.startAnimation(fadeOut);
		bubble.setVisibility(View.GONE);
	}
});

This next part is the important bit, and actually positions the bubble on the MapView using MapView.LayoutParams. It’s called by the onTap method of the ItemizedOverlay that contains my map markers:

private void displaySearchResultBubble(final SearchResult result) {
	//Hide the bubble if it's already showing for another result
	map.removeView(bubble);
	bubble.setVisibility(View.GONE);

	//Set some view content
	TextView venueName = (TextView) bubble.findViewById(R.id.venuename);
	venueName.setText(result.getName());

	//This is the important bit - set up a LayoutParams object for positioning of the bubble.
	//This will keep the bubble floating over the GeoPoint result.getPoint() as you move the MapView around,
	//but you can also keep the view in the same place on the map using a different LayoutParams constructor
	MapView.LayoutParams params = new MapView.LayoutParams(
		LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
 		result.getPoint(), MapView.LayoutParams.BOTTOM_CENTER);

	bubble.setLayoutParams(params);

	map.addView(bubble);
	//Measure the bubble so it can be placed on the map
	map.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));

	//Runnable to fade the bubble in when we've finished animatingTo our OverlayItem (below)
	Runnable r = new Runnable() {
		public void run() {
			Animation fadeIn = AnimationUtils.loadAnimation(activity, R.anim.fadein);
			bubble.setVisibility(View.VISIBLE);
			bubble.startAnimation(fadeIn);
		}
	};

	//This projection and offset finds us a new GeoPoint slightly below the actual OverlayItem,
	//which means the bubble will end up being centered nicely when we tap on an Item.
	Projection projection = map.getProjection();
	Point p = new Point();

	projection.toPixels(result.getPoint(), p);
	p.offset(0, -(bubble.getMeasuredHeight() / 2));
	GeoPoint target = projection.fromPixels(p.x, p.y);

	//Move the MapView to our point, and then call the Runnable that fades in the bubble.
	mapController.animateTo(target, r);
 }

That’s it! It’s a fairly quick example but feel free to let me know in the comments if you want any more detail.

Vim XPath Plugin

Dave — Sat, 02 Apr 2011 23:55:01 +0000

I’ve built a plugin that adds XPath search functionality to Vim. Check out the demo video below.

Features:

Quick XPath search input with smart, context-sensitive tab completion
Results shown in a pop-up results window. Jump to the line of a matching result easily.
Debug invalid XML – jump to the the line number of an XML error from the results window

Requirements:

Python support enabled in Vim
lxml library installed for Python (ideally 2.7 or higher).

For more info, and to grab the plugin by downloading the vimball, visit my github:

https://github.com/actionshrimp/vim-xpath

Let me know what you think / any improvement suggestions in the comments below.

Streaming Spotify to a PS3 from Ubuntu

Dave — Sun, 15 Aug 2010 17:50:48 +0000

A post came up a couple of days ago on the Spotify “What’s new” feed: how to stream spotify wirelessly to your stereo, which got me thinking about something I’ve been after for a while – the ability to stream spotify audio to PS3. This is mentioned in the link, but the main method they talk about is for Windows, and a solution for mac is touched upon. I figured I’d have a go at doing this on Ubuntu.

Before you have a go at this, I should mention a slight drawback – there’s a fair delay on the audio steam that reaches the PS3, around 20 or 30 seconds. This makes it good for playing a playlist as background music, but if you’re wanting to be able to flick around loads of different songs then you might get a bit frustrated. Read on if you’re still keen…

The general approach we’re going for is to convert the computer that’s playing spotify’s audio feed into a web radio station, which can then be played through a UPnP server that can be read by the ps3. Sounds a bit long winded? Well it is really! I’m sure there are better ways – I tried to pipe the spotify feed to a file and then play the file through the UPnP server instead, but this didn’t work with the way the PS3 buffers. Let me know if you find a better way though. Here’s how I did it anyway:

1. Install ps3mediaserver

You may have come across ps3mediaserver before if you’re a PS3 owner – it’s a great UPnP server that requires little setup. Head over to the downloads page. I grabbed pms-generic-linux-unix-1.20.409-BETA.tgz, although I’m pretty sure this will work fine with the stable version too. Extract the archive somewhere and fire up ps3mediaserver to try it out. With any luck it should locate your ps3. Add a share with some mp3s/videos in, restart it and give them a spin to check it all works. Try and make sure this is all working fine before carrying on, otherwise the later steps are unlikely to work.

2. Grab pmsencoder

The next thing we need is a plugin for ps3mediaserver called pmsencoder. This is pretty handy in itself – it allows you to stream podcasts from a feed URL, shoutcast radio stations and various web video streams. Head over to the pmsencoder page, and look in the installation instructions on how to install the plugin. You pretty much just need to download the plugin .jar file to your ps3mediaserver /plugins folder, and then add the pmsencoder engine to the engines line in the PMS.conf configuration file (if the PMS.conf configuration doesn’t exist, open up ps3media server, fiddle with some settings (like adding a share or changing transcoding options, then hit ‘save’. This will create the file). When that’s all done, restart ps3mediaserver and have a look on your PS3 again. With any luck, there should be a folder called ‘Web’, with some default web sources available to have a look at (Endgadget Podcast, various Youtube feeds). Again, try these out and see if they work, as if they don’t then you’ll probably want to get this working before proceeding. In particular, make sure the ‘Radio’ sources are working, as we’re gonna be pushing our Spotify feed through as a radio station.

3. Grab icecast2

Once ps3mediaserver and pmsencoder are working, we need to set up an icecast server to broadcast our soon-to-be-made stream to pmsencoder. If you’re on ubuntu, you can just do:

sudo apt-get install icecast2

to grab the icecast2 server. Once this is done, edit /etc/icecast2/icecast.xml and change the source and admin password to prevent random hijacking of your radio station. When the passwords have been changed, you’ll want to edit /etc/default/icecast2 and change the line at the bottom ENABLE=false to ENABLE=true. Now you can launch the icecast server:

sudo /etc/init.d/icecast2 start

Try and visit http://localhost:8000/ and see if anything displays. If all has gone well, you should get the icecast2 status page.

4. Add a spotify radio source to pmsencoder

Now our icecast server is running, we need to let pmsencoder and ps3mediaserver know about it. Open up the file WEB.conf in the directory where you’ve been running ps3mediaserver from. Under the #shoutcasts section, add a new source:

audiostream.Web,Radios=Spotify,http://localhost:8000/spotify.ogg

then restart ps3mediaserver.

5. Send the computer’s audio to icecast2

Next, we grab the computer’s audio and use gstreamer to send it to icecast2. Type the following:

pacmd list-sources | less

This will list pulseaudio sources. You should get a bunch of output back, but it should hopefully only list one device. You’re looking for the beginning part like this:

...


index: 0
name: 
driver: 
flags: DECIBEL_VOLUME LATENCY DYNAMIC_LATENCY
state: IDLE

…

in particular the name, which in my case is alsa_output.pci-0000_00_08.0.analog-stereo.monitor. Make a note of yours.

Next we just run a command to convert this pulse source into an ogg file, which is then sent to the icecast2 server. Run the following, replacing the device with your own, and the password at the end with the icecast2 source password you set earlier:

gst-launch-0.10 pulsesrc device=alsa_output.pci-0000_00_08.0.analog-stereo.monitor ! audioconvert ! vorbisenc ! oggmux ! shout2send ip=localhost port=8000 password=hackme mount=spotify.ogg

Now all sound that comes through your computer’s speakers is being sent to your icecast2 server. All that remains is to fire up Spotify. Start playing a track, and then on your ps3 navigate to the Web folder > Radio > Spotify. With any luck, after 20 or 30 seconds you should hear the track starting on your ps3 as well!

Let me know if you have any problems with the last few steps, although any problems with ps3mediaserver or pmsencoder are probably best tackled through the ps3mediaserver forums as I’m no expert on these two. Hopefully someone out there will have found this useful – again, let me know if you do

CakePHP: PagesController with Admin Routing

Dave — Tue, 07 Apr 2009 17:46:14 +0000

For small Cake websites with admin routing enabled, I like to use the Auth component to require a login for all admin routes, and allow access to everything else using the following beforeFilter in the AppController superclass:


function beforeFilter(){
    $admin = Configure::read('Routing.admin');
    if (isset($this->params[$admin]) and $this->params[$admin]){
        $this->layout = 'admin';
    }
    else {
        $this->Auth->allow();
    }
}

The problem with this however is static pages handled by the pages controller cannot be password protected. To resolve this problem, I had to overload the PagesController class that Cake comes with, and add in the required functionality. Part of the reason for doing this for me was to allow a setup where there was a password protected admin welcome page or control panel located at my_app_URL/admin, so I’ll show you the necessary routing to achieve that too.

Adding a route and overloading PagesController

First of all, copy your_app_dir/cake/libs/controller/pages_controller.php into your_app_dir/app/controllers with the rest of your application’s controllers. Then fire up an editor and take a look at your newly copied version. You’ll see there is a function called display, this is what the pages controller uses to display pages. There is a route in app/config/routes.php that maps /pages/* to /pages/display/* to make the URL easier on the eyes, so if we’re gonna have /admin/pages/* working properly, we’ll need a similar route. Open up app/config/routes.php, and underneath the line


Router::connect('/pages/*', array('controller' => 'pages', 'action' => 'display'));

add in the following route:


Router::connect('/admin/pages/*', array('controller' => 'pages', 'action' => 'display', 'admin' => true));

Now, when admin routing is enabled, Cake looks for controller actions appened with “admin_”, so we’d better add in the function to handle this in PagesController. Open it up, and underneath the display function, add the following:


function admin_display() {
    $path = func_get_args();
    $temp = null;

    $count = count($path);

    if ($path[0] != 'admin') {
        //This adds admin to the beginning of the path so the pages controller will look in the 'admin' folder in pages directory
        $path = array_merge((array)'admin', $path);
    } else {
        //This removes admin from the beginning if it's there already, and sends the request round again so we end up with URLs that look like app/admin/pages/x
        //when app/admin/pages/admin/x is requested somehow.
        $path = array_slice($path, 1);
        $this->redirect(array_merge(array('controller' => 'pages', 'action' => 'display', 'admin' => true), $path));
    }

    if (!$count) {
        $this->redirect('/');
    }
    $page = $subpage = $title = null;

    if (!empty($path[0])) {
        $page = $path[0];
    }
    if (!empty($path[1])) {
        $subpage = $path[1];
    }
    if (!empty($path[$count - 1])) {
        $title = Inflector::humanize($path[$count - 1]);
    }
    $this->set(compact('page', 'subpage', 'title'));
    $this->render(join('/', $path));
}

As you can see it’s fairly similar to the display function, with a few extra lines added in that handle admin pages. There are a few subtleties here which I will explain in a second. Before that however, we also require a slight change to the existing, non-admin display function. Look for the if statement below:


if (!empty($path[0])) {
    $page = $path[0];
}

and change it to:


if (!empty($path[0])) {
    $page = $path[0];
    if ($page == 'admin') {
        //Sends admin page requests to their proper place to stop sneaky access attempts
        $this->redirect(array_merge(array('controller' => 'pages', 'action' => 'display', 'admin' => true), $path));
    }
}

Ok so what have we done?

The added nested if statement in the display() function redirects requests for /pages/admin/x to their proper place, /admin/pages/x.
The ‘else’ clause of the if ($path[0] == ‘admin’) in admin_display redirects requests for /admin/pages/admin/x to /admin/pages/x, which just tidies up a URL aesthetics issue.
Finally, the first part of the same if statement is what handles the /admin/pages/x requests proper – it adds the ‘admin’ part back to the beginning of the $path variable that point 2 removes. This is actually just exploiting a subtlety of the pages controller, ‘subpages’ (this seems to be quite hard to find in the documentation actually) – requests sent to /pages/a/b will display a page b stored in the folder your_app_dir/app/views/pages/a, rather than a page b stored in the pages root. Adding this additional logic helps organisation a bit by storing all admin pages in you_app_dir/app/views/pages/admin/.

So now this is all in place, everything should work correctly. Requests to /pages/admin/x and /admin/pages/admin/x both get sent to /admin/pages/x, and these require proper authentication.

The final step is to add in a route that allows my original use for this whole setup to work properly – displaying an admin homepage or control panel that requires authentication when a user visits your_app_URL/admin, i.e. without referring to any controllers or actions. First, create a page in your_app_dir/app/views/pages/admin/, called home.ctp that contains the content you want. You can now access this from your_app_URL/admin/pages/home, but the shorter URL works after adding the route:


Router::connect('/admin', array('controller' => 'pages', 'action' => 'display', 'admin' => true, 'home'));

Hooray! We now have an admin homepage. Hope everything worked for you, hit me with a comment if you have an issues and I’ll try and help out.

CakePHP Tutorial Part 2: Authentication and Tweaking

Dave — Tue, 31 Mar 2009 19:51:59 +0000

In the first part of my CakePHP tutorial, I showed you how to use Cake’s Bake utility to set up the basic back end of an online illustration portfolio. In this part, I’ll tweak the automatically generated code into useable website and admin section and show you how to use some of Cake’s features along the way, including the Authentication component.

Joining the sections together

If you followed the first part of the tutorial, we currently have a few sections that we’ve generated models, controllers and views for. By navigating to your_app/controllername/action in your browser, you can access the different functions of the application. But unless your users know this in advance, they have no way of accessing them.

The easiest way of implementing navigation common to all pages is to use Cake’s built in templating system, the page “layout”. Cake uses its built-in layout if it finds no user defined layout default available. To add one, create the file your_app_dir/app/views/layouts/default.ctp, and put in your basic page layout. Mine looked like this:





<?php echo $title_for_layout ?>

css('default') ?>





King-Jon Illustration



link('News', array('controller'=>'News'))?>
link('Works', array('controller'=>'Works'))?>
link('Sketches', array('controller'=>'Sketches'))?>
link('Friends', array('controller'=>'Friends'))?>

You’ll notice this looks like a pretty normal basic page skeleton, with a few extra bits of PHP inserted. The $title_for_layout, $scripts_for_layout and $content_for_layout variables are filled in by Cake automatically depending on what the current page request is and the title and content are fairly self-explanitory. The scripts variable lets you specify scripts on a per-page basis but still include them in the section. The $html->xxx code snippets are part of the Cake HtmlHelper. This allows you to insert well formatted elements easily – the $html->css(‘default’) includes the stylesheet “css/default.css” (this is stored in the your_app_dir/app/webroot/css directory), and the $html->link lines let you point to different parts of your app easily. You could just add normal links, such as , but pointing to the controller allows a bit of flexibility if you want to change anything further down the line.

Adding a splash page

As it was an art portfolio website, it was decided a splash page would be useful to have, to give a good first impact when entering the site and the ability to show off a bit of artwork right away. Cake uses its built-in pages controller to handle static pages, and the different pages are stored in the folder your_app_dir/app/views/pages. To view a page, you navigate to the URL your_app/pages/pagename. Here, the pages controller doesn’t take an action, so the additional directory level on the URL is an argument passed to the controller, in this case the name of the page to display.

Cake also automatically serves up a default page, called “home”, when a user requests the root of your_app. The name of this page is set by Cake’s router, and if we look in your_app_dir/app/config/routes.php, we see at the bottom, the lines:

/**
* Here, we are connecting '/' (base path) to controller called 'Pages',
* its action called 'display', and we pass a param to select the view file
* to use (in this case, /app/views/pages/home.ctp)...
*/
Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
/**
* ...and connect the rest of 'Pages' controller's urls.
*/
Router::connect('/pages/*', array('controller' => 'pages', 'action' => 'display'));

The comments tell us what’s going on – this is what maps the pages to the locations I have talked about. You can add your own mappings here too if you like. For our splash screen however, we can just make use of the already defined “home” page, so edit this to make it look how you want, you’ll find it in your_app_dir/app/views/pages/home.ctp. Mine looked like this:

layout = "splash" ?>

image("splash.png",
array("alt" => "King Jon Illustration",
"url" => array("controller" => "news")));?>

A couple of things to note here. The first line $this->layout = “splash”, tells Cake not to use the “default” layout we created earlier, but to instead use one called “splash”. I sneakily created a splash layout without telling you here, but it is in fact just an exact copy of the default layout with the navigation div removed, to give the page a more “splashy” feel.

Next, I used the image HtmlHelper to include an image called “splash.png” – this is located in my_app_dir/app/webroot/img, the location the image helper looks in. The second argument is an array of additional attributes, “alt” being the alt text, and “url” puts an element around the image, creating a link to the specified address.

Admin section authentication

At the minute, all our sections are wide open for anyone to just stroll in and start adding news, posting works, and generally delete or edit existing pieces of data. This clearly isn’t ideal, so next on the agenda is sorting this out. We’ll use the Authentication component for this.

First of all, we want all add/edit capabilities to be kept within the admin section, so the first step is to remove the non-admin versions of these. Go through all five of the your_app_dir/app/controllers/*_controller.php, and delete the functions “add” and “edit” that were automatically generated. Next, clean up the views associated with these functions – delete the two files your_app_dir/app/views/*/add.ctp and edit.ctp in all five of the view directories. This means now we can only add and edit our data by navigating to your_app/admin/controller/add etc.

We’re going to want to use authentication for all our controllers, as all of them have an admin section that we need to login for. Instead of telling each controller to use this component individually, we can tell the whole controller superclass that we want to use it, to save repetition. Open the file your_app_dir/app/app_controller.php and add the line in the class definition like so:


class AppController extends Controller {
var $components = array('Auth');
}

Now if you try and visit an admin page in your_app, you’ll be greeted with an error messages telling you there’s no login action in the Users controller, which is where the Auth component looks by default, so we’d better add this in. Edit the file your_app_dir/app/controllers/users_controller.php, and right at the bottom of the class definition, add these two functions:


function admin_login() {
}
function admin_logout() {
$this->Redirect($this->Auth->logout());
}

Now try and navigate to an admin section again. You’re told that there’s a missing view this time! Better do what Cake says and add one in. Create the new file your_app_dir/app/views/users/admin_login.ctp, and fill it with the following skeleton login form:


check('Message.auth')) $session->flash('auth');
echo $form->create('User', array('action' => 'admin_login'));
echo $form->input('username');
echo $form->input('password');
echo $form->end('Login');
?>

Now there are two problems: we’re greeted with a login for all the admin sections – a slight problem as we don’t have credentials… we’ve locked ourselves out of the whole website! There are also some error messages when we try and view the non-admin sections of the site, which seem to want us to login but can’t find a login() action (remember we only created admin_login, and didnt bother with login). Fortunately, we can get around these problems by adding exceptions to the authentication. Open up the users controller, your_app_dir/app/controllers/users_controller.php, and then add in the following controller callback function (I added it in near the top):


function beforeFilter() {
$this->Auth->allow('admin_add', 'admin_index');
}

This gives access to the admin add and index (which lists all users) actions of the users controller. So now, navigate to your_app/admin/users/add, and create a login for yourself! You’ll probably want to remove the allow line once you’ve added yourself to prevent anyone else creating a login for themselves when you’re not looking.

We’re still however stuck with the problem that none of the non-admin sections work, so we need to add an Auth exception to all non-admin sections. The best way to do this is by adding the following into the your_app_dir/app/app_controller.php AppController class definition, underneath where we told it to load the Auth component earlier:


function beforeFilter(){
$admin = Configure::read('Routing.admin');
if (isset($this->params[$admin]) and $this->params[$admin]){
//$this->layout = 'admin';
}
else {
$this->Auth->allow();
}
}

Now we should be able to navigate the site without any problems. The commented out line above allows the future addition of an admin.ctp layout file that will automatically be loaded when viewing admin sections – I haven’t done this yet though.

The next phase of the project is to go through and edit all the views, layouts & CSS and get them looking how you want, and this is largely an exercise in usual web development – you can take a look at the default views to see how to include data provided by Cake fairly easily. If I come across anything else I think might be of help while I’m building the rest of the site, I’ll make small posts for those too. Hopefully you’ve been able to follow this introduction to Cake so far, but if not drop me a line in the comments below and I’ll try and give you a hand where I can. Good luck!

CakePHP Tutorial Part 1: Bake Utility

Dave — Sat, 28 Mar 2009 17:42:35 +0000

A friend of mine recently asked me to help him build an online portfolio for his illustration pieces, and I decided to use CakePHP 1.2 to get the back end up and running quickly. I thought someone might find a tutorial taking a simple website through from start to finish useful, so this tutorial series will do just that. This part of the series takes you through the first few steps I took to get the basic code together. You’ll need a web server and database server such as MySQL, and some basic PHP and webserver management knowledge. We’ll be using Cake’s “bake” utility to create the basic code as well, so you’ll need console access to your webserver, and PHP’s command line utility (in Ubuntu/PHP5 you can just install the package php5-cli).

Downloading and setting up CakePHP

Create a new directory on your webserver where your cake website will reside (or just use the web root if this is going to be the main webpage). Next, we’ll need to actually download CakePHP. If you have shell access to your webserver, you can use SVN to get the latest stable release automatically: navigate to the directory and use the command (note the “.” at the end of the command)

$ svn checkout https://svn.cakephp.org/repo/trunk/cake/1.2.x.x/ .

to do so. If you don’t know what any of this means, just download the latest stable release from the CakePHP website and extract the files into the directory you created – make sure the various .htaccess files don’t go astray in the process.

Some standard setup is also required: we need to tell cake how to connect to our database server, to do this follow the steps on this page. There’s also a couple of optional (but recommended) configuration steps here. After this, you should be able to browse to the directory in a web browser and see the default page – there shouldn’t be any errors or warnings if all configuration has been completed correctly (N.B. if the default page looks a bit plain – no colours, CSS styles etc., then you probably have a mod_rewrite issue, check out this page).

Now we can begin work on the site.

Bake a cake

Cake’s bake utility is a handy way of generating the basic code structure for a web application, saving a lot of the tedious grunt work that often comes with setting up a new project. The general idea is often seen in frameworks that take advantage of the MVC (model-view-controller) programming pattern (such as Ruby on Rails, and others). It involves creating a database structure that describes the various data entites – or “models” – of our application, then running a script that reads this structure and generates the framework code for the models. It can then generate standard interfaces (or “views”) for displaying the data, and “controllers” which tie our interfaces and models together, allowing data to be input and manipulated. Of course, these standard pieces of generated code probably won’t be exactly what we want, but they can provide a great starting point to work from and then tweak.

First of all, we’ll create our database structure. I’m using an empty database for this project, although if you’re using a database with tables from other projects in, you can set Cake to work with a table prefix fairly easily. Let’s get to work building the tables.

The first model will be “News”, containing data for a news section where the owner can post updates and information onto the site. To represent this, I created a table “news”, with four fields:

id – type: int – extra: auto_increment – primary key (A unique identifier for each record)
date – type: date
title – type: text
body – type: text

The next model is for representing finished works placed onto the site – the main part of the portfolio. Create a table called “works” with the four fields:

id – type: int – extra: auto_increment – primary key
date – type: date
title – type: text
desc – type: text

Next up, a sketches model. This is pretty much the same as “works” but will contain sketches as opposed to finished pieces. Create a table called “sketches” with the same four fields as above.

A friends model for a page that will contain links to websites belonging to friends of the owner, along with a thumbnail and description. Create the table “friends”, with the fields:

id – type: int – extra: auto_increment – primary key
name – type: text
url – type: text
desc – type: text

There is one last model we’ll need: “users”. By creating a table with a username/password, we can let the owner login to manage the site, add new works, sketches and friends. Multiple users will mean we can also have a login to test out the site. So create the “users” table, with fields:

id – type: int – extra: auto_increment – primary key
username – type: varchar(20)
password – type: varchar(50)
displayname – type: varchar(20) (Name shown when making posts etc – can be different from login name)

Now all our tables are created, we can get to baking. In a console, navigate to yourdir/cake/console, and then run the command

$ ./cake bake

and you’ll be presented with:

Welcome to CakePHP v1.2.2.8120 Console
---------------------------------------------------------------
App : app
Path: /home/dave/public_html/kingjon/app
---------------------------------------------------------------
Interactive Bake Shell
---------------------------------------------------------------
[D]atabase Configuration
[M]odel
[V]iew
[C]ontroller
[P]roject
[Q]uit
What would you like to Bake? (D/M/V/C/P/Q)
>

at this point, if you haven’t setup your database configuration yet, you can create it with the “[D]atabase Configuration” option. We’ll be choosing the “[M]odel” option however:

> m
---------------------------------------------------------------
Bake Model
Path: /home/dave/public_html/kingjon/app/models/
---------------------------------------------------------------
Possible Models based on your current database:
1. Friend
2. News
3. Sketch
4. User
5. Work
Enter a number from the list above, type in the name of another model, or 'q' to exit
[q] >

notice our database tables have been read, and cake has automatically figured out that an entry in “works” will be a “Work”, “sketches” give a “Sketch” and so on, but “news” is still “News”. We may as well start with the first entry, so enter 1, and hit enter. You’ll be asked the following:

[q] > 1
Would you like to supply validation criteria for the fields in your model? (y/n)
[y] >

Cake has a set of predefined validation criteria to make sure that data entered for a model is correct. We may as well take advantage of these, so hit “y” and press return.

Next Cake goes through each of the fields in our table, and asks what validation criteria we want for each. id is first, and I chose “blank” (number 3 in my case, athough I guess this number may change depending on which version of cake you’re using). This ensures that no data is entered for the id, which is what we want as the field is auto generated by mySQL’s auto_increment. For name I chose “Do not do any validation on this field” as the name can contain any text. For url I chose the rather fitting “url” (number 27) validation type. Finally, for desc I chose “Do not do any validation on this field” as well.

A final couple of questions now pop up: model associations – for this I just hit “n” as our model is simple and has no relational properties – and a confirmation to check your settings are ok:

---------------------------------------------------------------
The following Model will be created:
---------------------------------------------------------------
Name:       Friend
Validation: Array
(
    [id] => blank
    [url] => url
)

Associations:
---------------------------------------------------------------
Look okay? (y/n)
[y] >

Confirm this and there’s a final question about SimpleTest and unit test files. This is to do with Cake’s testing framework which I personally haven’t tried, and as this is just a simple project I won’t other using it, so just hit “n” here. Congratulations, you’ve successfully baked your first model!

Continue the process now, and bake the other models with appropriate validation criteria (I used “blank” for all the IDs, “date” for the date fields, and no validation for all the title/description fields – although for the users table, I chose “notEmpty” for the username, password and displayname fields as blank entries here would cause problems).

Next up, time to bake some controllers. I’ll show you the output from my run through first including the options I chose, and explain to you afterwards what some of them mean and why I chose them:

What would you like to Bake? (D/M/V/C/P/Q)
> c
---------------------------------------------------------------
Bake Controller
Path: /home/dave/public_html/kingjon/app/controllers/
---------------------------------------------------------------
Possible Controllers based on your current database:
1. Friends
2. News
3. Sketches
4. Users
5. Works
Enter a number from the list above, type in the name of another controller, or 'q' to exit
[q] > 1
---------------------------------------------------------------
Baking FriendsController
---------------------------------------------------------------
Would you like to build your controller interactively? (y/n)
[y] > y
Would you like to use scaffolding? (y/n)
[n] > n
Would you like to include some basic class methods (index(), add(), view(), edit())? (y/n)
[n] > y
Would you like to create the methods for admin routing? (y/n)
[n] > y
Would you like this controller to use other helpers besides HtmlHelper and FormHelper? (y/n)
[n] > n
Would you like this controller to use any components? (y/n)
[n] > n
Would you like to use Sessions? (y/n)
[y] > y
You need to enable Configure::write('Routing.admin','admin') in /app/config/core.php to use admin routing.
What would you like the admin route to be?
Example: www.example.com/admin/controller
What would you like the admin route to be?
[admin] > 

---------------------------------------------------------------
The following controller will be created:
---------------------------------------------------------------
Controller Name:  Friends
---------------------------------------------------------------
Look okay? (y/n)
[y] >

Creating file /home/dave/public_html/kingjon/app/controllers/friends_controller.php
Wrote /home/dave/public_html/kingjon/app/controllers/friends_controller.php
SimpleTest is not installed.  Do you want to bake unit test files anyway? (y/n)
[y] > n

Ok, I started by building the controller for the friends section again. Building interactively gives you access to more options in the setup, so I went for that. Scaffolding is basically a flag you set in your controller telling cake that you want basic skeleton app behaviour to be created at runtime. By baking we are given the advantage of pre-generating code that does more or less the same thing, but that we can also edit later, so choosing “n” for scaffolding is a wise plan in our case. The next question about basic methods is where our pre-generated skeleton code comes from, so choose “y” here. Admin routing creates an admin section for adding/deleting/modifying records. As we don’t want visitors to the website to be able to do this, but the portfolio owner will be wanting to do this, an admin section is a good idea, so “y” to this question as well. We are now asked about helpers. Helpers are libraries built into cake that add functionality and generally make your life easier. At the minute we’ll just use the default two, so choose “n”, although more can be added later easily if we need them. Next up are components which are similar to helpers, although these are more at a behind-the-scenes level, and helpers are used more for displaying and formatting data on the interface side of things. Again we may use some of these later, but at the minute just hit “n” for components. Finally hit “y” for sessions, and I agreed to the default name for the admin section, “admin”, although you may wish to change this. Hit “y” for the confirmation, and then “n” for the testing question again.

Repeat this for the other controllers.

Finally we have to make some views, so here we go again, although this step is a lot quicker. Choose “[V]iew” from the main menu, and I’m starting off with Friends again. The first question it asks is seemly about the scaffolding again:

Would you like to create some scaffolded views (index, add, view, edit) for this controller?
NOTE: Before doing so, you'll need to create your controller and model classes (including associated models). (y/n)
[n] > y

Before we wanted nothing to do with scaffolding, but here we hit “y”: this generates the views for the basic class methods we agreed to in the controller generation. We’re then asked about admin routing views, and we press “y” again, and the script tells us it’s generated the files we need.

Repeat this process for the other views, and then we’re done with baking.

Let’s see what we’ve done so far…

Now what exactly has all that baking achieved? If you go to the index page of your app directory in the web browser, you’ll just be greeted with the same welcome page. But try navigating to your_app_folder/news or your_app_folder/works and a new page comes up. You can give adding a piece of a news a go with the “New News” link on the news page. A form pops up letting you fill in the date, title and post body, and you’ll notice the entry form lets you fill in the date correctly and so on. We aren’t prompted to enter an ID because our validation criteria said we wanted this to be blank as it would be generated automatically. Once the post has been added, an entry comes up on the main page, letting us view the individual post, edit it or delete it.

In fact, if you’ve been keeping an eye on the URLs, you’ll have noticed that they take the form your_app_folder/controller/action. The actions were generated automatically by our baking process, and we’ll take a look at them in a bit more detail later on.

You’ll notice you can also go to your_app_folder/admin/news to get the same page – this is our admin routing. At the minute there is no difference between the two sections, but we’ll edit it so that you wont be able to add/edit/delete thing unless you’re in the admin section, and logged in correctly.

As you can see, baking has set up all the basic logic for our various sections, we just need to tweak it and glue it together a bit, and I’ll deal with that in the next part of the tutorial.

Using Lightbox with Apache directory listings as an image gallery

Matt — Sun, 01 Mar 2009 21:48:22 +0000

As you may know, if it can’t find an index.html the apache web server will show a list of files in the current directory. I was browsing through lists of images on my file server the other day and I thought, wouldn’t it be nice to have a next button? So I started digging around.

In the end I used a wonderful little script called Lightbox 2 and a bit of JavaScript Prototype magic to produce this (try clicking on the image files).

The directory listings are provided by an apache module going by the name of mod_autoindex. This module allows you to insert a custom header and footer through the directives HeaderName and ReadmeName. The plan is to insert some HTML that includes the Lightbox code and tags all the links to images with the rel=lightbox attribute that Lightbox uses to function.

Create a directory called lightbox in your server’s document root. Download Lightbox 2 and extract it to that directory (go to http://www.yourwebsite.com/lightbox to try it out). To get the Lightbox ‘loading’ and ‘next’ images to show up, you need to edit a couple of lines in the configuration section of js/lightbox.js that comes with Lightbox. Change the following

LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',
    fileBottomNavCloseImage: 'images/closelabel.gif',

to look like

LightboxOptions = Object.extend({
    fileLoadingImage:        '/lightbox/images/loading.gif',
    fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',

I also adjusted resizeSpeed to 9 to make it feel a little snappier, change this to your taste.

Now create a new file called lightbox.html in your /lightbox directory and copy and paste the following:

Now all you have to do is tell apache to include this file in its directory listing page. Simply paste the following two lines into a file named .htaccess and copy it to any directory that you want Lightbox to appear in.

Options Indexes
ReadmeName /lightbox/lightbox.html

Et voila! No php, no databases to maintain. Image galleries don’t get much simpler than that.

Installing awesome Window Manager on Ubuntu Intrepid

Dave — Mon, 02 Feb 2009 21:33:08 +0000

Quick Note: This post was originally published on 02/02/2009, so is probably a bit outdated now.

Today I had a go at installing awesome window manager. awesome is a great tiling window manager, useful if you have a large monitor and are fed up with having one window taking up all the space when it doesn’t really need it all. For example, having firefox maximised on a 1920×1200 resolution monitor can mean you end up with very large sentences that spread across the screen, decreasing readability. Unfortunately the version of awesome in the Interpid repos is 2.3.2-1, which is now deprecated, and the current stable release is version 3.1-1.

The website suggests building from source – I attempted this but there are currently a couple of issues with compilation mentioned in the wiki, and even with the fix suggested I couldn’t quite get it to work – although I didn’t try too hard it must be said; instead I found another method which I will walk you through now.

Installing and Trying It Out

The method I ended up using (thanks to my buddy Matt for figuring this out) revolves using binaries from the Debian experimental repository, which seem to work perfectly. First, you can download the awesome 3.1-1 package (N.B. The binaries I’m linking to here from Debian’s website are for i386, for others just search for them on the site), and try and install it with:

wget http://ftp.uk.debian.org/debian/pool/main/a/awesome/awesome_3.1-1_i386.deb
sudo dpkg -i awesome_3.1-1_i386.deb

However, it will spit out a list of dependencies it couldn’t manage – these are packages that are also outdated in the current Ubuntu repos. So next, fetch the ones you need which are listed below:

wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-atom1_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-aux0_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-event1_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-icccm1_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-keysyms0_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-property1_0.3.2-1_i386.deb
wget http://ftp.uk.debian.org/debian/pool/main/x/xcb-util/libxcb-render-util0_0.3.2-1_i386.deb

Then try and install them all with dpkg:

sudo dpkg -i awesome_3.1-1_i386.deb libxcb-atom1_0.3.2-1_i386.deb libxcb-aux0_0.3.2-1_i386.deb \
libxcb-event1_0.3.2-1_i386.deb libxcb-icccm1_0.3.2-1_i386.deb libxcb-property1_0.3.2-1_i386.deb \
libxcb-render-util0_0.3.2-1_i386.deb libxcb-keysyms0_0.3.2-1_i386.deb

At this point, it might spit out that it needs some extra packages – these are packages that you should just be able to install normally with synaptic or apt: I had to install menu for example, you may have to install some others as I had a few other dependencies installed from trying to build from source earlier on. Once you have all the packages, run the above command again to install awesome.

Once awesome is installed, we need a configuration file. A default config file is provided, so go ahead and copy it to your home dir:

mkdir ~/.config/awesome
cp /etc/xdg/awesome/rc.lua ~/.config/awesome/rc.lua

Now we can see if awesome works – kill your current window manager (in my case compiz), then fire up awesome:

killall compiz.real && awesome&

Hopefully everything has gone to plan, and awesome should now be running! Hooray! Have a little play around with it, mess with the config file a bit and see if you like it. Some useful key-bindings are:

Win + Enter – launch a terminal
Win + F1 – run a command
Win + J/K – switch windows (à la vim)
Win + H/L – resize major/minor divide
Win + Shift + J/K – move windows
Win + Space – change layout
Win + Ctrl + r – restart awesome, for example to update if you change the config file

There are loads more keybindings that you can find/change in the config file if you wanna know what they all do exactly.

If after using awesome for a while you decide you want to keep it, there are a few loose ends to tie up.

Setting awesome as the Default Window Manager

First, fire up gconf-editor:

gconf-editor

On the list on the left, goto:

 desktop > gnome > session

First of all, we’ll get rid of the gnome-panels – awesome already has its own. On the right, there is a name/value pair with name ‘required_components_list’, containing “[windowmanager, panel, filemanager]“. Remove panel, so it becomes “[windowmanager, filemanager]“.

Next we actually tell gnome to load in awesome instead of compiz. On the list on the left, choose the folder required_components. Change the windowmanager field from ”compiz’ to ‘awesome’.

Finally, you’ll probably wan’t to disable nautilus’s desktop (where the desktop icons live etc.) as it can do funny things, and with your magical new tiling windows you will probably never see the desktop. To do this, from the list on the left choose

apps > nautilus > preferences

and when here, uncheck show_desktop.

Now you can kiss sweet goodbye to all the remnants of your old desktop – log out of your system and log back in again to see it take effect. WARNING: If something has gone wrong and awesome doesn’t load (maybe you mispelt it in gconf-editor or something), you should still be able to find a way to edit the gconf preferences, but it took me a while to figure out how to logout when the normal gnome logout button had disappeared. To logout in this situation, type gnome-session-save –kill.

Customising and Configuring

Due to the highly keyboard oriented nature of awesome, you may now want to install a launcher. A couple of good ones are Gnome-Do (if you opt for this, you will have to change the binding from Win+Space in the awesome preferences, or reconfigure awesome’s binding for this combination), an all singing all dancing affair which I used for a while, or dmenu which is quite a lot simpler and I’ve opted for in this case.

To install dmenu:

sudo apt-get install dmenu

Next we setup a keybinding for it to launch in the awesome config file. Underneath the line:

-- {{{ Keybindings

Add (here it is mapped to Win+P – change this if you like):

-- dmenu
keybinding({ modkey }, "p", function () awful.util.spawn("`dmenu_path | dmenu -b`") end):add()

Also, as awesome is aimed at uber geeks the time is displayed by default as…. unix time_t. Unless you’re some kind of magician, hunt down the section in the config file that looks like this, and comment/uncomment accordingly:

-- For unix time_t lovers
--mytextbox.text = " " .. os.time() .. " time_t "
-- Otherwise use:
mytextbox.text = " " .. os.date() .. " "

Finally, I missed my CPU monitor. There is however a set of widgets you can get that adds functionality like this called wicked.

Install wicked:

git clone git://git.glacicle.com/awesome/wicked.git
sudo cp wicked/wicked.lua /usr/share/awesome/lib/
sudo cp wicked/wicked.7.gz /usr/share/man/man7/

in config file, underneath:

-- {{{ Wicked Widgets

Add in:

-- {{{ Wicked Widgets
-- CPU Usage Graph
cpugraphwidget = widget({
type = 'graph',
name = 'cpugraphwidget',
align = 'left'
})
cpugraphwidget.height = 0.85
cpugraphwidget.width = 45
cpugraphwidget.bg = '#333333'
cpugraphwidget.border_color = '#0a0a0a'
cpugraphwidget.grow = 'right'

cpugraphwidget:plot_properties_set('cpu', {
fg = '#AEC6D8',
fg_center = '#285577',
fg_end = '#285577',
vertical_gradient = false
})
wicked.register(cpugraphwidget, wicked.widgets.cpu, '$1', 1, 'cpu')

Then add in the cpugraphwidget into the mywibox[s].widgets line:

mywibox[s].widgets = { mylauncher,
mytaglist[s],
mytasklist[s],
mypromptbox[s],
cpugraphwidget,
mytextbox,
mylayoutbox[s],

For full instructions on how to use wicked, and configure awesome, check out the awesome wiki. Have fun!

Logitech QuickCam E2500 on Ubuntu Skype

Dave — Wed, 13 Aug 2008 00:12:57 +0000

I recently discovered the wonders of skype, and tried to get my new webcam working with it under linux, and of course this proved to be quite tricky. After much fiddling I eventually got it to work, hopefully these steps will work for you too.

The gspca drivers are available from here, I was using a specific version dated 20071224 to work with a patch file I found – many thanks to redeye on the QuickCam team forums. If you use a different version of the drivers, you can just examine the patch file and insert the changes manually.

First, download the drivers and the patch:

wget http://mxhaard.free.fr/spca50x/Download/gspcav1-20071224.tar.gz
wget http://forums.quickcamteam.net/attachment.php?aid=86 -O patch.tar.gz

Then extract and apply the patch:

(UPDATE: For Ubuntu 8.10 users, this patch may no longer work. Try downloading the patch here instead, and then extract it using gzip -d gspcapatch.gz. Apply the extracted file in the same was as below, just neglect the -p1 switch, (so do: patch < gspcapatch), you can just ignore the tar -xvf patch.tar.gz command).

tar -xvf gspcav1-20071224.tar.gz
tar -xvf patch.tar.gz
cd gspcav1-20071224
patch -p1 < ../quickcamE2500.diff

There’s a handy build script included with the drivers so just run that (requires root):

sudo ./gspca_build

This generates the file

gspca.ko

which we use to replace the old gspca module.
Check to see if the old module is loaded, you should see something like:

dave@baracus:~$ lsmod | grep gspca
gspca                 680656  0
videodev               29440  1 gspca
usbcore               146028  9 gspca,snd_usb_audio,snd_usb_lib,usb_storage,usbhid,libusual,ehci_hcd,ohci_hcd

We want to find out where it is, so do the following:

sudo rmmod gspca
sudo modprobe -v gspca

You should see something like:

insmod /lib/modules/2.6.24-20-generic/ubuntu/media/gspcav1/gspca.ko

That is the location of the file we’re looking for, so, replacing where appropriate with what was output for you above, type:

sudo rmmod gspca
sudo rm /lib/modules/2.6.24-20-generic/ubuntu/media/gspcav1/gspca.ko
sudo mv gspca.ko /lib/modules/2.6.24-20-generic/ubuntu/media/gspcav1/
sudo modprobe gspca

This should have loaded the new module in place of the old one. See if you have a video device:

dave@baracus:~$ ls /dev/video*
/dev/video0

You can try and run Skype now, and in fact, if you’re not using the camera for Skype, this may well be enough. But for the Skype users: see if you get any picture by testing in the video devices option menu (be warned, it can take a little while to show up there after skype loads, and a little while for the picture to show when you press the test button, so be patient). If anything show’s up at all that’s a plus. (UPDATE: If you’re using Ubuntu 8.10, and have used the alternative patch I posted in the other “UPDATE:” bracket above, the webcam may still not work in Skype at this point. There seems to be some issue with permissions in this version of the driver, so you may need to run skype as root if it doesn’t appear to be working. In a terminal type “sudo skype” and hit enter. It’ll ask for your root password, then launch skype. See if the webcam works now).

Originally, I had a black image, so I assumed the camera wasn’t working, but I soon realised that the image was there, just very dark – shining a light on it showed this was the case. I tried fiddling around with gstfakevideo for a while to try and alter the output, but there was a much simpler solution. The gspca driver itself can take options, and an autoexposure setting was ruining my lighting. To fix this, edit the file /etc/modprobe.d/options, and add a line at the bottom:

options gspca gamma=1 autoexpo=0

The gamma=1 may not be necessary, but if it still appears too dark or too light for your taste you can change this parameter as you like. Finally, reload the module:

sudo rmmod gspca
sudo modprobe gspca

and try out skype again. Hopefully it works!

I ran into quite a lot of other problems while I was trying this out, so if you come across any errors, drop a comment below and I’ll try and get back to you asap.

UPDATE: I found a large problem when using the camera in Skype was that CPU usage would shoot up to 100%, causing things to freeze up and conversations to crash after a while. I had played around with gstfakevideo a bit when trying to get the camera to work originally, and it seems using this when the camera already ‘works’ means it uses up far less CPU. I haven’t had a chance to test it for a long period yet but it seems like it should do the trick. Here’s what I did:

First, download gstfakevideo using subversion (you may need to install the subversion package, sudo apt-get subversion probably does the trick, and then the command below will make a directory called gstfakevideo in your current location, so make sure it’s somewhere nice), then compile and install it:

svn checkout http://gstfakevideo.googlecode.com/svn/trunk/ gstfakevideo
cd gstfakevideo
make
sudo make install

gstfakevideo creates a new video stream using your webcam, which is formatted differently and skype seems to get along with it more. The only problem is, it outputs its stream to /dev/video0 which is where our webcam currently lives. So we have to move the webcam, but this is easy enough:

sudo mv /dev/video0 /dev/video1

(Actually, gstfakevideo seems to work for me with lower CPU without moving this – but try it moved first anyway). Watch out though, every time you reboot, your webcam will probably go to /dev/video0 by default, assuming you have no other video devices, so you will have to move stuff about to make a space in video0 each time. Now we see if it works:

gstfakevideo v4lsrc device=/dev/video1 ! ffmpegcolorspace

What this does is runs gstfakevideo, telling it that the source we’re using is a v4l source, and its from /dev/video1. The ffmpegcolorspace argument seems to be for making the stream YUV instead of RGB for some cameras so may not be necessary. It then launches skype, with hopefully the output below:

dave@baracus:~$ gstfakevideo v4lsrc device=/dev/video1 ! ffmpegcolorspace
gst.c create_pipeline (155): pipeline created
gst.c create_pipeline (159): pipeline linked

If you look in the skype video options now there will be no camera listed. You have to wait a while (it can take 30s or so), until you get some output, ending with something like:

gst.c shim_ioctl (201): request=803c7601 nr 1
gst.c shim_ioctl (208): VIDIOCGCAP
gst.c shim_ioctl (313): result=0 error=0 Success

Now a camera should show up in the video menu in skype, with a name like GStreamer fake video (/dev/video0). Try it out, and compare your CPU performance to before. Also try exiting skype, and moving your video source from /dev/video1 back to video0, and running gstfakevideo again, only with device=/dev/video0, and see if it works (and let me know your findings below!).

Finally if gstfakevideo works, we can clean it up so the command isn’t so long to type. The script should be stored in:

/usr/local/bin/gstfakevideo

(Can check this using):

dave@baracus:~$ whereis gstfakevideo
gstfakevideo: /usr/local/bin/gstfakevideo

So we edit this file (requires root):

sudo gedit /usr/local/bin/gstfakevideo

Now, find the line that looks like this:

export GST_PIPE="videotestsrc is-live=true ! video/x-raw-yuv,width=640,height=480,framerate=10/1 ! videoscale ! ffmpegcolorspace ! vertigotv ! ffmpegcolorspace"

and change it to (remember where you put your webcam source – if you moved it back to /dev/video0, change the device parameter accordingly):

export GST_PIPE="v4lsrc device=/dev/video1 ! ffmpegcolorspace"

and finally look a bit further down, and delete the line:

export GST_PIPE="$*"

Now Skype will launch with your faked video stream, just from the command gstfakevideo. Good luck! Let me know how you get on.

jsvi and TiddlyWiki

Dave — Tue, 13 May 2008 15:26:28 +0000

Note: This is a bit out of date now, but Chris Peplin has built a proper plugin for tiddlywiki which does this for the latest versions of everything. So check it out! If you’re still interested in the old way then read on…

When adding posts to my TiddlyWiki, I oft found myself craving vi, rather than a simple textarea. There were a few options that involved using a plugin for Firefox such as mozEx, and using an external program to edit textareas. However, I found a nice ‘integrated’ option instead.

jsvi is an excellent javascript implementation of vi. I decided to try and integrate it into my TiddlyWiki, and the steps I took are shown below. To try out the final result, use the edit mode on my wiki.

Be warned: this is a bit of a dirty hack, and requires a few files external to the TiddlyWiki file, which makes TiddlyWiki a bit less portable. At some point it’d be nice if this was build as a TiddlyWiki plugin instead, but at the minute I’m not experienced enough with writing plugins for TW. There is also a slight bug which means you can’t scroll up while editing.

First of all, I installed the iFrameEditorPlugin from an old version of the VisualTW site. I don’t think VisualTW uses the plugin anymore, and has instead changed it’s wysiwig editors to using plugins rather than iFrames – a far superior solution, but one I didn’t have the time or ability for. The plugin alone is not quite enough though, and a few changes to it are required.

iFrameEditorPlugin loads an iFrame containing your editor, passes the editor the text from the body of the tiddler, you edit it, and then when you save the page, the plugin gets your changes and saves them to the tiddler. However, it expects you to use a custom field rather than the default text field, which is a slight problem in our case. The function getContent() is what actually performs this:

getContent=function(tiddler, field) {
    var t,f;
    t=store.getTiddler(tiddler);
    f = t ? t.fields[field] : "";
    f = f ? f : "";
    return f;
}

As you can see, it reads the field of the tiddler with t.fields[field]. To read the default text field instead, I added a new function to the plugin:

getContentText=function(tiddler) {
 var t,f;
 t=store.getTiddler(tiddler);
 f = t ? t.text : "";
 f = f ? f : "";
 return f;
}

Great. So that’s set up. There’s also another problem with the plugin – it was originally intended for use with wysiwig html style editors, but I enjoy editing my wiki content raw. Also, the content has to be passed in a URL to the editor, so strange characters in the URL will mess it up, so there were problem with escaping html entities and things like that. To get around this, I found a handy javascript function that converted html entities back to their original form, and added this to the top of the plugin (thanks to The JavaScript Source):

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Ultimater | http://webdeveloper.com/forum/member.php?u=30185 */
function html_entity_decode(str) {
  var ta=document.createElement("textarea");
  ta.innerHTML=str.replace(//g,">");
  return ta.value;
}

Ok, now we actually have to use this function, so we edit the plugin a bit more. Look for the line that reads the data back from the iFrame:

if(f) fields[f] = e.contentWindow.getContent();

and change it to:

if(f) fields[f] = html_entity_decode(e.contentWindow.getContent());

The plugin is all ready to go now, so we have to make the actual external editor that’s gonna go in the iFrame, using jsvi. Download these three files, and put them in the same folder as your TiddlyWiki html file.

vi.js
vi.css
editor.html

The first two are the actual jsvi javascript file and it’s style sheet, the second is my own editor iFrame. Let’s have a look at the important lines of the editor.html file:

This includes the jsvi javascript file.

This builds the actual textarea that’s gonna be edited by jsvi. Ok, now the javascript “meat” of the page:

var oEditor = document.getElementsByName('theEditor')[0];
function getContent() {return oEditor.value;}
tiddlers=/[\?&]tiddler=([^&#]*)/.exec(unescape(window.location.href));
fields=/[\?&]field=([^&#]*)/.exec(unescape(window.location.href));
if (tiddlers&&fields) oEditor.value = parent.getContentText(tiddlers[1]);
oEditor.focus();

All that happens here is we write the getContent() function that the iFrameEditorPlugin calls to read your changes. The tiddlers line reads the URL to get which tiddler you’re editing, and the fields line does the same for the field (actually this isn’t even necessary with our getContentText() function). The last two lines read the tiddler’s content, so we can edit it, and set the focus to the textarea to launch jsvi automatically when the iFrame loads.

That’s everything setup now, so all we need to do is tell Tiddlywiki when we want to make our edits with the iFrameEditor instead of with it’s default text field. I made a plugin (based on code from VisualTW’s EasyEditPlugin – thanks a lot!). You can view the plugin here. Hopefully it should add a ‘vi’ button next to the edit button on each tiddler. If no button appears, add ‘jsvi’ to the first line of the ViewTemplate tiddler to look like this: