JSFiddle - React, Tailwind, and code Playground

by limon_spb

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<body onload = "OnStart()">    
    <div style = "height : 300px;">
        <div class = "inline-block" id = "div-with-canvas">

            <canvas id = "main-canvas" width = "500px" height = "300px">
            </canvas>
            <img src="http://habrastorage.org/files/891/aa2/d44/891aa2d4496741b29dfc52a34510bf7d.png" id = "web"/>
            
        </div>
    </div>
    <div id="track-bar-alingment">
            <div id = "track-bar-container">
                <div id = "track-bar-back">
                </div>
                <div id = "track-bar">
                    <div id = "lever">
                    </div>
                </div>
            </div>
    </div>        
    
        <div id = "div-with-pid-table">
            <table id = "pid-table" cellspacing = "15px">
                <tr>
                    <td>
                        P:
                    </td>
                    <td>
                        <input type = "text" id = "p-input"/>
                    </td>                    
                    <td>
                        Interval (ms):
                    </td>
                    <td>
                        <input type = "text" id = "interval-input"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        I:
                    </td>
                    <td>
                        <input type = "text" id = "i-input"/>
                    </td>
                    <td>
                        Asymmetry:
                    </td>                        
                    <td>
                        <input type = "checkbox" id = "asymmetry" checked/>
                    </td>
                </tr>
                <tr>
                    <td>
                        D:
                    </td>
                    <td>
                        <input type = "text" id = "d-input"/>
              ...

CSS

*
{
    margin: 0;
    padding: 0;
    border: 0px;
    font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
}
input[type=checkbox] {   		
	height:25px; 
	width:25px;
    
}
#track-bar-container
{    
    height: 30px;
    width: 330px;
    overflow: hidden;
    cursor: pointer;
    margin : auto;
}

#track-bar-alingment
{
    width : 500px;
    text-align : cetner;
    margin-top:1px;
}

#track-bar
{    
    height: 30px;
    width: 330px;
    background-image: url(http://habrastorage.org/files/727/186/919/72718691994745499b1ca287537ef288.png);
    background-color: transparent;
    position: relative;
    top: -15px;
    
}
#track-bar-back
{
    height: 30px;
    width: 660px;
    background-image: url(http://habrastorage.org/files/78b/8b8/bae/78b8b8bae064413196cab3411e6cdf0b.png);
    margin-top: -15px;
    margin-left: -330px;
    position: relative;
    left: 165px;
    top: 15px;
}

#lever
{
    background-color: transparent;
    background-image: url(http://habrastorage.org/files/1a2/a92/1d8/1a2a921d875944c99c5733cbd68a95be.png);

    position: relative;
    height: 30px;
    width: 30px;
    left: 165px;
    top: 15px;
    margin-top: -15px;
    margin-left: -15px;
    
    float: left;
}

#div-with-canvas
{
    position: relative;
    top: px;
    float: left;
    height: 300px;
    width: 499px;
}

.inline-block
{
    display:inline-block;
}
#web
{
    position: absolute;
    top: 0px;
    left: 0px;
}
input[type = "text"]
{
    border: 1px solid;
    border-radius: 8px;
    font-size: 20px;
    padding-left : 10px;
    width: 70px;
}

#main-canvas
{
    position: absolute;
    top: 0px;
    left: 0px;
}

#pid-table td
{
   
}

#pid-table
{
    margin : auto;
}

canvas
{    
}


#apply
{
    cursor: pointer;
    width: 193px;    
    border: 1px solid;
    border-radius: 8px;
    height : 24px;
    padding-left: auto;
    padding-right: auto;
    text-align:...

JavaScript

function Lever()
{
    this.mouseDown = false;
    this.value = 50.0;
    this.newLeft = 0;
    this.clicked = false;
    var leverDiv = document.getElementById("lever");

    //this.trackBarTop = docunet.getElementById("track-bar").top;
    this.offsetLeft = $("#track-bar").offset().left;
    //this.trackHeight = $("#track-bar").height(); 
    this.trackWidth = 300;
    this.widthOffset = 15;


    leverDiv.onmousedown = function()
    {
        lever.mouseDown = true;
    }
    document.onmouseup = function()
    {
        lever.mouseDown = false;        
    }

    $("#track-bar").click(function(eventObject)
    {
        lever.clicked = true;
    });

    $("body").mousemove(function(eventObject)
    {
        if (lever.mouseDown || lever.clicked)
        {            
            lever.clicked = false;
            lever.newLeft = eventObject.pageX - lever.offsetLeft;
            if (lever.newLeft < lever.widthOffset)
            {
                lever.newLeft = lever.widthOffset;
            }
            else if (lever.newLeft > lever.trackWidth + lever.widthOffset)
            {
                lever.newLeft = lever.trackWidth + lever.widthOffset;
            }
            //console.log(lever.newLeft);
            lever.value = (lever.newLeft - lever.widthOffset)/lever.trackWidth * 100.0;
            $("#lever").css({ left: lever.newLeft + "px" });
            $("#track-bar-back").css({ left: lever.newLeft + "px" });
        }
        
    });
    document.onmousemove = function(e)
    {
    }
}

Lever.prototype.test = function() {
    //alert("test");
};


function Pid()
{
    this.P = 1.0;
    this.I = 0.01;
    this.D = 0.1;    

    this.integral = 0.0;

    this.lastError = 0.0;
}

Pid.prototype.get = function(error, dt)
{
    this.integral += error * this.I;

    var derivative = (error - this.lastError) / dt;
    this.lastError = error;

    return this.P * error  +  this.integral  +  this.D * derivative;
}

Pid.prototype.refresh = function()
{
   ...