Archive for the 'web' Category

27
Oct
09

Webkit feature test

The last few days I’ve been writing a 3D game.

  • Not just a game, an online multiplayer game.
  • Not just a 3D game, but one run in my browser.
  • Not just in my browser, but only with CSS and HTML(and some JS and server side stuff of course).
  • Not just AJAX, but Comet.
  • Not just PHP+MySQL, but only ±30 lines of Bash.

Don’t believe me? Watch this:

It started out a few days back when I read about Comet. I found out about the new EventSource support in Webkit, but I was in doubt how to implement this on the server. My first thought was throwing some PHP+MySQL at it, but I decided otherwise.

Normal Ajax is pull data transfer. You push data to the server, but every time you need data you request it and PHP in turn requests it with the database.

Doing Comet with PHP+MySQL would make the server push data to the client, but the server still does pull transfer with the database.

Then I came up with named pipes, and because named pipes are the easiest in Bash I used that. Now every listening transfer creates a FIFO and all new data is just written to them. This system creates on big U-turn where everything submitted is instantly sent back to all the clients.

This is all the bash code I’m using:

submit.sh:

#!/bin/bash

echo "Content-type: text/plain"
echo ""

cd data
echo -e "event:message\ndata:$QUERY_STRING\n" | tee -a $(ls -1)

data.sh:

#!/bin/bash
cd data

if [ $(ls -1 | wc -l) -lt 5 ]
then
    echo "Content-type: text/event-stream"
    echo ""

    mkfifo data$$
    trap rm\ data$$ SIGTERM SIGKILL EXIT

    while [ -p data$$ ]
    do
        cat data$$
    done
else
    echo "Content-type: text/plain"
    echo "Status: 503"
    echo ""
    echo "Sorry, server to busy!"
fi

For the client side all I had to do is set up an AJAX form submitting player information and move players when an event occurred. The 3D part is done entirely with Webkit 3D transforms. The only downside about using EventSource and -webkit-transform is that you can only play my game with a nightly of Webkit(if you’re unsure if you have one you don’t).

I would love to share my game, but my host refuses to run it. It’s using gzip compression so all events are queued up until the request times out. You can however throw comet.zip from the box.net widget in your cgi-bin and try it yourself.

15
Oct
09

“Hacking your own Twitter widget” for beginners

In the last few days I received 2 questions about how to get a Twitter widget on your site to display some data other than a user timeline. Since I love writing stuff I know that people like instead of what I think they will like, I’m going to write a short howto on getting your custom widget.

Getting your user timeline in a widget is easy; Go to Twitter and grab the code from this page: http://twitter.com/widgets/html_widget

If you look at the code you’ll see a link like this http://twitter.com/statuses/user_timeline/pepijndevos.json?callback=twitterCallback2&count=5 Go ahead and click it! It’s a JSON file with my latest tweets.

The cool part is that Twitter has a whole API of urls you can use to get your data. The default widget is using statuses/user_timeline. Note the XML structure at the bottom. We can replace this url with any public url that returns the same structure, that means statuses containing a user, not users containing a status.

Here is a list of a few API calls you could use:

  • http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&count=5 — Show the public timeline.
  • http://twitter.com/favorites/pepijndevos.json?callback=twitterCallback2&count=5 — Get a users favorites.
  • http://search.twitter.com/search.json?tag=jython&from=pepijndevos&rpp=5&callback=twitterCallback2 — Search will only work after the next version of the API, where it will return the same result as the rest.

An example using my favorites would look like:

<div id="twitter_div">
<h2>Twitter Updates</h2>
<ul id="twitter_update_list">
</ul>
<a href="http://twitter.com/pepijndevos" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/favorites/pepijndevos.json?callback=twitterCallback2&count=5"></script>

You can now paste this html code anywhere you want it to appear!

27
Jul
09

Twitter mindmap

I’ve never used Twitter before, I considered it useless. But today I registered at Twitter.com, only to surf straight to their API page to realize my new idea.

