.svg mit Anhang als eine Datei "packen" bzw. ausführen

CrEaToXx

Lt. Junior Grade
Dabei seit
Nov. 2018
Beiträge
363
Guten Tag,

ich bastele gerade an einer .svg Datei zur visuellen Darstellung von Abbundzeichen historischer Gebäude. Im Prinzip handelt es sich hier um .html code, gepaart mit diversen Ordnern, in denen .css, .js und Bilddateien gespeichert sind, die in der Hauptdatei referenziert werden. Nachdem ich die Datei fertig gestellt habe würde ich sie gerne als alleinstehendes Programm ausführen, ohne jedem Nutzer die gesamte Struktur des Sourcecodes und anhängende Ordner übertragen zu müssen.

Alle zu Grunde liegenden Referenzen müssten also in diese Datei, außer die Bilddateien, die allgemeinzugänglich auf dem Server der Firma liegen. Welche Art der Vorgehensweise wäre hier am sinnvollsten? Eine .exe erstellen. .html als Paket, insofern möglich? Andere Möglichkeiten?
 

DeusoftheWired

Fleet Admiral
Dabei seit
Juni 2009
Beiträge
10.153
Du hast das Prinzip einer Webseite beschrieben.
 

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Zuletzt von einem Moderator bearbeitet: (Zitat des unmittelbar vorangestellten Beitrags entfernt)

blablub1212

Commodore
Dabei seit
Sep. 2009
Beiträge
5.116

DeusoftheWired

Fleet Admiral
Dabei seit
Juni 2009
Beiträge
10.153
trotzdem ist es mir unmöglich alles außer den Bilddateien servergestützt zu vernetzen, da hier die Serverstruktur, sagen wir mal..."veraltet" ist und ständig die Struktur wechselt.
Definiere „veraltet“! Wieviele MB/GB umfaßt das gesamte Projekt?

Kommt ein kostenloser Hoster in Frage, der sich über Werbung finanziert? (wirkt als Firma aber sofort unseriös und stümperhaft)

Bist du bereit, x Euro pro Monat für das Hosten der Seite auszugeben?

Wie sieht die Zielgruppe aus? Professionelle Geschäftskunden? Familie, Freunde, Bekannte?

Wenn Bilder auf dem Server der Firma liegen, weshalb dann nicht noch den Rest dazupacken? Hat die Firma denn vielleicht sogar schon einen fertigen Internetauftritt?
 

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Du missverstehst...Museumsarbeit...;)

Nutzer sind lediglich MA die auf die digitalisierten Gebäudedaten zugreifen möchten. Zimmerleute, Wissenschaftler, Architekten etc. Alles wird lokal abgewickelt, die Rechner der MA sind aber über einen allgemeinen Server vernetzt.

Die Programmdateien dürften am Schluss wohl kaum mehr als 100MB pro "Projekt" ausmachen. Wobei sich ein Projekt, immer auf ein Gebäude beziehen würde. Eine globale "Überdatei" die alle Projekte miteinander vereint und aus einem zentralen Punkt den Zugriff erlaubt, wäre ganz zum Schluss angedacht. Aber ob ich vor meiner Rente noch so weit komme wage ich zu bezweifeln, da dieses Projekt auch als Vorlage für andere übertragbare Dokumentations- bzw. Datenerfassungs-Projekte dienen soll. Der Hintergrund ist einfach: Museumssoftware ist m.M.n. völlig grundlos saumäßig überteuert.

Der Grund warum ich die Bilder nicht miteinbeziehe ist offensichtlich. Datenmenge soll gering bleiben. Eine Konvertierung auf Android ist ebenfalls bereits in der "Planung".
 
Zuletzt von einem Moderator bearbeitet: (Zitat des unmittelbar vorangestellten Beitrags entfernt)

Graphixx

Lt. Commander
Dabei seit
Feb. 2009
Beiträge
1.857
Museumssoftware ist m.M.n. völlig grundlos überteuert.
Aber für "überteuert" bekommst Du immerhin ein fertiges Produkt, und (für kommerzielle Nutzung unverzichtbar): Support.
Für das Geld musst Du dich jedenfalls nicht stundenlang in öffentlichen Foren durchbeissen. Mir schleierhaft warum eine Firma dafür kein Geld ausgibt. Wenn man alles mal hin- und her rechnet kommt die überteuerte Software am Ende wahrscheinlich günstiger als wenn Du das ganze selbst machst und nachher noch administrierst...es sei denn Du opferst Deine Freizeit dafür, dann biste selbst schuld ;)

MfG
 

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Ich beiße mich nicht exklusiv durch Foren durch, sondern zusätzlich nebenbei, um weiterführende, bis jetzt nur in meiner Vorstellung vorhandene Schritte vorweg zu nehmen. Theoretisch komme ich auch an mein Ziel unter exklusiver Nutzung von Google. Dauert halt nur länger, da ich ja oft gar nicht weiß wonach ich suche und mir somit Fachbegriffe fehlen...;)

Der Anspruch an das Programm ist sehr spezifisch und unterliegt keiner Terminierung. Zumal die Programmstruktur, wenn einmal erstellt, für die Nutzer hinterher simples Drag and Drop bzw. Copy und Paste bedeutet. Ich muss an einem Punkt gar nichts mehr machen außer Patches erstellen.
 
Zuletzt von einem Moderator bearbeitet: (Zitat des unmittelbar vorangestellten Beitrags entfernt)

Graphixx

Lt. Commander
Dabei seit
Feb. 2009
Beiträge
1.857
Ich wollt´s nur mal anmerken ;) Aber wie Du auch schon sagst...viele Wege führen zum Ziel, ich drück Dir die Daumen das es klappt.

MfG
 

DeusoftheWired

Fleet Admiral
Dabei seit
Juni 2009
Beiträge
10.153
Alles wird lokal abgewickelt, die Rechner der MA sind aber über einen allgemeinen Server vernetzt.
Dann ist es doch einfach. Gebäudeverkabelung hat man mindestens 100 Mbit/s, wenn nicht 1 Gbit/s. Webserver kann ein popeliger Raspberry Pi sein.

Stell das ganze doch mal als .html zusammen, lad es auf den Zentralserver, verteile Rechte entsprechend und greif mit der langsamsten Kiste im Haus testweise darauf zu.

Ehrlich gesagt verstehe ich das Problem gerade nicht.
 

rocketworm

Lt. Commander
Dabei seit
Mai 2017
Beiträge
1.503
Wenn es quasi nur ne Website bestehend aus einer einzelnzen html + bilder css, etc.. ist, speicher es als mhtml.
Da hast dann nur noch eine Datei und die lässt sich von den meisten aktuellen Browsern öffnen.
 

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Das mach ich doch bereits so. Ich will aber eine einzelne Datei, die ich nach belieben z.B. auch von einem Stick ausführen kann und eben nicht als .html Struktur erkennbar ist.

Aber was red ich. Blablub1212 hat schon das richtige verlinkt. Danke für eure Hilfe...:)
 

rocketworm

Lt. Commander
Dabei seit
Mai 2017
Beiträge
1.503
Das mach ich doch bereits so. Ich will aber eine einzelne Datei, die ich nach belieben z.B. auch von einem Stick ausführen kann und eben nicht als .html Struktur erkennbar ist.

Aber was red ich. Blablub1212 hat schon das richtige verlinkt. Danke für eure Hilfe...:)
Lies richtig, wenn du dieses alt MHTML mit einem M vorne speicherst, hast du nur noch eine einzelne Datei wo alles andere dann auch mit drin ist.
https://de.wikipedia.org/wiki/MIME_Encapsulation_of_Aggregate_HTML_Documents

Ich mach mir das dann ganz simpel, ich rufe mein html Gebastel ganz normal im Browser lokal auf, gehe dann ins Menü "Datei" --> "Seite Speichern unter..." --> Dateityp "Webseite, Einzeldatei (MHTML)" --> "Speichern"

Anschliessend hat man eine einzelne Datei, die man mit dem Browser aufrufen kann, CSS, Bilder, etc... wird alles im Browser angezeigt. Aber man hat wie gesagt nur eine einzige Datei. Nutze ich sehr gern zum Emailen.

1544564036824.png


So sieht es auf der HDD aus wenn die Website als MHTML gespeichtert wurde:
1544563336776.png

Und so als HTML:
1544563433813.png
Dazugehöriger Unterordner:
1544563507014.png

Bein manchen Browsern muss man die Möglichkeit zum Speichern als MHTML in den Optionen erst aktivieren und bei anderen braucht man nen Addin.

Zum Öffnen braucht man normalerweise nix machen. Sollte heute so ziemlich jeder Browser können.
 

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Just probiert, nix passiert. In sämtlichen Browsern. Für Chrome unter Adresse chrome://Flags zu aktivieren.

Edit: Weil er eine .svg Datei nicht direkt als Webseite erkennt...;)

Ich such mal eine Lösung, oder muss wenn alle Stricke reißen zu .html konvertieren.

Lösung: .html benutzen und im Body die .svg als object anlegen, damit Scriptfunktionen auch noch funktionieren. Jetzt muss ich nur noch dafür sorgen, dass die Datei sofort bei Start funktioniert und nicht erst, wenn ich mindestens einmal die "Webseite" mit der Maus anklicke...:)
 
Zuletzt bearbeitet:

CrEaToXx

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Nov. 2018
Beiträge
363
Ok. Ich denke das wird etwas langatmiger. Der Grund warum ich ursprünglich mit .svg anstatt in .html eingebettete .svg gearbeitete habe, war mein damaliger Anfängerstatus, mit dem Ergebnis der weitreichenden Nichtfunktion. Diesmal sind es zumindest nur die in [CDATA getakten Scriptteile. Ich gehe mal davon aus, dass der standard .html Doctype, anders als der standard .svg Doctype, das nicht supported. Mag mich da auch noch mal einer mit dem Zaunpfahl schlagen?

Im übrigen funktioniert die einfache Speicherung in .mhtml nicht. Da nur die einzelne Datei .mhtmlisiert wird, nicht aber wie von @rocketworm angedeutet, die Datei samt assoziierter Zusatzdateien/Ordner.

Auch hier gehe ich davon aus, dass ich ordner in .html komplett anders ansprechen muss, als in .svg? Wer mal reinschauen mag:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Trendelburg Abbundzeichen</title>

  <link rel="stylesheet" href="TBAB_Data/TBAB_Data.css"/>
  <style></style>

  <script src="TBAB_Data/TBAB_Java/TBAB_PanSVG.js"></script>
  <script></script>
</head>

<body>

    <!--

    coded by CrEaToXx for a museum.
    script language is english and in small letters. no exceptions!!!

    element declaration:

    <div>         = division(top priority in hierarchie)
    <svg>        = scalable vector graphic (secondary priority in hierarchie)
    <g>           = group (terdiary priority in hierarchie)
    <a>            = 'a' hyper link (terdiary priority in hierarchie)
    <defs>        = graphical element for later usage across the file?
    <script>    = embedded script (lowest priority in hierarchie)
    <rect>      = rectangle (lowest priority in hierarchie)
    <text>      = standard text (lowest priority in hierarchie)

    hierarchie needs to stay in equal order always!!! unordered elements can not exist inside higher tier elements!!!
    you can, however, include non svg native elements with <foreignobject>.

    naming declaration:

    allowed naming is: id, class and tag. id will be used in .ccs as well as in scripts. classes should be avoided, because the .ccs functions are bugged in Firefox!!!
    if no id, class or tag is given, then the particular element is not used inside any script or .css!!! you do not necessarily need named elements!

    -->

    <!--primary layer-->
    <svg id="svg_Main_ID" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1504" height="2072" preserveAspectRatio="xMinYMax meet" >

        <!--Pan and Zoom java script, disabled during development!!!-->
        <!--head>
            <script href="TBAB_Data/TBAB_Java/TBAB_PanSVG.js"></script>
        </head-->
   
        <!--main stroke element-->
        <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="3" stroke-opacity="0.6"/>

        <!--path layer group-->
        <g id="g_path_ID">

            <image x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path01.svg"/>                                        <!--Beschriftung-->
            <image x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path02.svg"/>                                        <!--Grundriss-->
            <image id="03_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path03.svg" visibility="hidden"/>    <!--Stiele-->
            <image id="04_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path04.svg" visibility="hidden"/>    <!--Riegel-->
            <image id="05_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path05.svg" visibility="hidden"/>    <!--Schwelle-->
            <image id="06_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path06.svg" visibility="hidden"/>    <!--Strebe-->
            <image id="07_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path07.svg" visibility="hidden"/>    <!--Kopfbaender-->
            <image id="08_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path08.svg" visibility="hidden"/>    <!--Deckenbalken-->
            <image id="09_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path09.svg" visibility="hidden"/>    <!--Dachbalken-->
       
        </g>
   
        <!--main description/text group-->
        <g id="g_txt_img_ID">
   
            <!--EG Eingang_SW01-->
            <rect x="980" y="1597" width="3" height="50" fill="black"/>
            <text x="1008" y="1597" transform="rotate(90 1013,1597)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>           
            <rect x="1049" y="1597" width="3" height="50" fill="black"/>

            <!--EG Eingang_SW02-->
            <rect x="382" y="1597" width="3" height="50" fill="black"/>
            <text x="410" y="1597" transform="rotate(90 415,1597)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>           
            <rect x="451" y="1597" width="3" height="50" fill="black"/>   
   
            <!--EG Eingang_NW-->
            <rect x="1200" y="1743" width="50" height="3" fill="black"/>
            <text x="1195" y="1782" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>           
            <rect x="1200" y="1807.5" width="50" height="3" fill="black"/>
       
            <!--Anbau-->
            <text x="1364" y="1742" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau EG</text>
            <text x="1362.5" y="1257" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau OG1</text>
            <text x="1360" y="751" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau OG2</text>   
       
            <!--EG Eingang_Anbau-->
            <rect x="1370" y="1609" width="2" height="25" fill="black"/>
            <text x="1375" y="1605" transform="rotate(90 1380,1609)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="10" font-weight="bold">Eingang</text>           
            <rect x="1399" y="1609" width="2" height="25" fill="black"/>   

            <!--OG1 Engang_NW-->
            <rect x="1237" y="1180" width="20" height="2" fill="black"/>
            <text x="1235.5" y="1191" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Eingang</text>           
            <rect x="1237" y="1192.5" width="20" height="2" fill="black"/>
       
            <!--OG1 Luke_NW-->
            <rect x="1237" y="1325" width="20" height="2" fill="black"/>
            <text x="1235.5" y="1336" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>           
            <rect x="1237" y="1337.5" width="20" height="2" fill="black"/>

            <!--OG2 Luke_SO-->
            <rect x="1242" y="778" width="20" height="2" fill="black"/>
            <text x="1240.5" y="789.5" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>           
            <rect x="1242" y="791" width="20" height="2" fill="black"/>
       
            <!--DG Luke_SO-->
            <rect x="1195" y="323" width="20" height="2" fill="black"/>
            <text x="1193.5" y="335.5" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>           
            <rect x="1195" y="338" width="20" height="2" fill="black"/>       
       
        </g>
   
        <!--image layer-->
        <svg id="svg_image_ID" visibility="hidden">

<!--jede Menge Imagereferenzen, die ich hier im CB Beispiel weglasse-->
        </svg>
   
        <!--legend layer-->
        <svg id="svg_legend_ID" x="29.85%" y="34%" viewBox="0 0 3534 4716" visibility="hidden">

            <!--green layer rect with fill and stroke-->

            <rect x="0%" y="0%" width="40%" height="30%" rx="25" ry="25" fill="lightgreen" fill-opacity="0.5" stroke="black" stroke-width="5" stroke-opacity="0.6"/>
            <text x="11.0%" y="2%" style="text-decoration: underline" stroke="black" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="100" font-weight="bold">Legende/Hilfe:</text>       

        </svg>
   
        <!--developer grid layer-->
        <svg id="svg_developer_ID" width="100%" height="100%" visibility="hidden" onload="init()" onmousemove="mouseMove(evt)">
       
            <!--grid group-->
            <g>
       
                <defs>
                    <pattern id="p_smGr_ID" width="10" height="10" patternUnits="userSpaceOnUse">
                        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
                    </pattern>
                    <pattern id="p_Gr_ID" width="100" height="100" patternUnits="userSpaceOnUse">
                        <rect width="100" height="100" fill="url(#p_smGr_ID)"/>
                        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
                    </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#p_Gr_ID)" />
           
            </g>
       
            <!--cursor info group-->
            <g>
       
                <rect id="r_ball_ID" fill="white" fill-opacity="0.0000001" width="100%" height="100%"/><!--notice this rect is only for dummy effects, it can not be dragged!!!-->
                <text id="t_xTx_ID" x="100" y="100" font-size="10" fill="black">X:</text>
                <text id="t_xPo_ID" x="110" y="100" font-size="10" fill="black">636</text>
                <text id="t_yTx_ID" x="100" y="110" font-size="10" fill="black">Y:</text>
                <text id="t_yPo_ID" x="110" y="110" font-size="10" fill="black">441</text>
                <circle id="c_dot_ID" cx="50%" cy="50%" r="10" fill="none" stroke="none" stroke-width="0.5"/><!--real wuslon fill is gold-->
           
            </g>
       
        </svg>
   
        <!--script section-->
        <!--developer grid layer wuslon script-->
        <script><![CDATA[

            var bMouseDragging = false;
            var nMouseOffsetX = 0;
            var nMouseOffsetY = 0;
       
            function mouseDown(evt) {
       
                bMouseDragging = true;
                var r_ball_ID = document.getElementById("r_ball_ID");
           
                if(r_ball_ID) {
           
                    var p = document.documentElement.createSVGPoint();
                    p.x = evt.pageX;
                    p.y = evt.pageY;
           
                    var m = r_ball_ID.getScreenCTM();
                    p = p.matrixTransform(m.inverse());
                    nMouseOffsetX = p.x - parseInt(r_ball_ID.getAttribute("cx"));
                    nMouseOffsetY = p.y - parseInt(r_ball_ID.getAttribute("cy"));
               
                }
           
            }
       
            function mouseUp(evt) {
       
                bMouseDragging = false;
           
            }
       
            function mouseMove(evt) {
           
                var p = document.documentElement.createSVGPoint();
                p.x = evt.pageX;
                p.y = evt.pageY;
           
                if(bMouseDragging) {
           
                    var r_ball_ID = document.getElementById("r_ball_ID");
               
                    if(r_ball_ID) {
           
                        var m = r_ball_ID.getScreenCTM();
                        p = p.matrixTransform(m.inverse());

                        r_ball_ID.setAttribute("cx", p.x - nMouseOffsetX);
                        r_ball_ID.setAttribute("cy", p.y - nMouseOffsetY);
                   
                    }
               
                }
           
                displayCoords(p.x, p.y);
           
            }   
       
            function displayCoords(x,y) {
       
                var xNode = document.getElementById("t_xPo_ID");
                var yNode = document.getElementById("t_yPo_ID");
           
                if(xNode && yNode) {
                    xNode.firstChild.nodeValue = parseInt(x);
                    yNode.firstChild.nodeValue = parseInt(y);
               
                }
           
            }
       
            function init() {
       
                var r_ball_ID = document.getElementById("r_ball_ID");

                if(r_ball_ID) {
           
                    r_ball_ID.addEventListener("mousedown", mouseDown, false);
                    r_ball_ID.addEventListener("mouseup", mouseUp, false);
                    r_ball_ID.addEventListener("mousemove", mouseMove, false);
               
                }
           
            }

        ]]></script>

        <!--image layer on/off key(1-7) scripts-->
        <!--legend layer on/off key(F1) script-->
        <!--developer grid layer on/off key(F2) script-->
        <!--developer grid layer wuslon script_addition...makes coordinates move with cursor!-->       
        <script>
   
            var beforePan
   
            window.onload = function() {

            beforePan = function(oldPan, newPan){
       
                var stopHorizontal = false
                    , stopVertical = false
                    , gutterWidth = 100
                    , gutterHeight = 100
                    , sizes = this.getSizes()
                    , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
                    , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
                    , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
                    , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

                customPan = {}
                customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
                customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))

                return customPan
       
            }

            window.panZoom = svgPanZoom('#svg_Main_ID', {
       
                  zoomEnabled: true
                , dblClickZoomEnabled: false
                , minZoom: 0.4
                , maxZoom: 20
                , controlIconsEnabled: false
                , fit: 1
                , beforePan: beforePan
                });

                panZoom.setBeforePan(beforePan)
            //  outcommended: made screen stuck in last place when scrolled = bugged

            };           
           
            document.addEventListener('keydown', (event) => {

                const keyName = event.key;
           
                var stielVar = document.getElementById("03_path_ID");
                var riegeVar = document.getElementById("04_path_ID");
                var schweVar = document.getElementById("05_path_ID");       
                var strebVar = document.getElementById("06_path_ID");
                var kopfbVar = document.getElementById("07_path_ID");
                var deckbVar = document.getElementById("08_path_ID");
                var dachbVar = document.getElementById("09_path_ID");   

                var g_stielVar = document.getElementById("g_stiel_ID");
                var g_riegeVar = document.getElementById("g_riegel_ID");
                var g_schweVar = document.getElementById("g_schwelle_ID");
                var g_strebVar = document.getElementById("g_strebe_ID");
                var g_kopfbVar = document.getElementById("g_kopfb_ID");
                var g_deckbVar = document.getElementById("g_deckb_ID");
                var g_dachbVar = document.getElementById("g_dachb_ID");

                var visStVar = stielVar.getAttributeNS(null,"visibility");
                var visRiVar = g_riegeVar.getAttributeNS(null,"visibility");
                var visScVar = schweVar.getAttributeNS(null,"visibility");
                var visSrVar = strebVar.getAttributeNS(null,"visibility");
                var visKoVar = kopfbVar.getAttributeNS(null,"visibility");
                var visDeVar = deckbVar.getAttributeNS(null,"visibility");
                var visDaVar = dachbVar.getAttributeNS(null,"visibility");

                var legendVar = document.getElementById("svg_legend_ID");
                var visibilityLegendVar = legendVar.getAttributeNS(null,"visibility");       
           
                var dragVar = document.getElementById("svg_developer_ID");       
                var visibilityDragVar = dragVar.getAttributeNS(null,"visibility");
           
                if (keyName === '1') {
           
                    event.preventDefault();
                   
                    if (visStVar == "visible"){
               
                        g_stielVar.setAttributeNS(null,"visibility","hidden");
                        stielVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_stielVar.setAttributeNS(null,"visibility","visible");
                        stielVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '2') {
           
                    event.preventDefault();
                   
                    if (visRiVar == "visible"){
               
                        g_riegeVar.setAttributeNS(null,"visibility","hidden");
                        //riegeVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_riegeVar.setAttributeNS(null,"visibility","visible");
                        //riegeVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '3') {
           
                    event.preventDefault();
                   
                    if (visScVar == "visible"){
               
                        g_schweVar.setAttributeNS(null,"visibility","hidden");
                        schweVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_schweVar.setAttributeNS(null,"visibility","visible");
                        schweVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '4') {
           
                    event.preventDefault();
                   
                    if (visSrVar == "visible"){
               
                        g_strebVar.setAttributeNS(null,"visibility","hidden");
                        strebVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_strebVar.setAttributeNS(null,"visibility","visible");
                        strebVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '5') {
           
                    event.preventDefault();
                   
                    if (visKoVar == "visible"){
               
                        g_kopfbVar.setAttributeNS(null,"visibility","hidden");
                        kopfbVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_kopfbVar.setAttributeNS(null,"visibility","visible");
                        kopfbVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '6') {
           
                    event.preventDefault();
                   
                    if (visDeVar == "visible"){
               
                        g_deckbVar.setAttributeNS(null,"visibility","hidden");
                        deckbVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_deckbVar.setAttributeNS(null,"visibility","visible");
                        deckbVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === '7') {
           
                    event.preventDefault();
                   
                    if (visDaVar == "visible"){
               
                        g_dachbVar.setAttributeNS(null,"visibility","hidden");
                        dachbVar.setAttributeNS(null,"visibility","hidden");                   
                   
                    }
               
                    else {
               
                        g_dachbVar.setAttributeNS(null,"visibility","visible");
                        dachbVar.setAttributeNS(null,"visibility","visible");                   
                   
                    }   

                }

                if (keyName === 'F1') {

                    event.preventDefault();
               
                    if (visibilityLegendVar == "visible"){
               
                        legendVar.setAttributeNS(null,"visibility","hidden");               
                        //legendVar.parentNode.scrollTop = legendVar.offsetTop - legendVar.parentNode.offsetTop;               
                   
                    }
               
                    else {
               
                        legendVar.setAttributeNS(null,"visibility","visible");                   
                        //legendVar.scrollIntoView({block: "start", behavior: "smooth"})               
                   
                    }   

                }       

                if (keyName === 'F2') {
           
                    event.preventDefault();
                   
                    if (visibilityDragVar == "visible"){
               
                        dragVar.setAttributeNS(null,"visibility","hidden");
                   
                    }
               
                    else {
               
                        dragVar.setAttributeNS(null,"visibility","visible");
                   
                    }   

                }
                   
            }, true);
       
            var svg  = document.documentElement, pt   = svg.createSVGPoint(), c_dot_ID  = document.querySelector('#c_dot_ID');   

            svg.addEventListener('mousemove', function(evt) {
       
                var c_dot_IDVar = document.getElementById("c_dot_ID");
                var t_xPo_IDVar = document.getElementById("t_xPo_ID");
                var t_xTx_IDVar = document.getElementById("t_xTx_ID");
                var t_yPo_IDVar = document.getElementById("t_yPo_ID");
                var t_yTx_IDVar = document.getElementById("t_yTx_ID");
                var cursorPointVar = cursorPoint(evt);   
           
                c_dot_IDVar.setAttribute('cx',cursorPointVar.x);
                c_dot_IDVar.setAttribute('cy',cursorPointVar.y);
                t_xPo_IDVar.setAttribute('x',cursorPointVar.x+21);
                t_xPo_IDVar.setAttribute('y',cursorPointVar.y);
                t_xTx_IDVar.setAttribute('x',cursorPointVar.x+11);
                t_xTx_IDVar.setAttribute('y',cursorPointVar.y);
                t_yPo_IDVar.setAttribute('x',cursorPointVar.x+21);
                t_yPo_IDVar.setAttribute('y',cursorPointVar.y+9);
                t_yTx_IDVar.setAttribute('x',cursorPointVar.x+11);
                t_yTx_IDVar.setAttribute('y',cursorPointVar.y+9);
           
            }, false);   
       
            svg.addEventListener('wheel', function(evt) { //fix for not following mouse when zooming, panning or scrolling
       
                var c_dot_IDVar = document.getElementById("c_dot_ID");
                var t_xPo_IDVar = document.getElementById("t_xPo_ID");
                var t_xTx_IDVar = document.getElementById("t_xTx_ID");
                var t_yPo_IDVar = document.getElementById("t_yPo_ID");
                var t_yTx_IDVar = document.getElementById("t_yTx_ID");
                var cursorPointVar = cursorPoint(evt);   
           
                c_dot_IDVar.setAttribute('cx',cursorPointVar.x);
                c_dot_IDVar.setAttribute('cy',cursorPointVar.y);
                t_xPo_IDVar.setAttribute('x',cursorPointVar.x+21);
                t_xPo_IDVar.setAttribute('y',cursorPointVar.y);
                t_xTx_IDVar.setAttribute('x',cursorPointVar.x+11);
                t_xTx_IDVar.setAttribute('y',cursorPointVar.y);
                t_yPo_IDVar.setAttribute('x',cursorPointVar.x+21);
                t_yPo_IDVar.setAttribute('y',cursorPointVar.y+9);
                t_yTx_IDVar.setAttribute('x',cursorPointVar.x+11);
                t_yTx_IDVar.setAttribute('y',cursorPointVar.y+9);
           
            }, false);   
       
            function cursorPoint(evt) {
       
                var top = this.scrollY;//fix for scrolling, panning, zooming
                var left = this.scrollX;//fix for scrolling, panning, zooming   
       
                pt.x = evt.pageX - left;
                pt.y = evt.pageY - top;
                return pt.matrixTransform(svg.getScreenCTM().inverse());

            }                   

        </script>

    </svg>

</body>
</html>

Im Prinzip besteht die Datei aus einem "Background" der Gebäudegrundrisse, die als .svg Path-Dateien hinterlegt sind, da ich die fixiert und unveränderbar brauche. Dann werden die einzelnen Ebenen erschaffen:

1. Balkenarten(8x)
2. Legende
3. Developer Grid<-- da mit ich beim Eintrag in die Datei schnell die korrekten Bildkoordinaten auslesen kann. Außerdem stellt das die erste Entwicklungsstufe, um anderen Usern später zu ermöglichen eigenständig Bildpunkte zu verändern bzw. einzufügen
4. Die eigentlichen Bildpunkte mit farblicher Kennzeichnung und Verlinkung zu Bilddateien auf dem Server, die eine Aussage über den Zustand der einzelnen Balken treffen. Also z.B. ob ein Balken noch original vorhanden ist, ob er wiederverwendbar ist, ob er bereits komplett erneuert wurde etc..

Das Javascript mochte ich nicht unbedingt, da Pan und Zoom ja auch in Browsern mittels Shift und STRG-Taste vorhanden ist. Dies war aber eine Anforderung seitens unseres Restaurators. Im Prinzip zoomed es automatisch mit der Mausrolle und wenn ich die linke Maustaste halte, drag+panned es.

Wohl gemerkt, alles sehr verfrühter Alpha-Status, da ich Tag für Tag was neu lerne.

Edit: Die Script-Teile einfach in den Header verschieben hat nicht zum Erfolg geführt!
 
Zuletzt bearbeitet:
Top