Skip to content

Commit 0eebbb2

Browse files
jtguggedaljtguggedal
committed
Added common source files for BLE. Initial commit for nRF Light
1 parent bbbfbaf commit 0eebbb2

11 files changed

+961
-8
lines changed

‎common/img/nordic-logo-white.png

4.71 KB
Loading

‎robot/js/ble.js ‎common/js/ble.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
/*
2-
* Interface
2+
* Interface for BLE object
33
*
4-
* connect(serviceUUID, characteristicUUID, callbackOnConnect)
5-
* sendData(dataArray) - dataArray is a Uint8Array of max 20 bytes
4+
* connect(serviceUUID, characteristicUUID) - returns promise
5+
* disconnect() - returns promise
6+
* sendData(dataArray) - dataArray: Uint8Array of maximum 20 bytes
7+
* getDevice() - returns BLE device object
8+
* isConnected() - returns bool if a peripheral is connected
69
*
710
*/
811

912
/*jshint esversion: 6 */
1013

11-
var ble = (function() {
14+
var ble = (function(logEnabled) {
1215

1316
var device;
1417
var server;
1518
var service;
1619
var characteristic;
1720
var isConnected = false;
1821
var isBusy = false;
19-
var logEnabled = logEnabled | true;
22+
var logEnabled = false;
2023

21-
var connect = function(serviceUUID, characteristicUUID) {
24+
var connect = function(serviceUUID, characteristicUUID, _logEnabled) {
25+
logEnabled = _logEnabled | logEnabled;
2226
if (logEnabled)
2327
console.log("Scanning for devices with service UUID " + serviceUUID);
2428
return navigator.bluetooth.requestDevice({

‎common/js/helper.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
function qs(selector) {
3+
return document.querySelector(selector);
4+
}
5+
6+
function clickListener(el, cb) {
7+
qs(el).addEventListener("click", cb);
8+
}

‎light/css/style.css

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import url('https://fonts.googleapis.com/css?family=Lato|Hind');
2+
@import url('https://fonts.googleapis.com/css?family=Amaranth:700|Exo:800|Fugaz+One|Russo+One');
3+
4+
5+
* {
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
border-collapse:collapse;
11+
font-family: Hind;
12+
/*background: linear-gradient(to top right, #231138, #0ea6b5);*/
13+
/*background: linear-gradient(to top right, #031A28, #034C78);*/
14+
/*background: linear-gradient(to top right, #322946, #139ed4);*/
15+
/*background: linear-gradient(to top right, #1b242f, #5b7e92);*/
16+
/*background: linear-gradient(to top left, #44a08d, #093637);*/
17+
background: linear-gradient(to bottom right, #000f46, #1ccee0);
18+
margin: 0;
19+
background-repeat: no-repeat;
20+
background-attachment: fixed;
21+
color: white;
22+
}
23+
24+
h1 {
25+
margin-top: 40px;
26+
text-align: center;
27+
font-size: 45px;
28+
font-family: "Fugaz One";
29+
color: white;
30+
text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);
31+
}
32+
33+
34+
#wrapper {
35+
height:100%;
36+
width: 100%;
37+
border-collapse:collapse;
38+
display : table;
39+
}
40+
41+
42+
#disconnectWrapper {
43+
display: none;
44+
}
45+
46+
47+
#logoWrapper {
48+
display : table-row;
49+
vertical-align : bottom;
50+
opacity: 1;
51+
height: 1px;
52+
}
53+
54+
#logoWrapper img {
55+
margin-bottom: 30px;
56+
}
57+
58+
59+
#chooserWrapper {
60+
width: 255px;
61+
margin: 10px auto;
62+
margin-top: 30px;
63+
display: none;
64+
}
65+
66+
67+
.bold { font-weight: bold; }
68+
.center { text-align: center; }
69+
.center-div {margin-left: auto; margin-right: auto; }
70+
.unselectable { user-select: none; }
71+
72+
73+
74+
.btnWrapper {
75+
width: 250px;
76+
margin: 20px auto;
77+
}
78+
79+
80+
.btn {
81+
margin: auto;
82+
margin-top: 30px;
83+
padding: 6px 12px;
84+
width: 95px;
85+
font-size: 16px;
86+
font-weight: 700;
87+
text-align: center;
88+
border: 1px solid #ffffff;
89+
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2);
90+
cursor: pointer;
91+
user-select: none;
92+
color: white;
93+
}
94+
95+
#connectBtn {
96+
background-color: rgb(8, 110, 94);
97+
padding: 8px 6px;
98+
width: 160px;
99+
font-size: 26px;
100+
font-weight: 500;
101+
text-align: center;
102+
border: 2px solid #ffffff;
103+
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
104+
border-radius: 30px;
105+
cursor: pointer;
106+
user-select: none;
107+
background-color: rgb(63, 159, 221);
108+
/*background: linear-gradient(to top right, #1e5799 0%,#2989d8 50%,#207cca 61%,#7db9e8 100%);*/
109+
background-color: rgba(0, 0, 0, 0.5);
110+
color: white;
111+
}
112+
113+
#disconnectBtn {
114+
background-color: rgb(189, 37, 37);
115+
border-radius: 20px;
116+
}
117+
118+
119+
#description {
120+
width: 250px;
121+
}
122+
123+
#picker {
124+
display: inline-block;
125+
width: 220px;
126+
height: 200px;
127+
border: 2px solid white;
128+
}
129+
130+
#slide {
131+
display: inline-block;
132+
width: 30px;
133+
height: 200px;
134+
border: 2px solid white;
135+
}
136+
137+
138+
#chosenColor {
139+
margin: 20px auto;
140+
height: 30px;
141+
width: 90%;
142+
}
143+
144+
.selectorWrapper {
145+
display: block;
146+
margin: 20px;
147+
font-weight: bold;
148+
clear: both;
149+
}
150+
151+
.selectorLabel {
152+
display: inline-block;
153+
padding-top: 6px;
154+
}
155+
156+
.selectorInput {
157+
float: right;
158+
width: 60px;
159+
height: 40px;
160+
margin-left: 20px;
161+
text-align: center;
162+
font-size: 20px;
163+
font-weight: bold;
164+
}

