Generating Tables of Contents with jQuery

For my FOM lecture on webprogramming I created a small jQuery example to automatically generate tables of contents. The following code just extracts h1-headings, using jQuery’s pseudoclasses („:header“) other extractions are of course possible.

Update 2015-06-21: I removed the ‚counter‘ variable, since ‚index‘ is already providing a counter.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
 
</head>
<body>
 
<div id="toc"></div>
 
<h1>1st Headline</h1>
<h2>1st Subheader</h2>
 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
<h1>2nd Headline</h1>
<h2>2nd Subheader</h2>
 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
<h1>3rd Headline</h1>
<h2>3rd Subheader</h2>
 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
 
<script>
$(document).ready(function() {
	$("h1" ).each(function(index) {
		$(this).html($(this).html()+"<a name='lnk" + index +  "'></a>");
  	console.log(index + ": " + $(this).text());
  	$("#toc").html($("#toc").html() + "<br><a href='#lnk" + index + "'>" + $(this).text() + "</a>");
	});
}
);
</script>
 
</body>
</html>

autotoc

Visualizing Graphs with GraphViz

Here’s a nice example of GraphViz visualizing Fund structures.

digraph G {
graph [label="GraphViz example", splines=ortho, nodesep=0.2]
                subgraph cluster_ {
                                node [style=filled];
                                i0;
                                label = "Level 0";
                }
 
                subgraph cluster_0 {
                                node [style=filled];
                                a0  a1  a2;
                                label = "Level 1";
                }
 
                subgraph cluster_1 {
                                node [style=filled];
                                rank=same;
                                b0 b1 b2 b3 b4 b5;
                                label = "Level 2";
                }
                
                i0 [label="Investor"];
                a0 [label="FoF A"];
                a1 [label="FoF B"];
                a2 [label="FoF C"];
                b0 [label="Fund 1"];
                b1 [label="Fund 2"];
                b2 [label="Fund 3"];
                b3 [label="Fund 4"];
                b4 [label="Fund 5"];
                b5 [label="Fund 6"];
                
                i0->a2;
                a0->b4;
                a1->b5;
                a2->b0;
                a2->b1;
                a2->b2;
                a2->b3;
}

gv-01

Embedding the TeX code in the PDF

There are a few packages out there which allow the user to add arbitrary files to the PDF container. The following example uses the „navigator“ package by Paul Isambert.

\documentclass[12pt,ngerman]{scrartcl}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{babel}
\usepackage{navigator}
 
\begin{document}
 
Hallo!
 
\embeddedfile[TeX code]{\jobname}{\jobname.tex}
 
\end{document}

navi

Stimmkarten mit LaTeX erstellen

Hier ein kleines Beispiel, wie man mit ticket.sty Stimmkarten für Vereinsversammlungen erstellen kann:

\documentclass[a4paper,12pt,ngerman]{scrartcl}
\usepackage[total={210mm,297mm},top=0mm,left=0mm, includefoot]{geometry}
\usepackage[badges]{ticket}
\usepackage{graphicx,palatino}
 
\usepackage{filecontents}
\begin{filecontents}{badges.tdf}
\unitlength=1mm
\hoffset=-5mm
\voffset=0mm
\ticketNumbers{1}{2}
\ticketSize{170}{120} % unitlength => mm
\ticketDistance{0}{0} % unitlength => mm
\end{filecontents}
 
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{babel}
\usepackage{xcolor}
 
\renewcommand{\ticketdefault}{}%
\makeatletter
\@boxedtrue % Rahmen um Ticket
\@emptycrossmarkfalse % Falzmarken
\@cutmarktrue % Schnittmarken
\makeatother
 
