Tutorials

How to Write an HTML5 App?

Contents

• Getting Started
  • HTML
  • CSS
  • JavaScript
• Layout
  • Screens
  • Window Size
• Graphical Elements
  • Rectangles
  • Triangles
  • Circles
  • More General Shapes
• Animations
  • JavaScript
  • Movies
• Sound
• User Interaction
  • Keyboard Input
  • Mouse/Pointer Events
• Persistent Storage
• Debugging
• Deployment
• Examples
  • Infinite Dragable Plane
  • Timer with Persistent Storage
  • Sliding Puzzle Game
• References

Getting Started

Before you can start writing HTML5 Apps, you will need to learn (at least the basics of) the following technologies: HTML, CSS, and JavaScript.

3D graphics in R (updated)

For (my own) future reference, here are example commands to create a 3D (surface) plot in R:

library("rgl")
open3d(windowRect=c(50,50,800,800))

x <- seq(-10, 10, length=20)
y <- seq(-10, 10, length=20)
z <- outer(x,y, function(x,y) dnorm(x, 2, 3)*dnorm(y, 3, 7))

palette <- colorRampPalette(c("blue", "green", "yellow", "red"))
col.table <- palette(256)
col.ind <- cut(z, 256)
persp3d(x, y, z, col=col.table[col.ind])

These commands open the plot in a new window. The windowRect parameter in the call to open3d determines the initial position and size of the window (many thanks to Jem Corcoran for pointing this out). The output can be rotated and scaled using the mouse.

time zone aware timestamps in JavaScript and Python

For one of my programming experiments, I want to compute timestamps by using the number of seconds since the beginning of 1970. The resulting value will be used for communication between a web browser and my web server. My aim is to find a method to get the very similar values for the timestamp in JavaScript code running on the web browser and in a Python program running on my web server.

using R to generate publication-quality figures

I am currently in the process of writing a book, and I plan to produce several figures for this project using the statistical computing package R. While R is generally quite good at creating scientific graphics, some adjustments help to create high-quality images for inclusion in another document. This blog entry gives some simple hints about the required steps.

• Including figures in LaTeX: My aim is to create figures which can be included in a LaTeX document as follows:

  \documentclass{article}
  \usepackage{graphicx}
  \begin{document}
  
  Some useful information is shown in figure~\ref{figure1}.
  
  \begin{figure}
    \begin{center}
      \includegraphics{figure1}
    \end{center}
    \caption{\label{figure1}This is a figure.  It shows useful information.}
  \end{figure}
  
  \end{document}
  

