Customisable waste container images for WasteWorks

Author

Posted by

Matthew Somerville

At SocietyWorks we believe in transparency. One of the ways we live this value is by working in the open, and giving our team members space on our blog to write about what they’re working on, something they’re interested in or even perhaps a mistake or challenge they’ve learned from.

In this blog post our Head of Development, Matthew Somerville, writes about a new waste container generator for our WasteWorks solution which uses CSS to make it easier to generate waste images tailored to individual councils’ branding and bin types.

—

WasteWorks is in use by a number of different councils, all of which have their own types of bin, in various colours and sizes (you can see a large array of photos of bins in use by local councils at the lovely govbins.uk site). An image of each type of bin associated with a property is displayed to residents from the WasteWorks homepage.

Our designer Lucas came up with some nice simple iconography for us to use on bin day pages, including domestic wheelie bins, communal bins, sacks and boxes. When we’ve had a new client, whose bins are differently coloured to any previous council, Lucas has been providing us with new PNG images to match the bins the council uses, exported from the source vector images. As well as the right colours, each PNG had to be provided at two different sizes, to work with high-resolution displays, and so we’ve built up a small collection of such bin images over the years.

These pictures only vary by colour (and the presence of a recycling logo), so I wondered if there was a better way we could generate these images. SVGs are vector graphics – they scale to any resolution, and importantly for this can be styled with CSS, the same mechanism used to style a web page. CSS also has “variables”, where you can define e.g. a variable to be a particular colour, and then use that variable in a different part of the document (or SVG image).

Lucas and I worked together to come up with SVGs for the various containers, which instead of specifying any fill colours directly, used one or more CSS variables to specify the colours. For the recycling logo, we set a variable for the opacity of the logo – defaulting to 0, so invisible, but we can set it to 1 to have it appear.

We’ve added a page to our user manual where you can play around with the colour of our new bin images in real time:
https://www.societyworks.org/manuals/wasteworks/container-picture-generator/ :-)

More technical details

The header of our domestic wheelie bin SVG looks something like this:

<svg class="waste-service-image">
 <style>
  .wheel { fill: #333333; }
  .main { fill: var(--primary-color, var(--default-color)); }
  .lid { fill: var(--lid-color, var(--primary-color, var(--default-color))); }
  .recycling-logo { fill: #ffffff; opacity: var(--recycling-logo, 0); }
 </style>
 ...

See that the CSS uses the var() fallback parameter so that the lid colour will e.g. default to the primary colour if not specified.

We used CSS mix-blend-modes in order to have shadows and highlights that would work regardless of the colour they were placed on top of; here’s an example shadow:

<g style="mix-blend-mode:multiply" opacity="0.12">
  <path fill="black" d="M95.1227 90.7581L120.495 681.301H79.3654L50.9626 90.7581H95.1227Z">
</g>

Then when we embed an SVG in someone’s bin day page, the web page itself, outside the image, can specify what colour to use by setting the corresponding CSS variable, and the picture will then appear in the right colours. When we have a new bin colour, we don’t need to create a new image, only set the right colour.

Here’s the outline of an SVG on a bin day page, for a grey bin with a blue lid, showing the recycling logo:

<span style="--primary-color: #767472; --lid-color: #00A6D2; --recycling-logo: 1;">
 <svg class="waste-service-image">
  <style>
   [... style as above ...]
  </style>
  [...]
 </svg>
</span>