I had been having some difficulty working with fonts in Processing.js – I could not easily find information on how to solve my problems. This is a short post on the problem I had and the solution.
I wanted to position text within a circle such that the text was centred in the circle. This required knowing the width of the text and performing a simple calculation to determine where to position it relative to the centre of the circle. I did not know how to do this.
I found this post very quickly, which looked like it provided the solution. I tried out it a variant of it, but the text was not rendered in the correct position. It turned out that the width() function was returning a value of 0 all the time.
I don’t have excellent tools for debugging JS in general, or Processing.js in particular, so I was guessing somewhat. I figured that the loadFont() call was not actually loading the font correctly and hence no proper width calculation was performed. I tried to find some more info on font handling in Processing.js (although I must confess my knowledge of font handling in JS running in browsers is very limited).
Font handling in Processing.js seems to be still evolving. I found some recent postings in which Scott Downe’s was solving problems relating to custom fonts and Processing.js. I also found a discussion of font-handling by Eli Grey in which there is a link to a test of loadFont(), but it does not work in my browser (Chrome 5.0.375.126 on OS X).
I had assumed that the browser would be able to use fonts stored locally – I’m sure this is somehow possible, but I could not figure out how to do it easily. Most of the solution that I used was provided in this post – it describes how to create an SVG font which is stored on the server with the JS and is downloaded by the script as needed. As this solution involved storing the fonts on the server, I note how I did this using appengine here.
The solution that I used is the following:
- generate SVG variant of font using Batik as described here.
- use loadFont() with the full name (including the .svg extension) in the sketch – this will send a request to the server to obtain the SVG file – your server logs should show this request arriving at the server
- create a fonts directory in the appengine application; put the .svg font in this directory
- modify app.yaml to point requests for font.svg to a static file in the fonts directory
After I did this, loadFont() obtained the font from the server, the width() function worked and the text was rendered in the correct place within the circle.
I have no idea how to make Processing.js pick up default fonts stored on the client side using loadFont(). Any pointers on this welcome.
I spent a little while thinking about final year projects for Computer Science students for the 2010-2011 academic year. I really think good, motivated undergraduate students can be a joy to work with and they can do some really cool stuff if given proper encouragement and support.
Here are the projects that I’ve put into the system (in no particular order):
- an EC2 based Android test environment which can be accessed via a browser. For remote testing of Android apps, it would be great if testers could receive an email, go to a link, log in and perform some tasks on the app without needing to install the Android emulation tools locally. That’s the problem this project is trying to solve and I’ve put together a solution that can work on paper – let’s see if it can work! In conjunction with Tethras.
- a system which enables a screen to access a proximate user’s private information when authorized by the user’s mobile. The system builds on top of the LocalSocial technology (which facilitates device-social network identifier lookup) and can be used in the context of this project to enable a person to interact with an application running on a screen in a more personalized manner. More specifically, this project will enable a user to interact with a public screen in a company’s reception to leverage LinkedIn information to see who the person knows in the company. In conjunction with Rococo Software.
- extensions to XBMC to provide support for unified communications. This will allow XBMC to integrate with presence services (delivered primarily over XMPP), VoIP services (we plan on using PJSUA) and video services (with some mix of v4l and ffmpeg). The details on this one require further thought and I suspect we won’t get everything figured out until the student gets stuck in to and understands some of the internals of XBMC. Preassigned project.
- understanding the types of folk who frequent different places: This project was somehow inspired by the ideas of the CrowdScanner folks in Galway; however, this project proposes quite a different approach. The project will primarily be a foursquare/hunch mashup in which when a user checks in on FS, they will simultaneously declare that they like the place on hunch. We can extract what correlates with liking a particular place from hunch to get some feeling for what people are like who frequent a given venue. Preassigned project.
I’m also working with Antonio and Martina on a project to try to pull together content relating to a particular topic which may be taught by a lecturer or learnt by a student. It’s something like the Einztein guys are trying to do, but with more of an emphasis on higher level courses.
The projects are being reviewed by a committee in the dept, so they may change a little. However, I’m expecting that they should at least be put out to the students. Hopefully, they’ll all go ahead as I think they’re really interesting projects.
It’s interesting to note that 3 of the projects have an Android emphasis. I guess I think this is a better skill for students to know going forward. Also, it can be a bit easier to work with.
If anyone has seen some variant of these being done before, let me know, so we don’t end up reinventing the wheel!
I finally decided I needed to have some kind of proper voice on the Internet. I’m doing quite a bit more thinking these days and I will feel quite sad if it doesn’t manifest itself in some coherent thoughts which may be of interest to someone.
I did set up a blog on blogspot of all things quite some time ago; however, I never knew what to do with it and hence I never populated it with content (except for one particular rant). This time, I’ve got a clearer idea of what I want to say.
Stay tuned for some fun and interesting reading!