بایگانی‌های آموزش - مرتضی رستگار

با استفاده از این تابع می‌توان ورودی JSON با عمق 2 شئ داخلی را به یک پرونده XLS (همان TAB Separated Values) تبدیل و دانلود کرد:

function jsonToXls(JsonObject) {

if (!JsonObject) return;

// Construct csv

var csv = [];

Object.entries(JsonObject).forEach(([paramKey, paramValue]) => {

csv.push(paramKey);

var keys = [];

var values = [];

Object.entries(paramValue).forEach(([key, value]) => {

keys.push(key);

values.push(value);

});

csv.push(keys.join('\t'));

csv.push(values.join('\t'));

csv.push('');

});

var csv_string = csv.join('\n');

var filename = (new Date().toLocaleDateString('fa-IR', { month: '2-digit', day: '2-digit', year: 'numeric' })).replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d)) + '_json.xls';

var link = document.createElement('a');

link.style.display = 'none';

link.setAttribute('target', '_blank');

link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));

link.setAttribute('download', filename);

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

}

در آموزش

دریافت درایورهای تبدیل سریال به USB ‏(CH340G و CP210x)

مرتضی رستگار16 اردیبهشت 140216 اردیبهشت 1402نظر دهید

در صورتی که از مبدل‌های TTL به USB استفاده می‌کنید ممکن است به صورت پیش‌فرض توسط ویندوز شناسایی نشوند؛ در این صورت می‌توانید آخرین نسخه‌های آن را از لینک‌های زیر دریافت کنید:

CH340G (قابل استفاده در ویندوزهای 10 و 11)

CP210x (قابل استفاده در ویندوزهای 10 و 11)

در آموزش‌های لُبّی

چطور با جاوا اسکریپت، یک svg را به صورت png دانلود کنیم؟

مرتضی رستگار11 فروردین 1402نظر دهید

در یکی از پروژه‌ها نیاز بود تا کاربر بتواند یک تصویر svg را به صورت png دانلود کند (! نیازه دیگه چه میشه کرد!😁)؛ با مقداری تحقیق و بررسی و ترکیب تعدادی کد با یکدیگر به این کد رسیدم:

function downloadVectorAsPng(vectorName) {

var mySvg = document.getElementById(vectorName);

var myCanvas = document.createElement('canvas');

myCanvas.style = "display: none;";

myCanvas.width = mySvg.clientWidth*5;

myCanvas.height = mySvg.clientHeight*5;

document.body.appendChild(myCanvas);

var ctx = myCanvas.getContext('2d');

var svgData = (new XMLSerializer()).serializeToString(mySvg);

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();

var svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});

var url = DOMURL.createObjectURL(svgBlob);

img.onload = function () {

ctx.fillStyle = "#fff";

ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);

ctx.drawImage(img, 0, 0);

DOMURL.revokeObjectURL(url);

var imgURI = myCanvas

.toDataURL('image/png')

.replace('image/png', 'image/octet-stream');

var evt = new MouseEvent('click', {

view: window,

bubbles: false,

cancelable: true

});

var a = document.createElement('a');

a.setAttribute('download', 'VectorDiagram_' + new Date().toLocaleDateString() + '.png');

a.setAttribute('href', imgURI);

a.setAttribute('target', '_blank');

a.dispatchEvent(evt);

};

img.src = url;

}

روش کار کد به صورت خلاصه این است که ابتدا svg در یک متغیر ذخیره شده و سپس یک canvas نامرئی ساخته می‌شود؛ در ادامه تصویر svg درون canvas رسم شده و در نهایت با ترفندِ ساخت لینک مخفی و کلیک مصنوعی، تصویر برای کاربر دریافت می‌شود.

ابعاد canvas بر مبنای ابعاد svg تنظیم می‌شود. برای اینکه تصویر زیادی کوچک نباشد، عرض و ارتفاع تصویر در 5 ضرب شده است که می‌توانید آن را تغییر دهید.
برای اینکه پس‌زمینه تصویر نهایی نامرئی نباشد، ابتدا یک مستطیل سفید در ابعاد کل canvas رسم شده (

ctx.fillRect) و سپس تصویر svg رسم می‌شود.

