Tag Archives: tools

Update: Alarm clock

In the past few weeks I’ve been giving my website a facelift and updating many of the projects that were looking a little less presentable than the rest. One of the biggest changes was to the Alarm clock (Live page). Previously the clock had to be set in the source code (which was easy enough for me to do) and set using a time interval. I updated the code so that any user could set their own alarms and use a fixed time rather than an interval. At the same time I improved the general layout of the page and am now rather pleased with how it looks.

Before and after

Alarm clock before the update
Alarm clock before the update
Alarm clock after the update
Alarm clock after the update

Update: Painter

Recently I wanted to make some pixel art for a mobile version of my website (which is very different to anything I’ve done before, and more confusing than I thought it would be.) To do that I decided to use the Painter tool (Live page) I’d written a few years ago. Unfortunately the tool no longer worked, for reasons that I’m still trying to debug. (Possible to cross-domain restrictions when using the full path, but more likely due to the limits of the GET request.) The old method used PHP to generate the image, and the HTML DOM to manage the editing, using an HTTP request when the image needed to be generated. It’s not hard to see why this is inefficient, so once the canvas became available I decided to transition from PHP to JavaScript and the canvas.

The painter, after a facelift and going from PHP to JavaScript.
The painter, after a facelift and going from PHP to JavaScript.

Given my previous experience with the canvas it didn’t take long to code up a new version of the painter, and the biggest challenge was extending the scope of the line paintbrush to create lines at any angles, not just vertical or horizontal. The updated look is more sleek and professional, the performance is better, and there are fewer failure modes. I’ve kept the legacy version for interest, but I have no plans on using that again. I am also considering adding two new featuers in the future: allowing the user to save their image to an online database, and allowing the user to upload an image so they can edit existing images pixel by pixel.

Project 365

I keep a project 365 page, which means one photo per day. It’s a good way to keep track of the passage of time and as I take my camera everywhere with me it’ quite easy. After using a blog for the photos I soon became frustrated at how long it took, so I decided to make my own wrapper for the images.

Links

Live page
GitHub repository

Overview

The images are stored on disk, with automator scripts to resize them to the appropriate sizes. They are then arranged hierarchically according to date so that they can be arranged easily on the page. A list of comments, also arranged by date, is read via PHP and served up to the client as a Javascript file. There are event listeners added to each thumbnail so that the user can browse the images.

Challenges

Challenge: Given the large number of images there are a huge amount of HTTP requests.
Solution: Each thumbnail image comes with an overhead that could be reduced in the following way. The thumbnails can be combined into a single image which is indexed according to the date of each thumbnail. This can then be sliced up by client using a canvas and arranged on the page. Doing this would save a lot of time and bandwidth for both the client and server, but would require rewriting much of the code, and it is a low priority. (To be revisited.)

Screenshots

Screenshot of Project 365.
Screenshot of Project 365.
Screenshot of Project 365.
Screenshot of Project 365.

LXR tidy

When I was working on the CMS experiment I used their LXR a lot when browsing code. The interface was fairly basic and would return a poorly formatted (and unsemantic) HTML output, so I write a greasemonkey script to make the results easier to read. Within a couple of weeks of writing this code the developers improved the output, so this project never got any wider use.

Links

CMSSW LXR home
GitHub repository

Overview

The output is parsed and carefully separated into different results. These are then wrapped in more pleasant looking HTML, colour coded based on the file type (with characters for the colour blind) and the main modules are summarised to give an idea of the main users of a given piece of code.

Challenges

Challenge: The default output is terrible. Just terrible.
Solution: The default output was not even semantically correct (from what I remember there were no <html> tags) so I had a hard time parsing the DOM properly. Special character sequences such as << appearing in C++ code didn’t make things much easier. (Resolved.)

Screenshots

Screenshot of LXR output before the tidy script is applied
Screenshot of LXR output before the tidy script is applied
Screenshot of LXR output before the tidy script is applied
Screenshot of LXR output before the tidy script is applied
Screenshot of LXR output after the tidy script is applied
Screenshot of LXR output after the tidy script is applied
Screenshot of LXR output after the tidy script is applied
Screenshot of LXR output after the tidy script is applied

