-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (153 loc) · 6.24 KB
/
index.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE HTML>
<html>
<head>
<title>Spacebrew Button (Boolean Example)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/sb-1.4.1.js"></script>
<script type="text/javascript">
window.onload = function(){
setup();
}
// Spacebrew Object
var sb,
app_name = "Data Trail";
/**
* setup Configure spacebrew connection and adds the mousedown listener.
*/
function setup (){
// we make a random name, which allows you connect more than one
// of this example from the same computer
// passing the "name" argument in a query string overrides this!
var random_id = "0000" + Math.floor(Math.random() * 10000);
app_name = app_name + ' ' + random_id.substring(random_id.length-4);
// create spacebrew client object
sb = new Spacebrew.Client({reconnect:true});
// set the base description
sb.name(app_name);
sb.description("This spacebrew client sends and receives boolean messages.");
// configure the publication and subscription feeds
sb.addPublish( "redPress", "boolean", "false" );
sb.addPublish( "greenPress", "boolean", "false" );
sb.addPublish( "bluePress", "boolean", "false" );
sb.addSubscribe( "toggleBackground", "boolean" );
// override Spacebrew events - this is how you catch events coming from Spacebrew
sb.onBooleanMessage = onBooleanMessage;
sb.onOpen = onOpen;
// connect to spacbrew
sb.connect();
// listen to the mouse
//RED BUTTON
var button = document.getElementById("redButton");
button.addEventListener("mouseup", onRedButtonPress);
button.addEventListener("mousedown", onRedButtonRelease);
button.addEventListener("touchstart", onRedButtonPress);
button.addEventListener("touchend", onRedButtonRelease);
var button = document.getElementById("greenButton");
button.addEventListener("mouseup", onGreenButtonPress);
button.addEventListener("mousedown", onGreenButtonRelease);
button.addEventListener("touchstart", onGreenButtonPress);
button.addEventListener("touchend", onGreenButtonRelease);
var button = document.getElementById("blueButton");
button.addEventListener("mouseup", onBlueButtonPress);
button.addEventListener("mousedown", onBlueButtonRelease);
button.addEventListener("touchstart", onBlueButtonPress);
button.addEventListener("touchend", onBlueButtonRelease);
}
/**
* Function that is called when Spacebrew connection is established
*/
function onOpen() {
var message = "Connected as <strong>" + sb.name() + "</strong>. ";
if (sb.name() === app_name) {
message += "<br>You can customize this app's name in the query string <br>by adding <strong>name=your_app_name</strong>."
}
var nameElement = document.getElementById("name");
nameElement.innerHTML = message;
}
/**
* Function that is called whenever the button is pressed.
* @param {Event object} evt Holds information about the button press event
*/
function onRedButtonPress (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onRedButtonPress] button has been pressed");
sb.send("redPress", "boolean", "true");
}
/**
* Function that is called whenever the button is released.
* @param {Event object} evt Holds information about the button press event
*/
function onRedButtonRelease (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onRedButtonRelease] button has been released");
sb.send("redPress", "boolean", "false");
}
function onGreenButtonPress (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onGreenButtonPress] button has been pressed");
sb.send("greenPress", "boolean", "true");
}
/**
* Function that is called whenever the button is released.
* @param {Event object} evt Holds information about the button press event
*/
function onGreenButtonRelease (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onGreenButtonRelease] button has been released");
sb.send("greenPress", "boolean", "false");
}
function onBlueButtonPress (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onBlueButtonPress] button has been pressed");
sb.send("bluePress", "boolean", "true");
}
/**
* Function that is called whenever the button is released.
* @param {Event object} evt Holds information about the button press event
*/
function onBlueButtonRelease (evt){
// this line prevents the event being called twice
// on mobile
evt.preventDefault();
console.log("[onBlueButtonRelease] button has been released");
sb.send("bluePress", "boolean", "false");
}
/**
* onBooleanMessage Function that is called whenever new spacebrew boolean messages are received.
* It accepts two parameters:
* @param {String} name Holds name of the subscription feed channel
* @param {Boolean} value Holds value received from the subscription feed
*/
function onBooleanMessage( name, value ){
console.log("[onBooleanMessage] boolean message received ", value);
if (value) {
document.body.style.background = "rgb(100,255,100)";
} else {
document.body.style.background = "rgb(220,220,220)";
}
}
</script>
</head>
<body>
<div id="container">
<h1><span>Click to send</span><br>a message to Spacebrew</h1>
<a class="button red" id="redButton">Red Press</a>
<a class="button green" id="greenButton">Green Press</a>
<a class="button blue" id="blueButton">Blue Press</a>
</br>
<div id="name">Trying to connect</div>
</div>
</body>
</html>