در آموزش‌های لُبّی

چگونه در CSS فقط به عناصر RTL استایل بدهیم؟

مرتضی رستگار18 دی 140118 دی 1401نظر دهید

گاهی اوقات نیاز داریم تا در یک صفحه HTML که هم عناصر راست به چپ (RTL) و هم چپ به راست (LTR) از یک نوع وجود دارند، به هر دسته ویژگی خاصی بدهیم؛ مثلا دو جدول داریم که یکی باید از سمت راست نمایش دهد و دیگری از سمت چپ.

در این حالت می‌توانیم مانند مثال زیر که برای کلاس table است، حالت خاص را در ادامه‌ی ذکر نام Class آن عنصر ذکر کنیم:

[style*="direction: rtl"] .table,[style*="direction:rtl"] .table

{

/* style */

}

دقت کنید که direction ممکن است به صورت “direction: rtl” و یا “direction:rtl” نوشته شود، پس نوشتن هر دو حالت برای جلوگیری از مشکل در آینده توصیه می‌شود (چرا واقعا خودش تشخیص نمیده؟ 😐)

در آموزش‌های لُبّی

نصب داکر روی اوبونتو ‎22.04 LTS

مرتضی رستگار29 آبان 140129 بهمن 14012 نظر

همانطور که می‌دانید (یا شایدم نمی‌دانید 😐) مخزن اصلی سرویس Docker ایران و تعدادی از کشورهای دیگر را تحریم کرده و امکان نصب مستقیم از آن وجود ندارد؛ با این حال کسی با این مسخره‌بازی‌ها نمی‌تواند جلوی ماها را بگیرد 😂. من دو روش برای رفع این مشکل پیدا کرده‌ام:

استفاده از مخزن‌های آینه (یا موازی یا همان Mirror): با گشتن mirrorهای سرور داکر می‌توان چیزهای خوبی پیدا کرد؛ مثلا اینجا مخزن خودش را با آموزش قدم به قدم ارائه داده.
استفاده از سرویس «شکن»: «شکن» نام یک سامانه دورزننده‌ی سایت‌های تحریم شده است که از طریق DNS «فقط» سایت‌های تحریم شده را دور زده و مثل سایت‌های عادی ارائه می‌دهد. پیش از این یک نسخه غیررسمی برای ویندوز آن را ساخته بودم اما اینجا لینوکس است و کار به همین راحتی نیست! مخصوصا اگر رابط گرافیکی‌ای در دسترس نباشد (مثل سرورها)…

بعد از مقداری گشتن متوجه شدم که ابزاری به نام NMTUI و NMCLI در بعضی از توزیع‌ها (مثل اوبونتو) وجود دارد که نسبتا کار را راحت کرده.

تعویض DNS با nmtui

1- ابتدا وارد nmtui شوید:

1	$ sudo nmtui

2- گزینه «Edit a connection» را انتخاب کنید:

3- اتصال موردنظر (که معمولا همان تک گزینه‌ی زیرمجموعه Ethernetهاست) را انتخاب کنید، به سمت راست بروید و Edit را انتخاب کنید:

4- بخش «IPv4 CONFIGURATION» را «show» کنید، به بخش «DNS servers» بروید و DNSهای شکن را «Add» کنید. در نهایت از پایین صفحه «OK» را بزنید و به صفحه قبلی برگردید:

5- حالا برای اعمال تغییرات:

اگر به صورت مستقیم به دستگاه متصل هستید به صفحه اصلی برگردید و با وارد شدن به بخش «Activate a connection» و انتخاب شبکه، آن را یکبار «غیرفعال» و دوباره «فعال» کنید:

هشدار: اگر از راه دور به دستگاه وصلید، روش بالا باعث می‌شود که اتصال شما قطع شده و دیگر شبکه‌ای در کار نیست که بخواهید از طریق آن، آن را وصل کنید (شنیدید میگن یکی بر سر شاخه بُن می‌بُرید؟ 😅)! در این حالت مرحله آخر روش nmcli را ببینید.

تعویض DNS با nmcli

