Jun 122020

Writing and maintaining Cascading Style Sheets (CSS) can be very rewarding but for modern responsive applications it can easily turn out to be a frustrating and confusing process.

Such are the demands of websites today that stylesheets can quickly become bloated and complicated, with more plot twists that a bestselling novel.

CSS Preprocessors

This is where a CSS preprocessor can make life easier. CSS preprocessors are programs that generate CSS from their own syntax. There are several CSS preprocessors available, and most will add some features that are not available in pure CSS, this is where their true value lies.


Enter Sass (Syntactically Awesome Stylesheets).

Sass is a prominent CSS preprocessor and extension language, it introduces exciting new features to the CSS language including:

  • variables,
  • nesting,
  • mixins,
  • functions,
  • inheritance and more.

Furthermore, Sass supports an architecture that offers a welcome structure and modularity to stylesheets

Sass or SCSS?

Perhaps confusingly Sass supports two syntaxes; the original Sass syntax with a file extension of .sass and the newer SCSS syntax with a file extension of…you guessed it .scss.

The original Sass syntax uses white spacing and indentation in place of the curly braces and semi-colons found in CSS. Whereas the newer SCSS syntax follows the same rules as CSS syntax making it easier to learn and meaning that all valid CSS is valid SCSS. Not surprisingly SCSS has become the most popular choice among developers.

About that Architecture

As mentioned, one of the big advantages of Sass is the capacity to write partials. Sass partials help to divide stylesheets into separate smaller files each partial is a single file and combined they form the ultimate CSS stylesheet.

Not only does this make the code more maintainable – no more scrolling to the depths of a CSS file for that errant margin, it also helps to modularize the CSS, separating buttons from headers, and components from layout etc.

The 7-1 Pattern

There are different approaches, but many subscribe to the 7-1 pattern for the architecture. This comprises a main Sass folder containing 7 sub-folders for the partials:

  • Base/
  • Components/
  • Layout/
  • Pages/
  • Themes/
  • Abstracts/
  • Vendors/

and one main sass file (main.scss) which imports all the partials into the final compiled CSS stylesheet.

Typically, the Layout folder will contain partials for header, footer and navigation etc. Whereas the Components folder will contain partials like button.scss and form.scss and so on.

Features Worth Noting

Any developer familiar with programming will appreciate the value of introducing features like variables, nesting, and functions to CSS. But it is worth noting that the objective of Sass is not to turn CSS into a full-blown programming language, it aims simply to overcome some of the shortfalls.


Variables provide a great example of what a little bit of functionality can do. A variable in simple terms is an alias for a value:

