پرچمداران

در کتابخانه‌ی SFML فونت‌ها می‌توانند از طریق فایل، حافظه و یا جریان ورودی مشخصی بارگذاری شوند و توسط رایج‌ترین فونت‌ها پشتیبانی می‌شوند. جهت اعلان یک فونت جدید در این کتابخانه کافی است کُد زیر را در نظر داشته باشید: sf::Font font; در ادامه برای بارگذاری یک فونت به صورت زیر عمل می‌کنیم: font.loadFromFile("arial.ttf"); در قالب یک دستور شرطی: // Load it from a file if (!font.loadFromFile("arial.ttf")) { // error... } برای استفاده از فونت و قالب‌های سفارشی نیاز است تا از کلاس sf::Text نمونه گیری شود، بنابراین در ادامه مثال زیر نشان می‌دهد که نمونه‌ای از کلاس Text ایجاد و با فونت مربوطه ترکیب شده است. sf::Text MyText; کلاس sf::Text دارای توابع عضوی مانند setFont، setCharacterSize، setStyle و موارد مشابه دیگری می‌باشد که در تولید ظاهر سفارشی بر روی یک متن اعمال می‌شوند. در ادامه مثال فوق نمونه‌ای از نحوه‌ی ترکیب این کلاس می‌باشد. sf::Text MyText; MyText.setFont(font); MyText.setString("Hello, My name is Kambiz :)"); MyText.setCharacterSize(14); MyText.setStyle(sf::Text::Regular); MyText.setColor(sf::Color::White); توجه داشته باشید که برای رسم محتوای مورد نظر باید توسط متُد draw آن را به کلاس RenderWindow ارسال کنید. برای این کار کافی است از تابع draw استفاده شود به صورت زیر: window.draw(MyText); کد نهایی این مثال به صورت زیر است: #include <SFML/Window.hpp> #include <SFML/Graphics.hpp> #include <iostream> int main() { sf::RenderWindow window(sf::VideoMode(640, 480), "Hello world!"); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (sf::Keyboard::isKeyPressed(sf::Keyboard::Escape)) window.close(); } sf::Font font; font.loadFromFile("arial.ttf"); // Create a text sf::Text MyText; MyText.setFont(font); MyText.setString("Hello, My name is Kambiz :)"); MyText.setCharacterSize(14); MyText.setStyle(sf::Text::Regular); MyText.setColor(sf::Color::White); window.clear(sf::Color::Black); window.draw(MyText); window.display(); } return 0; } برنامه را کامپایل و اجرا کنید، پیغام شما در سطر اول پنجره‌ی تولید شده نمایش داده خواهد شد.

همانطور که میدانید کتابخانه‌ی OpenCV کتابخانه‌ای قدرتمند در زمینه پردازش است این پردازش شامل مواردی مانند پردازش تصویر، پردازش ویدیو، سیستم تشخیص چهره ، تشخیص حرکت، الگورریتم‌های گوناگون مانند الگوریتم گراف و... است. بیشتر تمرکز این کتابخانه بر روی پردازش تصویر است که میتوان گفت به خوبی در این زمینه نمایان شده است. برای اینکه بتوانیم از این کتابخانه استفاده کنیم باید آن را در محیطی که کدنویسی می‌کنیم وارد کنیم که محیط مورد نظر در این اموزش ویژال استویو است. برای این منظور ویژوال استودیو رو باز کنید و New Project رو انتخاب کنید از پنجره ای که باز می‌شود قسمت Other Languages و ++Visual C و General را انتخاب کنید در این قسمت باید یک پروژه خالی بسازید پس Empty Project و نام و مسیر پروژه را انتخاب کنید و Ok را بزنید پس از ان از قسمت View و Solution Explorer را انتخاب کنید روی پروژه خود کلیک راست کنید و گزینه Manage NuGet Packages را انتخاب کنید در اینجا باید به اینترنت متصل باشید تا بتوان کتابخانه ی مورد نظر را دانلود کرد در کادر بالای پنجره باز شده عبارت OpenCV را بنویسید و پس از جستجو اخرین نسخه از این کتابخانه را دانلود کنید مراحل نصب و پیکربندی پس از دانلود بصورت خودکار انجام می‌شود پس از نصب ما می‌توانیم کد نویسی خود را با این کتابخانه شروع کنیم برای اینکه مطمئن شویم کتابخانه بصورت صحیح نصب شده است باید ان را تست کنیم برای این کار به یک فایل منبع نیاز داریم پس بر روی پوشه ی Source کلیک راست کرده گزینه Add را انتخاب کرده سپس بر روی گزینه New Item کلیک کرده و در پنجره باز شده ++File C را انتخاب کنید در پایین پنجره نام فایل را انتخاب کنید و Ok را بزنید اکنون کد زیر را در برنامه خود وارد کنید و اجرا کنید : #include <opencv2\opencv.hpp> #include <Windows.h> using namespace cv; int main() { Mat image_read = imread("beautiful-sunset-sunrise-photo-5.jpg", IMREAD_COLOR); imshow("Show", image_read); ShowWindow(GetConsoleWindow(), SW_HIDE); waitKey(0); } در ورودی اول تابع imread مسیر تصویر را بدهید که تصویر مورد نظر در این مثال در پوشه پروژه است.

