To do

Interaktion
- (Pfadbearbeitung: Hinzufügen, Entfernen, Ändern von Pfadsegmenten)
- Platten längs oder quer:
  - Pfeiltasten hoch/runter bewegen nur Reihe wenn vertikal
  - Platzieren ist irgendwie komisch (Versatz entsteht, wenn ich zweiten Knopf benutze)
  - Skalieren macht alles kaputt, wenn in vertikalmodus
Rastergröße ändern, wenn bereits gezeichnet wurde
Projektmanager: Bilddatei händisch auswählbar?
Distanzmessung mit Komma , in input möglich?
Nach Laden des Projektes sind mehr Platten beweglich, als die Zeile lang ist...
(Warum sind Rasterpunkte manchmal außerhalb der Platten?)

refactor & beautifications

mehr Dialoge!
- Projekt laden: Dialog öffnen, Ordner auswählen
- Projekt laden: Fehlermeldung, wenn keine project.json
UI-beautification: Bilddiagonale messen: Bilddiagonale anzeigen!
Anzeige von kritischen Plattengrenzen & Gestößen
remove gridPoints out of bounds
undo area: auch lastSegment rückänderbar machen (einfach wenn mode == area)
bug: Bildskalierung läuft total schief..??
nach Speichern link einblenden ?!
feste Radien = 200
SVG als Eingangsbild (scale to roi.height / window.height)
bug: movableSheetsFrom und To werden bei Projekt laden nicht gut geladen -> muss immer Platten neu berechnen
gestrichelte Hilfslinie automatisch nach Quadranten und Richtung?

log

05.06.2024

händisch einzelne Platten oder alle links / alle rechts verschieben
- Shift und Control auch bei Lukas so?
wenn Plattenlänge und -breite vertauscht sind, ist Rastergröße (um ca. die Hälfte?) verschoben
Raster auch neu berechnen, wenn Platten-Randabstand geändert wird

25.03.2024

gestrichelte Linie für nächsten Pfad

19.03.2024

bug: Wenn sheets von import geladen, werden die alten nicht entfernt, wenn recreate from input fields!
- parseInt(inputValue) hat gefehlt!
plus-minus-knopf für feintuning der Skalierung

13.03.2024, 14.03.2024

Linienwerkzeug nur möglich wenn raster.roi existiert
Batch Skripte zum Installieren, Starten und Beenden
measure distance hat bei lukas nen bug - [x] Distanzmessung via Bilddiagonale
Schreiben in Input Fields führt alle keydown functions aus..
zweiter Arbeitsbereich muss entfernt werden
- Arbeitsbereich erstellen -> recreateSheets()
Sheets werden initial falsch erstellt, wenn Bild noch nicht geladen ist!
- --> erst erstellen, wenn Arbeitsbereich definiert?

12.03.2024

Layout
- merge start.html -> index.html ("Rasterabstand" -> "Mindest-Randabstand")
- Symbol für A und D
- Hinweis: Platten bewegen mit Leerzeichen
- gridGapX und Y anzeigen
Raster mit alternierender Helligkeit
- erstmal via opacity = 0.5
Verschnitt reparieren... hier unverwendeter, hilfreicher Code:

let tempObj = new paper.Path();
for (let index = 0; index < sheetsGroup.children.length; index++) {
	if (raster.roi.intersects(sheetsGroup.children[index])) {
		sheetsUsed++;
		tempObj = raster.roi.intersect(sheetsGroup.children[index]);
		if (raster.area.children.length) // area not undefined
			if (sheetsGroup.children[index].intersects(raster.area)) {
				tempObj = tempObj.subtract(raster.area);
				console.log(`${sheetHelpers[index].label.content} intersects raster.area`);
			}
			tempObj.fillColor = 'green';
			console.log(sheetHelpers[index].label.content, tempObj.area);
			tempObj.removeOnMove()
		}
	}

11.03.2024

Ausschließen der Plattenelemente von Aussparungen, berechnen der Gesamtfläche
Buttons unterhalb von Canvas
- gelöst durch Abfrage, ob Maus in Canvas ist
Arbeitsfläche bewegbar machen (bisher Workaround: Eingangsbild anpassen)
- [ ] ✎ edit segments
- [ ] 🗘 remake
- neu hinzufügen
deprecated:

export function selectNextRow(sheetsGroup, direction) {
	movableSheetsFrom = (movableSheetsFrom + (sheetsPerRow * direction));
	movableSheetsTo = movableSheetsTo + (sheetsPerRow * direction);
	if (movableSheetsFrom < 0 || movableSheetsTo > sheetsGroup.children.length) {
		movableSheetsFrom = 0;
		movableSheetsTo = sheetsPerRow;
		}

	// style:
	sheetsGroup.strokeWidth = 1;
	sheetsGroup.strokeColor = globalColor;
	for (var i = movableSheetsFrom; i < movableSheetsTo; i++) {
		sheetsGroup.children[i].strokeWidth = 4;
	}
}

10.03.2024

mehrere Platten via intersect verschieben: Wie kann ich gridDots verschieben?
- gridDots mit sheetGroup in eine sheetGroup?
- für Verschieben der sheetHelpers.gridDots bräuchte es nämlich die movableSheetsFrom und -To... die Dinger benutzen!
- alternativ: cursorHorizontalLine

// paperSnake.js:
cursorVertical = new paper.Path.Line({
from: [0, 100],
to: [100, 100]
// strokeColor: 'black'
})

// UserInteraction.js:
onMouseMove(){
	cursorVertical.segments[0].point = [0, event.point.y];
	cursorVertical.segments[1].point = [raster.roi.bounds.topRight.x, event.point.y];
}

// Platten.js
export function selectRowBySheet_() {
	activeSheets = [];
	// style:
	sheetsGroup.strokeWidth = 1;
	sheetsGroup.strokeColor = globalColor;
	
	for (let index = 0; index < sheetsGroup.children.length; index++) {
		const sheet = sheetsGroup.children[index];
		if (sheet.intersects(cursorHorizontal)){
			sheet.strokeWidth = 4;
			activeSheets.push(sheet);
		}
	}
}

Radius immer = x_dist
Pfadlänge in Metern angeben

05.03.2024

Projektmanager
- Export und import des ganzen Projektes
- Startpage: neues Projekt
- das Einfügen von Bildern (Fotos) und Zeichnungen von Wänden und Angeben der Dimensionen (Längen/Größe der Wand)
Farben von Linien, Kreisen etc einstellbar machen
Pfeile hoch und runter macht Pfad kaputt, da sich gridPoints verschieben! -> sollte via raster.line.lastSegment als gp_previous gelöst werden!

03.03.2024

kann Platten bei importiertem Projekt nicht bewegen --> überprüfe nochmal das laden von sheetsHelpers und sheetsGroup!
export raster.gridPoints
- als [[x], [y]] --> nicht praktikabel, da let idx = this.gridPoints.findIndex((dot) => (dot.id == ptAtSmallestDist.id)); nicht präzise funktionieren wird..

01.03.2024

load project: pass JSON to website while refresh: open project by url: http:https://localhost:3000/?projectData=beispielbild.json
download JSON:

  // Unfortunately, due to browser security restrictions, JavaScript running in the browser cannot directly write files to disk for security reasons:
const blob = new Blob([projectExport], { type: 'application/json'});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();

26.02.2024:

Verschieben einzelner Reihen (Versatz um Rastermaß)
translate gridDots: hat letztendlich nicht funktioniert wie gewollt; musste die gridDots neu erstellen.. Was vllt hätte klappen können:

sheetHelpers[i].gridDots.position.x = child.bounds.topLeft.x + child.bounds.width/2; // hat so nicht geklappt

sheetHelpers[i].gridDots.position.x = child.position.x - sheetHelpers[i].gridGapX * i; // und so auch nicht.. Problem: um i verset zt!

sheetHelpers[i].gridDots.position.y = child.position.y; // scheint zu klappen!

22.02.2024

Platten in ROI:

if (!platten.children[i].isInside(canvasArea.bounds))
    platten.children[i].fillColor = 'red';
// ODER
if (!canvasArea.bounds.contains(platten.children[i].bounds))
    platten.children[i].fillColor = 'red';
// ODER
if (!canvasArea.bounds.contains(platten.children[i].bounds.center))
	// ...

21.02.2024

Manchmal werden gp beim klicken nicht erwischt, da minimal anderes Raster bei Erstellung als bei Erfassung durch mouseGridX und mouseGridY
- → clamp() und step() auch bei erstellung verwenden??

20.02.2024

toggle tools via JS:

// toggle modes:
Array.prototype.forEach.call(document.getElementsByClassName("tool"), (element) => {
console.log(element);
element.classList.remove("active");
});
this.classList.toggle("active");

14.02.2024

Markierung von Aussparungen wie z.B. Fenster, die nicht nutzbar sind
- Polygons malen auf neues PaperScope
  - https://paperjs.org/reference/size/
- Überlappung checken → gridPunkt nicht erstellen, wenn Überlappung
- Skalieren von gridPoints durch button-toggle vllt so: https://groups.google.com/g/paperjs/c/xJTDWTQIFwQ
- raster-compoundPath

12.02.2024

