PhantomJS.TMS - Browser Demo
Verfasst: 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) 
.
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
:
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/ )Viel Spass beim testen 
.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
: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
