COOKIES

This site may be using cookies to melk you with your own data. I, ben0bi, am not the owner of this web service and I also do not maintain their servers. But the EU and the owner of this service think, that the user (me) has the responsibility to inform the consumer (you), that this website uses cookies. Again: I, ben0bi, NEVER use cookies. I am not responsible for the setup of this web service. I just present some information here and do not intend to spy on you for whatever reason ever. But (also again), I do not host this website nor do I maintain any servers related to this website nor do I benefit from using the cookies maintained from this service. I hereby give the responsibility for using cookies on blogspot back to the owners of blogspot.

Sonntag, 21. Mai 2017

DIY: Emulator Teil 2: Setup Basisgerüst (JavaScript)

Im vorigen Artikel (Part 1) haben wir uns damit befasst, was ein Emulator ist. Nun kommen wir zum Programmieren selbst.

Wir brauchen für unser Grundgerüst verschiedene JavaScript-Bibliotheken.

  • jQuery -> Vereinfacht viele Dinge.
  • PixiJS -> Die Grafikbibliothek.
  • RUNPIXI -> Diese Bibliothek habe ich geschrieben, um PixiJS ganz einfach zu initialisieren.

Ich werde diese Bibliotheken nicht herunterladen, sondern einen direkten Link dazu angeben. Somit hat man erstens immer die aktuelle Version und zweitens wird Zeit gespart, wenn andere (fremde) Webseiten denselben Link benutzen. Der Browser hat die Datei dann schon im Cache gespeichert.

Ordnerstruktur

Generieren wir erst mal die generelle Ordnerstruktur und die ersten Dateien:

  • ./  --> Das ist das root/Basis-Verzeichnis.
  • js/  --> enthält alle JavaScript-Dateien.
  • css/ --> enthält alle CSS-Dateien.

[weitere werden folgen]

Ich benutze immer diese Ordnerstruktur für meine Web-Projekte, du kannst natürlich auch eine andere Struktur anlegen.

Nun legen wir ein paar verschiedene Dateien an:

  • ./index.html
  • ./css/base.css

css/base.css

Die Datei css/base.css enthält die grundlegenden Layout-Einstellungen:

html, body
{
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}

div, html, body
{
padding: 0;
margin: 0;
}

#wrapper
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

#pixiscreen
{
position: relative;
margin: 0 auto;
max-height: 100%;
min-height: 100%;
}

Der BODY und HTML Bereich wird auf die Fenstergrösse angepasst. Mit overflow-x: hidden wird alles versteckt, was breiter als das Fenster ist. Dasselbe wird mit der Höhe gemacht. Irgendwie ist das Div beim Chrome immer 0.2 Pixel grösser als das Fenster oder so, was zur Folge hatte, dass Scrollbalken auftauchten, welche dann sowieso noch ein bisschen mehr vom Fenster verdeckt haben. Overflow bräuchte es nicht, wenn das div zum Beispiel 99% Grösse hätte, doch ich will einen randlosen Bildschirm.

Das Padding- und Margin-Attribut wird auf 0 gesetzt, damit kein Rand übrig bleibt. Der #wrapper muss eine absolute Position haben, damit der #pixiscreen mit Margin horizontal zentriert werden kann. Dies hier nur zur Sicherheit, da der Pixi-Screen sowieso das ganze Fenster ausfüllt.

index.html

In die index.html kommt erstmal das HTML-Grundgerüst:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>EmulatroniX</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<body>
<div id="wrapper">
<div id="pixiscreen"></div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://pixijs.download/v4.5.2/pixi.min.js"></script>
<script src="http://cdn.rawgit.com/ben0bi/RUNPIXI.js/v0.6.4/RUNPIXI/RUNPIXI.js"></script>

<script>
function mainLoop() {}

$(document).ready(function()
{
RUNPIXI.initialize('pixiscreen', mainLoop);
console.log("Ready.");
});
</script>
</body>
</html>


