Klassen "tooltip bubbles" beim Ausdruck mit darstellen

Diskutiere "tooltip bubbles" beim Ausdruck mit darstellen im Java Basics - Anfänger-Themen Bereich.
M

moritzmw

Schaue Dir das mal an (über Internet Explorer):
Irgendwo zwischen DOM links oben und Black Hole rechts unten befinden wir uns.... was ich damit sagen möchte, Niemand weiß exkat wie die Darstellung von Drucken hinterher sein könnte....

oder auch anders: damit etwas exakt so aussieht wie auf dem Bildschirm zu sehen ist sind Firefox Bildschirmfotos gar nicht mal schlecht. :)
Eine sehr schöne Grafik :-D Viel Wahres dran, dennoch denkt man sich immer: Einfache Aufgabe, irgendwo muss es ne einfache Lösung geben.

Ja mit dem Snapshot arbeite ich gerade weiter. Ich habe gestern 10 verschiedene FF Erweiterungen getestet um ein passables Ergenis zu erzeugen. Vergebens.

Kannst du dir eine Möglichkeit zur Automatisierung vorstellen? Ich denke daran einfach die gesamte Seite zu Screenshoten (hat dann zB die Größe von einer A4 Breite und die Länge von 7 Seiten) und dann bruache ich einfach nur noch eine Drucker Software, die mir das in 7 A4 Stücke zerlegt. Ich habe es nicht hinbekommen. Es wäre aber eine gigantische Zeitersparnis.
Hast du eine Idee?
 
X

Xyz1

Hast du eine Idee
Ja ich hatte das mal bei einem Walkthrough für ein PC Spiel mit 150 Seiten automatisch abgegrast....
Automatisches Verarbeiten widerspricht aber dem dass es eine druckbare Version zu kaufen gibt....
Wenn ich zum Bleistift ein Tool dafür bereitstellen würd käm ich bestimmt ins Gefängnis!!!! :confused:

Also jetzt mal zur Seite, man kann das automatisch in ein "Word" Dokument übertragen, (sind ja nich viele Elemente also Farbe fett kursiv unterstrichen Bild Tabelle Auflistung....) aber das kostet mir zurZeit zu viele nerven.
 
X

Xyz1

Habe mal ein fettes jar erstellt,
Doppelklick darauf, und aus DIESER Seite wird ein Word Dokument erstellt,
das Programm fragt danach wie die Datei heißen soll. ;)
https://ufile.io/eg07w (Läuft ab morgen Abend)

Und wo ist der haken? Verständlicherweise geht das nur mit DIESER Seite....
 
M

moritzmw

Also jetzt mal zur Seite, man kann das automatisch in ein "Word" Dokument übertragen, (sind ja nich viele Elemente also Farbe fett kursiv unterstrichen Bild Tabelle Auflistung....) aber das kostet mir zurZeit zu viele nerven.
Nicht im Sinne der Idee, das stimmt. Nach wie vor verrückt, dass manche vermeindlich leichte Aufgabe doch etwas aufwändiger ist als man als Laie vermutet.
Ist in der Medizin aber das gleiche Spiel.

Für deine Datei habe ich leider das Downloadfenster verpasst, da ich jetzt erst wieder Gelegenheit hatte hier rein zu schauen. Wobei, bei dem 'Haken' diente sie wo eher zu Veranschaulichung.
 
X

Xyz1

