یک ساعت دیجیتال در Mini Micro بسازید

Summarize this content to 400 words in Persian Lang
امروز بیایید یک پروژه کوچک در Mini Micro انجام دهیم که یک ساعت دیجیتال قدیمی می سازد. این کار جدا کردن یک صفحه جن، انیمیشن با کشیدن مستقیم به یک PixelDisplay (به جای استفاده از sprites واقعی) و dateTime ماژول برای دریافت زمان فعلی

تصویر ارقام

از جمله تصاویر داخلی در Mini Micro، /sys/pics/digits.png است. به نظر می رسد این است:

در پس زمینه سفید، این بسیار گیج کننده است، اینطور نیست؟ اگر آن را در پس زمینه سیاه مشاهده می کنید – برای مثال، با انجام دادن view “/sys/pics/digits.png” در Mini Micro – به نظر می رسد:

خوب، اکنون می‌توانیم ببینیم که دارای ارقام 0 تا 9 به اضافه حروف AF است (اگر می‌خواهیم نمایشگر هگزادسیمال بسازیم مفید است). اما چرا دو ردیف از ارقام ظاهراً یکسان وجود دارد؟ اگر رنگ پس‌زمینه متفاوتی را ببینیم، نه سیاه و نه سفید، پاسخ روشن می‌شود. این را امتحان کن:

gfx.clear color.blue
gfx.drawImage file.loadImage(“/sys/pics/digits.png”)
gfx.scale = 4

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

آها! اکنون می توانیم ببینیم که چرا دو ردیف وجود دارد. ردیف بالا دارای بخش های تیره برای بیت های “خاموش” هر رقم است، در حالی که در ردیف پایین، آن قسمت ها شفاف هستند. این که شما از آن استفاده می کنید بستگی به ظاهر شما دارد.

برای پروژه امروز، از ردیف بالایی استفاده می‌کنیم که دارای بخش‌های تاریک ظریف اما واقعی است. این به ما این امکان را می دهد که به سادگی یک رقم جدید را روی یک رقم قدیمی اضافه کنیم، بدون اینکه ابتدا آن را پاک کنیم (و همچنین اگر رنگ پس زمینه سیاه خالص نباشد، سرد به نظر می رسد). ما همچنین فقط از ده رقم اول استفاده خواهیم کرد. امروز A تا F را نادیده می گیریم.

جدا کردن ورق اسپرایت

با وجود اینکه امروزه از sprite استفاده نمی کنیم، یک تصویر بزرگ که حاوی دسته ای از تصاویر کوچکتر است، هنوز “ورق اسپریت” ​​(یا گاهی اوقات “اطلس” نامیده می شود، اما من اصطلاح قبلی را ترجیح می دهم). پس بیایید با بارگیری digits.png و سپس بیرون کشیدن ده رقمی که نیاز داریم شروع کنیم، همانطور که با هر صفحه sprite دیگری انجام می دهیم.

اگر قبلاً این کار را نکرده‌اید، Mini Micro را راه‌اندازی کنید (یا اگر مشکلی ندارید که کار خود را در پایان ذخیره نکنید، از نسخه وب استفاده کنید). استفاده کنید edit دستور برای راه اندازی ویرایشگر، و تایپ این کد:

digitImage = file.loadImage(“/sys/pics/digits.png”)
dw = 10; dh = 18 // digit width and height
digits = [] for i in range(0,9)
digits.push digitImage.getImage(i * dw, dh, dw, dh)
end for

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این تصویر را در متغیری به نام بارگذاری می کند digitImage، و سپس لیستی را آماده می کند (digits) با تصاویر رقمی مجزا. هر کدام از اینها هستند dw پیکسل گسترده، و dh پیکسل بلند ما در حال گرفتن ردیف بالا به دلیل پارامتر دوم به getImage است dh به جای 0 – به یاد داشته باشید، مختصات در Mini Micro تقریباً همیشه از پایین به بالا شمارش می شود. بنابراین ردیف پایین با Y = 0 شروع می شود و ردیف بالا با Y = 18 (یا dh).

این کد را اجرا کنید و سپس با وارد کردن آن تست کنید view digits[4] در خط فرمان شما باید کمی دیجیتال 4 را در مرکز صفحه ببینید.

برخی از توابع کمکی

هدف ما ترسیم یک رشته زمانی مانند “08:22:45” است. ما این یک شخصیت را در یک زمان ترسیم می کنیم. بنابراین، بیایید دو تابع کمکی بسازیم: یکی برای رسم یک رقم، و دیگری برای رسم دو نقطه. edit دوباره برنامه خود را اضافه کنید و موارد زیر را اضافه کنید.

drawDigit = function(value=0, col=0)
x = col * dw
y = 0
gfx.drawImage digits[value], x, y, dw, dh,
0, 0, dw, dh, gfx.color
end function

drawColon = function(col=0)
x = col * dw
y = 0
gfx.fillEllipse x + dw/2 – 1, y+5, 2, 2
gfx.fillEllipse x + dw/2 – 1, y+12, 2, 2
end function

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هر دوی اینها با محاسبه موقعیت X و Y برای ترسیم با توجه به موقعیت ستون (col) جایی که می خواهیم کاراکتر ظاهر شود. drawDigit تماس می گیرد gfx.drawImage تا کار خود را انجام دهد. اگر به رنگ آمیزی ارقام اهمیت نمی دادیم، فقط می توانستیم این کار را انجام دهیم:

gfx.drawImage digits[value], x, y

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اما ما می‌خواهیم از کشیدن ارقام رنگی پشتیبانی کنیم تا شبیه ساعت‌های LED قرمز یا سبز قدیمی به نظر برسد. بنابراین ما باید تمام نه پارامتر را به آن عرضه کنیم [drawImage](https://miniscript.org/wiki/PixelDisplay.drawImage)، فقط برای رسیدن به آخرین مورد که رنگ ته رنگ است. (MiniScript از انتقال آرگومان ها به نام، بلکه فقط بر اساس موقعیت پشتیبانی می کند.)

را drawColon تابع با محاسبه X و Y نیز شروع می شود و سپس فقط فراخوانی می کند fillEllipse دو بار، یک بار برای هر نقطه از روده بزرگ. (می توانید بعداً با اندازه و موقعیت این نقاط بازی کنید تا آن را متعلق به خودتان کنید!)

اگر این کد را اجرا کنید، و سپس انجام دهید clear برای پاک کردن صفحه، باید بتوانید وارد شوید drawDigit تا کمی 0 در پایین صفحه نمایش داده شود. همچنین سعی کنید drawColon 1 برای نشان دادن دو نقطه در کنار آن (در ستون 1).

ترسیم زمان فعلی

برای دریافت زمان فعلی، به بالای کد خود برگردید و وارد کنید:

import “dateTime”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این بارگیری می کند dateTime ماژول (در /sys/lib یافت می شود)، که به ما امکان دسترسی به تاریخ و زمان فعلی را می دهد. سپس به پایین برنامه خود بروید و این تابع را اضافه کنید:

drawTime = function(time)
if time == null then time = dateTime.now[-8:] for i in time.indexes
if time[i] == “:” then
drawColon i
else
drawDigit time[i].val, i
end if
end for
end function

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این رشته زمان داده شده را رسم می کند، یا اگر به آن یکی ندهید، زمان فعلی را به عنوان 8 رقم آخر دریافت می کند. dateTime.now. سپس روی آن رشته حلقه می زند و عبارت را فرا می خواند drawColon و drawDigit توابعی که قبلا تعریف کردیم

این را اجرا کن، clear صفحه نمایش و سپس وارد شوید drawTime. باید ببینید زمان فعلی در گوشه پایین سمت چپ ظاهر می شود. تقریبا تمام شد!

برنامه اصلی

در نهایت، با در دست داشتن تمام این توابع کمکی، آماده ساختن برنامه اصلی هستیم. edit کد خود را، و این را به پایین اضافه کنید:

clear
//gfx.scale = 8
gfx.scrollX = -150; gfx.scrollY = -350
gfx.color = color.red
while true
drawTime
wait
end while

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این کار با پاک کردن صفحه و پیکربندی PixelDisplay اصلی (با نام مستعار gfx) با رنگ قرمز و موقعیت اسکرول. (به جای پیمایش صفحه نمایش، می‌توانستیم محاسبه X و Y را در روش‌های ترسیم خود نیز تغییر دهیم – با خیال راحت آزمایش کنید!) یک خط بیرونی نیز وجود دارد. gfx.scale = 8. اگر می‌خواهید بزرگ‌نمایی کنید و نگاه دقیق‌تری به ارقام خود داشته باشید، در صورت تمایل آن خط را لغو نظر کنید.

بعد از تمام این تنظیمات، حلقه اصلی ساده است: فقط برای همیشه حلقه می شود و تماس می گیرد drawTime در هر ثانیه.

وقتی آن را اجرا می کنید، باید نمایشگری مانند تصویر بالا ببینید. (برای خارج شدن از برنامه Control-C را فشار دهید.)

جلوتر بردن

این یک تمرین کوچک سرگرم کننده برای جدا کردن یک ورق اسپرایت، ساختن چند کمک طراحی و گرفتن زمان فعلی بود. اما همین ارقام و روش ترسیم را می توان برای بسیاری از اهداف دیگر استفاده کرد. چند ایده:

• یک تایمر شمارش معکوس برای بمب در یک بازی خنثی سازی بمب بسازید• یک ساعت روز قیامت بسازید که روزها، ساعت ها و دقیقه ها را تا انتخابات بعدی نشان دهد• نمایش امتیاز بازی در یک صفحه نمایش دیجیتال یکپارچهسازی با سیستمعامل• یک شبیه ساز CPU (مانند CHIP-8) با نمایشگرهای هگزا دسیمال دیجیتال برای وضعیت داخلی آن بسازید.

اینها فقط چند ایده هستند. آیا دیگری دارید؟ سؤالی در مورد هر چیزی که در اینجا ارائه شده است؟ آنها را در نظرات زیر ارسال کنید. کد نویسی مبارک!

gfx.clear color.blue
gfx.drawImage file.loadImage("/sys/pics/digits.png")
gfx.scale = 4

digitImage = file.loadImage("/sys/pics/digits.png")
dw = 10; dh = 18  // digit width and height
digits = []
for i in range(0,9)
    digits.push digitImage.getImage(i * dw, dh, dw, dh)
end for

drawDigit = function(value=0, col=0)
    x = col * dw
    y = 0
    gfx.drawImage digits[value], x, y, dw, dh,
      0, 0, dw, dh, gfx.color
end function

drawColon = function(col=0)
    x = col * dw
    y = 0
    gfx.fillEllipse x + dw/2 - 1, y+5, 2, 2
    gfx.fillEllipse x + dw/2 - 1, y+12, 2, 2
end function

     gfx.drawImage digits[value], x, y

import "dateTime"

drawTime = function(time)
    if time == null then time = dateTime.now[-8:]
    for i in time.indexes
        if time[i] == ":" then
            drawColon i
        else
            drawDigit time[i].val, i
        end if
    end for
end function

clear
//gfx.scale = 8
gfx.scrollX = -150; gfx.scrollY = -350
gfx.color = color.red
while true
    drawTime
    wait
end while