PhantomJS.TMS - Browser Demo

TAPs für die SRP- und CRP-Serie
Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

PhantomJS.TMS - Browser Demo

#1

Beitrag von jkIT » Sa 15. Jul 2017, 18:03

Ich möchte euch mein aktuelles Experiment vorstellen. Und zwar ist es mir gelungen, PhantomJS v2.1.1 auf den Topf zu portieren. Raus gekommen ist tatsächlich ein kleines Monster (50MB nur das Binary) :wink: .

PhantomJS basiert auf QT 5.5 (qtbase und qtwebkit) und ist im Prinzip ein WebKit/Safari Browser ohne grafische Abhängigkeiten (GUI), der mit JavaScript gesteuert werden kann. Diese JS Kontrollschicht und ein TAP können z.B. via WebSockets miteinander kommunizieren. Das ermöglicht es uns, Anwendungen mit HTML/CSS/JavaScript Funktionalität zu bauen.

PhantomJS erzeugt Screenshots normalerweise nur im PNG oder JPG Format, deshalb habe ich es um die Möglichkeit erweitert, einen Render-Puffer mit einem TAP zu teilen, um Grafik am OSD anzuzeigen.

Es wären aber auch grafiklose Anwendungen denkbar, da man über JavaScript Vollzugriff auf das DOM einer geladenen Webseite hat. Stichwort: Auslesen von Informationen aus einer Website.

Zur Demonstration habe ich ein Browser Demo TAP erstellt.

Es startet eine PhantomJS Instanz, was ein paar Sekunden dauert, und lädt dann eine lokale Webseite mit ein paar Links zum Testen.
Auf den Webseiten wird eine rudimentäre TV-Navigation eingebunden, die mit den Tasten recht, links, auf, ab von Link zu Link springt, bzw. auf,ab scrollt. Die Taste ok löst auf dem fokussierten Element einen Klick aus. Mit |< und >| kann man im Browser-Verlauf vor und zurück gehen.
EXIT beendet das TAP.


Der Screenshot könnte einigen bekannt vorkommen :D :

Natürlich ist unser Topf mit seinen zwei 400MHz Kernen kein Geschwindigkeitswunder, aber ich bin immer wieder erstaunt, zu was er alles fähig ist. Ein Nachteil ist die doofe 4:3 OSD Auflösung, die am TV auf 16:9 gestreckt wird. Der WebKit kann zwar verzerrt rendern, aber es entsteht durch das ganze hin- und hergezerre eine gewisse Unschärfe.

Download inkl. Sourcecode

Installation: Archiv entpacken und Inhalt des ProgramFiles Ordners entsprechend auf den Topf kopieren.

Wer Lust hat, kann auf der Telnet Konsole noch ein paar PhantomJS Beispiele ausprobieren (siehe auch http://phantomjs.org/examples/ )

Code: Alles auswählen

First cd to the qt5 directory:
# cd /mnt/hd/ProgramFiles/bin/qt5/

Display version string:
# phantomjs.tms -v

Canvas test, rendering a color wheel to a png image
# phantomjs.tms examples/colorwheel.js

Rendering the complete Topfield-Europe forum start page to png:
# phantomjs.tms examples/rasterize.js http://www.topfield-europe.com/forum/index.php topfield.png

SVG test, rendering a svg image to png:
# phantomjs.tms examples/rasterize.js http://ariya.github.io/svg/tiger.svg tiger.png
Viel Spass beim testen :)
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
Twilight
Zauberküchencheflehrling mit extra Butter
Zauberküchencheflehrling mit extra Butter
Beiträge: 64951
Registriert: Fr 9. Dez 2005, 09:17
Receivertyp: 1 x SRP 2100(TMS) TFIR und .1 x SRP 2410 M
Wohnort: Wien Umgebung

AW: PhantomJS.TMS - Browser Demo

#2

Beitrag von Twilight » Sa 15. Jul 2017, 18:07

ich glaub ich bin im falschen film...april ist noch s weit :shock:

twilight

Benutzeravatar
TV-Junkie
Alteingesessener
Alteingesessener
Beiträge: 28043
Registriert: Sa 16. Jun 2007, 19:10
Receivertyp: VU+ Duo4K, Ultimo4K und Uno4KSE
Receiverfirmware: VTI 15.xx ausser der Uno 4K SE
Wohnort: Düsseldorf

AW: PhantomJS.TMS - Browser Demo

#3

Beitrag von TV-Junkie » Sa 15. Jul 2017, 18:25

