Zeigerdiagramm Stand 27.03.22

Mehrere Zeigerdiagramme auf einer Seite möglich

by RavilG

HTML

<div style="min-width:350px; width:50%;float:left;display:flex;" class="Aufgabe">
  <div>
    <!--Aufgabe hier rein -->

  </div>
  <!--========= TESTMODE ================= -->
  <div id="testmode">========NICHT LÖSCHEN========
    <div>Testmode&nbsp;<input type="checkbox" id="testmode-check" name="Testmode">
      <!--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 10px 10px -5px rgba(0, 0, 0, 0.04); margin-left: 5px;...

JavaScript

var el = 0;
window.onload = function() {
  for (var i = 0; i < document.querySelectorAll("#testmode").length; i++) {
    el = i;
    SetDiagram();
  }
};


var currTest = document.querySelectorAll("#testmode")[el],
  currVectorTable = document.querySelectorAll("#vector-table")[el],
  canvas = document.querySelectorAll("#canvas")[el],
  tempcanvas = document.querySelectorAll("#tempcanvas")[el],
  arrow_textarea = document.querySelectorAll("#crui_textarea_arrows")[el],
  feedbackOutput = document.querySelectorAll("div.specificfeedback"),
  ui_wrapper = document.getElementsByClassName("ui_wrapper")[el],
  prompt = document.getElementsByClassName("prompt")[el],
  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.querySelectorAll("#accuracy")[el],
  scaleGrid = w / 12,
  scaleU = scaleGrid / document.querySelectorAll("#scale-U")[el].innerHTML,
  scaleI = scaleGrid / document.querySelectorAll("#scale-I")[el].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.querySelectorAll("#color")[el],
  arrows = [],
  lastsave = [], //JSON.parse(JSON.stringify(arrows)),
  scalesCheck = document.querySelectorAll("#scalesCheck")[el],
  scaleUInput = document.querySelectorAll("#scale-U")[el],
  scaleIInput = document.querySelectorAll("#scale-I")[el],
  istouch = false,
  touchCounter = 0,
  isDown = false,
  mark = false,
  dataCheck = currVectorTable.querySelectorAll("input.data-check"),
  betragcheck = false,
  phasecheck = false,
  betrag = document.querySelectorAll("#betrag")[el],
  phase = document.querySelectorAll("#phase")[el],
  setfix = false,
  currArrowDelete = document.querySelectorAll("#curr-arrow-delete")[el],
 ...