1- ابتدا لیست ارتباطات شبکه را گرفته و UID شبکه مورد نظر را کپی می‌کنیم:

$ nmcli con

NAME UUID TYPE DEVICE

Wired connection 1 233db91b-52ae-3903-9a5e-0614092d48b7 ethernet ens33

docker0 dc5640ce-c219-4eea-8532-51328f32cf84 bridge docker0

2- حالا dnsهای شکن را تنظیم می‌کنیم:

1	$ sudo nmcli con mod _DEVICE_NAME ipv4.dns "178.22.122.100 185.51.200.2"

3- می‌توانیم دریافت dns خودکار را خاموش کنیم (برای من خیلی فرقی نداشت):

1	$ sudo nmcli con mod _DEVICE_NAME ipv4.ignore-auto-dns yes

4- حالا باید شبکه را خاموش و دوباره روشن کنیم. برای اینکه به مشکل قبل نخوریم می‌توانیم از دستور زیر استفاده کنیم:

1	$ sudo nmcli device disconnect _DEVICE_NAME; wait ; sudo nmcli device connect _DEVICE_NAME

یا از طریق دستور زیر شبکه را ریست می‌کنیم:

1	$ sudo service NetworkManager restart

ارتباط SSH قطع شده و بعد از چند ثانیه دوباره قادر به ارتباط خواهیم بود…

در آموزش‌های لُبّی

تبدیل متن به هش کد MD5 در جاوااسکریپت

مرتضی رستگار1 آبان 1401نظر دهید

گاهی اوقات لازم داریم تا متغیرهای ورودی در یک فرم را کمی دستکاری کنیم؛ مثلا رمز عبور دریافتی از کاربر را تبدیل به یک رمز برگشت‌ناپذیر کنیم که MD5 یکی از معروف‌ترین آنهاست. جاوا اسکریپت به صورت پیشفرض دستوری برای این کار ندارد اما با افزودن این تابع به کدها می‌توانید این قابلیت را اضافه کنید:

function md5(inputString) {

var hc="0123456789abcdef";

function rh(n) {var j,s="";for(j=0;j<=3;j++) s+=hc.charAt((n>>(j*8+4))&0x0F)+hc.charAt((n>>(j*8))&0x0F);return s;}

function ad(x,y) {var l=(x&0xFFFF)+(y&0xFFFF);var m=(x>>16)+(y>>16)+(l>>16);return (m<<16)|(l&0xFFFF);}

function rl(n,c) {return (n<<c)|(n>>>(32-c));}

function cm(q,a,b,x,s,t) {return ad(rl(ad(ad(a,q),ad(x,t)),s),b);}

function ff(a,b,c,d,x,s,t) {return cm((b&c)|((~b)&d),a,b,x,s,t);}

function gg(a,b,c,d,x,s,t) {return cm((b&d)|(c&(~d)),a,b,x,s,t);}

function hh(a,b,c,d,x,s,t) {return cm(b^c^d,a,b,x,s,t);}

function ii(a,b,c,d,x,s,t) {return cm(c^(b|(~d)),a,b,x,s,t);}

function sb(x) {

var i;var nblk=((x.length+8)>>6)+1;var blks=new Array(nblk*16);for(i=0;i<nblk*16;i++) blks[i]=0;

for(i=0;i<x.length;i++) blks[i>>2]|=x.charCodeAt(i)<<((i%4)*8);

blks[i>>2]|=0x80<<((i%4)*8);blks[nblk*16-2]=x.length*8;return blks;

}

var i,x=sb(inputString),a=1732584193,b=-271733879,c=-1732584194,d=271733878,olda,oldb,oldc,oldd;

for(i=0;i<x.length;i+=16) {olda=a;oldb=b;oldc=c;oldd=d;

a=ff(a,b,c,d,x[i+ 0], 7, -680876936);d=ff(d,a,b,c,x[i+ 1],12, -389564586);c=ff(c,d,a,b,x[i+ 2],17, 606105819);

b=ff(b,c,d,a,x[i+ 3],22,-1044525330);a=ff(a,b,c,d,x[i+ 4], 7, -176418897);d=ff(d,a,b,c,x[i+ 5],12, 1200080426);

c=ff(c,d,a,b,x[i+ 6],17,-1473231341);b=ff(b,c,d,a,x[i+ 7],22, -45705983);a=ff(a,b,c,d,x[i+ 8], 7, 1770035416);

d=ff(d,a,b,c,x[i+ 9],12,-1958414417);c=ff(c,d,a,b,x[i+10],17, -42063);b=ff(b,c,d,a,x[i+11],22,-1990404162);

a=ff(a,b,c,d,x[i+12], 7, 1804603682);d=ff(d,a,b,c,x[i+13],12, -40341101);c=ff(c,d,a,b,x[i+14],17,-1502002290);

b=ff(b,c,d,a,x[i+15],22, 1236535329);a=gg(a,b,c,d,x[i+ 1], 5, -165796510);d=gg(d,a,b,c,x[i+ 6], 9,-1069501632);

c=gg(c,d,a,b,x[i+11],14, 643717713);b=gg(b,c,d,a,x[i+ 0],20, -373897302);a=gg(a,b,c,d,x[i+ 5], 5, -701558691);

d=gg(d,a,b,c,x[i+10], 9, 38016083);c=gg(c,d,a,b,x[i+15],14, -660478335);b=gg(b,c,d,a,x[i+ 4],20, -405537848);

a=gg(a,b,c,d,x[i+ 9], 5, 568446438);d=gg(d,a,b,c,x[i+14], 9,-1019803690);c=gg(c,d,a,b,x[i+ 3],14, -187363961);

b=gg(b,c,d,a,x[i+ 8],20, 1163531501);a=gg(a,b,c,d,x[i+13], 5,-1444681467);d=gg(d,a,b,c,x[i+ 2], 9, -51403784);

c=gg(c,d,a,b,x[i+ 7],14, 1735328473);b=gg(b,c,d,a,x[i+12],20,-1926607734);a=hh(a,b,c,d,x[i+ 5], 4, -378558);

d=hh(d,a,b,c,x[i+ 8],11,-2022574463);c=hh(c,d,a,b,x[i+11],16, 1839030562);b=hh(b,c,d,a,x[i+14],23, -35309556);

a=hh(a,b,c,d,x[i+ 1], 4,-1530992060);d=hh(d,a,b,c,x[i+ 4],11, 1272893353);c=hh(c,d,a,b,x[i+ 7],16, -155497632);

b=hh(b,c,d,a,x[i+10],23,-1094730640);a=hh(a,b,c,d,x[i+13], 4, 681279174);d=hh(d,a,b,c,x[i+ 0],11, -358537222);

c=hh(c,d,a,b,x[i+ 3],16, -722521979);b=hh(b,c,d,a,x[i+ 6],23, 76029189);a=hh(a,b,c,d,x[i+ 9], 4, -640364487);

d=hh(d,a,b,c,x[i+12],11, -421815835);c=hh(c,d,a,b,x[i+15],16, 530742520);b=hh(b,c,d,a,x[i+ 2],23, -995338651);

a=ii(a,b,c,d,x[i+ 0], 6, -198630844);d=ii(d,a,b,c,x[i+ 7],10, 1126891415);c=ii(c,d,a,b,x[i+14],15,-1416354905);

b=ii(b,c,d,a,x[i+ 5],21, -57434055);a=ii(a,b,c,d,x[i+12], 6, 1700485571);d=ii(d,a,b,c,x[i+ 3],10,-1894986606);

c=ii(c,d,a,b,x[i+10],15, -1051523);b=ii(b,c,d,a,x[i+ 1],21,-2054922799);a=ii(a,b,c,d,x[i+ 8], 6, 1873313359);

d=ii(d,a,b,c,x[i+15],10, -30611744);c=ii(c,d,a,b,x[i+ 6],15,-1560198380);b=ii(b,c,d,a,x[i+13],21, 1309151649);

a=ii(a,b,c,d,x[i+ 4], 6, -145523070);d=ii(d,a,b,c,x[i+11],10,-1120210379);c=ii(c,d,a,b,x[i+ 2],15, 718787259);

b=ii(b,c,d,a,x[i+ 9],21, -343485551);a=ad(a,olda);b=ad(b,oldb);c=ad(c,oldc);d=ad(d,oldd);

}

return rh(a)+rh(b)+rh(c)+rh(d);

}

