ایجاد یک داشبورد برای پروژه در آردوینو

Ratings

(0)

به جای اینکه داده های سنسورهای دیجیتال و آنالوگ خود را در پورت سریال(serial port) چاپ کنیم، می خواهیم یک یک بخش از داشبورد ماشین های مدرن را در این بخش شبیه سازی کنیم. اکثر ماشین ها امروزه دمای فعلی را نشان می دهند و بیشتر آنها دارای سیستم کنترل فاصله ی پارک(parking-distance control system) هستند که اگر ماشین ما خیلی به یک شیء دیگر نزدیک شود هشدار می دهد.

صرفه جویی در برق با استفاده از سنسور ردیاب(Sonar Sensors)

محققین دانشگاه Northwestern و دانشگاه Michigan یک سیستم سونار(sonar system) ایجاد کرده اند که تنها از یک میکروفون و اسپیکرهای کامپیوتر استفاده می کند تا تشخیص دهد که آیا کامپیوتر در حال حاضر در حال استفاده است یا نه. اگر کامپیوتر در حال استفاده نباشد،صفحه ی کامپیوتر به طور اتوماتیک خاموش می شود و در برق صرفه جویی می شود. به جای استفاده از یک میکروفون و اسپیکرها، ما همچنین می توانیم از یک سنسور PING نیز استفاده کنیم. با آموزش هایی که در این فصل یاد گرفتید، می توانید یک چنین سیستمی را خودتان به سادگی ایجاد کنید. از شما می خواهیم که چنین کاری را انجام دهید.

در ماشین من، سیستم کنترل فاصله ی پارک(parking-distance control) شامل تعداد ال ای دی نارنجی و قرمز است. اگر چیزی در نزدیکی ماشین نباشد، تمام ال ای دی ها خاموش می شوند.به محض اینکه فاصله ی بین ماشین و یک مانع کم می شود، اولین ال ای دی نارنجی روشن می شود. هرچه که این فاصله کمتر شود، ال ای دی های بیشتری روشن می شوند. اگر فاصله به یک حد بحرانی برسد، تمام ال ای دی ها روشن می شوند و ماشین صداهای هشدار دهنده ای را پخش می کند.

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

ما قصد داریم برنامه ی مذکور را در قالب یک اَپ مرورگر گوگل کروم ایجاد کنیم.اکنون زمان مناسبی است که ضمیمه ی شماره 4 را مطالعه کنید: کنترل آردوینو با یک مرورگر در صفحه 267. فایل manifest.json این اپلیکیشن به صورت زیر است:

{ 
  "manifest_version": 2, 
  "name": "Dashboard Demo",
  "version": "1", 
  "permissions": [ "serial" ],
  "app": { 
    "background": { 
      "scripts": ["background.js"] 
    } 
  },
  "minimum_chrome_version": "33"
}

این کد در آدرس زیر قرار دارد:

در کدهای بالا، تمام اطلاعات متای مورد نیاز تعریف شده است و مشخص می کند که این اپلیکیشن کروم نیاز دارد تا به پورت سریال(serial port) دسترسی داشته باشد. فایل background.js نیز به صورت زیر است و چیز خاصی ندارد:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('main.html', {
    id: 'main',
    bounds: { width: 600, height: 300 }
  });
});

این کد در آدرس زیر قرار دارد:

InputDevices/Dashboard/background.js

این فایل، یک پنجره ی جدید را باز می کند و فایل main.html را نمایش می دهد:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="/css/dashboard.css"/>
    <title>Dashboard Demo</title>
  </head>
  <body>
    <div id="dashboard">
      <div id="distance-display">
        <p>
          <span id="d1">&#x25cf;</span> 
          <span id="d2">&#x25cf;</span>
          <span id="d3">&#x25cf;</span>
          <span id="d4">&#x25cf;</span>
          <span id="d5">&#x25cf;</span>
          <span id="d6">&#x25cf;</span>
          <span id="d7">&#x25cf;</span>
          <span id="d8">&#x25cf;</span> 
        </p>
      </div>
      <div id="temperature-display">
        <p><span id="temperature"></span> &#x2103;</p>
      </div>
    </div>
    <script src="/js/serial_device.js"></script>
    <script src="/js/dashboard.js"></script>
  </body>