Mit dem DOCTYPE-Tag wird dem Browser mitgeteilt, dass wir HTML 5 benutzen.
Das Meta-Tag stellt das Characterset auf UTF-8. Somit ist immer klar das gleiche Characterset definiert. Die CSS-Dateien werden im Header eingebunden, da sie vom Browser gebraucht werden, um das Layout aufzubauen. Die JavaScript-Dateien werden jedoch am Ende des Bodys hereingeladen, so dass das Layout im Aufbau nicht blockiert wird.

Das #pixiscreen-div ist im #wrapper-div, damit man es horizontal zentrieren kann.

jQuery ist eine Bibliothek, um viele Sachen in JS zu vereinfachen.
Den jQuery-Link bekommt man hier in dieser Form.

PixiJS ist eine JavaScript 2D-Graphikbibliothek, welche auf Geschwindigkeit ausgelegt ist.
Sie benutzt wenn möglich WebGL, ansonsten wird die DOM-Struktur benutzt.
Hierin werden wir die Textur erstellen, auf welcher dann der Bildschirm des Emulators gerendert wird (sogenannte RTT-Technik: Render-To-Texture - wobei hier nicht wirklich eine Szene auf die Textur gerendert wird, sondern nur die Pixel der Textur "direkt" ausgetauscht/verändert werden).
Den Link zu Pixi habe ich selbst aus den Releases von PixiJS herausgesucht.

Schliesslich ist RUNPIXI.js eine kleine Bibliothek, welche ich geschrieben habe, um den Initialisierungsprozess von PixiJS zu vereinfachen. Man braucht nun nur noch ein Kommando auszuführen, nämlich RUNPIXI.initialize(DOMContainerID, loopFunction), alles Andere macht RUNPIXI.

Wenn die Fenstergrösse geändert wird, merkt RUNPIXI das und passt automatisch den Pixi-Renderer an.

Schliesslich wird der Pixi-Bildschirm in dem kleinen Script am Ende initialisiert. Dazu muss es eine mainLoop-Funktion haben, welche nach jedem Frame aufgerufen wird. Diese benutzen wir gerade noch nicht. Man beachte, dass beim Namen des pixiscreens in der Initialisierungsfunktion kein # davor steht: RUNPIXI verzichtet auf jQuery.

Du kannst dem Pixiscreen deine eigene Hingergrundfarbe geben oder ihn sogar transparent machen, indem du die Farbe in der Initialisierungsfunktion als Parameter angibst. Die Farbe kann hexadezimal so angegeben werden: 0xRRGGBB wobei R für Rot, G für Grün und B für Blau steht.

RUNPIXI.initialize('pixiscreen', mainLoop, 0x111133); <-- Schönes dunkles Blau.
RUNPIXI.initialize('pixiscreen', mainLoop, 'transparent'); <-- Transparent. Man sieht nur, was du auch zeichnest.

Fertig!

Wenn du nun die Index.hmtl-Datei im Browser öffnest, sollte dein gesamter Browserbildschirm türkisblau sein (ausser du hast eine andere Farbe angegeben). Damit haben wir die Basis-(Graphik-)Engine initialisiert - das war ja noch ganz einfach. :)

Ich werde für jeden Part/Artikel auf GitHub ein Release vom jeweils aktuellen Master machen.

Das ist das Release für diesen Artikel:
https://github.com/ben0bi/EmulatroniX/releases/tag/Blog_Series_Part_2

Weiter gehts mit [Bitte warten, komplett neuer Aufbau] DIY: Emulator Teil 2.1: Der Emulator Bildschirm.


Samstag, 20. Mai 2017

DIY: Emulator Teil 1: Research

Dies ist eine deutsche Neuauflage meiner How-To-Make-An-Emulator-Serie, Teil 1.
Im originalen (englischen) Artikel ist ein ziemliches Chaos, da ich mich nicht wirklich für eine Entwicklungsumgebung entscheiden konnte. Nun habe ich JavaScript gewählt und werde auch dabei bleiben.

In diesem Artikel betreiben wir erstmal ein bisschen Forschung.

