Trig Point Web App

Having worked out the process of taking 360° photos using my trig point mount and managing to link them together I wanted to expand the scope of the simple tour that I’d created. However the current demo was manually assembled with a lot of hard coded HTML and Javascript which just wouldn’t work if I scaled it up. After some thought I decided that I could use the basic design that I had already but some further work would be needed:

• Get a list of likely trig points
• Alternative web hosting
• Ideally the data defining the trig points is downloaded in a JSON file rather than being hard coded …
• … which means that some way of managing and creating the JSON data is needed
• Different coloured markers for the hierarchy of trig points.
• It would also be neat if I could show 3D models of points of interest in a pop up window. Sketchfab provides a way of embedding content in an iframe so it should be possible.

Each of these is described in more detail below but here’s the link to the first version containing a few more panoramas ( and a lot more to go ) – https://john-davies.github.io/

Trig Point List

I wasn’t intending to take a panorama from every trig point because there’s far too many of them 🙂 The Ordnance Survey has a useful search page and also you can download a CSV file of the whole lot. I eventually chose 40, mainly in the western end of the Brecon Beacons, the Gower Peninsula and a few in between ( but see comments about disk space below ). I’ll probably end up with fewer than this because:

• Some will be destroyed
• Some are on private land
• Some of the views may not be very inspiring

Alternative Web Hosting

Up to now I’ve been using Google’s App Engine free tier to host demos that I can’t run on this WordPress site. Generally this has worked well except for one extremely annoying feature. Rather than uploading only the files that have changed the App Engine client will upload all the files each time. This is rather tiresome when you’ve got 100s of Mbytes of image files that don’t change from one update to the next¹.

There are a number of other free options out there but I chose the GitHub offering as I already use it to store source code. The only problem at the moment is that they say “We recommend repositories be kept under 1GB each.” Each trig point takes about 25 Mbytes and I’ve got about 40 identified as candidates which may make it a bit tight for space eventually. I’ve decided not to worry about it for now because, as described above, this list will inevitably be reduced.

¹Note that it’s not quite that simple because if you do two updates in quick succession then only the changed files get uploaded. However if you leave too much time between updates ( > 1 day? ) then the whole lot is uploaded. I found one Stackoverflow comment on this matter which seems to confirm what I’ve experienced.

Creating and Managing JSON Files

There’s a small amount of data that needs to be defined for each trig point – essentially the hard coded data in the demo. The JSON file to hold this data is fairly straightforward but, even though JSON file syntax is human readable, I really didn’t fancy manually maintaining it via a text editor.

I did search for some sort of graphical tool that would let me define the schema of the file, enter the data then export to a JSON file but I didn’t find anything useful. In the end I resorted to the old favourite of a spreadsheet with one trig point defined per tab. I then exported the data to CSV files and wrote a small shell script to convert the CSV files to a JSON file.

Even this wasn’t quite as straightforward as it should be because LibreOffice Calc doesn’t have an “export all to CSV” function but I found a suitable macro online. ( To be fair to LibreOffice, Excel doesn’t have this feature either 🙂 )

Coloured Markers

Leaflet only comes with blue markers as standard. However there are a number of free addons available and I chose this one. I also added a few more to use for showing whether an image was available or not available.

Embedding 3D Models

The pop up window for the “About” text and displaying the 3D models was based on this W3 Schools tutorial. The “About” text is straight HTML and the 3D model embedding is a slight tweak of the standard Sketchfab method.

At the moment one 3D model can be found on the Fan Brycheiniog trig point. This is a  model of Llyn y Fan Fawr generated from LiDAR data and a Google Map image overlay.

Final Comments

Overall this was a lot simpler than I thought. I ended up with around 340 lines of HTML/CSS and 380 lines of Javascript with a 200 line shell script to generate the JSON file. It should be noted that the Pannellum and Leaflet.JS libraries’ APIs are very well designed which made the integration very easy. I’ve worked with other libraries which insist on you jumping though many more hoops 🙂

