Forum: PC-Programmierung mit Javascritp DOM Element komplett (!) kopieren?


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Frank E. (Firma: Q3) (qualidat)


Bewertung
0 lesenswert
nicht lesenswert
Der folgende JS-Code ist nicht für eine Webseite bestimmt, sondern soll 
in einem sog. "Webviewer", einem GUI-Element der Datenbank-Umgebung 
Filemaker Pro laufen. Ziel ist das Drucken von 2 gleichen QR-Codes (ca. 
15x15mm) nebeneinander mit Abstand auf einem Label von 30x60mm.

Allerdings muss dabei gleichzeitig eine "Macke" bzw. Bug von Filemaker 
Pro (V.16) ausgeglichen werden. Der hat die blöde Angewohnheit, nach dem 
Schließen der Druck-Dialogbox den Inhalt des Webviewers nochmal zu 
refreshen. Dabei ist aber das Timing extrem knapp. Dauert der Aufbau zu 
lange, erhält man ein leeres Etikett.

Ohne dieses Problem wäre am Einfachsten, den Code einfach zwei mal 
auszuführen, mit zwei verschiedenen DIVs, wie hier imBeispiel. 
Allerdings schlägt dabei die Timing-Falle zu. Mit nur einem QR-Code 
klappt das Drucken nämlich, mit zweien leider nicht. Also dachte ich, 
ich berechne den QR-Code eben nur einmal und dupliziere dann das DIV. 
Leider wird bei der Anwenmdung von "Node.cloneNode()" der QR-Code nicht 
mitgenommen, nur der Klartext ...

Bestimmt ist hier jemand, der da evtl. eine Lösung weiss, bitte mal 
drübersehen. Die Lib für die Erstellung des QR-Codes (im Beitrag hier 
nicht enthalten, siehe Link) ist nicht von mir und so ganz bis zum 
Schluss verstehe ich die auch nicht. Das vollständige Codebeispiel liegt 
unter: https://www.qualidat.com/material/qrtest.zip

Danke für Tips.
<body>
    
        <script>var content = '123456';</script> 
   
        <div id='div1'><script>document.write(content)</script></div>
        <div id='div2'><script>document.write(content)</script></div>

        <script>
            div = document.getElementById('div1')
            qrc = new QRCode(div,{width:'255',height:'255',colorDark:'#000',colorLight:'#fff',correctLevel:QRCode.CorrectLevel.L});
            qrc.makeCode(content);
            div = document.getElementById('div2')
            qrc = new QRCode(div,{width:'255',height:'255',colorDark:'#000',colorLight:'#fff',correctLevel:QRCode.CorrectLevel.L});
            qrc.makeCode(content);
            
        </script>
        
    </body>

von ? DPA ? (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Ich denke das Problem ist, dass die QR Code library ein callback eines 
img benutzt, um zu testen, ob data URIs unterstützt werden. Das 
verbraucht einen tick, und der Kopier code wird ausgeführt, bevor das 
Callback ausgeführt wird.

Also müsste man wohl die QR Code library anpassen. Die ist aber leider 
minifiziert, und nutzt ein Canvas zum rendern. Eventuell kann man eine 
andere nehmen? Ich wüsste zwar grad spontan auch keine gute.

Als ein quick-hack kann man den Erfolgs callback dort direkt aufrufen, 
als vorläufiger Workaround sollte es reichen.
Ersetze dazu den Abschnitt
d.onabort=e,d.onerror=e,d.onload=f
 mit
f()

Oh, und noch was, solange du den QR Code nicht zu klein machst, oder um 
eine 2er Potenz skalierst, kann man den noch etwas schärfer machen, 
indem man dem Browser sagt, er solle den nearest neighbor Algorithmus 
zum Skalieren nehmen. Beim drucken vermutlich aber nicht sinvoll:
@media screen {
  div {
    image-rendering: pixelated;
  }
}

von Frank L. (Firma: Flk Consulting UG) (flk)


Bewertung
0 lesenswert
nicht lesenswert
Hallo Frank,
mir ist nicht klar, warum Du es nicht genauso machst, wie in Deinem 
Javascript Snippet oben beschrieben?

Gruß
Frank

von Frank L. (Firma: Flk Consulting UG) (flk)


Bewertung
0 lesenswert
nicht lesenswert
Hallo Frank,

als absolute quick und dirty Lösung geht auch das
    <body>
    
        <script>var content = '123456';</script> 
   
        <div id='div'><script>document.write(content)</script></div>

        <script>
            div = document.getElementById('div')
            qrc = new QRCode(div,{width:100,height:100});
            qrc.makeCode(content);
            setTimeout(function() {
                copy = div.cloneNode(true);
                document.body.appendChild(copy);
            }, 200)
        </script>
        
    </body>

Gruß
Frank

von ? DPA ? (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Frank L. schrieb:
> mir ist nicht klar, warum Du es nicht genauso machst, wie in Deinem
> Javascript Snippet oben beschrieben?

Naja, es hat keine Funktionalen gründe, ich bin nur sehr kritisch, wenn 
es um das Aussuchen und Verwenden von Libraries geht. 
Libraries/Code/Programme ohne Originalquellen oder ohne freier Lizenz 
nutze ich generell nicht, und minifizierten Code statt den Originalcode 
zu ändern ist für mich ein ziemliches No-Go. Hier wird es vermutlich 
keine Probleme machen, aber in richtigen Projekten, wird sowas schnell 
umwartbar. Spätestens, wenn man die Lib mal updaten muss, fällt einem 
sowas auf die Füsse.

von Frank E. (Firma: Q3) (qualidat)


Bewertung
0 lesenswert
nicht lesenswert
Frank L. schrieb:
> Hallo Frank,
> mir ist nicht klar, warum Du es nicht genauso machst, wie in Deinem
> Javascript Snippet oben beschrieben?
>
> Gruß
> Frank

Naja, im Prinzip funktkioniert es ja auch (zum Angucken), aber: Just in 
dem Moment, wo ich den Druckdialog mit OK schließe, meint Filemaker, 
dass der Webviewer refresht werden müsste. K.A. was das soll.

Dazu wird der Webviewer zuerst kurz weiß und ca. 1s später ist das Bild 
mit den beiden QR-Codes wieder da. Wohl genau in dem Moment davor werden 
die Daten für den Druck abgegriffen ... was zu einem leeren Etikett 
führt. Probeweise platzierte statische Linien oder die (ansonsten 
abgeschaltete) Umrandung des Webviewers werden gedruckt, was für mich 
ein Beleg für zu knappes Timing ist.

Die Lib in der "minifizierten" Version nutze ich deshalb, weil der 
Speicher für eine Textvariable in Filemaker auf 64k begrenzt ist ...

von Frank E. (Firma: Q3) (qualidat)


Bewertung
0 lesenswert
nicht lesenswert
Inzwischen habe ich das Problem anders gelöst:

Für Filemaker gibt es ein kostenloses Plugin "Scriptmaster" von 
360Works, mit dem man eigene Funktionen in Groovy (ca. 95% Java) 
schreiben und in das Filemaker-System integrieren kann. Mit ein paar 
Zeilen code mache ich so vom Webvier mit den beiden QR-Codes einen 
Screenshot (awt, robot ...), bevor ich den Druckdialog aufrufe. Man kann 
Filemaker nach den Koordinaten von GUI-Elementen befragen, damit wird 
das sehr präzise ...

Das gegrabbte Bild halte ich in einem sog. "Containerfeld", welches 
nicht die blöde Angewohnheit hat, sich vor dem Drucken zu refreshen. 
Damit klappt das jetzt ganz gut.

Trotzdem danke für die Diskussion ...

: Bearbeitet durch User
von Firmentester (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Frank E. schrieb:
> it ein paar
> Zeilen code mache ich so vom Webvier mit den beiden QR-Codes einen
> Screenshot (awt, robot ...), bevor ich den Druckdialog aufrufe. Man kann
> Filemaker nach den Koordinaten von GUI-Elementen befragen, damit wird
> das sehr präzise ...
>
> Das gegrabbte Bild halte ich in einem sog. "Containerfeld", welches
> nicht die blöde Angewohnheit hat, sich vor dem Drucken zu refreshen.
> Damit klappt das jetzt ganz gut.
LOL - Was für ein krankes Gebastel! ;)

Jetzt weiss ich wieder warum Access, FileMaker und ähnliches hier schon 
vor Jahren rausgeworfen wurden.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.