2019-03-05 16:18:52 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<title>Visual Console Sandbox</title>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2019-03-07 17:20:24 +01:00
|
|
|
<link rel="stylesheet" type="text/css" media="screen" href="vc.main.css" />
|
2019-03-05 16:18:52 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="visual-console-container"></div>
|
|
|
|
|
</body>
|
2019-03-07 17:20:24 +01:00
|
|
|
<script src="vc.main.min.js"></script>
|
2019-03-05 16:18:52 +01:00
|
|
|
<script>
|
|
|
|
|
var container = document.getElementById("visual-console-container");
|
|
|
|
|
|
|
|
|
|
if (container != null) {
|
|
|
|
|
var props = {
|
|
|
|
|
id: 1,
|
|
|
|
|
groupId: 0,
|
|
|
|
|
name: "Test Visual Console",
|
|
|
|
|
width: 800,
|
|
|
|
|
height: 300,
|
|
|
|
|
backgroundURL: null,
|
|
|
|
|
backgroundColor: "rgb(86, 86, 86)",
|
|
|
|
|
isFavorite: false
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var staticGraphRawProps = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 1,
|
|
|
|
|
type: 0, // Static graph = 0
|
|
|
|
|
label: null,
|
|
|
|
|
isLinkEnabled: false,
|
|
|
|
|
isOnTop: false,
|
|
|
|
|
parentId: null,
|
|
|
|
|
aclGroupId: null,
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 100,
|
|
|
|
|
y: 50,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 70,
|
|
|
|
|
height: 70,
|
|
|
|
|
// Agent props.
|
|
|
|
|
agentId: null,
|
|
|
|
|
agentName: null,
|
|
|
|
|
// Module props.
|
|
|
|
|
moduleId: null,
|
|
|
|
|
moduleName: null,
|
|
|
|
|
// Custom props.
|
|
|
|
|
imageSrc:
|
|
|
|
|
"http://localhost/pandora_console/images/console/icons/bridge_ok.png",
|
|
|
|
|
showLastValueTooltip: "default"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var colorCloudRawProps = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 2,
|
|
|
|
|
type: 20, // Color cloud = 20
|
|
|
|
|
label: null,
|
|
|
|
|
labelText: "CLOUD",
|
|
|
|
|
isLinkEnabled: false,
|
|
|
|
|
isOnTop: false,
|
|
|
|
|
parentId: null,
|
|
|
|
|
aclGroupId: null,
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 300,
|
|
|
|
|
y: 50,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 150,
|
|
|
|
|
height: 150,
|
|
|
|
|
// Agent props.
|
|
|
|
|
agentId: null,
|
|
|
|
|
agentName: null,
|
|
|
|
|
// Module props.
|
|
|
|
|
moduleId: null,
|
|
|
|
|
moduleName: null,
|
|
|
|
|
// Custom props.
|
|
|
|
|
color: "rgb(100, 50, 245)"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var digitalClockRawProps = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 3,
|
|
|
|
|
type: 19, // Clock = 19
|
|
|
|
|
label: null,
|
|
|
|
|
isLinkEnabled: false,
|
|
|
|
|
isOnTop: false,
|
|
|
|
|
parentId: null,
|
|
|
|
|
aclGroupId: null,
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 60,
|
|
|
|
|
y: 150,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 300,
|
|
|
|
|
height: 150,
|
|
|
|
|
// Custom props.
|
|
|
|
|
clockType: "digital",
|
|
|
|
|
clockFormat: "datetime",
|
|
|
|
|
clockTimezone: "Madrid",
|
|
|
|
|
clockTimezoneOffset: 60,
|
|
|
|
|
showClockTimezone: true,
|
|
|
|
|
color: "white"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var digitalClockRawProps2 = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 4,
|
|
|
|
|
type: 19, // Clock = 19
|
|
|
|
|
label: null,
|
|
|
|
|
isLinkEnabled: false,
|
|
|
|
|
isOnTop: false,
|
|
|
|
|
parentId: null,
|
|
|
|
|
aclGroupId: null,
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 10,
|
|
|
|
|
y: 250,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 100,
|
|
|
|
|
height: 50,
|
|
|
|
|
// Custom props.
|
|
|
|
|
clockType: "digital",
|
|
|
|
|
clockFormat: "datetime",
|
|
|
|
|
clockTimezone: "Madrid",
|
|
|
|
|
clockTimezoneOffset: 60,
|
|
|
|
|
showClockTimezone: true,
|
|
|
|
|
color: "#82B92E"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var analogicClockRawProps = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 5,
|
|
|
|
|
type: 19, // Clock = 19
|
|
|
|
|
label: null,
|
|
|
|
|
isLinkEnabled: false,
|
|
|
|
|
isOnTop: false,
|
|
|
|
|
parentId: null,
|
|
|
|
|
aclGroupId: null,
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 500,
|
|
|
|
|
y: 50,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 200,
|
|
|
|
|
height: 200,
|
|
|
|
|
// Custom props.
|
|
|
|
|
clockType: "analogic",
|
|
|
|
|
clockFormat: "datetime",
|
|
|
|
|
clockTimezone: "Copenhagen",
|
|
|
|
|
clockTimezoneOffset: 60,
|
|
|
|
|
showClockTimezone: true
|
|
|
|
|
};
|
|
|
|
|
|
2019-03-08 13:32:56 +01:00
|
|
|
var boxRawProps = {
|
|
|
|
|
// Generic props.
|
|
|
|
|
id: 6,
|
|
|
|
|
type: 12, // Box = 12
|
|
|
|
|
// Position props.
|
|
|
|
|
x: 720,
|
|
|
|
|
y: 20,
|
|
|
|
|
// Size props.
|
|
|
|
|
width: 50,
|
|
|
|
|
height: 50,
|
|
|
|
|
// Custom props.
|
|
|
|
|
borderWidth: 10,
|
|
|
|
|
borderColor: "white",
|
|
|
|
|
fillColor: "black"
|
|
|
|
|
};
|
|
|
|
|
|
2019-03-05 16:18:52 +01:00
|
|
|
var items = [
|
|
|
|
|
staticGraphRawProps,
|
|
|
|
|
colorCloudRawProps,
|
|
|
|
|
digitalClockRawProps,
|
|
|
|
|
digitalClockRawProps2,
|
2019-03-08 13:32:56 +01:00
|
|
|
analogicClockRawProps,
|
|
|
|
|
boxRawProps
|
2019-03-05 16:18:52 +01:00
|
|
|
];
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
var visualConsole = new VisualConsole(container, props, items);
|
|
|
|
|
console.log(visualConsole);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log("ERROR", error.message);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
