pcface Download - تنزيل رمز مصدر pcface

pcface

تحميل الخط

0.3.0

تنزيل

وجه الكمبيوتر

PC Face هي مجموعة من الموارد الصديقة للبرامج التي تسمح برسم أحرف CP437 على قماش رسومي. يوفر هذا المشروع صفائف BITMAP لجميع الحروف 256 من مجموعة أحرف CP437 المقدمة باستخدام مختلف الخطوط المجانية التي تُعيد إنتاج خطوط IBM PC الأصلية.

بالإضافة إلى ذلك ، يتضمن هذا المشروع بعض وظائف Python لإنشاء هذه الخلايا النقطية وبعض وظائف JavaScript التي تجعل هذه الخلايا النقطية على قماش رسومي.

ربما تقوم بعمل لعبة على الطراز الرجعية حيث تريد السيطرة الكاملة على ما يجب أن يكون عليه كل بكسل. أو ربما ترغب في تقديم حروف مرموقة CP437 باستخدام العلامات النجمية لصنع لافتة نصية. قد تتحول صفائف صورة نقطية المقدمة في هذا المشروع إلى مفيدة لمثل هذه الأنشطة. يمكن ترجمة صفائف BITMAP المتاحة إلى وحدات البكسل على الشاشة أو رموز للإخراج القياسي لتقديم الحروف الرمزية CP437.

تفضل بزيارة susam.github.io/pcface/ لمشاهدة عرض تجريبي.

محتويات

موارد
العروض التوضيحية
- عرض سريع
- عرض تفصيلي
تنسيق صورة نقطية
تفاصيل الخط
- خط دوس الحديث
- خطوط الكمبيوتر الشخصي Oldschool
استخدام مجموعة الأدوات
- CLI
- بيثون API
- JavaScript API
رخصة
- الخطوط الأصلية
- نقطات DOS الحديثة
- Oldschool PC Lipaps bitmaps
- رمز المصدر
يدعم
القنوات
أكثر

موارد

هناك عدد من الملفات المقدمة في Out/ Directory لهذا المشروع. تفضل بزيارة susam.github.io/pcface/out/ لتصفح هذه الملفات. يحتوي هذا الدليل على العديد من الدلائل الفرعية لمختلف الخطوط المجانية بناءً على خطوط IBM PC OEM الأصلية. يحتوي كل دليل خط على صفائف نقطية للخط وبعض الملفات الأخرى. يتم توفير روابط لملفات موارد Modern-DOS-8X16 أدناه كأمثلة أثناء وصف هذه الموارد. فيما يلي وصف موجز لكل ملف:

Out/Modern-Dos-8x16/fontlist.js: تمثيل نقطات لجميع الحروف 256 من مجموعة الأحرف CP437 المكشوفة كمجموعة JavaScript من صفائف Bitmap. تمثل كل صفيف صورة نقطية صورة نقطية لحرف CP437.
Out/Moderndos-8x16/fontmap.js: تمثيل Bitmap لجميع حروف CP437 من مجموعة الأحرف CP437 المكشوفة ككائن JavaScript الذي يقوم بتخطيط كل حرف CP437 إلى صفيف BITMAP الخاص به.
Out/Moderndos-8x16/glyph.txt: جميع الرسوم المتحركة CP437 ممثلة باستخدام العلامات النجمية.
Out/Moderndos-8x16/Graph.txt: جميع الرسوم المتحركة CP437 ممثلة باستخدام الرمز ( @ ) ونقاط ( . ). كل صف من الرسوم الرمزية مسبوقة مع رمز الثنائي للصف الممثلة في السداسي عشري. تظهر نفس الرموز الثنائية كتعليقات في ملفات JavaScript المذكورة أعلاه.
Out/Moderndos-8x16/Preview-8x16.png: معاينة للقراءة من ملف الخط الأصلي.
Out/Moderndos-8x16/Preview-16x32.png: معاينة أكبر للخط القراءة من ملف الخط الأصلي.

تتوفر ملفات مماثلة لكل خط من هذا القبيل في هذا المشروع. تفضل بزيارة susam.github.io/pcface/out/ لتصفحها.

تتوفر هذه الملفات أيضًا عبر CDN على https://cdn.jsdelivr.net/npm/pcface/out/.

العروض التوضيحية

عرض سريع

