Forked from: reo.matsumura's forked: 1.デジタル入力・出力を体験してみよう! View Diff (88) PastelBlink2 Dai_Herreria Follow 2017-02-20 01:13:24 License: MIT License Fork0 Fav0 View582 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 117 lines HTML 40 lines CSS 183 lines PastelBlink Ver1 PastelBlink2 jQuery UI v1.10.4 ///////////////////////////////////// // view functions(UIでの動き ///////////////////////////////////// //konashi との接続 $(function(){ $("#button").tap(function(){ k.find(); //k.showDebugLog(); }); }); //各ボタンを押した時の動き $(function(){ $("#btnpio1").bind('touchstart',function(){ k.digitalWrite(k.PIO1, k.HIGH); //k.log("LED 02 スイッチON"); k.uartWrite('1'.charCodeAt(0)); //k.uartWrite(num.charCodeAt(0)); }); $("#btnpio2").bind('touchstart',function(){ k.digitalWrite(k.PIO2, k.HIGH); //k.log("LED 03 スイッチON"); k.uartWrite('2'.charCodeAt(0)); }); $("#btnpio3").bind('touchstart',function(){ k.digitalWrite(k.PIO3, k.HIGH); //k.log("LED 04 スイッチON"); k.uartWrite('0'.charCodeAt(0)); }); }); //各ボタンを離した時の動き $(function(){ $("#btnpio1").bind('touchend',function(){ k.digitalWrite(k.PIO1, k.LOW); //k.log("LED 02 スイッチOFF"); }); $("#btnpio2").bind('touchend',function(){ k.digitalWrite(k.PIO2, k.LOW); // k.log("LED 03 スイッチOFF"); }); $("#btnpio3").bind('touchend',function(){ k.digitalWrite(k.PIO3, k.LOW); //k.log("LED 04 スイッチOFF"); }); }); //アニメーション関連の関数 //CSSで各コンテンツをabsoluteとleftで画面街に置いてあるのを移動して表示させる 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; //konashiとiOS端末がBluetooth接続したら呼ばれる k.ready(function(){ showPio(); k.pinModeAll(254); // configure UART(シリアル通信の初期化) k.uartBaudrate(k.KONASHI_UART_RATE_9K6); k.uartMode(k.KONASHI_UART_ENABLE); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); //PIO(デジタル入出力端子)の入力に変化があったときdataに変化あり 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="btnpio1"> <span id="button_icon"></span> <span>Red Bkink</span> </div> <div id="btnpio2"> <span id="button_icon"></span> <span>Rainbow Blink</span> </div> <div id="btnpio3"> <span id="button_icon"></span> <span>Turn OFF</span> </div> <div id="title"> <span id="title_icon"></span> <span>DigitalInOut</span> </div> </div> </div> <!-- jquery 以下お作法として必要なjs --> <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.min.js"></script> PastelBlink2 @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,#btnpio2,#btnpio3 { position: absolute; top: 30%; 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; } #btnpio2 { top: 50%; } #btnpio3 { top: 70%; } #title { position: absolute; top: 40px; left: 20px; font-size: 25px; } #title_icon { font-family: "icomoon"; } #title_icon:before { content: "\e000"; } PastelBlink Ver1 ///////////////////////////////////// // view functions(UIでの動き ///////////////////////////////////// //konashi との接続 $(function(){ $("#button").tap(function(){ k.find(); //k.showDebugLog(); }); }); //各ボタンを押した時の動き $(function(){ $("#btnpio1").bind('touchstart',function(){ k.digitalWrite(k.PIO1, k.HIGH); //k.log("LED 02 スイッチON"); k.uartWrite('1'.charCodeAt(0)); //k.uartWrite(num.charCodeAt(0)); }); $("#btnpio2").bind('touchstart',function(){ k.digitalWrite(k.PIO2, k.HIGH); //k.log("LED 03 スイッチON"); k.uartWrite('2'.charCodeAt(0)); }); $("#btnpio3").bind('touchstart',function(){ k.digitalWrite(k.PIO3, k.HIGH); //k.log("LED 04 スイッチON"); k.uartWrite('0'.charCodeAt(0)); }); }); //各ボタンを離した時の動き $(function(){ $("#btnpio1").bind('touchend',function(){ k.digitalWrite(k.PIO1, k.LOW); //k.log("LED 02 スイッチOFF"); }); $("#btnpio2").bind('touchend',function(){ k.digitalWrite(k.PIO2, k.LOW); // k.log("LED 03 スイッチOFF"); }); $("#btnpio3").bind('touchend',function(){ k.digitalWrite(k.PIO3, k.LOW); //k.log("LED 04 スイッチOFF"); }); }); //アニメーション関連の関数 //CSSで各コンテンツをabsoluteとleftで画面街に置いてあるのを移動して表示させる 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; //konashiとiOS端末がBluetooth接続したら呼ばれる k.ready(function(){ showPio(); k.pinModeAll(254); // configure UART(シリアル通信の初期化) k.uartBaudrate(k.KONASHI_UART_RATE_9K6); k.uartMode(k.KONASHI_UART_ENABLE); }); k.on(k.KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); //PIO(デジタル入出力端子)の入力に変化があったときdataに変化あり 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="btnpio1"> <span id="button_icon"></span> <span>Red Bkink</span> </div> <div id="btnpio2"> <span id="button_icon"></span> <span>Rainbow Blink</span> </div> <div id="btnpio3"> <span id="button_icon"></span> <span>Turn OFF</span> </div> <div id="title"> <span id="title_icon"></span> <span>DigitalInOut</span> </div> </div> </div> <!-- jquery 以下お作法として必要なjs --> <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.min.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,#btnpio2,#btnpio3 { position: absolute; top: 30%; 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; } #btnpio2 { top: 50%; } #btnpio3 { top: 70%; } #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? PastelBlink Ver1 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Dai_Herreria 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/2e6J/js"></script> au1701 smartphones&tablets Discussion Questions on this code? Tags au1701 smartphones&tablets