Tag Archives: PHP

Project List

The main purpose of this blog is to keep track of my various projects and to document them. The end result would be a long list of projects with all the associated metadata which can then be summarised to make browsing them easier. The Project List is a meta project that does just that. Each project on my website gets a file named project.php associated with it that contains the meta information. They are then gathered by the Project List and can be sorted, filtered, and displayed online. I’ve also added static pages, blogs, and talks to the lists of resources. You can view the Project List to read more it. This was tied in to a major update of my website, as I had to create new preview images and new styles to match the new way of showing the projects. This will probably evolve further over time, but for now it’s fine.

Screenshot

Project List, showing some projects
Project List, showing some projects

Meta: New styles

One of the criticisms of my site was that there were too many 90 degree corners. CSS has had rounded corners for a long time, so I decided to finally use this to make things look a little nicer. Now I have rounded corners on most of my website, which makes things look a little more inviting and soft.

At the same time I decided to update the style in general, taking as much of the project-specific styles out of the main style sheets as possible. This cut down the size of the main file by about 50%. The transition was not entirely smooth, and there are some parts that need to be fixed (most notably on the Project 365 page) but this does not affect the readibility of the website, so it’s a low priority.

In addition to the rounded corners and separation of main from project based styles, I also introduced some style related variables. Now a single style can define a set of colours that can be used to reskin the entire website. This uses PHP variables and several source files, which are then compiled into a single, relatively small stylesheet.

Screenshot

So many rounded corners!
So many rounded corners!

Update: Trigger game

In recent weeks I’ve been working a lot on the Trigger game (Live page.) These update have included an overhaul of the style, addition of new pages, rewriting of the “Spy mode”, adding new particles, tweaking the graphics, and many more changes behind the scenes. The code was significantly refactored to make it easier to extend and understand, as now this has becomes a collaborative project. The game has been tested on a few schools and shown to be a good success with children (and adults) and it seems to have a bright future. I also added sounds, music, and a simple music player.

Screenshots

Updated event display
Updated event display
Showing the various modes (some in development) with a garish colour scheme.
Showing the various modes (some in development) with a garish colour scheme.
Updated Spy mode, analysing the data.
Updated Spy mode, analysing the data.

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 management

Here’s something special for the 100th post! It’s project I use to manage projects.

This project was made to manage other projects. Each project has its own metadata which is parsed and arranged to give a useful summary of what the project does, how it was developed, and what I learned during development.

Links

Blog
GitHub repository

Overview

Each project has a python script that summarises the metadata, including the GitHub repository, the relevant links, a short description of the project, and details of implementation. Summaries are made for the Projects WordPress blog, and special links made for the PHP pages for projects that are hosted on my website. The scripts are organised so that they iterate over all projects (currently 83 and growing) at once, allowing a summary of all projects to be formulated.

This project management will eventually be extended to include icons, images, and other useful information. So far this has mostly be used to allow me to catalogue my existing projects in my spare time, which has taken ~15 months, but now that is nearly complete my needs will change, so I will add new functionalities.

Challenges

Challenge: This project needs to be versatile enough to handle a lot metadata about many projects.
Solution: In order to accommodate so many projects I had to create a new top level directory in my user space which is arranged hierarchically by category to contain all the projects. The choice to use python is motivated by the need to have a project management system that is versatile enough to handle a wide divrersity of projects with different metadata. (Resolved.)
This is how the sausage is made...
This is how the sausage is made…

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.

Work in progress: Trigger game

Like the Science Shift Simulator, this is a game that emerged as a subset of the aDetector project. The player has to save events that match the criteria given, just like a trigger does in real life. The results are then combined across all the players in a given team to determine the final score. The scores can be combined across experiments to make a “discovery”. This is still in development, which will continue over the net week and months.

Links

Live page
Spy page
GitHub repository

Overview

This is another cooperative multiplayer game aimed at showing the public (especially high school pupils) how particle physics research actually takes place. Any number of players can take part and they are split into “Team ATLAS” and “Team CMS”. The score of each team is determined by the performance of the players on each “shift” they take at the trigger, and the final scores are combined for the discovery of the Higgs boson. There is also a “spy” mode where people can see the events as they are submitted.

Challenges

Challenge: This project needs an attractive, fast, and realistic detector model.
Solution: Having already developed a decent detector model for the aDetector project, I simply used a two dimensional version for this project. I then split the detector finely in \(\eta\) and \(\phi\) to make interactions between the particles and detector easier. The aesthetics went through a few iterations before settling on the final design. However further optimisations and aesthetic changes are anticipated as development continues. (Resolved, to be revisited.)
Challenge: This game puts a bit of a strain on my server.
Solution: My web space uses a shared server, so sometimes many HTTP requests from the same client looks like a Denial Of Service (DOS) attack, resulting in a throttling of the requests. There are two main strategies to overcome this. The first option is to bundle up several requests into one request, reducing the total number of requests, and the load on the server. This solution has not been implemented yet. The second option is to change the server settings. I do not have access to these, but as development continues I intend to move to a different server that can handle so many very small requests. (To be revisited.)
Challenge: This game needs cross platform and cross device support.
Solution: This game was initially intended to be played with an iPad, but I did not have an iPad for testing. On the day of the release of the game I had to tweak the settings so the response times were slower with respect to mouse events to make it easier to play on a tablet device. These settings are trivially changed to allow multiple device support. (Resolved.)
Challenge: The game should be repsonsive to the inputs of the user.
Solution: Initially the game did not confirm success when a user clicked on the screen and this lead to confusion. As a result I had to add a big green “tick” for success and a big red “cross” for failure to inform the user of the status of the event. (Resolved.)
Challenge: The game needed an animated histogram for the final result.
Solution: I’ve made histogras before, including histograms that update themselves on the aDetector project, but until now I had not animated a histogram. This was a bit tricky as I had to call events which were using the this keyword, so the histogram object had to be stored as a global variable because, although I’d like to, I couldn’t use this to refer to the histgoram. Javascript can be frustating like that. (Resolved.)

