1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

HowTo WebIF für iPhone-/iPod-Darstellung optimieren

Dieses Thema im Forum "OScam Features" wurde erstellt von fidero85, 26. März 2013.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. fidero85
    Offline

    fidero85 Ist oft hier

    Registriert:
    10. März 2011
    Beiträge:
    157
    Zustimmungen:
    50
    Punkte für Erfolge:
    28
    Ort:
    diesseits der Wohnungstüre
    Aus guten Gründen gibt es ja im Gegensatz zu Android meines Wissens keine App für iOS zum Zugriff auf Oscam. Trotzdem hat man ja gelegentlich das Bedürfnis (ich zumindest :emoticon-0122-itwas) mal schnell von unterwegs auf die Client-Liste zu schauen ob alles rund läuft. Dabei störte mich bei der Darstellung des WebIf auf dem kleinen iPhone-Display die Informationsfülle und die Tatsache, dass durch Menü, Logfile, Thread-IDs, etc. die essenziellen Informationen (sprich die Client-Liste mit aktuell geschautem Programm und den ECM-Zeiten) nur sehr klein und durch viel Scrollen & Zoomen erreichbar sind. Es kam also die Frage auf, ob man das nicht selektiv für iPhone/iPod-Darstellung optimieren kann und nur auf großen Bildschirmen das WebIf weiter wie gewohnt anzeigen kann. Und - es geht relativ einfach. Vorab: So sieht es am Ende auf dem iPhone aus (sorry für die mittelmäßige Quali, aber man erkennt worum es geht ;-))

    [​IMG]

    Es werden also bei Aufruf des WebIf vom iPhone aus das Menü, Kopf-und Fußzeilen, die Logdatei sowie meiner Meinung nach entbehrliche Spalten aus den Tabellen ausgeblendet und automatisch so gezoomt, dass man auf einen Blick alles erkennen kann. Um das zu erreichen ist also eine Art Browserweiche notwendig, die via Stylesheetangaben die entsprechenden Formatierungen vornimmt sobald erkannt wird, dass das aufrufende Gerät ein iPhone/iPod ist.

    Oscam ermöglicht es, ein automatisch eingebundenes JavaScript durch eine modifizierte Version zu ersetzen. Man sieht die Originaldatei wenn man die Adresse http://<oscam-webif-adresse>/oscam.js aufruft. Den Inhalt dieser Datei kopieren wir uns jetzt und erstellen (am einfachsten im Oscam-Konfigurationsverzeichnis, also da wo oscam.conf, etc. liegen) eine neue Datei namens custom.js. Dort fügen wir den gerade kopierten Inhalt ein und ergänzen um ein paar Stylesheet-Angaben zum Ausblenden irrelevanter Elemente. Bei mir sieht die Datei aktuell wie folgt (inkl. 'original' Oscam-Inhalten) aus:
    function addUnloadHandler(){var a,e;if(window.attachEvent){a=window.attachEvent;e='on';}else{a=window.addEventListener;e='';}a(e+'load',function(){loadScroll();if(typeof Sys!='undefined' && typeof Sys.WebForms!='undefined')Sys.WebForms.PageRequestManager.getInstance().add_endRequest(loadScroll);},false);}function loadScroll(){var c=document.cookie.split(';');for(var i=0;i<c.length;i++){var p=c.split('=');if(p[0]=='scrollPosition'){p=unescape(p[1]).split('/');for(var j=0;j<p.length;j++){var e=p[j].split(',');try{if(e[0]=='window'){window.scrollTo(e[1],e[2]);}}catch(ex){}}return;}}}function saveScroll(){var s='scrollPosition=';var l,t;if(window.pageXOffset!==undefined){l=window.pageXOffset;t=window.pageYOffset;}else if(document.documentElement&&document.documentElement.scrollLeft!==undefined){l=document.documentElement.scrollLeft;t=document.documentElement.scrollTop;}else{l=document.body.scrollLeft;t=document.body.scrollTop;}if(l||t){s+='window,'+l+','+t+'/';}document.cookie=s+';';}

    document.write("<style type=\"text/css\" media=\"only screen and (max-device-width: 480px)\">");
    document.write("<!--");
    document.write("TR.s, TR.h, table.menu, div.header, div.filterform, div.log, div.footer, hr { display:none; }");
    document.write(".statuscol0, .statuscol1, .statuscol2, .statuscol3, .statuscol5, .statuscol6, .statuscol8, .statuscol10, .statuscol14 { display:none; }");
    document.write("\/\/-->");
    document.write("<\/style>");
    document.write("<meta name=\"viewport\" content=\"width=560\" \/>");


    Die ersten Zeilen entsprechen wie gesagt der JS-Datei, die mit Oscam mitgeliefert wurde (Die Funktionen sorgen dafür, dass die Scrollleistenposition vor demAutoRefresh gespeichert und danach wieder eingestellt wird, ist potenziell ganz nützlich). Die mit document.write beginnenden Zeilen sind der Patch und bewirken, dass für Devices, die maximal 480px breit sind (damit trifft man iPhone/iPod, etc.) zusätzliche Formatierungen gelten sollen. Dann werden der Reihe nach alle Elemente, die ich bei mobilem Zugriff nicht benötige, über display:none ausgeblendet.
    Wer dabei andere Präferenzen als ich hat kann sich das auch ganz einfach beim Aufruf des WebIf über bspw. Chrome über die "Element untersuchen"-Funktion anpassen; hiermit lässt sich herausfinden, wie die einzelnen Elemente des WebIf heißen.

    Die letzte Zeile sorgt auf dem Gerät dafür, dass die Zoom-Funktion beim Aufrufen der Seite bereits so eingestellt ist dass alles angezeigt wird. Man muss dann bei langer Client-Liste ggf. nur noch nach unten scrollen, horizontales Scrollen ist nicht mehr erforderlich (s. Beispielfoto oben).

    Als letztes muss man Oscam nur noch mitteilen, dass es anstatt dem eingebauten JS das Modifizierte verwenden soll. Dazu fügen wir in die oscam.conf die Zeile
    httpjscript = <Pfad zum Oscam-Konf.verzeichnis>/custom.js
    ein. Wenn euer Oscam-Konfigurationsverzeichnis also bspw. /etc/oscam/ ist und ihr die Datei wie vorgeschlagen dort erstellt habt wäre hier ein
    httpjscript = /etc/oscam/custom.js
    einzusetzen.
    Nach OSCAM-Neustart sollte nun die geänderte Datei eingebunden werden. Da man mit dem "normalen" Browser vom PC aus wie beschrieben keinen Unterschied sieht sollte man am besten kurz noch einmal http://<oscam-webif-adresse>/oscam.js (!, nicht /custom.css!) aufrufen und nachprüfen, ob die zusätzlichen document.write-Zeilen mit angezeigt werden. Wenn dem so ist sollte nur bei Aufruf via iPhone/iPod die angepasste Kurzdarstellung verwendet werden.
     
    #1
  2. phantom

    Nervigen User Advertisement

  3. szonic
    Offline

    szonic MFC Digital Eliteboard Team

    Registriert:
    4. März 2009
    Beiträge:
    10.220
    Zustimmungen:
    8.445
    Punkte für Erfolge:
    113
    AW: WebIF für iPhone-/iPod-Darstellung optimieren

    Vielen Dank!

    Ich schliesse hier vorerst und öffne einen

    Dieser Link ist nur für Mitglieder!!! Jetzt kostenlos Registrieren ?

    dazu.

    Sollte Bedarf zum Öffnen bestehen, wende Dich bitte an einen Moderator bzw. Admin.

    Danke und Grüsse
    szonic
     
    #2
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen