Kontrol Led Via Aplikasi Web

Pada tutorial kali ini saya akan menjelaskan bagaimana mengendalikan led via website. Apa-apa saja sih yang dibutuhkan dalam pembuatan project kali ini, untuk sisi web saya menggunakan microsoft visual studio yang sudah mendukung komunikasi serial sehingga nantinya dapat dihubungkan ke modul arduino dan untuk modul arduino saya menggunakan arduino uno rev3, tidak harus arduino uno sih tapi model yang lain juga dapat bekerja dengan baik, o iya jangan lupa beberapa komponen led yang ingin dikendalikan sebaiknya gunakan led berwarna warni agar nantinya dapat dibedakan.

Gambar : Wiring diagram modul arduino dengan led

Selanjutnya pada bagian programmingnya. Untuk cara kerjanya adalah dari website mengirimkan perintah ke modul arduino via komunikasi serial dan kemudian perintah-perintah tersebut melalui port digunakan untuk menyalakan led-led tersebut. Karena komunikasi menggunakan serial jangan lupa setting baudrate terlebih dahulu. Setelah selesai konfigurasi pin-pin mana yang akan difungsikan sebagai keluaran untuk led.

      Untuk looping, kita mulai mulai menggunakan statment “if” untuk melihat koneksi serial. Ini penting karena kita ingin mempersiapkan untuk menerima inputan dari website. Apakah ada proses yang dikirimkan oleh sisi website. Berikut ini source code untuk microcontroller programming

///pengaturan nomor pin untuk led

//power indikator led

int pwr = 6;

//kontrol led

int merah = 9;

int orange = 10;

int kuning = 8;

int hijau = 11;

int biru = 12;

int pink=6;

///konfigurasi untuk komunikasi serial baudrate

int baud = 9600;

///set delay, kali ini saya gunakan delay sekitar 1 detik

int time = 1000;

void setup()

{

  //seting pin mode dan les saya beri kondisi high/menyala

  pinMode(pwr, OUTPUT);

  digitalWrite(pwr, HIGH);

  //memulai antar muka serial

  Serial.begin(baud);

  //set pin untuk mengontrol led

  pinMode(merah, OUTPUT);

  pinMode(orange, OUTPUT);

  pinMode(kuning, OUTPUT);

  pinMode(hijau, OUTPUT);

  pinMode(biru, OUTPUT);

  pinMode(pink, OUTPUT);

}

// perintah loop bertujuan untuk looping statment tanpa berhenti

void loop()

//selalu scan komunikasi serial

{

  //jika koneksi serial tersedia dan lebih dari satu maka fungsi ini akan aktif

  if (Serial.available() > 0)

  {

    //baca inputan dari serial

    int val = Serial.read();

    //jika benar statment berikut maka akan mengeksekusi

    if (val == '1')

    {

      digitalWrite(merah, HIGH);

      delay(time);

      digitalWrite(merah, LOW);

    }

    if (val == '2')

    {

      digitalWrite(orange, HIGH);

      delay(time);

      digitalWrite(orange, LOW);

    }

    if (val == '3')

    {

      digitalWrite(kuning, HIGH);

      delay(time);

      digitalWrite(kuning, LOW);

    }

    if (val == '4')

    {

      digitalWrite(hijau, HIGH);

      delay(time);

      digitalWrite(hijau, LOW);

    }

    if (val == '5')

    {

      digitalWrite(biru, HIGH);

      delay(time);

      digitalWrite(biru, LOW);

    }

    if (val == '6')

    {

      digitalWrite(pink, HIGH);

      delay(time);

      digitalWrite(pink, LOW);

    }

    Serial.flush();

  }

}

Setelah selesai pemprograman untuk bagian hardwarenya dan arduino sudah siap menerima inputan dari sisi web, sekarang lanjut di bagian aplikasi pemprograman web saya menggunakan microsoft visual studio, akan saya sertakan source codenya dibawah ini

using System;

using System.Collections.Generic;

using System.Linq;

using System.Data.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO.Ports;

using System.Text;

using System.ComponentModel;

using System.Windows;

