Open Hardware Monitor Gauges

Temperature, CPU, and RAM gauges for Open Hardware Monitor.

NOTE: This sketch will not as-is here on my website. You will need to install Open Hardware Monitor on your computer, copy the sketch code to your own computer and run it from localhost so it can access the Open Hardware Monitor API running on your computer.

Source Code for this Sketch

let gauges = []
let dataz = {
	all : {},
	cpu: 0,
	cpuPercent: 0,
	ram: 0,
	ramPercent: 0,
	temp: 0,
	gpu: 0,
	gpuPercent: 0,
	gpuTemp: 0,
}

function fetchMetrics() {
	httpGet("http://localhost:8086/data.json", "json", false).
	then((res) => {
		dataz.all = res

		// CPU load
		dataz.cpuPercent = parseFloat(dataz.all.Children[0].Children[1].Children[2].Children[0].Value.slice(0, -2))
		gauges[0].percent = dataz.cpuPercent

		// CPU temp
		dataz.temp = parseFloat(dataz.all.Children[0].Children[1].Children[1].Children[0].Value.slice(0, -3))
		gauges[1].percent = dataz.temp

		// CPU speed (taken from core 1)
		dataz.cpu =  dataz.all.Children[0].Children[1].Children[0].Children[1].Value
		gauges[0].sublabel = dataz.cpu

		// RAM percent
		dataz.ramPercent = parseFloat(dataz.all.Children[0].Children[2].Children[0].Children[0].Value.slice(0, -2))
		gauges[2].percent = dataz.ramPercent

		// RAM amount
		dataz.ram = dataz.all.Children[0].Children[2].Children[1].Children[2].Value
		gauges[2].sublabel = dataz.ram

		// GPU core speed
		dataz.gpu = dataz.all.Children[0].Children[3].Children[0].Children[0].Value
		gauges[3].sublabel = dataz.gpu

		// GPU temp
		dataz.gpuTemp = parseFloat(dataz.all.Children[0].Children[3].Children[1].Children[0].Value.slice(0, -3))
		gauges[4].percent = dataz.gpuTemp

		// GPU percent
		dataz.gpuPercent = parseFloat(dataz.all.Children[0].Children[3].Children[2].Children[0].Value.slice(0, -2))
		gauges[3].percent = dataz.gpuPercent
	}).catch((err) => {
		console.error(err)
	})
}

class Gauge {
	static smearFrames = 55

	constructor(x,y, label) {
		this.x = x
		this.y = y
		this._percent = 0
		this.previous = 0
		this.frames = 0
		this.label = label
		this.sublabel = ""
		this.unit = "%"
	}

	set percent(value) {
		this._percent = value
		this.frames = Gauge.smearFrames
	}

	get percent() {
		return this._percent
	}

	update() {}

	draw() {
		noStroke()

		// Full dial
		fill(0, 0, 50)
		arc(this.x+50, this.y+50, 98, 98, 135, 45)

		// Current value
		let currentPercent = this.percent
		if(this.frames > 0) {
			currentPercent = lerp(this.previous, this.percent, (Gauge.smearFrames-this.frames)/Gauge.smearFrames)
		}

		if (this.label === "CPU") {
			console.log("previous", this.previous, "target", this.percent, "current", currentPercent)
		}

		if (this.percent > 0) {
			fill(200-(200*currentPercent/100), 100, 50)
			arc(this.x+50, this.y+50, 100, 100, 135, 45-(270*(100-currentPercent)/100))
		}

		// "Hollow out" the center of the gauge
		fill(100)
		circle(this.x+50, this.y+50, 50)

		// Text color
		fill(0)

		// Unit display
		text(`${currentPercent.toFixed(1)}${this.unit}`, this.x+50, this.y+54)

		// Label
		text(this.label, this.x+50, this.y+100)

		// Sublabel
		if (this.sublabel !== "") {
			text(this.sublabel, this.x+50, this.y+120)
		}

		if(this.frames > 0) {
			this.frames--
		} else {
			this.previous = this.percent
		}
	}
}

function setup() {
	createCanvas(800, 200, P2D, canvas)
	chrisDefaults()
	textAlign(CENTER)


	let cpuGauge = new Gauge(50, 50, "CPU")
	gauges.push(cpuGauge)

	let tempGauge = new Gauge(200, 50, "CPU Temp")
	tempGauge.unit = " °C"
	tempGauge.update = () => {
		return dataz.temp
	}
	gauges.push(tempGauge)

	let ramGauge = new Gauge(350, 50, "RAM")
	ramGauge.update = () => {
		return dataz.ramPercent
	}
	gauges.push(ramGauge)

	let gpuGauge = new Gauge(500, 50, "GPU")
	gpuGauge.update = () => {
		return dataz.gpuPercent
	}
	gauges.push(gpuGauge)

	let gpuTemp = new Gauge(650, 50, "GPU Temp")
	gpuTemp.unit = " °C"
	gpuTemp.update = () => {
		return dataz.gpuTemp
	}
	gauges.push(gpuTemp)

	window.setInterval(() => {
		fetchMetrics()
	}, 1000)
}

function draw() {
	background(100)
	gauges.forEach((gauge) => {
		gauge.draw()
	})
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches