devLap

I ported my live FIFA World Cup 2026 desktop widget to Windows

python dev.to

A while back I open-sourced a macOS desktop widget for the FIFA World Cup 2026. The question I got most was "when Windows?" — so I ported it. Here's what changed moving from macOS/Übersicht to Windows/Lively Wallpaper, and the four OS-specific seams that took most of the work.

What it does

  • 🔴 Live scores — updated every 3 seconds via the ESPN public API (no API key needed)
  • 📅 Full schedule — all 104 games grouped by day, with venues and round labels
  • 📻 20+ radio streams — ARD, ZDF, BBC, NPR and more, played via mpv
  • 🗣 German TTS commentary — Windows System.Speech announces goals, kick-offs and final whistles
  • 📊 Play-by-play — ESPN event feed with goal / card / substitution highlights
  • 📺 Live ticker panel — slide-out side panel with real-time scores for all live games
  • ⏳ Countdown — days · hours · minutes until kick-off (June 11, 2026)
  • 🖼 Wallpaper overlay — adopts the current Windows wallpaper as its background
  • 🖥 Responsive — adapts width for 1440p · 1080p · 2560p · 4K displays

Why Lively Wallpaper

macOS has Übersicht for rendering widgets straight onto the desktop. Windows has no direct equivalent — but Lively Wallpaper can run an HTML/JS "web wallpaper", which is basically a full Chromium (CEF) page living on your desktop. Perfect: I rewrote the Übersicht JSX as a plain HTML + vanilla-JS widget and let Lively host it.

The Flask backend stayed almost identical — same ESPN API, same mpv playback, same kicker.de scraping. Almost all the porting effort went into the four platform seams below.

1. Text-to-speech: say → System.Speech

macOS gives you say -v Anna. On Windows I drive the built-in System.Speech synthesizer through PowerShell, picking the first installed German voice:

script = (
    "Add-Type -AssemblyName System.Speech; "
    "$s = New-Object System.Speech.Synthesis.SpeechSynthesizer; "
    "$v = $s.GetInstalledVoices() | ForEach-Object {$_.VoiceInfo} | "
    "Where-Object { $_.Culture.Name -like 'de*' } | Select-Object -First 1; "
    "if ($v) { $s.SelectVoice($v.Name) }; "
    f"$s.Speak({_ps_quote(text)})"
)
subprocess.Popen(["powershell", "-NoProfile", "-Command", script])
Enter fullscreen mode Exit fullscreen mode

2. mpv IPC: Unix socket → named pipe

The macOS build talks to mpv over a Unix domain socket. On Windows that becomes a named pipe:

MPV_PIPE = r"\\.\pipe\mpv-wm2026"
# mpv launched with: --input-ipc-server=\\.\pipe\mpv-wm2026

def _send_pipe_command(cmd_list):
    with open(MPV_PIPE, "r+b", buffering=0) as pipe:
        pipe.write((json.dumps({"command": cmd_list}) + "\n").encode())
        return json.loads(pipe.readline().decode().strip())
Enter fullscreen mode Exit fullscreen mode

3. The wallpaper overlay gotcha

I wanted the widget to blend into the desktop, so it reads the current wallpaper via SystemParametersInfoW and uses it as the background. First attempt: set it as a file:// background-image. It silently failed — Lively's CEF sandbox blocks file:// access from the widget origin.

The fix: serve the wallpaper through the Flask server, so the widget loads it over plain HTTP instead:

@app.route("/api/wallpaper_image")
def api_wallpaper_image():
    path = get_wallpaper_path()
    if not path or not os.path.exists(path):
        return ("", 404)
    return send_file(path)
Enter fullscreen mode Exit fullscreen mode 
document.body.style.backgroundImage =
  `url("${SERVER_URL}/api/wallpaper_image?u=${encodeURIComponent(state.wallpaper)}")`;
Enter fullscreen mode Exit fullscreen mode

The ?u= cache-buster makes the background reload automatically when you change your wallpaper.

4. Desktop icon shift: AppleScript → Windows Shell API

When the ticker panel slides open, the widget can push your desktop icons aside. On macOS that's a few lines of AppleScript against Finder. On Windows there's no scripting shortcut — you talk to the Shell's folder view over COM (via pywin32):

for index in range(folder_view.ItemCount(shellcon.SVGIO_ALLVIEW)):
    item = folder_view.Item(index)
    name = shell_folder.GetDisplayNameOf(item, shellcon.SHGDN_NORMAL)
    if name in targets:
        folder_view.SelectAndPositionItem(item, (x, y), shellcon.SVSI_POSITIONITEM)
Enter fullscreen mode Exit fullscreen mode

One catch: Auto arrange icons and Align icons to grid must be off, or Windows snaps everything back.

A vanilla-JS gotcha

Without JSX doing the work for me, I rebuilt the render layer as template-literal strings — and left a classic bug in a click handler:

// inside a `...` template literal — NOT evaluated, ships as literal text:
onclick="WM2026.setVolume(' + Math.max(0, vol - 10) + ')"

// correct:
onclick="WM2026.setVolume(${Math.max(0, vol - 10)})"
Enter fullscreen mode Exit fullscreen mode

The first version rendered the ' + ... + ' verbatim into the attribute, so the volume buttons quietly passed a string to setVolume. Easy to miss when you're not used to hand-writing the interpolation.

Architecture 

widget/  (Lively web wallpaper)  — index.html · app.js · styles.css
  └─ fetch() every 3s → Flask server (127.0.0.1:9876)
       ├─ data loop  → ESPN API → today / schedule / ticker.json
       ├─ engine.py  → goal detection + Windows TTS
       ├─ /api/play  → mpv (named-pipe IPC)
       ├─ /api/wallpaper_image → desktop wallpaper as overlay background
       └─ /api/shift → move desktop icons (Windows Shell API)
Enter fullscreen mode Exit fullscreen mode

Tech stack

Layer Tool
Widget host Lively Wallpaper — HTML/JS web wallpaper
Frontend Vanilla JS + CSS (no build step)
Backend Python 3 + Flask on 127.0.0.1:9876
Scores & schedule ESPN public API — no key
Audio mpv via named-pipe IPC
TTS Windows System.Speech (PowerShell)
Desktop icons Windows Shell folder-view API (pywin32)
Scraping BeautifulSoup (kicker.de)

Quick start 

gitclonehttps://github.com/AlexDesign420/wm2026-widget-windows.gitcdwm2026-widget-windowspowershell-ExecutionPolicyBypass-File.\install.ps1
Enter fullscreen mode Exit fullscreen mode

Then import the widget folder into Lively and run start_server.bat.

Requires: Windows 10/11, Lively Wallpaper, Python 3.10+, mpv.

GitHub

Would love feedback — especially from anyone who's wrangled Lively's CEF sandbox or the Shell folder-view COM API before.

Source: dev.to

arrow_back Back to Tutorials