\newcommand{\mylabel}[1]{
\ticket{%
\put(22,105){\Large \textit{Vereins-Mitgliedsversammlung September 2015}}
\put(30,55){\Huge\bfseries #1}
\put(67,15){\Large \textit{Stimmkarte}}
}}
 
\begin{document}
\mylabel{Max Mustermann}
\mylabel{Gabriele Musterfrau}
\end{document}

stimmkarten-01

Durch einfaches Anpassen der badges.tdf (hier direkt im TeX-Dokument) kann man auch einfach 4-auf-1 Stimmkarten erstellen.

\documentclass[a4paper,12pt,ngerman]{scrartcl}
\usepackage[total={210mm,297mm},landscape,top=0mm,left=0mm, includefoot]{geometry}
\usepackage[badges]{ticket}
\usepackage{graphicx,palatino}
 
\usepackage{filecontents}
\begin{filecontents}{badges.tdf}
\unitlength=1mm
\hoffset=-15mm
\voffset=-10mm
\ticketNumbers{2}{2}
\ticketSize{140}{90} % unitlength => mm
\ticketDistance{0}{0} % unitlength => mm
\end{filecontents}
 
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{babel}
 
\renewcommand{\ticketdefault}{}%
\makeatletter
\@boxedtrue % Rahmen um Ticket
\@emptycrossmarkfalse % Falzmarken
\@cutmarktrue % Schnittmarken
\makeatother
 
\newcommand{\mylabel}[2]{
\ticket{%
\put(15,80){\large \textit{Mitgliedsversammlung August--September 2015}}
\put(20,45){\Huge\bfseries #1}
\put(65,30){\Huge\bfseries #2}
\put(55,15){\Large \textit{Stimmkarte}}
}}
 
\begin{document}
\mylabel{Max Mustermann}{1}
\mylabel{Moritz Mustermann}{2}
\mylabel{Anna Mustermann}{3}
\mylabel{Tony Mustermann}{4}
\end{document}

stimmkarten-02

Computing Confidence Intervals with R

To highlight how confidence intervals cover in 1-\alpha cases the true parameter I hacked together a little R code based on code from http://paleocave.sciencesortof.com/2013/03/writing-a-for-loop-in-r/ and http://www.cyclismo.org/tutorial/R/confidence.html

  • I define a function which takes as parameter „runs“ the number of confidence intervals to compute
  • result is the vector of results, it will contain TRUE values for those intervals that cover the true parameter and FALSE for those which don’t
  • for each run I draw a sample of 10000 points from N(0,1)
  • I then calculate the mean and standard deviation of the sample
  • before calculating the limits of the confidence interval, „left“ and „right“
  • Since I know the true mu is 0 I can check if 0 falls into this interval, the result of this check is stored in the i-th column of the result vector
  • finally I calculate the summary of the result vector. On average 95% percent of all intervals will cover the true mu, 0.

If I find some more time I will add some functionality to run this code on multiple cores as well as a graphical visualisation of the intervals.

confInt <- function(runs){
	result<-NULL
	for (i in 1:runs) {
		data<-rnorm(10000)
		n<-length(data)
		a<-mean(data)
		s<-sd(data)
		error <- qnorm(0.975)*s/sqrt(n)
		left <- a-error
		right <- a+error
		result[i] = left<0 & 0<right
	}
	result
}
summary(confInt(100))

EDIT: Using some more ggplot2 code I have the graphical visualization ready:

confInt <- function(runs){
	x<-1:runs
	mu<-NULL
	sigma<-NULL
	result<-NULL
	vleft<-NULL
	vright<-NULL
 
	for (i in 1:runs) {
		data<-rnorm(1000)
		n<-length(data)
		a<-mean(data)
		mu[i]<-a
		s<-sd(data)
		sigma[i]<-s
		error <- qnorm(0.975)*s/sqrt(n)
		left <- a-error
		right <- a+error
 
		result[i] = left<0 & 0<right
		vleft[i] = left	
		vright[i] = right
}
	data.frame(x,mu,sigma,result,vleft,vright)
}
 
 
df<-confInt(100)
 
require(ggplot2)
 
myplot<-ggplot(df, aes(x = x, y = mu)) +
  geom_point(size = 2) +
  geom_errorbar(aes(ymax = vleft, ymin = vright,colour=result*3))
myplot + theme_bw() 
summary(df)

See http://stackoverflow.com/questions/30289894/plotting-confidence-intervals-from-a-dataframe/30290123#30290123 for an alternative solution.

Configuring the Samba server on the Bananapi

Configuring the samba server and having it use the attached 2,5″ HDD was actually pretty easy.

Step 1: Mounting the harddisk

From http://mein.homelinux.com/wiki/linux/mounten I learnt how to add the attached harddisk to the fstab. blkid gave me the UUID of the disk (which I had previously partioned and formated with gparted), so I just had to a) create a directory /media/storage, b) set the access rights with chmod 777 /media/storage and add the following line to the fstab:

UUID=b06c9eb6-7cc3-429b-9176-44896e712319 /media/storage ext4 auto,defaults 0 2

Step 2: Installing samba

sudo apt-get install samba installed samba, but not smbpasswd. A quick sudo apt-get install samba-common-bin fixed this.

After I had created a „bananapi“ user on the machine I added this account to the list of samba users with the command smbpasswd -a bananapi. I then took the sample configuration for the /etc/samba/smb.conf from https://www.thomas-krenn.com/de/wiki/Einfache_Samba_Freigabe_unter_Debian and rebooted the machine.

From my Windows machine I can connect now to \\bananapiip\public and use it as a samba server. When copying a 1 GB iso image to the \public share I got an avaerage of 35 MB per second.

Setting up the cluster

Since the case is pretty much complete now, it is time to take a look at the software. I finally decided to run Raspian on the PIs and Lubuntu on the Banana Pi. While there may be other (maybe even more suitable) OSes available I think is the best starting point for my project. The Banana Pi is equipped with Lubuntu.

After booting the Banana Pi I switched to the German keyboard layout (unfortunately the corresponding GUI is horrible). Afterwards the usual apt-get update and apt-get upgrade took care of software updates.

The next steps are the configuration of a static IP as well as the installation of the SSH demon and samba.

Banana Pi updating

EDIT

I just learnt about Bananian which is based on Debian 7. It does not provide a desktop environment, so a 2 GB SD card is said to be sufficient. Since I just want the Bananapi to act as samba server all the Lubuntu features are pretty irrelevant for me.

It also has a sshd running

Creating Dymo Labels with LaTeX

Today I purchased a Dymo 450 label printer. Of course I want to be able to print my labels from LaTeX, so I quickly created a test document.

Important: the correct label size must be set in the printer dialogue.

% For the 11354 label
\documentclass[14pt,ngerman]{scrartcl}
\usepackage[left=7.5mm,right=2mm,top=5mm,bottom=5mm,% 
paperwidth=57mm, paperheight=32mm]{geometry}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{babel}
\usepackage{palatino}
 
\setlength{\parindent}{0pt}
\setlength{\parskip}{0pt}
 
\begin{document}
 
Max Mustermann \\ Musterweg 1 \\ 12345~Musterstadt
 
\end{document}

label1

Building a case for the Raspberry 2 cluster

Just putting 6 microcontrollers on the table won’t work long (low WAF) so I decided to use the vast amount of my Lego Technic components to build a suitable case. In the future I might switch to a custom-made Acryl case (I could use the Dingfabrik‚s laser cutter) but for quick prototyping nothing beats LEGO. For this project I had to buy a few extra components, among them two dozen LEGO 55615 which drove the costs a little.

IMG_7950

IMG_7953

IMG_7963

IMG_7973

IMG_7980

IMG_7983

Building a Raspberry Pi 2cluster

Big Data, Hadoop, NumPy, R cluster computing etc. are pretty hot topics. To get my hands on them and get a deeper understanding I have decided to build my own cluster out of small Raspberry Pi 2 computers. I am not the first one to come up with this idea, you can find a few nice examples online.

I have decided to use five Raspberry Pi 2 and one Banana Pi in this cluster. The Banana Pi has the advantage of being equipped with a Serial ATA port, my plan is to use it to store the data the Raspberries are working on.

The general setup is the following:

  1. 5 x Raspberry Pi 2 from Pollin for 37.95 Euro each
  2. A TP-Link 8-Port Gigabit Switch for 20.99 Euro
  3. a 6-Port RAVpower USB power source (3 x 1.0 Amp, 3 x 2.4 Amp) for 17.99 Euro
  4. a couple of five micro USB cables for 12.99 Euro
  5. Identical 16 GB micro-SD cards from Sandisk, Class 10 for 10.99 each
  6. the Banana Pi (I got mine from notebooksbilliger.de for 33.89 Euro)
  7. a SATA Power/Data cable to connect a 2.5″ harddisk to the Banana Pi

So altogether I spent around 320 for the electronic parts, some other parts (like SD card and USB cable for the Banana Pi) I had in my stash.

In the next article of this series I’ll describe the case I am currently building out of Lego Technics parts…