Skip to content

Commit 9c83a24

Browse files
ajay-govajay-gov
committed
- Update to 3.11.0 for swim core java libs
- Update to 3.11.1 for swim js libs- fix chart, gauge and pie code to work with the new js version - Use gradle 7.0
1 parent 5880f5f commit 9c83a24

File tree

6 files changed

+118
-74
lines changed

6 files changed

+118
-74
lines changed

‎server/build.gradle

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ def useModules = jvmVersion >= 9 && !project.hasProperty('no-modules')
2626

2727
repositories {
2828
mavenCentral()
29-
jcenter()
3029
}
3130

3231
dependencies {

‎server/gradle.properties

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
swim.version=3.10.2
1+
swim.version=3.11.0

‎server/gradle/wrapper/gradle-wrapper.properties

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#Thu Dec 05 14:19:49 GMT 2019
2-
distributionUrl=https\://services.gradle.org/distributions/gradle-6.4.1-bin.zip
2+
distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-bin.zip
33
distributionBase=GRADLE_USER_HOME
44
distributionPath=wrapper/dists
55
zipStorePath=wrapper/dists

‎ui/chart.html

Lines changed: 49 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,68 @@
22
<html>
33
<head>
44
<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" />
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
66
</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>
7+
<body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
9+
<script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
1110
<script>
1211

13-
const app = new swim.HtmlAppView(document.getElementById("app"));
12+
const bodyView = swim.HtmlView.fromNode(document.body);
1413

15-
const chartCanvas = app.append('div').position('relative').append("canvas");
14+
const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
15+
16+
const canvasView = swim.CanvasView.create()
17+
.wheelEventsEnabled(true)
18+
.mouseEventsEnabled(true)
19+
.pointerEventsEnabled(true)
20+
.touchEventsEnabled(true)
21+
.touchAction("manipulation");
1622

17-
const tween = swim.Transition.duration(1000);
1823

1924
/* 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+
const chartView = canvasView.append(swim.ChartView)
26+
.bottomAxis(true)
27+
.leftAxis(true)
28+
.xRangePadding([0, 0])
29+
.domainTracking(true)
30+
.xGestures(true)
2531
.font("12px sans-serif")
2632
.textColor("#4a4a4a");
27-
chartCanvas.append(chart);
2833

29-
const plot = new swim.LineGraphView()
34+
const graphView = chartView.graph.injectView();
35+
36+
const plotView = graphView.append(swim.LinePlotView)
37+
.hitMode("domain")
3038
.stroke("#50e3c2")
31-
.strokeWidth(2);
32-
chart.addPlot(plot);
39+
.strokeWidth(2)
40+
.on("pointerover", function (event) {
41+
const dataPoint = event.targetView;
42+
const y = dataPoint.y.value;
43+
dataPoint.label(y.toFixed(2));
44+
})
45+
.on("pointerout", function (event) {
46+
const dataPoint = event.targetView;
47+
dataPoint.label(null);
48+
});
49+
plotView.textColor.setLook(swim.Look.mutedColor);
50+
plotView.modifyMood(swim.Feel.default, [[swim.Feel.primary, 1]]);
3351

3452
function addToPlot(key, value) {
35-
const time = key.numberValue();
53+
const time = new swim.DateTime(key.numberValue());
3654
const v = value.get("count").numberValue(0);
37-
plot.insertDatum({x: time, y: v, opacity: void 0});
55+
plotView.insertDataPoint({
56+
x: time,
57+
y: v,
58+
opacity: void 0,
59+
labelPadding: 2,
60+
labelPlacement: v > 0 ? "above" : v < 0 ? "below" : "middle",
61+
});
3862
}
3963

4064
function removeFromPlot(key) {
41-
const time = key.numberValue();
42-
plot.removeDatum(time);
65+
const time = new swim.DateTime(key.numberValue());
66+
plotView.removeDataPoint(time);
4367
}
4468

4569
const histogramLink = swim.downlinkMap()
@@ -53,6 +77,9 @@
5377
removeFromPlot(key);
5478
})
5579
.open();
80+
81+
containerView.append(canvasView);
82+
5683
</script>
57-
</body>
84+
</body>
5885
</html>

‎ui/gauge.html

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,57 @@
22
<html>
33
<head>
44
<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" />
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
66
</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>
7+
<body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
9+
<script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
1110
<script>
1211

13-
const app = new swim.HtmlAppView(document.getElementById("app"));
12+
const bodyView = swim.HtmlView.fromNode(document.body);
1413

15-
const gaugeCanvas = app.append('div').position('relative').append("canvas");
14+
const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
15+
16+
const canvasView = swim.CanvasView.create()
17+
.mouseEventsEnabled(true)
18+
.pointerEventsEnabled(true)
19+
.touchEventsEnabled(true)
20+
.touchAction("manipulation");
1621

17-
const tween = swim.Transition.duration(1000);
1822

1923
/* Gauge View */
20-
const gauge = new swim.GaugeView()
24+
const gaugeView = canvasView.append(swim.GaugeView)
25+
.innerRadius(swim.Length.pct(25))
2126
.startAngle(swim.Angle.rad(3 * Math.PI / 4))
2227
.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"))
2628
.font("14px sans-serif")
27-
.textColor("#4a4a4a");
28-
gaugeCanvas.append(gauge);
29+
.title(swim.TextRunView.fromAny("Foo, Bar, Baz").font("20px sans-serif"))
30+
.font("14px sans-serif")
31+
.textColor("#4a4a4a")
32+
.on("pointerover", function (event) {
33+
if (event.targetView instanceof swim.DialView) {
34+
event.targetView.modifyMood(swim.Feel.default, [[swim.Feel.secondary, 1]], true);
35+
}
36+
})
37+
.on("pointerout", function (event) {
38+
if (event.targetView instanceof swim.DialView) {
39+
event.targetView.modifyMood(swim.Feel.default, [[swim.Feel.secondary, void 0]], true);
40+
}
41+
});
2942

30-
const fooDial = new swim.DialView()
31-
.label("FOO");
32-
gauge.setChildView("foo", fooDial);
43+
const fooDial = gaugeView.append(swim.DialView, "FOO");
3344

34-
const barDial = new swim.DialView()
35-
.label("BAR");
36-
gauge.setChildView("bar", barDial);
45+
const barDial = gaugeView.append(swim.DialView, "BAR");
3746

38-
const bazDial = new swim.DialView()
39-
.label("BAZ");
40-
gauge.setChildView("baz", bazDial);
47+
const bazDial = gaugeView.append(swim.DialView, "BAZ");
4148

4249
function updateDial(dial, max, key, value) {
4350
const v = value.get(key).numberValue();
4451
const percent = v / max;
4552
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);
53+
const timing = swim.Easing.linear.withDuration(1000);
54+
dial.value(percent, timing);
55+
dial.label(legend);
5056
}
5157