همانطور که می‌دانید در بازی‌های رایانه‌ای مدیریت حرکت کاراکتر یا شیء در محیط توسط کلید‌های روی صفحه کلید و یا دسته‌ی بازی مدیریت می‌شوند. در این پست چگونگی واکنش نشان دادن به فشرده شدن کلید‌های بالا (رو به جلو)، پایین (رو به عقب)، چپ و راست را بررسی می‌کنیم. ابتدا توابع مورد نیاز را جهت نمایش در خروجی پیاده سازی می‌کنیم: void MoveToUp(){ std::cout << "Moved to Up!" << std::endl; } void MoveToDown(){ std::cout << "Moved to Down!" << std::endl; } void MoveToLeft(){ std::cout << "Moved to left!" << std::endl; } void MoveToRight(){ std::cout << "Moved to right!" << std::endl; } void Fire(){ std::cout << "Shooted! Boooom!" << std::endl; } سپس تحت کلاس sf::Keyboard آن‌ها را مدیریت می‌کنیم: if (sf::Keyboard::isKeyPressed(sf::Keyboard::Left)) { // move left... MoveToLeft(); } else if (sf::Keyboard::isKeyPressed(sf::Keyboard::Right)) { // move right... MoveToRight(); } if (sf::Keyboard::isKeyPressed(sf::Keyboard::Up)) { // move up... MoveToUp(); } if (sf::Keyboard::isKeyPressed(sf::Keyboard::Down)) { // move down... MoveToDown(); }

فرض بر اینکه قرار است تابع یا کلاس شلیک توسط دسته‌ی بازی اجرا شود. ابتدا باید مطمئن باشید که دسته‌ی بازی به سیستم متصل و توسط سیستم عامل شناسایی شده است. برای این منظور دستور زیر را خواهیم داشت: if (sf::Joystick::isConnected(0)) { // joystick number 0 is connected } سپس تحت یک دستور ساده و شرطی می‌توان تابع مورد نظر را با فشرده شدن کلید روی دسته اجرا کرد: if (sf::Joystick::isButtonPressed(0, 1)) { Fire(); } در ادامه مثالی زده‌ایم که اطلاعات دسته‌ی متصل شده را گرفته و در نهایت با فشرده شدن کلید روی آن تابع Fire اجرا می‌شود.? #include <SFML/Window.hpp> #include <iostream> void GetDeviceInfo(){ if (sf::Joystick::isConnected(0)) { //get information about the joystick sf::Joystick::Identification id = sf::Joystick::getIdentification(0); std::cout << "\nVendor ID: " << id.vendorId << "\nProduct ID: " << id.productId << std::endl; sf::String controller("Joystick Use: " + id.name); } } void Fire(){ std::cout << "Shooted! Boooom!" << std::endl; } int main() { sf::Window window(sf::VideoMode(640, 480), "Hello world!"); GetDeviceInfo(); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (event.type == sf::Event::KeyPressed) window.close(); } if (sf::Joystick::isButtonPressed(0, 1)) { Fire(); } // check the type of the event... switch (event.type) { // window closed case sf::Event::Closed: window.close(); break; // key pressed case sf::Event::KeyPressed: std::cout << "Key pressed!" << std::endl; break; case sf::Event::MouseMoved: break; // we don't process other types of events default: break; } } return 0; }

با توجه به وجود کتابخانه‌های متعدد در سی‌پلاس‌پلاس در این پُست قصد داریم آموزش‌هایی در رابطه با نحوهٔ راه اندازی انواع کتابخانه‌ها را در سی‌پلاس‌پلاس توضیح دهیم. محیط‌های توسعه جهت نصب Visual Studio و Qt Creator خواهند بود. در صورتی که نیاز است کتابخانه‌ای را به صورت سفارشی کامپایل کنید نکاتی را باید مورد توجه قرار دهید که در ادامه آمده‌اند. قبل از هر چیز نیاز است توضیحاتی در رابطه با انواع کتابخانه‌ها داده شود. کتابخانه‌ها برای اینکه در پروژه مورد استفاده قرار بگیرند نیاز است آن‌ها از سمت منبع خود کامپایل و ساخته شوند. البته در این فرآیند باید توجه داشته باشید که نوع معماری در پیکربندی یک کتابخانه بسیار مهم است. برای مثال اگر قرار است کتابخانه‌ای را بر روی یک پروژه‌ای که تحت معماری x64 پیکربندی شده است و در وضعیت release منتشر شود، در این صورت حتماً باید کتابخانه مورد نظر تحت همین پیکربندی کامپایل شود. کتابخانه‌ها ممکن است خودشان وابستهٔ کتابخانه‌های دیگری باشند. برای مثال بخشی از ماژول کتابخانه Boost و Poco وابستهٔ کتابخانهٔ OpenSSL می‌باشد. و یا بخشی از کتابخانهٔ MySQL وابستهٔ کتابخانهٔ Boost می‌باشد. بنابراین قبل از پیکربندی پروژه تحت هر کتابخانه‌ای مطمئن شوید که پیش نیازات آن را در اختیار داشته باشید. توجه داشته باشید که حتماً راهنمای کتابخانهٔ مورد نظر خود را جهت نحوهٔ پیکربندی مطالعه نمایید، زیرا هیچ روش عامیانه‌ای وجود ندارد که بر روی تمامی کتابخانه‌ها صادق باشد. با توجه به نکات بالا آموزش لازم جهت پیکربندی و راه اندازی کتابخانه‌ها را تحت دو گزینهٔ Boost و MFSL ادامه می‌دهیم: نسخهٔ مورد نظر کتابخانهٔ مورد نظر را از این بخش دریافت کنید. فایل‌ دریافت شده را استخراج و در یک مسیر مشخصی مانند C://کتابخانهٔ شماکپی کنید. محیط کنسول در سیستم عامل را باز کنید، پیشنهاد می‌شود از Visual Studio Cross Tools Command Prompt استفاده کنید. به مسیر کتابخانه تحت دستور cd رفته و وارد آن شوید. در این مرحله نیاز است تا قبل از ساخت کتابخانه آن را پیکربندی کنید، بنابراین دستور زیر را اجرا خواهیم کرد: ./configure دقت کنید که این مرحله معمولاً در کتابخانه‌ها متفاوت می‌باشد، برای مثال در کتابخانهٔ Boost فایلی به نام bootstrap.bat متخص ویندوز و فایل bootstrap.sh برای محیط‌های یونیکس موجود است که وظیفهٔ پیکربندی و تولید فایل ساخت را بر عهده دارد. البته در نظر داشته باشید که این چنین پیکربندی در کتابخانه‌های خاص ممکن است و در بیشتر آن‌ها باید با دستورات configure و فلگ‌های موجود در هر یک از آن‌ها اقدام به پیکربندی کنید. بنابراین با توجه این مورد می‌توانید آموزش لازم را در این بخش پیگیری نمایید. بعد از پیکربندی دستور make، nmake، cmake و یا qmake متناسب با نوع ابزار سازنده باید اجرا شود تا کتابخانه بر اساس پیکربندی تنظیم شده شروع به کامپایل و ساخت کند. این مرحله معمولاً بر اساس قدرت پردازشی سیستم شما زمان متغیری خواهد داشت. بعد از به اتمام رسیدن زمان کامپایل کتابخانهٔ مورد نظر فایل‌های lib را تحت پسوند‌های .dll در ویندوز و .lib و .so در لینوکس و یونیکس تولید خواهد کرد که بهتر است مسیر include برای هدر‌های کتابخانه و lib برای فایل‌های کامپایل شده مشخص شود. طبق شرایط ذکر شده برای مثال ما از کتابخانهٔ SDL در این بخش استفاده خواهیم کرد. نسخهٔ از پیش کامپایل شده مربوط به آن را از این بخش دریافت و استخراج نمایید. قست اول (نصب و راه اندازی تحت محیط Visual Studio) وارد محیط ویژوال استودیو شده و بعد از ایجاد پروژه بر روی پروژه راست کلیک و گزینهٔ Properties را انتخاب کنید، به زبانه C/C++ رفته و زبانه General گزینهٔ Additional Include Directories را انتخاب کنید. در ادامه مسیر include را از کتابخانهٔ SDL به پروژه معرفی کنید. مرحله کنونی را تایید کنید، و به زبانهٔ Linker و سپس General بروید، در این بخش گزینهٔ Additional Linker Library را انتخاب و مسیر Lib را از کتابخانهٔ SDL معرفی کنید. در این مرحله فایل‌های کتابخانه معرفی شده‌اند. به زبانهٔ General و Input برگشته و در بخش Additional Dependences فایل‌های SDL2.lib و SDL2_image.lib و SDL2main.lib و SDL2_ttf.lib را معرفی کنید. در نهایت فایل‌های dll موجود در پوشهٔ lib کتابخانه را در کنار فایل اجرایی کپی کنید. قست دوم (نصب و راه اندازی تحت محیط Qt Creator) پروژه خود را ایجاد و بر روی نام پروژه راست کلیک کنید. گزینهٔ Add Library و سپس External Library را بزنید. طبق شرایط قبل گزینه‌های lib را همراه با include به پروژهٔ خود اضافه نمایید. کد مربوط به فایل .pro به صورت زیر خواهد بود win32: LIBS += -L$$PWD/../../../../SDL2-2.0.8/lib/x86/ -lSDL2 -lSDL2main -lSDL2_ttf INCLUDEPATH += $$PWD/../../../../SDL2-2.0.8/lib/x86 DEPENDPATH += $$PWD/../../../../SDL2-2.0.8/lib/x86 طبق روش کامپایل برنامه را کامپایل کنید و قبل از اجرا فایل‌های dll یا lib را نسبت به پلتفرم خود در کنار فایل اجرایی پروژه قرار دهید. https://iostream.ir/forums/topic/33-روش-افزودن-کتابخانه‌های-دیگر-به-محیط-qt-creator/ روش فوق در بیشتر کتابخانه‌ها قابل انجام است.

معمولاً در بازی سازی و یا تولید اپلیکیشن‌های کاربردی مدیریت رخداد‌ها بسیار مهم بوده و برای استفاده و نشان دادن واکنش بر یک عمل خاص نیازمند توابع و کلاس‌های پیچیده‌ای می‌باشد که در موتور‌های بازی سازی پیاده سازی می‌شوند. کلاس Event در قالب sf::Event تمامی اطلاعات رخداد از طرف سیستم را ارائه می‌دهد. برای مثال فشرده شدن کلیدی بر روی صفحه کلید و یا حرکات دسته‌ی بازی و مواردی از این قبیل را می‌توان توسط این ماژول مدیریت کرد. یک sf::Event به طور کلی نمونه ای از انواع رخداد‌ها را شامل می‌شود (حرکات ماوس، فشرده شدن کلید، بسته شدن پنجره و غیره...) همگی حزئیاتی از این رویداد می‌باشند. برای مثال وقتی شما یک رویداد فشرده شدن کلیدی را دریافت می‌کنید، بعد از آن باید عضوی از event.key و یا دیگر اعضای مرتبط با event.mouseMove و یا event.text را فراخوانی کنید. برای مثال: sf::Event event; while (window.pollEvent(event)) { // Request for closing the window if (event.type == sf::Event::Closed) window.close(); // The escape key was pressed if ((event.type == sf::Event::KeyPressed) && (event.key.code == sf::Keyboard::Escape)) window.close(); // The window was resized if (event.type == sf::Event::Resized) doSomethingWithTheNewSize(event.size.width, event.size.height); // etc ... } نوع شمارنده‌ی Closed زمانی مورد استفاده قرار می‌گیرد که پنجره درخواست بسته شدن را درخواست کرده باشد. شمارنده‌ی KeyPressed در هنگام درخواست کلیدی مورد استفاده قرار می‌گیرد. و یا Keyboard::Escape اشاره به فشرده شدن کلید Esc بر روی صفحه کلید را دارد. نوع Resized زمانی که پنجره درخواست تغییر اندازه را داشته باشد استفاده خواهد شد. نوع TextEntered زمانی که کاراکتری وارد شود عمل می‌کند. یا انواعی مانند JoystickConnected که در زمان اتصال دسته‌ی بازی عمل می‌کند. در ادامه لیستی از انواع شمارشی رویداد‌ها آورده شده است. فرض کنیم در محیط بازی یا برنامه‌ی خود قرار است مختصات x و y حرکت ماوس را دریافت نماییم. با استفاده از شرایط رخداد‌ها و به کارگیری کلاس sf::Mouse می‌توان این کار را به راحتی انجام داد. تابعی به صورت زیر خواهیم داشت: void MousePosition(){ sf::Mouse ms; std::cout << "Mouse Position X : " << ms.getPosition().x << "\t Y : " << ms.getPosition().y << std::endl; } کلاس Mouse با استفاده از توابع عضو با نام‌ getPosition().x و getPosition.y مختصات x و y حرکت ماوس در محیط پنجره ساخته شده را برمی‌گرداند. کُد تکمیلی: #include <SFML/Window.hpp> #include <iostream> void MousePosition(){ sf::Mouse ms; std::cout << "Mouse Position X : " << ms.getPosition().x << "\t Y : " << ms.getPosition().y << std::endl; } int main() { sf::Window window(sf::VideoMode(640, 480), "Hello world!"); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (event.type == sf::Event::KeyPressed) window.close(); } // check the type of the event... switch (event.type) { // window closed case sf::Event::Closed: window.close(); break; // key pressed case sf::Event::KeyPressed: std::cout << "Key pressed!" << std::endl; break; case sf::Event::MouseMoved: MousePosition(); break; // we don't process other types of events default: break; } } return 0; } کُد فوق را اجرا کرده و نتیحه آن با حرکت ماوس در داخل پنجره به صورت زیر خواهد بود: Mouse Position X : 746 Y : 567 Mouse Position X : 746 Y : 567 Mouse Position X : 746 Y : 567 Mouse Position X : 746 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 729 Y : 567 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 707 Y : 561 Mouse Position X : 679 Y : 551 Mouse Position X : 679 Y : 551 Mouse Position X : 679 Y : 551 Mouse Position X : 679 Y : 551

شاید لازم باشد تعداد کلید‌های موجود را بر روی دسته‌ی مورد نظر دریافت کنیم، کُد مربوطه به صورت زیر خواهد بود: bool hasZ = sf::Joystick::hasAxis(0, sf::Joystick::Z); std::cout << "Button count: " << buttonCount << std::endl; در صورتی که نیاز باشد تعداد محور‌های موجود بر روی دکمه‌های چرخشی (یا همان آنالوگ‌ها) را دریافت کنیم، در این صورت به شکل زیر خواهد بود: bool hasZ = sf::Joystick::hasAxis(0, sf::Joystick::Z); std::cout << "Has a z-axis: " << hasZ << std::endl; bool hasY = sf::Joystick::hasAxis(0, sf::Joystick::Y); std::cout << "Has a y-axis: " << hasY << std::endl; برای دریافت حداکثر دستگاه‌های ورودی پشتیبانی شده توسط SFML دستور زیر مورد استفاده قرار خواهد گرفت: unsigned int deviceCount = sf::Joystick::Count; std::cout << "Maximum number of supported joysticks: " << deviceCount;

کتابخانه‌ی SFML به عنوان یک واسط کامپوننت‌های مفیدی را برای سیستم فراهم می‌کند که جهت توسعه برنامه‌های گرافیکی و بازی سازی بسیار مفید است. ماژول‌های این کتابخانه با عناوین System, Window, Graphics, Audio و Network به صورت چند-سکویی ارائه شده‌اند. جهت دریافت نسخه‌‌ی مورد نظر از این بخش اقدام کنید. بعد از دریافت در یکی از محیط‌های توسعه پروژه‌ای را ایجاد و مسیر‌های مرتبط با include و lib به پروژه‌ی خود معرفی کنید. به عنوان مثال در محیط Qt Creator به صورت زیر خواهد بود: win32: LIBS += -L$$PWD/../../YourPath/SFML-2.5.0/lib/ sfml-graphics.lib sfml-window-s.lib sfml-window.lib sfml-system-s.lib sfml-system.lib INCLUDEPATH += $$PWD/../../YourPath/SFML-2.5.0/include DEPENDPATH += $$PWD/../../YourPath/SFML-2.5.0/include توجه داشته باشید برای معرفی ماژول‌های ذکر شده می بایست آن‌ها را در بخش lib معرفی کنید. آموزش نصب و راه اندازی کتابخانه در ++C

ساخت یک کامپوننت آپلود در انگولار(Uploader Component) می‌تواند کار سختی باشد. به این دلیل که با فایل ها در جاوا اسکریپت سر و کار داریم. در این آموزش یک روش خوب را برای آپلود فایل‌ها آموزش می‌دهم. به علاوه این که چطور از روند آپلود در لحظه خبر داشته باشیم و با نمایش درصد داده‌های آپلود شده تجربه‌ی خوبی را برای کاربران فراهم کنیم. نکته: در این آموزش من به مباحث سمت سرور و دریافت فایل توسط آن نمی‌پردازم و به این شکل در نظر میگیرم که شما سروری آماده‌ی دریافت فایل دارید. حالا در سمت کلاینت که انگولار 6 یا بالاتر است، می‌خواهیم این فایل را با یک درخواست از نوع POST به سمت سرور بفرستیم و در حین آپلود گزارشی از روند آپلود در انگولار را نمایش دهیم. در این مورد من از کامپوننتی (Component) از انگولار متریال به نام نوار پیشرفت (Progress Bar) استفاده می‌کنم. می‌توانید نمونه نهایی این پروژه که برای آموزش ساخته شده را در مخزن گیت‌هاب مشاهده کنید. ساخت پروژه انگولار برای شروع، در دایرکتوری (Directory) مد نظر، پروژه‌ی انگولار خود را با استفاده از رابط خط فرمان انگولار (Angular CLI) به نام آپلودر می‌سازیم. پس دستور زیر را وارد می‌کنیم: ng new uploader وابستگی‌های خارجی از آنجایی که ما نیاز به عناصر پیچیده‌ی رابط کاربری (UI)، مثل نوار پیشرفت داریم؛ تصمیم گرفتم تا از کتابخانه‌ی انگولار متریال استفاده کنیم. برای نصب این کتابخانه همچنین انیمیشن‌ها از دو دستور زیر استفاده کنید: npm install --save @angular/material @angular/cdk npm install --save @angular/animations برای این که بتوانیم از سی‌اس‌اس (CSS) این ماژول استفاده کنیم، لازم است که آن را در فایل استایل سراسری خود وارد (Import) کنیم: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; ساخت ماژول (Module) امکانات برای این که کامپوننت خوب ما تا حد ممکن قابلیت استفاده‌ی دوباره را داشته باشد، تصمیم گرفتم آن را در یک ماژول جدا بسته‌بندی کنم. برای ساخت این ماژول دستور زیر را استفاده کنید: ng generate module upload ساخت کامپوننت آپلود در انگولار برای ساخت کامپوننت آپلود کافی است از دستور زیر استفاده کنید. همانطور که از نام این کامپوننت مشخص است، برای آپلود فایل‌های (File) خود از یک دیالوگ استفاده خواهیم کرد. ng generate component upload/dialog افزودن ماژول‌های خارجی بعد، نیاز خواهیم داشت که تعداد زیادی ماژول خارجی را در ماژول جدید خود یعنی upload.module.ts وارد کنیم. برای مثال، نیاز داریم تا تمام عناصر رابط کاربری‌ای که استفاده خواهیم کرد را به این شکل وارد کنیم: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { DialogComponent } from './dialog/dialog.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule } from '@angular/material'; @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent] }) export class UploadModule { } توجه کنید در صورتی که دقیقاً دستور‌های گفته شده را وارد کردید، کامپوننت شما توسط CLI در ماژول upload تعریف خواهد شد. درصورتی که شما از ماژولی استفاده نمی‌کنید، کامپوننت جدید شما در فایل app.module.ts تعریف می‌شود. همچنین برای این که کامپوننت دیالوگ ما به خوبی کار کند لازم است تا آن را به عنوان EntryComponent در ماژول خود اضافه کنیم. این کار در ماژول نمونه بالا انجام شده است. حالا برای این که بتوانیم از کامپوننت جدید خود استفاده کنیم باید ماژول تعریف شده را در app.module.ts وارد کنیم تا به AppComponent اضافه شود. سرویس آپلود در انگولار قبل از ساخت محتوای نمایشی کامپوننت آپلودر، لازم است ابتدا منطق آپلود را پیاده‌سازی کنیم. این منطق در سرویس آپلود قرار خواهد گرفت. آن سرویس را با استفاده از دستور زیر ایجاد می‌کنیم: ng generate service upload/upload داخل این سرویس نیاز داریم تا از HttpClient استفاده کنیم. این سرویس تنها دارای یک تابع به نام upload خواهد بود و برای هر فایل یک Observable برمی‌گرداند. این Observable ها حاوی روند آپلود و درصد آن خواهد بود. /** * @description A Http request to upload files * @param file */ upload(file: File): Observable<any> { const formData: FormData = new FormData(); let url = ''; formData.append('video', file, file.name); url = 'http://localhost:1500/api/upload/videos'; const req = new HttpRequest('POST', url, formData, { reportProgress: true, responseType: 'text' }); const progress = new Subject<any>(); this.http.request(req).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { const percentDone = Math.round(100 * event.loaded / event.total); progress.next({ percent: percentDone, loaded: event.loaded }); } else if (event instanceof HttpResponse) { progress.complete(); } }); return progress.asObservable(); } توجه داشته باشید که برای استفاده از این تابع باید موارد زیر را وارد کنید: import { HttpClient, HttpEventType, HttpResponse, HttpRequest } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; همچنین نمونه‌ای از HttpClient را در سازنده (Constructor) کلاس تعریف می‌کنیم تا بتوانیم درخواست http ارسال کنیم: constructor(private http: HttpClient) { } در تابع آپلود، فایل دریافتی را در یک فرم بسته بندی کرده، یک درخواست http از نوع POST ساخته و آن درخواست را همراه با فرم به عنوان داده‌ی همراه درخواست ارسال می‌کنیم. سپس به روند آپلود فایل گوش می‌دهیم، درصد آپلود را محاسبه می‌کنیم و مقدار آن را به جریان داده پاس می‌دهیم. حالا برای فایل مورد نظر observable ای از روند آپلود را در اختیار داریم. سرانجام نیاز داریم تا آن سرویس را به عنوان provider در ماژول خود اضافه کنیم. برای این کار کافی است سرویس خود را در فایل ماژول وارد (Import) کنیم (اگر توسط CLI وارد نشده بود) و آن را به این صورت در قسمت providers ماژول معرفی کنیم: @NgModule({ imports: [ CommonModule, HttpClientModule, BrowserAnimationsModule, MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule ], declarations: [DialogComponent], exports: [DialogComponent], entryComponents: [DialogComponent], providers: [UploadService] }) export class UploadModule { } نکته: در پروژه نمونه برای این که در App Component از دکمه‌های متریال استفاده می‌شود، MatButtonModule را در قسمت exports هم قرار دادم. باز کردن دیالوگ آپلودر برای باز کردن دیالوگ در فایل .ts کامپوننت اصلی یعنی App ماژول دیالوگ و کامپوننت دیالوگ خود را وارد ( import) می‌کنیم: import { MatDialog } from '@angular/material'; import { DialogComponent } from './upload/dialog/dialog.component'; حالا در سازنده کلاس (constructor) نمونهٰ‌ای از MatDialog تعریف می‌کنیم: constructor(public dialog: MatDialog) { } با استفاده از تابع زیر می‌توانید دیالوگ ساخته شده توسط خود را باز کنید. این تابع را در کلاس کامپوننت App قرار می‌دهیم: openDialog() { this.dialog.open(DialogComponent, { width: '720px' }); } برای استفاده از این تابع تنها کافی است آن را به رویداد (event) کلیک روی دکمه بایند (Bind) کنیم. پس عبارت زیر را روی تگ دکمه‌ای که برای باز کردن دیالوگ در نظر گرفته‌ایم قرار می‌دهیم: (click)="openDialog()" اضافه کردن فایل‌ها اولین کاری که باید در این قسمت انجام دهیم اضافه کردن یک عنصر input از نوع فایل به دیالوگ است. این عنصر input تنها راه تحریک منوی انتخاب فایل سیستم عامل برای باز شدن است. <input type="file" #file style="display: none" (change)="onFilesAdded()" multiple /> اما برای این که ظاهر زشتی دارد قرار است که آن را با استفاده از CSS مخفی کنیم. سپس آن را با استفاده از رویداد کلیک، از طریق منطق کامپوننت باز می‌کنیم. برای این کار در فایل ts کامپوننت یک ارجاع به آن عنصر نیاز داریم. برای این کار از دایرکتیوی (directive) به نام ViewChild استفاده می‌کنیم. همچنین متغیری نیاز داریم تا فایل را در آن ذخیره کنیم. همانطور که می‌بینید برای استفاده از سرویس آپلود نمونه‌ای از آن را در سازنده کلاس تعریف کرده‌ام. import { Component, OnInit, ViewChild } from '@angular/core'; import { UploadService } from '../upload.service'; @Component({ selector: 'app-dialog', templateUrl: './dialog.component.html', styleUrls: ['./dialog.component.scss'] }) export class DialogComponent implements OnInit { @ViewChild('file') file; addedFile; constructor(private uploadService: UploadService) { } ngOnInit() { } } حالا با شبیه‌سازی یک کلیک منوی انتخاب فایل سیستم عامل را باز می‌کنیم. addFiles() { this.file.nativeElement.click(); } طبق عنصر input که بالاتر نوشته‌ام، هنگامی که انتخاب فایل توسط کاربر انجام شد تابعی به نام onFilesAdded صدا زده می‌شود که شکل زیر را دارد: onFilesAdded() { this.addedFile = this.file.nativeElement.files[0]; console.log('Added File:', this.addedFile); } حالا فایل ذخیره شده را داریم که آماده‌ی آپلود است برای آپلود تابعی را تعریف کرده و از سرویسی که قبلا تهیه کردیم استفاده می‌کنیم. برای آن که درصد فایل آپلود شده و مقدار داده‌ی آپلود شده را داشته باشیم دو متغیر جدید تعریف می‌کنیم و به شکل زیر درصد آپلود و مقدار داده آپلود شده را بدست می‌آوریم: upload() { const progress = this.uploadService.upload(this.addedFile); progress.subscribe((result) => { this.percent = result.percent; this.loaded = result.loaded; }); } حالا برای مثال می‌توانیم روند پیشرفت آپلود را به شکل زیر به نمایش بگذاریم: <mat-progress-bar mode="determinate" [value]="percent"></mat-progress-bar> نمونه‌ی پروژه‌ی آماده شده برای این آموزش را می‌توانید از اینجا دریافت کنید. امیدوارم آموزش مفیدی بوده باشه. خوشحال می‌شوم نظرات شما را درباره این آموزش بدانم.

با توجه به موضوع قبل بعد از نصب و راه اندازی کتابخانه برای اینکه ساده ترین مثال ممکن را توضیح دهیم در پروژه‌ی خود در فایل main.cpp کد زیر را وارد کنید. #include <iostream> #include <SFML/Window.hpp> int main() { sf::Window window(sf::VideoMode(640, 480), "Hello world!"); std::cout << "Window is created!" << std::endl; return 0; } در کتابخانه‌ی SFML تمامی کلاس‌ها در هدر‌های مخصوص خود قرار دارند، همانند استاندارد تمامی کتابهانه‌های سی‌پلاس‌پلاس ? بنابراین جهت نمایش یک پنجره ساده با ابعاد مشخص ما نیاز به هدر Window.hpp خواهیم داشت که در کُد بالا وارد شده است. از کلاس فوق نمونه گیری کرده و سپس تحت مشخصه‌ی VideoMode ابعاد و عنوان پنجره‌ی خود را وارد می‌کنیم. برنامه را اجرا کنید در صورتی که کتابخانه‌ی شما مشکلی نداشته باشد پنجره‌ی شما با مشخصات وارد شده نمایان خواهد شد. دقت کنید که برای ثابت نگه داشتن در یک بازه‌ی زمانی بهتر است از کد دستوری زیر برای نگه‌داری پنجره در زمان اجرا استفاده شود که هیچ قدرت قابل توجهی را از جانب پردازنده نمی‌طلبد: sf::sleep(sf::seconds(3)); کُد بهینه شده با توجه به ایجاد رخداد کلیدی برای پایان دادن برنامه به صورت زیر خواهد بود: #include <SFML/Window.hpp> int main() { sf::Window window(sf::VideoMode(640, 480), "Hello world!"); while (window.isOpen()) { sf::Event event; while (window.pollEvent(event)) { if (event.type == sf::Event::KeyPressed) window.close(); } } return 0; } در داخل حلقه‌ی while در صورتی که رخداد فشرده شدن کلیدی از طرف دستگاه ورودی مانند صفحه کلید رُخ دهد، پنجره بسته خواهد شد. کُد مربوطه را اجرا کنید، در صورتی که مشکلی وجود نداشته باشد پنجره ساخته شده شما نمایان و با فشرده شدن کلیدی از صفحه کلید بسته خواهد شد.? در ادامه آموزش‌های لازم در بخش مربوطه ارائه خواهد شد.

طبق موضوع قبلی جهت راه اندازی و استفاده از این کتابخانه برای آزمایش ساده ترین کُد ممکن در این کتابخانه در نسخه‌ی ویندوز یکی از محیط‌های توسعه نرم‌افزار مانند Qt Creator یا Visual Studio را اجرا کرده و یک پروژه ساده ایجاد کنید. ما در این مثال قرار است یک پنجره با ابعاد مشخصی را نمایان سازیم که به صورت زیر خواهد بود. نیاز است هدر SDL را به این صورت به کد خود اضافه کنیم: #include <SDL.h> سپس کُد زیر نمونه ساده ای از نمایش پنجره تحت SDL خواهد بود که در تابع main فراخوانی شده است: #include "SDL.h" int main(int argc, char ** argv) { bool quit = false; SDL_Event event; SDL_Init(SDL_INIT_VIDEO); SDL_Window * window = SDL_CreateWindow("Hello, World!", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 640, 480, 0); SDL_Renderer * renderer = SDL_CreateRenderer(window, -1, 0); while (!quit) { SDL_WaitEvent(&event); switch (event.type) { case SDL_QUIT: quit = true; break; } } SDL_DestroyRenderer(renderer); SDL_DestroyWindow(window); SDL_Quit(); return 0; } شمارنده‌ی SDL_Event از هسته کتابخانه جهت مدیریت انواع رخداد‌ها می‌باشد. در ادامه کُد SDL_Init(SDL_INIT_VIDEO); جهت مقدار دهی اولیه است. جهت سفارشی سازی چنین بخشی بهتر است کُد آن به صورت زیر نوشته شود: if (SDL_Init(SDL_INIT_VIDEO) != 0){ std::cout << "SDL_Init Error: " << SDL_GetError() << std::endl; return 1; } در ادامه SDL_Window به عنوان نوع ساختار در SDL می‌باشد که با متد SDL_CreateWindow ترکیب و مقادیری چون عنوان، محور‌های y و x همچنین طول و عرض پنجره و در نهایت تنظیم فلگ وضعیت پنجره می‌باشد که به صورت پیش فرض بر روی مقدار ۰ تنظیم شده است. در صورتی که لازم باشد پنجره شما به صورت تمام صفحه نمایان شود کافی است فلگ آن را روی مقدار ۲ یا ۳ قرار دهید. جهت تولید (رندر) و ارسال پنجره به این مرحله کافی است از SDL_Renderer نمونه گرفته و پنجره‌ی خود را به متُد SDL_CreateRenderer ارسال کنید. در ادامه برای بررسی وضعیت حلقه‌ای تعریف شده است که در صورت رخداد خروج اجرا خواهد شد. while (!quit) { SDL_WaitEvent(&event); switch (event.type) { case SDL_QUIT: quit = true; break; } } در نهایت SDL_DestroyRenderer جهت نابود سازی زمینه‌ی تولید یک پنجره و تمامی موارد همراه آن و همچنین SDL_DestroyWindow جهت نابود سازی پنجره ساخته شده مورد استفاده قرار می‌گیرد که معمولاً در تمامی برنامه‌های تحت SDL مورد استفاده قرار خواهند گرفت. تابع SDL_Quit(); جهت پاکسازی تمامی موارد مقدار دهی شده زیر سیستمی مورد استفاده قرار می‌گیرد. برنامه را اجرا کنید، حال باید پنجره‌ای در ابعاد ۶۴۰ در ۴۸۰ پیکسل با عنوان Hello, World تولید و نمایش داده شود.?

کتابخانه‌ی SDL مخفف Simple DirectMedia Layer است که به صورت چند سکویی طراحی شده است که قدرت و سرعت بسیار زیادی در توسعه مالتی مدیا برای برنامه‌ها و بازی‌های رایانه ای دارد. توسط این کتابخانه می‌توانید مواردی چون صدا، ویدیو، دستگاه‌های ورودی، درایور سی دی و غیره را مدیریت کنید. همچنین این کتابخانه تحت Direct3D و OpenGL موارد ۳ بعدی را مدیریت می‌کند. نسخه‌های پایدار این کتابخانه ۲.۰.۸ می‌باشد که برای دریافت بر روی پلتفرم ویندوز 32 بیتی از این لینک و برای پلتفرم‌ 64 بیتی ویندوز از این لینک آن را دریافت کنید. برای پلتفرم macOS از این لینک برای دریافت اقدام کنید. دریافت کتابخانه برای پلتفرم لینوکس. توجه داشته باشید این کتابخانه به صورت پیشفرض تمامی ماژول‌های خود را همراه ندارد. برای مثال در صورتی که می‌خواهید با رندر بر روی متن و تصاویر کار کنید باید آن را از این بخش دریافت و در کنار کتابخانه‌ی اصلی قرار دهید. توجه داشته باشید که پوشه‌ی include و lib را بر اساس نوع معماری پردازنده و سیستم عامل خود مشخص کنید. SDL2Main.lib و SDL2.lib را نیاز خواهید داشت. در این مثال کُد فوق در فایل .pro برای محیط Qt Creator به صورت زیر می‌باشد. INCLUDEPATH += $$PWD/../../YourPath/SDL2-2.0.8/include DEPENDPATH += $$PWD/../../YourPath/SDL2-2.0.8/include win32: LIBS += -L$$PWD/../../YourPath/SDL2-2.0.8/lib/x64/ -lSDL2 win32: LIBS += -L$$PWD/../../YourPath/SDL2-2.0.8/lib/x64/ -lSDL2main جهت اجرای صحیح برنامه فایل SDL2.dll را در کنار فایل اجرایی برنامه‌ی خود کپی کنید. در ادامه‌ی این موضوع آموزش‌های مرتبط با این کتابخانه ارائه شده است. برای مثال (اولین برنامه) آموزش نصب و راه اندازی کتابخانه در ++C