Those of you familiar with the concept of mindmaps know that they can visualize information which normally would need pages in one single image. Wouldn’t it be great if you could see your network and messages as a network/mindmap? It IS a network after all. ;)

What I made is a mere proof of concept. It fetches some friends and messages from Twitter and shows them at a random place connected with black lines to their author, @friends and #tags. Clicking on a friend shows their network. All objects ar draggable, thanks to jQuery(the image below is slightly ordered :D ).

I’ve got no place to put this except for here, so I can only give you an image and a zip file(Box widget over there >>> ), no live example.

Mindmap

11
Jul
09

Ipod touch WiFi mouse with Python (web app)

You might know it is possible with several applications to turn your iPod Touch or iPhone into a wireless mouse. You download/buy the app in the app store, install the server and voila, finished!

This works perfect, so why did I make another one? I think the problem is that you need a client and a server. Maybe the best option would be making an app that implements the Bluetooth mouse protocol so you can use it as a normal Bluetooth mouse. The problem with that is that I don’t know anything about C or Bluetooth. So I reversed the plan and made a server without the need for a client.

I’ll explain how it works. I wrote a Python app that extends the Python built-in webserver to server an empty html document. Well… almost empty, it only contains some JS to send back the touch events. Back at the server I register the events and move the mouse.

Although ‘move the mouse’ sounds easy, that is the most complicated part of the application. It currently only works for Windows and Mac.

The advantage of using Safari is that it gives us JS access to all touch movement as wel as allowing for portrait and landscape mode and pinch-to-zoom for detailed movement. In the future I might add a text field to send text to the computer, but this would be another cross-platform horror…

You can download the app form my box widget in the sidebar. Just run it with Python and point you iPod touch/iPhone to <computer ip>:3333

07
Jul
09

Pylons

Today I finally got this tutorial working!

I’m trying to learn Pylons, it’s a good system, but the API is not very stable yet…

To get the thing to work I modified these things:
Add this to helpers.py:

from routes import url_for
from webhelpers.html.tags import *

Session got a new home:

from myblog.model import Session

There seems to be a bug in SQLite, it failed to create the database, but after I created it manually it worked fine.

20
Jun
09

My holy grail

When I awoke this morning I was thinking about layouts with 2 fixed columns and a fluid content in the center with the 2-1-3 order. Some time ago someone started to call this his holy grail, and since then everyone refers to it by that name.

I do not claim this is better the others, or even useful, it’s just how I did it. It is guaranteed to be working in the latest Safari, Opera and Firefox, and guaranteed to be broken in IE(is there something that isn’t broken in IE?). I took the markup form A List Apart’s approach and used my own style instead:

body {
    min-width: 600px;
}

body * {
    outline: 1px dotted black;
}

#container {
    position: relative;
}

#center {
    padding: 0 200px 0 200px;
}

#left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
}

#right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 200px;
}

The side columns are at least as tall as the center, and as far as I know you can add as much padding and margin to everything as you like, as long as you update the padding of the center div to the total width of the corresponding column.

19
Jun
09

My new plugin

website trafficI can tell for sure that you came from wordpress.org. Not because I checked you referrer or something, just because… Well, see for yourself, this is the traffic graph of the day I released my WordPress plugin.

I’m sorry to disappoint you, but there is not yet anything to find about the plugin on this blog. But it’s the only public blog I have. Keep an eye on the menu, as soon as I find the courage to do so I’ll write something about it.

16
Jun
09

jQuery Rapid CSS/XHTML Prototyping (QRP)

I stopped for a while working on my Python CMS, but in my head I was already playing for a while with in place editing(like Adobe Contribute) and a round context menu.

I finally decided to spend some time on trying it out. As with most things I make, I imagined it to be very simple, but in reality you always encounter things that you simply did not thought about. Because this is just a tryout, I did not bother to check it in any browser except Safari.

