magnolia/samples/gui-graphing.oak at main · SpcFORK/magnolia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// gui-graphing.oak
// Run: magnolia run samples/gui-graphing.oak

{
	println: println
	string: string
} := import('std')

gui := import('GUI')

fn makeSeries(t, count, phaseStep, amplitude, baseline) {
	fn loop(i, acc) if i < count {
		true -> {
			v := baseline + sin(t + float(i) * phaseStep) * amplitude
			loop(i + 1, acc << int(v))
		}
		_ -> acc
	}
	loop(0, [])
}

fn drawFrame(window, t) {
	lineSeries := makeSeries(t * 1.4, 40, 0.32, 42, 50)
	barSeries := makeSeries(t * 0.8, 18, 0.48, 36, 46)
	sparkSeries := makeSeries(t * 2.2, 30, 0.26, 18, 28)

	gui.draw(window, { shape: :rect, x: 0, y: 0, width: window.width, height: window.height, color: gui.rgb(9, 14, 24) })
	gui.draw(window, { shape: :text, x: 24, y: 20, text: 'Magnolia GUI Graphing Sample' })
	gui.draw(window, { shape: :text, x: 24, y: 42, text: 'line graph, bar graph, and sparkline helpers' })

	gui.drawLineGraph(window, 24, 72, 640, 220, lineSeries, {
		lineColor: gui.rgb(95, 204, 255)
		pointColor: gui.rgb(170, 238, 255)
		showPoints: true
		showLabels: true
		axis: {
			backgroundColor: gui.rgb(12, 22, 36)
			gridColor: gui.rgb(32, 56, 84)
			axisColor: gui.rgb(120, 164, 212)
			xTicks: 8
			yTicks: 6
		}
	})

	gui.drawBarGraph(window, 24, 320, 640, 220, barSeries, {
		barColor: gui.rgb(104, 228, 154)
		barBorderColor: gui.rgb(70, 170, 118)
		barGap: 4
		showLabels: true
		axis: {
			backgroundColor: gui.rgb(11, 25, 31)
			gridColor: gui.rgb(26, 62, 60)
			axisColor: gui.rgb(122, 204, 178)
			xTicks: 9
			yTicks: 5
		}
	})

	gui.draw(window, { shape: :text, x: 700, y: 94, text: 'CPU load trend' })
	gui.drawSparkline(window, 700, 120, 250, 56, sparkSeries, {
		lineColor: gui.rgb(255, 180, 96)
		backgroundColor: gui.rgb(25, 20, 14)
		rangePadding: 2
	})

	gui.draw(window, { shape: :text, x: 700, y: 196, text: 'network jitter' })
	gui.drawSparkline(window, 700, 222, 250, 56, makeSeries(t * 2.7, 30, 0.51, 12, 18), {
		lineColor: gui.rgb(255, 120, 130)
		backgroundColor: gui.rgb(30, 14, 18)
		rangePadding: 1
	})

	gui.draw(window, { shape: :text, x: 700, y: 300, text: 'tips:' })
	gui.draw(window, { shape: :text, x: 700, y: 324, text: '- use axis.min/max for fixed scale' })
	gui.draw(window, { shape: :text, x: 700, y: 348, text: '- use drawSparkline for compact dashboards' })
	gui.draw(window, { shape: :text, x: 700, y: 372, text: '- combine with gui.onResize for responsive layout' })
}

window := gui.createWindow('Magnolia GUI Graphing', 980, 580, {
	frameMs: 16
	updateOnDispatch: false
	icon: './build/magnolia.ico'
	taskbarIcon: './build/magnolia.ico'
	windowIcon: './build/magnolia.ico'
	threading: true
})

if window.type {
	:ok -> {
		t := 0.0
		gui.show(window)
		gui.run(window, ?, fn(win, dt) {
			t <- float(t) + float(dt)
			if gui.beginFrame(win).type = :ok -> {
				drawFrame(win, t)
				gui.endFrame(win)
			}
		})
		gui.close(window)
	}
	_ -> println('Could not create graphing sample window: ' + string(window))
}