Zeigerdiagramm Stand 09.07.

by RavilG

HTML

<!--========= TESTMODE ================= -->

<div id="testmode">Testmode <input type="checkbox" id="testmode-check" name="Testmode">
    <!--checked einfügen für TESTMODE  und löschen für kein Testmode-->

    <div id="Test-Spannungen">
        <input class="voltage-arrow arrow-button testarrow" value="U" type="button" oldvalue="" name="#0B0BFD">

        <input class="voltage-arrow arrow-button testarrow" value="U_R" type="button" oldvalue="" name="#00B050">
        <input class="voltage-arrow arrow-button testarrow" value="U_L" type="button" oldvalue="" name="#7030A0">
        <input class="voltage-arrow arrow-button testarrow" value="U_C" type="button" oldvalue="" name="#767171">

    </div>
    <div id="Test-Ströme">

        <input class="current-arrow arrow-button testarrow" value="I" type="button" oldvalue="" name="#FF0000">
        <input class="current-arrow arrow-button testarrow" value="I_RL" type="button" oldvalue="" name="#F6630D">
        <input class="current-arrow arrow-button testarrow" value="I_C" type="button" oldvalue="" name="#FFC000">

    </div>
    <div style="float:left;">Genauigkeit:&nbsp;
    </div><!--Es ist nur 1, 5, 10 und 50 möglich -->
    <div id="Genauigkeit">1
    </div>
    <div>Maßstab an/aus <input type="checkbox" id="testmode-Scales-check" name="Maßstab-Test-Check" >
     </div>
        <div style="float:left;">Maßstab Spannungen:&nbsp;
        </div>
        <div id="Maßstab-Spannung">100
        </div>
        <div style="float:left;">Maßstab Ströme:&nbsp;
        </div>
        <div id="Maßstab-Strom">10
        </div>
</div>
<!--========= CODE ================= -->
<p>
</p>
<table frame="border" rules="all" dir="ltr" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04); margin-left: 10px; font-family:Verdana;font-size:12px" cellpadding="5" cellspacing="1" bordercolor="#E4E4E4" border="3">
    <thead id="tableHeat" >
        <tr style="text-align: center; border-bottom: 4px solid...

JavaScript

var canvas = document.getElementById("canvas"),
        tempcanvas = document.getElementById("tempcanvas"),
        arrow_textarea = document.getElementById("crui_textarea_arrows"),
        feedbackOutput=document.querySelectorAll("div.specificfeedback"),
        ui_wrapper=document.getElementsByClassName("ui_wrapper")[0],
        ctx = tempcanvas.getContext('2d'),
        mainctx = canvas.getContext('2d'),
        w = canvas.width - 1, //damit die Mittellinie auch in der Mitte ist ist die breite 501
        h = canvas.height - 1,
        x1,
        y1,
        x2,
        y2,
        accuracy = document.getElementById("accuracy"),
        scaleGrid = 50,
        scaleU = scaleGrid / document.getElementById("scale-U").innerHTML,
        scaleI = scaleGrid / document.getElementById("scale-I").innerHTML,
        scale = {
            "voltage": scaleU,
            "current": scaleI
        },
        cail = scaleGrid / 10,
        curr_arrow = "dummy",
        //arrow=[x1,y1,x2,y2,color,name,kind,x2-x1, y2-y1, dubx1, duby1, dubx2,duby2]
        colorInput = document.getElementById("color"),
        arrows = [],
        lastsave = [], //JSON.parse(JSON.stringify(arrows)),
        scalesCheck = document.getElementById("scalesCheck"),
        scaleUInput = document.getElementById("scale-U"),
        scaleIInput = document.getElementById("scale-I"),
        istouch = false,
        touchCounter = 0,
        isDown = false,
        mark = false;
		
    
    
    testMode();
    arrows = createArrows();
		arrow_textarea.value = JSON.stringify(arrows);
    colorInput.value = arrows[findCurrArrow()][4];
    ctx.translate(0.5, 0.5);
    ctx.font = "12px Verdana";
    drawGrid();
    mainctx.drawImage(tempcanvas, 0, 0);
    ctx.clearRect(0, 0, w, h);
    mainctx.save();
    if (ui_wrapper) ui_wrapper.style.minWidth="650px"

    setButtonStyle();
    

    accuracy.oninput = function() {
        var values = [1, 5, 10, 50];

       ...