‎light/css/themes.css

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* Common stuff */
2+
.picker-wrapper,
3+
.slide-wrapper {
4+
position: relative;
5+
float: left;
6+
}
7+
.picker-indicator,
8+
.slide-indicator {
9+
position: absolute;
10+
left: 0;
11+
top: 0;
12+
pointer-events: none;
13+
}
14+
.picker,
15+
.slide {
16+
cursor: crosshair;
17+
float: left;
18+
}
19+
20+
/* Default skin */
21+
22+
.cp-default {
23+
background-color: gray;
24+
padding: 12px;
25+
box-shadow: 0 0 40px #000;
26+
border-radius: 15px;
27+
float: left;
28+
}
29+
.cp-default .picker {
30+
width: 200px;
31+
height: 200px;
32+
}
33+
.cp-default .slide {
34+
width: 30px;
35+
height: 200px;
36+
}
37+
.cp-default .slide-wrapper {
38+
margin-left: 10px;
39+
}
40+
.cp-default .picker-indicator {
41+
width: 5px;
42+
height: 5px;
43+
border: 2px solid darkblue;
44+
-moz-border-radius: 4px;
45+
-o-border-radius: 4px;
46+
-webkit-border-radius: 4px;
47+
border-radius: 4px;
48+
opacity: .5;
49+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
50+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
51+
filter: alpha(opacity=50);
52+
background-color: white;
53+
}
54+
.cp-default .slide-indicator {
55+
width: 100%;
56+
height: 10px;
57+
left: -4px;
58+
opacity: .6;
59+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
60+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
61+
filter: alpha(opacity=60);
62+
border: 4px solid lightblue;
63+
-moz-border-radius: 4px;
64+
-o-border-radius: 4px;
65+
-webkit-border-radius: 4px;
66+
border-radius: 4px;
67+
background-color: white;
68+
}
69+
70+
/* Small skin */
71+
72+
.cp-small {
73+
padding: 5px;
74+
background-color: white;
75+
float: left;
76+
border-radius: 5px;
77+
}
78+
.cp-small .picker {
79+
width: 100px;
80+
height: 100px;
81+
}
82+
.cp-small .slide {
83+
width: 15px;
84+
height: 100px;
85+
}
86+
.cp-small .slide-wrapper {
87+
margin-left: 5px;
88+
}
89+
.cp-small .picker-indicator {
90+
width: 1px;
91+
height: 1px;
92+
border: 1px solid black;
93+
background-color: white;
94+
}
95+
.cp-small .slide-indicator {
96+
width: 100%;
97+
height: 2px;
98+
left: 0px;
99+
background-color: black;
100+
}
101+
102+
/* Fancy skin */
103+
104+
.cp-fancy {
105+
padding: 10px;
106+
/* background-color: #C5F7EA; */
107+
background: -webkit-linear-gradient(top, #aaa 0%, #222 100%);
108+
float: left;
109+
border: 1px solid #999;
110+
box-shadow: inset 0 0 10px white;
111+
}
112+
.cp-fancy .picker {
113+
width: 200px;
114+
height: 200px;
115+
}
116+
.cp-fancy .slide {
117+
width: 30px;
118+
height: 200px;
119+
}
120+
.cp-fancy .slide-wrapper {
121+
margin-left: 10px;
122+
}
123+
.cp-fancy .picker-indicator {
124+
width: 24px;
125+
height: 24px;
126+
background-image: url(http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/target.png);
127+
}
128+
.cp-fancy .slide-indicator {
129+
width: 30px;
130+
height: 31px;
131+
left: 30px;
132+
background-image: url(http://cdn1.iconfinder.com/data/icons/bluecoral/Left.png);
133+
}
134+
135+
/* Normal skin */
136+
137+
.cp-normal {
138+
padding: 10px;
139+
background-color: white;
140+
float: left;
141+
border: 4px solid #d6d6d6;
142+
box-shadow: inset 0 0 10px white;
143+
}
144+
.cp-normal .picker {
145+
width: 200px;
146+
height: 200px;
147+
}
148+
.cp-normal .slide {
149+
width: 30px;
150+
height: 200px;
151+
}
152+
.cp-normal .slide-wrapper {
153+
margin-left: 10px;
154+
}
155+
.cp-normal .picker-indicator {
156+
width: 5px;
157+
height: 5px;
158+
border: 1px solid gray;
159+
opacity: .5;
160+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
161+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
162+
filter: alpha(opacity=50);
163+
background-color: white;
164+
pointer-events: none;
165+
}
166+
.cp-normal .slide-indicator {
167+
width: 100%;
168+
height: 10px;
169+
left: -4px;
170+
opacity: .6;
171+
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
172+
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
173+
filter: alpha(opacity=60);
174+
border: 4px solid gray;
175+
background-color: white;
176+
pointer-events: none;
177+
}

0 commit comments

Comments
 (0)