pada code diatas terdapat using System.IO.Ports; Digunakan untuk komunikasi serial arduino. Selanjutnya dibutuhkan konfigurasi untuk komunikasi serialnya nomor port mana yang ingin diseting dan berapa baudrate yang ingin digunakan. Pada aplikasi web nantinya akan saya buat 6 tombol untuk kontrol 6 led tersebut.

namespace ArduinoTest

{

    public partial class LEDTest : System.Web.UI.Page

    {

        SerialPort ardo;

        protected void Page_Load(object sender, EventArgs e)

        {

            ardo = new SerialPort();

            ardo.PortName = "COM4";

            ardo.BaudRate = 9600;

        }

        protected void BlueOn(object sender, EventArgs e)

        {

            string merah = "1";

            ardo.Open();

            ardo.Write(merah);

            ardo.Close();

        }

        protected void GreenOn(object sender, EventArgs e)

        {

            string orange = "2";

            ardo.Open();

            ardo.Write(orange);

            ardo.Close();

        }

        protected void OrangeOn(object sender, EventArgs e)

        {

            string kuning = "3";

            ardo.Open();

            ardo.Write(kuning);

            ardo.Close();

        }

        protected void RedOn(object sender, EventArgs e)

        {

            string hijau = "4";

            ardo.Open();

            ardo.Write(hijau);

            ardo.Close();

        }

        protected void RedOn(object sender, EventArgs e)

        {

            string biru = "5";

            ardo.Open();

            ardo.Write(biru);

            ardo.Close();

        }

        protected void RedOn(object sender, EventArgs e)

        {

            string pink = "6";

            ardo.Open();

            ardo.Write(pink);

            ardo.Close();

        }

    }

}

Sekarang lanjut untuk tampilan tombolnya, saya pakai code html. Kita butuh 6 tombol untuk kontrol led tersebut.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LEDTest.aspx.cs" Inherits="ArduinoTest.LEDTest" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Kontrol Led Via Website</title>

    <style type="text/css">

        .Panel

        {

            margin-left: 2%;

            margin-top: 2%;

            border-color: white;

            border-width: 20px;

        }

        .Header

        {

            font-family: "Segoe UI";

            font-size: xx-large;

            font-weight: normal;

            font-style: normal;

            font-variant: normal;

            text-transform: none;

            color: #000000;

        }

        .Sub

        {

            font-family: "Segoe UI";

            font-size: x-large;

            font-weight: normal;

            font-style: normal;

            font-variant: normal;

            text-transform: none;

            color: #666666;

        }

    </style>

</head>

<body bgcolor="#CCCCCC">

    <form id="form1" runat="server">

      <asp:Panel ID="Panel1" runat="server" BackColor="White" BorderStyle="Solid"

            Width="317px" CssClass="Panel">

        <div>

        <span class="Header">Kontrol Led Via Website<br /> </span>

        <span class="Sub"> <br /> </span>

        <table>

            <tr>

                <td>

                    <asp:Button ID="merah" runat="server" Text=" merah" OnClick="merahOn"

                        BackColor=" merah " BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

            <tr>

                <td>

                    <asp:Button ID="Orange" runat="server" Text="orange" OnClick="OrangeOn" BackColor="#33CC33"

                        BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

            <tr>

                <td>

                    <asp:Button ID="kuning" runat="server" Text="kuning" OnClick="kuningOn"

                        BackColor="#FF6600" BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

            <tr>

                <td>

                    <asp:Button ID="hijau" runat="server" Text="hijau" OnClick="hijauOn"

                        BackColor="#CC0000" BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

            <tr>

                <td>

                    <asp:Button ID="biru" runat="server" Text="biru" OnClick="biruOn"

                        BackColor="#CC0000" BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

            <tr>

                <td>

                    <asp:Button ID="pink" runat="server" Text="pink" OnClick="pinkOn"

                        BackColor="#CC0000" BorderStyle="None" Font-Names="Segoe UI" Font-Size="XX-Large"

                        ForeColor="White" Width="310px" />

                </td>

            </tr>

        </table>

        </div>

      </asp:Panel>

    </form>

</body>

</html>

Gambar : tampilan pada web browser

Terima kasih atas kunjungannya jangan lupa kritik dan sarannya untuk perbaikan blog ini.