The idea is this: throw in some jQuery and plugins, set contentEditable to True, write some JS glue, and TADA! Finished! The reality: Not very different, but it takes some time.

I started out with the image and the css for the context menu, then I turned on the contentEditable. After some playing around with that I started to write some JS to let the menu appear on the right spot and enter the clicked tag(mind the difference between currentTarget and target!). Now I looked for a bunch of jQuery plugins, the ones I currently use are: rigchtClick, markitup and in the future maybe thickbox. The problem with thickbox is that it applies a padding and margin of 0 to all elements. I previously used TinyMCE, but it does not use jQuery and it refused to interact with the content part(TinyMCE turns your textarea into an iframe, and I was to lazy to modify my script to read an write to the iframe).

So here you have it.

Here is a little howto:

  1. Fire up Safari 4 (other browsers are not guaranteed to work)
  2. Open index.html within the zip file (extract it maybe? ;) )
  3. Right click in the content area, choose a tag, or type the name of it in the text field.
  4. Click our newly created tag, now you’re in editing mode!
  5. You can now: edit the text in place, drag it around, edit the id and class, assign css to it, edit it with markitup, or add more tags!

screenshotPicture 8

04
Apr
09

Python browser games: Possible or fantasy?

While working on some database stuff for my CMS I got stuck, so I asked for help. The problem is that at the time of posting it was like in the middle of the night in America. So I looked around on the forums if I could be of any help to someone.

Then I found this thread where someone asked if he could run his PyGame in a browser. I never wrote a game… well not a real one at least, but it sounded interesting. So this is how I spend this day, looking for magic ‘Python applets’

Add me to the list of people who would like to know about it :P
After reading this I got myself a copy of Jython and tried some of my scripts(, falied) and made a nice swing gui with the interactive shell.

One thing I noticed is the lack of… A lot of stuff actually. :(
So step one is to get PyGame to run on Jython at all, if that works… convert to an applet.( http://www.jython.org/applets/ )

[offtopic]
Could it be possible to make a Python implementation in actionscript?(Flash)
Interesting thought… But just fantasy I guess. :roll:

[edit]
Did anyone here do but even the slightest research :!: :?:
http://archives.seul.org/pygame/users/Apr-2005/msg00111.html
PyGame on Jython is not even possible, so why bother thinking about PyGame applets?
It’s just not going to happen, unless someone writes a Python browser plugin.

[offtopic]
Now THAT is another cool idea, but even more unlikely to happen then a flash implementation of Python.

[edit]
I searched the whole interned and did not yet found a way to run PyGame in the browser.
The 3 closest are:

Jython, it does java applets, but no PyGame. Writing awt/swing games should be fine.
How about the other way around? Seek a light-weight Java game framework and import it into Jython. You can use java classes remember… Use them!( http://www.lwjgl.org/index.php )
It IS possible to do JNI from within a signed applet ;)

Grail, the Python browser. It’s dead and old I think, but it had Python applet support.

I hate Microsoft and their wannabe Flash: SilverLight, but the seem to have produced something nice: Ruby and Python support! http://silverlight.net/learn/dynamiclanguages.aspx/
But then we arrive at the same point as Jython… PyGame!!! Silverlight uses IronPython :(
But there is light at the end of the tunnel, according to a blog post(which I lost), http://code.google.com/p/ironclad/ got as far as importing PyGame into IronPython. This does not mean it will run ;) :x

This is how much energy I’m going to put in it…
In the future it might be possible to write Jython or IronPython games using PyGame and Java/Silverlight. Or someone might write a Python browser plugin…
But at the moment there is no good/tested way of writing browser game with Python.




My blog has moved!

My blog has permanently moved to a self hosted Wordpress at http://pepijndevos.nl

This blog will stay around for accidental search engine visitors.

Me

This is me

Blog Stats

  • 15,420 hits

@PepijnDeVos


Follow

Get every new post delivered to your Inbox.