Add global show_label_background setting with UI control

config.example.json

@@ -3,6 +3,7 @@
   "log_level": "info",
   "default_page": "main",
   "font": "medium",
+  "show_label_background": true,
   "devices": [
     {
       "serial": "",

daemon.go

@@ -57,6 +57,7 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
 	for i, d := range decks {
 		pageMgrs[i] = NewPageManager(d)
 		pageMgrs[i].defaultFont = cfg.Font
+		pageMgrs[i].showLabelBackground = cfg.ShowLabelBackground
 		pageMgrs[i].LoadPages(cfg.Pages)
 	}
 	primaryPM := pageMgrs[0]
@@ -230,6 +231,7 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
 				activePages = append(activePages, pm.ActivePageName())
 				pm.stopPeriodicKeys()
 				pm.defaultFont = cfg.Font
+				pm.showLabelBackground = cfg.ShowLabelBackground
 				pm.LoadPages(cfg.Pages)
 			}
 				ge.ReloadTiming(cfg.Timing.LongPressMs, cfg.Timing.DoubleTapMs)
@@ -315,6 +317,7 @@ func reconnectDeck(ctx context.Context, cfg *config.Config, pm **PageManager, as
 		if err == nil {
 			*pm = NewPageManager(newDeck)
 			(*pm).defaultFont = cfg.Font
+			(*pm).showLabelBackground = cfg.ShowLabelBackground
 			(*pm).LoadPages(cfg.Pages)
 			(*pm).ActivatePage(cfg.DefaultPage)
 			(*pm).startPeriodicKeys()

internal/config/config.go

@@ -15,6 +15,7 @@ type Config struct {
 	LogLevel             string         `json:"log_level"`
 	DefaultPage          string         `json:"default_page"`
 	Font                 string         `json:"font,omitempty"`
+	ShowLabelBackground  bool           `json:"show_label_background"`
 	Devices              []DeviceConfig `json:"devices"`
 	Pages                []PageConfig   `json:"pages"`
 	AutoSwitch           []SwitchRule   `json:"auto_switch"`
@@ -116,6 +117,7 @@ func DefaultConfig() *Config {
 		Version:             1,
 		LogLevel:            "info",
 		DefaultPage:         "default",
+		ShowLabelBackground: true,
 		Pages: []PageConfig{
 			{
 				Name: "default",

render.go

@@ -13,7 +13,7 @@ import (
 	"streamdeck-lets-go/internal/config"
 )
 
-func RenderKeyToImage(k *config.KeyConfig, keySize int) image.Image {
+func RenderKeyToImage(k *config.KeyConfig, keySize int, showLabelBackground bool) image.Image {
 	if k == nil {
 		return blankImage(keySize, color.RGBA{0, 0, 0, 255})
 	}
@@ -46,7 +46,7 @@ func RenderKeyToImage(k *config.KeyConfig, keySize int) image.Image {
 			if k.FontSize != nil {
 				fontSize = *k.FontSize
 			}
-			return composeImageWithLabel(img, k.Label, keySize, fontSize)
+			return composeImageWithLabel(img, k.Label, keySize, fontSize, showLabelBackground)
 		}
 		g := gift.New(gift.Resize(keySize, keySize, gift.LanczosResampling))
 		rgba := image.NewRGBA(image.Rect(0, 0, keySize, keySize))
@@ -79,7 +79,7 @@ func blankImage(size int, c color.Color) image.Image {
 	return img
 }
 
-func composeImageWithLabel(src image.Image, text string, keySize int, fontSize float64) image.Image {
+func composeImageWithLabel(src image.Image, text string, keySize int, fontSize float64, showLabelBackground bool) image.Image {
 	g := gift.New(gift.Resize(keySize, keySize, gift.LanczosResampling))
 	rgba := image.NewRGBA(image.Rect(0, 0, keySize, keySize))
 	g.Draw(rgba, src)
@@ -89,7 +89,9 @@ func composeImageWithLabel(src image.Image, text string, keySize int, fontSize f
 		barHeight = 18
 	}
 	barRect := image.Rect(0, keySize-barHeight, keySize, keySize)
+	if showLabelBackground {
 		draw.Draw(rgba, barRect, &image.Uniform{color.RGBA{0, 0, 0, 180}}, image.Point{}, draw.Over)
+	}
 
 	if text != "" {
 		face, err := parseDisplayFace(fontSize)

static/app.js

@@ -119,6 +119,7 @@ document.addEventListener('alpine:init', () => {
       this.settingsForm = {
         brightness: this.getDeviceConfig(this.activeDeckSerial)?.brightness ?? 75,
         font: this.config.font || 'medium',
+        show_label_background: this.config.show_label_background ?? true,
         screensaver_enabled: this.config.screensaver?.enabled || false,
         screensaver_idle: this.config.screensaver?.idle_seconds || 30,
         screensaver_brightness: this.config.screensaver?.brightness || 10,
@@ -598,6 +599,7 @@ document.addEventListener('alpine:init', () => {
       }
       dev.brightness = parseInt(this.settingsForm.brightness)
       this.config.font = this.settingsForm.font || 'medium'
+      this.config.show_label_background = this.settingsForm.show_label_background
       this.config.screensaver = {
         enabled: this.settingsForm.screensaver_enabled,
         idle_seconds: parseInt(this.settingsForm.screensaver_idle) || 30,

static/index.html

@@ -122,6 +122,10 @@
             <option value="regular">Regular</option>
           </select>
         </div>
+        <div class="checkbox-row">
+          <input type="checkbox" id="show-label-bg" x-model="settingsForm.show_label_background">
+          <label for="show-label-bg">Show label background</label>
+        </div>
       </div>
 
       <!-- Screensaver -->

web.go

@@ -404,7 +404,7 @@ func (s *WebServer) handleRender(w http.ResponseWriter, r *http.Request) {
 		kc.Background = bg
 	}
 
-	img := RenderKeyToImage(kc, keySize)
+	img := RenderKeyToImage(kc, keySize, s.cfg.ShowLabelBackground)
 
 	w.Header().Set("Content-Type", "image/png")
 	w.Header().Set("Cache-Control", "no-cache")