Published June 3, 2021 © GPL3+

Computerbildschirm als Calliope mini-Display

Verwende mit dieser Erweiterung für MakeCode den Computerbildschirm als externes Display für den Calliope mini!

IntermediateFull instructions provided30 minutes330

Computerbildschirm als Calliope mini-Display

Things used in this project

Hardware components

Calliope mini

Story

Es ist schon cool, was man alles aus 5x5 Pixeln zaubern kann, aber für manche Sachen braucht man doch eine größere Auflösung. Und wenn der Calliope beim Programmieren eh schon am PC hängt, warum nicht dessen Bildschirm nutzen?

So genannte Terminals wie das DEC VT100 dienten früher zur Ein-/Ausgabe an Großrechnern, die selbst ja einfach nur eine Art Kleiderschrank waren, der rechnen kann. Daran waren diese Terminals angeschlossen, über die man erst ein Programm eintippen und sich das Ergebnis anzeigen lassen konnte.

https://en.wikipedia.org/wiki/File:DEC_VT100_terminal.jpg

Heute gibt es PC-Programme, die so ein Terminal nachbilden und mit denen man sich per Internet immer noch von zu Hause aus auf entfernten Rechnern, z. B. von Universitäten, einloggen kann. Wir tun einfach so, als sei der Calliope ein Großrechner und bauen per USB-Kabel vom Terminal-Programm auf unserem PC aus eine Verbindung zu ihm auf :-)

Der Calliope schickt dann bestimmte Kommandos an das Terminal-Programm, z. B. "gehe zu Position x/y", "wähle Vordergrundfarbe", "schreibe Zeichen", "lösche Bildschirm" etc. Diese Kommandos nennen sich ANSI-Escape-Sequenzen und haben eine Syntax, für die man gut gefrühstückt haben muss (wie etwa "ESC[2J", um den Bildschirm zu löschen).

Mit MakeCode sieht das alles schon sehr viel freundlicher aus:

Dafür muss man nur die folgende Erweiterung importieren, d. h. ganz einfach nachdem man ein neues Projekt angelegt hat auf das Zahnrad oben rechts klicken, "Erweiterungen" auswählen und dann als Projekt-URL:

https://github.com/kimmeskamp/pxt-vt100

eingeben. Dann erscheint unterhalb von "Grundlagen" zusätzlich ein Bereich mit einem Bildschirmsymbol und dem Namen "VT100":

Und so bekommt der Calliope einen farbigen Textbildschirm :-)

Was man noch braucht, ist ein Terminal-Programm, wie das bewährte und kostenlose "PuTTY":

https://www.putty.org/

Bei den Einstellungen muss man angeben, dass die serielle Schnittstelle genutzt werden soll, und zwar mit einer Geschwindigkeit von 115200 Baud:

Den richtigen "COM-Port" findet man, indem man der Windows-Taskleiste nach "Gerätemanager" sucht, ihn startet, den Calliope einstöpselt und die Bezeichnung abliest, hier z. B. "COM3" (die Nummer kann abweichen, bleibt dann aber i. d. R. gleich, so dass man das nur einmal machen muss):

Wichtig ist schließlich noch, in PuTTY unter "Window" die gewünschte Bildschirmauflösung einzustellen (Zeilen und Spalten):

Und im Unterabschnitt "Translation" als "Remote character set": CP437 (ohne Abbildung).

Dann nur noch auf "Open" klicken und so die Verbindung zwischen Terminal-Programm und Calliope herstellen!

Ursprünglich waren Terminals ja zur Textausgabe gedacht und natürlich kann man auch einfach nur Texte oder Mess-Werte auf den Bildschirm schreiben. Man kann aber auch "malen", d. h. einzelne (zugegebenermaßen grobe) Pixel setzen, indem man an die gewünschte Position geht, eine Hintergrundfarbe auswählt und ein Leerzeichen ausgibt (hat die Nummer 32 im ASCII-Code):

Damit lässt sich beispielsweise so ein Testbild basteln:

(Anhang "testbild.js", benötigte Auflösung in PuTTY: 80x25, darin sind schon fertige Funktionen für das Zeichnen von farbigen Rechtecken, Linien und Ellipsen enthalten, dafür braucht man den sehr cleveren, aber nicht ganz selbsterklärenden Bresenham-Algorithmus)

Für Vorder- und Hintergrund gibt es zwei Möglichkeiten: So, wie im Beispiel oben, eine von 256 vordefinierten Farben wählen (als Zahl oder aus einer Liste von Farben, letzter Block in MakeCode) oder mit einzelnen Werten für Rot, Grün und Blau (jeweils von 0 bis 255) aus vollen 16, 7 Millionen Farben schöpfen:

Damit lassen sich z. B. schöne Farbverläufe erstellen:

(Anhang "colordemo.js", benötigte Auflösung in PuTTY: 80x25)

Mit einem Trick kann man die vertikale Auflösung sogar verdoppeln: Statt des Leerzeichens nimmt man das Zeichen 220, das aus zwei Teilen besteht, wählt Vordergrund- und Hintergrundfarbe für die obere bzw. untere Hälfte und kann, wenn man die beschränkten Mittel bedenkt, ziemlich ansehnlich etwa die berühmten "Apfelmännchen" zeichnen:

(Anhang "apfel2.js", benötigte Auflösung in PuTTY: 130x46)

Die Möglichkeiten sind jetzt ziemlich unbegrenzt, z. B. kann man einfache Spiele realisieren (wer in den 80ern in Turbo-Pascal programmiert hat, wird sich erinnern ;-)) und nun aber den Calliope als "Game-Controller" nutzen (Tasten A+B, Lagesensor etc.)!

Viel Spaß beim Ausprobieren :-)

/**
 * Testbild für Calliope mini
 * Thorsten Kimmeskamp, 03.06.2021
 */
 
function punkt(x: number, y: number) {
    VT100.geheZu(x, y)
    VT100.schreibeZeichen(0x20)
}

function oben(x: number, y: number) {
    VT100.geheZu(x, y)
    VT100.schreibeZeichen(0xDC)
}

function unten(x: number, y: number) {
    VT100.geheZu(x, y)
    VT100.schreibeZeichen(0xDF)
}

function rechteck(f: number, x: number, y: number, w: number, h: number) {
    VT100.waehleHintergrundNr(f)
    for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
            punkt(x+i, y+j)
        }
    }
}

function gradient_horiz(r: number, g: number, b: number, x: number, y: number, w: number, h: number) {
    let stufe_r = Math.floor(r / w)
    let stufe_g = Math.floor(g / w)
    let stufe_b = Math.floor(b / w)

    for (let i = 0; i < w; i++) {
        VT100.waehleHintergrundRGB(r, g, b)
        for (let j = 0; j < h; j++) {
            punkt(x+i, y+j)
        }
        r = r - stufe_r
        g = g - stufe_g
        b = b - stufe_b
    }
}

function ellipse(c: number, mx: number, my: number, a:number, b: number) {
    let a2 = a*a
    let b2 = b*b
    let x = 0
    let y = b
    let e2 = 0
    let err = b2-(2*b-1)*a2

    VT100.waehleHintergrundNr(VT100.farben.hellgrau)
    do {
	    punkt(mx-x, my+y)
	    punkt(mx+x, my+y)
	    punkt(mx+x, my-y)
	    punkt(mx-x, my-y)
	    e2 = 2*err
	    if (e2 < (2*x+1)*b2) {
		    x++
		    err += (2*x+1)*b2
	    }
	    if (e2 > -(2*y+1)*a2) {
		    y--
		    err -= (2*y+1)*a2
	    }
    } while (y >= 0)
}

function linie(c: number, x0: number, y0: number, x1: number, y1: number) {
    let dx =  Math.abs(x1 - x0)
    let sx = x0 < x1 ? 1 : -1
    let dy = -Math.abs(y1 - y0)
    let sy = y0 < y1 ? 1 : -1
    let e2 = 0 
    let err = dx + dy
 
    VT100.waehleHintergrundNr(VT100.farben.hellgrau)
    while(true) {
        punkt(x0, y0);
        if (x0 == x1 && y0 == y1) {
            break
        }
        e2 = 2*err;
        if (e2 > dy) {
            err += dy
            x0 += sx
        }
        if (e2 < dx) {
            err += dx
            y0 += sy
        }
    } 
}

VT100.versteckeCursor()
VT100.waehleHintergrundNr(VT100.farben.dunkelgrau)
VT100.loescheBildschirm()

VT100.waehleHintergrundNr(VT100.farben.hellgrau)
VT100.waehleVordergrundNr(VT100.farben.dunkelgrau)

for (let x = 1; x <= 80; x++) {
    unten(x, 5)
    unten(x, 10)
    oben(x, 16)
    oben(x, 21)
}

linie(VT100.farben.hellgrau, 10, 1, 10, 25)
linie(VT100.farben.hellgrau, 20, 1, 20, 25)
linie(VT100.farben.hellgrau, 30, 1, 30, 25)
linie(VT100.farben.hellgrau, 40, 1, 40, 25)
linie(VT100.farben.hellgrau, 50, 1, 50, 25)
linie(VT100.farben.hellgrau, 60, 1, 60, 25)
linie(VT100.farben.hellgrau, 70, 1, 70, 25)

rechteck(VT100.farben.weiss, 16, 7, 6, 4)
rechteck(VT100.farben.hellgelb, 22, 7, 6, 4)
rechteck(VT100.farben.hellcyan, 28, 7, 6, 4)
rechteck(VT100.farben.hellgruen, 34, 7, 6, 4)
rechteck(VT100.farben.hellmagenta, 40, 7, 6, 4)
rechteck(VT100.farben.rot, 46, 7, 6, 4)
rechteck(VT100.farben.blau, 52, 7, 6, 4)
rechteck(VT100.farben.schwarz, 58, 7, 6, 4)

rechteck(VT100.farben.schwarz, 16, 11, 12, 1)
rechteck(VT100.farben.dunkelgrau, 28, 11, 12, 1)
rechteck(VT100.farben.hellgrau, 40, 11, 12, 1)
rechteck(VT100.farben.weiss, 52, 11, 12, 1)