Moin @moritzmw , es diente nur der Veranschaulichung,
das es möglich ist ein Word Dokument zu erstellen von einer Seite.
Das Problem aber bei Amboss ist es aber,
Du möchtest ja auch die Formatierungs"elemente" beibehalten,
das bedeutet erheblich mehr Arbeit,
zudem weiß ich nicht ,wenn ich das mach, ob es dann nicht Ärger gibt? :(

Ich überlech mir nochmal was.
 
Z

zuimed

Hallo ihr Lieben!

Ich möchte mich einmal vorab bedanken, das Skript von Post #43 / #51 hat mir viel weitergeholfen, es war Gold wert!
Allerdings hat Amboss nun die Oberfläche der Seite verändert, und jetzt funktioniert es nicht mehr, die Sprechblasen werden nicht mehr dargestellt.
Wäre es eventuell möglich, @Xyz1 , das Skript anzupassen?
Ich habe leider auch keine Ahnung von Java oder JavaScript :(

Liebe Grüße!
 
X

Xyz1

Neue Version:
Greasemonkey-Script:
Javascript:
// ==UserScript==
// @name        Expand Bubbles (auf Amboss)
// @namespace   iwas
// @description empty
// @include     https://*.amboss.com/*
// @version     1
// @grant       none
// ==/UserScript==
document.addEventListener('keyup', function (e) {
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
        setTimeout(function () {
            var all = document.getElementsByTagName('*');
            for (var i = 0, max = all.length; i < max; i++) {
                var elem = all[i];
                if (elem.tagName === 'SPAN' && elem.className.indexOf('api explanation') !== - 1) {
                    var htmlStr = '(' + atob(elem.attributes['data-content'].value) + ')';
                    var d = document.createElement('p');
                    d.setAttribute('style', 'display:inline; color:blue;');
                    d.innerHTML = htmlStr;
                    elem.parentNode.insertBefore(d, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (elem.tagName === 'SPAN' && elem.className.indexOf('js-relevance-term') !== - 1) {
                    elem.setAttribute('style', 'color:red');

                }
            }
        }, 2500);
    }
});
 
Zuletzt bearbeitet von einem Moderator:
X

Xyz1

Man muss einmal die Leertaste drücken und dann 2,5 Sekunden warten, Bubbles sind blau, relevante Sätze rot, Umlaute werden nicht dargestellt.
 
X

Xyz1

Das löst das Problem mit den Umlauten:
Javascript:
// ==UserScript==
// @name        Expand Bubbles (auf Amboss)
// @namespace   leer
// @description leer
// @include     https://*.amboss.com/*
// @version     1
// @grant       none
// ==/UserScript==
document.addEventListener('keyup', function (e) {
    let key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
        setTimeout(function () {
            let all = document.getElementsByTagName('*');
            for (let i = 0, max = all.length; i < max; i++) {
                let elem = all[i];
                if (isBubble(elem)) {
                    let d = document.createElement('p');
                    d.setAttribute('style', 'display:inline; color:blue;');
                    d.innerHTML = getReadableString(elem);
                    elem.parentNode.insertBefore(d, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (isRelevance(elem)) {
                    elem.setAttribute('style', 'color:red');
                }
            }
        }, 1000);
    }
});

function isBubble(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('api explanation') != - 1;
}

function isRelevance(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('js-relevance-term') != - 1;
}

function getReadableString(e) {
    let badstring = '(' + atob(e.attributes['data-content'].value) + ')';
    let fixedstring = decodeURIComponent(escape(badstring));
    return fixedstring;
}
sperma.png
 
Z

zuimed

Hallo Xyz1, das ist großartig!

Darf ich noch zwei Sachen fragen? Kann man die Bubbles statt blau einfach in kursiv ausgeben lassen? (Habe es trotz Rumprobieren nicht hinbekommen.) - Dies in etwas kleinerer Schriftgröße, z.B. Schriftgröße 10 - falls man einen absoluten Wert setzen kann?
Und falls möglich, kann man die Bilder in einem Kapitel auch gleich mit anzeigen lassen, z.B. in 50%iger Skalierung?

Das wäre auch ''schon'' alles :)
 
X

Xyz1

Neue Version:
Bubbles: schwarz, kursiv und Schriftgröße 11 (10px finde ich dann doch etwas arg klein ;) ), die Schriftgröße kann via bubbleFontSize geändert werden
Relevante Sätze: nach wie vor rot
Thumbnails: Wenn Du processThumbnails auf true setzt, dann werden alle Thumbnails mit 400x400 angezeigt
Javascript:
// ==UserScript==
// @name        Expand Bubbles (auf Amboss)
// @namespace   leer
// @description leer
// @include     https://*.amboss.com/*
// @version     1
// @grant       none
// ==/UserScript==
let bubbleFontSize = 11;
let processThumbnails = false;
let thumbnailsWidthAndHeight = 400;

document.addEventListener('keyup', function (e) {
    let key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
        setTimeout(function () {
            let all = document.getElementsByTagName('*');
            for (let i = 0, max = all.length; i < max; i++) {
                let elem = all[i];
                if (isBubble(elem)) {
                    let pe = document.createElement('p');
                    let ie = document.createElement('i');
                    pe.setAttribute('style', 'display:inline; font-size:' + bubbleFontSize + 'px;');
                    ie.innerHTML = getReadableString(elem);
                    pe.appendChild(ie);
                    elem.parentNode.insertBefore(pe, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (isRelevance(elem)) {
                    elem.setAttribute('style', 'color:red');
                }
                if (processThumbnails && isThumbnail(elem)) {
                    elem.setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    elem.children[0].setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    let ds = elem.attributes['data-source'].value;
                    elem.children[0].attributes['src'].value = ds;
                }
            }
        }, 1000);
    }
});

function isBubble(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('api explanation') != - 1;
}

function isRelevance(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('js-relevance-term') != - 1;
}

function isThumbnail(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('api thumbnail__image') != - 1;
}

function getReadableString(e) {
    let badstring = atob(e.attributes['data-content'].value);
    let fixedstring = '(' + decodeURIComponent(escape(badstring)) + ')';
    return fixedstring;
}
 
O

Olwhv

Hallo Leute,
es mag eine dumme Frage sein oder ich habe etwas überlesen: Ich habe das Greasemonkeyskript angewendet und im Browser werden auch alle Bubbles angezeigt, in der Druckvorschau wird allerdings nur die erste Seite angeschnitten angezeigt. Ich möchte ja alle Seiten ausdrucken. Was muss ich noch tun?

Lieben Dank schon einmal und Gruß
 
A

abc66

Das kann ich bestätigen, ist bei mir auch so. Ich würde einfach ein Firefox Drucker Addon installieren.
 
O

Olwhv

Habe sämtliche Addons probiert, es wird jeweils nur eine Seite gedruckt. Das gleiche Problem ist auch beim Internet Explorer und Google Chrome. Wenn man die Seite in ein Word Dokument kopiert verrutschen die Tabellen stark, sodass keine Übersicht mehr da ist.
 
S

SonoHimitsu

So sollte es funktionieren:
Javascript:
// ==UserScript==
// @name        Expand Bubbles (auf Amboss)
// @namespace   leer
// @description leer
// @include     https://*.amboss.com/*
// @version     1
// @grant       none
// ==/UserScript==
const bubbleFontSize = 11;
const processThumbnails = false;
const thumbnailsWidthAndHeight = 400;
const cropOut = true;

document.addEventListener('keyup', function (e) {
    let key = e.keyCode ? e.keyCode : e.which;
    if (key == 32) {
        setTimeout(function () {
            let all = document.getElementsByTagName('*');

            if (cropOut) {
                for (let i = 0; i < all.length; i++) {
                    let e = all[i];
                    if (isArticle(e)) {
                        document.body.innerHTML = e.outerHTML;
                        break;
                    }
                }
            }

            for (let i = 0, max = all.length; i < max; i++) {
                let elem = all[i];
                if (isBubble(elem)) {
                    let pe = document.createElement('p');
                    let ie = document.createElement('i');
                    pe.setAttribute('style', 'display:inline; font-size:' + bubbleFontSize + 'px;');
                    ie.innerHTML = getReadableString(elem);
                    pe.appendChild(ie);
                    elem.parentNode.insertBefore(pe, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (isRelevance(elem)) {
                    elem.setAttribute('style', 'color:red');
                }
                if (processThumbnails && isThumbnail(elem)) {
                    elem.setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    elem.children[0].setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    let ds = elem.attributes['data-source'].value;
                    elem.children[0].attributes['src'].value = ds;
                }
            }
        }, 1000);
    }
});

function isBubble(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('api explanation') != - 1;
}

function isRelevance(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('js-relevance-term') != - 1;
}

function isThumbnail(e) {
    return e.tagName.toLowerCase() == 'span'
        && e.className.indexOf('api thumbnail__image') != - 1;
}

function isArticle(e) {
    return e.tagName.toLowerCase() == 'article'
        && e.attributes['data-e2e-test-id'].value == 'learningCardContent';
}

function getReadableString(e) {
    let badstring = atob(e.attributes['data-content'].value);
    let fixedstring = '(' + decodeURIComponent(escape(badstring)) + ')';
    return fixedstring;
}
Die Druckvorschau zeigt alles an, jedoch kann man im Browser nicht mehr herunter scrollen... Hoffe es hilft. ;)

/e Auf dieser Seite sind einfach unheimlich viele Listener registriert...
 
Z

zuimed

Hallo!

Kann man vielleicht noch eine ''zuschaltbare'' Funktion einbauen die alles macht wie bisher, also auch Tabellen belässt, aber Bilder und Videoelemente (samt deren Links) weglässt, die also reinen Text ausgiebt?

Liebe Grüße
 
P

Prinzessin_Fibula

Hallo ihr Lieben,

hier reiht sich mal eine verzweifelte Examenslernerin ein. Ich möchte die Amboss Lernkarten auch gerne so ausdrucken wie auf der Homepage angezeigt.
Dazu habe ich das Skript von SonoHimitsu in Greasemonkey kopiert, ich würde das aber gerne anpassen, habe aber relativ wenig Ahnung von Java, deswegen die dummen Fragen:

- wenn ich die Bubbles gar nicht ausgedruckt möchte, kann ich entsprechende Zeilencodes löschen?
- kann ich die Schriftart ändern in der der Text ausgedruckt wird?
- wie kann ich die roten Markierungen ausstellen? kann ich die Zeilencodes einfach löschen?

Vielen Dank für eure Hilfe, das ist echt toll, dass sich überhaupt schon wer damit beschäftigt hat und ein Skript geschrieben hat :) Danke auch xyz1

LG
 
A

advanced_java

wie kann ich die roten Markierungen ausstellen? kann ich die Zeilencodes einfach löschen?
ich denke, das kannst du.
kann ich die Schriftart ändern in der der Text ausgedruckt wird?
wie kann ich die roten Markierungen ausstellen?
ich denke, so sollte das funktionieren:
Code:
                let elem = all[i];
                if (isBubble(elem)) {
                    let pe = document.createElement('p');
                    //let ie = document.createElement('i');
                    //pe.setAttribute('style', 'display:inline; font-size:' + bubbleFontSize + 'px;');
                    pe.innerHTML = getReadableString(elem);
                    //pe.appendChild(ie);
                    elem.parentNode.insertBefore(pe, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (isRelevance(elem)) {
                    //elem.setAttribute('style', 'color:red');
                }
                if (processThumbnails && isThumbnail(elem)) {
                    elem.setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    elem.children[0].setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    let ds = elem.attributes['data-source'].value;
                    elem.children[0].attributes['src'].value = ds;
                }
i macht einen Text rekursiv und über das style-Attribut kann Schriftart, -Größe, -Farbe, etc. gesetzt werden...

edit, wenn du nur den Text freistellen möchtest, solllte nur das reichen:
Code:
                for (let i = 0; i < all.length; i++) {
                    let e = all[i];
                    if (isArticle(e)) {
                        document.body.innerHTML = e.outerHTML;
                        break;
                    }
                }
 
P

Prinzessin_Fibula

ich denke, das kannst du.


ich denke, so sollte das funktionieren:
Code:
                let elem = all[i];
                if (isBubble(elem)) {
                    let pe = document.createElement('p');
                    //let ie = document.createElement('i');
                    //pe.setAttribute('style', 'display:inline; font-size:' + bubbleFontSize + 'px;');
                    pe.innerHTML = getReadableString(elem);
                    //pe.appendChild(ie);
                    elem.parentNode.insertBefore(pe, elem);
                    elem.parentNode.removeChild(elem);
                }
                if (isRelevance(elem)) {
                    //elem.setAttribute('style', 'color:red');
                }
                if (processThumbnails && isThumbnail(elem)) {
                    elem.setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    elem.children[0].setAttribute('style', 'width:' + thumbnailsWidthAndHeight + 'px; height:' + thumbnailsWidthAndHeight + 'px;');
                    let ds = elem.attributes['data-source'].value;
                    elem.children[0].attributes['src'].value = ds;
                }
i macht einen Text rekursiv und über das style-Attribut kann Schriftart, -Größe, -Farbe, etc. gesetzt werden...
für Java Dummies: muss ich diesen Code einfach zu dem bisher geschriebenen dazu kopieren oder durch irgendwas ersetzen?
Wie gebe ich denn z.B. die Schriftart ein? 'style:Arial' oder irgendsowas? Sorry für meine dummen Fragen, ich hab wirklich sehr wenig Ahnung :D
und wie kann ich den Zeilenabstand einstellen?

Die Bubbles habe ich übrigens rausbekommen indem ich Schriftgröße 0 eingegeben habe (im zuletzt geposteten Skript), die rot markierte Schrift war dank schwarz weiß Drucker auch weg. Wenn jetzt noch Schriftart und Zeilenabstand passen, bin ich mehr als glücklich :)

vielen Dank für Deine schnelle Hilfe!!
 
Thema: 

"tooltip bubbles" beim Ausdruck mit darstellen

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben