تبدیل لیست به دیتاتیبل به صورت جنریک
1) فراموش میکنیم تا اسکریپت اصلی jQuery را به درستی پیوست و مسیردهی کنیم.
2) مسیر Generic handler دیگری را ذکر میکنیم.
3) مسیرهای تصاویری را که Image slider باید نمایش دهد، کاملا بیربط ذکر میکنیم.
4) خروجی JSON نامربوطی را بازگشت میدهیم.
5) یکبار هم یک استثنای عمدی دستی را در بین کدها قرار خواهیم داد.
و ... بعد سعی میکنیم با استفاده از Firebug عیوب فوق را یافته و اصلاح کنیم؛ تا به یک برنامه قابل اجرا برسیم.
معرفی برنامهای که کار نمیکند!
یک برنامه ASP.NET Empty web application را آغاز کنید. سپس سه پوشه Scripts، Content و Images را به آن اضافه نمائید. در این پوشهها، اسکریپتهای نمایش دهنده تصاویر، Css آن و تصاویری که قرار است نمایش داده شوند، قرار میگیرند:
سپس یک فایل default.aspx و یک فایل OrbitHandler.ashx را نیز به پروژه با محتویات ذیل اضافه کنید: (در این دو فایل، 5 مورد مشکل ساز یاد شده لحاظ شدهاند)
محتویات فایل OrbitHandler.ashx.cs مطابق کدهای ذیل است:
using System.Collections.Generic; using System.IO; using System.Web; using System.Web.Script.Serialization; namespace OrbitWebformsTest { public class Picture { public string Title { set; get; } public string Path { set; get; } } public class OrbitHandler : IHttpHandler { IList<Picture> PicturesDataSource() { var results = new List<Picture>(); var path = HttpContext.Current.Server.MapPath("~/Images"); foreach (var item in Directory.GetFiles(path, "*.*")) { var name = Path.GetFileName(item); results.Add(new Picture { Path = /*"Images/" + name*/ name, Title = name }); } return results; } public void ProcessRequest(HttpContext context) { var items = PicturesDataSource(); var json = /*new JavaScriptSerializer().Serialize(items)*/ string.Empty; throw new InvalidDataException("همینطوری"); context.Response.ContentType = "text/plain"; context.Response.Write(json); } public bool IsReusable { get { return false; } } } }
همچنین کدهای صفحه ASPX ایی که قرار است (به ظاهر البته) از این Generic handler استفاده کند به نحو ذیل است:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="OrbitWebformsTest._default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Content/orbit-1.2.3.css" rel="stylesheet" type="text/css" /> <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery.orbit-1.2.3.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="featured"> </div> </form> <script type="text/javascript"> $(function () { $.ajax({ url: "Handler.ashx", contentType: "application/json; charset=utf-8", success: function (data) { $.each(data, function (i, b) { var str = '<img src="' + b.Path + '" alt="' + b.Title + '"/>'; $("#featured").append(str); }); $('#featured').orbit(); }, dataType: "json" }); }); </script> </body> </html>
مراحل عیب یابی برنامهای که کار نمیکند!
ابتدا برنامه را در فایرفاکس باز کرده و سپس افزونه Firebug را با کلیک بر روی آیکن آن، بر روی سایت فعال میکنیم. سپس یکبار بر روی دکمه F5 کلیک کنید تا مجددا مراحل بارگذاری سایت تحت نظر افزونه Firebug فعال شده، طی شود.
اولین موردی که مشهود است، نمایش عدد 3، کنار آیکن فایرباگ میباشد. این عدد به معنای وجود خطاهای اسکریپتی در کدهای ما است.
برای مشاهده این خطاها، بر روی برگه Console آن کلیک کنید:
بله. مشخص است که مسیر دهی فایل jquery-1.5.1.min.js صحیح نبوده و همین مساله سبب بروز خطاهای اسکریپتی گردیده است. برای اصلاح آن سطر زیر را در برنامه تغییر دهید:
<script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
مجددا دکمه F5 را فشرده و سایت را با تنظیمات جدید اجرا کنید. اینبار در برگه Console و یا در برگه شبکه فایرباگ، خطای یافت نشدن Generic handler نمایان میشوند:
برای رفع آن به فایل default.aspx مراجعه و بجای معرفی Handler.ashx، نام OrbitHandler.ashx را وارد کنید.
مجددا دکمه F5 را فشرده و سایت را با تنظیمات جدید اجرا کنید.
اگر به برگه کنسول دقت کنیم، بروز استثناء در کدها تشخیص داده شده و همچنین در برگه Response پاسخ دریافتی از سرور، جزئیات صفحه خطای بازگشتی از آن نیز قابل بررسی و مشاهده است.
اینبار به فایل OrbitHandler.ashx.cs مراجعه کرده و سطر throw new InvalidDataException را حذف میکنیم. در ادامه برنامه را کامپایل و مجددا اجرا خواهیم کرد.
با اجرای مجدد سایت، تبادل اطلاعات صحیحی با فایل OrbitHandler.ashx برقرار شده است، اما خروجی خاصی قابل مشاهده نیست. بنابراین بازهم سایت کار نمیکند.
برای رفع این مشکل، متد ProcessRequest را به نحو ذیل تغییر خواهیم داد:
public void ProcessRequest(HttpContext context) { var items = PicturesDataSource(); var json = new JavaScriptSerializer().Serialize(items); context.Response.ContentType = "text/plain"; context.Response.Write(json); }
بله. تمام تنظیمات به نظر درست هستند، اما در برگه شبکه فایرباگ تعدادی خطای 404 و یا «یافت نشد»، مشاهده میشوند. مشکل اینجا است که مسیرهای بازگشت داده شده توسط متد Directory.GetFiles، مسیرهای مطلقی هستند؛ مانند c:\path\images\01.jpg و جهت نمایش در یک وب سایت مناسب نمیباشند. برای تبدیل آنها به مسیرهای نسبی، اینبار کدهای متد تهیه منبع داده را به نحو ذیل ویرایش میکنیم:
IList<Picture> PicturesDataSource() { var results = new List<Picture>(); var path = HttpContext.Current.Server.MapPath("~/Images"); foreach (var item in Directory.GetFiles(path, "*.*")) { var name = Path.GetFileName(item); results.Add(new Picture { Path = "Images/" + name, Title = name }); } return results; }
اینبار اگر برنامه را اجرا کنیم، بدون مشکل کار خواهد کرد.
بنابراین در اینجا مشاهده کردیم که اگر «برنامهای مبتنی بر jQuery کار نمیکند»، چگونه باید قدم به قدم با استفاده از فایرباگ و امکانات آن، به خطاهایی که گزارش میدهد و یا مسیرهایی را که یافت نشد بیان میکند، دقت کرد تا بتوان برنامه را عیب یابی نمود.
سؤال مهم: اجرای کدهای jQuery Ajax فوق، چه تغییری را در صفحه سبب میشوند؟
اگر به برگه اسکریپتها در کنسول فایرباگ مراجعه کنیم، امکان قرار دادن breakpoint بر روی سطرهای کدهای جاوا اسکریپتی نمایش داده شده نیز وجود دارد:
در اینجا همانند VS.NET میتوان برنامه را در مرورگر اجرا کرده و تگهای تصویر پویای تولید شده را پیش از اضافه شدن به صفحه، مرحله به مرحله بررسی کرد. به این ترتیب بهتر میتوان دریافت که آیا src بازگشت داده شده از سرور فرمت صحیحی دارد یا خیر و آیا به محل مناسبی اشاره میکند یا نه. همچنین در برگه HTML آن، عناصر پویای اضافه شده به صفحه نیز بهتر مشخص هستند:
ایجاد کامپوننت جدید ReducerButtons
برای توضیح مفاهیم این قسمت، فایل جدید src\components\ReducerButtons.tsx را به همراه محتوای زیر ایجاد میکنیم:
import React, { useReducer } from "react"; const initialState = { rValue: true }; type State = { rValue: boolean; }; type Action = { type: string; }; function reducer(state: State, action: Action) { switch (action.type) { case "one": return { rValue: true }; case "two": return { rValue: false }; default: return state; } } export const ReducerButtons = () => { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> {state?.rValue && <h1>Visible</h1>} <button onClick={() => dispatch({ type: "one" })}>Action One</button> <button onClick={() => dispatch({ type: "two" })}>Action Two</button> </div> ); };
- این کامپوننت دو دکمه را رندر میکند تا توسط آنها بتوان چندین Action مختلف را جهت مدیریت حالت، سبب شد؛ مانند Action One و Two.
- initialState را در این مثال، یک شیء ساده در نظر گرفتهایم که تنها دارای یک مقدار boolean است.
- سپس نیاز به یک تابع ویژه را به نام reducer، داریم که مقدار state جاری و یک action را دریافت میکند. این تابع بر اساس نوع Action ای که به آن میرسد، state جدیدی را بازگشت میدهد و در قسمت رندر آن، با بررسی state?.rValue، سبب نمایش عبارتی خواهیم شد.
- در حین تعریف هوک useReducer، قسمت dispatch آن، تابعی است که یک Action را اجرا میکند. فراخوانی آنرا در رویداد onClick دو دکمهی تعریف شده مشاهده میکنید. این تابع یک شیء را دریافت میکند که type اکشن ارسالی به تابع reducer را مقدار دهی میکند.
توسط useReducer برای ایجاد تغییرات در شیء state کامپوننت جاری، از مفهومی به نام dispatch actions استفاده میشود. action در اینجا به معنای رخدادن چیزی است؛ مانند کلیک بر روی یک دکمه و یا دریافت اطلاعاتی از یک API. در این حالت مقایسهای بین وضعیت قبلی state و وضعیت فعلی آن صورت میگیرد و تغییرات مورد نیاز جهت اعمال به UI، محاسبه خواهند شد. اصلیترین جزء آن، تابعی است به نام Reducer. این تابع، یک تابع خالص است و دو آرگومان را دریافت میکند. تابع Reducer، بر اساس action و یا رخدادی، ابتدا کل state برنامه را دریافت میکند و سپس خروجی آن بر اساس منطق این تابع، یک state جدید خواهد بود. اکنون که این state جدید را داریم، برنامهی React ما میتواند به تغییرات آن گوش فرا داده و بر اساس آن، UI را به روز رسانی کند.
اولین قسمتی را که در حین کار با useReducer توسط TypeScript به آن برخورد خواهیم کرد، نمایش خطاهایی در مورد نوعهای پارامترهای state و action تابع reducer است. در حالت متداول جاوا اسکریپتی آن، این پارامترها، بدون نوع ذکر میشوند که در اینجا به any تفسیر خواهند شد و یک چنین تعاریفی با توجه به strict بودن تنظیمات tsconfig.json برنامه، مجاز نیست. به همین جهت نیاز به تعریف دو type جدید به نامهای State و Action در اینجا وجود دارد تا خطاهای بدون نوع بودن پارامترهای تابع reducer برطرف شوند. نوع Action به همراه حداقل یک خاصیت به نام action رشتهای است و نوع State بر اساس initialState ای که تعریف کردیم، دارای یک خاصیت متناظر boolean است.
نکتهی جالب دومی که در اینجا توسط TypeScript گوشزد میشود، الزام به ذکر حالت default مربوط به switch ای است که در تابع reducer تعریف کردهایم. اگر این حالت را حذف کنیم، بلافاصله خطای زیر را در قسمت تعریف useReducer نمایش میدهد:
عنوان میکند که خروجی تابع reducer، یک state جدید است؛ اما ممکن است از نوع never هم باشد که قابلیت ترجمهی به نوع state را ندارد.
بهبود تعاریف نوعهای useReducer
تا اینجا مهمترین تغییرات تایپاسکریپتی صورت گرفته، تعریف نوعهای پارامترهای تابع reducer است. اکنون فرض کنید میخواهیم، سومین Action را هم به کامپوننت جاری اضافه کنیم:
<button onClick={() => dispatch({ type: "three" })}>Action Three</button>
type Action = { type: "one" | "two" | "three"; };
و یا حتی اگر مقدار action.type ای را در تابع reducer به اشتباه وارد کردیم، باز هم برنامه کامپایل نمیشود:
import React, { useReducer } from "react"; const initialState = { rValue: true }; type State = { rValue: boolean; }; type Action = { type: "one" | "two" | "three"; }; function reducer(state: State, action: Action) { switch (action.type) { case "one": return { rValue: true }; case "two": return { rValue: false }; case "three": return { rValue: false }; } } export const ReducerButtons = () => { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> {state?.rValue && <h1>Visible</h1>} <button onClick={() => dispatch({ type: "one" })}>Action One</button> <button onClick={() => dispatch({ type: "two" })}>Action Two</button> <button onClick={() => dispatch({ type: "three" })}>Action Three</button> </div> ); };
SASS #2
متغیرها (Variables)
متغیرها در SASS با استفاده از $ در ابتدای نام آن، به عنوان یک مقدار مورد استفادهی در CSS تعریف میشوند. شما در SASS میتوانید متغیرهایی را برای margin ،font-size و یا padding و غیره، تعریف کنید. استفاده از متغیرها این امکان را به شما میدهد که خیلی راحتتر از styleهای تعریف شده، مجدد استفاده کنید.
شما 6 نوع مختلف متغیر را میتوانید با استفاده از SASS بکار ببرید.
- Strings (مثال: ;"myString: "your text here$ )
- Numbers (مثال: ;myNum: 16px$)
- Colors (مثال: ;myColor: aqua$)
- Booleans (مثال: ;myBool: true$)
- Lists (مثال: ;myItemList: 1px solid red$)
- Nulls (مثال: ;myVar: null$)
برای مثالی از استفادهی از این متغیرها، یک فایل را با نام styles.scss ایجاد کرده و کدهای زیر را در آن وارد کنید:
$myColor: #FFF726; $myBackColor: #2B14FF; $myString: "I Love "; $myFontSize: 13px; $myMargin: 0px auto; $myWidth: 300px; h1 { color: $myColor; margin: 0; padding: 0; } h1:before{ content: $myString; } #container { width: $myWidth; margin: $myMargin; background-color:$myBackColor; text-align:center; }
ریاضی (Math)
برخلاف SASS ،CSS به ما امکان استفاده از عبارات ریاضی را میدهد. عملگرهای جمع + ، تفریق - ، تقسیم / ، ضرب * ، باقیمانده % ، مساوی == ، نامساوی =! را SASS پشتیبانی میکند. در هنگام استفاده از عبارات ریاضی چند نکته وجود دارد که باید رعایت کنید:
نکته1: چون علامت / در CSS به عنوان یک کوتاه کننده استفاده میشود مانند font: 14px/16px، در صورتیکه بخواهید عمل تقسیم را بر روی مقدار ثابتی انجام دهید باید آنها را درون پرانتر قرار دهید.
$fontDiff: (14px/16px);
$container-width: 100% - 20px;
حال میخواهیم براساس عرض container، ستونهای پویایی را ایجاد کنیم:
$container-width: 100%; .container { width: $container-width; } .col-4 { width: $container-width / 4; }
.container { width: 100%; } .col-4 { width: 25%; }
مشاهدهی پیاده سازی مثال بالا اینجا.
توابع (Functions)
یکی از بهترین قسمتهای SASS، توابع پیاده سازی شدهی آن است. شما میتوانید لیست بزرگی از توابع SASS را در اینجا مشاهده کنید.برای نمونه برخی از توابع مربوط به کار با رنگها را توضیح میدهیم:
- (darken ($color, $amount: این تابع برای تیرهتر کردن یک کد رنگ میباشد. شما برای استفادهی از این تابع باید دو مقدار را به آرگومانهای ورودی این تابع که به ترتیب کد رنگ و میزان تیرهتر شدن آن به صورت درصد از %0 تا %100 میباشند، ارسال کنید و خروجی آن کد رنگ تولید شده است. توجه داشته باشید نوع سیستم رنگی ارسال شده به عنوان پارامتر color$، خروجی این تابع نیز همان نوع میباشد.
darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%) darken(#800, 20%) => #200
- (lighten ($color, $amount: این تابع برای روشنتر کردن یک رنگ میباشد و دقیقا برعکس تابع darken عمل میکند.
lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30) lighten(#800, 20%) => #e00
- (alpha ($color) / opacity($color: با استفاده از این دو تابع میتوانید میزان شفافیت/کدری را مشخص کنید.
- (mix ($color1, $color2, $weight:50% : با استفاده از این تابع
میتوانید دو رنگ را با هم ترکیب کنید. مقدار پیش فرض آرگومان weight$
برابر %50 میباشد و تعیین آن اختیاری است. محدودهی پذیرش مقدار weight$
هرچه به %0 نزدیکتر باشد، باعث نزدیکتر بودن رنگ خروجی به رنگ دوم و
هرچه به %100 نزدیکتر باشد رنگ خروجی به رنگ اول نزدیکتر میشود. توجه:
میزان شفافیت/کدری را نیز میتواند تشخیص دهد.
mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)
تو در تو (Nesting)
SASS امکان تعریف استایلهای تو در تو را به شما میدهد که باعث خواناتر شدن استایلهای نوشته شده میشود. به عنوان مثال به کد CSS زیر توجه کنید:
#container { width: 500px; margin: 0 auto; } #container p { font-family: Arial; font-size: 13px; } #container h1 { font-family: Tahoma; font-size: 15px; } #container h2 { font-family: Helvetica; font-size: 14px; }
$myFontsize1: 13px; $myFontsize2: 18px; $myFontsize3: 25px; $myWidth: 500px; $myMargin: 0px auto; #container { width: $myWidth; margin: $myMargin; p { font-family: Arial; font-size: $myFontsize1; } h1 { font-family: Tahoma; font-size: $myFontsize3; } h2 { font-family: Helvetica; font-size: $myFontsize2; } }
در صورتیکه نیاز به دسترسی به والد داشته باشید کافیست از علامت & استفاده کنید.
a.myAnchor { color: blue; &:hover { text-decoration: underline; } &:visited { color: purple; } }
at-root@
قبل استایلی که میخواهید به صورت تو در تو تعریف نشود، استفاده کنید..first-component { .text { font-size: 1.4em; } .button { font-size: 1.7em; } .second-component { .text { font-size: 1.2em; } .button { font-size: 1.4em; } } }
.first-component .text { font-size: 1.4em; } .first-component .button { font-size: 1.7em; } .first-component .second-component .text { font-size: 1.2em; } .first-component .second-component .button { font-size: 1.4em; }
at-root@
به صورت زیر میشود:.first-component .text { font-size: 1.4em; } .first-component .button { font-size: 1.7em; } .second-component .text { font-size: 1.2em; } .second-component .button { font-size: 1.4em; }
OpenCVSharp #7
اینترفیس یا API زبان C کتابخانهی OpenCV مربوط است به نگارشهای 1x این کتابخانه و تمام مثالهایی را که تاکنون ملاحظه کردید، بر مبنای همین اینترفیس تهیه شده بودند. اما از OpenCV سری 2x، این اینترفیس صرفا جهت سازگاری با نگارشهای قبلی، نگهداری میشود و اینترفیس اصلی مورد استفاده، API جدید ++C آن است. به همین جهت کتابخانهی OpenCVSharp نیز در فضای نام OpenCvSharp.CPlusPlus و توسط اسمبلی OpenCvSharp.CPlusPlus.dll، امکان دسترسی به این API جدید را فراهم کردهاست که در ادامه نکات مهم آنرا بررسی خواهیم کرد.
تبدیل مثالهای اینترفیس C به اینترفیس ++C
مثال «تبدیل تصویر به حالت سیاه و سفید» قسمت سوم را درنظر بگیرید. این مثال به کمک اینترفیس C کتابخانهی OpenCV کار میکند. معادل تبدیل شدهی آن به اینترفیس ++C به صورت ذیل است:
// Cv2.ImRead using (var src = new Mat(@"..\..\Images\Penguin.Png", LoadMode.AnyDepth | LoadMode.AnyColor)) using (var dst = new Mat()) { Cv2.CvtColor(src, dst, ColorConversion.BgrToGray); // How to export using (var bitmap = dst.ToBitmap()) // => OpenCvSharp.Extensions.BitmapConverter.ToBitmap(dst) { bitmap.Save("gray.png", ImageFormat.Png); } using (new Window("BgrToGray C++: src", image: src)) using (new Window("BgrToGray C++: dst", image: dst)) { Cv2.WaitKey(); } }
- بجای IplImage، از کلاس Mat استفاده شدهاست.
- برای ایجاد Clone یک تصویر نیازی نیست تا پارامترهای خاصی را به Mat دوم (همان dst) انتساب داد و ایجاد یک Mat خالی کفایت میکند.
- اینبار بجای کلاس Cv اینترفیس C، از کلاس Cv2 اینترفیس ++C استفاده شدهاست.
- متد الحاقی ToBitmap نیز که در کلاس OpenCvSharp.Extensions.BitmapConverter قرار دارد، با نمونهی Mat سازگار است و به این ترتیب میتوان خروجی معادل دات نتی Mat را با فرمت Bitmap تهیه کرد.
- بجای CvWindow، در اینجا باید از Window سازگار با Mat، استفاده شود.
- new Mat معادل Cv2.ImRead است. بنابراین اگر مثال ++C ایی را در اینترنت یافتید:
cv::Mat src = cv::imread ("foo.jpg"); cv::Mat dst; cv::cvtColor (src, dst, CV_BGR2GRAY);
کار مستقیم با نقاط در OpenCVSharp
متدهای ماتریسی OpenCV، فوق العاده در جهت سریع اجرا شدن و استفادهی از امکانات سخت افزاری و پردازشهای موازی، بهینه سازی شدهاند. اما اگر قصد داشتید این متدهای سریع را با نمونههایی متداول و نه چندان سریع جایگزین کنید، میتوان مستقیما با نقاط تصویر نیز کار کرد. در ادامه قصد داریم کار فیلتر توکار Not را که عملیات معکوس سازی رنگ نقاط را انجام میدهد، شبیه سازی کنیم.
در اینجا نحوهی دسترسی مستقیم به نقاط تصویر بارگذاری شده را توسط اینترفیس C، ملاحظه میکنید:
using (var src = new IplImage(@"..\..\Images\Penguin.Png", LoadMode.AnyDepth | LoadMode.AnyColor)) using (var dst = new IplImage(src.Size, src.Depth, src.NChannels)) { for (var y = 0; y < src.Height; y++) { for (var x = 0; x < src.Width; x++) { CvColor pixel = src[y, x]; dst[y, x] = new CvColor { B = (byte)(255 - pixel.B), G = (byte)(255 - pixel.G), R = (byte)(255 - pixel.R) }; } } // [C] Accessing Pixel // https://github.com/shimat/opencvsharp/wiki/%5BC%5D-Accessing-Pixel using (new CvWindow("C Interface: Src", image: src)) using (new CvWindow("C Interface: Dst", image: dst)) { Cv.WaitKey(0); } }
روش ارائه شدهی در اینجا یکی از روشهای دسترسی به نقاط، توسط اینترفیس C است. سایر روشهای ممکن را در Wiki آن میتوانید مطالعه کنید.
شبیه به همین کار را میتوان به نحو ذیل توسط اینترفیس ++C کتابخانهی OpenCVSharp نیز انجام داد:
// Cv2.ImRead using (var src = new Mat(@"..\..\Images\Penguin.Png", LoadMode.AnyDepth | LoadMode.AnyColor)) using (var dst = new Mat()) { src.CopyTo(dst); for (var y = 0; y < src.Height; y++) { for (var x = 0; x < src.Width; x++) { var pixel = src.Get<Vec3b>(y, x); var newPixel = new Vec3b { Item0 = (byte)(255 - pixel.Item0), // B Item1 = (byte)(255 - pixel.Item1), // G Item2 = (byte)(255 - pixel.Item2) // R }; dst.Set(y, x, newPixel); } } // [Cpp] Accessing Pixel // https://github.com/shimat/opencvsharp/wiki/%5BCpp%5D-Accessing-Pixel //Cv2.NamedWindow(); //Cv2.ImShow(); using (new Window("C++ Interface: Src", image: src)) using (new Window("C++ Interface: Dst", image: dst)) { Cv2.WaitKey(0); } }
میتوانید سایر روشهای دسترسی به نقاط را توسط اینترفیس ++C، در Wiki این کتابخانه مطالعه نمائید.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید.
var app = angular.module('myApp', []);
app.directive('angry', function () { return { restrict: 'E', template: '<div style="color:red"> I am angry!</div>' } })
restrict: که چهار مقدار E و A و C و M را میپذیرد که به EACM نیز معروف هستند.
E: زمانی که قصد داشته باشیم یک المان جدید بسازیم از E به معنای element در restrict استفاده میکنیم(<my-directive></my-directive> )؛
A: زمانی که قصد داشته باشیم Directive مورد نظر به عنوان Attribute در تگها استفاده شود از A به معنای Attribute در restrict استفاده میشود(<div my-directive="exp"></div> )؛
C: از C نیز برای تعریف Directive به عنوان مقادیر ویژگی کلاس استفاده میکنیم(<div class="my-directive: exp "></div> )؛
M: حالت M نیز برای استفاده Directive در کامنتها است(<!-- directive: my-directive exp --> ).
در ادامه یک Directive دیگر به نام happy میسازیم:
app.directive('happy', function () { return { restrict: 'A', template: '<div style="color:blue"> I am happy!</div>' }; })
<script type="text/javascript" src="~/scripts/Modules/module1.js"></script> <div ng-app="myApp"> <angry></angry> <div happy></div> </div>
ادامه دارد...
Bootstrap Icons v1.6.0 منتشر شد
Bootstrap Icons v1.6.0 adds over 30 new icons, adds official Composer support, includes a new .scss
stylesheet for the icon font, plus some other enhancements and bug fixes. Keep reading to see what’s new!
npm uninstall -g @angular/cli npm cache verify # if npm version is < 5 then use `npm cache clean` npm install -g @angular/cli@latest
npm i -g npm
2-حذف کردن ویژگیهای منسوخ شده از RxJS 6 با اجرای دستور زیر:
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
npm update -g
برای بهروز رسانی به نسخه 7 (core framework و CLI)، دستورات زیر را اجرا کنید:
ng update @angular/cli ng update @angular/core ng update rxjs
ng update @angular/material
ng update --all --force
npm install npm-check-updates -g ncu -u npm install