Paper.js offers different approaches for its integration in the browser. The simplest way is to use PaperScript, our extension of JavaScript that facilitates a few things along the way. For more advanced users or bigger projects it might be preferable to work directly with JavaScript, as described in the tutorial about Using JavaScript Directly.
- npm install paper → include as module: Cannot read properties of undefined (reading 'acorn') → do not include as module!
- include from js/paper/paperjs-v0.12.17/dist/paper-full.js: Unable to find canvas with id "null"
- <script type="text/javascript" src="./js/paper/paperjs-v0.12.17/dist/paper-core.js"></script> → keine Fehlermeldung ✓
Paper.js performance ebenfalls leider noch langsam (merkt man bei mouseMove wenn gridPoints gerendert werden)

07.02.2024, 08.02.2024

dxf export mit maker.js
- Problem: import funktioniert nicht..
  - wenn via index.html geladen: ./js/browser.maker.js: require not defined
  - wenn in index.html via <script type="module">: in VSCode verfügbar, doch snake.js:189 Uncaught ReferenceError: MakerJs is not defined
- browserify main.js -o bundle.js: Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat '/home/dav/github/snakeJS/async_hooks' required by /home/dav/github/snakeJS/node_modules/on-finished/index.js
  - Alternative: webpack oder rollback ausprobieren
- browserify: articles
- Routing mit Express ✓
  - dxf file export✓
  - Liniensegmente als json → dxf file export
    - Bezier → dxf
  - oder: Paths als SVG aus p5.js → import via const dxf = makerjs.exporter.toDXF(makerjs.importer.fromSVGPathData(svg));
performance optimieren: dots als shader??... nicht mehr nötig, da dots nur bei mouseOver erscheinen
p5js Performance issues
- frameRate(15)... immernoch langsam
- ChatGPT:
  - Use noLoop() and redraw(): If your dots don't need to be updated continuously, you can use the noLoop() function to stop the draw loop and only redraw when needed using the redraw() function.
  - Offscreen Buffer: Instead of drawing directly to the canvas, you can draw to an offscreen buffer using createGraphics() and then draw the buffer to the canvas. This can improve performance, especially if you're doing complex calculations or drawing operations.
    - methods cannot be called!!
  - Batch Rendering: Instead of drawing each dot individually, you can batch render them using shapes like circles or rectangles. This can significantly reduce the number of draw calls and improve performance.
  - Use WebGL Renderer: If your browser supports it, switching to the WebGL renderer (createCanvas(width, height, WEBGL)) can sometimes provide better performance for complex drawings. WEBGL ist auf jeden Fall viel schneller ✓ aber braucht besondere Grafikeinstellungen: https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5
    - WebGL1 vs webGL2 ... createCanvas(width, height, WEBGL) erzeugt webgl2 renderer
  - Optimize Drawing Operations: Make sure you're only performing necessary drawing operations inside the draw loop. Avoid unnecessary calculations or operations that don't contribute to the final result.
  - Profile and Optimize: Use browser developer tools to profile your code and identify performance bottlenecks. Once you identify them, you can optimize those parts of your code to improve performance.

06.02.2024

Dotgrid cursor:

function isEqual (a, b) { return a.x === b.x && a.y === b.y }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
function step (v, s) { return Math.round(v / s) * s }

Upload images
using nodeJS+Multer+Express / https://www.golinuxcloud.com/node-js-upload-file/

05.02.2024

read JSON in nodeJS:
nodeJS: https://blog.logrocket.com/reading-writing-json-files-node-js-complete-tutorial/

You can use the require function to synchronously load JSON files in Node. After loading a file using require, it is cached. Therefore, loading the file again using require will load the cached version. In a server environment, the file will be loaded again in the next server restart. It is therefore advisable to use require for loading static JSON files such as configuration files that do not change often. Do not use require if the JSON file you load keeps changing, because it will cache the loaded file and use the cached version if you require the same file again. Your latest changes will not be reflected.

client: https://www.freecodecamp.org/news/how-to-read-json-file-in-javascript/
npm start: Uncaught SyntaxError: Cannot use import statement outside a module

// using p5js as a module, the functions have to be called manually at the bottom of the script:

window.setup = setup;
window.draw = draw;

02.02.2024

Wenn in html <script src="./snake.js"></script> → Uncaught SyntaxError: import declarations may only appear at top level of a module
Wenn <script type="module" src="./snake.js"></script> → function setup und function draw werden nicht ausgeführt

Namensgebung

Therm = Termiten = Thermiten THERMisch ITErativ ENtwurf

Warm, Wurm, Wärme Paperworm Wandwɐrm, Wandwurm

Recherche

Suchbegriffe:

html canvas to dxf
framework to create paths along grid
frontend path dxf
interactive vector frontend // liefert bloß Ergebnisse bzgl Maps
interactive dxf path frontend

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Log.md

Log.md

To do

refactor & beautifications

log

Namensgebung

Recherche

verwandte Projekte und Frameworks:

Suchbegriffe:

Files

Log.md

Latest commit

History

Log.md

File metadata and controls

To do

refactor & beautifications

log

Namensgebung

Recherche

verwandte Projekte und Frameworks:

Suchbegriffe: