JavaFX SCADA UI：図式指示計を作る

続いて、棒図式指示計を作ってみます。こちらの方は、特に言語上問題になる点はありません。
ただの棒図式ではつまらないので、線形階調表示LinearGradientを指定して棒図式を描かせてみました。階調表示の指定が簡単になるよう、棒図式の矩形は固定の高さで描き、背景となる矩形の方の高さを指示計の値に合わせて変えています。
また、目盛線と目盛値は、foreach文を使って生成しています。
企画を構築して実行すると枠付き窓が表示され、数値指示計の横に右図のような棒図式指示計が表示されます。
下に載せたプログラムの例では、結果が早く見られるよう、画面の更新間隔を0.5秒にしてあります。


package client;

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import client.ScadaClient;

class ScadaDataModel {
attribute presenting: Boolean;
attribute timingGenerator: Number;
attribute numericData: Number;
attribute sc: ScadaClient;
function formatNumber(value:Number): String;
operation textColor(value:Number): Color;
}

attribute ScadaDataModel.timingGenerator
= bind [1..120] dur 60000 linear continue if presenting;

function ScadaDataModel.formatNumber(value:Number): String {
return value format as <<##0.00>>;
}

operation ScadaDataModel.textColor(value:Number): Color {
var c:Color = green;
if (value > 90.0) {c = red;}
else if (value > 75.0) {c = Color {red: 1.0, green: 0.5, blue: 0.0};}
return c;
}

trigger on new ScadaDataModel {
sc = new ScadaClient();
}

trigger on ScadaDataModel.timingGenerator = value {
numericData = sc.receiveData();
System.out.println("受信生データ: {numericData}");
System.out.println("書式化データ: {formatNumber(numericData)}");
}

Frame {
var scadaData = ScadaDataModel {presenting: true}
title: "JavaFX SCADA UI"
centerOnScreen: true
width: 800
height: 600
background: Color {red: 0.9, green: 0.9, blue: 0.9}
onClose: operation() {System.exit(0);}
content: BorderPanel {
center: Canvas {
content:
[Group {
transform: translate(50, 50)
content:
[Rect {
height: 18
width: 50
arcHeight: 4
arcWidth: 4
stroke: blue
fill: white
},
Text {
content: bind scadaData.formatNumber(scadaData.numericData)
font: new Font("Monospaced", "PLAIN", 14)
x: 47
y: 4
halign: TRAILING
fill: bind scadaData.textColor(scadaData.numericData)
},
Text {
content: "m3/s"
x: 54
y: 6
}
]
},
Group {
transform: translate(200, 50)
content:
[
Rect {
height: 120
width: 55
stroke: blue
fill: white
},
Rect {
x: 10
y: 10
height: 100
width: 10
fill: LinearGradient {
x1: 0, y1: 0, x2: 0, y2: 1
stops:
[Stop {
offset: 0.1
color: red
},
Stop {
offset: 0.2
color: Color {red: 1.0, green: 0.5, blue: 0.0}
},
Stop {
offset: 0.4
color: Color {red: 0.5, green: 1.0, blue: 0.0}
}]
spreadMethod: PAD
}
},
Rect {
x: 10
y: 10
height: bind 100 - scadaData.numericData
width: 10
fill: Color {red: 0.5, green: 0.5, blue: 0.5}
},
Line {
x1: 23
y1: 10
x2: 23
y2: 110
stroke: black
},
Group {
transform: translate(23, 10)
content: foreach (i in [0,20..100])
Line {
transform: [translate(0, i)]
x1: 0
y1: 0
x2: 3
y2: 0
stroke: black
}
},
Group {
transform: translate(34, 10)
content: foreach (i in [0,20..100])
Text {
transform: [translate(0, 100 - i)]
content: "{i}"
font: new Font("Monospaced", "PLAIN", 8)
valign: MIDDLE
halign: LEADING
}
}
]
}
]
}
}
visible: true
}