[EDIT]: Ich bin ein autodidaktischer Programmierer und habe Spass daran, Dinge selbst herauszufinden oder nachzuprogrammieren (Theorie zu Praxis, nicht einfach Code kopieren ;) ). Ich habe erst mal ein bisschen komplexere Artikel geschrieben um die Grafik aufzubauen. Das wurden dann schon ein paar Artikel, und bei diesen habe ich alles "selbst erfunden". Beim Emulator-Code selbst werde ich höchstwahrscheinlich einfach die zuunterst verlinkten Artikel ins Deutsche übersetzen.

Da schon nur der Grafikaufbau in mehrere Artikel ausgeartet ist, werde ich versuchen, eine etwas andere Nummerierung zu bewerkstelligen:

[EDIT] Ich habe nun das ganze Chaos aus den veröffentlichten Artikeln heraus genommen.
Grund: Es war in jeder Version zu langsam auf Standard-Laptops. Ich versuche dies nun mit Shadern zu bewerkstelligen. Bitte warten...

Mit Nummern versehen sind die Artikel, welche sich mit dem Aufbau des Grundgerüstes befassen, welches "extern" benötigt wird um den Emulator ("intern") anzuzeigen und zu bedienen. Die Grafik und das Basisgerüst werden in Teil 2 und allen zugehörigen Artikeln abgehandelt, also Teil 2.1_12.1_22.1_3, sowie Anpassungen 1 und Demo 1.

Mit Buchstaben versehen sind die Artikel, welche sich mit dem jeweiligen Emulator selbst befassen,
zum Beispiel [TODO] Gameboy A: Die CPU, Gameboy B: ...

Du findest alle Artikel zu dieser Serie auf dieser Seite.

Was ist ein Emulator?

Ein Emulator ist eine Software, welche eine bestimmte Hardware A auf einer anderen Hardware B simuliert, so dass man die Software, welche für Hardware A konzipiert wurde, auch auf System/Hardware B laufen lassen kann.

Die geläufigsten Emulatoren sind Konsolen-Emulatoren, welche zum Beispiel den Super-Nintendo auf einem PC emulieren. Es gibt aber auch für jegliche andere Hardware Emulatoren. Von einfachsten Chips bis zu den grössten Superrechnern kann man alles emulieren - wenn man genug (Rechen-)Zeit hat.




Ich habe einst einen Sega Master System Emulator, den ein Freund geschrieben hat, mit einer besseren graphischen Ausgabe beschert. Seine Software hat das Bild direkt in einem ganz kleinen Fensterchen auf dem Bildschirm ausgegeben. Ich habe dann eine 3D-Bibliothek mit einem Texturrenderer benutzt, um zu skalieren und verschiedene Filter darüber zu legen.
Leider habe ich den Sourcecode verloren.

Hier ist der Emulator für deine Befreudigung:
SMSEmu (homeserver) (direkter Download)
SMSEmu (OneDrive)

Dieser englische Artikel bietet gute Grundlagen.
http://fms.komkon.org/EMUL8/HOWTO.html

Zuerst möchte ich das Sega Master System emulieren, doch zuallererst muss eine Basis-Engine geschrieben werden mit der Grafikausgabe und weiterem. Die Grafik wird in Part 2 herbeiprogrammiert.

Diese ROMs (Spielkassetten-Dateien) sind für das Sega Master System. Sie dürfen jedoch nicht mit deinem Produkt ausgeliefert werden. Das wäre illegal. Ich biete sie hier nur an, damit man etwas zum testen des Codes hat.
SMSRoms.zip (homeserver) (direkter Download)
SMSRoms.zip (OneDrive)

Theoretische Überlegungen

Mein Ziel ist immer noch ein Multi-Purpose-(Konsolen-)Emulator, welcher aufgrund des geladenen ROMs entscheidet, welche Hardware dafür vorgesehen ist, und diese dann emuliert. Du könntest dann ROMs von jeder unterstützten Plattform in den selben Ordner kopieren und einfach das Spiel spielen, ohne dich um die Plattform-Auswahl kümmern zu müssen.

Der Emulator liefert ein Array mit Pixeldaten, die dann dargestellt werden können wie wir uns es wünschen. Somit ist es eigentlich egal, welche Engine man benutzt. Hauptsache man kann damit irgendwie Pixel rendern. Nachdem ich nun einige Zeit PixiJS benutzt habe, will ich es mal damit versuchen. Damit kann man wirklich schöne Sachen machen.

Fakten sammeln

Um einen Emulator zu bauen, muss man natürlich die zu emulierende Hardware kennen. Dazu gibt es meistens Dokumente, die aufzeigen, wie sie funktioniert. Dann muss man diese Hardware in Software nachbauen.

Ich möchte das Sega Master System (SMS) zuerst machen. Der oben genannte Freund gab mir dazu diesen Link, wovon er das oberste Dokument empfahl, welches er selbst gebraucht hat.


Dieses Dokument hier gibt mehr Informationen als alle anderen:

Der Gameboy wäre jedoch hier besser geeignet, da jemand schon einen JS GameBoy-Emulator geschrieben hat: 

Ich werde mich vorerst nach diesem Tutorial richten.

Doch darum kümmern wir uns, wenn die Grund-Engine steht.

Anders als im oben verlinkten Artikel, werden wir zuerst die Grund-Engine bereit stellen, in der dann alle Emulatoren ausgeführt werden können. Dies wird dort "erst" ab Kapitel 5 [gar nicht(?)] abgehandelt und ich möchte dir nicht die Entscheidung der Wahl deiner zu emulierenden Hardware abnehmen, nur weil das Grundgerüst erst "später" gemacht wird.

Im Grundgerüst wird der Bildschirm aufgebaut und gezeichnet, sowie der Sound ausgegeben.

[edit 2019] Ehm sorry aber ehm.. ich nehm trotzdem Unity und C# weil man jetzt endlich (gratis) auf der Textur herum zeichnen kann, also...

Oder direkt mit: [TODO] Gameboy A: Die CPU

Dienstag, 9. Mai 2017

Mickey Rubbish


Ein Rubber Ducky als Maus getarnt.

WARNUNG: Dieser Artikel dient informativen Zwecken. Der Autor weist jegliche Haftung von sich.
Der Autor warnt vor dem Gebrauch eines solchen Gerätes. Es können schwere Schäden verursacht werden durch den falschen Gebrauch solcher Geräte. Deshalb ist oben im Bild auch ein "Warnschild" angebracht. Dieser Artikel dient der Aufklärung.

Dies ist ein erweiterter, deutscher Artikel von diesem Originalartikel. Danke dafür an tim.

Als ich den Begriff "Rubber Ducky" in der Serie "Mr. Robot" gehört habe, wollte ich unbedingt auch so ein Ding haben. Schon nur des Namens wegen.

Die Hardware

Ich habe mir also gleich ein RasPi Zero bestellt (meins hat kein WLAN), und einen USB-Stecker dran gelötet.

Hier ist das Wiring-Bild. Für dieses Projekt interessiert nur der untere Teil. Man beachte, dass man hier den male-Stecker von hinten sieht, also vom Gerät aus.
Freundlichst geklaut von hier.

Dann wusste ich erst nicht, was ich für eine Hülle machen soll und mit welchem Material. Ich habe noch eine alte Kabelmaus gefunden und dachte, das ist doch die perfekte Tarnung.

Beim USB-Kabel von der Maus musste ich erst herausfinden, welche Farbe denn nun was bedeutet. (Ich konnte es mir schon denken...)

Deshalb habe ich den USB-Stecker am Pi weggeschnitten und eine Pin-Steckerverbindung an das Restkabel gelötet. So konnte ich alle Kombinationen austesten.



Rot ist +5V, Schwarz ist GND, Grün ist D+ und Weiss ist D-.

Bei meiner Konfiguration sind also folgende Farbkombinationen vorhanden:

USB-PinRasPiMauskabelFunktion
1OrangeRot+5V
2GrauWeissData-
3BlauGrünData+
4BraunSchwarzGND

Ich musste die Platine von der Maus herausnehmen. Der Zero hätte sonst nicht reingepasst.
Desweiteren musste ich an der Seite einiges wegfräsen und einen der Pfosten für das Mausrad entfernen. Zum Glück keinen tragenden Pfosten, die Aufmachung des Rades ist auf der anderen Seite.

Das Mausrad selbst musste auch halbiert werden.


Den unteren Plastik mit der Optik wollte ich auch drin lassen, darum habe ich ihn flacher gemacht. Das war jedoch im Endeffekt nicht nötig. Der RasPi Zero hatte nun schön Platz und ein erster Test war erfolgreich.



Ich wollte das Erlebnis noch akkurater gestalten und habe die LED von der Maus von unten her an die Pins 1 und 6 vom RasPi Zero gelötet. Also den ersten Pin links oben und den dritten Pin rechts oben bei den GPIO-Pins. (3.3 V und GND). Die Halterung von der LED fixiert die Optik auf der Maus und die Optik fixiert ihrerseits den RasPi als Gesamtes. Sobald man "die Maus" einsteckt, leuchtet nun die LED auch.



Wie schon bemerkt müsste man an der Optik nichts weg fräsen. Dank der Halterung für die LED ragt nun auch der Kartenslot schön heraus, so dass man die Karte ganz einfach wechseln kann, wenn der Deckel entfernt wurde.


Schliesslich noch das Mausrad drauf gepappt...


Und so sieht es am Ende aus...total unauffällig.



Die Software

Das Duckberry-Image habe ich mit dem USB Image Tool auf die MikroSD-Karte gebrannt.

Dann muss man die payload.dd-Datei auf der Karte bearbeiten.

Ich habe erst mal den mitgelieferten payload getestet und bin schon da auf die ersten Probleme getroffen: Das OS schreibt mit der englischen UK-Tastatur, wir haben hier jedoch die Schweizer Tastatur. Ich hatte keine Lust, das gesamte OS neu zu kompilieren, nur um die Keymap zu wechseln - welche dann auch wieder nur individuell für mich stimmen würde.

Also habe ich folgenden Payload geschrieben (abgekürzt):

DELAY 500
GUI r
STRING notepad
ENTER
DELAY 1000
STRING abcdefghijklmnopqrstuvwxyz
ENTER
STRING ABCDEFGHIJKLMNOPQRSTUVWXYZ
ENTER
STRING 1234567890
ENTER
STRING Sonderzeichen
ENTER
STRING 1 +
ENTER
STRING 2 "
ENTER
STRING 3 *
ENTER
STRING 4 ç
ENTER
STRING 5 %
ENTER
STRING 6 &
ENTER
STRING 7 /
ENTER
STRING 8 (
ENTER
STRING 9 )
ENTER
STRING 10 =
ENTER
STRING 11 ?
ENTER
STRING 12 `
ENTER
REM und so weiter .... mit allen Sonderzeichen, äöüéèà, Klammern etc.
STRING 25 \
STRING 26 #

Dies liess ich dann auf meinem Laptop laufen, welches mir schön Notepad geöffnet und alle Sonderzeichen mit einer Nummer versehen dort reingeschrieben hat. Anhand der Nummerierung konnte ich dann herausfinden, wie der Youtube-Link aufgebaut sein muss: www.zoutube.com#watch_v)dQw4w9WgXcQ oder so. So hab ich das dann in den Standard-Payload hineingeschrieben und schon ging es.

Ich hoffe das hilft auf deinem Weg der Besserung. Viel Spass!

Dienstag, 2. Mai 2017

Bordcomputer + Halterung für Fahrrad

Für mein neues Fahrrad wollte ich einen Bordcomputer, welcher navigieren und Musik abspielen kann. Deshalb habe ich mich für ein kleines Tablet entschieden, anstatt für ein TomTom und einen Mp3-Player.

Ich habe mir ein Samsung 7-Zoll Tablet gekauft. WARNUNG: Es lässt sich NUR mit dem mitgelieferten Adapter aufladen. Das Ziel war, Solarpanels zu benutzen, doch das geht nicht. Mit anderen Adaptern gehts auch nicht. Deshalb gibts hier auch keinen Produktlink.

Nun gut, ich bin ja nicht ewigs unterwegs, ich muss einfach wissen, wo eine bestimmte Strasse in der Stadt ist oder so. Das Strom-Problem habe ich auch erst "zu spät" entdeckt, nachdem ich die Halterung schon gebaut hatte.

Die Software

Das Ziel der Übung ist ein OFFLINE Bordcomputer, da ein WLAN sehr selten in der freien Natur (benutzbar) anzutreffen ist, und dieses Händyzeug kann ich sowieso nicht ausstehen. Es muss also offline funktionieren. Deshalb gabs auch gleich eine 32GB microSD-Karte dazu, damit all die Daten unten auch offline verfügbar sind.

Musik

Musik kann man sich bequem mit dem Kabel vom PC herüberladen.
Der Music-Player von Samsung reicht völlig. Dieser war jedoch noch nicht vor-installiert.

Navigation

Hier ist die App "MapFactor Navigator" mein Favorit. Diese ist gratis und man kann sich alle Karten herunterladen. Ich habe alle Karten ausser Amerika (Kontinent), da ich nicht vor habe, mich oder mein Fahrrad dort hin zu bewegen. Und Züri West hat auch schon gesagt: "Amerika gits nid."

Damit der Navigator auch gratis bleibt, muss man am Anfang die zweite Kartenoption wählen: OpenStreetMap-Daten anstatt Google-Daten. Dann kann man irgendwo in ein Menü und sich all die Karten auswählen, die man halt so haben will. Einige (Länder) haben recht viele Daten und sind in Bezirke aufgeteilt (zB. Frankreich, Deutschland), andere sind jedoch nur ein paar Kb gross (meist östliche Länder)

Es dauert eine Weile, bis alle Karten heruntergeladen sind....aber dann hat man sie.

Mehr brauchts nicht. Ich hab noch die Google-Uhr (sehr bequem mit "Ok, Google, stelle Timer auf X Minuten" (nur mit Netz)) und Fallout Shelter installiert, welches man offline spielen kann.

Die Halterung

Dazu habe ich eine hübsche Tabakbox genommen und diese bearbeitet.
Das Tablet passt knapp rein, wenn man am Rand ein bisschen Material weg fräst.


Erst wollte ich eigentlich den ganzen Screen zeigen, doch ich dachte "Warum nicht mal ein runder Bildschirm? Die wichtigsten Infos sieht man ja eh meistens in der Mitte...vor allem beim Navigieren."

Ich habe mich dazu entschieden, ein Bullauge in den Deckel zu machen.

Das runde Loch im Deckel habe ich von innen heraus ausgeschnitten und "gleichmässig" erweitert.
Dieses wurde später noch ein bisschen vergrössert.

Das Plexiglas habe ich auf den rechteckigen Innenraum zugeschnitten. Somit ist es immer "richtig" fixiert für die Schraubenlöcher.

Mit dem Zirkel habe ich die 6 Löcher für die Schrauben markiert, dann das Plexi reingelegt und durch alles hindurch gebohrt. Merke: Lieber aufeinanderlegen anstatt ausmessen! ;)


Die Schrauben, Muttern und Unterlagsscheiben habe ich mit Goldspray gefärbt.

Schliesslich habe ich noch die Buttons "herausgezogen": Ich habe 3 Löcher in die Seite gebohrt und
dann die Schrauben mit den Federn herein gemacht. Mit diesen Schrauben kann man den Screen an- und ausschalten und die Lautstärke regulieren, ohne dass man den Deckel öffnen muss. Die Federn müssen (für diese Schraubenlänge, welche gerade verfügbar war) sehr kurz sein: 2 Windungen reichen schon.


Und hier nun, das aktuelle Endprodukt mit laufendem Navigationssystem.


Ich möchte noch so einen typischen Bullaugen-Metallring auf den Deckel machen, weiss jedoch nicht, wie ich die runde Kante innen hin bekommen soll....

Die Halterung für das Fahrrad kommt, wenn das Fahrrad da ist. Dazu will ich einfach unten noch ein paar Löcher bohren, an welche man dann die "richtige" Halterung dran machen kann.