Fr, 28. November, 2014

IML-Appmonitor - v0.07 - James Bond Edition

Nein, das mit dem Zusatz zur Version ist nur ein Witz - ein kleines Wortspiel :-)

Aber im Ernst: Ich arbeite am Institut für Medizinische Lehre (IML) an der Uni Bern. Zum Monitoring von Web-Applikationen ist etwas in PHP Geschriebenes am Entstehen.

Das Grundprinzip ist:

Web-Applikationen sollen als Client diverse Checks machen, was sie so zu ihrer Ausführung alles brauchen: Schreibrechte auf einem Verzeichnis, Verbindung zu einer Datenbank, Verbindung zu einem Remote-Server auf Port XY, whatever…
Jeden Check bewertet die Client-Applikation und stellt das Ergebnis ihrer Prüfung samt TTL (wann eine erneute Abfrage erfolgen darf) als JSON bereit. Weil das Format etwas neutrales ist, kann ein Client in verschiedenen Programmiersprachen geschrieben werden.

Ein Server sammelt die JSON Ergebnisse ein. Zunächst gibt es eine bunte Web-GUI - rein zum Ansehen des aktuellen Zustands (keine History). Neben der GUI soll beim Server in Kürze auch eine Schnittstelle für Monitoring-Systeme entstehen. Zunächst ein Nagios-Plugin für die Intregration in unser eigenes Monitoring.

UPDATE:

Die Screenshots haben rein “historischen Wert” - es wurde mittlerweile eine GUI mit AdminLTE darüber gestülpt. Github zeigt es bereits im Readme-Markdown.

2014-11-28-01-overviewpage-websites.png
2014-11-28-02-detailpage-checks-of-a-website.png
2014-11-28-03-setup-monitor-clients.png

Weiterführende Links:

Do, 27. November, 2014

Pimped Apache Status v1.15 - Icons

Immer mal wieder gibt es Update bei meinen Tools.
Beim Pimped Apache Status habe ich noch diverse Pläne. Ich wollte eigentlich Bootstrap 3 in ein Template verpacken, und es soll per WebGUI die Liste der Server und Tiles oben konfigurierbar werden, …

Nun, es sind heute “nur” die Icons eingecheckt worden und das Ganze wurde als Version 1.15 bereitgestellt.

2014-11-27-pimped-apache-status-v115.png

Weiterführende Links:

Mo, 17. November, 2014

Piwik-Statistik mit statischen Grafiken in der Webseite einbinden

Ich wollte meine Statistik-Anzeige auf meiner Startseite etwas anders haben und die Grafiken von PIWIK [01] einbinden. Es gibt verschiedene APIs [02] zum Holen von Daten - als XML, JSON oder Grafik [03]. Aber die Grafiken sollten nicht mitsamt der URL der PIWIK-Api eingebunden sein - ich wollte die Grafiken holen, cachen und die gecachten Bilder einbinden.

Das Ergebnis auf der Webseite sieht dann so aus:

2014-11-17-piwik-stats-with-static-images.jpg

Konfiguration

Zunächst einmal die Basis-Daten als Konfiguration: Für die eigene Verwendung sind die Parameter anzupassen. Die Variablennamen sollten einleuchtend sein:

// anpassen
$sPiwikToken = ”419f6099c81111fdb6ae65…”;
$iPiwikSiteId = 7;
// Bildgroesse und Farbe
$iImageWidth = 500;
$iImageHeight = 200;
$sBarColor = ”887799”;
// Domain und Pfad zu Piwik anpassen
$sBaseUrl = ”http://[www.deine-domain.de/piwik]/index.php?module=API&method=ImageGraph.get”
  . ”&idSite=$iPiwikSiteId&apiModule=[MODULE]&apiAction=[ACTION]”
  . ”&period=range&date=last[DAYS]”
  . ”&token_auth=$sPiwikToken”
  . ”&width=$iImageWidth&height=$iImageHeight&colors=$sBarColor”;

[Weiterlesen…]

Mo, 3. November, 2014

Bootstrap 3.3 unter Concrete 5.6

Meine Webseite verwendet Concrete 5 als CMS.
Auf aktuelle Version 5.7 kann man dummerweise nicht upgraden, weil man im Unterbau zuviel geändert hat. Toll. Ich will einige Komponenten trotzdem aktualisieren.

Ich hatte so die famose Idee, auf meiner Webseite Bootstrap auszutauschen
VON v3.0
AUF v3.3

Der Konflikt besteht darin, dass das Backend mit Bootstrap 2 arbeitet und mit jQuery v1.7 daherkommt.

Bootstrap 3.3 braucht nun aber mind. jQuery 1.9. Mit vermeintlich gutem Gewissen habe ich die letzte 1-er Version von jquery heruntergeladen. Und mit jQuery 1.11 läuft wiederum das Bootstrap 2 Backend nicht mehr sauber.

Ein Teufelskreis ;-)

Erschwerend kommt hinzu, dass C5 das jQuery innerhalb

Loader::element(’header_required’);

irgendwo lädt (damit werden mehrere Html-Header Zeilen per echo rausgeschrieben).

