Zeigerdiagramm Stand 13.07.

Betrag/Phase f fest

by RavilG

HTML

<div style="min-width:350px; width:50%;float:left;display:flex;">
    <div>
        <!--Aufgabe hier rein -->
            
        </div>
<!--========= TESTMODE ================= -->
<div id="testmode">========NICHT LÖSCHEN========
    <div>Testmode&nbsp;<input type="checkbox" id="testmode-check" name="Testmode" checked>
        <!--checked einfügen für TESTMODE  und löschen für kein Testmode-->
    </div>
    <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">1
        </div>
</div>
</div>
<!--========= CODE ================= -->
<p>
</p>
<div style="float:left;">
<table id="vector-table" frame="border" rules="all" dir="ltr" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0...

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],
        prompt=document.getElementsByClassName("prompt")[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 = w/12,
        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,
        dataCheck=document.querySelectorAll("input.data-check"),
        betragcheck=false,
        phasecheck=false,
        betrag=document.getElementById("betrag"),
        phase=document.getElementById("phase"),
        setfix=false,
        currArrowDelete=document.getElementById("curr-arrow-delete"),
        duplicateCheck=document.getElementById("duplicate-check"),
        duplicateOnOff=false,
       ...