• PDF output: The figures need to be generated in one of the image formats supported by LaTeX. To get high-quality output it is best to avoid raster-based formats like JPG or PNG. Since I use pdfLaTeX, the most convenient file format for my figures is PDF. R can directly generate a PDF file from a script: This can be achieved with the pdf() command. The required calls are as follows:

  pdf("figure1.pdf", width=4.6, height=3)
  ...commands to generate the plot
  invisible(dev.off())
  

  The options width and height give the outer dimensions of the plot (including labels and margins) in inches. The dev.off() command at the end is required to make sure all output is written to the PDF file. I enclose dev.off inside invisible() in order to suppress an annoying message about the "null device" being printed to the screen.

  Calculating the Square Root of a Matrix

  This tutorial explains how to use the LAPACK and BLAS libraries in a C program to calculate the square root (or another function) of a positive semi-definite, symmetric matrix. This serves as a non-trivial example for the use of LAPACK functions. We will see how to call the LAPACK Fortran code from a C program and how to use the BLAS C bindings to multiply matrices. This text assumes that you are already familiar with my text about numerical linear algebra packages on Linux. Feedback is very welcome; please direct any comments and suggestions for improvement to me.

  Creating a Poster with TeX

  This page contains some hints which may help to create a conference poster using LaTeX. The method described here is good if you want to do everything manually in order to have full control. If, instead, you just want to just get a usable result without spending too much effort, you probably will be better served by using one of the existing solutions like a0poster or sciposter.

  Contents

  • Overview
  • Setting the Page Size
  • Setting the Font Size
    • Using Scalable Fonts
    • Using the Standard TeX Fonts
    • Matching Font Size and Layout
  • Global Layout via PostScript
    • Background Colour
    • Layout
  • References

  Overview

  The method described on this page takes the following approach:

  Date and Time Representation in Python

  There are many different ways to represent date and time in Python programs. This page gives an overview over the different methods and explains how to convert between different representations. The main focus of this page is on how to represent points in time often assuming some fixed, local time zone. This is used for example when analysing log files. I will not explain here how to convert between different time zones or between different calendars.

  Numerical Linear Algebra Packages on Linux

  This page explains how to use numerical linear algebra packages of the BLAS/LAPACK family in C programs on a Debian GNU/Linux system. My goal is to efficiently solve systems of linear equations. Any feedback about this page is very welcome.

  Contents

  • Overview
  • Installation
  • Using BLAS
  • Using LAPACK the Easy Way
  • Using LAPACK the Hard Way
  • Outlook
  • References

  Overview

  There is a jungle of different packages and standards and there are implementations in both C and Fortran. The more important packages are presented in the following list.

  Setting up VServers on Debian

  This page explains how to use Linux-VServer to run several virtual machines inside a physical machine. A short overview over VServer can be found on the Wikipedia VServer page.

  Terminology

  In this text I will use the word host to refer to the physical machine the VServer setup is running on. I will use the word client to refer to the virtual machines running on this host.

  VServer Host Setup

  Kernel

  To use VServer on Debian you will need a kernel with VServer support patched in on the host. If you are using precompiled kernel images, you need one with the string vserver in the package name. On my amd64 system I could use linux-image-2.6-vserver-amd64. User space support is contained in the two packages util-vserver and vserver-debiantools.

  Controlling the Geometry of an HTML Element

  This page discusses how the get and set the size of an element in an HTML page. Some general information about how to use CSS and JavaScript in an HTML page can be found on my page about HTML5 apps.

  Contents

  • Introduction
  • Reading Geometry Parameters
    • Using Object Properties
    • Using the Computed CSS Style
  • Changing Geometry Parameters
  • Example
  • References

  Introduction

  The geometry of most HTML elements is controlled by the CSS Box Model. Elements are assumed to be rectangular, being surrounded by some (transparent) margin and possibly a border. For container elements, there is also an inner margin, called padding, which keeps child elements at a certain distance from the container boundaries.

  watching DVDs on an Apple iPad

  Just for reference, here is a recipe about how to watch your DVDs on an Apple iPad. I have read that some of the required steps may be illegal to perform when you are in the USA (or an American citizen?); don't follow these instructions if you are not allowed to!

  The instructions provided here use MPlayer/MEncoder on Ubuntu Linux to convert the DVD content into a file of the required format, but many other options are available.

  LaTeX: calling a macro for every line of input

  Recently I spent some time to understand how one can execute a macro repeatedly, once for every line of text in a LaTeX environment. Since the solution is a bit tricky and I found it diffcult to find answers on the web, here is a summary of what I learned.

  Step 1. In order to prevent input lines from being concatenated by TeX before we get access to them, we can use the \obeylines macro. This allows to define a macro which matches everything until the end of line:

  using DSSP in the "bio3d" R package

  The program DSSP is used to determine the secondary structure of a protein, taking the three dimensional coordinates of its atoms as the input. Bio3d is a library for the statistical software package R which makes it easier to analyse protein structure; as part of this, bio3d contains an interface to DSSP (in the function dssp). Since I had a bit of trouble using this interface, here are some hints.

  1. Get the DSSP program from the DSSP webpage. For academic use, the program is free of charge, but you need to fill in a license agreement.
  2. Rename the executable to dssp (mine was called DSSP_MAC.EXE after I had downloaded it).
  3. Move the file to the directory where it will live. For my system (and for the examples below) I chose /usr/local/bin/. The name of this directory is not allowed to contain white space.
  4. Call the dssp function with this directory as the exepath argument. The value of the exepath argument must end in / (on Linux/Unix/MacOS) or \ (on Microsoft Windows). Also note that every \ in an R string constant needs to be doubled, e.g. on Microsoft Windows you will probably need to write something like exepath="C:\\path\\to\\file\\".

  Example. In R one can now use the following commands.

  figures with matplotlib

  I like to use the matplotlib Python library to create figures for use in my articles. Unfortunately, the matplotlib default settings seem to be optimised for screen-viewing, so creating pictures for inclusion in a scientific paper needs some fiddling. Here is an example script which sets up things for such a figure.

  #! /usr/bin/env python
  
  import matplotlib
  matplotlib.use("PS")
  from pylab import *
  
  rc("font", family="serif")
  rc("font", size=10)
  
  width = 4.5
  height = 1.4
  rc("figure.subplot", left=(22/72.27)/width)
  rc("figure.subplot", right=(width-10/72.27)/width)
  rc("figure.subplot", bottom=(14/72.27)/height)
  rc("figure.subplot", top=(height-7/72.27)/height)
  figure(figsize=(width, height))
  
  x = loadtxt("x.dat")
  plot(x[:,0], x[:,1], "k-")
  
  savefig("figure.eps")
  

  The script performs the following steps:

  Parsing Apache Log Files with Python

  The common log format of the Apache web server contains information about page views on a web page. Today I figured out how this format can be parsed in a Python program.

  Typical log entries look like this (I added line breaks for better readability):

  66.249.71.138 - - [20/Sep/2008:10:09:09 +0100]
    "GET / HTTP/1.1"
    200 4235 "-" "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
  67.15.143.7 - - [20/Sep/2008:13:35:06 +0100]
    "GET //errors.php?error=http://www.rooksgambit.org/thebigsystem//sistem.txt? HTTP/1.1"
    404 2272 "-" "libwww-perl/5.79"
  

  The first step of parsing these lines is easy, the regular expression library allows to break a line into the individual fields: