WIP essentials 5
This commit is contained in:
9 files changed
+399
No files matched your search
@@ -0,0 +1,118 @@
|
||||
package mujica
|
||||
|
||||
import (
|
||||
"cmp"
|
||||
"fmt"
|
||||
"log/slog"
|
||||
"math"
|
||||
|
||||
"github.com/egoist/mygo/ui"
|
||||
|
||||
"mujicaui/internal"
|
||||
"mujicaui/theme"
|
||||
)
|
||||
|
||||
// KnobOptions configure a Knob. Min and Max both zero mean 0 to 100.
|
||||
type KnobOptions struct {
|
||||
Min, Max float64
|
||||
// Step snaps the value; zero is continuous, moving 1% per arrow press.
|
||||
Step float64
|
||||
// Ticks draws that many evenly spaced marks around the dial; zero draws none.
|
||||
Ticks int
|
||||
// Size is the dial diameter; zero is 56.
|
||||
Size float32
|
||||
// Format writes the value under the dial; nil prints as many decimals as Min and Step need.
|
||||
Format func(float64) string
|
||||
Disabled bool
|
||||
// Label names the knob and shows above it.
|
||||
Label string
|
||||
}
|
||||
|
||||
// knobSweep is the dial's travel, centered on twelve o'clock, in turns.
|
||||
const knobSweep = 0.75
|
||||
|
||||
// knobDragPixels is how far a vertical drag travels the whole range.
|
||||
const knobDragPixels float32 = 160
|
||||
|
||||
// Knob sets *value by dragging up and down, the arrows, Home and End; the dial shows the value and ticks.
|
||||
func Knob(c *ui.Context, value *float64, opts KnobOptions) ChoiceResult {
|
||||
if value == nil {
|
||||
panic("mujica: Knob needs a value")
|
||||
}
|
||||
if opts.Ticks < 0 || !(opts.Size >= 0) || math.IsInf(float64(opts.Size), 1) {
|
||||
panic(fmt.Sprintf("mujica: Knob Ticks %d or Size %v invalid", opts.Ticks, opts.Size))
|
||||
}
|
||||
g, _ := sliderSetup(opts.Min, opts.Max, opts.Step, nil, false, c)
|
||||
format := sliderFormat(opts.Format, g)
|
||||
size := cmp.Or(opts.Size, 56)
|
||||
k := Tokens(c)
|
||||
old := g.snap(*value)
|
||||
*value = old
|
||||
col := ui.Column(c).AlignItems(ui.Center).Gap(Density(c).Unit()).Disabled(opts.Disabled)
|
||||
disabled := col.IsDisabled()
|
||||
var s *ui.Element
|
||||
col.Children(func() {
|
||||
if opts.Label != "" {
|
||||
ui.Text(c, opts.Label).TextColor(k.Text).FontSize(FontSize(c, theme.CaptionSize))
|
||||
}
|
||||
var next float64
|
||||
var dragged bool
|
||||
s, next, dragged = sliderControl(c, old, g, g.lo, g.hi)
|
||||
want := ui.Local(s, "knob.want", func() float64 { return math.NaN() })
|
||||
if dragged {
|
||||
if math.IsNaN(*want) {
|
||||
*want = old
|
||||
}
|
||||
_, dy, _ := s.Dragged()
|
||||
*want = max(g.lo, min(g.hi, *want-float64(dy)*(g.hi-g.lo)/float64(knobDragPixels)))
|
||||
next = g.snap(*want)
|
||||
} else {
|
||||
*want = math.NaN()
|
||||
}
|
||||
if !disabled {
|
||||
*value = next
|
||||
}
|
||||
s.Size(size, size).FocusRing(false).Cursor(ui.CursorResizeNS).Label(cmp.Or(opts.Label, msg(c, "knob.label")))
|
||||
hot := s.Hovered() || dragged
|
||||
v := *value
|
||||
s.Draw(func(p *ui.Painter, r ui.Rect) { knobPaint(p, r, k, g, v, opts.Ticks, hot, s.FocusVisible()) })
|
||||
ui.Text(c, format(*value)).TextColor(k.TextMuted).FontSize(FontSize(c, theme.CaptionSize)).FontFeatures("tnum")
|
||||
})
|
||||
changed := *value != old
|
||||
if changed {
|
||||
slog.Debug("mujica: knob changed", "label", opts.Label, "value", *value)
|
||||
}
|
||||
return ChoiceResult{col, changed}
|
||||
}
|
||||
|
||||
// knobPaint draws the track arc, the value arc, ticks and the diamond pointer.
|
||||
func knobPaint(p *ui.Painter, r ui.Rect, k theme.Tokens, g sliderGeom, v float64, ticks int, hot, focus bool) {
|
||||
cx, cy := internal.Snap(p, r.X+r.W/2), internal.Snap(p, r.Y+r.H/2)
|
||||
rad := r.W/2 - 6
|
||||
start := float32(-knobSweep / 2)
|
||||
frac := float32((v - g.lo) / (g.hi - g.lo))
|
||||
p.StrokePath(progressArc(p, cx, cy, rad, start, start+knobSweep), 3, k.Border)
|
||||
if frac > 0 {
|
||||
p.StrokePath(progressArc(p, cx, cy, rad, start, start+knobSweep*frac), 3, k.AccentText)
|
||||
}
|
||||
for i := range ticks {
|
||||
t := float64(start) + knobSweep*float64(i)/float64(max(ticks-1, 1))
|
||||
sin, cos := float32(math.Sin(2*math.Pi*t)), float32(math.Cos(2*math.Pi*t))
|
||||
p.Line(cx+sin*(rad+3), cy-cos*(rad+3), cx+sin*(rad+6), cy-cos*(rad+6), 1, k.TextMuted)
|
||||
}
|
||||
face := k.Surface
|
||||
if hot {
|
||||
face = k.SurfaceHover
|
||||
}
|
||||
var dial ui.Path
|
||||
dial.Circle(cx, cy, rad-6)
|
||||
p.FillPath(&dial, face)
|
||||
p.StrokePath(&dial, 1, k.ControlBorder)
|
||||
t := float64(start + knobSweep*frac)
|
||||
px := internal.Snap(p, cx+float32(math.Sin(2*math.Pi*t))*(rad-12))
|
||||
py := internal.Snap(p, cy-float32(math.Cos(2*math.Pi*t))*(rad-12))
|
||||
p.FillPath(internal.Diamond(px, py, 7), k.AccentText)
|
||||
if focus {
|
||||
internal.FocusRing(p, r, r.W/2, k.Focus)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
package mujica
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
"github.com/egoist/mygo/ui"
|
||||
)
|
||||
|
||||
func knobTester(v *float64, opts *KnobOptions, n *int) *ui.Tester {
|
||||
return ui.NewTester(func(c *ui.Context) {
|
||||
Use(c, Settings{})
|
||||
ui.Row(c).Padding(40).Children(func() {
|
||||
if Knob(c, v, *opts).Changed() {
|
||||
*n++
|
||||
}
|
||||
})
|
||||
}, 300, 300)
|
||||
}
|
||||
|
||||
func TestKnobKeysAndStepGrid(t *testing.T) {
|
||||
v := 0.0
|
||||
opts := KnobOptions{Max: 1, Step: 0.1, Label: "Gain"}
|
||||
n := 0
|
||||
tt := knobTester(&v, &opts, &n)
|
||||
tt.Key(0, ui.KeyTab)
|
||||
for range 3 {
|
||||
tt.Key(0, ui.KeyUp)
|
||||
}
|
||||
if v != 0.3 || n != 3 || !tt.HasText("0.3") {
|
||||
t.Fatalf("three Ups: %v (%d) %q", v, n, tt.Texts())
|
||||
}
|
||||
tt.Key(0, ui.KeyLeft)
|
||||
if v != 0.2 {
|
||||
t.Fatalf("Left: %v", v)
|
||||
}
|
||||
tt.Key(0, ui.KeyEnd)
|
||||
if v != 1 {
|
||||
t.Fatalf("End: %v", v)
|
||||
}
|
||||
tt.Key(0, ui.KeyUp)
|
||||
if v != 1 || n != 5 {
|
||||
t.Fatalf("past the end: %v %d", v, n)
|
||||
}
|
||||
tt.Key(0, ui.KeyHome)
|
||||
if v != 0 {
|
||||
t.Fatalf("Home: %v", v)
|
||||
}
|
||||
}
|
||||
|
||||
func TestKnobDragAndDisabled(t *testing.T) {
|
||||
v := 50.0
|
||||
opts := KnobOptions{Step: 1, Label: "Volume"}
|
||||
n := 0
|
||||
tt := knobTester(&v, &opts, &n)
|
||||
// The dial's center: padding 40, caption and gap above it.
|
||||
x, y := float32(68), float32(40+21+30)
|
||||
tt.Press(x, y)
|
||||
tt.Move(x, y-32) // a fifth of 160 DIPs: 20 of 100
|
||||
tt.Release(x, y-32)
|
||||
if v != 70 {
|
||||
t.Fatalf("drag up 32 DIPs: %v", v)
|
||||
}
|
||||
opts.Disabled = true
|
||||
tt.Frame()
|
||||
tt.Press(x, y)
|
||||
tt.Move(x, y-32)
|
||||
tt.Release(x, y-32)
|
||||
tt.Key(0, ui.KeyTab)
|
||||
tt.Key(0, ui.KeyUp)
|
||||
if v != 70 {
|
||||
t.Fatalf("disabled knob moved: %v", v)
|
||||
}
|
||||
}
|
||||
|
||||
func TestKnobRejects(t *testing.T) {
|
||||
v := 0.0
|
||||
for name, o := range map[string]KnobOptions{"ticks": {Ticks: -1}, "size": {Size: -1}, "range": {Min: 5, Max: 1}} {
|
||||
func() {
|
||||
defer func() {
|
||||
if recover() == nil {
|
||||
t.Errorf("%s: no panic", name)
|
||||
}
|
||||
}()
|
||||
ui.NewTester(func(c *ui.Context) { Use(c, Settings{}); Knob(c, &v, o) }, 200, 200)
|
||||
}()
|
||||
}
|
||||
}
|
||||
|
||||
func TestKnobSnapshot(t *testing.T) {
|
||||
a, b, d := 35.0, 0.8, 10.0
|
||||
snapshot(t, "knob", 320, 130, func(c *ui.Context) {
|
||||
ui.Row(c).Padding(16).Gap(24).Children(func() {
|
||||
Knob(c, &a, KnobOptions{Label: "Gain", Ticks: 11})
|
||||
Knob(c, &b, KnobOptions{Max: 1, Step: 0.1, Label: "Mix", Size: 72})
|
||||
Knob(c, &d, KnobOptions{Label: "Off", Disabled: true})
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -16,6 +16,8 @@ func init() {
|
||||
|
||||
"color_palette.custom": {"Custom color", "自定义颜色"},
|
||||
|
||||
"knob.label": {"Knob", "旋钮"},
|
||||
|
||||
"qr_code.label": {"QR code", "二维码"},
|
||||
"qr_code.too_long": {"Text too long for a QR code", "文字过长，无法生成二维码"},
|
||||
})
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,98 @@
|
||||
package mujica
|
||||
|
||||
import (
|
||||
"cmp"
|
||||
"log/slog"
|
||||
"math"
|
||||
|
||||
"github.com/egoist/mygo/ui"
|
||||
|
||||
"mujicaui/theme"
|
||||
)
|
||||
|
||||
// VerticalSliderOptions configure a VerticalSlider. Min and Max both zero mean 0 to 100.
|
||||
type VerticalSliderOptions struct {
|
||||
Min, Max float64
|
||||
// Step snaps the value; zero is continuous.
|
||||
Step float64
|
||||
Marks []SliderMark
|
||||
// Height is the track length; zero is 160.
|
||||
Height float32
|
||||
// ShowValue shows the value beside the thumb while hovered, dragged or focused.
|
||||
ShowValue bool
|
||||
Format func(float64) string
|
||||
Disabled bool
|
||||
Label string
|
||||
}
|
||||
|
||||
// VerticalSlider is a Slider standing up: max at the top, Up and Right raise it.
|
||||
func VerticalSlider(c *ui.Context, value *float64, opts VerticalSliderOptions) ChoiceResult {
|
||||
if value == nil {
|
||||
panic("mujica: VerticalSlider needs a value")
|
||||
}
|
||||
if !(opts.Height >= 0) || math.IsInf(float64(opts.Height), 1) {
|
||||
panic("mujica: VerticalSlider Height must be finite and >= 0")
|
||||
}
|
||||
g, _ := sliderSetup(opts.Min, opts.Max, opts.Step, opts.Marks, false, c)
|
||||
format := sliderFormat(opts.Format, g)
|
||||
k := Tokens(c)
|
||||
size := FontSize(c, theme.CaptionSize)
|
||||
h := cmp.Or(opts.Height, 160)
|
||||
old := g.snap(*value)
|
||||
*value = old
|
||||
var s *ui.Element
|
||||
var next float64
|
||||
var held bool
|
||||
wrap := ui.Column(c).Disabled(opts.Disabled)
|
||||
wrap.Children(func() { s, next, held = sliderControl(c, old, g, g.lo, g.hi) })
|
||||
// The base maps the pointer across; here the height decides.
|
||||
y := func(r ui.Rect, v float64) float32 {
|
||||
return r.Y + r.H - sliderThumb/2 - (r.H-sliderThumb)*float32((v-g.lo)/(g.hi-g.lo))
|
||||
}
|
||||
if held {
|
||||
if _, py, _ := s.PointerPosition(); s.Bounds().H > sliderThumb {
|
||||
f := 1 - float64((py-sliderThumb/2)/(s.Bounds().H-sliderThumb))
|
||||
next = g.snap(g.lo + max(0, min(1, f))*(g.hi-g.lo))
|
||||
}
|
||||
}
|
||||
w := Density(c).ControlHeight()
|
||||
for _, m := range opts.Marks {
|
||||
if m.Label != "" {
|
||||
w += 40
|
||||
break
|
||||
}
|
||||
}
|
||||
s.Size(w, h).PaddingY(sliderThumb / 2).FocusRing(false).Cursor(ui.CursorPointer)
|
||||
if opts.Label != "" {
|
||||
s.Label(opts.Label)
|
||||
}
|
||||
if !wrap.IsDisabled() {
|
||||
*value = next
|
||||
}
|
||||
changed := *value != old
|
||||
if changed {
|
||||
slog.Debug("mujica: vertical_slider changed", "label", opts.Label, "value", *value)
|
||||
}
|
||||
hot := s.Hovered() || held
|
||||
v := *value
|
||||
s.Draw(func(p *ui.Painter, r ui.Rect) {
|
||||
x := r.X + Density(c).ControlHeight()/2
|
||||
top, bot := y(r, g.hi), y(r, g.lo)
|
||||
p.Fill(ui.Rect{X: x - sliderTrack/2, Y: top, W: sliderTrack, H: bot - top}, k.Border, 0)
|
||||
p.Stroke(ui.Rect{X: x - sliderTrack/2, Y: top, W: sliderTrack, H: bot - top}, k.ControlBorder, 0, 1)
|
||||
p.Fill(ui.Rect{X: x - sliderTrack/2, Y: y(r, v), W: sliderTrack, H: bot - y(r, v)}, k.AccentText, 0)
|
||||
for _, m := range opts.Marks {
|
||||
my := y(r, m.Value)
|
||||
p.Fill(ui.Rect{X: x + sliderTrack/2 + 2, Y: my - 0.5, W: 5, H: 1}, k.TextMuted, 0)
|
||||
if m.Label != "" {
|
||||
_, th := p.MeasureText(1000, ui.Span{Text: m.Label, Size: size})
|
||||
p.Text(x+sliderTrack/2+10, my-th/2, m.Label, size, k.TextMuted)
|
||||
}
|
||||
}
|
||||
sliderThumbPaint(p, k, x, y(r, v), hot, s.FocusVisible())
|
||||
if opts.ShowValue && (hot || s.Focused()) {
|
||||
sliderBubblePaint(p, k, x, y(r, v), format(v), size)
|
||||
}
|
||||
})
|
||||
return ChoiceResult{wrap, changed}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
package mujica
|
||||
|
||||
import (
|
||||
"testing"
|
||||
|
||||
"github.com/egoist/mygo/ui"
|
||||
)
|
||||
|
||||
func verticalTester(v *float64, opts *VerticalSliderOptions, n *int) *ui.Tester {
|
||||
return ui.NewTester(func(c *ui.Context) {
|
||||
Use(c, Settings{})
|
||||
ui.Row(c).Padding(20).Children(func() {
|
||||
if VerticalSlider(c, v, *opts).Changed() {
|
||||
*n++
|
||||
}
|
||||
})
|
||||
}, 300, 300)
|
||||
}
|
||||
|
||||
func TestVerticalSliderKeysAndPointer(t *testing.T) {
|
||||
v := 0.0
|
||||
opts := VerticalSliderOptions{Step: 10, Label: "Level", Height: 216}
|
||||
n := 0
|
||||
tt := verticalTester(&v, &opts, &n)
|
||||
tt.Key(0, ui.KeyTab)
|
||||
tt.Key(0, ui.KeyUp)
|
||||
tt.Key(0, ui.KeyRight)
|
||||
if v != 20 || n != 2 {
|
||||
t.Fatalf("Up, Right: %v %d", v, n)
|
||||
}
|
||||
tt.Key(0, ui.KeyDown)
|
||||
if v != 10 {
|
||||
t.Fatalf("Down: %v", v)
|
||||
}
|
||||
tt.Key(0, ui.KeyEnd)
|
||||
if v != 100 {
|
||||
t.Fatalf("End: %v", v)
|
||||
}
|
||||
r, _ := tt.Find("Level")
|
||||
// Track runs from y+8 (100) to y+208 (0): a quarter up is 25, snapped to 30 or 20.
|
||||
tt.Press(r.X+r.W/2, r.Y+8+150)
|
||||
tt.Release(r.X+r.W/2, r.Y+8+150)
|
||||
if v != 30 && v != 20 {
|
||||
t.Fatalf("press at a quarter height: %v", v)
|
||||
}
|
||||
tt.Press(r.X+r.W/2, r.Y+8+150)
|
||||
tt.Move(r.X+r.W/2, r.Y)
|
||||
tt.Release(r.X+r.W/2, r.Y)
|
||||
if v != 100 {
|
||||
t.Fatalf("drag to the top: %v", v)
|
||||
}
|
||||
opts.Disabled = true
|
||||
tt.Frame()
|
||||
tt.Press(r.X+r.W/2, r.Y+200)
|
||||
tt.Release(r.X+r.W/2, r.Y+200)
|
||||
if v != 100 {
|
||||
t.Fatalf("disabled slider moved: %v", v)
|
||||
}
|
||||
}
|
||||
|
||||
func TestVerticalSliderRejects(t *testing.T) {
|
||||
v := 0.0
|
||||
for name, o := range map[string]VerticalSliderOptions{"height": {Height: -1}, "step": {Step: -1}} {
|
||||
func() {
|
||||
defer func() {
|
||||
if recover() == nil {
|
||||
t.Errorf("%s: no panic", name)
|
||||
}
|
||||
}()
|
||||
ui.NewTester(func(c *ui.Context) { Use(c, Settings{}); VerticalSlider(c, &v, o) }, 200, 200)
|
||||
}()
|
||||
}
|
||||
}
|
||||
|
||||
func TestVerticalSliderSnapshot(t *testing.T) {
|
||||
a, b := 40.0, 70.0
|
||||
snapshot(t, "vertical_slider", 260, 220, func(c *ui.Context) {
|
||||
ui.Row(c).Padding(16).Gap(24).Children(func() {
|
||||
VerticalSlider(c, &a, VerticalSliderOptions{Marks: []SliderMark{{Value: 0, Label: "0"}, {Value: 50, Label: "50"}, {Value: 100, Label: "100"}}})
|
||||
VerticalSlider(c, &b, VerticalSliderOptions{Disabled: true})
|
||||
})
|
||||
})
|
||||
}
|
||||
Reference in new issue
Block a user