Zum Inhalt

Hacks

Hier sammeln wir nützliche Tools in der Arbeit mit unseren Rechnern. Die meisten Tips lassen sich nur mit Linux-basierten Installationen verwenden und wurden nur auf aktuellen Debian GNU/Linux Distributionen getestet.

Wir übernehmen keinerlei Gewährleistung für's „Nachmachen“, freuen uns aber über Feedback.

PS: Im Zweifelsfall einfach mal mitmachen und live erleben :)

Browser Favicon mit automatischem Farbwechsel

Favicons sind die Symbole, die euer Webbrowser für den offenen Tab anzeigt. Ein häufiges Problem ist, dass diese nicht auf jedem Untergrund gleich gut aussehen. Beispielsweise ist ein weißes Logo auf hellem Hintergrund schwer zu erkennen, ein schwarzes gleichermaßen auf dunklem Untergrund.

Jedoch gibt es hier einen Trick: Bei einem SVG-Icon kann man Stylesheet einfügen, welches sich bei den meisten Browser an den Untergrund anpasst:

<?xml version="1.0" encoding="UTF-8"?>
<svg ...>
    <defs><style>
        g { fill: #fff; }
        @media (prefers-color-scheme: light) {
            g { fill: #000;
        }
        </style></defs>
    <g>... tatsächlicher Inhalt der Datei ...</g>
</svg>

Alternativ kann man natürlich auch andere Elemente designen oder mehrere Farben in einer Datei vergeben.

Live ist dies bei unserem aktuellen Icon auf der Webseite zu sehen: Geh doch einmal in die Browsereinstellungen und wechsle die Farbe deines Browsers von dunkel zu hell und umgekehrt.

ffmpeg Video-Skalierung

Um ein Video schnell für Mobilgeräte zu optimieren, und dabei mächtig Speicherplatz zu sparen, kann folgender Befehl als Grundlage dienen:

ffmpeg -i /media/fnetx/eventbike_0/MP_ROOT/100ANV01/MAH05255.MP4 -vf scale=480:-1 -vcodec libx265 -crf 30 KAMA-2.mp4

Damit wurde beispielsweise ein 0:2:42 langer und 250MB großer Videoclip zu 10MB reduziert.

Dabei übergibt -vf scale=x:y die gewünschte Skalierung, günstig sind z. B. 320, 480 oder 640 als x-Werte. Wird der y-Wert auf -1 (oder -n) gesetzt, wird die Auflösung automatisch zum passenden Seitenverhältnis ergänzt (wobei vielfache von n gewählt werden).

Der -vcodec-Parameter spezifizert den Videocdec. Wird libx265 verwendet, kann via -crf eine Qualität, wobei 30 die schlechte ist, angegeben werden.

Alternativ wäre z. B. die Verwendung von libvpx-vp9 empfohlen.

PulseAudio / Pipewire Hacks

Multichannel Soundcard: Stereo to Mono

Wenn eine externe Soundkarte zwei Eingangskanäle besitzt, erkennt eine Software diese häufig als Stereo-Mikrofon. Möchte man jedoch nur ein Mikrofon per XLR anschließen, führt dies folglich nur zu einem Signal auf einem Kanel.

Man kann jedoch softwareseitig ein zusätzliches Mono-Mikrofon erstellen, und die Kanäle verbinden.

Mit PipeWire (siehe auch hier:

pactl load-module module-null-sink media.class=Audio/Source/Virtual sink_name=mono-mic channel_map=mono

und dann mit pw-link -oI oder -iI (-o / -i für output / input, -I für IDs anzeigen) Geräte auflisten.

Dann mit pw-link <output> <input> die Kanäle linken, z. B.:

pw-link alsa_input.usb-Focusrite_Scarlett_Solo_USB_Y76CM7C1C2B5A5-00.analog-stereo.2:capture_FL mono-mic:input_MONO

Achtung: Wir haben es nicht immer geschafft, mit den Namen der Geräte unsere virtuelle Soundkarte zu verbinden, und haben daher stattdessen mit den IDs gearbeitet. Wichtig ist, dass man bei pw-link erst ein Gerät, was man via -o erhält, angibt, und dann ein Gerät, welches mit -i ermittelt wurde.

CSS Anzeigen / Verstecken ohne JavaScript

Anwendung: Eine Webseite möchte einen Inhalt auf Nutzeranfrage zeigen oder verstecken.

Option 1:

Der intuitive Ansatz ist ein HTML-natives Details- / Summary-Element.

<details>
    <summary>Dieser Teil wird immer angezeigt und kann z. B. auch ein Knopf sein.</summary>
    Dieser Teil wrid nicht immer angezeigt,
    da es nicht die Zusammenfassung ist.
    Wird jedoch die Zusammenfassung (summary) gedrückt,
    wird dieser Teil ausgeklappt.
</details>

Option 2:

Etwas komplizierter, z. B. weil Elemente nicht ineinander geschachtelt werden, gibt es auch eine Option mit CSS. Diese Funktioniert z. B. auch mit Pico CSS Modals und wird auf der Webseite von Fridays for Future Potsdam in der Praxis angewandt.

<dialog id="modal">
    <article>
        <a href="#close" aria-label="Close" class="close"></a>
        Inhalt
    </article>
</dialog>

Hier haben wir einen Dialog oder ein anderes Element, welches später angezeigt werden soll. Wichtig ist, eine id zu vergeben.

Mit CSS kann dieses Element dann erst einmal permanent versteckt werden:

#modal {
    display: none;
}

oder

dialog {
    display: none;
}

Jetzt möchten wir dieses Element anzeigen, sobald ein Knopf gedrückt wurde.

<a href="#modal">Öffnen</a>

lässt den Browser zur ID modal springen. Jetzt fangen wir diesen Zustand ab und lassen das Element anzeigen, sobald der Browser am gleichnamigen Element ist:

dialog:target {
    display: flex;
}

Also: Sobald ein Dialog-Element im Fokus des Browsers ist (indem #modal zur ID modal springt), wird das Element angezeigt. Dies wird mit dem :target-Selektor abgefangen.

Der oben enthaltene #close-Link führt den Browser an eine andere Stelle, das Element wird wieder versteckt. U. U. kann hier auch ein anderes Element ausgewählt werden, z. B. ein Formular, zu dem zurückgekehrt werden soll.

externer Monitor via Netzwerk

Anwendung: Ein Gerät (z. B. Laptop) hat nicht genug Anschlüsse oder es fehlt ein passender Bildschirm, Kabel o. ä. (z. B. HDMI-Ausgang, aber es sind nur VGA-Bildschirme vorhanden). Alternativ auch Fernübertragung eines Signals.

Resultat: Leicht verzögerte Darstellung, je nach Grafikkarte auch Glitches / Bugs (z. B. beim Fensterwechseln). Stabilität in Abhängigkeit der Netzwerkverbindung – bisher aber nur über WLAN getestet (ist okay).

Aufwand:

  • 15 Minuten Setup
  • benötigt Installation von bis zu drei zusätzlichen Tools
  • benötigt Anpassungen im System

Nötig:

  • zwei Linux-fähige Geräte
  • eine Netzwerkverbindung zwischen den Geräten

So geht's:

  1. Auf dem Gerät A, welches das Videosignal sendet (= welches quasi einen Bildschirm anschließen möchte) müssen folgende Programme installiert sein: x11vnc xrandr, z. B. via sudo apt install x11vnc xrandr.

  2. Auf dem Gerät B, welches das Videosignal empfängt (= an welches wirklich der Bildschirm angeschlossen ist) muss ein VNC Viewer installiert sein – häufig ist dies bereits der Fall. Ansonsten: sudo apt install vinagre

  3. Findet die Videoauflösung des Bildschirms heraus (z. B. 1920x1080). Dies findet sich meist in den Display-Einstellungen, oder indem man einmal auf B xrandr ausführt.

  4. Erstellt auf A eine Modeline, indem ihr im Terminal cvt x-Auflösung y-Auflösung Wiederholrate eingebt. Mit unserem Beispielbildschirm könnte das 

    cvt 1920 1080 60
    sein.
    Ihr erhaltet dann eine Ausgabe mit "Modeline" beginnend und kopiert alles danach.

  5. Diese Kopie fügt ihr dann nach xrandr --newmode an, z. B.: 

    xrandr --newmode "1920x1080_60.00"  173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync

  6. Diesen Modus weist ihr auf A dann eurem Ausgang zu, z. B. 

    xrandr --addmode VIRTUAL1 "1368x768_60.00"

  7. Sollte der Ausgang nicht gefunden werden, legt ihr auf Rechnern mit Intel-Grafikkarte die Datei /usr/share/X11/xorg.conf.d/20-intel.conf mit dem Inhalt: 

    Section "Device"
  Identifier "intelgpu0"
  Driver "intel"
  Option "VirtualHeads" "2"
EndSection
    an.
    Danach startet ihr am besten das Gerät neu und schaut, ob es noch funktioniert. Probiert Schritt 6 erneut.

  8. Jetzt startet ihr einen VNC-Server mit dem Befehl 

    x11vnc -usepw -nocursorshape -nocursorpos -noxinerama -solid -repeat -forever -clip 1920x1080+1366+0
    wobei die Auflösung "1920x1080" für die Auflösung von B steht. Die 1366+0 verschiebt den Ausschnitt beispielhaft 1366 Pixel nach rechts, um einen Bildschirm rechts vom aktuellen Laptop mit 1366 Pixeln zu übertragen. Dies könnt / müsst ihr an eure Geräte anpassen.

  9. Auf B verbindet ihr euch per VNC Viewer mit dem ersten Gerät. Stellt die Übertragung unter Umständen von SSH auf VNC um. Der Standardport kann bleiben. Es wird nach einem Passwort gefragt. Wenn ihr die Übertragung in ein Vollbildfenster verwandelt, ist der komplette zweite Bildschirm von der Übertragung von A ausgefüllt und dient praktisch als zweiter Bildschirm.

Auch interessant zu dem Thema:

Caddy Webserver Config

Ein paar coole Dinge, die mit dem Caddy Webserver sehr leicht möglich sind.

Etherpad oder andere Inhalte veröffentlichen

Um live Inhalte von anderen Webseiten einzubinden, ohne die Nutzer weiterzuleiten, kann folgender Config Snippet dienen:

rewrite /etherpad /p/r.88xxxxxxxbc6/export/html
reverse_proxy /p/* https://pad.eventbikezero.de {
    header_up Host pad.eventbikezero.de
    header_down -Content-Disposition
}
Zurück zum Seitenanfang