Firefly/tom.html at master · jay575/Firefly · GitHub

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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
	<head>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/addons/p5.dom.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

	<script>
	var height=10;
	var lights;
	var url, username;
	var address, userName, addressLabel, nameLabel, connectButton;

	function setup() {
		noCanvas();
		// set up the address and username boxes:
		address = createInput();
		addressLabel = createSpan("IP address:");
		addressLabel.position(10,10);
		address.position(100, 10);
		address.attribute('type', 'text');
		userName = createInput();
		nameLabel = createSpan("user name:");
		nameLabel.position(10,40);
		userName.position(100, 40);
		userName.attribute('type', 'text');

		// set up the connect button:
		connectButton = createButton("connect");
		connectButton.position(100, 70);
		connectButton.mouseClicked(connect);
	}

	/*
		this function makes the HTTP GET call
		to get the light data
	*/
	function connect() {
		url = "http://" + address.elt.value + '/api/' + userName.elt.value + '/lights/';
		httpGet( url, getLights);
	}

	/*
		this function uses the response from the hub
		to creat a new div for the UI elements
	*/
	function getLights(result) {
	 	lights = JSON.parse(result);			// parse the HTTP response
		for (l in lights) {						// iterate over each light in the response
			var lightsDiv = createDiv();		// create a DIV
			lightsDiv.id(l);						// name it
			lightsDiv.position(10, height);	// position it
			lightsDiv.html(lights[l].name);	// set the HTML in it
			height += 160;							// increment height for the next div
			createControl(lights[l], lightsDiv);	// create the controls inside it
		}
	}

	/*
		this function creates UI controls from the lights data
		returned by the hub
	*/
	function createControl(thisLight, thisDiv) {
		var nodes = [];								// array for all the nodes you'll make
		var state = thisLight.state;				// state of this light

		var on = createInput('lightOn');			// a checkbox for the on property
		on.attribute('type', 'checkbox');
		if (state.on) {								// checkbox property you care about
			on.attribute('checked', state.on);	// is called 'checked'
		}
		on.id('on');									// set the ID (for changeProperty() below)
		on.mouseClicked(changeProperty);			// set the mouseClicked callback
		var onLabel = createSpan("on: ");		// create a text label
		nodes.push(on);								// add it to the nodes array
		nodes.push(onLabel);							// add it to the nodes array

		var bri = createSlider(0, 254, state.bri);	// a slider for brightness
		bri.id('bri');
		bri.mouseClicked(changeProperty);
		var briLabel = createSpan("brightness: ");
		nodes.push(bri);								// add it to the nodes array
		nodes.push(briLabel);						// add it to the nodes array

		var sat = createSlider(0, 254,state.sat);		// a slider for saturation
		sat.id('sat');
		sat.mouseClicked(changeProperty);
		var satLabel = createSpan("saturation: ");
		nodes.push(sat);								// add it to the nodes array
		nodes.push(satLabel);						// add it to the nodes array

		var hue = createSlider(0, 65535,state.hue);	// a slider for hue
		hue.id('hue');
		hue.mouseClicked(changeProperty);
		var hueLabel = createSpan("hue: ");
		nodes.push(hue);								// add it to the nodes array
		nodes.push(hueLabel);						// add it to the nodes array

		var ct = createSlider(153, 500,state.ct);	// a slider for color temp
		ct.id('ct');
		ct.mouseClicked(changeProperty);
		var ctLabel = createSpan("colortemp: ");
		nodes.push(ct);								// add it to the nodes array
		nodes.push(ctLabel);							// add it to the nodes array

		var colormode = createSpan(state.colormode);	// a label for colormode
		colormode.id('colormode');
		var cmLabel = createSpan("colormode: ");
		nodes.push(colormode);						// add it to the nodes array
		nodes.push(cmLabel);							// add it to the nodes array


		for (thisNode in nodes) {					// make all the nodes children of
			thisDiv.child(nodes[thisNode]);		// the main div
		}

		// position the nodes:
		onLabel.position(160,0);
		on.position(190,0);
		briLabel.position(10,20);
		bri.position(100,20);
		satLabel.position(10,40);
		sat.position(100,40);
		hueLabel.position(10,60);
		hue.position(100,60);
		ctLabel.position(10,80);
		ct.position(100,80);
		cmLabel.position(10,100);
		colormode.position(100,100);
	}

	/*
		this function uses the UI elements to change
		the properties of the lights
	*/
	function changeProperty() {
		var thisControl = event.target.id;				// what did you click on?
		var thisLight = event.target.parentNode.id;	// get the parent, for the light number
		var value = event.target.value;					// get the value
		if (thisControl === 'on') {						// 'on' is a special case
			value = event.target.checked;					// because of the checkbox
		}
		// assemble the name and the value into a JSON string:
		var JsonString = '{\"' + thisControl + '\":' + value + '}';
		var payload = JSON.parse(JsonString);			// convert string to JSON object
		setLight(thisLight, payload)						// make the HTTP call
	}

	/*
		this function makes an HTTP PUT call to change
		the properties of the lights
	*/
	function setLight(lightNumber, data) {
		var path = url + lightNumber + '/state';		// assemble the full URL
		var content = JSON.stringify(data);				// convert JSON obj to string

		// HttpDo seems to have a bug in it when it comes to PUT, so I've
		// used jQuery instead here.

		/*
		httpDo( path, "PUT", content, 'json', function(response) {
			println(response);
			getLights();
		});
		*/

		console.log(content);
		console.log(payload);

		var request = $.ajax({
			type: "PUT",					// use the PUT method
			url: path,						// URL to call
			data: content,					// body of the request
			dataType: 'text/json'		// data type of the body
			}, function(response) {		// callback function
				println(response);		// server (hub) response
				getLights();				// refresh the lights from the hub
			});
	}

	</script>
	</head>
	<body>
	</body>
</html>