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!