Forked from: yama112's 電波強度監視のみ View Diff (1) forked: 電波強度監視のみ kotera803 Follow 2017-02-09 19:56:03 License: MIT License Fork0 Fav0 View340 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 111 lines HTML 33 lines CSS 158 lines forked: 電波強度監視のみ // forked from yama112's "電波強度監視のみ" http://jsdo.it/yama112/wENZ // forked from yama112's "forked: 電波強度が下がるとLEDが光る" http://jsdo.it/yama112/sft1 // forked from monakaz's "電波強度を見てみよう" http://jsdo.it/monakaz/konashi_SignalStrength ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ $("#button").tap(function(){ k.findWithName("konashi2-f022b9"); }); }); 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; var timer1; //var timer2; //var signal = 0; //var analog = 0; var door = 0; k.ready(function(){ // I/O設定 k.pinMode(k.PIO0, k.OUTPUT); k.pinMode(k.PIO1, k.INPUT); showMeter(); intervalId = window.setInterval(function(){ k.signalStrengthReadRequest(); // k.analogReadRequest(k.AIO0); k.digitalRead(k.PIO1, function(data){ if ((data) === 1) { door = 1; tmstr(); } else if ((data) === 0) { door = 0; k.digitalWrite(k.PIO0, k.LOW); // tmstr(); } }); }, 1000); }); k.on(k. KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.off(k.KONASHI_EVENT_DISCONNECTED, function(){ k.digitalWrite(k.PIO0, k.LOW); }); function tmstr() { timer1 = setInterval(SignalStrength(),1000); } function tmrOff() { clearInterval(timer1); } function SignalStrength(){ k.updateSignalStrength(function(data){ changeMeter(-1 * data); if ((-65 > data) && (door === 1)){ k.digitalWrite(k.PIO0, k.HIGH); } else if (door === 0) { tmrOff(); k.digitalWrite(k.PIO0, k.LOW); } }); } 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="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://code.jquery.com/jquery-1.10.2.min.js"></script--> <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> <!-- konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> forked: 電波強度監視のみ @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 yama112's "電波強度監視のみ" http://jsdo.it/yama112/wENZ // forked from yama112's "forked: 電波強度が下がるとLEDが光る" http://jsdo.it/yama112/sft1 // forked from monakaz's "電波強度を見てみよう" http://jsdo.it/monakaz/konashi_SignalStrength ///////////////////////////////////// // view functions ///////////////////////////////////// $(function(){ $("#button").tap(function(){ k.findWithName("konashi2-f022b9"); }); }); 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; var timer1; //var timer2; //var signal = 0; //var analog = 0; var door = 0; k.ready(function(){ // I/O設定 k.pinMode(k.PIO0, k.OUTPUT); k.pinMode(k.PIO1, k.INPUT); showMeter(); intervalId = window.setInterval(function(){ k.signalStrengthReadRequest(); // k.analogReadRequest(k.AIO0); k.digitalRead(k.PIO1, function(data){ if ((data) === 1) { door = 1; tmstr(); } else if ((data) === 0) { door = 0; k.digitalWrite(k.PIO0, k.LOW); // tmstr(); } }); }, 1000); }); k.on(k. KONASHI_EVENT_CONNECTED, function(){ showConnecting(); }); k.off(k.KONASHI_EVENT_DISCONNECTED, function(){ k.digitalWrite(k.PIO0, k.LOW); }); function tmstr() { timer1 = setInterval(SignalStrength(),1000); } function tmrOff() { clearInterval(timer1); } function SignalStrength(){ k.updateSignalStrength(function(data){ changeMeter(-1 * data); if ((-65 > data) && (door === 1)){ k.digitalWrite(k.PIO0, k.HIGH); } else if (door === 0) { tmrOff(); k.digitalWrite(k.PIO0, k.LOW); } }); } 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="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://code.jquery.com/jquery-1.10.2.min.js"></script--> <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> <!-- 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 kotera803 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/gmQl/js"></script> application html5_elements&api konashi konashijs SignalStrength Discussion Questions on this code? Tags SignalStrength application html5_elements&api konashi konashijs