در آموزش‌های لُبّی

چطور در سی‌شارپ صف اجرای دستورات بسازیم؟

مرتضی رستگار27 خرداد 140119 شهریور 1401نظر دهید

همانطور که می‌دانید سی‌شارپ مفهومی به نام Queue یا صف دارد که می‌توان آن را برای انواع متغیرها ساخت، در آن مورد جدیدی Enqueue کرد و سپس در یک چرخه تک تک Dequeue کرده و استفاده کرد؛ ساختار آن به صورت FIFO است.

در یکی از پروژه‌ها نیاز داشتم تا اگر کاربر کاری را انجام داد تعدادی دستور یکی پس از دیگری انجام شود. ممکن بود کاربر پشت سر هم آن کار را انجام دهد و در این حالت نرم افزار تا پایان پردازش تمام دستورات قفل می‌کرد. در فکر این بودم که چقدر خوب بود اگر می‌شد به جای متغیر، دستورات یا همان متدها را وارد یک صف می‌کردیم تا یکی یکی اجرا شوند؛ کمی در موردش جستجو کردم که آیا می‌شود؟ و می‌شد 🙂

یکی از انواع متغیر در سی‌شارپ Action است. در توضیح آن آمده:

Encapsulates a method that has no parameters and does not return a value

یک متدی که پارامتری ندارد و مقداری را برنمی‌گرداند را در خود ذخیره می‌کند

حقیقا از اینکه دیدم سی‌شارپ چنین قابلیتی دارد هم به شدت تعجب کردم هم خوشحال شدم (سی یاد بگیر! با تو باید const char*‎ رو هم دستی به char*‎ تبدیل کنم! 😒). با کمی تلاش این فرمول به دست آمد:

اول یک صف از نوع Action بسازید:

C#

1

Queue<Action> myQueue = new Queue<Action>();

یک BackgroundWorker می‌سازیم تا همیشه بررسی کند که آیا دستوری در صف وجود دارد؟ و اگر وجود داشت اجرا کند:

var myBW = new BackgroundWorker();

myBW.DoWork += (s, o) =>

