Ravi Goetzke's question Vector diagrammer

]]> 1 0 0 python3 0 1 10, 20, ... 0 0 0 18 100 var canvas = document.getElementById("canvas"), arrow_textarea = document.getElementById("crui_textarea_arrows"), tempcanvas = document.getElementById("tempcanvas"), 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] 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(); colorInput.value = arrows[findCurrArrow()][4]; //lastsave.push(JSON.parse(JSON.stringify(arrows))) ctx.translate(0.5, 0.5); ctx.font = "12px Verdana"; drawGrid(); mainctx.drawImage(tempcanvas, 0, 0); ctx.clearRect(0, 0, w, h); mainctx.save(); setButtonStyle(); //deletings(); accuracy.oninput = function() { var values = [1, 5, 10, 50]; document.getElementById("accuracyOutput").innerHTML = values[this.value]; cail = scaleGrid / values[this.value]; } scaleUInput.onblur = function() { this.style.width = ((this.innerHTML.length + 3) * 8) + 'px'; scale.voltage = scaleGrid / this.innerHTML; drawAll(); } scaleIInput.onblur = function() { this.style.width = ((this.innerHTML.length + 3) * 8) + 'px'; scale.current = scaleGrid / this.innerHTML; drawAll(); } colorInput.onchange = function() { arrows[findCurrArrow()][4] = this.value; drawAll(); setButtonStyle() }; scalesCheck.addEventListener('input', () => { /* if (scalesCheck.checked) { document.getElementById("scaleOnOff1").style.display = "table-cell"; document.getElementById("scaleOnOff2").style.display = "table-cell"; } else { document.getElementById("scaleOnOff1").style.display = "none"; document.getElementById("scaleOnOff2").style.display = "none"; } drawAll(); */ scalesMode(); }) scalesMode(); tempcanvas.onmousedown = function(e) { if (e.which != 1) return; var rect = canvas.getBoundingClientRect(); //console.log(istouch, touchCounter); //if(!istouch || touchCounter!=1){ x1 = Math.round((e.clientX - rect.left) / cail) * cail; //Math.round(e.clientX - rect.left); y1 = Math.round((e.clientY - rect.top) / cail) * cail; // Math.round(e.clientY - rect.top); // } // if(!istouch || (touchCounter==2 &&istouch)){ // console.log("hier"); x2 = x1; y2 = y1; //touchCounter=0; // } isDown = true; istouch=false; } tempcanvas.onmouseup = function(e) { if (e.which != 1) return; if (x1 == x2 && y1 == y2) { isDown = false; return; } isDown = false; ctx.clearRect(0, 0, w, h); var indexCurrArrow = findCurrArrow(); //arrow=[x1,y1,x2,y2,color,name,kind,x2-x1, y2-y1] arrows[indexCurrArrow][0] = x1; arrows[indexCurrArrow][1] = y1; arrows[indexCurrArrow][2] = x2; arrows[indexCurrArrow][3] = y2; arrows[indexCurrArrow][7] =((x2 - w / 2) -(x1 - w / 2))/scale[arrows[indexCurrArrow][6]]; arrows[indexCurrArrow][8] =(((h / 2 - y2)-(h / 2 - y1)))/scale[arrows[indexCurrArrow][6]]; drawAll(); } tempcanvas.onmousemove = function(e) { //arrow=[x1,y1,x2,y2,color,name,kind,x2-x1, y2-y1] var rect = canvas.getBoundingClientRect(); var indexCurrArrow = findCurrArrow(), currendKind = arrows[indexCurrArrow][6]; x2 = Math.round((e.clientX - rect.left) / cail) * cail; //Math.round(e.clientX - rect.left); y2 = Math.round((e.clientY - rect.top) / cail) * cail; //Math.round(e.clientY - rect.top); if (!isDown) { ctx.clearRect(0, 0, w, h); ctx.fillStyle = "#000" ctx.fillText("Maus: X: " + (x2 - w / 2) / scale[arrows[indexCurrArrow][6]] + ", Y: " + (h / 2 - y2) / scale[arrows[indexCurrArrow][6]], 10, 20); //ctx.strokeStyle = "#000" //ctx.lineWidth = 1; //ctx.strokeRect(x2-4,y2-4,8,8) // return; }else { var len = lenFromTo(x1, y1, x2, y2, currendKind), //(Math.hypot(x2 - x1, y2 - y1)/cail).toFixed(2), angle = angleFromTo(x1, y1, x2, y2); //(-Math.atan2((y2-y1),(x2-x1))*180/Math.PI).toFixed(2); ctx.clearRect(0, 0, w, h); ctx.fillText("Start: X: " + (x1 - w / 2) / scale[arrows[indexCurrArrow][6]] + ", Y: " + (h / 2 - y1) / scale[arrows[indexCurrArrow][6]], 10, 20); var unit = "V" if (currendKind == "current") unit = "A"; if (scalesCheck.checked) ctx.fillText("Betrag: " + len + " " + unit + ", Phase: " + angle + "°", 10, 40); else ctx.fillText("Winkel: " + angle + "°", 10, 40); ctx.fillText("Ende:X: " + (x2 - w / 2) / scale[arrows[indexCurrArrow][6]] + ", Y: " + (h / 2 - y2) / scale[arrows[indexCurrArrow][6]], 10, 60); ctx.lineWidth = 3; var currArrowColor = arrows[findCurrArrow()][4] canvasDrawArrow(ctx, x1, y1, x2, y2, currArrowColor); } ctx.strokeStyle = "#000" ctx.lineWidth = 1; ctx.strokeRect(x2-4,y2-4,8,8) } // Set up touch events for mobile, etc tempcanvas.addEventListener("touchstart", function (e) { e.preventDefault(); mousePos = getTouchPos(tempcanvas, e); var touch = e.touches[0]; //istouch=true; //touchCounter+=1 var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY }); tempcanvas.dispatchEvent(mouseEvent); }, false); tempcanvas.addEventListener("touchend", function (e) { var mouseEvent = new MouseEvent("mouseup", {}); tempcanvas.dispatchEvent(mouseEvent); }, false); tempcanvas.addEventListener("touchmove", function (e) { e.preventDefault(); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY }); tempcanvas.dispatchEvent(mouseEvent); }, false); // Get the position of a touch relative to the canvas function getTouchPos(canvasDom, touchEvent) { var rect = canvasDom.getBoundingClientRect(); return { x: touchEvent.touches[0].clientX - rect.left, y: touchEvent.touches[0].clientY - rect.top }; } function addArrow(where) { //arrow=[x1,y1,x2,y2,color,name,kind,x2-x1, y2-y1] if (arrows[0][5] == "dummy") arrows = []; var inputs = document.getElementById(where), value = "U̲", kind = "voltage"; if (where == "Ströme") { kind = "current"; value = "I̲"; } document.getElementById("delete-" + kind).disabled = false; var buttonClass = kind + "-arrow arrow-button", id = inputs.childElementCount; var x = document.createElement("INPUT"); x.setAttribute("type", "text"); x.setAttribute("class", buttonClass); x.setAttribute("value", value + id); x.setAttribute("oldvalue", value + id); inputs.appendChild(x); x.focus(); x.setSelectionRange(1, x.value.length); //inputs.innerHTML += ""; var color = getRandomColor(); arrows.push([0, 0, 0, 0, color, value + id, kind]); curr_arrow = value + id; colorInput.value = color; setButtonStyle(); drawAll(); } function deleteArrow(where) { var inputs = document.getElementById(where), kind = "voltage"; if (where == "Ströme") { kind = "current"; } d = document.querySelectorAll('input.' + kind + '-arrow'); if (d.length > 0) { d[d.length - 1].remove(); arrows.splice(findCurrArrow(d[d.length - 1].value), 1); arrows = createArrows(); // setButtonStyle(); drawAll(); if (!d.innerHTML)document.getElementById("delete-" + kind).disabled = true; } } function createArrows(clear = false) { //arrow=[x1,y1,x2,y2,color,name,kind,x2-x1, y2-y1] function arrowPush(obj,kind){ for (var i = 0; i < obj.length; i++) { if(!arrows.length) { var arrow = [0, 0, 0, 0, obj[i].name , obj[i].value, kind,0,0]; newArrows.push(arrow); continue; } var index = findCurrArrow(obj[i].value); if (index == -1 || clear) { var arrow = [0, 0, 0, 0, arrows[index][4], obj[i].value, kind,0,0]; newArrows.push(arrow); } else newArrows.push(arrows[index]); } } var newArrows = [], v_arrows = document.querySelectorAll('input.voltage-arrow'), //document.querySelectorAll('#Spannungen > *'), c_arrows = document.querySelectorAll('input.current-arrow') color = document.getElementById("color").value; arrowPush(v_arrows, "voltage") arrowPush(c_arrows, "current") if (!newArrows.length) { newArrows = [ [0, 0, 0, 0, getRandomColor(), "dummy", "voltage",0,0] ]; curr_arrow = "dummy"; colorInput.value = newArrows[0][4]; } else curr_arrow = newArrows[newArrows.length - 1][5]; return newArrows; } function findCurrArrow(x = curr_arrow) { return arrows.findIndex((arrow) => arrow.indexOf(x) != -1) } function drawGrid() { mainctx.clearRect(0, 0, w, h); ctx.lineWidth = 1; ctx.strokeStyle = "#D9D9D9"; for (var x = 0; x < w; x += scaleGrid) { for (var y = 0; y < h; y += scaleGrid) { ctx.strokeRect(x, y, scaleGrid, scaleGrid); } } ctx.font = "16px Verdana"; ctx.fillStyle = "black"; canvasDrawArrow(ctx, 0, h / 2, w, h / 2, '#000'); canvasDrawArrow(ctx, w / 2, h, w / 2, 0, '#000'); ctx.fillText("Re", (w - 25), (h / 2 + 20)); ctx.fillText("Im", (w / 2 + 10), (20)); ctx.font = "12px Verdana"; //kästchen Größe } function drawAll() { ctx.clearRect(0, 0, w, h); drawGrid(); ctx.lineWidth = 3; ctx.font = "12px Verdana"; i = 0; //for loop counter arrows.filter(arrow => lenFromTo(arrow[0], arrow[1], arrow[2], arrow[3], arrow[6]) != 0).forEach(arrow => { //arrow=[x1,y1,x2,y2,color,name,kind] //canvasDrawArrow(ctx,x1, y1, x2, y2,color,name); canvasDrawArrow(ctx, arrow[0], arrow[1], arrow[2], arrow[3], arrow[4], arrow[5]); var len = lenFromTo(arrow[0], arrow[1], arrow[2], arrow[3], arrow[6]), angle = angleFromTo(arrow[0], arrow[1], arrow[2], arrow[3]); ctx.fillStyle = arrow[4]; var unit = "V"; if (arrow[6] == "current") unit = "A"; if (scalesCheck.checked) ctx.fillText(arrow[5] + ": Betrag: " + len + " " + unit + ", Phase: " + angle + "°", 10, (h - 10 - 20 * i)); else ctx.fillText(arrow[5] + ": Phase: " + angle + "°", 10, (h - 10 - 20 * i)); i += 1; }) mainctx.drawImage(tempcanvas, 0, 0); arrow_textarea.value = JSON.stringify(arrows); ctx.clearRect(0, 0, w, h); } function canvasDrawArrow(context, fromx, fromy, tox, toy, color, name = "") { function getBack(len, x1, y1, x2, y2) { return x2 - (len * (x2 - x1) / (Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2)))); } var headlen = 15.0; var back = 0.0; var angle1 = Math.PI / 13.0; var angle2 = Math.atan2(toy - fromy, tox - fromx); var diff1 = angle2 - angle1; var diff2 = angle2 + angle1; var xx = getBack(back, fromx, fromy, tox, toy); var yy = getBack(back, fromy, fromx, toy, tox); context.beginPath(); context.strokeStyle = color; //"#000"; context.moveTo(fromx, fromy); context.lineTo(tox, toy); context.moveTo(xx, yy); context.lineTo(xx - headlen * Math.cos(diff1), yy - headlen * Math.sin(diff1)); context.moveTo(xx, yy); context.lineTo(xx - headlen * Math.cos(diff2), yy - headlen * Math.sin(diff2)); context.stroke(); context.font = "bold 12px Verdana"; context.fillStyle = color; //context.rotate(angle2); var x_name = xx - headlen * 5 * Math.cos(diff2); var y_name = yy - headlen * 5 * Math.sin(diff2); context.fillText(name, x_name, y_name); //context.rotate(-angle2); } function lenFromTo(fromx, fromy, tox, toy, kind) { var len = (Math.hypot(tox - fromx, toy - fromy) / scale[kind]).toFixed(2); return len; } function angleFromTo(fromx, fromy, tox, toy) { var angle = (-Math.atan2((toy - fromy), (tox - fromx)) * 180 / Math.PI).toFixed(2); return angle; } function getRandomColor() { var letters = '0123456789ABCDEF0123456789ABAB'; var randomColor = '#'; for (var i = 0; i < 6; i++) { randomColor += letters[Math.floor(Math.random() * 16)]; } return randomColor; } function setButtonStyle() { var arrowButtons = document.querySelectorAll('input.arrow-button'); var menuBUttons = document.querySelectorAll('input.menu-button'); arrowButtons.forEach(button => { var borderColor = arrows[findCurrArrow(button.value)][4] button.style.border = "4px solid " + borderColor; button.style.backgroundColor = "#9FB6C4"; button.style.fontFamily = "Verdana"; button.style.boxShadow = "1px 1px 1px #888"; button.style.color = "white"; button.style.width = ((button.value.length + 6) * 8) + 'px'; button.style.marginLeft = "5px"; button.onclick = function() { curr_arrow = this.value; colorInput.value = arrows[findCurrArrow()][4]; setButtonStyle(); } button.onfocus = function() { button.oldvalue = button.value } button.onchange = function() { this.style.width = ((this.value.length + 6) * 8) + 'px'; arrows[findCurrArrow(button.oldvalue)][5] = button.value; curr_arrow = button.value; drawAll(); } if (curr_arrow == button.value) button.style.backgroundColor = "#C50F20"; button.onmouseover = function() { var mark = arrows[findCurrArrow(button.value)]; ctx.lineWidth = 7; canvasDrawArrow(ctx, mark[0], mark[1], mark[2], mark[3], mark[4], mark[5]); this.style.backgroundColor = "#C50F20" //"#E4E4E4"; }; button.onmouseout = function() { drawAll(); if (curr_arrow != button.value) this.style.backgroundColor = "#9FB6C4" //"#F5F5F5"; }; }) } function scalesMode(){ if (scalesCheck.checked) { document.getElementById("scaleOnOff1").style.display = "table-cell"; document.getElementById("scaleOnOff2").style.display = "table-cell"; } else { document.getElementById("scaleOnOff1").style.display = "none"; document.getElementById("scaleOnOff2").style.display = "none"; } drawAll(); } function testMode(){ function moveTo(source,destination){ // Declare a fragment: var fragment = document.createDocumentFragment(); // Append desired element to the fragment: fragment.appendChild(document.getElementById(source)); // Append fragment to desired element: document.getElementById(destination).appendChild(fragment); } var check=document.getElementById("testmode-check") document.getElementById("testmode").style.display="none"; if(check.checked){ // === Maßstab aus document.getElementById("scalesCheck").checked=false; document.getElementById("acc-row").style.display="none" // Farbe aus document.getElementById("color").style.display="none" // Genauigkeit auf 1 document.getElementById("accuracy").value="0"; document.getElementById("accuracy").disabled=true; document.getElementById("accuracyOutput").innerHTML="1" scaleU=scaleGrid; scale.voltage=scaleGrid; cail = scaleGrid; // Buttons in die Tabelle moveTo("Test-Spannungen", "Spannungen"); moveTo("Test-Ströme", "Ströme"); // Add-Button ausschalten document.getElementById("add-voltage").disabled=true; document.getElementById("add-current").disabled=true; // Phase ausschalten }else { document.getElementById("Test-Spannungen").remove(); document.getElementById("Test-Ströme").remove(); } } function undo() { //var copys=Object.assign([], lastsave); for (var i = 1; i < lastsave.length; i++) { if (JSON.stringify(arrows) === JSON.stringify(lastsave[i])) arrows = JSON.parse(JSON.stringify(lastsave[i - 1])) } //arrows=JSON.parse(JSON.stringify(lastsave)); mainctx.clearRect(0, 0, w, h); createArrows(); drawAll(); } Element.prototype.remove = function() { this.parentElement.removeChild(this); } NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length - 1; i >= 0; i--) { if(this[i] && this[i].parentElement) { this[i].parentElement.removeChild(this[i]); } } } function clears() { arrows = createArrows(true); setButtonStyle(); mainctx.clearRect(0, 0, w, h); drawAll(); } function saveimg() { let canvasImage = document.getElementById('canvas').toDataURL('image/png'); // this can be used to download any image from webpage to local disk let xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onload = function() { let a = document.createElement('a'); a.href = window.URL.createObjectURL(xhr.response); a.download = 'Zeigerdiagramm.png'; a.style.display = 'none'; document.body.appendChild(a); a.click(); a.remove(); }; xhr.open('GET', canvasImage); // This is to download the canvas Image xhr.send(); }
Testmode
1

Spannungen Ströme Genauigkeit
Zeiger

10
Maßstab
10
V pro Kästchen
1
A pro Kästchen



]]> 1 1 None 1 {} 0 html 0 0 10240 1 asdfasf SHOW