اشتراکها
اشتراکها
StructureMap 4.0 منتشر شد
اشتراکها
دوره کار با Lucene
اشتراکها
15نکتهی مهم در مورد کروم DevTools
اشتراکها
استیو بالمر و ترک کامل مایکروسافت
مطالب
Vue CLI
تیم Vue یک ابزار را جهت scaffold سریع یک پروژه Vue، به صورت رسمی ارائه کردهاست. توسط این ابزار به صورت سریع میتوانیم ساختار یک پروژه استاندارد Vue را ایجاد کنیم.
چرا نیاز به Vue CLI داریم؟
- زیرا نیاز به build processهایی داریم که به ما امکان استفاده از ES6, SCSS و دیگر ویژگیهای عالی را خواهند داد.
- جهت ساخت و یکیسازی فایلهای تمپلیت
- بارگذاری نکردن تمامی فایلها به صورت یکجا در زمان Startup
- میتوانیم تسکهایی از قبیل Server-side rendering, code-splitting را انجام دهیم.
نصب Vue CLI
ابتدا مطمئن شوید که آخرین نگارش Node.js را نصب کردهاید. سپس جهت نصب Vue CLI، خط فرمان را گشوده و دستور زیر ذیل را صادر کنید:
npm install -g vue-cli
با اجرای فرمان فوق، ابزار CLI به صورت global و عمومی نصب خواهد شد. در ادامه میتوانیم با دستور vue list، لیستی از قالبهای رسمی را که توسط CLI قابل ایجاد هستند، مشاهده نمائید:
در اینجا ما از قالب webpack-simple استفاده خواهیم کرد. برای اینکار دستور زیر را جهت ایجاد یک پروژه بر اساس این قالب صادر کنید:
vue init webpack-simple dntVue
به این ترتیب در سریعترین زمان ممکن توانستیم یک برنامهی Vue را ایجاد کنیم:
در اینجا ساختار یک پروژه جدید Vue را مشاهده میکنید:
index.html: کار شروع و ارائه برنامه را انجام میدهد.
package.json: وابستگیهای npm برنامه را به همراه دارد.
src/App.vue: کامپوننت اصلی برنامه است.
پوشه src/assets: حاوی فایلهای استاتیک پروژه است.
src/main.js: نقطهی آغاز برنامه است.
webpack.config.json: تنظیمات وبپک جهت اجرای پروژه و بارگذاری ماژولهای موردنیاز.
اجرای برنامه
ابتدا نیاز است وابستگیهای برنامه دریافت شوند. اینکار را توسط دستور npm install و یا دستور yarn (در صورتیکه yarn را از قبل بر روی سیستم خود نصب کردهاید) انجام خواهیم داد:
npm install
بررسی فایلهای Vue
درون یک برنامهی Vue واقعی، فایلهایی با پسوند vue. وجود دارند. این فایل شامل تمپلیت، کدها و همچنین استایلهای یک کامپوننت میباشند.
<template> <div> <!-- Write your HTML with Vue in here --> </div> </template> <script> export default { // Write your Vue component logic here } </script> <style scoped> /* Write your styles for the component in here */ </style>
بنابراین درون فایلی با ساختار فوق، تمامی موارد مورد نیاز برای یک کامپوننت ویو را خواهیم داشت و به اصطلاح نیازی به context switching نخواهیم داشت؛ زیرا تمامی قسمتها را به صورت یکجا در یک محل در اختیار داریم و به راحتی میتوانیم تمرکز خود را بر روی کدها قرار دهیم. درون کامپوننت نیز میتوانیم کامپوننتهای موردنیاز را ایمپورت و از آن استفاده کنیم:
import { New } from "./components/New.vue"; export default { components: { New } }
Vue CLI 3
تا اینجا از نسخهی پایدار Vue CLI استفاده کردیم. نسخهی 3 آن هنوز در مرحلهی beta قرار دارد. در این نسخه امکانات و دستورات بیشتری اضافه شدهاست؛ از ایجاد یک پروژه ساده تا ایجاد یک پروژه مبتنی بر TypeScript. برای نصب و یا آپگرید میتوانید از دستور زیر استفاده کنید:
npm install -g @vue/cli
3.0.0-beta.11
ایجاد یک پروژه جدید
برای ایجاد یک پروژه جدید میتوانید دستور زیر را صادر کنید:
vue create my-project
Vue CLI v3.0.0-beta.11 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features
بعد از طی کردن مراحل، میتوانید قالب پروژهی ایجاد شده را به صورت یک preset داشته باشید تا در پروژههای آینده مجبور نباشید مراحل قبل را طی کنید. این preset درون یک فایل JSON به صورت زیر ذخیره خواهد شد و حاوی اطلاعات زیر است:
{ "useConfigFiles": true, "router": true, "vuex": true, "cssPreprocessor": "sass", "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "airbnb", "lintOn": ["save", "commit"] } } }
در حالت manually نیز میتوانید گزینههای بیشتری را برای تعیین نوع قالب پروژه، انتخاب نمائید. به عنوان مثال میتوان از TypeScript یا اینکه از lintter یا formatter خاصی برای کدها استفاده کرد:
در ادامه دیگر آپشنها را نیز میتوانید تعیین کرده و در نهایت به صورت یک قالب از پیش تعریف شده نیز پروژه را داشته باشید:
Zero-config Prototyping
یکی از قابلیتهای جالب Vue، امکان تهیه سریع prototype یا طرح اولیه میباشد. شاید اکثر اوقات نیاز داشته باشید یک ویژگی یا قابلیت خاص را با Vue تست کنید. در این موارد ممکن است از سایتی مانند CodePen استفاده کنید. اما توسط افزونهی cli-service-global میتوانید به صورت لوکال و بدون نیاز به راهاندازی یک پروژهی جدید، کدهای موردنیاز را آزمایش کنید. فرض کنید میخواهیم تمپلیت زیر را قبل از افزودن آن به پروژه، مورد تست قرار دهیم:
<!-- MyCard.vue --> <template> <div class="card"> <h1>Card Title</h1> <p>Card content goes here. Make sure it's not Lorem.</p> </div> </template>
npm install -g @vue/cli-service-global
vue serve MyCard.vue
خروجی:
مطالب
OpenCVSharp #5
استفاده از پنجرهی native خود OpenCV، روش مرسومی است در زبانهای مختلف برنامه نویسی که از OpenCV استفاده میکنند و این پنجره مستقل است از سکوی کاری مورد استفاده. اما شاید در دات نت علاقمند باشید که نتیجهی عملیات را در یک picture box استاندارد نمایش دهید. در ادامه، تبدیل تصاویر OpenCV را به فرمت دات نت، در دو قالب برنامههای WinForms و همچنین WPF، بررسی خواهیم کرد.
استفاده از OpenCVSharp در برنامههای WinForms به کمک PictureBoxIpl
یکی از اسمبلیهای کتابخانهی OpenCVSharp را که در پوشهی bin برنامه میتوان مشاهده کرد، OpenCvSharp.UserInterface.dll نام دارد. این اسمبلی حاوی یک picture box جدید به نام PictureBoxIpl است که میتواند تصاویری را با فرمت IplImage، دریافت کند.
میتوانید این picture box ویژه را از طریق منوی ToolBox -> Choose items و سپس صفحهی دیالوگ فوق، به نوار ابزار WinForms اضافه کرده و از آن استفاده کنید و یا میتوان با کدنویسی نیز به آن دسترسی یافت:
در اینجا تصویر مورد نظر را توسط کلاس IplImage بارگذاری کرده و سپس برای نمونه فیلتر Dilate را به آن اعمال کردهایم. سپس وهلهی جدیدی از کنترل PictureBoxIpl ایجاد و خاصیت ImageIpl آن، به تصویر بارگذاری شده، تنظیم و در آخر این picture box با کدنویسی به صفحه اضافه شدهاست.
یک نکته
هر نوع تغییری به iplImage پس از انتساب آن به خاصیت ImageIpl، نمایش داده نخواهد شد. برای به حداقل رساندن سربار ایجاد اشیاء جدید (خصوصا برای نمایش اطلاعات رسیدهی از دوربین یا WebCam)، از متد RefreshIplImage استفاده کنید. این متد بجای ایجاد یک شیء جدید، تنها ناحیهی موجود را مجددا ترسیم خواهد کرد و بسیار سریع است:
استفاده از OpenCVSharp در برنامههای WinForms به کمک PictureBox
اگر نخواهید از کنترل جدید PictureBoxIpl استفاده کنید، میتوان از همان Picture box استاندارد WinForms نیز کمک گرفت:
تنها نکتهای که در اینجا جدید است، استفاده از متد الحاقی ToBitmap میباشد که در کلاس BitmapConverter کتابخانهی OpenCVSharp تعریف شدهاست. به این ترتیب تصویر با فرمت OpenCV، به یک Bitmap دات نتی تبدیل میشود. اکنون میتوان این بیتمپ را برای مثال به یک Picture box استاندارد انتساب داد و یا حتی متد Save آنرا فراخوانی کرد و آنرا بر روی دیسک سخت، ذخیره نمود.
یک نکته
در اینجا نیز برای به حداقل رسانی به روز رسانیهای بعدی picture box بهتر است از متد ToBitmap به شکل زیر کمک گرفت:
به این ترتیب سربار وهله سازی یک شیء جدید Bitmap حذف خواهد شد و صرفا ناحیهی نمایشی مجددا ترسیم میشود.
استفاده از OpenCVSharp در برنامههای WPF
در WPF میتوان با استفاده از متد الحاقی ToWriteableBitmap کلاس BitmapConverter، فرمت IplImage را به منبع تصویر یک کنترل تصویر استاندارد، تبدیل کرد:
کدهای کامل WPF و WinForms این مطلب برای دریافت.
استفاده از OpenCVSharp در برنامههای WinForms به کمک PictureBoxIpl
یکی از اسمبلیهای کتابخانهی OpenCVSharp را که در پوشهی bin برنامه میتوان مشاهده کرد، OpenCvSharp.UserInterface.dll نام دارد. این اسمبلی حاوی یک picture box جدید به نام PictureBoxIpl است که میتواند تصاویری را با فرمت IplImage، دریافت کند.
میتوانید این picture box ویژه را از طریق منوی ToolBox -> Choose items و سپس صفحهی دیالوگ فوق، به نوار ابزار WinForms اضافه کرده و از آن استفاده کنید و یا میتوان با کدنویسی نیز به آن دسترسی یافت:
using (var iplImage = new IplImage(@"..\..\Images\Penguin.png", LoadMode.Color)) { Cv.Dilate(iplImage, iplImage); var pictureBoxIpl = new OpenCvSharp.UserInterface.PictureBoxIpl { ImageIpl = iplImage, AutoSize = true }; flowLayoutPanel1.Controls.Add(pictureBoxIpl); }
یک نکته
هر نوع تغییری به iplImage پس از انتساب آن به خاصیت ImageIpl، نمایش داده نخواهد شد. برای به حداقل رساندن سربار ایجاد اشیاء جدید (خصوصا برای نمایش اطلاعات رسیدهی از دوربین یا WebCam)، از متد RefreshIplImage استفاده کنید. این متد بجای ایجاد یک شیء جدید، تنها ناحیهی موجود را مجددا ترسیم خواهد کرد و بسیار سریع است:
pictureBoxIpl.RefreshIplImage(iplImage);
استفاده از OpenCVSharp در برنامههای WinForms به کمک PictureBox
اگر نخواهید از کنترل جدید PictureBoxIpl استفاده کنید، میتوان از همان Picture box استاندارد WinForms نیز کمک گرفت:
Bitmap bitmap; using (var iplImage = new IplImage(@"..\..\Images\Penguin.png", LoadMode.Color)) { bitmap = iplImage.ToBitmap(); // BitmapConverter.ToBitmap() } var pictureBox = new PictureBox { Image = bitmap, ClientSize = bitmap.Size }; flowLayoutPanel1.Controls.Add(pictureBox);
یک نکته
در اینجا نیز برای به حداقل رسانی به روز رسانیهای بعدی picture box بهتر است از متد ToBitmap به شکل زیر کمک گرفت:
iplImage.ToBitmap(dst: (Bitmap)pictureBox.Image);
استفاده از OpenCVSharp در برنامههای WPF
در WPF میتوان با استفاده از متد الحاقی ToWriteableBitmap کلاس BitmapConverter، فرمت IplImage را به منبع تصویر یک کنترل تصویر استاندارد، تبدیل کرد:
using System.Windows.Media; using OpenCvSharp; using OpenCvSharp.Extensions; namespace OpenCVSharpSample05Wpf { public partial class MainWindow { public MainWindow() { InitializeComponent(); loadImage(); } private void loadImage() { using (var iplImage = new IplImage(@"..\..\Images\Penguin.png", LoadMode.Color)) { Cv.Dilate(iplImage, iplImage); Image1.Source = iplImage.ToWriteableBitmap(PixelFormats.Bgr24); } } } }
کدهای کامل WPF و WinForms این مطلب برای دریافت.
اشتراکها
استفاده از ChatGPT برای توسعهی وب
اشتراکها