The variable below ($color-blue) is an alias for the colour (#83D0F5)

$color-blue: #83D0F5;

So now every time that colour is used, instead of writing

color: #83D0F5;

the variable name is used instead:

color: $color-blue;

At first this might seem to have little benefit, until we consider that the colour might need to change for some reason. Without the variable we would have to go through the entire CSS stylesheet to find and update every instance, but using a variable means the only change required is to the original variable:


$color-blue: #83D0F5;


$color-blue: #0094FF;

Now everywhere that uses color: $color-blue; will automatically pick up the change.

In Summary

This article has offered a brief introduction to CSS preprocessors such as Sass and what they can bring to CSS. Hopefully, it has provided a brief insight into their value and potential. If you want to learn more about Sass and try it for yourself the official Sass website is a good place to start, with guidelines on everything from installing Sass in your project to implementing the various features in your code.

Apr 242020

The problem

My own response to the covid-19 lockdown has led me to running laps of my garden instead of running my regular public routes.

Several laps later and it was obvious that the GPS on my smart watch was struggling to track my runs in the restricted space of my garden. A quick discussion with the guys at work who have worked on GPS confirmed that GPS’s accuracy is only about 4m, so GPS was not going to work in the confines of my garden.

A possible solution?

Having experience of Machine Learning (ML), we decided to try using it together with time-lapse video capture to automatically count me completing laps of my garden. All I needed to do was measure a lap, and then use ML to do the counting to give me the length of my run – an ideal solution!

For machine learning we used ML.NET. This offers several different machine earning modes including image classification and object detection and is written in Microsoft’s .Net technology which is compatible with Windows, Mac and Linux.

All that was left was to record myself running laps of my garden using time-lapse software on my phone and pick a ‘start/finish’ region within the scene to count laps.

Decisions, decisions

To detect me going through the ‘start/finish’ region, we decided to use Object Detection instead of Image classification, these are both Machine Learning features of ML.Net.

Although Image Classification seemed like a good approach (it can distinguish between valid and non-valid images), it does require a lot of work to ‘train’ the model beforehand. This would make it difficult to change the start/finish region or for use in someone else’s garden.

Object detection

Object Detection, on the other hand, uses a pre-trained model to both identify objects within an image and give a probability of identification accuracy. Handily, it can also provide the coordinates and size of the object in the image.

For image analysis we used the small and fast YOLOv2 pre-trained ONMX model that can image detect people and 19 other object types and can be imported into ML.

First run using a desktop applicationPerson detection detecting tree - machine learning running

Instead of creating a console application, we opted to create a desktop application. This enabled us to provide a simple UI to browse to a folder of images and provide some on screen details (number of images etc). Later, we expanded the UI to add some additional features.

In the first version we chose to load all the images in the specified folder and pass them to the ML.NET analysers in one go. The video that I had shot had 2403 images, so each image had to be loaded into memory and processed, and then these results were looped through one by one to detect any objects.

This was taking approximately 30 seconds per frame! On top of that, the resolution of the images (1280 x 720 pixels) made the accuracy of detection low. The detail in the image was making it difficult to distinguish a person … from a tree, as you can see in the photo.

Take Two! Let’s get specific

The first version worked, but we needed to make some changes to the processing pipeline to speed it up and narrow down the search area. We identified that we needed to do the following:

  • Select a smaller, targeted region of the image and use that for object detection
  • Check the detected objects and see if a person has been identified
  • If a person is identified, skip the next few frames (which is really seconds) to avoid double counting
  • Process each image individually

To do this, we modified the UI to allow the user to draw a search region within the image and then roll the video sequence several frames back and forth to check that the person was correctly passing through this region.

Image of the application highlighting the runner - machine learning

We then changed the processing pipeline so that it first cropped each image, using the UI selected area, prior to processing.

To avoid double counting the laps we decided to skip five frames each time a person was detected, assuming 1 frame = 1 second.

Better and faster

Having made the changes, the process was now taking a far more respectable 7 seconds per frame and it was only processing some of the frames per lap, not everything.

Additionally, only processing the cropped area raised the accuracy of the person detection to over 85%. It could now show an accurate lap calculation to the user and allow them to work out the distance they had run.

What’s next?

Whilst the application is working and able to calculate the number of laps there are several areas that could be improved on.

In the next version we will add a field for the length of each lap which will allow the app to calculate the distance automatically. It could also calculate some speed and various average metrics as well.

We would also look at using a pre-trained model that only looks for people, which would make the analysis quicker.

Next, we will add the ability to load videos as well as images and later implement a version that can accept a live feed from a camera.

We might add Face/Person recognition so that the app can track multiple people, not just a generic ‘human’. This will allow the application to track a family running in the garden and display an accurate lap count for each person – another opportunity to use Machine Learning.

Possibly add a real time mode with a score board so that the runner can see how well they are doing… or not.

This was a quick and fun project to complete and has proved very useful – I just need to work on repairing the lawn now!

Find out more about ML.NET from the Microsoft website: https://dotnet.microsoft.com/apps/machinelearning-ai/ml-dotnet

Thanks for reading and stay safe.Westwood Rock - engineering your success

Sep 102014

REVO DAB radioThis was the first DAB radio to be launched by REVO. Designed to be retrofitted to cars the radio itself was removable and was a comfortable pocket size to be carried between cars. Although wiring harnesses were available to connect audio accessories to many cars they were problematic, often with expensive installation costs. At the time, the low power FM transmitters used for this purpose today were still unlicensed so along with an internal DAB aerial, we proposed and designed an active, FM modulator and low noise RF isolator. This allowed the signal from the DAB radio to be received as an extra station along with those received from the existing FM aerial.

Launched in the early years of DAB it won numerous awards and was very well received by both the audio and automotive press.

Westwood Rock - engineering your success

Sep 102014

Infusion pumpA complete electronic subsystem was developed for the control of a disposable infusion pump for applications such as analgesia. The device used an LCD screen and stored dose records in a non-volatile memory.

Challenges included low power battery management, DC motor control, safety interlocks, fault mitigation, and cost sensitive design.



Westwood Rock - engineering your success

Sep 102014

Solid State power control demonstrator for Passenger Airliners Traditional power control systems were electromechanical and solid state solutions promised significant weight and size reductions. The client came to us having supervised a previous prototype layout which had failed due to EMC problems within the PCB. We were engaged to produce a new circuit layout to the client’s specification paying particular attention to EMC radiation from the power circuits, and the susceptibility of the control signals.

Challenges included high voltage switching in close proximity to the small signal control circuitry. The solution had to meet sometimes conflicting requirements of safety, EMC and fast low loss switching.

The new circuit and layout worked as intended.

Achievement: Resolved a problem that enabled the client to demonstrate their first solid state power controller for passenger aircraft.

Westwood Rock - engineering your success

Sep 102014

Field scanner laserThe field scanner was used for counterfeit protection. It produced a digital signature for real objects based on a laser scan of their surface texture. The brief was to take a prototype to a pre-production model. The unit was to be powered from USB,. It was to use DC motors positioned using PWM drive from a PID control loop rather than stepper motors. The board outline was to be changed and significant cost reductions were required.

Challenges included USB power management, a dramatic cost reduction, the use of optical sensors with high precision ADC conversion and the team pre-empted the obsolescence of parts “not recommended for new designs”.

Achievement: All the requirements were met with a build cost reduction of 75%.



Westwood Rock - engineering your success

Sep 102014

Video Laryngoscope The Video Laryngoscope is a medical device. It is a hand-held endoscopic instrument used during laryngoscopy and endotracheal intubation.

Traditionally direct laryngoscopy involved using a device to move the tongue out of the way to allow the larynx to be viewed directly; sometimes incorporating a light source. The Video Laryngoscope relays an image from a sensor at the tip of the blade to a screen to the LCD viewer. It also provides a video output for display on a large screen, recording or for training purposes.

When the Laryngoscope was designed, the sensor used was the smallest of its kind in the world. Despite the quality of the sensor significant signal processing was required to control the image exposure and colour balance as the usual automatic algorithms for cameras tend to fall down when the image is predominantly one colour.

One of the challenges was the power management. It can be used as a traditional, stand-alone laryngoscope, with the LED in the tip powered from a conventional AA battery inside the handle. If the Video Viewer is mounted on the handle the Lithium rechargeable battery in the viewer takes over, powering both the viewer and the illuminating LED in the blade tip. The high image quality camera chip and high intensity white LED light source provide a clear image of the laryngeal structures.

Achievement: A complete electronic design and camera module design, incorporating power management, video signal processing and user interface.

The Venner AP Advance Video Laryngoscope was the winner of the 2011 Red Dot Design Award in the field of life sciences and medicine.
“The jury have returned a verdict that the Venner A.P. Advance is an outstanding piece of equipment right up to and including its finest details. A medical tool which is simple to understand, the video laryngoscope uses the benefits of modern technology, and also combines selected materials. This makes the Venner A.P. Advance a device which not only meets the demands of patients and medical staff, it also exceeds them.” [1]

[1] For red dot winners, product design, Subject: life science and medicine, See www.reddot.org


Westwood Rock - engineering your success



Sep 102014

Electroencephalograph subsystem - Evaluation board for EEG and Processor

Evaluation boards for EEG and Processor

Part of a larger more complex medical product the electroencephalograph subsystem used a 24 bit 8 channel ADC with integrated ECG/EEG front end. The applications support for this device was almost exclusively for electrocardiograph designs rather than the more sensitive electroencephalograph required for this development. The EEG demonstrator incorporated signal processing in software to compensate for temperature drift and to reject mains pickup which is the dominant noise source in biosensors of this type.


Electroencephalograph subsystem -Test Waveforms on touchscreen LCD demonstration

Test Waveforms on touchscreen LCD demonstration

Achievement: A fully functional subsystem was demonstrated using evaluation boards reducing the development risk dramatically and custom PCBs were then developed and integrated into the product.





Westwood Rock - engineering your success

Sep 102014

Broadcast Archive Quality AssuranceThis system was a bespoke development for a National Broadcaster. The Quality assurance of material that is being transferred from different types of media to digital storage for archival purposes is very time consuming and expensive. When problems are missed it can be years before the problem is discovered and the originals may have been lost.

Challenges included interfacing with both the now obsolete tape machines and the digital work stations as well as automating the validation process.

Achievements included integrating test sequences developed by the client to check the tape machines that were being used to play the material to be transferred.



Westwood Rock - engineering your success

Sep 102014

Fibre optic link for Outside Broadcast camerasThe electronics team have considerable experience from working in the broadcast television industry, designing equipment that has been used by the majority of the world’s national broadcasters including amongst others the BBC and ITV in the UK, PBS in the USA. For example they have worked on digital video effects machines, one of the first digital serial video signal routers and the ETSI codec used to link television studios with digitally compressed video, audio and data.

Because broadcast signals pass through multiple processes and links between the cameras and the viewer’s television sets any degradation accumulates so the team are used to working to very accurate colourimetry.

When shooting a drama on location or a live broadcast from a concert hall, race track or Grand Prix a host of signals have to be passed to and from the camera. These include high quality program video and audio, viewfinder video and headphone audio for the cameraman to monitor, remote control of camera functions and a three way intercom between the camera man and both engineering and production staff.

Our first design was the earliest aftermarket camera link to use digital modulation of the light on the fibre, previous systems had used analogue modulation. Now all similar systems use digital modulation.

This was a power efficient design to maximise battery life when powered from industry standard rechargeable batteries. It included safety interlocks to protect operators when high voltages are supplied via the cable.

A ground breaking product followed by many others in the same field, including a number of patents.

Westwood Rock - engineering your success