1function imageRefresh(id) {
2 img = document.getElementById(id);
3 var d = new Date;
4 var http = img.src;
5 if (http.indexOf("?t=") != -1) { http = http.split("?t=")[0]; }
6 img.src = http + '?t=' + d.getTime();
7}
8
9function startWebsocket() {
10 ws = new WebSocket("ws://" + window.location.host + ":5678/");
11 ws.onclose = function(){
12 //websocket = null;
13 setTimeout(function(){startWebsocket()}, 10000);
14 }
15 return ws;
16}
17
18var websocket = startWebsocket();
19
20//if (window.obssstudio) {
21//}
22
23var prev = document.querySelector('#prev'),
24 next = document.querySelector('#next'),
25 first = document.querySelector('#first'),
26 last = document.querySelector('#last'),
27 black = document.querySelector('#black'),
28 white = document.querySelector('#white'),
29 slide_label = document.querySelector('#slide_label'),
30 current = document.querySelector('#current'),
31 total = document.querySelector('#total'),
32 users = document.querySelector('.users'),
33 prev_img = document.querySelector('#prev_img'),
34 next_img = document.querySelector('#next_img'),
35 current_div = document.querySelector('#current_div'),
36 next_div = document.querySelector('#next_div'),
37 show_current = document.querySelector('#show_current'),
38 show_next = document.querySelector('#show_next');
39
40prev.onclick = function (event) {
41 websocket.send(JSON.stringify({action: 'prev'}));
42}
43
44next.onclick = function (event) {
45 websocket.send(JSON.stringify({action: 'next'}));
46}
47
48first.onclick = function (event) {
49 websocket.send(JSON.stringify({action: 'first'}));
50}
51
52last.onclick = function (event) {
53 websocket.send(JSON.stringify({action: 'last'}));
54}
55
56black.onclick = function (event) {
57 websocket.send(JSON.stringify({action: 'black'}));
58}
59
60white.onclick = function (event) {
61 websocket.send(JSON.stringify({action: 'white'}));
62}
63
64current.onblur = function (event) {
65 websocket.send(JSON.stringify({action: 'goto', value: current.value}));
66}
67
68current.addEventListener('keyup',function(e){
69 if (e.which == 13) this.blur();
70});
71
72function sync_current() {
73 console.log("State of current checkbox changed");
74 if (show_current.checked) {
75 current_div.style.display = "block";
76 slide_label.style.display = "none";
77 next_div.style.width = "25%";
78 } else {
79 current_div.style.display = "none";
80 slide_label.style.display = "block";
81 next_div.style.width = "95%";
82 }
83 saveSettings();
84}
85show_current.onclick = sync_current;
86
87function sync_next() {
88 console.log("State of next checkbox changed");
89 if (show_next.checked) {
90 next_div.style.display = "block";
91 current_div.style.width = "70%";
92 } else {
93 next_div.style.display = "none";
94 current_div.style.width = "95%";
95 }
96 saveSettings();
97}
98show_next.onclick = sync_next;
99
100websocket.onmessage = function (event) {
101 data = JSON.parse(event.data);
102 switch (data.type) {
103 case 'state':
104 var d = new Date;
105 switch (data.visible) {
106 case 3:
107 current_img.src = "/black.jpg";
108 break;
109 case 4:
110 current_img.src = "/white.jpg";
111 break;
112 default:
113 current_img.src = "/cache/" + data.current + ".jpg?t=" + d.getTime();
114 break;
115 }
116 if (data.current == data.total + 1) {
117 //next_img.src = "/cache/" + (data.total + 1) + ".jpg?t=" + d.getTime();
118 next_img.src = "/cache/" + (data.total + 1) + ".jpg";
119 } else {
120 //next_img.src = "/cache/" + (data.current + 1) + ".jpg?t=" + d.getTime();
121 next_img.src = "/cache/" + (data.current + 1) + ".jpg";
122 }
123
124 if (document.activeElement != current) {
125 current.value = data.current;
126 }
127 total.textContent = data.total;
128 break;
129 case 'users':
130 users.textContent = (
131 data.count.toString() + " client" +
132 (data.count == 1 ? "" : "s"));
133 break;
134 default:
135 console.error(
136 "unsupported event", data);
137 }
138};
139
140var interval = setInterval(refresh, 5000);
141
142function refresh() {
143 websocket.send(JSON.stringify({action: 'refresh'}));
144}