Keycode

This project tells the user the keycode associated with a given key in a given browser.

Links

Live page
GitHub repository

Overview

This project was quickly written as a tool for developing web based projects. Looking up keycodes in tables is so long winded, and this saves a lot of time.

Challenges

Challenge: This project must have cross browser support.
Solution: As keycodes and event handling vary across browsers this project had to be tested on all the major browsers. It was fairly easy to do and this is a trivial project. (Resolved)

Screenshot

Keycode tool
Keycode tool

Uncertainties radar

When dealing with systematic uncertainties in physics it’s often important to know the relative contributions of each unceratinty to the overall uncertainty. This script compares all the uncertiaties, assuming they are \(0\%\) correlated.

Links

Live page
GitHub repository

Overview

The script arranges the uncertainties by size, then adds the uncertainties in quadrature and then expresses them as a radial distance from the lower left corner, showing the effect of each uncertainty. This makes it easy to determine where to focus effort in an analysis, and which areas of analysis will not give much benefit in terms of systematic uncertainty reduction.

Challenges

Challenge: The output needs to be clear and easy to read.
Solution: The code needed to create the relevant geometry is fairly trivial to write. The only difficult part was adding the labels in such a way that they are all unambiguous and legible. At the moment the script works, but for a much larger list of systematic unceratinties, the labels may fall outside the plot area. (To be revisited)

Sample output

Uncertainties radar
Uncertainties radar

ROOT colors

This project creates an infographic showing the ROOT colors and how they relate to each other.

Links

ROOT page
GitHub repository

Overview

Physicists use ROOT to make plots and it’s often useful to be able to easily browse the color space. ROOT provides a color wheel, but I find the rectangular display very useful as well. In principle, colors in the same column should suit each other, which makes the rectangular display more useful than the color wheel.

Sample output

Rectangular array of ROOT colors
Rectangular array of ROOT colors

Recolourer

This project has been on my to-do list for a very long time. The idea is to take an image which is difficult for a colour blind person to view, and then remap the colours to make it easier for them to view.

Links

Live page
GitHub repository

Overview

This project has been on the back-burner for many years, and a physicist interested in equal opportunities this issue has been of interest to me since my sabbatical year working as an equal opportunities officer. Scientists often use colour to make plots clearer, most physicists are male, most colourblind people are male, and most scientist generally do not care about making their plots more accessible. The situation is getting better, slowly, but I thought it would be useful to have a stop gap tool to help people. This project was the first step in that direction, but since making the first step there have been many other higher quality tools out there. As a result I stopped working on this project and left it as a legacy tool.

The project takes an image and maps the colours from one part of the rgb space to another, essentially removing the red component. This should in principle make the images easier to view for someone with red-green colourblindness, although in practice an individual user’s colourblindness would have to be mapped out and a custom built algorithm made. In principle this is not difficult to achieve, I simply didn’t dedicate time to this part of the project given the success of other tools.

Challenges

Challenge: The colours had to be matched in a way that retained good discrimination between colours in a smaller colour space.
Solution: I’m not actually sure I achieved a good discrimination by removing the red component, but this is as good as I could manage with fairly little time. The sample image suggests that the boundaries between the various colours looks clear enough. (Resolved)
Challenge: As usual, when using external images it’s important to check the input.
Solution: I recycled code from the pixeler project to make sure the images were safe server-side. Since this tool is used for remapping colours of any image I cannot limit it to the same domain, so PHP must be used. (Resolved)

Sample input and output

Sample image before remapping
Sample image before remapping
Sample image after remapping
Sample image after remapping

Image fader

This is a simple script that fades an image to a given color and transparency. It’s used to make images for use in web design (for example, a background image that needs to fade to match the background color.)

Links

Live page
GitHub repository

Overview

This was made to edit the background images on my website.

Challenges

Challenge: Due to lack of time it only fades from the top at the moment.
Solution: The other three directions will be added as needed! (To be revisited.)

Screenshot

The image fader, fading the London skyline to red
The image fader, fading the London skyline to red