dergeorg/NtopngGlobe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

server & websocket adress & port added to setting

Browse Source
This commit is contained in:
Georg Reisinger
2022-02-02 11:48:35 +01:00
parent 9a4fcee3dd
commit adeb02f7ce
6 changed files with 88 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/conf/settings.json
View File

@ -44,5 +44,11 @@
"timer": {
"del": 30,
"refreshTimer": 1
},
"ips": {
"home": "192.168.1.",
"loopback": "127.0.0.1",
"server": "localhost:3100",
"serverws": "localhost:8999"
}
}

135
public/globe.html
View File

@ -80,77 +80,72 @@
item.cli_os + " \nis_srv_vic " + item.is_srv_vic
}
function componentDidMount() {
var data = {};
if ("WebSocket" in window) {
console.log("WebSocket is supported by your Browser!");
const ws = new WebSocket('ws://localhost:8999');
ws.onopen = function () {
// Web Socket is connected, send data using send()
console.log("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
console.log("Message is received...");
componentDidMount()
};
ws.onclose = function () {
// websocket is closed.
console.log("Connection is closed...");
};
}else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser! A left click on the globe will refresh the data");
}
axios.get("http://localhost:3100/display").then(res => {
data = res.data;
console.log(data)
ReactDOM.render(
<Globe
onGlobeClick={() => {
axios.get("http://localhost:3100/display").then(res => {
data = res.data;
componentDidMount()
});
}}
globeImageUrl="/images/earth-night.jpg"
backgroundImageUrl="/images/night-sky.png"
backgroundColor={"#000011"}
// edges
arcsData={data.arc}
arcColor={(d) => [d.color[0], d.color[1]]}
arcDashLength={data.settings.sizes.globe.arcDashLength}
arcAltitudeAutoScale={data.settings.sizes.globe.arcAltitudeAutoScale}
arcDashGap={data.settings.sizes.globe.arcDashGap}
arcDashInitialGap={data.settings.sizes.globe.arcDashInitialGap}
arcDashAnimateTime={data.settings.sizes.globe.arcDashAnimateTime}
arcStroke={data.settings.sizes.globe.arcStroke}
arcLabel={(d) => generateHoverText(d.txrx)}
onArcClick={function (d) {
axios.get("http://localhost:3100/alert/" + d.uid).then(res => {
const resdata = res.data;
alert(generateClickText(resdata))
})
}}
//arcCircularResolution={64}
// arcLabel={() => "test"}
// labels
labelsData={data.loc}
labelLat={(d) => d.lat}
labelLng={(d) => d.lng}
labelText={(d) => d.name}
// labelSize={(d) => 0.5 + d.size}
labelSize={0}
labelDotRadius={0.4}
// labelDotRadius={(d) => 0.5 + d.size}
labelColor={(d) => d.color}
labelResolution={2}
enablePointerInteraction={true}
/>,
document.getElementById('globeViz')
);
}).catch(err => alert(err))
function componentDidMount() {
axios.get('/conf/settings.json').then(res => {
const settings = res.data;
var data = {};
if ("WebSocket" in window) {
console.log("WebSocket is supported by your Browser!");
const ws = new WebSocket('ws://'+settings.ips.server);
ws.onmessage = function (evt) {
var received_msg = evt.data;
componentDidMount()
};
}else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser! A left click on the globe will refresh the data");
}
axios.get("http://"+settings.ips.server+"/display").then(res => {
data = res.data;
console.log(data)
ReactDOM.render(
<Globe
onGlobeClick={() => {
axios.get("http://"+settings.ips.server+"/display").then(res => {
data = res.data;
componentDidMount()
});
}}
globeImageUrl="/images/earth-night.jpg"
backgroundImageUrl="/images/night-sky.png"
backgroundColor={"#000011"}
// edges
arcsData={data.arc}
arcColor={(d) => [d.color[0], d.color[1]]}
arcDashLength={data.settings.sizes.globe.arcDashLength}
arcAltitudeAutoScale={data.settings.sizes.globe.arcAltitudeAutoScale}
arcDashGap={data.settings.sizes.globe.arcDashGap}
arcDashInitialGap={data.settings.sizes.globe.arcDashInitialGap}
arcDashAnimateTime={data.settings.sizes.globe.arcDashAnimateTime}
arcStroke={data.settings.sizes.globe.arcStroke}
arcLabel={(d) => generateHoverText(d.txrx)}
onArcClick={function (d) {
axios.get("http://"+settings.ips.server+"/alert/" + d.uid).then(res => {
const resdata = res.data;
alert(generateClickText(resdata))
})
}}
//arcCircularResolution={64}
// arcLabel={() => "test"}
// labels
labelsData={data.loc}
labelLat={(d) => d.lat}
labelLng={(d) => d.lng}
labelText={(d) => d.name}
// labelSize={(d) => 0.5 + d.size}
labelSize={0}
labelDotRadius={0.4}
// labelDotRadius={(d) => 0.5 + d.size}
labelColor={(d) => d.color}
labelResolution={2}
enablePointerInteraction={true}
/>,
document.getElementById('globeViz')
);
}).catch(err => alert(err))
})
}
componentDidMount()