1
0

fix: keep active page on config save, add Cyrillic preview support, fix grid sizing

- daemon.go: save/restore active page on config reload instead of
  always activating default_page (fixes page switch on save)
- render.go: replace basicfont.Face7x13 with parseDisplayFace() for
  unicode/Cyrillic support in edit key preview
- web.go: add SSE endpoint (GET /api/events) for real-time page_changed
  events and POST /api/activate-page API
- app.js: persist active page via localStorage, listen for SSE
  page_changed events
- styles.css, index.html: fix grid sizing (width 100%, minmax(0, 1fr),
  aspect-ratio on key buttons, max-width 525px)
This commit is contained in:
Maksim Totmin 2026-06-17 10:48:31 +07:00
parent 19e3040965
commit cb52e639f0
6 changed files with 195 additions and 20 deletions

View File

@ -74,6 +74,7 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
web.SetDecks(decks)
web.SetPageManager(primaryPM)
web.SetExtraPageManagers(pageMgrs[1:])
for _, pm := range pageMgrs {
if err := pm.ActivatePage(cfg.DefaultPage); err != nil {
@ -104,14 +105,19 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
if a == nil {
return
}
oldPage := primaryPM.ActivePageName()
if err := ExecuteAction(a, primaryDeck, primaryPM); err != nil {
slog.Error("execute action", "error", err)
}
if a.Type == "page" {
asm.NotifyManualPage(a.Page)
for _, pm := range pageMgrs[1:] {
pm.ActivatePage(a.Page)
newPage := primaryPM.ActivePageName()
if newPage != oldPage {
if a.Type == "page" {
asm.NotifyManualPage(a.Page)
}
for _, pm := range pageMgrs[1:] {
pm.ActivatePage(newPage)
}
web.BroadcastPageChange(newPage)
}
})
@ -191,6 +197,7 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
}
pm.startPeriodicKeys()
}
web.BroadcastPageChange(page)
}
case <-configTicker.C:
@ -214,7 +221,9 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
for _, d := range decks {
d.SetBrightness(deviceBrightness(cfg, d.Serial()))
}
var activePages []string
for _, pm := range pageMgrs {
activePages = append(activePages, pm.ActivePageName())
pm.stopPeriodicKeys()
pm.defaultFont = cfg.Font
pm.LoadPages(cfg.Pages)
@ -225,9 +234,18 @@ func Run(ctx context.Context, cfg *config.Config, opts RunOptions) error {
detector = NewWindowDetector()
windowCh, _ = detector.Start(ctx)
}
for _, pm := range pageMgrs {
if err := pm.ActivatePage(cfg.DefaultPage); err != nil {
slog.Warn("reload: activate default page", "error", err)
for i, pm := range pageMgrs {
page := cfg.DefaultPage
if i < len(activePages) && activePages[i] != "" {
for _, p := range cfg.Pages {
if p.Name == activePages[i] {
page = activePages[i]
break
}
}
}
if err := pm.ActivatePage(page); err != nil {
slog.Warn("reload: activate page", "error", err)
}
pm.startPeriodicKeys()
}

View File

@ -42,7 +42,11 @@ func RenderKeyToImage(k *config.KeyConfig, keySize int) image.Image {
}
}
if k.Label != "" {
return composeImageWithLabel(img, k.Label, keySize)
fontSize := 10.0
if k.FontSize != nil {
fontSize = *k.FontSize
}
return composeImageWithLabel(img, k.Label, keySize, fontSize)
}
g := gift.New(gift.Resize(keySize, keySize, gift.LanczosResampling))
rgba := image.NewRGBA(image.Rect(0, 0, keySize, keySize))
@ -62,7 +66,11 @@ func RenderKeyToImage(k *config.KeyConfig, keySize int) image.Image {
return blankImage(keySize, bg)
}
}
return renderTextImage(k.Label, keySize)
fontSize := 12.0
if k.FontSize != nil {
fontSize = *k.FontSize
}
return renderTextImage(k.Label, keySize, fontSize)
}
func blankImage(size int, c color.Color) image.Image {
@ -71,7 +79,7 @@ func blankImage(size int, c color.Color) image.Image {
return img
}
func composeImageWithLabel(src image.Image, text string, keySize int) image.Image {
func composeImageWithLabel(src image.Image, text string, keySize int, fontSize float64) image.Image {
g := gift.New(gift.Resize(keySize, keySize, gift.LanczosResampling))
rgba := image.NewRGBA(image.Rect(0, 0, keySize, keySize))
g.Draw(rgba, src)
@ -84,7 +92,12 @@ func composeImageWithLabel(src image.Image, text string, keySize int) image.Imag
draw.Draw(rgba, barRect, &image.Uniform{color.RGBA{0, 0, 0, 180}}, image.Point{}, draw.Over)
if text != "" {
face := basicfont.Face7x13
face, err := parseDisplayFace(fontSize)
if err != nil {
face = basicfont.Face7x13
} else {
defer face.Close()
}
textW := font.MeasureString(face, text).Ceil()
posX := (keySize - textW) / 2
if posX < 2 {
@ -107,11 +120,16 @@ func composeImageWithLabel(src image.Image, text string, keySize int) image.Imag
return rgba
}
func renderTextImage(text string, keySize int) image.Image {
func renderTextImage(text string, keySize int, fontSize float64) image.Image {
rgba := blankImage(keySize, color.RGBA{0, 0, 0, 255}).(*image.RGBA)
if text != "" {
face := basicfont.Face7x13
face, err := parseDisplayFace(fontSize)
if err != nil {
face = basicfont.Face7x13
} else {
defer face.Close()
}
textW := font.MeasureString(face, text).Ceil()
posX := (keySize - textW) / 2
if posX < 2 {

View File

@ -51,6 +51,28 @@ document.addEventListener('alpine:init', () => {
await this.loadConfig()
await this.loadDecks()
setInterval(() => this.pollDisplayOutputs(), 3000)
this.connectSSE()
},
connectSSE() {
if (this._sse) this._sse.close()
const es = new EventSource('/api/events')
this._sse = es
es.addEventListener('page_changed', (e) => {
try {
const data = JSON.parse(e.data)
if (data.page && this.pages.find(p => p.name === data.page)) {
this.activePage = data.page
localStorage.setItem('sd_active_page', data.page)
this.displayOutputs = {}
}
} catch (_) {}
})
es.onerror = () => {
es.close()
this._sse = null
setTimeout(() => this.connectSSE(), 3000)
}
},
async loadDecks() {
@ -79,7 +101,12 @@ document.addEventListener('alpine:init', () => {
this.config = await res.json()
this.pages = this.config.pages
if (this.pages.length > 0) {
this.activePage = this.config.default_page || this.pages[0].name
const saved = localStorage.getItem('sd_active_page')
if (saved && this.pages.find(p => p.name === saved)) {
this.activePage = saved
} else {
this.activePage = this.config.default_page || this.pages[0].name
}
}
this.syncSettings()
} catch (e) {
@ -460,7 +487,13 @@ document.addEventListener('alpine:init', () => {
// ── Page management ──
switchPage(name) {
this.activePage = name
localStorage.setItem('sd_active_page', name)
this.displayOutputs = {}
fetch('/api/activate-page', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ page: name })
}).catch(() => {})
},
async addPage() {

View File

@ -14,7 +14,7 @@
<!-- ═══ Header ═══ -->
<header>
<button class="icon-btn" @click="subView = 'switcher'" title="Switch page">
<button class="icon-btn" @click="view = 'grid'; subView = 'switcher'" title="Switch page">
<i class="fas fa-layer-group"></i>
</button>
@ -53,7 +53,7 @@
x-text="d.model + ' (' + d.keys_x + '\u00d7' + d.keys_y + ')'"></button>
</template>
</div>
<div class="deck-grid" :style="'grid-template-columns: repeat(' + activeDeck.keys_x + ', 1fr)'">
<div class="deck-grid" :style="'grid-template-columns: repeat(' + activeDeck.keys_x + ', minmax(0, 1fr))'">
<template x-for="key in gridKeys" :key="key.index">
<button class="key-btn"
:style="key.displayBg ? { backgroundColor: key.displayBg } : {}"
@ -68,7 +68,7 @@
<span x-show="key.configured && !key.background && !key.icon && key.label"
style="font-size:12px;color:#fff;opacity:0.75;text-align:center;line-height:1.2;padding:4px;"
x-text="key.label"></span>
<span x-show="!key.configured" style="color:var(--text-muted);font-size:24px;opacity:0.5;">+</span>
<span x-show="!key.configured" style="color:var(--text-muted);font-size:24px;opacity:0.5;line-height:1;">+</span>
<div class="action-icons" x-show="key.hasAction">
<template x-for="(t, ti) in key.actionTypes.slice(0,3)" :key="ti">
<i :class="'fas fa-' + actionIconMap[t] + ' action-icon type-' + t"

View File

@ -112,6 +112,9 @@ main {
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
width: 100%;
max-width: 525px;
contain: layout style;
}
.deck-selector {
@ -155,6 +158,8 @@ main {
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
min-height: 0;
}
.key-btn:hover {
@ -169,11 +174,10 @@ main {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.key-btn.empty {
opacity: 0.3;
border-color: var(--border-light);
}
.key-btn.empty:hover {
opacity: 0.5;

104
web.go
View File

@ -37,12 +37,20 @@ type WebServer struct {
cfg *config.Config
configPath string
pm *PageManager
extraPMs []*PageManager
decks []*Deck
mu sync.RWMutex
sseClients map[chan string]struct{}
sseMu sync.RWMutex
}
func NewWebServer(cfg *config.Config, configPath string) *WebServer {
return &WebServer{cfg: cfg, configPath: configPath}
return &WebServer{
cfg: cfg,
configPath: configPath,
sseClients: make(map[chan string]struct{}),
}
}
func (s *WebServer) UpdateConfig(cfg *config.Config) {
@ -63,6 +71,23 @@ func (s *WebServer) SetDecks(decks []*Deck) {
s.decks = decks
}
func (s *WebServer) SetExtraPageManagers(pms []*PageManager) {
s.mu.Lock()
defer s.mu.Unlock()
s.extraPMs = pms
}
func (s *WebServer) BroadcastPageChange(page string) {
s.sseMu.RLock()
defer s.sseMu.RUnlock()
for ch := range s.sseClients {
select {
case ch <- page:
default:
}
}
}
func (s *WebServer) Serve(ctx context.Context, addr string) error {
mux := http.NewServeMux()
@ -86,6 +111,9 @@ func (s *WebServer) Serve(ctx context.Context, addr string) error {
mux.HandleFunc("GET /api/status", s.handleGetStatus)
mux.HandleFunc("GET /api/events", s.handleSSE)
mux.HandleFunc("POST /api/activate-page", s.handleActivatePage)
mux.Handle("GET /static/", http.StripPrefix("/static/", http.FileServer(http.FS(staticRoot))))
mux.HandleFunc("/", s.handleSPA)
@ -127,6 +155,80 @@ func (s *WebServer) handleSPA(w http.ResponseWriter, r *http.Request) {
w.Write(data)
}
func (s *WebServer) handleSSE(w http.ResponseWriter, r *http.Request) {
flusher, ok := w.(http.Flusher)
if !ok {
http.Error(w, "streaming not supported", http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "text/event-stream")
w.Header().Set("Cache-Control", "no-cache")
w.Header().Set("Connection", "keep-alive")
ch := make(chan string, 8)
s.sseMu.Lock()
s.sseClients[ch] = struct{}{}
s.sseMu.Unlock()
notify := r.Context().Done()
go func() {
<-notify
s.sseMu.Lock()
delete(s.sseClients, ch)
s.sseMu.Unlock()
}()
flusher.Flush()
for {
select {
case <-notify:
return
case page := <-ch:
data, _ := json.Marshal(map[string]string{"page": page})
fmt.Fprintf(w, "event: page_changed\ndata: %s\n\n", data)
flusher.Flush()
}
}
}
func (s *WebServer) handleActivatePage(w http.ResponseWriter, r *http.Request) {
var req struct {
Page string `json:"page"`
}
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
http.Error(w, fmt.Sprintf("invalid JSON: %v", err), http.StatusBadRequest)
return
}
if req.Page == "" {
http.Error(w, "page is required", http.StatusBadRequest)
return
}
s.mu.RLock()
allPMs := append([]*PageManager{s.pm}, s.extraPMs...)
s.mu.RUnlock()
for _, pm := range allPMs {
if pm == nil {
continue
}
if err := pm.ActivatePage(req.Page); err != nil {
slog.Warn("activate page", "page", req.Page, "error", err)
} else {
pm.stopPeriodicKeys()
pm.startPeriodicKeys()
}
}
s.BroadcastPageChange(req.Page)
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(map[string]string{"status": "ok", "page": req.Page})
}
func (s *WebServer) handleGetConfig(w http.ResponseWriter, r *http.Request) {
s.mu.RLock()
defer s.mu.RUnlock()