Demo: Textbasiertes Web-Browsing für Sidekick64 ("SKTP-Browser")

emulaThor · Oct 29th 2021

Hallo,

ich arbeite ja an Netzwerk-Features für Frenetic s Sidekick64 in einem geforkten Git-Repo. Im Laufe der Zeit sind so mehrere Demo-Features entstanden (Modem-Emulation, Web-Interface, NTP-Zeit, SKTP-Browser). Eine Dokumentation zu diesen Features (in englischer Sprache) habe ich hier begonnen, die ist hier zu finden.

Für den sogenannten "SKTP-Browser" (SKTP = Sidekick Transfer Protocol ) habe ich nun auch einen Demo-Client in Javascript geschrieben, damit man den Browser mal im Browser ausprobieren kann, auch wenn man kein Sidekick hat. Die Seiten sehen dann am Original-C64 "genauso" aus. Der SKTP-Browser holt sich Content vom SKTP-Server, den ich in PHP geschrieben habe.

Beispiel-Apps im SKTP-Browser sind derzeit der CSDb-Launcher, ein Forum64-RSS-Reader und ein einfacher Chat. Man kann also nicht beliebig im WWW surfen, aber man kann in der CSDb herumschmökern und dort Binaries downloaden. Der Download funktioniert sowohl am Sidekick64 (Download, Save2SD-Card und Launch) als auch im Javascript-Client.

Es sind noch einige Bugs im Javascript-Client enthalten, zum Beispiel kann man auf Touchgeräten momentan keine Tastaturbedienung machen. Auf Touchgeräten funktioniert also diese Demo noch nicht. Mit einem klassischen Tastaturrechner sollte es aber mit aktuellem Chrome und Firefox funktionieren.

Die Subdomain habe ich erst vor ein paar Minuten angelegt, es kann also sein, dass nicht jeder DNS-Server die schon kennt. Wenn der Browser bockt, einfach in einer Stunde nochmal probieren.

>Demo<

Viel Spaß

emulaThor

EDIT: Was ich vergaß: Der Browser funktioniert prinzipiell auch mit Sidekick264 auf C16 und Plus/4!

Retrofan · Oct 29th 2021

Funktioniert (auch in einem älteren Safari)!

emulaThor · Oct 30th 2021

Habe ein paar Bugs gefixt und das ganze nun auch etwas freundlicher für Touch-Devices gemacht.

Screenshot_20211030_123618.jpg

JPK64 · Oct 30th 2021

Geiles Teil

Lässt sich das Fenster noch ein wenig skalieren? So x2, x3 fach? Der Javascript-Client ist im Browser doch sehr klein.

Ansonsten läuft es auf dem Brave-Browser wunderbar.

emulaThor · Oct 30th 2021

Danke!

Quote from JPK64

Lässt sich das Fenster noch ein wenig skalieren?

Ja, habe eben nochmal rumgeschraubt. Im Browser nochmal Reload machen per Mausklick (die Reload-Taste F5 ist gebunden an die App und hat keinen Effekt auf Reload mehr).

Habe auch nochmal ein bisschen für Smartphone optimiert:

Screenshot_20211030_161209.jpg

emulaThor · Oct 30th 2021

Und nun ist mir die Website noch in den Farbtopf gefallen...

Screenshot_20211030_233509.jpg

emulaThor · Nov 1st 2021

Was gibt es Neues?

Neu implementiert ist der automatische Screen-Refresh, der das Bild regelmäßig aktualisiert. Dieses Feature wird angewendet in zwei Demos:
Zum einen im Forum64-RSS-Reader --> ScrollView

pasted-from-clipboard.png

Zum anderen im Chat. Damit wird der Chat etwas mehr zu einem... Chat. Siehe Video, wo ich an drei Screens (C128, C64, PC) mit mir selbst chatte.

Damit man im Video die Schrift lesen kann von Anfang an, am besten bei youtube für dieses Video direkt 1080p einstellen (nicht "Automatisch"). Sonst ist es am Anfang unscharf.

[External Media: https://youtu.be/i4UFEqvLy8Q]

emulaThor · Nov 5th 2021

Was gibt es Neues? Ein paar Bugfixes für die Tastatureingabe im Chat am realen Netzwerk-Sidekick64 und eine Petscii-Übersicht, die einfach nur schnell zeigen soll, ob der Javascript-Client und auch der Sidekick-Client beide alle Petscii-Zeichen korrekt anzeigen (ich hatte Flüchtigkeitsfehler drin beim Mappen von Ascii zu Petscii und beim Mappen des Truetype-Fonts im Browser).

pasted-from-clipboard.png

In dem Screen gibt es sogar ein kleines Easter-Egg versteckt. Mal sehen, ob es jemand findet.

emulaThor · Nov 15th 2021

Die im Vor-Posting abgebildete Version hat natürlich mehrere dicke Fehler drin und keiner hat's gemerkt oder keiner hat's mir sagen wollen.

So muss es aussehen (habe ich nun gefixt lokal, ist aber noch nicht verfügbar): Hoffentlich sind da nun keine Fehler mehr drin.

pasted-from-clipboard.png

emulaThor · Nov 16th 2021

Es wird ein wenig zur Obsession...

Nun sind untereinander Zeilen, die entweder per Ascii2Petscii oder ScreencodeDirect ausgedruckt werden. Sinn ist halt, dass immer die gleichen Zeichen untereinander erscheinen.

Und eine Methode zum Zeichnen von Boxen habe ich noch improvisiert...

IMG_20211116_224344.jpg

Screenshot_20211116_225412.jpg

IMG_20211116_224412.jpg

emulaThor · Nov 19th 2021

Und weiter geht es:

Ich habe im Javascript-Client die Farben auf die Pepto-Palette umgestellt.
Dann habe ich meinen Code solange geprügelt, bis er mir fehlerfrei Petscii-Art anzeigen kann, die aus Beispiel-PRGs ausgelesen wird.
Dann habe ich eingebaut, dass dynamisch QR-Codes generiert werden können mit beliebigem Inhalt. Sinnvoll für superlange URLs, bei denen es keinen Sinn macht, sie am C64 aufrufen zu wollen. Der C64 zeigt dann einen QR-Code an und man kann auf dem Smartphone weitersurfen.

[External Media: https://youtu.be/tJnrl7dQO-I]

IMG_20211119_003635.jpg

emulaThor · Nov 19th 2021

Ein QR-Code kann wachsen und schrumpfen, und das in zweierlei Hinsicht:

Wenn der darin gespeicherte String (meist URL) länger wird, dann braucht der QR-Code mehr Raum. Man kann also nicht davon ausgehen, dass ein QR-Code immer den gleichen Platz auf dem Bildschirm einnimmt. Im ersten Screenshot ist zum Beispiel "http://localhost" eincodiert in den QR-Code. Das ist relativ kurz.
Es erscheint deshalb ziemlich sinnvoll und auch hübscher, die "Bits" des QR-Codes nicht als klobige Chars zu zeichnen, sondern pro Char vier Bits unterzubringen, also "Mini-Blöcke" zu nehmen. Das sieht man im Größenvergleich auf dem Screenshot. Links kleine Blöcke (4 "Bits" pro Char) und rechts große Blöcke (1 "Bit" pro Char).

pasted-from-clipboard.png

Hier habe ich mal in den CSDb-Launcher die kompaktere QR-Code-Version reingehackt, mit der man dann in die CSDb kommt zu dem betreffenden Release. Die URL ist ein wenig länger und man sieht sofort, dass der QR-Code mehr Platz braucht:

pasted-from-clipboard.png

emulaThor · Nov 28th 2021

Momentan läuft gerade auf der Syntax 2021 (dieses Wochenende) eine Mixed Graphics Competition. Mit dabei sind auch einige schöne PETSCII-Grafiken. Eine kleine Auswahl:

pasted-from-clipboard.png pasted-from-clipboard.png

Deshalb habe ich im SKTP-Browser ein kleines Feature reingehackt, so dass man sich im CSDb-Launcher nun Petscii-Grafik-Releases direkt anzeigen lassen kann, das bedeutet, es wird versucht, die Grafikdaten aus dem PRG herauszuschälen und anzuzeigen, ohne dass der Browser verlassen wird. Dies klappt nur bei PRGs in einem bestimmten Format (und in solchen PRGs steckt neben der Grafik auch keine Musik oder so mehr zusätzlich drin. Es wird also nichts verstümmelt.).

Dies funktioniert im Javascript-Client genau so wie auf echter Hardware mit Sidekick64 und Netzwerk-Kernel. Auf echter Hardware hat man aber natürlich wie immer die Möglichkeit, das PRG direkt aus der CSDb zu launchen und Sidekick64 startet dann das PRG nach dem Download. Der Download&Launch erfolgt mit RETURN, das Direkt-Anzeigen der Petscii-Grafik erfolgt dagegen mit D.

Voraussetzung: Das Grafik-Release muss vom Typ "C64 Graphics (PETSCII)" sein, in der Downloadliste muss ein PRG ausgewählt sein (falls mehrere Downloads existieren) und das PRG muss in einem bestimmten, verbreiteten Format sein.

pasted-from-clipboard.png pasted-from-clipboard.png

Viel Spaß!

emulaThor · Nov 30th 2021

Bin ich etwa zu spät dran mit dem Adventskalender-Kauf? Vielleicht kann ich die Situation noch retten...

pasted-from-clipboard.png

Falls jemand Interesse hat. Folgender PHP-Code generiert diesen (zumindest derzeit) hässlichsten aller PETSCII-Adventskalender:

PHP

<?php
class adventcalendar extends sktpBaseScreen{
private $controller;
function __construct( $controller ){
parent::__construct( false );
$this->controller = $controller;
}
public function renderCompleteScreen(){
$this->enforceClearScreen();
$this->addColorCharsetChunk(
11, //border color
12, //background color
true //lower case charset / upper case charset
);
$this->addNormalChunkXY( "Advent Calendar", 13, 1, "1");
$this->addNormalChunkXY( "[F5]Back [F7]Sidekick menu", 7, 23, "1");
$days = range(1,24);
for ($y = 0; $y <3; $y++){
for ($x = 0; $x <8; $x++){
$c = count($days);
$n = 0;
while ($n === 0){
$r = random_int(0,$c-1);
$n = $days[$r];
}
$days[$r] =0;
$this->drawBox($x*5, 3+$y*6, 5, 6 );
$this->addNormalChunkXY( $n, $x*5+2, 3+$y*6+2, "1");
}
}
print $this->getCurrentScreen();
}
public function updateScreen(){
$this->enforceScreenUpdate();
//in here, only update those parts that need to be updated
print $this->getCurrentScreen();
}
public function handleKeypress($key, $enforceClear){
$pageChange = false;
$decKey = hexdec($key);
switch ($key) {
case self::PETSCII_KEY["space"]:
$this->renderCompleteScreen();
break;
case self::PETSCII_KEY["arrow_left"]:
case self::PETSCII_KEY["F5"]:
$this->controller->setStartScreen();
return true; //screen has changed
default:
$this->updateScreen();
}
return $pageChange;
}
}
?>

Display More

emulaThor · Dec 1st 2021

Update: 1) Genutzte Farben verschlimmbessert. 2) Joystick-Navigation und CRSR-Tasten-Navigation eingebaut. Man kann aber noch keine Türen öffnen.

