• Please review our updated Terms and Rules here

Viewing HTML on a S-100 machine with pictures.

F

furball1985

Experienced Member
Joined
Jul 14, 2022
Messages
128
IMG_0553.jpg


This is a little project i have been working on.

about 1.5 years ago i started to play around with the FABGL ANSI Terminal.
github.com

GitHub - fdivitto/FabGL: ESP32 Display Controller (VGA, PAL/NTSC Color Composite, SSD1306, ST7789, ILI9341), PS/2 Mouse and Keyboard Controller, Graphics Library, Sound Engine, Game Engine and ANSI/VT Terminal

ESP32 Display Controller (VGA, PAL/NTSC Color Composite, SSD1306, ST7789, ILI9341), PS/2 Mouse and Keyboard Controller, Graphics Library, Sound Engine, Game Engine and ANSI/VT Terminal - fdivitto/F...
github.com github.com

its a very capable Terminal that supports graphics via escape codes.

i started to play around with the code from eightbitwide
github.com

GitHub - eightbitswide/ppmview: A Portable Pix Map viewer for CPM MBASIC using FabGL serial terminal.

A Portable Pix Map viewer for CPM MBASIC using FabGL serial terminal. - eightbitswide/ppmview
github.com github.com

as he made a simple PPM Viewer for the ansi terminal that ran in basic.


i expanded the idea and added Dithering and even printing functions for a okidata dot matrix printer.
DSCN5645.jpg

DSCN5647.jpg


i knew it would be possible to expand this further.

just this week i had time to sit down and play around with Text based browsers.

Links, links2, and Elinks.

these browsers allow you to redirect a file based on the type of file it is.
do to bugs and other issues i eventually decided to remap BMP pictures to an executable file
containing:

#!/bin/bash
echo "$(<$1)"

originally i used CAT but that seemed to cause problems so i switched to the echo command.

i've been slowly making fixes for the Elinks browser in the configuration file to make things work better.

all 3 browsers have a really nasty bug if you try to use the bookmarks function.

in order to try this out.

github.com

johngalt01.github.io/README.TXT at main · johngalt01/johngalt01.github.io

Contribute to johngalt01/johngalt01.github.io development by creating an account on GitHub.
github.com github.com

you will need a unix/linux machine to connect to i use a raspberry pi

setup the elinks browser and make sure its working for you.

next on your S-100 machine you will need a modem that can connect to IP

you will most importantly need a FABGL VGA32 ANSI Terminal as your main terminal.

connect from your S-100 machine to your raspberry pi(you can make a special user account if you wish.) you will need to make some changes to your shell i outlined it in the readme.txt file

using the configuration information in my README.TXT file from this

github.com

GitHub - johngalt01/johngalt01.github.io

Contribute to johngalt01/johngalt01.github.io development by creating an account on GitHub.
github.com github.com

you can setup your elinks.config file.

i have formatted everything to use the BMP image type as a remap to Serial Escape coded image files.
(you can also use ANSI animation files but they can cause issues and crash the terminal)

so your connecting via your wifi modem from your S-100 machine to a raspberry pie via telnet(tcp causes issues) you then start the elinks browser

and if you go here https://johngalt01.github.io/

you will see a demo website of AdwaterandStir.com
if you view this in a modern browser you will see a page that looks a little funny(i am improving on things as i have time)
if you view this on your S-100 machine you will see the website with a blank area at the top.
this is the area for the pictures to display at the bottom of the web page are links for the images when you load them the asci escape code will fill in the area at the top of the screen with photos.
each link has a time based on 9600baud rates.

many new website ideas are possible with this new method of allowing images in a text based browser.

the reason the blank area is at the top of the screen is to get around the ELinks browser dialog boxes which will overwrite a loaded image.

there is enough room for many images loaded at the top or you can have a large image in the center of the screen.

again its back to the 1990s early 2000s for web design but it works REALLY well with off the shelf programs.

i plan to add some more website demos.

well i hope you found this interesting and a new toy to play with.