Screenshots

I don’t normally put lots of screenshots up, but I’m quite proud of the asethetics here, so here are the three main screens of the main game:

The front page of the game.
The front page of the game.
The transition page of the game.
The transition page of the game.
The game in progress.
The game in progress.

The design went through a few iterations before settling on the current choice:

Design 1
Design 1
Design 2
Design 2
Design 3
Design 3

Work in progress: Science Shift Simulator

The Science Shift Simulator game is something that emerged from development of the aDetector project and LHC Driver projects. The mechanic is loosely based on the cooperative game Space Team. This is still in development, so the current page doesn’t actually work at the time of writing, and development will continue over the net week and months.

Links

Live page
GitHub repository

Overview

This is a cooperative multiplayer game aimed at showing the public (especially high school pupils) how particle physics research actually takes place, with an emphasis on cooperation. The game proceeds by bringing up several issues that need to be solved. The “Shift Leader” has information about how to solve the problems, but no control over the various subsystems. Instead they have a team of “Shifters” whose job is to solve the problems. This then becomes a problem of communication, cooperation, and optimisation between the various players.

For this project each player has control of a browser, which communicates with a central server. The Shift Leader’s client sends problems to the server, which are then collected by the Shifters’ clients. As a result the main difficulty in developing this game is synchronisation, especially when there are network problems!

Eventually this project will be reskinnable to allow other developers to add their own content. This will also be moved into a collaborative space, as this will have several developers in the future.

Challenges

Challenge: The big problem is synchronisation.
Solution: This is not the first project I’ve developed that required the client and server to communicate via AJAX requests, but it is the first that had more than one client sending information to the server. In fact it was this project that persuaded me to install MySQL locally and hook it up to Apache to get a local LAMP stack running on the my laptop. I got a prototype version working for demonstration purposes, but had to cut some corners. Development stopped in the middle of a significant rewriting of code, which is still to be completed. (To be revisited.)
Challenge: This game contains many mini games.
Solution: This is the first game I made that has mini games in it, and this required a different strategy for development. Making a generic mini game module in Javascript is not easy, and there will be some further significant changes as I rewrite this code again. (Resolved, to be revisited.)

Screenshot

Here’s the page as it currently looks. It needs a bit of a facelift!

Screenshot of the Shift Leader's page
Screenshot of the Shift Leader’s page

IIHE Nobel Prize website

When I started working for the ULB at the IIHE I wanted to get involved with some outreach activities. One of my first activities was the creation of a website celebrating the Nobel Prize in Phsics 2013, which was awarded to Fran├žois Englert and Peter Higgs for the prediction of the scalar (Higgs) boson. This involved collaborating and development using HTML, CSS, and PHP, with multiple language support, search engine optimisation, YouTube integration, and video recording sessions. The results was a webpage where the users of the lab got to show off what they did to the wider world and to show how the rich physics program at the lab was relevant to the prize. It was a fun project to work on, it was my own creation and was excellent practice for working on similar projects in the future.

Screenshot of the IIHE Nobel Prize 2013 websiteScreenshot of the IIHE Nobel Prize 2013 website
Screenshot of the IIHE Nobel Prize 2013 website

Live page

Spectrum

This project was made around the same time as the Reflections project, but I cannot remember which was written first.

Links

Live page
GitHub repository

Overview

This project takes a parametric equation provided by the user and then makes pretty curves, where the colours reflect the values of the parameters. This is performed in much the same way as in the Reflections project, except this time the user has complete freedom of the form of the expressions. This is achieved by writing the expressions directly as a Javascript macro embedded in the SVG. This way the expensive and potentially dangerous eval function is avoided, as it is in the Inverter project.

The \((x,y)\) values are determined using functions of a variable, \(t\), and a parameter, \(q\):

\(x = f(t;q)\), \(y = g(t;q)\), where the different colours correspond to different values of \(q\).

This project was used to make the icon for the LGBT CERN Twitter and Facebook accounts.

Challenges

Challenge: This project needed to have SVG and Javascript working together.
Solution: This is not easy! When embedding Javascript inside SVG is must be properly wrapped, and cannot use any external files. As a result that SVG file is often cumbersome and any libraries have to be written to the SVG file, making excessive use of Javascript unreasonable. (Although this didn’t stop me from trying to write an SVG based platform game.) (Resolved)
Challenge: This project required a smooth colour gradient for best effect.
Solution: This was one of the first times I needed to make a smooth colour gradient, and it is not as trivial as I might like. I found a way to quickly create an arbitrary colour gradient, which would help with many projects in the future, especially those that involve fractals. (Resolved)

Screenshot

Here is the output for \(x = 3\sin(q+2t\pi)\), \(y=t^2\), \(-1\lt t \lt 1\), \(0\lt q \lt 1\)

Screenshot for a Spectrum
Screenshot for a Spectrum