5258
/* Data Subscriptions */
@@ -61,6 +67,8 @@
6167
})
6268
.open();
6369

70+
containerView.append(canvasView);
71+
6472
</script>
6573
</body>
6674
</html>

‎ui/pie.html

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,55 @@
22
<html>
33
<head>
44
<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" />
5+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
66
</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>
7+
<body swim-theme style="position: fixed; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">
8+
<script src="https://cdn.swimos.org/js/3.11.1/swim-system.js"></script>
9+
<script src="https://cdn.swimos.org/js/3.11.1/swim-toolkit.js"></script>
1110
<script>
1211

13-
const app = new swim.HtmlAppView(document.getElementById("app"));
12+
const bodyView = swim.HtmlView.fromNode(document.body);
1413

15-
const pieCanvas = app.append('div').position('relative').append("canvas");
14+
const containerView = bodyView.append("div").display("flex").width("67%").height("67%").touchAction("none").userSelect("none");
1615

17-
const tween = swim.Transition.duration(1000);
16+
const canvasView = swim.CanvasView.create()
17+
.mouseEventsEnabled(true)
18+
.pointerEventsEnabled(true)
19+
.touchEventsEnabled(true)
20+
.touchAction("manipulation");
1821

1922
/* Pie View */
23+
const pieView = canvasView.append(swim.PieView)
24+
.font("14px sans-serif");
25+
2026
const sliceColors = [swim.Color.parse("#00a6ed"),
2127
swim.Color.parse("#6acd00"),
2228
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);
29+
3030
const pieIndices = {"foo": 0, "bar": 1, "baz": 2};
3131

3232
function updateSlice(key, value) {
3333
const v = value.get(key).numberValue();
34-
let slice = pie.getChildView(key);
34+
let slice = pieView.getChildView(key);
3535
if (slice) {
36-
slice.value(v, tween);
37-
slice.label().text(v);
36+
const timing = swim.Easing.linear.withDuration(1000);
37+
slice.value(v, timing);
38+
slice.label(v.toFixed());
3839
} else {
3940
const sliceColor = sliceColors[pieIndices[key]];
40-
slice = new swim.SliceView()
41+
slice = pieView.append(swim.SliceView, key)
4142
.value(v)
4243
.sliceColor(sliceColor)
4344
.label(v.toFixed())
44-
.legend(key);
45-
pie.setChildView(key, slice);
45+
.legend(key)
46+
.textColor("#4a4a4a")
47+
.on("pointerenter", function (event) {
48+
slice0View.modifyMood(swim.Feel.default, [[swim.Feel.primary, 1]], true);
49+
})
50+
.on("pointerleave", function (event) {
51+
slice0View.modifyMood(swim.Feel.default, [[swim.Feel.primary, void 0]], true);
52+
});
53+
4654
}
4755
}
4856

@@ -58,6 +66,8 @@
5866
})
5967
.open();
6068

69+
containerView.append(canvasView);
70+
6171
</script>
62-
</body>
72+
</body>
6373
</html>

0 commit comments

Comments
 (0)