playing music is possible as the ANSI Terminal supports it also animation is possible however it will be very very slow at 9600 your animation files have to be under 1K per frame, this is possible using he escape code primitives'
but we need to make a ansi terminal drawing program to make it easier to happen.

i have included 1 interlaced image demo on the main web page many effects are possible.



just a warning again do not use the bookmarks function in these browsers and they are quite buggy.

i created a local HTML file called bookmarks, so when i start elinks i can type bookmarks and go right to my bookmarks list avoiding the browser bookmarks.
 
Last edited:
just to add... I'm making more changes to the elinks.conf file as i do i will update the readme.
you can also download the escape code files (they are not BMP files)
you can then try them out on their own. in CPM you can just "TYPE XXX.BMP" and it will start to draw on your screen or you can use CAT on your unix machine same idea it will just pipe the characters to your terminal display.
this is very much like
but now with 64 color bitmaps.


its also possible to use the Sprite function the FABGL terminal provides. you can then have animation or floating images that will not get over written, but there is not too much ram available and you want to keep them small.

you can see sprite demos in the fabgl demos directory.
github.com

FabGL/Extras/Terminal BASIC Programs at master · fdivitto/FabGL

ESP32 Display Controller (VGA, PAL/NTSC Color Composite, SSD1306, ST7789, ILI9341), PS/2 Mouse and Keyboard Controller, Graphics Library, Sound Engine, Game Engine and ANSI/VT Terminal - fdivitto/F...
github.com github.com
 
Last edited:
I think it's very impressive also... We need browsers for CP/M :) But then we also need a TCP/IP stack and a network interface, and expanded memory and a few other things to make it work.

But even showing modern photo images on screen and mixing some HTML is very impressive even if you just started with files transferred from a net connected machine,
 
That Girl with the Pearl Earing, coming out of an S-100 computer is so impressive, I really don't know what to say, Bravo is appropriate. I love it (crazy about it honestly)

But I can say, if you can do this in even monochrome or color, can you explain to me, in detail, what custom S-100 board I could make, or what hookup I could use, for my SOL-20 computer to generate this image from HTML ? The only way I have got images out of my SOL (using S-100 video cards) so far, was to use a Matrox video card like the ALT256 or ALT 512 that could produce a graphic image out of the composite video output connectors on those cards.
 
Hi,

It's the ESP32 terminal emulator doing all the work. The image is just a file dump from any computer to the FabGL emulator ... I use the really cheap TTGO modules:
https://www.lilygo.cc/products/fabgl-vga32

and use these little RS-232 to TTL adapters: https://www.ebay.com/itm/292602822407

I even made a 3D printable box for the little devices that gives you full access to all the ports ... https://pinshape.com/items/115750-3d-printed-lilygo-ttgo-vga32-v14-controller-ps2-case

Once the Arduino software is installed, the TTGO emulates all sorts of terminals, Altair 8800, VIC 20 etc.


.
 
Hugo Holden said:
That Girl with the Pearl Earing, coming out of an S-100 computer is so impressive, I really don't know what to say, Bravo is appropriate. I love it (crazy about it honestly)

But I can say, if you can do this in even monochrome or color, can you explain to me, in detail, what custom S-100 board I could make, or what hookup I could use, for my SOL-20 computer to generate this image from HTML ? The only way I have got images out of my SOL (using S-100 video cards) so far, was to use a Matrox video card like the ALT256 or ALT 512 that could produce a graphic image out of the composite video output connectors on those cards.
Click to expand...

I don't fully understand your question, and I'm aware you've previously displayed graphics images via the Matrox cards ( Up Periscope title screen IIRC? ) so I may not be answering it correctly.

From what he was saying, he was using a terminal based on the ESP32 - ie, a modern computer on a chip/PCB solution to drive a modern display as a terminal, and sending it a graphics langauge - It's a relatively powerful system, and I think he's just connected to it via a serial interface or similar, so it's not really S100 per se that I could tell, but was a S100 machine talking to a terminal that is producing the graphics, which appear to be coming from an ASCII file that is simply a matrix of display values that gets sent to the terminal as a kind of raster... Though the space invaders game playing via the card is impressive and suggests it supports things like moving characters and blocks of characters around via terminal commands. A serial-stream graphics language so to speak. Or maybe it's a parallel stream via the S100 - I'm not sure on that.

But it's a display and display technology that I don't think has been around for very long - ie, it wasn't possible in the 70s or 80s. It's more like VGA with an ESP32 driving it and an interface back to the z80 system.

I've been building video cards lately that reproduce what the Matrox could do and connecting them to microcontrollers. They use around 7 ICs in total, all from 1985 era onwards. All either PAL/GAL chips or 64k x 1 RAM chips at 70ns that would do similar to the graphics controller in this post (well, 6 chips gets Matrox style graphics... more RAM is needed for more color) , but is just a normal I/O mapped video card so a CP/M system could run it via S100. However I'll eventually put that onto a z80/ISA bus since that's where my current project is taking me. Hence why I appreciated your Matrox information since I might end up looking to make a matrox compatible version of the card in S100 since I've basically stumbled upon the same formula Matrox used - just less chips and a higher interface speed.

But I think the OP took this a lot further, and wrote some code to use a donor system as a comms system to pull down HTML and images, convert them to the graphics format that the code for the Portable Pixel Map, and then wrote the extra code to display images and text correctly and translate HTML into usable output, albeit on a simple level, which is still really really cool.

I learnt a lot reading this post. I didn't even know there was a PPM Format for graphics. It uses Text as the media layer... And was invented in 1980 as a format for conveying graphics ( Bitmap, Grey or Color ) in ASCII so that it could move over data systems such as email without losing any information... Think of a text conveyance of numbers... Like a very primitive UUENCODING formating, except unline UUENCODE, it's human readable and conveys numerical information mostly.

Eg, a 4x4 color bitmap is conveyed in this document;


Which gives the following code, as 4x4 pixels, 4 bits of depth per pixel ( 0-15) per color.

P3
# feep.ppm
4 4
15
0 0 0 0 0 0 0 0 0 15 0 15
0 0 0 0 15 7 0 0 0 0 0 0
0 0 0 0 0 0 0 15 7 0 0 0
15 0 15 0 0 0 0 0 0 0 0 0
 
Actaully if somebody with more time then i have wants to make a python script that opens a JPG and outputs each pixel from the jpeg into a loop that just prints the terminal escape codes plotting each pixel then it can link right into the text browser run the code when it sees a JPG file it will just output to the terminal and fill in the picture without any extra processing. you would need some control over where on the screen you display it. but it would all be handled on the faster server side.

i started to look into a python script instead of using echo or cat because then it will convert on the fly from any websites.
 
Thanks @wperko and @cj7hawk explaining how it works.

One project I plan to do is to make an S-100 card that is a video frame capture card. I have designed one before independent of a computer, but I think it could be fun to have a card for an S-100 machine that did this. There was also one designed for an ISA bus that was published in Radio & Electronics. It captured one field of a monochrome image. It could all fit on one card.
 
Hugo Holden said:
Thanks @wperko and @cj7hawk explaining how it works.

One project I plan to do is to make an S-100 card that is a video frame capture card. I have designed one before independent of a computer, but I think it could be fun to have a card for an S-100 machine that did this. There was also one designed for an ISA bus that was published in Radio & Electronics. It captured one field of a monochrome image. It could all fit on one card.
Click to expand...

Hi,

Sounds like an interesting project.


.
 
ok so i'm a python noob.

i wrote this


------
from PIL import Image
import sys
arg1 = sys.argv[1]
esc=chr(27)

text = arg1
FILENAME=text #image can be in gif jpeg or png format
im=Image.open(FILENAME).convert('RGB')
pix=im.load()
w=im.size[0]
h=im.size[1]
for i in range(w):
for j in range(h):
# print pix[i,j][0]
# OUTPUT TO FABGL TERMINAL IN COLOR
print(esc+"[H")

print (esc+"_GPEN"+str(pix[i,j][0])+";"+str(pix[i,j][1])+";"+str(pix[i,j][2]))

print (esc+"_GPIXEL"+str(i)+";"+str(j))