Entweder man modifiziert Originale (davon rate ich per se ab), macht Custom-Elemente - oder ersetzt es in seinem Template. Letzters habe ich gemacht - mit Hilfe der ob_ Funktionen wird der Content abgegriffen und darin der Pfad zum jQuery File ersetzt.

        // 2014-11-01 hahn
        // HACK to use bootstrap 3.3 in live mode and concrete5 cms mode
        // –> load specific jquery version
        ob_start();
        Loader::element(’header_required’); 
        $sHeadcontent = ob_get_contents();
        ob_end_clean();
        
        $u = new User();
         if (!$u->isRegistered()) {
             $sHeadcontent=str_replace(
                     ’/concrete/js/jquery.js’, // or ’/updates/concrete[version]_updater/concrete/js/jquery.js’,
                     $this->getThemePath() . ’/js/jquery_1.11.1.js’,
                     $sHeadcontent
             );
         }
        echo $sHeadcontent;
        // ENDE jquery HACK

Eine andere Folge des jQuery Updates war die Inkompatibilität mit colorbox (Addon Lightboxed Image - 0.9.2).
Durch Aktualisieren der Dateien unter

[webroot]/packages/lightboxed_image/blocks/lightboxed_image

mit den aktuellen colorbox-Sourcen lief auch das wieder.

Update:
Eine andere Variante (die Auswirkung auf alle Themes hätte) wäre, die Datei concrete/elements/header_required.php in das Verzeichnis elements zu kopieren und dort anzupassen. So kommt man auch ohne die ob_-Funktionen aus.

weiterführende Links:

Fr, 15. August, 2014

Chocolatey: Ersatz für choco list mit lokalem Cache

Ich habe mich mit Chocolatey angefreundet, verfluche aber die langsame Paketsuche.
Was man da machen kann? Nun, eine Batch-Datei schreiben, die die Paketliste lokal speichern kann und diesen Cache durchsucht.

Die Funktion ist nicht mit choco list [Suchbegriff] identisch, da hier auch Metainformationen gesucht werden - die Suche in meinem Skript geht rein auf Paketnamen, ist dafür aber wirklich massiv schneller!!

Der Cache wird 1 x pro Tag erneuert - oder bei manuellem Aufruf mit Parameter -u (=update).
Die Hilfe erscheint bei Aufruf ohne einen Parameter:

===== CHOCO PACKAGE SEARCH WITH LOCAL CACHE =====
DESCRIPTION:
clist2 is a choco list to search public packages that uses a local cache
SYNTAX:
  clist2 [searchstring]
     searchstring: part of a package, case insensitive,
     regex allowed i.e. ”^fire” to find the firefox
     clist2 ”^fire”
  clist2 -i
     infos about cachefile
  clist2 -u
     force update of local package list (it takes a while)

[Weiterlesen…]

Mi, 13. August, 2014

Schoko Nougat

Zugegeben, der Titel ist eine schlechte Übersetzung des englischen Originals.
Unter Windows gibt es ein Tool NuGet - ein Paketmanager für Entwicklertools unter MS Windows. Chocolatey NuGet greift die Idee mitsamt Technologie auf und ist ein Paketmanager für (alle möglichen) Windows Applikationen. Quasi ein apt-get, yum oder rpm für MS Windows.

2014-08-13-chocolatey.png

Unter Chocolatey sind über 2000 Pakete (Metabeschreibungen) für die Installation verschiedenster Programme verfügbar: Flashplayer, Skype, Antivirus, Browser, Mailclient, Libreoffice, … Analog zu Linux Paketmanagern kann man per Kommandozeile Pakete suchen, installieren, updaten, deinstallieren …

Das gefällt mir ;-)
[Weiterlesen…]

Mo, 19. Mai, 2014

Pimped Apache Server Status Update v1.10

Mein PHP Tool “Pimped Apache Server Status” macht den Apache Status lesbar. Dies funktioniert auch mit mehreren Webservern gleichzeitig und eignet sich so auch zum Live Monitoring von loadbalancten Webseiten.

Im letzten Update kamen 2 Boxen in der oberen Reihe hinzu. Sie zeigen die Anzahl der abgefragten Webserver an und wie lange dies brauchte.

2014-05-19-pimped-apache-status-v110.png

Im LAN bei mir auf Arbeit wird der Status von 19 Webservern in weniger als 0.3 Sekunden geholt.
Wie weit es nach oben skaliert, weiss ich noch nicht. Erfahrungsberichte von anderen Webmastern/ Sysadmins sind daher willkommen!

Update:
Ich habe mich noch einmal genauer belesen…
Die einzelnen Apache Server status werden in der Methode ServerStatus->getStatus() (s. Datei ./classes/serverstatus.class.php) mittels curl_multi_exec() geholt. Bei dieser Funktion erfolgen die Requests - wie ich es auf php.net lese - sequentiell.
Erst ab PHP Version 5.5 gibt es eine Funktion curl_multi_setopt, mit der man parallele Requests steuern kann - aber auf diese PHP-Version ist mein Tool noch nicht getrimmt.

