Friday, February 7, 2014

How to monitor your PC's hardware inside Steam games using OpenHardwareMonitor (and how to set up an alternative web GUI for OHM)

If you use Steam, the popular gaming platform by Valve, you probably know Steam Overlay, the feature that allows you to open, through a keyboard shortcut (as default, Shift+Tab), an overlay interface useful to chat with steam friends, view screenshots, etc. while you are playing full screen games.
I noticed that it would be very useful to monitor the hardware status (parameters like CPU and RAM usage, temperatures, etc.) in this panel to see how much the computer uses resources to run games. Fortunately, this is possible because a)Valve provides a in-game browser (probably designed for social networking, chatting, etc.), and b)there are hardware monitoring tools that includes an internal web server, thought for remote monitoring. I found, for example a simple but very useful program, free and open source, called OpenHardwareMonitor.

So, the solution is very simple:
  • Download OpenHardwareMonitor from here and unpack it to a folder (it doesn't require installation, just unzip & run)
  • Before starting a game, run the program (to access some sensors, you may have to do it with administrator rights), then go to Options > Remote web server > Run. Now the server is listening on the dafault port (you can change it in Options > Remote web server > Port).
  • Launch the game.
  • When you want to monitor the system's performances open Steam Overlay (the default shurtcut is Shift+Tab), then click on Web Browser and, in the addres bar, type http://localhost:8085 (remember the http://, the Steam browser, unlinke the normal modern browsers, isn't so clever to understand the protocol automatically).
  • Now, to switch between game and performance monitoring, just use Shift+Tab (or the shurtcut you set if you changed it).
  • When you finish gaming, remember to close OpenHardWareMonitor (you can leave the server on, so the next time you run the program it will start automatically).
The OpenHardwareMonitor built-in web GUI shown in Steam Overlay's web browser while me playing Dota 2

But, as you can see from the screenshot, this GUI isn't very intuitive; if you need to monitor only a few parameters, follow these additional steps to set up an alternative cool web interface using a bit of HTML, CSS and JS. This will be the result:
My custom OpenHardwareMonitor web GUI.

  • Download the archive that I prepared from here. It contains an HTML page that is the custom GUI, and a very simple webserver written as a Windows PowerShell Script (based on this) that answers the request of the index page with my HTML page and redirects any other requests (scripts and especially JSON data requests) to the OpenHardwareMonitor built-in webserver.
  • Unzip all in the same folder where you unzipped OpenHardwareMonitor.
  • Actually, you have all the necessary files, but the custom web GUI isn't ready to work, because OpenHardwareMonitor identifies each sensor with an ID and probably (almost securely) the IDs of your system's sensors does not correspond to mine. To "calibrate" the interface, open CustomGUI.html with a text editor (for example Notepad), scroll down a bit and you will find some comments in the javascript code that shows you the parts of code you need to edit. Precisely, it's from line 33 to line 44. In each of this lines, you need to change the sensor's IDs (the second parameter passed to the function search) with your own sensor's IDs. To discover it, start the OpenHardwareMonitor webserver and navigate with your browser to http://localhost:8085/data.json): you will see a big amount of lines of code that seems incomprehensible (the server doesn't indent JSON, probably for compression), but don't worry: you just need to do a bit of searches in this document. Press CTRL+F and, for each sensor, type the name displayed in OpenHardwareMonitor and find the respective ID, as you can see by this example:
    Example of how to find a sensor
    Copy each ID in the corresponding place in the javascript and you are done.
  • Another little step: before starting the Powershell script that contains the server, the first time, you need to run the following command from an administrator prompt to authorize the port (Start > type cmd > right click > run as administrator), obviously replacing you Windows username:
    netsh http add urlacl url=http://+:8086/ user=YOUR-USERNAME
  • Now you can run the server simply by launching Launcher.bat. If the first time you get errors, try rebooting your PC. Each time you want to run the webserver launch this script; it automatically launches OpenHardwareMonitor too, so if you leave it's built-in webserver on you don't need any other action. To stop the server, just close the command prompt.
If you have problems or suggestions, leave a comment. See you at the next post!


  1. Intend to have a crack at this this week. I have an old tablet that I hope to use as a separate system monitot. Nzxt Cam and Android Remote System Monitor just don't cut it for me.

  2. Nice idea, I originally thought about this method for Steam Overlay but it should work with devices like smartphones and tablets as well. You might need to open the correct port in the firewall if it doesn't work with default settings. Let me know if it works ;)

  3. Will do. The standard ohw page works after opening the port, but the page filters reset when the server starts after a reboot.

  4. The standard ohw page works after opening the port, but the page filters reset when the server starts after a reboot.

    I'll feed back if I get this done (most of the road to heck is paved with my good intentions)

  5. Woohoo! Not bad for an hour's work!

    Windows 10 permissions wouldn't let me run the powershell script, so had to change the batch file to:

    powershell -ExecutionPolicy Bypass -File ./CustomGUI.ps1

    I've also messed with the html a little to cut out some sensors I didn't need and put it into a more tablet friendly format.

    This is now going to be my pet project lol - a great way to teach myself html/css!

    Next stop, conditional formatting and tachometers!

    Thanks Gianluca

  6. Oh, and just for info I did have to open the port in win firewall.

  7. Hi, Thanks for your great post, there are much nice
    information that I am sure a huge number of guys and gals don’t know.
    [mod]link removed[/mod]

  8. Thank you for sharing your experience. It's a very nice setup, this way is possible to keep an eye on system status without Shift-Tabbing each time!

  9. No, thank you!

    This was something I've been trying to do for a while. Off the peg solutions are either not customisable enough or consume too much resource.

    Plus you've inspired me to get my hands dirty with something other than SQL (my day job).

  10. Okay, thanks for the comment and sorry for the edit but my blog isn't an advertisement board.