rechteck(VT100.farben.schwarz, 16, 12, 48, 2)
rechteck(VT100.farben.weiss, 16, 14, 48, 2)

VT100.geheZu(29, 12)
VT100.waehleHintergrundNr(VT100.farben.schwarz)
VT100.waehleVordergrundNr(VT100.farben.weiss)
VT100.schreibeText("Calliope mini VT100-Demo")
VT100.geheZu(25, 13)
VT100.schreibeText("Thorsten Kimmeskamp, 03.06.2021")

VT100.geheZu(19,14)
VT100.waehleHintergrundNr(VT100.farben.weiss)
VT100.waehleVordergrundNr(VT100.farben.schwarz)
for (let n = 0; n < 30; n++) {
    VT100.schreibeZeichen(221)
}
rechteck(208, 49, 14, 15, 1)

gradient_horiz(255, 0, 0, 16, 16, 36, 2)
gradient_horiz(0, 0, 255, 16, 18, 36, 2)

rechteck(236, 52, 16, 12, 4)

ellipse(VT100.farben.hellgrau,40,13,18,11)

/**
 * Colordemo für Calliope mini
 * Thorsten Kimmeskamp, 03.06.2021
 */

let w: number = 80
let h: number = 25
let r: number = 0
let g: number = 0
let b: number = 0

VT100.versteckeCursor()
VT100.waehleHintergrundRGB(0, 0, 0)
VT100.loescheBildschirm()
VT100.waehleVordergrundNr(7)
let s = "True Color = 16,7 Millionen Farben!"
VT100.geheZu(Math.floor((w-s.length)/2)+1, Math.floor(h/2))
VT100.schreibeText(s)
basic.pause(3000)

VT100.loescheBildschirm()
VT100.geheZu(1,1)
for(let y = 0; y < h; y++) {
    for(let x = 0; x < w; x++) {
        r = 255-x*Math.floor(255/w)
        g = 255-y*Math.floor(255/h)
        b = x*Math.floor(255/w)
        VT100.geheZu(x+1, y+1)
        VT100.waehleHintergrundRGB(r, g, b)
        VT100.schreibeText(" ")
    }
}

/**
 * Apfelmännchen für Calliope mini
 * Thorsten Kimmeskamp, 03.06.2021
 */

let re_min = -2.2
let re_max = 1
let im_min = -1.2
let im_max = 1.2
let max_iter = 50
let max_betrag2 = 4

let x_pixels = 130
let y_pixels = 92

let cgacolors = [0, 4, 2, 6, 1, 5, 3, 7, 8, 12, 10, 14, 9, 13, 11, 15]

function paintprogress(p: number) {
    for (let i = 0; i < p/(x_pixels*y_pixels)*25; i++) {
        led.plot(i%5, i/5)
    }
}

function checkIter(c_re: number, c_im: number, max_betrag2: number, max_iter: number) {
    let z_im = 0
    let z_re = 0
    let zq_im = 0
    let zq_re = 0
	let n = 0

    while (n < max_iter) {
		zq_im = 2 * (z_re * z_im)
		zq_re = (z_re * z_re) - (z_im * z_im)
		z_re = zq_re + c_re
		z_im = zq_im + c_im

		if (z_re*z_re + z_im*z_im > max_betrag2) {
			return n
		}
		n++
	}
	return max_iter
}

let counter = 0
basic.clearScreen()

VT100.waehleHintergrundNr(cgacolors[0])
VT100.loescheBildschirm()
VT100.versteckeCursor()

for (let y = 0; y < y_pixels; y+=2) {
	let c_im0 = im_min + (im_max-im_min)*y/y_pixels
	let c_im1 = im_min + (im_max-im_min)*(y+1)/y_pixels
	for (let x = 0; x < x_pixels; x++) {
	    let c_re = re_min + (re_max-re_min)*x/x_pixels
	    let iterationen0 = checkIter(c_re, c_im0, max_betrag2, max_iter)
	    let iterationen1 = checkIter(c_re, c_im1, max_betrag2, max_iter)
	    let farb_wert0 = (iterationen0 < max_iter ? (iterationen0 % 15) +1 : 0)
	    let farb_wert1 = (iterationen1 < max_iter ? (iterationen1 % 15) +1 : 0)
	    VT100.geheZu(x+1, Math.floor(y/2)+1)
		VT100.waehleHintergrundNr(cgacolors[farb_wert0])
		VT100.waehleVordergrundNr(cgacolors[farb_wert1])
        VT100.schreibeZeichen(0xDC)
        counter++
        let progress = (counter/(x_pixels*y_pixels)*25*2)-1
        led.plot(progress%5, progress/5)
    }
}

Credits

Thorsten Kimmeskamp

19 projects • 12 followers

Embed the widget on your own site

Computerbildschirm als Calliope mini-Display

Computerbildschirm als Calliope mini-Display

Things used in this project

Hardware components

Story

Code

testbild.js

colordemo.js

apfel2.js

Credits

Thorsten Kimmeskamp

Comments

Related channels and tags