Forked from: js.ryomatsu's MK5: PWM View Diff (1) MK5: PWM forked by nabe nabe31182 Follow 2018-11-27 15:10:23 License: MIT License Fork0 Fav0 View104 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 27 lines HTML 26 lines CSS 54 lines MK5: PWM forked by nabe // forked from js.ryomatsu's "MK5: PWM" http://jsdo.it/js.ryomatsu/sgDh k.ready(function(){ k.pwmPeriod(k.PIO0,10000); k.pwmDuty(k.PIO0,0); k.pwmMode(k.PIO0,k.KONASHI_PWM_ENABLE); document.getElementById("konashistate").innerHTML = "connected"; }); function findKonashi(){ document.getElementById("konashistate").innerHTML = "connecting"; k.find(); } $(function(){ $(".pwmslider").on('input',function(event){ var theta = document.getElementById(this.id).value; var pwmduty = theta; document.getElementById("show"+this.id).innerHTML = theta; k.pwmDuty(k.PIO0,pwmduty); }); }); <header class="bar-title"> <h1 class="title">MK5: PWM </h1> </header> <div class="content"> <input type="button" id="find" value="find Konashi" onClick="findKonashi()"> <span id="konashistate">disconnect</span> <br> <input type="range" class="pwmslider" id="range00" value="0" min="0" max="10000"> <span class="showRange" id="showrange00">0</span> <br> </div> <!-- for konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <!-- zepto --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="http://jsrun.it/assets/1/M/0/f/1M0fl"></script> <!-- touch.js --> <!--<script src="http://jsrun.it/assets/g/s/1/M/gs1MI"></script>--> <!-- ratchet --> <link rel="stylesheet" href="http://jsrun.it/assets/h/F/P/P/hFPPa"> <script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script> MK5: PWM forked by nabe #find { margin: 10px; font-size:20px; } #konashistate { margin: 10px; font-size:20px; } #num { font-size: 100px; margin: 0px -15px; } input[type="range"] { -webkit-appearance: none; outline: none; width: 280px; height: 30px; border-radius: 10px; position: relative; /*background-color: rgba(0, 0, 0, .8); */ border: 0; cursor: pointer; margin-top: 10px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 100%; background: #E74C3C; } input[type="range"]::-webkit-slider-thumb:hover { background: #C0392B; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } .showRange { font-size: 30px; } .pwmslider{ background-color: rgba(0, 0, 255, .5); } .pwmslider2{ background-color: rgba(0, 0, 0, .5); } // forked from js.ryomatsu's "MK5: PWM" http://jsdo.it/js.ryomatsu/sgDh k.ready(function(){ k.pwmPeriod(k.PIO0,10000); k.pwmDuty(k.PIO0,0); k.pwmMode(k.PIO0,k.KONASHI_PWM_ENABLE); document.getElementById("konashistate").innerHTML = "connected"; }); function findKonashi(){ document.getElementById("konashistate").innerHTML = "connecting"; k.find(); } $(function(){ $(".pwmslider").on('input',function(event){ var theta = document.getElementById(this.id).value; var pwmduty = theta; document.getElementById("show"+this.id).innerHTML = theta; k.pwmDuty(k.PIO0,pwmduty); }); }); <header class="bar-title"> <h1 class="title">MK5: PWM </h1> </header> <div class="content"> <input type="button" id="find" value="find Konashi" onClick="findKonashi()"> <span id="konashistate">disconnect</span> <br> <input type="range" class="pwmslider" id="range00" value="0" min="0" max="10000"> <span class="showRange" id="showrange00">0</span> <br> </div> <!-- for konashijs --> <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <!-- zepto --> <script src="http://zeptojs.com/zepto.min.js"></script> <script src="http://jsrun.it/assets/1/M/0/f/1M0fl"></script> <!-- touch.js --> <!--<script src="http://jsrun.it/assets/g/s/1/M/gs1MI"></script>--> <!-- ratchet --> <link rel="stylesheet" href="http://jsrun.it/assets/h/F/P/P/hFPPa"> <script src="http://jsrun.it/assets/g/3/W/u/g3WuF"></script> #find { margin: 10px; font-size:20px; } #konashistate { margin: 10px; font-size:20px; } #num { font-size: 100px; margin: 0px -15px; } input[type="range"] { -webkit-appearance: none; outline: none; width: 280px; height: 30px; border-radius: 10px; position: relative; /*background-color: rgba(0, 0, 0, .8); */ border: 0; cursor: pointer; margin-top: 10px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 100%; background: #E74C3C; } input[type="range"]::-webkit-slider-thumb:hover { background: #C0392B; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } .showRange { font-size: 30px; } .pwmslider{ background-color: rgba(0, 0, 255, .5); } .pwmslider2{ background-color: rgba(0, 0, 0, .5); } 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 nabe31182 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/Gn6J/js"></script> konashi konashi sample sample user_interface Discussion Questions on this code? Tags konashi sample user_interface
