Projects

Live Window Image Generator

Generate a live window SVG with semi-accurate sky color and weather for any location

Published March 15, 2024 | Updated March 17, 2024

Screenshot 2025-07-02 at 22.04.40.png

Links
Github →API Docs →

Usage

Embed the image into your HTML or Markdown Document:

<img src="https://livewindow-api.onrender.com/api/" />

API Options

ParameterDescriptionOptionsDefault
unitsTemperature unitsimperial (°F), metric (°C), standard (K)metric
langDescription languageaf, al, ar, az, bg, ca, cz, da, de, el, en, eu, fa, fi, fr, gl, he, hi, hr, hu, id, it, ja, kr, la, lt, mk, no, nl, pl, pt, pt_br, ro, ru, sv, se, sk, sl, sp, es, sr, th, tr, ua, uk, vi, zh_cn, zh_tw, zuen
locationLocation latitude and longitude coordinatesAny lat,lng40.7128,-74.0060 (New York City)

Examples

WindowAPI Request
New York, USA (°F)
https://livewindow-api.onrender.com/api/?location=40.7128,-74.0060&units=imperial
Port of Spain, Trinidad & Tobago (°C)
https://live-window.tunl.sh/api/?location=10.6603,-61.5086
Paris, France (K)
https://live-window.tunl.sh/api/?units=standard&location=48.8566,2.3522&lang=fr

FAQs

How do I find my lat, long coordinates?

You can use this tool to find your coordinates: https://www.latlong.net/convert-address-to-lat-long.html

How do you embed the custom font?

In order for the custom font to show when the image is downloaded or included in Github Markdown, the font needs to be encoded directly into the styles. Note: You can generate the base 64 encoding for any font here: https://amio.github.io/embedded-google-fonts/

<svg>
<!-- Insert SVG Elements -->
<defs>
<style>
@font-face {{
font-family: 'Bebas Neue';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(data:font/woff2;[INSERT BASE64 ENCODING]) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}}
</style>
</defs>
</svg>

Ideas, Improvements, and Iterations

  • Support any google font
  • Support hiding location and/or current weather

How It’s Made

Frameworks, Tools, and Services

Credits