Weiterführende Links:

Do, 1. Mai, 2014

Html5 Audio: schnelles Wiederholen eines Sounds

Kürzlich hatte ich etwas zur Wiederholung von loopenden HTML5 Audios geschrieben. Beim Schreiben der elektronischen Osterkarte kämpfte ich noch mit einem anderen Audio-Problem: Mit Klick auf ein Element sollte ein Sound wiedergegeben werden. Im Onclick Event eines Bildes wird nachfolgende Funktion aufgerufen. Diese holt aus einem Spielfeld-Array die Information, ob es ein neu aufgedecktes Feld ist und spielt einen entsprechenden Sound durch Ansteuern eines (in der Seite bereits vorhandenen) Audioobjektes:

function clickimage(oLink) {
    (…)
    iClickCounter++;
    var oAudio = false;
    var oField = aFields[oLink.id];
    (…)
    if (oField[”active”]) {
        // scream yeah!
        (…)
        oAudio=document.getElementById(”audioclickok”);
        oAudio.currentTime=0;
        oAudio.play();
        (…)
    } else {
        // oh no!
        (…)
        var sSoundid=oField[”done”]?”audioclickremoved”:”audioclickfailed”;
        oAudio=document.getElementById(sSoundid);
        oAudio.play();
        (…)
    }
    (…)
}

Hey es spielt! Aber eher schlecht als recht. Bei mehrfachen Klicks gibt es äusserst unschöne Effekte. Es hakt - die Wiedergabe ist nicht synchron.

Eine Abhilfe wäre web-API. Oder man stehert die Wiedergabe ein und desselben Audiofiles über mehrere Audio-Objekte.

Oder: man setzt vor der Play-Methode die Abspielposition auf Null.

    (…)
        oAudio=document.getElementById(sSoundid);
        oAudio.currentTime=0;
        oAudio.play();
    (…)

Der Unterschied ist wirklich frappant!

Weiterführende Links

Do, 17. April, 2014

Frohe Ostern!

Es ist wieder Ostern und wieder gibt es eine animierte Grusskarte :-)
Wem es gefällt, kann diese mit einem eigenen Titel an Freunde versenden.

Es ist ein kleines Reaktionsspiel. Nach einer zufälligen Wartezeit wird ein Feld hervorgehoben, was schnellstmöglichst angeklickt werden muss. Es wird die Zeit zusammengezählt vom Anzeigen eines Feldes bis es angeklickt wurde.

2014-04-17-osterkarte-2014.png

Schöne Feiertage!
zur Osterkarte 2014

Wie es erstellt wurde?

  • Hintergrundmusik und Sounds wurden mit Magix Music Maker erstellt.
  • Grafiken / Fotos / Scans wurden mit Paint Shop Pro montiert bzw. nachbearbeitet
  • Die Spielsteuerung erfolgt mit Javascript - jQuery nimmt mir teilweise einige Arbeiten ab. CSS 3 animiert die Boxen.

Mit dem Webbrowser kann man die Sourcen einsehen - oder mich nochmal fragen.

Weiterführende Links:

Mo, 14. April, 2014

Loopende Sounds mit Html5 Audio

Ich bin dabei, eine e-Card vorzubereiten und habe einen loopenden Song erstellt. Wenn ich diesen mit dem Audio Tag mitsamt loop Attribut einbinde:

<audio title=”Hintergrundmusik” preload=”auto” controls=”controls” loop=”loop” 
    autoplay=”autoplay”
    id=”audioBgSound”
    >
    <source type=”audio/ogg” src=”/axel/download/easter2014-bg_2.0_.ogg” >
    <source type=”audio/mp3” src=”/axel/download/easter2014-bg_2.0_.mp3” >
</audio>

… so gibt es am Ende des Songs immer eine kurze Pause von ein..zwei Zehntel, bevor der Song von vorn beginnt. Das ist unschön, ich wollte eigentlich einen soften Übergang ohne diese Zwangspause.

Einen Evenlistener auf “ended” zu setzen, der die Position auf 0 (Anfang) setzt, hat genau denselben Effekt, wie das Loop Attribut.

Nun habe ich eine Krüppel-Lösung hergenommen.

Mit window.setTimeout wird eine Funktion forlaufend wiederholt. Diese prüft die Position und ob das Ende “fast” erreicht ist. Fast heisst hier: Länge des Audios ([audio].duration) minus etwas Luft. Ich hab mal 0.2 Sekunden gesetzt.

/**
 * sound hook
 * @returns {undefined}
 */
function soundtrigger() {
    oAudioBgsound = document.getElementById(”audioBgSound”);
    iPos = oAudioBgsound.currentTime;
    if (iPos>oAudioBgsound.duration - 0.2){
        oAudioBgsound.currentTime=0;
    }
    if (iPos > (oAudioBgsound.duration - 6)) {
        window.setTimeout(”soundtrigger();”, 50);
    } else {
        window.setTimeout(”soundtrigger();”, 5000);
    }
}

Es ist echt unschön, aber falls wer was besseres weiss…

weiterführende Links:

Abonnieren