irrre :D
Gruß Ha-Jü
----------------------------------------------------------------------------------------------
Zum Tippspiel BuLi 2019/2020 hier entlang
Und wer Lust auf tippen beim DFB Pokal hat, darf sich hier austoben
Viel Spaß

Sat-Anlage: Astro CAS 90 mit Kathrein UAS 584 LNB (20Jahre alt und noch immer Top in Schuss :D ), Jultec JPS0506-8T Unicable Multischalter sowie UM/VF West Kabelanschluß
Installierte Plugins:OScam (incl OScam-Butler), LV4, SmartEPG VU+, ansonsten nix, was VTI nicht schon selbst mitbringt :)

Benutzeravatar
Acade
Software-Guru
Software-Guru
Beiträge: 952
Registriert: Fr 9. Dez 2005, 13:37
Receivertyp: TF 5000 PVR (Rente) Wohnzi. : SRP 2401 CI+ Eco Reserve: SRP 2401 CI+
Wohnort: Bayern
Kontaktdaten:

AW: PhantomJS.TMS - Browser Demo

#4

Beitrag von Acade » Sa 15. Jul 2017, 18:26

Tolle Arbeit, jkIT, :up:

Qt wäre schon toll auf der Kiste, allein ich mag mich auf 'nem HD-PVR nicht mit 720x576 zufrieden geben.
Kann man denn den Nexus gar nicht zu 1920x1080 oder wenigstens HD-Ready überreden?

Ciao,
Acade

Benutzeravatar
FireBird
Suspekter verdächtiger Zauberküchenchef, TAP & Firmware-Guru
Suspekter verdächtiger Zauberküchenchef, TAP & Firmware-Guru
Beiträge: 29067
Registriert: Fr 9. Dez 2005, 09:59
Receivertyp: SRP-2401CI+ TFIR
vu+ Duo 4k
Wohnort: Wien

AW: PhantomJS.TMS - Browser Demo

#5

Beitrag von FireBird » Sa 15. Jul 2017, 20:19

Genial! :D

Benutzeravatar
Alter Sack
Alt-Guru
Alt-Guru
Beiträge: 10638
Registriert: Do 8. Dez 2005, 22:35
Receivertyp: diverse
Wohnort: NRW - GM

AW: PhantomJS.TMS - Browser Demo

#6

Beitrag von Alter Sack » Sa 15. Jul 2017, 21:41

Unglaublich, was es mittlerweile alles auf den Topf geschafft hat, wer hätte da 2009 schon dran gedacht :hello:

Die Sache mit dem Anmelden hat zwar noch nicht geklappt :D , aber sonst ... :shock:

Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Aktive Receiver:
3x SRP2401CI+
Stille Reserve:
3x SRP2401CI+, 2x SRP2401CI+ECO, 2x SRP2100, TF7700HDPVR, TF7700HSCI, TF5500PVR

Benutzeravatar
Twilight
Zauberküchencheflehrling mit extra Butter
Zauberküchencheflehrling mit extra Butter
Beiträge: 64951
Registriert: Fr 9. Dez 2005, 09:17
Receivertyp: 1 x SRP 2100(TMS) TFIR und .1 x SRP 2410 M
Wohnort: Wien Umgebung

AW: PhantomJS.TMS - Browser Demo

#7

Beitrag von Twilight » Sa 15. Jul 2017, 23:50

Alter Sack hat geschrieben:Unglaublich, was es mittlerweile alles auf den Topf geschafft hat, wer hätte da 2009 schon dran gedacht :hello:

wo du recht hast, hast du recht :up:

twilight

Benutzeravatar
Alter Sack
Alt-Guru
Alt-Guru
Beiträge: 10638
Registriert: Do 8. Dez 2005, 22:35
Receivertyp: diverse
Wohnort: NRW - GM

AW: PhantomJS.TMS - Browser Demo

#8

Beitrag von Alter Sack » So 16. Jul 2017, 09:29

Ich habe mir die Startseite mal ein bischen angepasst, ist zwar jetzt sehr Topfield lastig, aber
man muss nicht soviel drücken :D



Ich finde die Darstellung am TV eigentlich völlig OK, die Korea Seite wird zwar durchsichtig
dargestellt, aber da gibts ja nichts spannendes mehr zu sehen :u:

Selbst als Demo ist das echt :volldolllol:
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Aktive Receiver:
3x SRP2401CI+
Stille Reserve:
3x SRP2401CI+, 2x SRP2401CI+ECO, 2x SRP2100, TF7700HDPVR, TF7700HSCI, TF5500PVR

Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

AW: PhantomJS.TMS - Browser Demo

#9

Beitrag von jkIT » So 16. Jul 2017, 09:50

Acade hat geschrieben:Kann man denn den Nexus gar nicht zu 1920x1080 oder wenigstens HD-Ready überreden?

Ich meine, theoretisch wäre mehr drin als die 720x576. Es gibt/gab eine Traumbox mit dem selben SoC wie in unseren Töpfen und die hatte angeblich ein HD OSD. Das wäre also ein Fall für die Spezialisten im Firmware zerlegen :u:

Alter Sack hat geschrieben:Die Sache mit dem Anmelden hat zwar noch nicht geklappt :D , aber sonst ... :shock:

Vielleicht hat jemand Lust eine Tastatur ins TAP einzubauen, dann würde es auch Sinn machen, außer den Links auch die Eingabefelder mit dem Focus anzuspringen.

Alter Sack hat geschrieben:Ich habe mir die Startseite mal ein bisschen angepasst,

:up: weiter so
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
HD_Topfgucker
Topfversteher
Topfversteher
Beiträge: 282
Registriert: Fr 24. Apr 2009, 22:00
Receivertyp: TF 7700HDPVR
SRP 2401 CI+
VU+
Receiverfirmware: immer aktuellste
Wohnort: Thüringen

AW: PhantomJS.TMS - Browser Demo

#10

Beitrag von HD_Topfgucker » So 16. Jul 2017, 10:15

jkIT hat geschrieben:Ich möchte euch mein aktuelles Experiment vorstellen. Und zwar ist es mir gelungen, PhantomJS v2.1.1 auf den Topf zu portieren. Raus gekommen ist tatsächlich ein kleines Monster (50MB nur das Binary) :wink: .

PhantomJS basiert auf QT 5.5 (qtbase und qtwebkit) und ist im Prinzip ein WebKit/Safari Browser ohne grafische Abhängigkeiten (GUI), der mit JavaScript gesteuert werden kann. Diese JS Kontrollschicht und ein TAP können z.B. via WebSockets miteinander kommunizieren.
[/CODE]Viel Spass beim testen :)


Hallo in die Runde,

Klingt echt spannend.
Ist es damit jetzt möglich dies mit dem HbbTV Tap zu verbinden und kann man auf den zwischengeschalteten
PC dann verzichten ?

Gruß HD_TOPFGUCKER

Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

AW: PhantomJS.TMS - Browser Demo

#11

Beitrag von jkIT » So 16. Jul 2017, 10:22

Noch ein wenig Hintergrundinformation zur Browser Demo:

Die PhantomJS seitigen Dateien liegen in /ProgramFiles/bin/qt5/ . Das TAP startet PhantomJS über phstart.sh.
PhantomJS wird mit dem Kontroll-Skript browser-demo.js gestartet. Dieses baut eine WebSocket Verbindung zum TAP auf, über die das TAP die Kommandos sendet und die Daten empfängt.

Als Startseite wird per default die Datei index.html geladen, das kann in der ini des TAPs eingestellt werden.
Sobald eine Seite geladen ist, injiziert das Kontroll-Skript die Datei tv-nav.js mit den Navigationsfunktionen. Diese ist sehr einfach gehalten, sie sucht alle Links und ordnet sie in Zeilen, damit man den Focus in die gewünschte Richtung bewegen kann.
Das ist eigentlich zu statisch und kann sicher intelligenter gelöst werden. Mozilla hat hier einen interessanten Artikel dazu veröffentlicht.

Todo:
browser-demo.js rendert eine Seite momentan nur einmal direkt nach dem Laden, bzw. beim scrollen. Eigentlich müsste aber immer, wenn der WebKit eine Veränderung (dirty rect) meldet, nachgerendert werden. Ebenso wird im Moment immer der ganze Screen gerendert, auch wenn sich evtl. nur ein Teil verändert hat.

Übrigens, das TAP gibt seine Log-Ausgaben wie üblich im entsprechenden Settings Verzeichnis aus, browser-demo.js logt ins qt5 Verzeichnis.
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

AW: PhantomJS.TMS - Browser Demo

#12

Beitrag von jkIT » So 16. Jul 2017, 10:44

HD_Topfgucker hat geschrieben:Hallo in die Runde,

