API tools faq
paste
sourav8256

Untitled

sourav8256
Mar 26th, 2019
234
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport"
  7.          content="width=device-width, initial-scale=1.0" />
  8.     <meta http-equiv="X-UA-Compatible"
  9.          content="ie=edge" />
  10.     <title>Document</title>
  11. </head>
  12.  
  13. <body>
  14.     <canvas width="1100px"
  15.            height="1000px"
  16.            id="main-canvas"></canvas>
  17.  
  18.     <script>
  19.         var DEBUG = true;
  20.  
  21.         var canvas = document.getElementById("main-canvas");
  22.         var ctx = canvas.getContext("2d");
  23.  
  24.         var mouseDown = false;
  25.  
  26.         window.onload = function () {
  27.             canvas.onmousemove = function (ev) {
  28.                 //console.log(ev.x, ev.y);
  29.  
  30.                 mouseTracker.x = ev.x;
  31.                 mouseTracker.y = ev.y;
  32.  
  33.                 if (mouseDown) {
  34.                     voltageSlider.updateSliderPosition(ev.x, ev.y);
  35.                     resistanceSlider.updateSliderPosition(ev.x, ev.y);
  36.                     capacitanceSlider.updateSliderPosition(ev.x, ev.y);
  37.                 }
  38.             };
  39.  
  40.             canvas.onmousedown = function () {
  41.                 mouseDown = true;
  42.             };
  43.  
  44.             canvas.onmouseup = function () {
  45.                 mouseDown = false;
  46.             };
  47.  
  48.             setInterval(() => {
  49.                 drawUi();
  50.             }, 100);
  51.         };
  52.  
  53.         function drawUi() {
  54.             background.draw();
  55.             circuit.draw();
  56.             bulb.draw();
  57.             resistance.draw();
  58.             voltage.draw();
  59.             capacitance.draw();
  60.             voltageSlider.draw();
  61.             resistanceSlider.draw();
  62.             capacitanceSlider.draw();
  63.  
  64.  
  65.             if (DEBUG) {
  66.                 mouseTracker.draw();
  67.             }
  68.         }
  69.  
  70.         var mouseTracker = {
  71.             x: null,
  72.             y: null,
  73.             draw: function () {
  74.                 ctx.fillText(this.x + " " + this.y, 10, 20);
  75.             },
  76.         }
  77.  
  78.         var background = {
  79.             offsetx: 30,
  80.             offsety: 30,
  81.             draw: function () {
  82.                 ctx.fillStyle = "#000000";
  83.                 ctx.strokeStyle = "#000000";
  84.                 ctx.lineWidth = 2;
  85.  
  86.                 ctx.rect(0, 0, canvas.clientWidth, canvas.clientHeight);
  87.                 ctx.fill();
  88.             }
  89.         };
  90.  
  91.         var circuit = {
  92.             offsetx: 30,
  93.             offsety: 30,
  94.             draw: function () {
  95.                 ctx.strokeStyle = "#fcff86";
  96.                 ctx.fillStyle = "#fcff86";
  97.                 ctx.lineWidth = 2;
  98.  
  99.                 /* part for drawing lines */
  100.  
  101.                 ctx.beginPath();
  102.                 ctx.moveTo(100, 100);
  103.                 ctx.lineTo(700, 100);
  104.                 ctx.lineTo(700, 400);
  105.                 ctx.lineTo(100, 400);
  106.                 ctx.closePath();
  107.                 ctx.stroke();
  108.             }
  109.         };
  110.  
  111.         var bulb = {
  112.             offsetx: 0,
  113.             offsety: 0,
  114.             draw: function () {
  115.                 /* drawing bulb */
  116.                 var radius = getPower() / 10;
  117.                 ctx.beginPath();
  118.                 ctx.arc(this.offsetx + 700, this.offsety + 250, radius, 0, 2 * Math.PI, true);
  119.                 ctx.fill();
  120.  
  121.                 ctx.font = "30px Verdana";
  122.                 ctx.fillText("B", this.offsetx + 720, this.offsety + 250);
  123.             }
  124.         };
  125.  
  126.         var resistance = {
  127.             offsetx: 0,
  128.             offsety: 0,
  129.             value: 80,
  130.             draw: function () {
  131.                 ctx.strokeStyle = "#fcff86";
  132.                 ctx.fillStyle = "#fcff86";
  133.                 ctx.lineWidth = 2;
  134.                 /* drawing resistance */
  135.  
  136.                 ctx.font = "30px Verdana";
  137.                 ctx.fillText("R", 370, this.offsety + 65);
  138.  
  139.                 ctx.rect(360, this.offsety + 85, 70, 30);
  140.                 ctx.fill();
  141.  
  142.  
  143.  
  144.                 ctx.font = "20px Verdana";
  145.                 ctx.fillText(resistanceSlider.getSetValue(resistance.value).toFixed(2) + " ohm", this.offsetx + 447, this.offsety + 70);
  146.                
  147.             }
  148.         };
  149.  
  150.         var voltage = {
  151.             offsetx: 0,
  152.             offsety: 0,
  153.             value: 100,
  154.             draw: function () {
  155.                 ctx.strokeStyle = "#fcff86";
  156.                 ctx.fillStyle = "#fcff86";
  157.                 ctx.lineWidth = 2;
  158.                 /* drawing voltage */
  159.  
  160.                 ctx.beginPath();
  161.                 ctx.moveTo(this.offsetx + 80, this.offsety + 250);
  162.                 ctx.lineTo(this.offsetx + 120, this.offsety + 250);
  163.                 ctx.moveTo(this.offsetx + 90, this.offsety + 260);
  164.                 ctx.lineTo(this.offsetx + 110, this.offsety + 260);
  165.                 ctx.stroke();
  166.  
  167.                 ctx.font = "30px Verdana";
  168.                 ctx.fillText("V", this.offsetx + 60, this.offsety + 230);
  169.  
  170.                 ctx.font = "20px Verdana";
  171.                 ctx.fillText(voltageSlider.getSetValue(voltage.value).toFixed(2) + " V", this.offsetx + 120, this.offsety + 230);
  172.                
  173.  
  174.             }
  175.         };
  176.  
  177.  
  178.         var capacitance = {
  179.             offsetx: 0,
  180.             offsety: 90,
  181.             value: 100,
  182.             draw: function () {
  183.                 ctx.strokeStyle = "#fcff86";
  184.                 ctx.fillStyle = "#fcff86";
  185.                 ctx.lineWidth = 2;
  186.                 /* drawing voltage */
  187.  
  188.                 ctx.beginPath();
  189.                 ctx.moveTo(this.offsetx + 80, this.offsety + 250);
  190.                 ctx.lineTo(this.offsetx + 120, this.offsety + 250);
  191.                 ctx.moveTo(this.offsetx + 80, this.offsety + 260);
  192.                 ctx.lineTo(this.offsetx + 120, this.offsety + 260);
  193.                 ctx.stroke();
  194.  
  195.                 ctx.font = "30px Verdana";
  196.                 ctx.fillText("C", this.offsetx + 60, this.offsety + 230);
  197.  
  198.                 ctx.font = "20px Verdana";
  199.                 ctx.fillText(capacitanceSlider.getSetValue(capacitance.value).toFixed(2) + " henry", this.offsetx + 120, this.offsety + 230);
  200.                
  201.  
  202.             }
  203.         };
  204.  
  205.  
  206.         var voltageSlider = {
  207.             offsetx: 30,
  208.             offsety: 30,
  209.             rangeStart: 191,
  210.             rangeEnd: 529,
  211.             sliderPosition: 191,
  212.             updateSliderPosition: function (position, y) {
  213.                 if ((y > this.offsety + 538 && y < this.offsety + 578) && (position - this.offsetx > this.rangeStart &&
  214.                        position - this.offsetx < this.rangeEnd)) {
  215.                    this.sliderPosition = position - this.offsetx;
  216.                 }
  217.             },
  218.             getSetValue: function (range) {
  219.  
  220.                 var multiplier = (this.sliderPosition - this.rangeStart) / (this.rangeEnd - this.rangeStart);
  221.  
  222.  
  223.                 return range * multiplier;
  224.             },
  225.             draw: function () {
  226.                 ctx.strokeStyle = "#fcff86";
  227.                 ctx.fillStyle = "#fcff86";
  228.                 ctx.lineWidth = 2;
  229.                 /* voltage slider */
  230.                 ctx.beginPath();
  231.                 ctx.moveTo(this.offsetx + 191, this.offsety + 558);
  232.                 ctx.lineTo(this.offsetx + 529, this.offsety + 558);
  233.                 ctx.stroke();
  234.                 ctx.beginPath();
  235.                 ctx.lineWidth = 10;
  236.                 ctx.strokeStyle = 20;
  237.                 ctx.moveTo(this.offsetx + this.sliderPosition, this.offsety + 548);
  238.                 ctx.lineTo(this.offsetx + this.sliderPosition, this.offsety + 568);
  239.                 ctx.stroke();
  240.  
  241.                 /* draw label*/
  242.                 ctx.font = "20px Verdana";
  243.                 ctx.fillText("Resistance", this.offsetx + 35, this.offsety + 690);
  244.  
  245.             }
  246.         };
  247.  
  248.         var resistanceSlider = {
  249.             offsetx: 30,
  250.             offsety: 130,
  251.             rangeStart: 191,
  252.             rangeEnd: 529,
  253.             sliderPosition: 191,
  254.  
  255.             /* data */
  256.             label: "Resistance",
  257.  
  258.             updateSliderPosition: function (position, y) {
  259.                 if ((y > this.offsety + 568 && y < this.offsety + 608) && (position - this.offsetx >= this.rangeStart &&
  260.                        position - this.offsetx <= this.rangeEnd)) {
  261.                    this.sliderPosition = position - this.offsetx;
  262.                 }
  263.             },
  264.             getSetValue: function (range) {
  265.                 var multiplier = (this.sliderPosition - this.rangeStart) / (this.rangeEnd - this.rangeStart);
  266.                 return range * multiplier;
  267.             },
  268.             draw: function () {
  269.                 ctx.strokeStyle = "#fcff86";
  270.                 ctx.fillStyle = "#fcff86";
  271.                 ctx.lineWidth = 2;
  272.                 /* voltage slider */
  273.                 ctx.beginPath();
  274.                 ctx.moveTo(this.offsetx + this.rangeStart, this.offsety + 588);
  275.                 ctx.lineTo(this.offsetx + this.rangeEnd, this.offsety + 588);
  276.                 ctx.stroke();
  277.                 ctx.beginPath();
  278.                 ctx.lineWidth = 10;
  279.                 ctx.strokeStyle = 20;
  280.                 ctx.moveTo(this.offsetx + this.sliderPosition, this.offsety + 578);
  281.                 ctx.lineTo(this.offsetx + this.sliderPosition, this.offsety + 598);
  282.                 ctx.stroke();
  283.  
  284.  
  285.                 /* draw label*/
  286.                 ctx.font = "20px Verdana";
  287.                 ctx.fillText("Voltage", this.offsetx + 35, this.offsety + 460);
  288.  
  289.             }
  290.         };
  291.  
  292.        
  293.         var capacitanceSlider = {
  294.             offsetx: 30,
  295.             offsety: 290,
  296.             rangeStart: 191,
  297.             rangeEnd: 529,
  298.             sliderPosition: 191,
  299.             updateSliderPosition: function (position, y) {
  300.                 if ((y > this.offsety + 538 && y < this.offsety + 578) && (position - this.offsetx > this.rangeStart &&
  301.                        position - this.offsetx < this.rangeEnd)) {
  302.                    this.sliderPosition = position - this.offsetx;
  303.                 }
  304.             },
  305.             getSetValue: function (range) {
  306.  
  307.                 var multiplier = (this.sliderPosition - this.rangeStart) / (this.rangeEnd - this.rangeStart);
  308.  
  309.  
  310.                 return range * multiplier;
  311.             },
  312.             draw: function () {
  313.                 ctx.strokeStyle = "#fcff86";
  314.                 ctx.fillStyle = "#fcff86";
  315.                 ctx.lineWidth = 2;
  316.                 /* voltage slider */
  317.                 ctx.beginPath();
  318.                 ctx.moveTo(this.offsetx + 191, this.offsety + 558);
  319.                 ctx.lineTo(this.offsetx + 529, this.offsety + 558);
  320.                 ctx.stroke();
  321.                 ctx.beginPath();
  322.                 ctx.lineWidth = 10;
  323.                 ctx.strokeStyle = 20;
  324.                 ctx.moveTo(this.offsetx + this.sliderPosition, this.offsety + 548);
  325.                 ctx.lineTo(this.offsetx + this.sliderPosition, this.offsety + 568);
  326.                 ctx.stroke();
  327.  
  328.                 /* draw label*/
  329.                 ctx.font = "20px Verdana";
  330.                 ctx.fillText("Capacitance", this.offsetx + 35, this.offsety + 560);
  331.  
  332.             }
  333.         };
  334.  
  335.  
  336.         function getPower() {
  337.             var power = (voltageSlider.getSetValue(voltage.value) * voltageSlider.getSetValue(voltage.value)) /
  338.                 resistanceSlider.getSetValue(resistance.value);
  339.             //console.log(voltageSlider.getSetValue(voltage.value),resistanceSlider.getSetValue(resistance.value));
  340.             return power;
  341.         }
  342.  
  343.     </script>
  344. </body>
  345.  
  346. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!