forked: konashi.js AC Drive Extension Board Example

Readme
JavaScript 79 lines
HTML 16 lines
CSS 90 lines

forked: konashi.js AC Drive Extension Board Example

var switchFlg=0;

$(function(){
    $("#slider").change(function(event){
        var val = $(this).val();
        $("#value").html(("00"+val).slice(-3));
        
        $("#pane").css({height: val + "%"});
        k.acdrive.updateDuty($("#slider").val());
        if(val == 0){
            switchFlg=0;
        }else{
            switchFlg=1;
        }
        
    });

$("#button").bind('touchend',function(){
        //k.acdrive.updateDuty(0);
        changeFlg();
        if(switchFlg){
            k.acdrive.updateDuty(100);
            $("#value").html(("00"+100).slice(-3));
            $("#pane").css({height: 100 + "%"});
            $("#slider").val(100);
        }else{
            k.acdrive.updateDuty(0);
            $("#value").html(("00"+0).slice(-3));
            $("#pane").css({height: 0 + "%"});
            $("#slider").val(0);
        }
    });
/*    
    $("#button").bind('touchstart',function(){
        k.acdrive.updateDuty(100);
    });
*/    
    k.find();
    
    //k.showDebugLog();
    
    k.ready(function(){
        k.acdrive.init(k.acdrive.MODE_PWM,k.acdrive.FREQ_50HZ);
        k.acdrive.updateDuty($("#slider").val());
    });
});

function changeFlg(){
    if(switchFlg){
        switchFlg=0;
    }else{
        switchFlg=1;
    }
}

/**************************************
 * extend zepto for tap event handler
 * ref - http://zeptojs.com
 *       #Creating plug-ins
 **************************************/
(function($){
    $.extend($.fn, {
        tap: function(fn){
            this.on("touchend", fn);
            return this;
        }
    });
})(Zepto);

forked: konashi.js AC Drive Extension Board Example

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
    font-weight: bold;
    color: #fafdff;
}

body {
    background: #0068b7;
    text-align: center;
}

#slider {
    margin-top: 200px;
    width: 260px;
}

#value {
    font-size: 100px;
    margin: 20px;
}

#pane {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 0%;
    background: #e62f8b;
    z-index: -1;
}

#button {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 180px;
    height: 50px;
    margin-top: -25px;
    margin-left: -90px;
    background: #e74c3c;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    cursor: pointer;
}

input[type="range"] {
    -webkit-appearance: none;
    outline: none;
    width: 250px;
    height: 10px;
    border-radius: 10px;
    position: relative;    
    background-color: rgba(0, 0, 0, .8);    
    border: 0;
    cursor: pointer;
    margin-top: 20px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #fcc800;
}

input[type="range"]::-webkit-slider-thumb:hover {
   background: #ffdc00;
}

input[type="range"]::-webkit-slider-thumb:active {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

input.bigslider-in {
	width: 200px;
	height: 60px;
	border-radius: 60px;
}

input.bigslider-in::-webkit-slider-thumb {
	width: 60px;
	height: 60px;
}

// forked from s3012055's "forked: konashi.js AC Drive Extension Board Example" http://jsdo.it/s3012055/b2Dh // forked from tokoro10g's "konashi.js AC Drive Extension Board Example" http://jsdo.it/tokoro10g/qs9b // forked from monakaz's "スライダー" http://jsdo.it/monakaz/aio_slider /*********************** * UI view functions ***********************/ var switchFlg=0; $(function(){ $("#slider").change(function(event){ var val = $(this).val(); $("#value").html(("00"+val).slice(-3)); $("#pane").css({height: val + "%"}); k.acdrive.updateDuty($("#slider").val()); if(val == 0){ switchFlg=0; }else{ switchFlg=1; } }); $("#button").bind('touchend',function(){ //k.acdrive.updateDuty(0); changeFlg(); if(switchFlg){ k.acdrive.updateDuty(100); $("#value").html(("00"+100).slice(-3)); $("#pane").css({height: 100 + "%"}); $("#slider").val(100); }else{ k.acdrive.updateDuty(0); $("#value").html(("00"+0).slice(-3)); $("#pane").css({height: 0 + "%"}); $("#slider").val(0); } }); /* $("#button").bind('touchstart',function(){ k.acdrive.updateDuty(100); }); */ k.find(); //k.showDebugLog(); k.ready(function(){ k.acdrive.init(k.acdrive.MODE_PWM,k.acdrive.FREQ_50HZ); k.acdrive.updateDuty($("#slider").val()); }); }); function changeFlg(){ if(switchFlg){ switchFlg=0; }else{ switchFlg=1; } } /************************************** * extend zepto for tap event handler * ref - http://zeptojs.com * #Creating plug-ins **************************************/ (function($){ $.extend($.fn, { tap: function(fn){ this.on("touchend", fn); return this; } }); })(Zepto);<div id="pane"></div> <div id="button"> <span>ON/OFF</span> </div> <input id="slider" type="range" class="bigslider-in" min="0" max="100" step="1" value="0"/> <div id="value">000</div>  <script src="http://zeptojs.com/zepto.min.js"></script>  <script src="http://konashi.ux-xu.com/kjs/konashi-bridge.min.js"></script> <script src="http://konashi.tokor.org/ext/konashi-ext-acdrive.js"></script>* { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-weight: bold; color: #fafdff; } body { background: #0068b7; text-align: center; } #slider { margin-top: 200px; width: 260px; } #value { font-size: 100px; margin: 20px; } #pane { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0%; background: #e62f8b; z-index: -1; } #button { position: absolute; top: 20%; left: 50%; width: 180px; height: 50px; margin-top: -25px; margin-left: -90px; background: #e74c3c; text-align: center; line-height: 50px; font-size: 25px; cursor: pointer; } input[type="range"] { -webkit-appearance: none; outline: none; width: 250px; height: 10px; border-radius: 10px; position: relative; background-color: rgba(0, 0, 0, .8); border: 0; cursor: pointer; margin-top: 20px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 100%; background: #fcc800; } input[type="range"]::-webkit-slider-thumb:hover { background: #ffdc00; } input[type="range"]::-webkit-slider-thumb:active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3); } input.bigslider-in { width: 200px; height: 60px; border-radius: 60px; } input.bigslider-in::-webkit-slider-thumb { width: 60px; height: 60px; }