Skip to content

Commit 2d3e348

Browse files
ajay-govajay-gov
committed
Use latest swim-system-js release (version 3.10.2)
Move the UI components into separate files
1 parent 732fad6 commit 2d3e348

File tree

6 files changed

+195
-149
lines changed

6 files changed

+195
-149
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ Swim is a completely integrated solution for building scalable, end-to-end strea
1717

1818
* From a console pointed to the `server` directory, run `./gradlew run` (`.\gradlew.bat run` on Windows) to run the Swim server.
1919

20-
* Then, open `ui/index.html` in your browser to see the UI.
20+
* Then, open `ui/chart.html`, `ui/gauge.html`, and `ui/pie.html` in your browser to see the different real-time UI components.
2121

2222
## How It Works
2323

24-
Visit [server](https://github.com/swimos/tutorial/blob/master/server) to learn how to stand up your data in a Swim server.
24+
Visit [server](https://github.com/swimos/tutorial/tree/master/server) to learn how to stand up your data in a Swim server.
2525

26-
Then, visit [ui](https://github.com/swimos/tutorial/blob/master/ui) to learn to visualize this data like never before.
26+
Then, visit [ui](https://github.com/swimos/tutorial/tree/master/ui) to learn to visualize this data like never before.

‎ui/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@
44

55
The minimum you need to visualize Swim data is a Swim client. That said, Swim comes with additional tools that let you see your data right away with no extra work.
66

7-
Read [index.html](http://github.com/swimos/tutorial/tree/master/ui/index.html) to quickstart building your own gauges, pie charts, and line graphs.
7+
Read [chart.html](http://github.com/swimos/tutorial/tree/master/ui/chart.html) to build your own line chart.
8+
9+
Read [gauge.html](http://github.com/swimos/tutorial/tree/master/ui/gauge.html) to build your own gauge.
10+
11+
Read [pie.html](http://github.com/swimos/tutorial/tree/master/ui/pie.html) to build your own pie chart.

‎ui/chart.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Swim Chart</title>
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
6+
</head>
7+
<body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
9+
</div>
10+
<script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
11+
<script>
12+
13+
const app = new swim.HtmlAppView(document.getElementById("app"));
14+
15+
const chartCanvas = app.append('div').position('relative').append("canvas");
16+
17+
const tween = swim.Transition.duration(1000);
18+
19+
/* Chart View */
20+
const chart = new swim.ChartView()
21+
.bottomAxis(swim.AxisView.bottom("time"))
22+
.leftAxis(swim.AxisView.left("0...120"))
23+
.domainColor("#4a4a4a")
24+
.tickMarkColor("#4a4a4a")
25+
.font("12px sans-serif")
26+
.textColor("#4a4a4a");
27+
chartCanvas.append(chart);
28+
29+
const plot = new swim.LineGraphView()
30+
.stroke("#50e3c2")
31+
.strokeWidth(2);
32+
chart.addPlot(plot);
33+
34+
function addToPlot(key, value) {
35+
const time = key.numberValue();
36+
const v = value.get("count").numberValue(0);
37+
plot.insertDatum({x: time, y: v, opacity: void 0});
38+
}
39+
40+
function removeFromPlot(key) {
41+
const time = key.numberValue();
42+
plot.removeDatum(time);
43+
}
44+
45+
const histogramLink = swim.downlinkMap()
46+
.hostUri("warp://localhost:9001")
47+
.nodeUri("/unit/master")
48+
.laneUri("histogram")
49+
.didUpdate(function(key, value) {
50+
addToPlot(key, value);
51+
})
52+
.didRemove(function(key) {
53+
removeFromPlot(key);
54+
})
55+
.open();
56+
</script>
57+
</body>
58+
</html>

‎ui/gauge.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Swim Gauge</title>
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
6+
</head>
7+
<body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
9+
</div>
10+
<script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
11+
<script>
12+
13+
const app = new swim.HtmlAppView(document.getElementById("app"));
14+
15+
const gaugeCanvas = app.append('div').position('relative').append("canvas");
16+
17+
const tween = swim.Transition.duration(1000);
18+
19+
/* Gauge View */
20+
const gauge = new swim.GaugeView()
21+
.startAngle(swim.Angle.rad(3 * Math.PI / 4))
22+
.sweepAngle(swim.Angle.rad(3 * Math.PI / 2))
23+
.dialColor("#cccccc")
24+
.meterColor("#989898")
25+
.title(new swim.TextRunView("Foo, Bar, Baz").font("20px sans-serif"))
26+
.font("14px sans-serif")
27+
.textColor("#4a4a4a");
28+
gaugeCanvas.append(gauge);
29+
30+
const fooDial = new swim.DialView()
31+
.label("FOO");
32+
gauge.setChildView("foo", fooDial);
33+
34+
const barDial = new swim.DialView()
35+
.label("BAR");
36+
gauge.setChildView("bar", barDial);
37+
38+
const bazDial = new swim.DialView()
39+
.label("BAZ");
40+
gauge.setChildView("baz", bazDial);
41+
42+
function updateDial(dial, max, key, value) {
43+
const v = value.get(key).numberValue();
44+
const percent = v / max;
45+
const legend = key + ": " + (v) + " out of " + max;
46+
dial.value(v, tween)
47+
.total(max)
48+
.meterColor(percent < 0.5 ? "#989898" : percent < 0.9 ? "#4a4a4a" : "#000000", tween);
49+
dial.label().text(legend);
50+
}
51+
52+
/* Data Subscriptions */
53+
const valueLink = swim.downlinkValue()
54+
.hostUri("warp://localhost:9001")
55+
.nodeUri("/unit/master")
56+
.laneUri("latest")
57+
.didSet(function (value) {
58+
updateDial(fooDial, 70, "foo", value);
59+
updateDial(barDial, 140, "bar", value);
60+
updateDial(bazDial, 210, "baz", value);
61+
})
62+
.open();
63+
64+
</script>
65+
</body>
66+
</html>

‎ui/index.html‎

Lines changed: 0 additions & 145 deletions
This file was deleted.

‎ui/pie.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Swim Pie</title>
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
6+
</head>
7+
<body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
9+
</div>
10+
<script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
11+
<script>
12+
13+
const app = new swim.HtmlAppView(document.getElementById("app"));
14+
15+
const pieCanvas = app.append('div').position('relative').append("canvas");
16+
17+
const tween = swim.Transition.duration(1000);
18+
19+
/* Pie View */
20+
const sliceColors = [swim.Color.parse("#00a6ed"),
21+
swim.Color.parse("#6acd00"),
22+
swim.Color.parse("#c200fa")];
23+
const pie = new swim.PieView()
24+
// .innerRadius("15%")
25+
.outerRadius("25%")
26+
.tickColor("#b7b7b7")
27+
.font("14px sans-serif")
28+
.textColor("#4a4a4a");
29+
pieCanvas.append(pie);
30+
const pieIndices = {"foo": 0, "bar": 1, "baz": 2};
31+
32+
function updateSlice(key, value) {
33+
const v = value.get(key).numberValue();
34+
let slice = pie.getChildView(key);
35+
if (slice) {
36+
slice.value(v, tween);
37+
slice.label().text(v);
38+
} else {
39+
const sliceColor = sliceColors[pieIndices[key]];
40+
slice = new swim.SliceView()
41+
.value(v)
42+
.sliceColor(sliceColor)
43+
.label(v.toFixed())
44+
.legend(key);
45+
pie.setChildView(key, slice);
46+
}
47+
}
48+
49+
/* Data Subscriptions */
50+
const valueLink = swim.downlinkValue()
51+
.hostUri("warp://localhost:9001")
52+
.nodeUri("/unit/master")
53+
.laneUri("latest")
54+
.didSet(function (value) {
55+
updateSlice("foo", value);
56+
updateSlice("bar", value);
57+
updateSlice("baz", value);
58+
})
59+
.open();
60+
61+
</script>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)