pcface
0.3.0
PC Face est une collection de ressources adaptées aux programmeurs qui permettent de dessiner des caractères CP437 sur une toile graphique. Ce projet fournit des tableaux bitmap pour les 256 glyphes du jeu de caractères CP437 rendu à l'aide de diverses polices libres qui reproduisent les polices OEM IBM PC d'origine.
De plus, ce projet comprend quelques fonctions Python pour générer ces bitmaps et quelques fonctions JavaScript qui rendent ces bitmaps sur une toile graphique.
Peut-être que vous faites un jeu de style rétro où vous voulez prendre le contrôle total de ce que devrait être chaque pixel. Ou peut-être souhaitez-vous rendre les glyphes CP437 en utilisant des astérisques pour faire une bannière de texte. Les tableaux bitmap fournis dans ce projet pourraient s'avérer utiles pour de telles activités. Les tableaux bitmap disponibles peuvent être traduits en pixels à l'écran ou des symboles pour la sortie standard pour rendre les glyphes CP437.
Visitez Susam.github.io/pcface/ pour voir une démo.
Il existe un certain nombre de fichiers fournis dans le sort / répertoire de ce projet. Visitez Susam.github.io/pcface/out/ pour parcourir ces fichiers. Ce répertoire contient plusieurs sous-répertoires pour diverses polices libres basées sur les polices IBM PC IBM PC. Chaque répertoire de police contient des tableaux bitmap pour la police et quelques autres fichiers. Les liens vers les fichiers de ressources modernes-DOS-8x16 sont fournis ci-dessous comme exemples tout en décrivant ces ressources. Voici une brève description de chaque fichier:
@ ) et des points ( . ). Chaque ligne du glyphe est préfixée avec le code binaire de la ligne représenté en hexadécimal. Les mêmes codes binaires apparaissent comme des commentaires dans les fichiers JavaScript mentionnés ci-dessus.Des fichiers similaires sont disponibles pour chacune de ces polices incluses dans ce projet. Visitez Susam.github.io/pcface/out/ pour les parcourir.
Ces fichiers sont également disponibles via CDN sur https://cdn.jsdelivr.net/npm/pcface/out/.
Pour une démo rapide des différents bitmaps disponibles dans ce projet, visitez la page de démonstration à Susam.github.io/pcface/. Il y a un menu déroulant en bas qui peut être utilisé pour sélectionner les bitmaps pour différentes polices.
Cette démonstration exerce à la fois une liste de polices de fontlist.js et une carte de police de fontmap.js pour la police sélectionnée. La démo de la liste des polices est indiquée dans la première toile à l'aide de la couleur du premier plan vert. La démonstration de la carte de police est indiquée dans la deuxième toile en utilisant la couleur ambrée.
Les glyphes rendus rendues sont exactement les mêmes dans les deux démos car les mêmes réseaux de bitmap sont utilisés dans les deux cas. La seule différence entre fontlist.js et fontmap.js est la façon dont ces tableaux bitmap sont exposés dans un const . Le premier expose un tableau de billets bitmap tandis que le second expose un objet qui mappe chaque caractère CP437 à son tableau bitmap.
Il existe une autre démo légèrement plus détaillée disponible sur Susam.github.io/pcface/retro.html.
Dans la page de démonstration, vous remarqueriez que chaque démo bitmap est disponible en deux variantes: l'une avec la font-list suffixe et une autre avec le suffixe font-map . La démo font-list charge fontlist.js de la police choisie et rend les glyphes en vert. La démonstration font-map charge fontmap.js de la police choisie et rend les glyphes en ambre.
Alors que la démo précédente ne montre que 40 caractères par ligne sur une toile de taille fixe avec une seule taille de police qui équivaut à la taille de police d'origine étendue deux fois, cette démo montre 80 caractères par ligne en deux tailles de police différentes: la taille de la police d'origine ainsi qu'une taille de police à la reprise qui est le double de la taille de police d'origine. De plus, dans cette démo, la toile se redimente automatiquement pour s'adapter à la taille de la fenêtre du navigateur chaque fois que le navigateur est redimensionné.
Le format des bitmaps disponibles dans ce projet est assez simple. Chaque glyphe est représenté avec une grille WXH de pixels où W est la largeur de chaque glyphe et H est la hauteur de chaque glyphe. Par exemple, chaque bitmap dans ModernDOS-8x16 représente 16 lignes de pixels avec 8 colonnes dans chaque ligne. Ces 16 lignes sont représentées comme 16 entiers dans le bitmap pour chaque glyphe. Par exemple, le glyphe de la lettre majuscule «B» rendue à l'aide de cette police est représenté comme:
[
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
] , // [B] (66) Chaque entier représente les points qui doivent être tracés pour chaque ligne du glyphe. Les entiers 0x00 et 0x00 au début signifient que les deux rangées supérieures du glyphe sont vides. Ensuite, 0xfc (binaire 1111100 ) signifie que les 6 premiers pixels de la troisième ligne sont tracés avec la couleur de premier plan de la police et les deux derniers pixels sont laissés vides. De cette manière, 16 rangées de pixels doivent être tracées.
Voici un exemple de code Python qui lit ces bitmaps et trace le glyphe sur la sortie standard en utilisant un point ( . ) Pour chaque bit 0 et le symbole AT ( @ ) pour chaque bit 1 bit:
bitmap = [
0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00 ,
]
s = ''
for row in bitmap :
s += f' { row :#04x } ' + f' { row :08b } n ' . translate ( str . maketrans ( '01' , '.@' ))
print ( s )Voici la sortie:
0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........
Si vous avez besoin de plus d'aide pour écrire le code pour traduire les bitmaps en pixels, reportez-vous aux fonctions drawChar() , drawString() et drawStrings() dans src / pcface.js. Vous pouvez également charger ce script dans votre page Web à l'aide d'une URL CDN et utiliser ces fonctions directement dans votre page. Ceci est expliqué plus en détail dans la section API JavaScript.
Il devrait être possible de se référer à ces fonctions et d'écrire du code similaire dans un langage de programmation différent pour une boîte à outils graphique de votre choix.
Ce projet comprend une police DOS 8x16 moderne (version 20190101.02) développée par Jayvee Enaguas. Cette police est disponible en vertu des termes du dévouement du domaine public universel CC0 1.0. Une copie de la police est également archivée dans le src / police / modernedos / répertoire de ce projet.
Cette police est basée sur les polices OEM IBM VGA 8x16 et Verite 8x16 pour IBM PCS. Certains glyphes de cette police ressemblent exactement aux glyphes d'IBM VGA 8x16 tandis que d'autres ressemblent exactement aux glyphes de Verite 8x16. Cependant, il y a également plusieurs glyphes dans cette police qui ne correspondent à aucune des deux polices OEM. Au lieu de cela, il se trouve que ce sont des adaptations des glyphes trouvés dans une ou les deux polices OEM.
À mon avis, cette police contient les meilleures parties des deux polices OEM. J'aime que cette police ait le zéro de Verite. J'aime aussi le contour plus carré des lettres de Verite qui a été hérité de cette police. Bien qu'il hérite beaucoup de bon design de Verite 8x16, il hérite également de belles fonctionnalités d'IBM VGA 8x16. Par exemple, il a la tige surélevée pour le chiffre 2 et la tige incurvée pour le chiffre 7 d'IBM VGA 8x16.
Ce projet comprend plusieurs polices PC Oldschool (version 2.2) développées par Viler. Ces polices sont disponibles en vertu des termes de Creative Commons Attribution-Sharealike 4.0 International Licence. Des copies de ces polices sont également archivées dans le src / font / oldschool / répertoire de ce projet.
Ces polices font un excellent travail de reproduction des polices IBM PC OEM d'origine aussi fidèlement que possible. Cependant, ces polices diffèrent également des polices OEM d'origine de manière mineure, en particulier, pour corriger les erreurs mineures dans les polices d'origine. Voir la FAQ sur la documentation Oldschool PC pour plus de détails sur ces corrections.
Bien que l'objectif principal de ce projet soit de distribuer des tableaux de bitmap pour les glyphes CP437, ce projet fait également une partie des travaux qui ont été consacrés à la génération et à la test de ces bitmaps sous forme de fonctions Python et JavaScript. Les fonctions Python sont également emballées sous la forme d'un outil d'interface de ligne de commande (CLI). Les sous-sections suivantes fournissent une brève introduction à l'outil CLI ainsi qu'aux fonctions Python et JavaScript.
L'outil d'interface de ligne de commande Python (CLI) que ce projet fournit peut être utilisé pour générer vos propres tableaux bitmap pour les glyphes CP437 avec une police de votre choix. Les étapes suivantes expliquent comment nous pouvons le faire en utilisant la police Oldschool IBM EGA 9x14, une police qui n'est pas incluse dans ce projet.
Téléchargez d'abord et extraire le fichier de police pour Oldschool IBM EGA 9x14:
curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "Créez un environnement Python virtuel et installez la face PC:
python3 -m venv venv
venv/bin/pip3 install pcfaceEntrez la commande suivante pour imprimer les détails d'utilisation de l'outil:
venv/bin/pcface -hCréer des tableaux bitmap et d'autres fichiers de sortie:
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/ Notez que le nom du répertoire de sortie doit se terminer par la dimension de chaque glyphe de sortie exprimé au format WxH où W est la largeur de chaque glyphe et H est la hauteur de chaque glyphe. L'option -s spécifie la taille de la police. Il doit être réglé sur la taille de la police qui conduit à des glyphes de la dimension souhaitée. Si l'option -s est omise, une taille de police de H est utilisée où H est la hauteur des glyphes lue à partir du nom du répertoire de sortie qui peut ne pas toujours produire la dimension de glyphe correcte.
Créez maintenant des tableaux bitmap pour la même police, mais avec la largeur et la hauteur des glyphes doublées:
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/Les répertoires de sortie contiendraient désormais des fichiers JavaScript contenant les tableaux bitmap ainsi que quelques autres fichiers qui illustrent les glyphes. Voir les ressources de la section pour une brève description de ces fichiers.
Les étapes suivantes montrent comment commencer avec l'API Python:
Téléchargez d'abord et extraire le fichier de police pour Oldschool IBM EGA 9x14:
curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "Créez un environnement Python virtuel et installez la face PC:
python3 -m venv venv
venv/bin/pip3 install pcface Maintenant, écrivez ce script Python et enregistrez-le dans un fichier, disons, ex1.py
import pcface
bitmap = pcface . make_bitmap ( 'A' , 'Px437_IBM_EGA_9x14.ttf' , 16 , 9 , 14 )
graph = pcface . make_graph ( bitmap , 9 , '.@' , False )
print ( graph )Entrez la commande suivante pour exécuter le script:
venv/bin/python3 ex1.pyLa sortie suivante doit apparaître:
.........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........
Voir SRC / Exemple / Pour plus d'exemples de scripts Python qui invoquent l'API Python de ce projet.
Voir également la documentation de l'API Python pour la documentation complète de toutes les fonctions exposées dans l'API Python.
Voici un exemple HTML minimal qui montre comment le visage PC et une carte de police peuvent être chargés d'un CDN dans une page Web et utilisés:
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > PC Face Demo </ title >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
< style >
body {background: #111}
canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
</ style >
< script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontmap.js " > </ script >
< script >
'use strict'
window . addEventListener ( 'load' , function ( ) {
const canvas = document . getElementById ( 'canvas' )
const ctx = canvas . getContext ( '2d' )
ctx . fillStyle = '#3f3'
pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_MAP , ctx , 8 , "hello, world" , 0 , 0 , 2 )
} )
</ script >
</ head >
< body >
< canvas id =" canvas " > </ canvas >
</ body >
</ html >Voici un autre exemple qui charge une liste de polices au lieu d'une carte de police:
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > PC Face Demo </ title >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
< style >
body {background: #111}
canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
</ style >
< script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontlist.js " > </ script >
< script >
'use strict'
window . addEventListener ( 'load' , function ( ) {
const canvas = document . getElementById ( 'canvas' )
const ctx = canvas . getContext ( '2d' )
ctx . fillStyle = '#3f3'
pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_LIST , ctx , 8 ,
[ 65 , 32 , 61 , 32 , 227 , 114 , 253 ] , 0 , 0 , 2 )
} )
</ script >
</ head >
< body >
< canvas id =" canvas " > </ canvas >
</ body >
</ html >Voir la documentation de l'API JavaScript pour une documentation complète de toutes les fonctions exposées dans l'API JavaScript.
Les polices originales archivées dans ce projet sont disponibles selon les termes des licences d'origine choisies par les développeurs de polices, c'est-à-dire, c'est-à-dire,
Vous pouvez utiliser le contenu du répertoire suivant en vertu des termes de la licence MIT ou du dédicace de domaine public universel CC0 1.0:
Vous pouvez utiliser le contenu du répertoire suivant en vertu des termes de la licence publique générale GNU V3 ou de la licence internationale Creative Commons Attribution-Sharealike 4.0:
Tous les autres fichiers de ce projet, à l'exclusion de ceux répertoriés dans les trois sous-sections ci-dessus, sont disponibles en vertu des termes de la licence MIT. Voir Licence.md pour le texte complet de la licence.
Pour signaler des bogues, suggérer des améliorations ou poser des questions, créez des problèmes.
L'auteur de ce projet traîne dans les endroits suivants en ligne:
Vous êtes invités à vous abonner, à suivre ou à rejoindre un ou plusieurs des canaux ci-dessus pour recevoir des mises à jour de l'auteur ou poser des questions sur ce projet.
Voir Andromeda Invaders où un petit sous-ensemble des bitmaps DOS 8x16 modernes disponibles dans ce projet a été utilisé pour rendre du texte sur une toile de jeu.
