惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 叶小钗
Last Week in AI
Last Week in AI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
雷峰网
雷峰网
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
N
Netflix TechBlog - Medium
博客园 - 聂微东
Y
Y Combinator Blog
罗磊的独立博客
博客园_首页
小众软件
小众软件
有赞技术团队
有赞技术团队
爱范儿
爱范儿
F
Fortinet All Blogs
C
Check Point Blog
Google DeepMind News
Google DeepMind News
云风的 BLOG
云风的 BLOG
Apple Machine Learning Research
Apple Machine Learning Research
M
MIT News - Artificial intelligence
月光博客
月光博客
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 司徒正美
aimingoo的专栏
aimingoo的专栏

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I ported my live FIFA World Cup 2026 desktop widget to Wi...
AlexDesign420 · 2026-05-30 · via DEV Community

AlexDesign420

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])

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())

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)

document.body.style.backgroundImage =
  `url("${SERVER_URL}/api/wallpaper_image?u=${encodeURIComponent(state.wallpaper)}")`;

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)

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)})"

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)

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

git clone https://github.com/AlexDesign420/wm2026-widget-windows.git
cd wm2026-widget-windows
powershell -ExecutionPolicy Bypass -File .\install.ps1

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.