Forked from: reo.matsumura's Samples.AutoConnection View Diff (1) forked: Samples.AutoConnection whatfather Follow 2017-02-10 18:28:59 License: MIT License Fork0 Fav0 View331 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 65 lines HTML 27 lines CSS 157 lines forked: Samples.AutoConnection // forked from reo.matsumura's "Samples.AutoConnection" http://jsdo.it/reo.matsumura/2RVo ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ // Change the following product number k.findWithName("konashi#4-0759"); }); 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 showMeter(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changeMeter(value){ $("#meter").animate( {height: value + "%"}, {duration: 500, easing: "ease-in-out"} ); $("#num").html(value); } ///////////////////////////////////// // konashi functions ///////////////////////////////////// var intervalId; k.ready(function(){ showMeter(); intervalId = window.setInterval(function(){ k.signalStrengthReadRequest(); }, 1000); }); k.on(k. KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.updateSignalStrength(function(data){ changeMeter(-1 * data); }); k.disconnected(function(data){ window.clearInterval(intervalId); showFirst(); }); <div id="content"> <div id="first"> <div id="konashijs_logo"></div> </div> <div id="connecting"> <div id="connecting_title">Connecting...</div> </div> <div id="main"> <div id="meter"></div> <div id="value"> <span>-</span> <span id="num">00</span> <span>db</span> </div> <div id="title"> <span id="title_icon"></span> <span>Signal Strength</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> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> forked: Samples.AutoConnection @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; } * { 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: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; font-size: 60px; line-height: 300px; text-align: center; } #num { font-size: 150px; margin: 0px -15px; } #title { position: absolute; top: 40px; left: 20px; font-size: 25px; } #title_icon { font-family: "icomoon"; } #title_icon:before { content: "\e000"; } // forked from reo.matsumura's "Samples.AutoConnection" http://jsdo.it/reo.matsumura/2RVo ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ // Change the following product number k.findWithName("konashi#4-0759"); }); 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 showMeter(){ $("#content").animate( {left: "-200%"}, {duration: 500, easing: "ease-in-out"} ); } function changeMeter(value){ $("#meter").animate( {height: value + "%"}, {duration: 500, easing: "ease-in-out"} ); $("#num").html(value); } ///////////////////////////////////// // konashi functions ///////////////////////////////////// var intervalId; k.ready(function(){ showMeter(); intervalId = window.setInterval(function(){ k.signalStrengthReadRequest(); }, 1000); }); k.on(k. KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.updateSignalStrength(function(data){ changeMeter(-1 * data); }); k.disconnected(function(data){ window.clearInterval(intervalId); showFirst(); }); <div id="content"> <div id="first"> <div id="konashijs_logo"></div> </div> <div id="connecting"> <div id="connecting_title">Connecting...</div> </div> <div id="main"> <div id="meter"></div> <div id="value"> <span>-</span> <span id="num">00</span> <span>db</span> </div> <div id="title"> <span id="title_icon"></span> <span>Signal Strength</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> <!-- 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; } * { 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: 50%; left: 50%; width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; font-size: 60px; line-height: 300px; text-align: center; } #num { font-size: 150px; margin: 0px -15px; } #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 whatfather 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/GQlh/js"></script> konashi sample smartphones&tablets Discussion Questions on this code? Tags konashi sample smartphones&tablets