Forked from: reo.matsumura's 1.デジタル入力・出力を体験してみよう! View Diff (1) 1.デジタル入力・出力を体験してみよう! reo.matsumur Follow 2017-01-28 09:43:14 License: MIT License Fork6 Fav1 View1521 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 86 lines HTML 36 lines CSS 175 lines Engadget 電子工作部 & KDDI/au 未来研究所 17.01.28 DigitalInOutサンプル ■接 続 PIO 0:スイッチ PIO 1:LED ■どうなるか ボタンのON/OFF → 画面上のスイッチがON/OFF 画面上のスイッチをON/OFF → LEDがON/OF ■ためしてみよう! ボタンをタッチセンサに変更してみる LEDをバイブレータに変更してみる 1.デジタル入力・出力を体験してみよう! // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/aaTs // 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(){ k.find(); }); }); $(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.min.js"></script> 1.デジタル入力・出力を体験してみよう! @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"; } Engadget 電子工作部 & KDDI/au 未来研究所 17.01.28 DigitalInOutサンプル ■接 続 PIO 0:スイッチ PIO 1:LED ■どうなるか ボタンのON/OFF → 画面上のスイッチがON/OFF 画面上のスイッチをON/OFF → LEDがON/OF ■ためしてみよう! ボタンをタッチセンサに変更してみる LEDをバイブレータに変更してみる // forked from reo.matsumura's "1.デジタル入力・出力を体験してみよう!" http://jsdo.it/reo.matsumura/aaTs // 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(){ k.find(); }); }); $(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.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 { 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? Engadget 電子工作部 & KDDI/au 未来研究所 17.01.28 DigitalInOutサンプル ■接 続 PIO 0:スイッチ PIO 1:LED ■どうなるか ボタンのON/OFF → 画面上のスイッチがON/OFF 画面上のスイッチをON/OFF → LEDがON/OF ■ためしてみよう! ボタンをタッチセンサに変更してみる LEDをバイブレータに変更してみる Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author reo.matsumura URLhttp://reomatsumura.jp/ 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/s8f8/js"></script> au1701 smartphones&tablets Discussion Questions on this code? Tags au1701 smartphones&tablets Favorite by Shohei.Koyam: ベース開発コード Forked sort by latest page views favorite forked forked: 1.デジタル入力・出力を体験してみよう! tomotagwork 00 427 87/36/175 au1701 smartphones&tablets forked: 1.デジタル入力・出力を体験してみよう! koreankimuti 10 674 99/40/189 au1701 smartphones&tablets forked: 1.デジタル入力・出力を体験してみよう! iijima11828 10 764 87/36/175 au1701 smartphones&tablets forked: 1.デジタル入力・出力を体験してみよう! kuma.c.1209 00 367 123/45/219 smartphones&tablets 1 2NEXT>>