Progress bars can show the percentage on top

The percentage (rounded down, in the element's font) is centred inside the
bar and its dots invert the bar, so it reads on the filled and the empty
part. It uses the bar's unused format and font fields, so the page format
stays the same. The Bad page shows it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/esp32/logic/page.cpp

@@ -150,6 +150,8 @@ static uint8_t formatCount(const PageElement &e)
 		return COUNTDOWN_FORMAT_COUNT;
 	case ElementType::Stopwatch:
 		return STOPWATCH_FORMAT_COUNT;
+	case ElementType::Bar:
+		return BAR_FORMAT_COUNT;
 	default:
 		return 255; // not used
 	}
@@ -788,6 +790,20 @@ int barFill(const PageElement &e, const char *ha_value, int fill_width)
 	return n;
 }
 
+void barPercent(const PageElement &e, const char *ha_value, char *out, size_t size)
+{
+	double v;
+	if (!ha_value || !parseNumber(ha_value, v))
+	{
+		snprintf(out, size, "--");
+		return;
+	}
+	double percent = v * e.factor / e.bar_max * 100;
+	// Rounded down, so 100% only shows when the bar is full; + 1e-9 keeps 0.29 x 100 at 29
+	int n = !(percent > 0) ? 0 : percent >= 100 ? 100 : (int)(percent + 1e-9);
+	snprintf(out, size, "%d%%", n);
+}
+
 bool elementShowsSeconds(const PageElement &e, const LocalTime &t, bool stopwatch_running)
 {
 	switch (e.type)