Klingt echt spannend.
Ist es damit jetzt möglich dies mit dem HbbTV Tap zu verbinden und kann man auf den zwischengeschalteten
PC dann verzichten ?

Gruß HD_TOPFGUCKER

Das ist mein Ziel :)

Im Prinzip sollte es jetzt schon möglich sein, wenn man PhantomJS.TMS, wie bei HbbTF beschrieben, von Hand startet.

Es wäre aber ziemlich ineffizient, denn bei HbbTV.js wird der Screen zunächst als PNG und Base64 codiert gerendert. Dann wird in JavaScript das Base64 dekodiert und das PNG per HTTP-GET ans TAP gesendet, wo das PNG dekodiert wird. Vor der Ausgabe am OSD müssen dann noch die Farbkomponenten vertauscht werden :puh: :X

Mit PhantomJS.TMS ist es nun möglich, direkt in einen Speicherbereich zu rendern, der mit dem TAP geteilt wird, und der vom TAP 1:1 ins OSD kopiert werden kann. Das dürfte um einige Größenordnungen schneller sein.

Dazu muss ich aber erst die Erkenntnisse aus der Browser Demo ins HbbTF.tap einbauen. Vorher möchte allerdings noch ein paar Dinge ausprobieren.
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
macfan
Ex-iTiNa-Promoter
Ex-iTiNa-Promoter
Beiträge: 24972
Registriert: Fr 9. Dez 2005, 10:16
Receivertyp: 2 x TF 2401 CI+, 2100, 5200 C, VU+ Ultimo 4K
Receiverfirmware: SRP-Serie: die neueste, 5k: Jan 07 PTU, VU+ VTi 15.0
Wohnort: Dortmund

AW: PhantomJS.TMS - Browser Demo

#13

Beitrag von macfan » So 16. Jul 2017, 11:56

Cool! :respekt:

Gruß, Horst

Benutzeravatar
omue
Topfversteher
Topfversteher
Beiträge: 436
Registriert: Sa 10. Dez 2005, 18:44
Receivertyp: SRP 2401 CI+ ECO / SRP 2401 CI+

AW: PhantomJS.TMS - Browser Demo

#14

Beitrag von omue » So 16. Jul 2017, 11:58

Das wäre voll Geil !
SRP 2401 CI+ ECO / SRP 2401 CI+
68,28,23,19,16,16KA,13,10,9,7,5,3 OST
24,5,4,1 WEST 16 OST KA Band

Benutzeravatar
omue
Topfversteher
Topfversteher
Beiträge: 436
Registriert: Sa 10. Dez 2005, 18:44
Receivertyp: SRP 2401 CI+ ECO / SRP 2401 CI+

AW: PhantomJS.TMS - Browser Demo

#15

Beitrag von omue » So 16. Jul 2017, 13:33

jkIT

Das ist das genialste was ich aif dem Topf erlebt habe !

:D :D :D :D :D
<li><a href="http://hbbtv.zdf.de/zdfstart/index.php">HbbTV ZDF Startpage (geht nicht)</a></li>
:D :D :D :D :D

die Unterseite Wetter geht, nur die Steuerung geht natürlich nicht ;)
http://hbbtv.zdf.de/zdfnews/index.php?weather=1
Zuletzt geändert von omue am So 16. Jul 2017, 13:35, insgesamt 1-mal geändert.
SRP 2401 CI+ ECO / SRP 2401 CI+
68,28,23,19,16,16KA,13,10,9,7,5,3 OST
24,5,4,1 WEST 16 OST KA Band

Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

AW: PhantomJS.TMS - Browser Demo

#16

Beitrag von jkIT » So 16. Jul 2017, 14:05

Das Problem ist, dass HbbTV normalerweise mit dem ContentType "application/vnd.hbbtv.xhtml+xml" ausgeliefert wird, welchen ein normaler Browser nicht rendert. Die HbbTV Apps erwarten auch zwei Plugins, die im HbbTF Projekt per JavaScript so gut es geht emuliert werden. Um den ContentType zu umgehen wird dort die Seite nicht direkt, sondern über einen XMLHttpRequest abgerufen. Letzteres hoffe ich in PhantomJS.TMS noch lösen zu können.
ZDF-Wetter hat evtl. einen "PC-Browser Fallback" eingebaut.
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
Homer
ToppiHolic gefährdet
ToppiHolic gefährdet
Beiträge: 9743
Registriert: Sa 11. Mär 2006, 12:08
Receivertyp: TF5200PVRc (seit 25. März 2006) CRP-2401CI+ (seit 26. Mai 2011) Uno 4K
Receiverfirmware: Dec 06 2006,
Mar 9 2011
Wohnort: 669..
Kontaktdaten:

AW: PhantomJS.TMS - Browser Demo

#17

Beitrag von Homer » So 16. Jul 2017, 14:30

jkIT hat geschrieben:ZDF-Wetter hat evtl. einen "PC-Browser Fallback" eingebaut.
Vermutlich ja, denn auf dem PC zeigt mein Browser http://hbbtv.zdf.de/zdfnews/index.php?weather=1 an. http://hbbtv.zdf.de/zdfnews/index.php funktioniert auf dem PC nicht, http://hbbtv.zdf.de/zdfnews/index.php?id= funktioniert.

Viele Grüße
Homer
rettet-das-freetv.de Project Euler 2401 Urban Priol ist ein smarter Androide und kann keine TAPs.

TF5200PVRc (HA250JC)
TAPs: BootMenu - UsbAccelerator - [thread=49960]acaderc_5k[/thread] - RemoteSwitch - Automove V1.9 final [90] (18.04.2008) - TF5000Display - 3PG - IdleHDD

CRP-2401CI+ (ST3500312CS,MZ-75E500B)
TAPs: XStartTap_TMS - AutoReboot - RemoteSwitch_TMS - RescueRecs - SmartEPG_TMS - RebuildNAV - Automove V2.0 beta 13 (24.05.2011) - StartFTPd - TMSRemote - NiceDisplay

KabelBW Unitymedia (free to air)

Benutzeravatar
buko
Mr. Settings
Mr. Settings
Beiträge: 12265
Registriert: Fr 9. Dez 2005, 09:03
Receivertyp: auch andere Receiver!
Nokia 8010
VU+ Duo 4K SE
Wohnort: Bayern & Tirol

AW: PhantomJS.TMS - Browser Demo

#18

Beitrag von buko » Di 18. Jul 2017, 08:50

... Super, weiter so ... :up:
gruß
buko
:altermotzsack:



Topfield Settings bearbeiten, verwalten und vieles mehr:
mit :->: SetEdit für fast alle Topfield & VU+ Receiver :up:

Benutzeravatar
jkIT
TFtool-Guru
TFtool-Guru
Beiträge: 3225
Registriert: Sa 10. Dez 2005, 18:26
Receivertyp: TF4000 & TF5000MP & SRP-2410

AW: PhantomJS.TMS - Browser Demo

#19

Beitrag von jkIT » Fr 28. Jul 2017, 14:38

Kleines Update:

* die Demo kann jetzt fortlaufend rendern, dabei wird nur der Bereich erneuert, den der WebKit als "dirty" meldet. Zur Demonstration habe ich auf der Startseite eine Uhr eingebaut.

Dabei tauchte ein neues Problem auf: der Linux Prozess phantomjs.tms kennt die aktuelle Uhrzeit nicht, da die System Uhr bei jedem Receiver Start am 1.1.2000 starten. Leider ist es nicht ratsam die Systemuhr auf die aktuelle Zeit zu setzen :evil:
Daher:

* das TAP sendet nun die aktuelle Zeit ans Steuerscript, welches dann das JavaScript Date Objekt der geladenen Website entsprechend manipuliert.

* der "Content-Type" für HbbTV wird nun von PhantomJS als HTML gerendert.
Gruß jkIT

CRP-2401; SRP-2410 (aD); TF5000MP (aD); TF4000PVR (aD); TFtool, aTMSremote (Autor)

Benutzeravatar
omue
Topfversteher
Topfversteher
Beiträge: 436
Registriert: Sa 10. Dez 2005, 18:44
Receivertyp: SRP 2401 CI+ ECO / SRP 2401 CI+

AW: PhantomJS.TMS - Browser Demo

#20

Beitrag von omue » Fr 28. Jul 2017, 14:54

jkIT hat geschrieben:Kleines Update:
* der "Content-Type" für HbbTV wird nun von PhantomJS als HTML gerendert.


gerade mal ein paar HBBTV ZDF Seiten aufgerufen > klappt !

Super, es geht voran :D
SRP 2401 CI+ ECO / SRP 2401 CI+
68,28,23,19,16,16KA,13,10,9,7,5,3 OST
24,5,4,1 WEST 16 OST KA Band

Antworten

Zurück zu „SRP/CRP TAP-Bereich“