للحصول على عرض تجريبي سريع لمختلف صور النقطات المتوفرة في هذا المشروع ، تفضل بزيارة الصفحة التجريبية على susam.github.io/pcface/. هناك قائمة منسدلة في الأسفل يمكن استخدامها لتحديد نقار النقط لخطوط مختلفة.

يمارس هذا العرض التوضيحي كلا من قائمة الخط من fontlist.js وخريطة الخط من fontmap.js للخط المحدد. يتم عرض توضيح قائمة الخط في القماش الأول باستخدام لون المقدمة الأخضر. يظهر عرض خريطة الخط في اللوحة الثانية باستخدام لون العنبر.

تبدو الحروف الرسومية المقدمة متشابهة تمامًا في كلا التجريبيين لأن صفائف نقطية نقطية تستخدم في كلتا الحالتين. الفرق الوحيد بين fontlist.js و fontmap.js هو كيفية تعرض صفائف Bitmap هذه في const JavaScript. السابق يكشف مجموعة من صفائف الصورة النقطية ، بينما يعرض الأخير كائنًا يقوم بتخطيط كل حرف CP437 إلى صفيف BITMAP الخاص به.

عرض تفصيلي

هناك عرض توضيحي آخر أكثر تفصيلاً متاحًا على susam.github.io/pcface/retro.html.

في الصفحة التجريبية ، ستلاحظ أن كل عرض تجريبي في صورة نقطية يأتي في نوعين: أحدهما مع font-list font وآخر مع font-map Font. يقوم توضيح font-list بتحميل fontlist.js من الخط المختار ويجعل الرسوم الحرارية باللون الأخضر. يقوم العرض التجريبي بخريطة font-map fontmap.js من الخط المختار ويجعل الحروف الرسومية في العنبر.

بينما يعرض العرض التوضيحي السابق 40 حرفًا فقط لكل سطر على قماش ثابت الحجم مع حجم خط واحد يساوي حجم الخط الأصلي مرتين ، فإن هذا العرض التوضيحي يعرض 80 حرفًا لكل سطر في أحجام الخطين المختلفين: حجم الخط الأصلي بالإضافة إلى حجم الخط المقيس الذي يمثل ضعف حجم الخط الأصلي. علاوة على ذلك ، في هذا العرض التوضيحي ، تقوم اللوحة بتغيير حجمها تلقائيًا لتناسب حجم نافذة المتصفح كلما تم تغيير حجم المتصفح.

تنسيق صورة نقطية

إن تنسيق خلفات الصورة النقطية المتوفرة في هذا المشروع بسيط للغاية. يتم تمثيل كل غروب مع شبكة WXH من وحدات البكسل حيث W هو عرض كل غليف و H هو ارتفاع كل رمبة. على سبيل المثال ، تمثل كل صورة نقطية في Moderndos-8x16 16 صفًا من وحدات البكسل مع 8 أعمدة في كل صف. يتم تمثيل هذه الصفوف الـ 16 كـ 16 أعداد صحيحة في صورة نقطية لكل غليف. على سبيل المثال ، يتم تمثيل الرمث الأسلوبية للحرف الكبيرة "B" التي يتم تقديمها باستخدام هذا الخط على النحو التالي:

  [
    0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
    0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
  ] , // [B] (66)

يمثل كل عدد صحيح النقاط التي يجب رسمها لكل صف من الرسول الرسومية. يعني الأعداد الصحيحة 0x00 و 0x00 في البداية أن الصفين العلويين من الرسوم الرمزية فارغة. ثم 0xfc (Binary 1111100 ) يعني أن أول 6 بكسل من الصف الثالث يتم رسمه بلون المقدمة للخط ويترك آخر بكسل فارغين. وبهذه الطريقة ، يجب رسم 16 صفًا من وحدات البكسل.

فيما يلي مثال على رمز Python الذي يقرأ هذه الخلايا النقطية ويؤسس الرسوم الرسمية على الإخراج القياسي باستخدام نقطة ( . ) لكل 0 بت والرمز ( @ ) لكل بت 1 :

 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 )

ها هو الإخراج:

 0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........

