Zeigerdiagramm Stand 13.07.

Canvas size ändern

by RavilG

HTML

<!--========= 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">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: 5px; font-family:Verdana;font-size:12px" cellpadding="5" cellspacing="1" bordercolor="#E4E4E4" border="3">
    <thead id="tableHeat">
       ...

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 = 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,
        currArrowDelete=document.getElementById("curr-arrow-delete"),
        duplicateCheck=document.getElementById("duplicate-check"),
        duplicateOnOff=false,
        duplicateDelete=document.getElementById("duplicate-delete"),
        toggleHelp=document.getElementById("toggle-help");
    
    //Testmode check
    testMode();
    // Feedbackcheck
    if (feedbackOutput.length>0) document.getElementById("clear-button").disabled=true;
    // ceate all listed Arrows 
    arrows = createArrows();
		arrow_textarea.value =...