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

Simple Traffic-Light Carbon Intensity Buttons

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

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

<a href=https://www.earth.org.uk/_gridCarbonIntensityGB.html><img src=https://www.earth.org.uk/out/hourly/button/intico1-32.png width=32 height=32 loading=lazy title="live GB grid intensity gCO2/kWh" alt="live GB grid intensity gCO2/kWh"></a>

64x64 Pixel Intensity Button/Widget

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

<a href=https://www.earth.org.uk/_gridCarbonIntensityGB.html><img src=https://www.earth.org.uk/out/hourly/button/intico1-64.png width=64 height=64 loading=lazy title="live GB grid intensity gCO2/kWh" alt="live GB grid intensity gCO2/kWh"></a>

AMPable

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:

• _gridCarbonIntensityGB.flag for 'green'
• _gridCarbonIntensityGB.supergreen.flag for 'green' and no draw on storage

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!