Schaltpläne Inkscape

Links, Shops Formelsammlungen und so weiter

Moderatoren: Heaterman, Finger, Sven, TDI, Marsupilami72, duese

Antworten
ch_ris
Beiträge: 3018
Registriert: Mo 30. Nov 2015, 10:08

Schaltpläne Inkscape

Beitrag von ch_ris »

ich hab mir mal die Mühe gemacht einen Schaltplan zu vektorisieren.
das bringt nur mäßig was mangels sinnvoller Linienerkennung.
man kann zumindest den Objektfang benutzen um Linien nachzuzeichnen.
hab die nach Sicherungskreis in Layern organisiert.
2023-01-11 09_06_27-CBR900RR schaltplan.svg - Inkscape.png
alle Versuche das interaktiv betrachten zu können, ohne den Ressourcenfresser Inkscape, waren frustrierend.
interaktiv meint Layer ein/aus blenden.
MultiPage pdf, JessyInk, InkView...alles kagge.

Idee jetzt: per (inline bzw inSVG?) javascript, floating buttons zu erzeugen die die Sichtbarkeit steuern.
Für die Betrachtung im Browser.
Wüsste jemand vielleicht ob und wie?
oder hat eine bessere Idee?
ch_ris
Beiträge: 3018
Registriert: Mo 30. Nov 2015, 10:08

Re: Schaltpläne Inkscape

Beitrag von ch_ris »

ohja das ist cool.
2023-01-11 11_00_29-Mozilla Firefox.png
die drei kreise switchen die sichtbarkeit. zoomPan gibts auch noch.
nur blöd das ich das script manuell rein geschrieben hab
dh wenn ich das editiere ists vermutlich weg

edit. nee. oder? mal gucken
2023-01-11 11_06_01-CBR900RR schaltplan2.svg - Inkscape.png
ch_ris
Beiträge: 3018
Registriert: Mo 30. Nov 2015, 10:08

Re: Schaltpläne Inkscape

Beitrag von ch_ris »

ja nee das geht. ich wer verrückt.

script und Navigation am Ende des Document:

Code: Alles auswählen

	<circle cx="23.751122" cy="15.425266" r="21" fill="#ffffff" opacity="0.75" id="circle21295"/>
	<path class="button" onclick="pan(0, 25)" d="m 23.751122,-4.5747334 6,10 a 20,35 0 0 0 -12,0 z" id="path21297"/>
	<path class="button" onclick="pan(25, 0)" d="M 3.7511217,15.425267 13.751122,9.4252666 a 35,20 0 0 0 0,12.0000004 z" id="path21299"/>
	<path class="button" onclick="pan(0,-25)" d="m 23.751122,35.425267 6,-10 a 20,35 0 0 1 -12,0 z" id="path21301"/>
	<path class="button" onclick="pan(-25, 0)" d="m 43.751122,15.425267 -10,-6.0000004 a 35,20 0 0 1 0,12.0000004 z" id="path21303"/>
	<circle class="button" onclick="show('layer2')" cx="5" cy="-14.56576" r="4" fill="red" opacity="0.75" id="circle21305"/>
	<circle class="button" onclick="show('layer6')" cx="20.450474" cy="-14.773907" r="4" fill="red" opacity="0.75" id="circle21307"/>
	<circle class="button" onclick="show('layer3')" cx="35.190197" cy="-14.56576" r="4" fill="red" opacity="0.75" id="circle21309"/>
	<circle class="compass" cx="23.751122" cy="15.425266" r="10" id="circle21311"/>
	<circle class="button" cx="23.751122" cy="10.925266" r="4" onclick="zoom(0.8)" id="circle21313"/>
	<circle class="button" cx="23.751122" cy="19.925266" r="4" onclick="zoom(1.25)" id="circle21315"/>
	<rect class="plus-minus" x="21.751122" y="10.425266" width="4" height="1" id="rect21317"/>
	<rect class="plus-minus" x="21.751122" y="19.425266" width="4" height="1" id="rect21319"/>
	<rect class="plus-minus" x="23.251122" y="17.925266" width="1" height="4" id="rect21321"/>
	<script type="text/javascript" id="script21323">
		<![CDATA[
        var transformMatrix = [1, 0, 0, 1, 0, 0];
        var svg = document.getElementById('svg2');
        var viewbox = svg.getAttributeNS(null, "viewBox").split(" ");
        var centerX = parseFloat(viewbox[2]) / 2;
        var centerY = parseFloat(viewbox[3]) / 2;
        var matrixGroup = svg.getElementById("matrix-group");
		

function show(elem) {
  var style = svg.getElementById(elem).style.display;
  if (style === "none") svg.getElementById(elem).style.display = "block";
  else document.getElementById(elem).style.display = "none";
}
        function pan(dx, dy) {
            transformMatrix[4] += dx;
            transformMatrix[5] += dy;
            setMatrix();
        }

        function zoom(scale) {
            for (var i = 0; i < 6; i++) {
                transformMatrix[i] *= scale;
            }

            transformMatrix[4] += (1 - scale) * centerX;
            transformMatrix[5] += (1 - scale) * centerY;
            setMatrix();
        }

        function setMatrix() {
            var newMatrix = "matrix(" +  transformMatrix.join(' ') + ")";
            matrixGroup.setAttributeNS(null, "transform", newMatrix);
        }
    ]]></script>
der eigentliche Inhalt in eine Matrix gruppe:

Code: Alles auswählen

<g id="matrix-group" transform="matrix(1 0 0 1 0 0)"> zeug </g>
und so sieht das in Inkscape dann aus:
2023-01-11 11_17_49-CBR900RR schaltplan2.svg - Inkscape.png

die anregung hab ich hier her:
https://github.com/petercollingridge/co ... nteraction
Antworten