Muntar un Taskbar Overlay amb dades del sistema en temps real a Windows és una d'aquelles coses que, quan les proves, ja no vols viure sense. Poder veure ús de CPU i GPU, temperatures, FPS, consum de memòria o estat general del teu equip sense haver de minimitzar un joc o una app pesada canvia completament l'experiència, tant si ets gamer com si treballes amb edició de vídeo, 3D o màquines virtuals.
A més, si el teu objectiu és crear la teva pròpia aplicació de overlay per a Windows sense arriscar baneos (per exemple, un deck tracker o un monitor de maquinari sobre jocs a pantalla completa), hauràs de combinar diverses peces: superposicions a la barra de tasques, OSD sobre Direct3D/Vulkan, panells de dades que s'actualitzen sols, lectura de comptadors del sistema i, en molts casos, integració amb eines ja madures com MSI Afterburner, RivaTu (KQL).
Què és exactament un Taskbar Overlay i com es relaciona amb els overlays en jocs?
Al món Windows solem barrejar sota el mateix paraigua de Taskbar Overlay dos conceptes que convé separar per no embolicar-se. D'una banda hi ha la superposició d'informació sobre el propi botó de la barra de tasques: petites icones sobre la icona principal, barres de progrés, miniatures amb botons, parpelleigs per a avisos… D'altra banda hi ha els overlays tipus OSD que es dibuixen sobre un joc o app a pantalla completa usant el pipeline gràfic (Direct3D, Vulkan, etc.).
A la part de barra de tasques, Windows exposa APIs com TaskbarItemInfo a WPF o les APIs de la barra de tasques Win32, i frameworks com Electron les encapsulen en mètodes d'alt nivell. Aquí pots jugar amb un icona de superposició que canviï de color quan la temperatura puja, amb barres de progrés al botó, amb JumpLists per a accessos ràpids o amb miniatures que inclouen els seus propis botons de control sense obrir la finestra principal.
El segon bloc és el d'overlays en pantalla, el que solem anomenar OSD (visualització en pantalla). És el que veus quan fas servir MSI Afterburner juntament amb RivaTuner Statistics Server: un bloc semitransparent enganxat a la imatge del joc amb FPS, frametime, càrregues de CPU/GPU, voltatges, temperatures, etc. Aquesta capa no toca ni pegat l'executable del joc; s'enganxa al flux de renderitzat de Direct3D/Vulkan per dibuixar per sobre i minimitzar el risc de banejos.
La idea potent és combinar les dues coses de manera coherent: dades detallades a la pantalla mentre jugues i un estat resumit i persistent a la barra de tasques quan el joc es minimitza o canvies de finestra. Al final es tracta de tenir una mena de “llum de salut del sistema” sempre visible, reforçada amb un panell més complet quan cal mirar fi.
APIs, frameworks i enfocaments per crear overlays sense injecció agressiva
Per desenvolupar una app d'overlay que funcioni bé en jocs a pantalla completa i no aixequi sospites d'anticheat, tens diverses rutes segons el llenguatge i l'stack. Amb C#, C++ o Go pots llençar tant d'APIs natives com de frameworks d'escriptori moderns tipus Electron o WPF.
A l'ecosistema .NET clàssic, un dels camins més nets per parlar amb la barra de tasques és utilitzar WPF i la classe TaskbarItemInfo. Aquesta classe permet establir propietats com Overlay, que admet un System.Windows.Media.ImageSource i dibuixa una petita imatge sobre la cantonada inferior dreta de la icona del programa. És ideal per mostrar un estat ràpid de sistema (verd, ambre, vermell) sense dependre de l'àrea de notificació, que a més a més en versions com Windows 7 tendeix a ocultar icones.
A apps d'escriptori basades en tecnologies web, Electró posa força fàcil el joc amb la barra de tasques de Windows. Pots crear JumpLists amb app.setUserTasks per a accions com “Iniciar monitorització” o “Canviar perfil d'overlay”, definir botons a la miniatura amb BrowserWindow.setThumbarButtons, col·locar un icona d'overlay amb BrowserWindow.setOverlayIcon i fer parpellejar el botó de la barra de tasques amb BrowserWindow.flashFrame quan alguna cosa es posa lleig a nivell tèrmic.
Si la teva obsessió és no injectar res en processos de joc, el patró sa és separar captura de dades y render de l'overlay. D'una banda, llegeixes comptadors de rendiment del sistema, logs o APIs públiques (per exemple, les de Windows Performance Counters o eines externes). De l'altra, dibuixes l'overlay com una finestra flotant always-on-top i sense vores, o mitjançant mecanismes de hooking documentats al backend gràfic, a l'estil del que fa RTSS: s'integra amb Direct3D però només per monitoritzar, no per manipular el joc.
Taskbar Overlay com a dashboard: dades en temps real ben organitzades
Si penses el teu Taskbar Overlay amb una mica de cap, en realitat no és més que un dashboard de temps real en miniatura. El mateix concepte que veus a panells de Microsoft Fabric, Azure Data Explorer o solucions basades en Kusto / KQL: un llenç compost per “tils” o icones, cadascun recolzat per una consulta a una font de dades.
En aquests sistemes, cada icona sol associar-se a una consulta KQL ia una configuració de visualització (gràfic de línies, taula, KPI, etc.). Traslladat al teu overlay, cada mètrica que vols exposar (temperatura GPU, FPS, latència, RAM usada…) es pot modelar com una consulta a un origen de dades i com una forma concreta de plasmar-la: text, color d'estat, mini-gràfic o fins i tot un simple número gran sobre la icona de la barra de tasques.
Una altra idea interessant d'aquests panells és que permeten organitzar icones en pàgines o vistes. Podries replicar-ho com a “perfils” d'overlay: una vista lleugera per jugar, una altra més carregada per a tasques d'edició, una altra centrada en diagnòstic. En molts dashboards, la definició es pot exportar a JSON, cosa que encaixa molt bé amb una app que vulgui guardar i compartir configuracions completes de mètriques, posicions i estils.
L'enfocament de dashboard porta també conceptes com a fonts de dades explícites, consultes ben delimitades, paràmetres de filtratge i polítiques d'autoactualització. Aplicat al teu overlay, això significa definir cada quant refresques els diferents grups de dades (cada segon per a FPS/temperatura, potser cada 30-60 segons per a estadístiques pesades o remotes) per evitar que el sistema s'ofega.
Activar, configurar i alimentar panells en temps real
Si t'inspires en plataformes tipus Microsoft Fabric o Azure Data Explorer, el flux típic per treballar amb panells en temps real arrenca per habilitar la funcionalitat a nivell de llogater i àrea de treball. Al portal s'activa l'opció de “Crear panells en temps real” i, a partir d'aquí, els usuaris poden definir dashboards basats en KQL i associar-los a fonts de dades dins d'un workspace concret.
Quan pots crear panells, sols definir primer les fonts de dades reutilitzables. Conceptualment no deixen de ser referències a bases de dades Kusto o similars dins del mateix espai de treball. Diverses icones poden apuntar a la mateixa font però amb consultes diferents. Al Taskbar Overlay podries tenir una font “Equip local” que parli amb comptadors del sistema, una altra “Logs de joc” per analitzar fitxers de log i potser una “Servei al núvol” per estadístiques del teu backend.
A nivell d'interfície, aquests panells solen oferir un mode d'edició des d'on afegir icones, definir consultes base reutilitzables i declarar paràmetres globals. En una altra pestanya d'administració configures fonts de dades i freqüència d'actualització, marcant límits mínims per evitar que algun il·luminat forci un refresc cada 50 ms i tombi tot.
Quan afegeixes un nou “tile”, el normal és triar l'origen de dades, escriure la consulta KQL, executar-la per veure què torna i, en funció del resultat, escollir un objecte visual associat (línia, barra, targeta de KPI, taula…). Després ajustes eixos, escales, colors, llegenda i, si escau, ocultes el títol per estalviar espai. Aquesta mateixa filosofia la pots aplicar a la manera com decideixes què entra al teu overlay i com es dibuixa a la pantalla.
Edició avançada: icones, pàgines, paràmetres i autoactualització
Una de les claus de qualsevol panell seriós és que la consulta subjacent de cada icona sigui editable. Normalment una icona inclou un petit llapis que obre un editor on veieu l'arbre de taules i funcions a l'esquerra i la pròpia query a la dreta. Avui dia moltes plataformes fins i tot integren un assistent tipus Copilot, a qui descrius el que vols veure i et genera una consulta inicial que després retoques.
Per no tenir un “cementiri de números”, els panells permeten agrupar tils a pàgines temàtiques. Pots copiar aquesta idea com a perfils o vistes dins del teu overlay: maquinari davant de xarxa, vista ràpida davant de detallada, usuari bàsic davant d'avançat. Fins i tot podries muntar fluxos mestre-detall: un estat general del PC que, en clicar, obri una vista de detall sobre CPU o GPU.
Els paràmetres compartits són un altre truc molt útil. A dashboards es fan servir per reduir el volum de dades com més aviat millor: per exemple, un paràmetre d'interval temporal, o l'identificador d'una màquina o procés. Al teu overlay, podries modelar paràmetres com “interval de refresc”, “joc actiu” o “perfil de consum” i fer que diverses parts del sistema reaccionin en cadena en canviar-los.
Pel que fa a l'experiència d'usuari, se solen afegir llegendes interactives que permeten activar/desactivar sèries de dades amb clic, combinar-les amb CTRL per a selecció múltiple, fer servir SHIFT per a rangs, etc. Encara que el teu Taskbar Overlay no hagi de tenir gràfics complexos, la idea de poder amagar o atenuar mètriques individuals amb dreceres o clics és molt traslladable.
L'autoactualització és la peça que ho uneix tot: cada panell defineix un interval mínim i una freqüència per defecte. El mínim actua com a fre global (per exemple, no es permet refrescar més ràpid de cada 30 segons) i després cada usuari pot triar, dins aquest rang, anar més ràpid o més lent. Al teu overlay et convé separar molt bé el que necessita refresc ultraràpid (FPS, temperatura) del que pot anar amb calma (estadístiques acumulades, mitges, etc.).
Exportar configuració d'overlays i panells a JSON
Una altra característica interessant dels panells de monitoratge moderns és que tota la seva configuració es pot exportar a JSON. En aquest fitxer queda descrit el títol del panell, les pàgines, el llistat de til·lers amb els seus IDs, consultes, posicions, paràmetres, tipus de visualització i la configuració d'auto-refresh. També s'hi inclouen les fonts de dades i l'esquema d'aquest JSON.
Això permet utilitzar aquests fitxers com plantilles i còpies de seguretat, versionar-los a Git i fins i tot editar-los a mà per fer canvis massius. Les plataformes solen permetre reemplaçar des d'arxiu per restaurar un panell complet a partir d'un JSON anterior. Si extrapoleu aquesta idea, el vostre Taskbar Overlay podria desar i carregar perfils complets de mètriques, estils i posicions en JSON, compartibles entre usuaris o entre equips.
Integració detallada amb la barra de tasques a Electron
si tries Electron com a base per al teu overlay, tens a mà un conjunt força complet d'APIs específiques de la barra de tasques de Windows, a més d'altres multiplataforma. Les JumpLists, per exemple, són les llistes que apareixen en fer clic dret a la icona de l'app. Amb app.setUserTasks podeu definir accessos a tasques freqüents que no depenen de l'estat actual de la finestra, com ara iniciar o pausar la monitorització, obrir un panell de rendiment o canviar de perfil d'overlay.
Una altra peça útil és la thumbnail toolbar, una barra de fins a set botons que apareix sobre la miniatura de la finestra quan passes el ratolí per la icona de la barra de tasques. Mitjançant BrowserWindow.setThumbarButtons podries exposar botons per pausar l'overlay, canviar entre vistes lleugera/avançada o resetejar estadístiques, sense necessitat d'obrir el panell principal.
Per indicar l'estat d'una ullada, BrowserWindow.setOverlayIcon et deixa col·locar una petita imatge sobre la icona de l'app, idèntica al concepte de WPF. És perfecte per a un semàfor global de salut del sistema: icona verda quan tot està en paràmetres normals, groc quan alguna mètrica entra a zona d'avís i vermell quan hi ha temperatures crítiques, throttling o ús extrem.
Finalment, amb BrowserWindow.flashFrame pots fer parpellejar el botó de la barra de tasques quan passa una cosa greu: per exemple, si la CPU toca el 100% sostingut o si la GPU es dispara de temperatura amb el joc minimitzat. Això sí, convé trucar a flashFrame(false) quan la finestra recuperi el focus o després d'un temps raonable per no convertir la teva app en una molèstia constant.
Integració tipus WPF: propietat Overlay de TaskbarItemInfo
En entorns .NET amb C# i WPF, el mecanisme estrella per a l'overlay a la icona és la classe TaskbarItemInfo. Aquesta classe exposa la propietat Overlay, de tipus System.Windows.Media.ImageSource, que defineix la imatge que es mostrarà superposada sobre la icona del programa a la barra de tasques. Per defecte és null, el que significa que no hi ha cap overlay.
A XAML pots declarar la configuració directament dins de <Window.TaskbarItemInfo>, instant un TaskbarItemInfo amb nom i assignant la imatge de overlay com recurs estàtic. A més, tens propietats com ThumbnailClipMargin per ajustar la retallada de la miniatura i Descripció per millorar l'accessibilitat i descripció del botó de la barra de tasques.
Si prefereixes fer-ho a C#, n'hi ha prou que recuperis un recurs d'imatge (per exemple, un DrawingImage) mitjançant FindResource i ho assignis a taskBarItemInfo1.Overlay. El resultat és una petita imatge, estàtica o animada, situada sobre la cantonada inferior dreta de la icona, que adopta la mida correcta i respecta la profunditat de color si es basa en un objecte Icon. L'única limitació important és que la superposició no es mostra si l'usuari ha configurat la barra de tasques amb petites icones.
Tot això neix d'un problema molt concret: en versions com Windows 7, les icones de l'àrea de notificació solen ser-hi ocults per defecte, així que utilitzar únicament la safata per comunicar estat es queda curt. Els overlays al botó de la barra de tasques eviten aquest problema i garanteixen que els canvis d'estat crítics es vegin, encara que la icona de la safata estigui plegada.
Monitoritzar el PC en temps real amb MSI Afterburner i RivaTuner
Per treure dades de maquinari fiables en temps real, pocs combos estan tan provats com MSI Afterburner amb RivaTuner Statistics Server (RTSS). Afterburner va néixer com a eina d'overclock per a GPU, però avui dia és un monitor molt complet que recull dades de sensors de CPU, GPU i altres components, i s'integra amb RTSS per pintar-los a sobre de jocs i aplicacions 3D.
L'avantatge principal d'aquest duet és que permet configurar un OSD detallat dins de jocs a pantalla completa sense haver de minimitzar ni mirar eines externes. Pots mostrar ús i freqüència de CPU/GPU, temperatures, consum, voltatges, FPS, frametime, ús de RAM i VRAM i força més, amb opcions de text, gràfics i estils de color personalitzables.
A més, Afterburner pot recolzar-se en proveïdors com HWiNFO64, HWMonitor o AIDA64 per ampliar brutalment la quantitat de sensors disponibles. I ho fa amb un consum de recursos molt contingut, una cosa crucial si estàs monitoritzant mentre jugues o treballes amb programari pesat.
Instal·lació i configuració bàsica del combo Afterburner + RTSS
La posada en marxa és força directa sempre que descarreguis MSI Afterburner des de la seva web oficial per evitar versions modificades o amb codi maliciós (malware). L'instal·lador sol venir empaquetat al costat de RivaTuner Statistics Server, i és recomanable marcar la casella per instal·lar RTSS en el mateix procés i, abans de res, revisar un checklist essencial de maquinari per assegurar màxima compatibilitat.
Després de la instal·lació, obris Afterburner i entres al menú de propietats (icona de l'engranatge). A la pestanya General és clau revisar les opcions de compatibilitat perquè pugui parlar correctament amb el sistema i amb RTSS. Després, a la pestanya de Monitorització, tries el període de refresc (per exemple, 1000 ms per actualitzar cada segon), selecciones quins sensors vols seguir i decideixes si cadascun es mostrarà a la pantalla (OSD), a l'àrea de notificació oa dispositius externs tipus teclats amb LCD.
En marcar “mostrar informació en pantalla”, indiques que aquesta mètrica apareixerà a l'overlay dins del joc. Per a dades com FPS o frametime sol ser útil activar la representació en forma de gràfic més text, mentre que per a temperatures o ús de CPU/GPU amb text sol ser suficient. També pots ajustar els límits dels gràfics (Graph limits) perquè les escales siguin coherents i no s'aixafi la informació.
Ajust fi de l'OSD a RivaTuner i perfils per joc
Tot i que gran part de la selecció de mètriques es fa des d'Afterburner, la configuració fina de l'overlay (posició, aspecte, detecció d'aplicacions 3D, etc.) es fa dins RivaTuner Statistics Server. RTSS sol iniciar-se minimitzat a l'àrea de notificació, des d'on pots obrir la interfície principal.
A RTSS convé començar assegurant que Mostra la visualització en pantalla està activat, perquè altrament no veuràs absolutament res en els jocs. L'opció Nivell de detecció d'aplicacions controla com és d'agressiu RTSS en identificar programes que han de rebre overlay; l'habitual és deixar-ho a “Low” per evitar overlays indesitjats en apps no gràfiques. Maneres Medium o High es reserven per a casos where l'overlay no apareix en certs jocs i necessites forçar-ho.
Altres opcions com “Stealth mode” o “Custom Direct3D support” es recomanen deixar desactivades llevat que tinguis problemes amb jocs concrets. “Framerate limit” et permet fixar un límit de FPS des de RTSS, útil per estalviar consum o adaptar-te a monitors de 60 Hz, encara que sovint surt més a compte limitar des del propi joc o des del driver de la GPU.
La interfície de RTSS inclou unes fletxes per moure el overlay per la pantalla, de manera que no tapi HUDs importants. Pots configurar perfils per aplicació, de manera que cada joc tingui les seves posicions i conjunt de mètriques: en un potser necessites veure temperatura i FPS, en un altre t'interessa més el frametime i l'ús de VRAM. Aquesta flexibilitat és un bon referent del que convé oferir al teu Taskbar Overlay propi.
Una configuració molt pràctica sol ser mostrar sempre temperatura i càrrega de GPU, temperatura i consum de CPU i els FPS. Amb aquest combo ja tens una lectura ràpida de si el coll dʻampolla és tèrmic, de CPU o de GPU. Si vols anar un pas més enllà, afegeix ús de RAM i VRAM, i un gràfic de frametime per caçar estirades que no es veuen a la mitjana de FPS.
Estendre el overlay al mòbil: segona pantalla per a mètriques
Un inconvenient de tenir un overlay a la pantalla és que pot resultar molest si fas moltes captures o graves vídeos i vols una imatge neta. Una alternativa molt interessant és delegar part de la monitorització a una segona pantalla externa barata, com un mòbil vell, deixant el joc lliure d'elements extra.
Aplicacions com Pitikap s'integren amb MSI Afterburner: instal·les el component al PC i l'app mòbil (Android o iOS), comproves que tots dos dispositius estan a la mateixa xarxa Wi‑Fi i els enllaçes. A partir d'aquí podeu afegir mòduls d'informació al client de Windows i veure'ls com ginys personalitzables al telèfon, ajustant colors, mides i disposició segons com tinguis col·locat el dispositiu.
Aquest enfocament encaixa molt bé amb la idea d'un sistema d'overlay complet: algunes dades les podeu veure a la barra de tareas, altres en un OSD dins del joc i altres en un panell extern dedicat que no embruta la imatge. Tot orquestrat com si fossin diverses vistes d'un mateix dashboard de temps real.
Combinant les APIs de Windows per a la barra de tasques (TaskbarItemInfo, Win32), els frameworks de finestra com Electron o WPF, el model mental de dashboards basats en consultes KQL i eines consolidades com MSI Afterburner i RivaTuner, pots construir un sistema de Taskbar Overlay molt complet. Tindràs mètriques fiables en temps real, configurables via JSON, amb perfils, pàgines i paràmetres, ia més sense recórrer a injeccions invasives ni ficar-te a jardins amb anticheats, que és just el que busques quan vols monitoritzar sense convertir-te en sospitós. Comparteix aquesta informació perquè més usuaris sàpiguen sobre Taskbar Overlay.