Center text within region

[manuel-koch]

I'm trying to build a custom widget that looks like a gauge with a label and the current value as text.
As a starting point I looked at ProgressIndicator.go:98.

labeled_gauge.go

package main

import (
	"fmt"
	"github.com/AllenDang/giu"
	"github.com/AllenDang/imgui-go"
	"image"
	"image/color"
	"math"
)

const (
	DegToRad = 0.017453292519943295769236907684886127134428718885417 // N[Pi/180, 50]
	RadToDeg = 57.295779513082320876798154814105170332405472466564   // N[180/Pi, 50]
)

// var _ giu.Widget = &LabeledGaugeWidget{}

// LabeledGaugeWidget Renders a id and a gauge
type LabeledGaugeWidget struct {
	id     string
	width  float32
	height float32
	min    float32
	value  float32
	format string
	max    float32
}

// LabeledGauge creates LabeledGaugeWidget.
func LabeledGauge(id string, width float32, height float32) *LabeledGaugeWidget {
	return &LabeledGaugeWidget{
		id:     id,
		width:  width,
		height: height,
		min:    0,
		max:    1,
		format: "%0.1f",
	}
}

// Min Set minimum range for value
func (w *LabeledGaugeWidget) Min(min float32) *LabeledGaugeWidget {
	w.min = min
	return w
}

// Value Set value
func (w *LabeledGaugeWidget) Value(value float32) *LabeledGaugeWidget {
	w.value = value
	return w
}

// Value Set string to format value, e.g. "%0.1f%"
func (w *LabeledGaugeWidget) Format(format string) *LabeledGaugeWidget {
	w.format = format
	return w
}

// Max Set maximum range for value
func (w *LabeledGaugeWidget) Max(max float32) *LabeledGaugeWidget {
	w.max = max
	return w
}

// Build implements Widget interface.
func (w *LabeledGaugeWidget) Build() {
	child := giu.Child().Border(false).Size(w.width, w.height).Layout(
		giu.Custom(func() {
			giu.Label()
			labelWidth, labelHeight := giu.CalcTextSize(w.id)

			textFg := giu.Vec4ToRGBA(imgui.CurrentStyle().GetColor(imgui.StyleColorText))
			gaugeBg := color.RGBA{255, 200, 200, 255}
			currentFg := color.RGBA{0, 0, 0, 255}

			// Process width and height
			width, height := giu.GetAvailableRegion()
			canvas := giu.GetCanvas()
			topLeftPos := giu.GetCursorScreenPos()

			gaugeHeight := height - labelHeight
			gaugeCenterPos := topLeftPos.Add(image.Pt(0, int(labelHeight))).Add(image.Pt(int(width/2), int(gaugeHeight/2)))
			var radius float32
			if width > gaugeHeight {
				radius = gaugeHeight / 2
			} else {
				radius = width / 2
			}
			radius *= 0.8
			startAngle := 315 * DegToRad
			endAngle := 45 * DegToRad
			ratio := (w.value - w.min) / (w.max - w.min)
			valueAngle := startAngle - math.Min(1, math.Max(0, float64(ratio)))*(startAngle-endAngle)

			canvas.PathClear()
			canvas.PathArcTo(gaugeCenterPos, radius, float32(startAngle+90*DegToRad), float32(endAngle+90*DegToRad), 64)
			canvas.PathFillConvex(gaugeBg)
			canvas.PathStroke(textFg, true, 2)

			gaugeOtPt := image.Pt(
				int(float64(radius)*math.Sin(valueAngle)+float64(gaugeCenterPos.X)),
				int(float64(radius)*math.Cos(valueAngle)+float64(gaugeCenterPos.Y)),
			)
			canvas.AddLine(gaugeCenterPos, gaugeOtPt, currentFg, 2)

			labelPos := image.Pt(gaugeCenterPos.X-int(labelWidth/2), topLeftPos.Y)
			canvas.AddText(labelPos, textFg, w.id)

			valueText := fmt.Sprintf(w.format, w.value)
			valueWidth, valueHeight := giu.CalcTextSize(valueText)
			valuePos := image.Pt(gaugeCenterPos.X-int(valueWidth/2), topLeftPos.Y+int(height-valueHeight*1.1))
			canvas.AddText(valuePos, textFg, valueText)
		}),
	)
	child.Build()
}

main.go

package main

import (
	"github.com/AllenDang/giu"
)

func loop() {
	giu.SingleWindow().Layout(
		giu.Label("HUD"),
		giu.Row(
			LabeledGauge("service0", 100, 100).Min(0).Value(0).Format("%0.1f %%").Max(100),
			LabeledGauge("service25", 100, 100).Min(0).Value(25).Format("%0.1f %%").Max(100),
			LabeledGauge("service50", 100, 100).Min(0).Value(50).Format("%0.1f %%").Max(100),
			LabeledGauge("service75", 100, 100).Min(0).Value(75).Format("%0.1f %%").Max(100),
			LabeledGauge("service100", 100, 100).Min(0).Value(100).Format("%0.1f %%").Max(100),
		),
	)
}

func main() {
	wnd := giu.NewMasterWindow("Hello world", 600, 200, 0)
	wnd.Run(loop)
}

Looking at the two texts, it looks like they are not centered horizontally, but shifted slightly to the left.
It seems like the CalcTextSize() function returns wrong size of text.
Additionally the original code uses tStr() around the string that needs to be examined - but tStr is not accessible outside of giu package ( as far as I understand go ).

Any hint appreciated !

[AllenDang]

tStr is a internal method to build font altas and it has nothing to do with size calculation.
From your screen shot I can see the "serviceXX" is vertical center aligned with "80 %", the reason they looks not, is because number part of the percentage has space between % sign.
The easiest way to adjust the looking is add few spaces before number part.

[manuel-koch]

but both texts are not aligned centered with respect to the gauge ? Both text are slightly off to the left although I use the gauge center and the width of the texts to draw them - thus I would expect that texts are aligned with the center of the gauge.