إذا كنت بحاجة إلى مزيد من المساعدة في كتابة الشفرة لترجمة Bitmaps إلى وحدات البكسل ، راجع وظائف drawChar() ، و drawString() ، و drawStrings() في src/pcface.js. يمكنك أيضًا تحميل هذا البرنامج النصي في صفحة الويب الخاصة بك باستخدام عنوان URL CDN واستخدام هذه الوظائف مباشرة في صفحتك. يتم شرح ذلك بمزيد من التفصيل في قسم JavaScript API.

يجب أن يكون من الممكن الرجوع إلى هذه الوظائف وكتابة رمز مماثل بلغة برمجة مختلفة لمجموعة أدوات رسومية من اختيارك.

تفاصيل الخط

خط دوس الحديث

يتضمن هذا المشروع Font Modern DOS 8x16 (الإصدار 20190101.02) تم تطويره بواسطة Jayvee Enaguas. هذا الخط متاح بموجب شروط تفاني المجال العام CC0 1.0 العالمي. يتم أيضًا أرشفة نسخة من الخط في SRC/FONT/Moderndos/دليل هذا المشروع.

يعتمد هذا الخط على خطوط IBM VGA 8x16 و Verite 8x16 OEM لأجهزة الكمبيوتر IBM. تبدو بعض الرسوم البخارية في هذا الخط مثل الرسوم المتحركة لـ IBM VGA 8x16 بينما يبدو البعض الآخر تمامًا مثل الرسوم المتحركة لـ Verite 8x16. ومع ذلك ، هناك أيضًا العديد من الحروف الرسومية في هذا الخط الذي لا يتطابق مع خطتي OEM. بدلاً من ذلك ، تصادف أن تكون تعديلات على الحروف الرسومية الموجودة في خطوط OEM أو كليهما.

في رأيي ، يحتوي هذا الخط على أفضل أجزاء من خطوط OEM. أنا أحب أن هذا الخط لديه صفر من Verite. أحب أيضًا الخطوط العريضة للرسائل في Verite التي ورثت في هذا الخط. بينما يرث الكثير من التصميم الجيد من Verite 8x16 ، فإنه يرث أيضًا بعض الميزات الرائعة من IBM VGA 8x16. على سبيل المثال ، يحتوي على الساق المرتفعة للرقم 2 والساق المنحني للرقم 7 من IBM VGA 8x16.

خطوط الكمبيوتر الشخصي Oldschool

يتضمن هذا المشروع عدة خطوط للكمبيوتر الشخصي في Oldschool (الإصدار 2.2) الذي تم تطويره بواسطة Viler. هذه الخطوط متوفرة بموجب شروط الترخيص الدولي Creative Commons Commons-Sharealike 4.0. يتم أيضًا أرشفة نسخ من هذه الخطوط في SRC/Font/Oldschool/Directory لهذا المشروع.

تقوم هذه الخطوط بعمل ممتاز في إعادة إنتاج خطوط IBM PC الأصلية الأصلية بأمانة قدر الإمكان. ومع ذلك ، تختلف هذه الخطوط أيضًا عن خطوط OEM الأصلية بطرق بسيطة ، خاصةً ، لتصحيح الأخطاء البسيطة في الخطوط الأصلية. راجع الأسئلة الشائعة في وثائق الكمبيوتر القديم لمزيد من التفاصيل حول هذه التصحيحات.

استخدام مجموعة الأدوات

على الرغم من أن الغرض الأساسي من هذا المشروع هو توزيع صفائف Bitmap لـ CP437 ، فإن هذا المشروع يجعل أيضًا بعض الأعمال التي تم توليدها واختبار هذه الخلايا النقطية مثل وظائف Python و JavaScript. يتم تعبئة وظائف Python أيضًا في شكل أداة واجهة خط الأوامر (CLI). توفر الأقسام الفرعية التالية مقدمة موجزة لأداة CLI وكذلك وظائف Python و JavaScript.

CLI

يمكن استخدام أداة واجهة سطر أوامر Python (CLI) التي يوفرها هذا المشروع لإنشاء صفائف Bitmap الخاصة بك لرسومات CP437 بخط من اختيارك. تشرح الخطوات التالية كيف يمكننا القيام بذلك باستخدام خط Oldschool IBM EGA 9x14 ، وهو خط غير مدرج في هذا المشروع.

أول تنزيل واستخراج ملف الخط لـ 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 "

قم بإنشاء بيئة بيثون افتراضية وتثبيت وجه الكمبيوتر:
```
python3 -m venv venv
venv/bin/pip3 install pcface
```
أدخل الأمر التالي لطباعة تفاصيل استخدام الأداة:
```
venv/bin/pcface -h
```
قم بإنشاء صفائف نقطية وملفات الإخراج الأخرى:
```
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/
```
لاحظ أن اسم دليل الإخراج يجب أن ينتهي ببعد كل غليف مخرج معبر عنه في تنسيق WxH حيث يكون W هو عرض كل رمبة و H هو ارتفاع كل رسول. يحدد خيار -s حجم الخط. يجب ضبطها على حجم الخط الذي يؤدي إلى الرسوم المتحركة للبعد المطلوب. إذا تم حذف خيار -s ، يتم استخدام حجم الخط من H حيث يكون H هو ارتفاع ارتفاع الرسول الرمزية من اسم دليل الإخراج والذي قد لا ينتج دائمًا البعد الصحيح.
الآن قم بإنشاء صفائف Bitmap لنفس الخط ولكن مع عرض الهربشة وتضاعف الارتفاع:
```
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/
```

ستحتوي أدلة الإخراج الآن على ملفات JavaScript التي تحتوي على صفائف Bitmap بالإضافة إلى بعض الملفات الأخرى التي توضح الرسوم الحرارية. انظر موارد القسم للحصول على وصف موجز لهذه الملفات.

بيثون API

توضح الخطوات التالية كيفية البدء مع Python API:

أول تنزيل واستخراج ملف الخط لـ 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 "

قم بإنشاء بيئة بيثون افتراضية وتثبيت وجه الكمبيوتر:
```
python3 -m venv venv
venv/bin/pip3 install pcface
```

الآن اكتب هذا البرنامج النصي Python وحفظه في ملف ، على سبيل المثال ، 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 )

أدخل الأمر التالي لتنفيذ البرنامج النصي:

venv/bin/python3 ex1.py

يجب أن يظهر الإخراج التالي:

 .........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........

انظر SRC/ مثال/ لمزيد من الأمثلة على البرامج النصية Python التي تستدعي API Python لهذا المشروع.

أيضًا ، راجع وثائق Python API لتوثيق كامل لجميع الوظائف المكشوفة في API Python.

JavaScript API

فيما يلي مثال HTML الأدنى الذي يوضح كيف يمكن تحميل وجه الكمبيوتر وخريطة الخط من CDN إلى صفحة ويب واستخدامها:

 <!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 >

فيما يلي مثال آخر يقوم بتحميل قائمة الخط بدلاً من خريطة الخط:

 <!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 >

راجع وثائق JavaScript API للحصول على وثائق كاملة لجميع الوظائف المكشوفة في API JavaScript.

رخصة

الخطوط الأصلية

تتوفر الخطوط الأصلية التي تم أرشفتها في هذا المشروع بموجب شروط التراخيص orignal التي يختارها مطورو الخطوط ، أي

يتوفر SRC/FONT/Moderndos/بموجب شروط تفاني المجال العام CC0 1.0 العالمي ؛
يتوفر SRC/Font/Oldschool/بموجب شروط الترخيص الدولي Creative Commons Commons-Tharealike 4.0.

نقطات DOS الحديثة

يمكنك استخدام محتوى الدليل التالي بموجب شروط ترخيص MIT أو تفاني المجال العام CC0 1.0 العالمي:

Out/Out/Moderndos-8x16/

Oldschool PC Lipaps bitmaps

يمكنك استخدام محتوى الدليل التالي بموجب شروط رخصة GNU العامة V3 أو رخصة Creative Commons Commons-Tharealike 4.0 الدولية:

Out/Oldschool-Bios-8x8/
Out/Oldschool-CGA-8x8/
Out/Oldschool-Ega-8x14/
Out/Oldschool-MDA-9X14/
Out/Oldschool-Model30-8x16/
Out/Oldschool-PGC-8X16/
Out/Oldschool-Verite-8x16/
Out/Oldschool-VGA-8X16/
Out/Oldschool-VGA-9x14/
Out/Oldschool-VGA-9X16/
SRC/DEMO.HTML
SRC/retro.html

رمز المصدر

جميع الملفات الأخرى في هذا المشروع ، باستثناء تلك المذكورة في الأقسام الفرعية الثلاثة أعلاه ، متوفرة بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا. انظر الترخيص. md للحصول على نص الترخيص الكامل.