forked: pio->bocco Yusuke.Seto Follow 2017-03-09 16:48:33 License: MIT License Fork1 Fav0 View650 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 112 lines HTML 38 lines CSS 175 lines forked: pio->bocco // forked from sagiii's "pio->bocco" http://jsdo.it/sagiii/4nNk // forked from sagiii's "forked: 1.デジタル入力・出力を体験してみよう! ( konashi-js regression test )" http://jsdo.it/sagiii/4CWZ // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/fMlR // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/qTzC // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/tktv // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/th3i // forked from reo.matsumura's "Samples.DigitalInOut.3.0" http://jsdo.it/reo.matsumura/vh5P // forked from reo.matsumura's "Samples.DigitalInOut.2.0" http://jsdo.it/reo.matsumura/6vB9 // forked from reo.matsumura's "Samples.DigitalInOut" http://jsdo.it/reo.matsumura/yEON ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ $("#button").tap(function(){ alert("result"); var api_base_url = 'https://api.bocco.me/alpha'; var request = new XMLHttpRequest(); var data = { 'apikey' : 'xxx', 'email' : 'xx@xxx', 'password' : 'xxx' }; request.open('POST', api_base_url + '/sessions'); request.onreadystatechange = function () { if (request.readyState != 4) { // リクエスト中 } else if (request.status != 200) { var result = request.responseText; //console.log(result); alert(result); } else { // 送信成功 var result = request.responseText; //console.log(result); alert(result); } }; request.send(data); }); }); $(function(){ $("#btnpio1").bind('touchstart',function(){ k.digitalWrite(k.PIO1, k.HIGH); }); }); $(function(){ $("#btnpio1").bind('touchend',function(){ k.digitalWrite(k.PIO1, k.LOW); }); }); function showFirst(){ $("#content").animate( {left: "0%"}, {duration: 500, easing: "ease-in-out"} ); } function showConnecting(){ $("#content").animate( {left: "-100%"}, {duration: 500, easing: "ease-in-out"} ); } function showPio(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changePio0(value){ if(value){ $("#num").html("ON"); }else{ $("#num").html("OFF"); } } ///////////////////////////////////// // konashi functions ///////////////////////////////////// var intervalId; k.ready(function(){ showPio(); k.pinModeAll(254); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.updatePioInput( function(data){ changePio0(data); }); k.disconnected(function(data){ window.clearInterval(intervalId); showFirst(); }); <div id="content"> <div id="first"> <div id="konashijs_logo"></div> <div id="button"> <span id="button_icon"></span> <span>Find konashi</span> </div> </div> <div id="connecting"> <div id="connecting_title">Connecting...</div> </div> <div id="main"> <div id="value"> <span></span> <span id="num">OFF</span> <span></span> </div> <div id="btnpio1"> <span id="button_icon"></span> <span>LED2</span> </div> <div id="title"> <span id="title_icon"></span> <span>DigitalInOut</span> </div> </div> </div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/touch.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.js"></script> forked: pio->bocco @font-face { font-family: 'icomoon'; src:url('http://jsrun.it/assets/s/m/w/y/smwyM'); src:url('http://jsrun.it/assets/s/m/w/y/smwyM?#iefix') format('embedded-opentype'), url('http://jsrun.it/assets/k/y/D/Z/kyDZo') format('woff'), url('http://jsrun.it/assets/a/D/a/t/aDati') format('truetype'), url('http://jsrun.it/assets/x/Q/J/L/xQJL1#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } * { -webkit-touch-callout: none; -webkit-user-select: none; margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #FFF; } #content { position: fixed; width: 100%; height: 100%; left: 0%; top: 0px; } #first { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #34495e; } #konashijs_logo { position: absolute; width: 150px; height: 28px; left: 50%; top: 100px; margin-left: -75px; background: url(http://jsrun.it/assets/L/I/q/X/LIqXY.png); background-size: contain; background-repeat: no-repeat; } #button { position: absolute; top: 50%; left: 50%; width: 280px; height: 80px; margin-top: -40px; margin-left: -140px; background: #e74c3c; text-align: center; line-height: 80px; font-size: 25px; cursor: pointer; } #button_icon { font-family: "icomoon"; } #button_icon:before { content: "\e001"; } #connecting { position: absolute; width: 100%; height: 100%; left: 100%; top: 0px; background: #34495e; } #connecting_title { position: absolute; width: 200px; height: 100px; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; text-align: center; line-height: 100px; font-size: 30px; } #main { position: absolute; width: 100%; height: 100%; left: 200%; top: 0px; background: #34495e; } #meter { position: absolute; width: 100%; height: 0%; bottom: 0px; left: 0px; background: #e74c3c; } #value { position: absolute; top: 30%; left: 50%; width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; font-size: 60px; line-height: 300px; text-align: center; } #num { font-size: 100px; margin: 0px -15px; } #btnpio1 { position: absolute; top: 70%; left: 50%; width: 160px; height: 60px; margin-top: -30px; margin-left: -80px; background: #e74c3c; text-align: center; line-height: 60px; font-size: 25px; cursor: pointer; } #title { position: absolute; top: 40px; left: 20px; font-size: 25px; } #title_icon { font-family: "icomoon"; } #title_icon:before { content: "\e000"; } // forked from sagiii's "pio->bocco" http://jsdo.it/sagiii/4nNk // forked from sagiii's "forked: 1.デジタル入力・出力を体験してみよう! ( konashi-js regression test )" http://jsdo.it/sagiii/4CWZ // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/fMlR // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/qTzC // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/tktv // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/th3i // forked from reo.matsumura's "Samples.DigitalInOut.3.0" http://jsdo.it/reo.matsumura/vh5P // forked from reo.matsumura's "Samples.DigitalInOut.2.0" http://jsdo.it/reo.matsumura/6vB9 // forked from reo.matsumura's "Samples.DigitalInOut" http://jsdo.it/reo.matsumura/yEON ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ $("#button").tap(function(){ alert("result"); var api_base_url = 'https://api.bocco.me/alpha'; var request = new XMLHttpRequest(); var data = { 'apikey' : 'xxx', 'email' : 'xx@xxx', 'password' : 'xxx' }; request.open('POST', api_base_url + '/sessions'); request.onreadystatechange = function () { if (request.readyState != 4) { // リクエスト中 } else if (request.status != 200) { var result = request.responseText; //console.log(result); alert(result); } else { // 送信成功 var result = request.responseText; //console.log(result); alert(result); } }; request.send(data); }); }); $(function(){ $("#btnpio1").bind('touchstart',function(){ k.digitalWrite(k.PIO1, k.HIGH); }); }); $(function(){ $("#btnpio1").bind('touchend',function(){ k.digitalWrite(k.PIO1, k.LOW); }); }); function showFirst(){ $("#content").animate( {left: "0%"}, {duration: 500, easing: "ease-in-out"} ); } function showConnecting(){ $("#content").animate( {left: "-100%"}, {duration: 500, easing: "ease-in-out"} ); } function showPio(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changePio0(value){ if(value){ $("#num").html("ON"); }else{ $("#num").html("OFF"); } } ///////////////////////////////////// // konashi functions ///////////////////////////////////// var intervalId; k.ready(function(){ showPio(); k.pinModeAll(254); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.updatePioInput( function(data){ changePio0(data); }); k.disconnected(function(data){ window.clearInterval(intervalId); showFirst(); }); <div id="content"> <div id="first"> <div id="konashijs_logo"></div> <div id="button"> <span id="button_icon"></span> <span>Find konashi</span> </div> </div> <div id="connecting"> <div id="connecting_title">Connecting...</div> </div> <div id="main"> <div id="value"> <span></span> <span id="num">OFF</span> <span></span> </div> <div id="btnpio1"> <span id="button_icon"></span> <span>LED2</span> </div> <div id="title"> <span id="title_icon"></span> <span>DigitalInOut</span> </div> </div> </div> <!-- jquery --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/touch.js"></script> <script src="https://raw.github.com/madrobby/zepto/master/src/fx.js"></script> <script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.js"></script> @font-face { font-family: 'icomoon'; src:url('http://jsrun.it/assets/s/m/w/y/smwyM'); src:url('http://jsrun.it/assets/s/m/w/y/smwyM?#iefix') format('embedded-opentype'), url('http://jsrun.it/assets/k/y/D/Z/kyDZo') format('woff'), url('http://jsrun.it/assets/a/D/a/t/aDati') format('truetype'), url('http://jsrun.it/assets/x/Q/J/L/xQJL1#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } * { -webkit-touch-callout: none; -webkit-user-select: none; margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #FFF; } #content { position: fixed; width: 100%; height: 100%; left: 0%; top: 0px; } #first { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #34495e; } #konashijs_logo { position: absolute; width: 150px; height: 28px; left: 50%; top: 100px; margin-left: -75px; background: url(http://jsrun.it/assets/L/I/q/X/LIqXY.png); background-size: contain; background-repeat: no-repeat; } #button { position: absolute; top: 50%; left: 50%; width: 280px; height: 80px; margin-top: -40px; margin-left: -140px; background: #e74c3c; text-align: center; line-height: 80px; font-size: 25px; cursor: pointer; } #button_icon { font-family: "icomoon"; } #button_icon:before { content: "\e001"; } #connecting { position: absolute; width: 100%; height: 100%; left: 100%; top: 0px; background: #34495e; } #connecting_title { position: absolute; width: 200px; height: 100px; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; text-align: center; line-height: 100px; font-size: 30px; } #main { position: absolute; width: 100%; height: 100%; left: 200%; top: 0px; background: #34495e; } #meter { position: absolute; width: 100%; height: 0%; bottom: 0px; left: 0px; background: #e74c3c; } #value { position: absolute; top: 30%; left: 50%; width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; font-size: 60px; line-height: 300px; text-align: center; } #num { font-size: 100px; margin: 0px -15px; } #btnpio1 { position: absolute; top: 70%; left: 50%; width: 160px; height: 60px; margin-top: -30px; margin-left: -80px; background: #e74c3c; text-align: center; line-height: 60px; font-size: 25px; cursor: pointer; } #title { position: absolute; top: 40px; left: 20px; font-size: 25px; } #title_icon { font-family: "icomoon"; } #title_icon:before { content: "\e000"; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Yusuke.Seto Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/G6vs/js"></script> bns engadget kjsrt smartphones&tablets Discussion Questions on this code? Tags bns engadget kjsrt smartphones&tablets Forked sort by latest page views favorite forked forked: pio->bocco Yusuke.Seto 00 405 114/43/175 bns engadget kjsrt smartphones&tablets