-
Notifications
You must be signed in to change notification settings - Fork 18
/
wallboard-example.html
92 lines (86 loc) · 3.25 KB
/
wallboard-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
<head>
<title>Amazon Connect Wallboard</title>
<script language="javascript">
/*
* Set API Gateway invoke URL in the following line.
* Remember to include the stage name, region name and the wallboard
* definition name.
*/
API_URI = "https://xxxxxxxx.execute-api.us-east-1.amazonaws.com/wallboard/?Wallboard=yyyyyy"
RefreshInterval = 5000 // How often to retrieve data in milliseconds
var API_Client = null;
function GetWallboard() {
API_Client = new XMLHttpRequest();
API_Client.onreadystatechange = ProcessResponse;
API_Client.open("get", API_URI);
API_Client.setRequestHeader("Content-Type", "application/json");
API_Client.timeout = 10000
API_Client.ontimeout = ProcessTimeout;
API_Client.send();
setTimeout(GetWallboard, RefreshInterval);
}
function ProcessResponse() {
if (API_Client.readyState == XMLHttpRequest.DONE) {
try {
Result = API_Client.responseText;
document.getElementById("wallboard").innerHTML = Result
}
catch(error) {
console.log(error);
}
}
}
function ProcessTimeout() {
console.log("Query to API Gateway timed out")
}
</script>
<style>
/*
* "-yyyyyy" is from the wallboard definition in DynamoDB and the API
* Gateway call above - can also just use "table" if there's no other
* tables in this file
*/
table.wallboard-yyyyyy {width: 50%; table-layout: fixed;}
table.wallboard-yyyyyy td {text-align: center; vertical-align: top;}
</style>
</head>
<body>
<h1>This is an example dashboard/wallboard for <a href="https://aws.amazon.com/connect/">Amazon Connect</a></h1>
<p>
In the Javascript above, set the "API_URI" variable to the
following:
</p>
<p style="margin-left: 20px; font-weight: bold; font-style: italic;">
https://API_Gateway_Invoke_URL/wallboard/?Wallboard=Wallboard_Identifier
</p>
<p>
Where "API_Gateway_Invoke_URL" is found in the
<A href="https://aws.amazon.com/api-gateway/">API Gateway</A> console and the
"Wallboard_Identifer" is what you've called your dashboard/wallboard
in the <a href="https://aws.amazon.com/dynamodb/">DynamoDB</a> table. This
will have been configured in the YAML template when the dashboard/wallboard
was created.
</p>
<p>
The API returns a formatted HTML table that it places in the
"wallboard" div below. Colours for cells are set in the
dashboard/wallboard definition and are automatically returned in the table -
however, you can choose to use additional styles in the calling HTML page to
format the table. For example, you may choose to centre the data in each table
cell. This is deliberately done so that customers may display their
dashboard/wallboard however they like or can embed it in any HTML page as
required. Individual cells have unique classes and labels; within each cell
there is a separate div for static text and data. You'll find brief examples of
this in the HTML <head> section above.
</p>
<p>
You may also adjust the refresh interval by changing the
"RefreshInterval" variable in the code above.
</p>
<div id="wallboard"></div>
<script type="text/javascript">
GetWallboard();
</script>
</body>
</html>