Earth Notes: On Live Buttons/Widgets for GB Grid Electricity CO2 Intensity

Updated 2022-12-13.
Help your visitors and improve your Web pages with a live GB grid carbon-intensity button/widget/avatar: 32x32 and 64x64 sizes.

Simple Traffic-Light Carbon Intensity Buttons

Live-updating buttons available in 32- and 64- pixel square sizes. The buttons show marginal GB grid intensity for generation fed into the national transmission system (as seen by a typical retail consumer) in gCO2/kWh (ie also kgCO2/MWh). Bigger numbers are worse.

The button background colour changes to represent the traffic-light colour, ie red for high/bad CO2 intensity per unit of generation (over the last 24h), green for low/good, yellow for intermediate.

The images are small, and typically cached for half an hour in browsers, so won't hurt your users' experience. They are cached only for half an hour to stay showing a fresh, accurate value. It is possible that some page-authoring and on-page-SEO tools may complain about the images' short cache lifetime; now you know why!

I generally like to float widgets like this up and to the right, and without padding (especially above and to the right) to save space, eg:

Also I use these buttons/images as my avatar on forums, and have also embedded one (visible, but out of the way) in a navigation sidebar on another site or two of mine.

Thanks to Iain H for the nudge to make this actually happen!

Example Cut-n-Pastable HTML

(Note that you may use http:// or // in place of https:// in the image URLs below, as suits your site.)

32x32 Pixel Intensity Button/Widget

live GB grid intensity gCO2/kWh

Cut-n-paste the HTML code below into your Web page or blog.

64x64 Pixel Intensity Button/Widget

live GB grid intensity gCO2/kWh

Cut-n-paste the HTML code below into your Web page or blog.


For AMP pages you will need to use an amp-img tag (possibly with layout=intrinsic) instead of plain img, something like this:

Automatic Controls

If you want to drive something automatic to use less juice at less green times (I have my Web servers do housekeeping at low-carbon-intensity times and avoid any unnecessary or speculative work at high-carbon-intensity times, for example) then this may work for you:

Poll every 10 minutes for 404 HTTP status code (404 means green, 200 means not green, anything else is 'unknown' status due to server/network/other problems) for automated systems:

I have at one time used these signals to switch my dishwasher on at the wall in the middle of the night to use low-carbon juice, which worked when the brains of the appliance were simple and electromechanical. Nowadays the dishwasher and washing machine are just smart enough for that not to work...

Please email me if you use this mechanism, to be alerted to changes.

Look at the code on GitHub to roll your own local server, for example.

Solar Powered!

These buttons are still (2020) being served by my little solar-powered off-grid Raspberry Pi server, so please try to be careful how you use them so as not to squish my site! I may have to replace/relocate these buttons if that happens. Thank you!

2022-12-13: 48px Button Discontinued

Since no one actually seems to be using the 48x48 button, and button generation is one of the most expensive parts of the process, as of today generation of it is being dropped from the code.