</html>

این کد در آدرس زیر قرار دارد:

InputDevices/Dashboard/main.html

برای ایجاد رابط کاربری داشبورد، ما به برخی کدهای پایه ی HTML نیاز داریم. ما سیستم کنترل فاصله ی پارک(parking-distance control) را در خط های 12 تا 19 تعریف می کنیم. ما هر ال ای دی را با یک عنصر <span> مشخص می کنیم که حاوی کاراکتر یونیکد &#x25cf است که یک دایره ی سیاه پر شده را مشخص می کند. هر عنصر <span> یک ID یکتا دارد، بنابراین ما بعداً می توانیم با استفاده از این آی دی ها به تک تک ال ای دی ها رجوع کنیم. عنصر نمایش دهنده ی دما(temperature display) نیز در خط 23 قرار دارد و بسیار ساده تر است. و تنها شامل یک عنصر <span> است. ما یک کاراکتر یونیکد(&#x2103) را در آن برای نشان دادن نماد درجه ی سلسیوس قرار دادیم تا آن را به صورت پیشرفته تری نشان دهیم.

اکنون اجازه دهید تا کمی از CSS استفاده کنیم تا داشبورد خود را جذاب تر کنیم:

body {
  font-size: 50px;
  background: black;
  color: white;
}

#distance-display,
#temperature-display {
  text-align: center;
}

این کد در آدرس زیر قرار دارد:

InputDevices/Dashboard/css/dashboard.css

این برگه ی استایل، سایز فونت را افزایش می دهد و رنگ پس زمینه(background) را سیاه(black) می کند و رنگ متن را سفید(white) می کند. همچنین هر دوی بخش ال ای دی ها و بخش دما را وسط چین می کند. اکنون زمان آن رسیده است تا با استفاده از جاوا اسکریپت، به داشبورد خود زندگی ببخشیم:

var arduino = new SerialDevice("/dev/tty.usbmodem24321", 9600);

arduino.onConnect.addListener(function() {
  console.log("Connected to: " + arduino.path);
});

arduino.onReadLine.addListener(function(line) {
  console.log("Read line: " + line);
  var attr = line.split(","); 
  if (attr.length == 2) {
    var temperature = Math.round(parseInt(attr[0]) / 100.0 * 10) / 10; 
    var distance = parseInt(attr[1]) / 100.0;
    updateUI(temperature, distance);
  }
});

var lights = {
  d1: [35.0, "orange"],
  d2: [30.0, "orange"],
  d3: [25.0, "orange"],
  d4: [20.0, "orange"],
  d5: [15.0, "orange"],
  d6: [10.0, "orange"],
  d7: [7.0, "red"],
  d8: [5.0, "red"]
};

function updateUI(temperature, distance) {
  document.getElementById("temperature").innerText = temperature; 
  for (var i = 1; i < 9; i++) { 
    var index = "d" + i; 
    if (distance <= lights[index][0])
      document.getElementById(index).style.color = lights[index][1];
    else
      document.getElementById(index).style.color = "white";
  }
}

arduino.connect();

این کد در آدرس زیر قرار دارد:

InputDevices/Dashboard/js/dashboard.js

برای خواندن داده های سنسور از آردوینو، ما از کلاس SerialDevice استفاده می کنیم، که در بخش: نوشتن کلاس SerialDevice در صفحه 274 آن را ایجاد کرده ایم. در خط شماره 1 ما یک نمونه ی جدید(new instance) به نام arduino از کلاس مذکور می گیریم. مطمئن شوید که از مسیر صحیحی برای پورت سریال(serial port) استفاده می کنید. سپس ما یک شنونده ی رویداد به نام onConnect تعریف می کنیم که یک پیغام را به محض اینکه برنامه به آردوینو متصل شد، در کنسول جاوا اسکریپت مرورگر چاپ می کند. در اصل ما به شنونده ی رویداد onConnect نیازی نداریم. و در اینجا فقط برای فرایند دیباگ کردن مورد استفاده قرار می گیرد. با تعریف شنونده ی رویداد onReadLine همه چیز جالب تر می شود.