it works its converting JPG into serial escape codes which are displaying on my altair fabgl terminal.

i'm going to keep tweaking things and then try to run it from inside elinks.
 
its working MUHAHAHAHAHAHAHAAHAH

i tweaked it to this: its called "jpgtofabgl"

it takes a jpg and converts it for you. its dangerous at the moment because it will take a monster file and convert it which can be hours.


from PIL import Image
import sys
arg1 = sys.argv[1]
esc=chr(27)

text = arg1
FILENAME=text #image can be in gif jpeg or png format
im=Image.open(FILENAME).convert('RGB')
pix=im.load()
w=im.size[0]
h=im.size[1]
for i in range(w):
for j in range(h):
# print pix[i,j][0]
# OUTPUT TO FABGL TERMINAL IN COLOR
print(esc+"[H")

print (esc+"_GPEN"+str(pix[i,j][0])+";"+str(pix[i,j][1])+";"+str(pix[i,j][2]))

print (esc+"_GPIXEL"+str(i+(256-(w/2)))+";"+str(j+40))


print (esc+"_F0;15")
print (esc+"_GPEN255;255;255")


also i have no way of knowing where the jpg should go from the html so i centered it in the safe area of elinks.
that means you can only display one jpg at a time in the center of the top screen area.
it still honors the raw ansi "BMP" pictures which can be coded with position information.
i could make the python script take more command line arguments and you could manually enter a position but it removes the automation from elinks as you would
have to pause at a dialog box to fill it out.

i'm pretty happy with myself, i know python barely.
 
Last edited:
conversion is a little different, might be the compression loss

center image is loaded from the website JPG.
right image is loaded from the website BMP (raw escape code)
DSCN5968.JPG
 
wow i went to https://frogfind.com/

i just clicked the image link for the frog 'gif' in elinks and it took it and processed it. i can tweak the python code more to make 'black' color transparent and load gifs much faster.

have to code in a image size limit because you could be stuck for hours outputting a image that will not fit on the terminal screen.

it took a few minutes for the frog to finish.

this is awesome.
DSCN5973.JPG
 
added some safeties:

check if the image is smaller then 500 and 350, and i made black transparent as it will load images faster if there is a mask or its dark. more tweaking as i go

from PIL import Image
import sys
arg1 = sys.argv[1]
esc=chr(27)

text = arg1
FILENAME=text #image can be in gif jpeg or png format
im=Image.open(FILENAME).convert('RGB')
pix=im.load()
w=im.size[0]
h=im.size[1]

if w<500 and h<350:
for i in range(w):
for j in range(h):
# print pix[i,j][0]
# OUTPUT TO FABGL TERMINAL IN COLOR
if pix[i,j][0]<>0 and pix[i,j][1]<>0 and pix[i,j][2]<>0:
print(esc+"[H")
print (esc+"_GPEN"+str(pix[i,j][0])+";"+str(pix[i,j][1])+";"+str(pix[i,j][2]))
print (esc+"_GPIXEL"+str(i+(256-(w/2)))+";"+str(j+40))

print (esc+"_F0;15")
print (esc+"_GPEN255;255;255")

the forum is also messing up the spaces in the code.


well i'm done for the night. i'll have to think about what i want to do.

i can code in a dithering option i need some more testing with small files.

i've been hitting old websites from the 1990s and trying things out.

this works better then i could have imagined when i was just playing around last weekend.
 
Last edited:
wperko said:
Hi,

Sounds like an interesting project.


.
Click to expand...
The freeze frame machine I deigned and built required an interesting memory controller circuit. I wanted it to work for color video (still it all fit on a card about the same size as an S-100) For a PAL color frame you need to store 8 fields because of the unique burst phase on the 8 fields, 4 fields for color NTSC and 2 fields for monochrome. The design was simplified quite a lot by the use of the AL422B field store IC, a single one can store a whole field with space to spare.


A 4 field NTSC Color version could be done with just four AL422B's and a less complex memory controller. Some effects could be built onto it with software control from the S-100 bus to initiate image capture, and effects like negative picture and/or other effects.
 
You must log in or register to reply here.
Back
Top