Skip to content

Commit b605367

Browse files
oxxostudiooxxostudio
committed
add a button to check board online or error
1 parent 9909fae commit b605367

5 files changed

Lines changed: 151 additions & 29 deletions

File tree

‎code.js‎

Lines changed: 89 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -205,9 +205,68 @@ Code.getBBox_ = function (element) {
205205
y: y
206206
};
207207
};
208+
Code.checkDeviceOnline = function (device) {
209+
device = {};
210+
device.inputArea = document.getElementById('input-device');
211+
device.btn = document.getElementById('check-btn');
212+
device.icon = document.getElementById('check-icon');
213+
214+
if (!localStorage.boardCheckOpen) {
215+
localStorage.boardCheckOpen = 0;
216+
}
217+
218+
device.btn.onclick = function () {
219+
if (localStorage.boardCheckOpen == 1) {
220+
localStorage.boardCheckOpen = 0;
221+
device.inputArea.className = device.inputArea.className.replace("open", "");
222+
} else {
223+
localStorage.boardCheckOpen = 1;
224+
device.inputArea.className = device.inputArea.className + "open";
225+
}
226+
};
227+
228+
device.check = function (v) {
229+
device.boardEvent = webduino.BoardEvent,
230+
device.board = new webduino.WebArduino(v);
231+
device.icon.setAttribute('class', 'check icon21 board-error');
232+
233+
device.board.on(device.boardEvent.READY, function () {
234+
console.log(v + ' : ok');
235+
device.icon.setAttribute('class', 'check icon21 board-online');
236+
});
208237

209-
Code.loadDemoArea = function(demo){
210-
if(document.getElementById('demo-area')){
238+
device.board.on(device.boardEvent.ERROR, function () {
239+
device.icon.setAttribute('class', 'check icon21 board-error');
240+
});
241+
}
242+
243+
device.inputArea.oninput = function () {
244+
localStorage.boardState = this.value;
245+
if (this.value.length > 3) {
246+
device.check(this.value.toString());
247+
} else {
248+
device.icon.setAttribute('class', 'check icon21');
249+
}
250+
};
251+
252+
if (localStorage.boardState) {
253+
device.inputArea.value = localStorage.boardState;
254+
device.inputArea.oninput();
255+
}
256+
257+
if (localStorage.boardCheckOpen == 0) {
258+
device.inputArea.className = device.inputArea.className.replace("open", "");
259+
} else if (localStorage.boardCheckOpen == 1 && device.inputArea.value.length < 4) {
260+
localStorage.boardCheckOpen = 0;
261+
device.inputArea.className = device.inputArea.className.replace("open", "");
262+
} else {
263+
device.inputArea.className = device.inputArea.className + "open";
264+
}
265+
266+
}
267+
268+
Code.loadDemoArea = function (demo) {
269+
if (document.getElementById('demo-area')) {
211270
demo = {};
212271
demo.btn = document.getElementById('demoButton');
213272
demo.area = document.getElementById('demo-area');
@@ -219,49 +278,49 @@ Code.loadDemoArea = function(demo){
219278
demo.area.style.height = (demo.contentHeight - 130) + 'px';
220279
demo.resizeBar = document.getElementById('demo-resize-bar');
221280

222-
if(localStorage.demoAreaWidth){
281+
if (localStorage.demoAreaWidth) {
223282
demo.area.style.width = localStorage.demoAreaWidth;
224283
}
225284

226-
window.addEventListener('resize',function(){
285+
window.addEventListener('resize', function () {
227286
demo.contentHeight = document.getElementById('content_blocks').offsetHeight;
228287
demo.area.style.height = (demo.contentHeight - 130) + 'px';
229288
});
230289

231-
demo.resizeBar.onmousedown = function(e,dr){
290+
demo.resizeBar.onmousedown = function (e, dr) {
232291
demo.area.style.opacity = '0.4';
233-
dr={};
292+
dr = {};
234293
dr.ox = e.pageX;
235294
dr.dw = demo.area.offsetWidth;
236295
demo.area.className = demo.area.className + " resize";
237-
document.onmousemove = function(event){
296+
document.onmousemove = function (event) {
238297
dr.rx = event.pageX;
239-
demo.area.style.width = dr.dw-dr.rx+dr.ox-20+'px';
298+
demo.area.style.width = dr.dw - dr.rx + dr.ox - 20 + 'px';
240299
localStorage.demoAreaWidth = demo.area.style.width;
241300
}
242301
}
243302

244-
document.onmouseup = function(){
303+
document.onmouseup = function () {
245304
demo.area.style.opacity = '1';
246305
demo.area.className = demo.area.className.replace(" resize", "");
247306
document.onmousemove = null;
248307
}
249308

250-
demo.content = function(p,s){
251-
s={};
252-
for(s.i=0; s.i<demo.da.length; s.i++){
309+
demo.content = function (p, s) {
310+
s = {};
311+
for (s.i = 0; s.i < demo.da.length; s.i++) {
253312
demo.da[s.i].className = demo.da[s.i].className.replace("show", "");
254313
}
255-
demo.option[p-1].selected = true;
256-
document.getElementById('demo-area-0'+p).className = document.getElementById('demo-area-0'+p).className + " show";
314+
demo.option[p - 1].selected = true;
315+
document.getElementById('demo-area-0' + p).className = document.getElementById('demo-area-0' + p).className + " show";
257316
localStorage.demoAreaSelect = p;
258317
}
259318

260319
demo.btn.onclick = function () {
261-
if(localStorage.demoArea=='open'){
320+
if (localStorage.demoArea == 'open') {
262321
demo.area.className = demo.area.className.replace("show", "");
263322
localStorage.demoArea = 'close';
264-
}else{
323+
} else {
265324
demo.area.className = demo.area.className.replace("show", "");
266325
demo.area.className = demo.area.className + "show";
267326
localStorage.demoArea = 'open';
@@ -272,37 +331,37 @@ Code.loadDemoArea = function(demo){
272331
localStorage.demoArea = 'close';
273332
};
274333

275-
demo.select.addEventListener('change',function(s){
276-
s={};
334+
demo.select.addEventListener('change', function (s) {
335+
s = {};
277336
s.selectValue = this.value;
278-
s.selectId = 'demo-area-0'+s.selectValue;
337+
s.selectId = 'demo-area-0' + s.selectValue;
279338
localStorage.demoAreaSelect = s.selectValue;
280-
for(s.i=0; s.i<demo.da.length; s.i++){
339+
for (s.i = 0; s.i < demo.da.length; s.i++) {
281340
demo.da[s.i].className = demo.da[s.i].className.replace("show", "");
282341
}
283342
document.getElementById(s.selectId).className = document.getElementById(s.selectId).className + " show"
284343
});
285344

286-
if(localStorage.demoArea=='open'){
345+
if (localStorage.demoArea == 'open') {
287346
demo.area.className = demo.area.className.replace("show", "");
288347
demo.area.className = demo.area.className + "show";
289-
}else{
348+
} else {
290349
demo.area.className = demo.area.className.replace("show", "");
291350
}
292351

293-
if(localStorage.demoAreaSelect==1){
352+
if (localStorage.demoAreaSelect == 1) {
294353
demo.content(1);
295-
}else if(localStorage.demoAreaSelect==2){
354+
} else if (localStorage.demoAreaSelect == 2) {
296355
demo.content(2);
297-
}else if(localStorage.demoAreaSelect==3){
356+
} else if (localStorage.demoAreaSelect == 3) {
298357
demo.content(3);
299-
}else if(localStorage.demoAreaSelect==4){
358+
} else if (localStorage.demoAreaSelect == 4) {
300359
demo.content(4);
301-
}else if(localStorage.demoAreaSelect==5){
360+
} else if (localStorage.demoAreaSelect == 5) {
302361
demo.content(5);
303-
}else if(localStorage.demoAreaSelect==6){
362+
} else if (localStorage.demoAreaSelect == 6) {
304363
demo.content(6);
305-
}else if(localStorage.demoAreaSelect==7){
364+
} else if (localStorage.demoAreaSelect == 7) {
306365
demo.content(7);
307366
}
308367
}
@@ -499,6 +558,7 @@ Code.init = function () {
499558
// Lazy-load the syntax-highlighting.
500559
window.setTimeout(Code.importPrettify, 1);
501560
window.setTimeout(Code.loadDemoArea, 1);
561+
window.setTimeout(Code.checkDeviceOnline, 1);
502562

503563
};
504564

‎css/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,48 @@ pre.content {
165165
margin-top: 15px;
166166
margin-right: 15px;
167167
}
168+
169+
#check-device-online{
170+
display:inline-block;
171+
background:#eee;
172+
opacity:.9;
173+
box-sizing: border-box;
174+
padding: 5px 12px;
175+
margin: -7px 0 4px;
176+
height: 29px;
177+
border-radius: 5px;
178+
vertical-align: bottom;
179+
cursor: pointer;
180+
transition: .2s;
181+
}
182+
#input-device{
183+
display:inline-block;
184+
width:0;
185+
border:none;
186+
outline:none;
187+
padding:0;
188+
transition: .3s;
189+
box-shadow:inset #999 0 0 3px;
190+
border-radius:3px;
191+
background:#333;
192+
color:#fff;
193+
margin:0 3px 12px -5px;
194+
vertical-align: middle;
195+
opacity:0;
196+
}
197+
#input-device.open{
198+
width:45px;
199+
padding:3px 5px;
200+
opacity:1;
201+
}
202+
.check-btn{
203+
display:inline-block;
204+
}
205+
206+
#check-device-online:hover{
207+
opacity:1;
208+
}
209+
168210
/* Buttons */
169211

170212
button {
@@ -195,6 +237,19 @@ button {
195237
background-position: -61px 0px;
196238
}
197239

240+
.check{
241+
display:inline-block;
242+
background-position: -107px 0px;
243+
}
244+
245+
.check.board-online{
246+
background-position: -146px 0px;
247+
}
248+
249+
.check.board-error{
250+
background-position: -126px 0px;
251+
}
252+
198253
header{
199254
width:100%;
200255
height:80px;

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<script src="components/blockly/javascript_compressed.js"></script>
2525
<script src="lib/handlebars-3.0.3.min.js"></script>
2626
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
27+
<script src="https://webduino.io/components/webduino-js/dist/webduino-base.min.js"></script>
2728
<script src="code.js"></script>
2829
<script src="webduino-blockly.js"></script>
2930
<script src="webduino-fish.js"></script>

‎media/icons.png‎

420 Bytes
Loading

‎views/index.handlebars‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@
1919
<td class="tabmin">&nbsp;</td>
2020
<td class="tabmax">
2121
<a href="http://bin.webduino.io/yupu/edit?html,js,output" id="indexLinkToBin" target="_blank"><img src="media/dave.min.svg">{{linkToBin}}</a>
22+
<div id="check-device-online">
23+
<input id="input-device" class="">
24+
<span id="check-btn" class="check-btn">
25+
<i id="check-icon" class="check icon21"></i>
26+
</span>
27+
</div>
2228
<button id="demoButton" class="notext" title="{{demoTooltip}}">
2329
<img src='media/1x1.gif' class="demo icon21">
2430
</button>

0 commit comments

Comments
 (0)