در خط 9، ما داده هایی که از آردوینو دریافت کرده ایم را از یکدیگر جدا(split) می کنیم. سپس بررسی می کنیم که واقعاً دو مقدار را دریافت کرده باشیم(در خط 10). سپس این دو مقدار را با استفاده از متد parseInt به عدد تبدیل می کنیم. و آنها را بر 100 تقسیم می کنیم، زیرا آردوینو مقادیری را ارسال می کند که از قبل در 100 ضرب شده بودند. در خط 11 ما از یک ترفند محبوب جاوا اسکریپت در گرد کردن مقدار دما به یک رقم اعشار، استفاده می کنیم. پس از اینکه ما فاصله و دما را به اعداد مناسبی تبدیل کردیم، آنها را به متد updateUI پاس می دهیم. متد updateUI ابتدا مقدار دمای جدید را در خط 29 تنظیم می کند. برای انجام این کار، با استفاده از تابع getElementById یک عنصر HTML خاص را با ID آن مشخص می کند. سپس پروپرتی innerText عنصر را گرفته و مقدار آن را برابر با دمای فعلی قرار می دهد.

آپدیت کردن ال ای دی های مصنوعی، کمی پیچیده تر است اما خیلی سخت نیست. ما در خط 17 یک آبجکت(شیء) به نام lights تعریف کرده ایم و در داخل آن 8 پروپرتی که نشان دهنده ی 8 آی دی(id) ال ای دی هستند تعریف کرده ایم. در داخل هر پروپرتی، یک آرایه قرار داده ایم که دو مقدار در درون هرکدام از آنها قرار می گیرد. بعنوان مثال، برای آی دی d1 یک آرایه تعریف کرده ایم که حاوی مقادیر 35.0 و orange است. این یعنی اینکه رنگ عنصری که آی دی آن d1 است، وقتی که فاصله ی (distance ) آن با شیء بعدی کمتر از 35.0 سانتی متر است باید نارنجی(orange) شود. با استفاده از آبجکت lights، به سادگی می توانیم نمایشگر ال ای دی ها را تکمیل کنیم.

در خط 30 ما شروع به ایجاد یک حلقه(loop ) بر روی تمام ال ای دی ها کرده ایم. ما آی دی(id) ال ای دی فعلی را در خط 31 مشخص می کنیم. سپس بررسی می کنیم که آیا فاصله ی (distance ) فعلی کوچکتر یا مساوی با مقدار آستانه ای که به ال ای دی فعلی اختصاص داده شده است، هست یا نه. اگر چنین باشد، ما رنگ ال ای دی را بر این اساس تغییر می دهیم. در غیر این صورت، رنگ آن را سفید(white) قرار می دهیم.

کمی تفریح با سنسورها

با استفاده از یک سنسور فراصوت، ما به سادگی می توانیم تشخیص دهیم که آیا کسی به ما نزدیک شده است یا نه. این باعث می شود که کاربردهای مفیدی به ذهن ما خطور کند. مثلا ما می توانیم به محض اینکه کسی به اندازه ی کافی نزدیک شد، یک درب را باز کنیم. یا به طور جایگزین، ما می توانیم از تکنولوژی های پیشرفته برای تفریح استفاده کنیم. مثلا می توانیم حیله هایی برای جشن هالووین بکار ببریم؛ مثل یک کدو تنبل که وقتی از یک خط نامرئی عبور کردید، برف شادی را پخش می کند. می توانید آن را با استفاده از سنسور PING ایجاد کنید.

برای مشاهده روش ساخت پرتاب کننده ی برف شادی(Silly String shooter) اینجا کلیک کنید.

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

{module کمک نقدی به نویسنده}

تاریخ انتشار : 13 آبان 1399.
تاریخ بروزرسانی : 04 ارديبهشت 1400.
بازدید: 720

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.