Entertainment Popup

Die relativ aufwändige Entwicklungsphase von IPSStudio 5.0 neigt sich dem Ende zu und es wird Zeit wieder einige neue Beiträge zu schreiben.

Diesmal möchte ich zeigen, wie Ihr eine ansprechende Seite für eine Entertainment Steuerung erstellen könnt.

Copy to Clipboard

<?php

$coverUrl = GetValue(56231);
    $mediaIDCover = 12273;
    $mediaIDDefault = 22174;

if ($coverUrl <> '') {
        $curl_handle=curl_init();
        curl_setopt($curl_handle, CURLOPT_HEADER, false);
        curl_setopt($curl_handle, CURLOPT_URL,  $coverUrl);
        curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 10);
        curl_setopt($curl_handle, CURLOPT_TIMEOUT, 20);
        curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER,true);
        curl_setopt($curl_handle, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($curl_handle, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl_handle, CURLOPT_FAILONERROR, true);
        $coverContent = curl_exec($curl_handle);
        curl_close($curl_handle);
    } else {
        $coverContent = base64_decode(IPS_GetMediaContent($mediaIDDefault));
    }

IPS_SetMediaFile($mediaIDCover, 'media/SonosCover.jpg', false);
    IPS_SetMediaCached($mediaIDCover, true);
    IPS_SetMediaContent($mediaIDCover, base64_encode($coverContent));

Vorbereitung

Im ersten Schritt benötige ich das Cover meiner Sonos Steuerung als Media Image, um es direkt in IPSView einbinden zu können.

Dazu habe ich mir ein kleines Skript geschrieben, dass bei einer Änderung der CoverUrl aufgerufen wird und das MediaImage aktualisiert.

Maskierung

Um das Cover Image im Client kreisrund darzustellen, hab ich mir in einem Zeichenprogramm eine Maskierung erstellt.

In meinem Fall ist das Image 900 x 900 Pixel groß mit einem 700 x 700 großen transparenten Ausschnitt.

Popup Seite

In meiner View habe ich mir nun eine neue Popup Seite erstellt und oben eine Überschrift, ein Icon zum Schließen des Popups und eine Trennlinie platziert.

Darunter wird das Cover MediaImage platziert und horizontal zentriert.

Über dem MediaImage wird die Maskierung platziert, diese sorgt im Client dafür, dass ein rundes Images zu sehen ist.

Es ist darauf zu achten, dass das Image genau zentriert über dem MediaImage liegt. Horizontal ist das über die Zentrierung im Context Menu möglich und vertikal geht es am einfachsten über die Angabe der Position.

Als obersten Layer habe ich noch einen CircleSlider zur Steuerung der Lautstärke platziert. Farbe und Größe der einzelnen Slider Elemente kann jeder nach seinem eigenen Geschmack machen.

Steuerelemente

Im unteren Bereich werden die Steuerelemente für Stop/Play/Pause und Navigation platziert. Ein ValueButton setzt dabei für jede Funktion den entsprechenden Wert.

Ganz unten wird noch der aktuelle Titel angezeigt.

Client

Im Client stellt sich die Seite dann folgendermaßen dar