Man findet den Kalender unter "Petscii Experiments", wenn man dort die Taste "A" drückt.

Erste Praxistests:

[External Media: https://youtu.be/DMuvNPPiU1Y]

emulaThor · Dec 2nd 2021

Update: Leichtere Erreichbarkeit des Adventskalenders im Menü.

IMG_20211202_101343.jpg

IMG_20211202_101351~3.jpg

IMG_20211202_101359~2.jpg

TurboMicha · Dec 2nd 2021

Geile Sache...

weil es trotzdem irgendwie "unter geht"...

jeder kann einfach mal den LINK drücken und gucken (spielen) https://sktpdemo.cafeobskur.de

und was man da sieht... so sieht es dann auf dem eigenem C64 aus !!

und auch der "Download" von .d64 (hier beim Test auf dem PC) erfolgt dann auf dem C64...
MEGA!

Sierohpätsch · Dec 2nd 2021

Quote from TurboMicha

MEGA!

Ja, finde ich auch. Bin eigentlich über das WIC64 erst hier drauf aufmerksam geworden, das ist schon klasse was emulaThor hier umgesetzt hat.

Wenn sich daraus noch eine "Symbiose" beider ergeben könnte,das hätte was!!

SkulleateR · Dec 3rd 2021

Ich möchte hier auch nochmal DANKE an emulaThor sagen ... einen CSDb Browser auf dem CeVi zu haben ich schon superklasse und der Adventskalender ist super, hier im HomeOffice geht gleich morgens der C64 an um zu gucken was hinter dem Türchen ist

emulaThor · Dec 3rd 2021

TurboMicha, Sierohpätsch, SkulleateR: Freut mich, dass es Euch gefällt!

Kleiner Spoiler zum Türchen #1 im Adventskalender:

Display Spoiler