Deploying the site via GitHub pages was also easy and I only found one slight wrinkle which was fairly easily solved:

I first published a very simple HTML file to make sure that everything worked but when I loaded the first version of the site I got the following error:

The page build failed for the `master` branch with the following error:
Unable to build page. Please try again later.
For information on troubleshooting Jekyll see:
  https://help.github.com/articles/troubleshooting-jekyll-builds
If you have any questions you can contact us by replying to this email.

The link didn’t really provide any useful information as I am not, and don’t intend, using Jekyll. However I found a comment in a forum post which seemed to hint at a solution:

Because you specifically mentioned that your site is static HTML/CSS with no Jekyll, the easiest fix would be to disable Jekyll by adding a .nojekyll file like described here.

Sure enough adding a blank .nojekyll file in the root directory did the trick and everything deployed correctly.

At the moment the image and map panes are a fixed size and ideally they would resize as the browser window is resized. Fixing this is certainly a priority. Other than that it’s on to the interesting bit of taking panorama photos and uploading 3D models …

Photo Panoramas

Like many people my early photo experiences were using 35mm camera film and printing photos on actual paper rather than viewing on a screen. This meant buying standard paper sizes, usually 6″x4″, 7″x5″ or 10″x8″. Anything other than these sizes was normally too expensive or didn’t fit in the enlarger or developing trays. In addition if your photo budget was a bit tight then wasting a sheet of paper by not printing on all of it was out of the question 🙂

These days, with digital, those limitations are irrelevant and we’re free to experiment with any size of shape that we want. Square photos seem popular, maybe because of Instagram and the like. or maybe a nostalgia for the older Polaroid type photos ( which is apparently being relaunched )

My preference at the moment is for wider, panorama photos and here are a selection of my favourites. These are made either by cropping a single image or by stitching together one or more separate images. ( I’ve added a short technical note at the bottom as to how I go about it about the second technique )

This image was taken in Austria and is one of my favourite photos. In winter you can only get to this point on cross country skis and it was stitched from 3 images taken using my Canon IXUS 70 point and shoot. I like the way that the morning mist hasn’t quite cleared and the cross country tracks disappearing into the distance.

 

This is also from Austria but this time a single image that’s been cropped. I felt that it worked better in B&W, the mist in the centre of the image has completely filled the valley below.

Even industrial Birmingham looks better under a rainbow 🙂 Well maybe that’s pushing things a bit far, this was taken on my phone from an office that I was working in at the time and then cropped such that the rainbow just fitted the frame.

The next two are slightly extreme panoramas and they were both created from 6 images stitched together. The final panoramas in both cases were about 8000 pixels wide and there’s plenty of scope for cropping further.

Firstly the Camel estuary in Cornwall taken from Padstow:

 

Secondly Chinon in France with the Vienne river in the foreground. ( You can just see some distortion on the buildings on the very left hand side of this image )

Technical Note

To stitch images together I use the FOSS Hugin tool. I’ve used various versions of this tool over the years and the latest releases are very good IMHO. The tool has lots of options but I usually just use the default settings and it works just fine. From my experimentation there are a few key things to watch:

1. Make sure that there’s plenty of overlap between the photos. Some cameras have a “stitch assist” feature which shows the previous photo along with a live view to help with the alignment. My point & shoot has this feature but it can be quite hard to see both images on the small screen on the back of the camera.
2. Try and keep the camera level for all the shots. A tripod is obviously the best here but a monopod is sometimes more convenient. I use an extendable walking pole whose handle unscrews and the pole can then be screwed into the tripod mount on the camera. It’s also useful for extra stability when taking telephoto shots.
3. For final images that require several photos to be stitched together it’s useful to shoot on manual rather than automatic to avoid too much exposure change between shots.
4. Try to avoid subjects that have a lot of movement. I have a better panorama of the Camel estuary that was ruined by fast moving cloud shadows on the sands. Because the shadows were different in each photo then the final result had a very strange patchwork effect of light and shade.