{

while (true)

{

if (myQueue.Count > 0)

{

Action action = myQueue.Dequeue(); // Get last action

action(); // Calls that action

}

};

myBW.RunWorkerAsync();

حالا هرجا لازم شد اینطوری دستورات را به صف اضافه می‌کنیم:

C#

1
2
3
4

myQueue.Enqueue(() =>
{
System.Threading.Thread.Sleep(1200);
});

می‌بینید که دستورات یک به یک اجرا می‌شوند.

در آموزش‌های لُبّی

چگونه در سی‌شارپ (فقط) یک Setting را به مقدار پیش‌فرض برگردانیم؟

مرتضی رستگار8 خرداد 140127 خرداد 1401نظر دهید

Properties.Settings.Default[settingName] = Properties.Settings.Default.Properties[settingName].DefaultValue;

Properties.Settings.Default.Save();

در آموزش‌های لُبّی

چگونه در Apache روی یک پورت متفاوت SSL را فعال کنیم؟

مرتضی رستگار4 خرداد 140120 خرداد 1401نظر دهید

در حالت عادی یک سرور به گونه‌ای تنظیم شده است که ارتباطات عادی HTTP را روی پورت 80 و HTTPS را روی پورت 443 ارائه دهد؛ مرورگرهای وب هم با همین پیش‌فرض کار می‌کنند و به همین دلیل اغلب اوقات آدرس وبسایت‌ها چیزی شبیه به example.ir دیده می‌شود، نه example.ir:80 و نه https://example.ir:443 (در حالی که هر دو به یک آدرس اشاره دارند).

اما گاهی نیاز داریم تا از چند پورت در کنار هم استفاده کنیم و پورت HTTPS ما غیر از 443 باشد؛ در این صورت می‌توانیم به صورت زیر عمل کنیم (سرور Ubuntu 22.04 LTS – آپاچی 2.4 و LetsEncrypt-CertBot):

ابتدا تنظیمات سایت در آپاچی را باز می‌کنیم:

1	sudo nano /etc/apache2/sites-enabled/000-default.conf

حالا این بخش را به تنظیمات فعلی اضافه می‌کنیم:

...

ServerName example.ir

DocumentRoot /var/www/html

SSLEngine on

SSLCertificateFile /etc/letsencrypt/live/example.ir/fullchain.pem

SSLCertificateKeyFile /etc/letsencrypt/live/example.ir/privkey.pem

</VirtualHost>

</IfModule>

...

سپس تنظیمات پورت‌ها را باز می‌کنیم:

1	sudo nano /etc/apache2/ports.conf

پورت دلخواهمان را در آن قرار می‌دهیم:

Listen 80 #Our Normal Port

Listen 470

</IfModule>

Listen 470

</IfModule>

در انتها آپاچی را ری‌استارت می‌کنیم:

1	sudo service apache2 restart

در آموزش‌های لُبّی

چگونه یک Setting را در عنصر WPF نمایش دهیم (Bind)؟

مرتضی رستگار1 خرداد 14018 خرداد 1401نظر دهید

تنظیمات یا Settings در پروژه‌های سی‌شارپ لیستی از متغیرها هستند که علاوه بر تنظیم اولیه، در صورت تغییر در حین برنامه به صورت ماندگار ذخیره می‌شوند و با بستن برنامه از بین نمی‌روند؛ به همین دلیل روشی سریع و آسان برای ذخیره تنظیمات کوچک برنامه هستند.

گاهی اوقات لازم است در (مثلا یک فرم ثبت‌نام) برنامه چند TextBox را طوری نمایش دهیم که چند متغیر در آن‌ها دیده شود و کاربر بتواند آن‌ها را ویرایش کند. همانطور که می‌دانید در رابط گرافیکی WPF مفهومی به نام BIND یا متصل کردن وجود دارد که به کمک آن بدون کدنویسی اضافه می‌توان متغیرهایی را به عنوان محتوای یک عنصر قرار داد؛ برای اینکه یک Setting را در عنصر قرار دهیم کافیست این ویژگی را به Window اضافه کنیم:

1	xmlns:properties="clr-namespace:NAMESPC.Properties"

دقت کنید که به جای NAMESPC نام namespace پروژه خودتان را قرار دهید.

حالا یک Source به نام properties:Settings.Default داریم که می‌توانیم آن را bind کنیم؛ مثلا:

1	<TextBox x:Name="txt_address" Text="{Binding Source={x:Static properties:Settings.Default}, Path=set_serverAddress, Mode=TwoWay}"/>

در Path نام تنظیم و در Mode حالت ارتباطی (که TwoWay یعنی اگر کاربر متن را تغییر داد آن تنظیم هم تغییر کند) قرار می‌گیرد.

دقت کنید که در صورتی که ارتباط دو طرفه استفاده می‌کنید حتما با دستور:

1	Properties.Settings.Default.Save();

از ذخیره شدن تنظیمات مطمئن شوید.

پست‌های دسته‌بندی شده به عنوان آموزش

تبدیل JSON به XLS در جاوا اسکریپت

دریافت درایورهای تبدیل سریال به USB ‏(CH340G و CP210x)

چطور با جاوا اسکریپت، یک svg را به صورت png دانلود کنیم؟

چگونه در CSS فقط به عناصر RTL استایل بدهیم؟

نصب داکر روی اوبونتو ‎22.04 LTS

تعویض DNS با nmtui

تعویض DNS با nmcli

تبدیل متن به هش کد MD5 در جاوااسکریپت

چطور در سی‌شارپ صف اجرای دستورات بسازیم؟

چگونه در سی‌شارپ (فقط) یک Setting را به مقدار پیش‌فرض برگردانیم؟

چگونه در Apache روی یک پورت متفاوت SSL را فعال کنیم؟

چگونه یک Setting را در عنصر WPF نمایش دهیم (Bind)؟