[android] IOT via MQTT dan menampilkan Gauge menggunakan quickchart.io

 

Wahh ngapain bahas MQTT dan Aplikasi IOT lagi? Kan sudah pernah tuh bikin grafik yang keren di smartphone ( baca disini ) bahkan sudah sempat dijadikan bahan ujian semester anak D4 Teknik Listrik Unesa. 

Memang sih menurut pandangan sekilas akan terlihat itu lagi dan lagi yang ditulis, namun sadar gak ya ? Kalau apk IOT MQTT panel itu terpaku pada susunan widget yang itu-itu aja dan cenderung kaku dalam tampilan. Merubah font saja pun gak akan bisa. Dan kalau aplikasinya digunakan untuk proyek maka terkesan kurang keren apabila ingin menambahkan logo-gambar-screen lain pada aplikasi. Lalu langkah pertama apa ya setelah berhasil belajar awal mengkreasikan aplikasi android di MIT APP INVENTOR (baca disini) ? Yang pertama akan saya bahas adalah bagaimana menambahkan gauge/meter pada aplikasi.

- Quickchart.io

Ini merupakan website yang lama saya kenal karena sangat bermanfaat dalam membuat grafik secara statis maupun dinamis, dengan library yang opensource maupun berbayar. Jika anda masuk ke websitenya di bagian galery maka akan banyak jenis chart dan grafik yang mungkin kamu perlukan, seperti yang saya temukan yaitu gauge berupa speedometer.

Jadi tinggal mengkreasikan setingan CSS di editor sebelah kiri maka dapat membuat gambar speedometer seperti yang saya contohkan di link yang telah digenerate seperti  berikut :

https://quickchart.io/chart?w=150&h=150&bkg=rgba(246%2C%20241%2C%20241%2C%200.13)&c=%0A%7B%0A%20%20type%3A%20%27gauge%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27Kering%27%2C%20%27Sedang%27%2C%20%27Basah%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B30%2C%2070%2C%2099%5D%2C%0A%20%20%20%20%20%20%20%20value%3A%2050%2C%0A%20%20%20%20%20%20%20%20minValue%3A%200%2C%0A%20%20%20%20%20%20%20%20backgroundColor%3A%20%5B%27green%27%2C%20%27orange%27%2C%20%27red%27%5D%2C%0A%20%20%20%20%20%20%20%20borderWidth%3A%202%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20legend%3A%20%7B%0A%20%20%20%20%20%20display%3A%20false%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20title%3A%20%7B%0A%20%20%20%20%20%20display%3A%20true%2C%0A%20%20%20%20%20%20text%3A%20%27Kelembaban%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20needle%3A%20%7B%0A%20%20%20%20%20%20radiusPercentage%3A%201%2C%0A%20%20%20%20%20%20widthPercentage%3A%205%2C%0A%20%20%20%20%20%20lengthPercentage%3A%2080%2C%0A%20%20%20%20%20%20color%3A%20%27%23000%27%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20valueLabel%3A%20%7B%0A%20%20%20%20%20%20fontSize%3A%2020%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%27white%27%2C%0A%20%20%20%20%20%20color%3A%20%27%23000%27%2C%0A%20%20%20%20%20%20formatter%3A%20function%20(value%2C%20context)%20%7B%0A%20%20%20%20%20%20%20%20return%20value%20%2B%20%27%20%25%20rH%27%3B%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20bottomMarginPercentage%3A%2060%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20datalabels%3A%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20%27auto%27%2C%0A%20%20%20%20%20%20%20%20formatter%3A%20function%20(value%2C%20context)%20%7B%0A%20%20%20%20%20%20%20%20%20%20return%20context.chart.data.labels%5Bcontext.dataIndex%5D%3B%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20color%3A%20%27%23fff%27%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D

Panjang ya ? namun sangat berguna jika kita akan tempelkan di widget browser atau pada MIT APP Inventor dinamakan webviewer. Jika link diatas dimasukkan di address browser akan muncul gambar yang sebeneranya bersesuaian dengan item-item parameter yang ada pada link. coba deh kamu masukkan sendiri ya di browser.

- Component WebViewer

Untuk menampilkan html ataupun browser pada MIT APP Inventor, maka komponen ini menjadi handalannya, baik bisa langsung membuka link internet maupun file html lokalan. Nah karena quickchart.io sangat simple memberikan alamat link grafik beserta parameter yang terpampang jelas, maka cukup dengan memotong bagian dimana value dari gauge akan dimasukkan, maka terpecahkanlah keruwetan yang sehari sebelumnya saya pikir akan susah. Perhatikan deh pemotongan link panjang menjadi 3 bagian block nya webviewer seperti di bawah.

Jadi dengan memotong dengan tepat lalu di join kan ke tiga potongan dengan menyisipkan angka humi maka hasilnya menarik seperti dibawah ini:

- Extension Paho MQTT (link disini)

Ini berguna sebagai tambahan library pada MIT APP Inventor untuk melakukan proses koneksi dan publish maupun subscribe sesuai standar library Paho MQTT. Jadi jika anda yang sudah sering membaca pembahasan saya mengenai MQTT yakin sudah sangat paham polanya. Untuk mempersingkat yang malas cari-cari tulisan saya mengenai mqtt yang dulu-dulu, saya siapkan hardware berupa ESP32 yang terhubung dengan sensor IOT sejuta umat DHT 11 yang akan mengirimkan data sensor ke broker mqtt test.mosquitto.org. Scriptnya seperti berikut :

#include <WiFi.h>
#include <PubSubClient.h> 
#include "DHT.h"


const char *ssid =  "wifiku";   // Gunakan sesuai wifi kamu
const char *pass =  "passwordku";   //

//inisialisasi broker
const char *mqtt_server = "test.mosquitto.org"; //BROKER GRATIS
const int mqtt_port = 1883;
const char *mqtt_user = "";
const char *mqtt_pass = "";
const char *mqtt_client_name = "aisi555keren"; // Client connections random dan gak boleh sama

// Daftar Topik disingkat, karena biasanya panjang-panjang namanya
#define TOPIC "/aisi555/mydata"


// DHT11 configuration
#define DHTPIN 4  // GPIO4 where the DHT11 is connected
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

//Timer
unsigned long previousMillis = 0;
const long interval = 10000;   // interval pengambilan dht 11
                               // broker gratis jangan cepet2

WiFiClient wclient;            //wifi client terhubung lib pubsub
PubSubClient client(wclient);

void setup() {
    // Initialize Serial for debugging
  Serial.begin(9600);
  Serial.println();

  WiFi.begin(ssid, pass);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Terhubung..");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
  // Start DHT sensor
  client.setServer(mqtt_server, mqtt_port);
  dht.begin();

}
void reconnectmqtt() //function mengatur koneksi ke broker 
{
   
    
      Serial.println("Connecting to MQTT server..");
     
      if (client.connect(mqtt_client_name,mqtt_user, mqtt_pass)) {
        Serial.println("Connected to MQTT server");
      } else {
        Serial.println("Could not connect to MQTT server");   
      }
   
  
}

  void SendTempHumid(){
    //membaca sensor dan mengirim/publish ke topic
    float h = dht.readHumidity();
    float t = dht.readTemperature();

    if (isnan(h) || isnan(t)) {
      Serial.println("Failed to read from DHT sensor!");
      return;
    }
    
    else{
    String pubString ="";
    pubString += "Temp: "; 
    pubString += String(t);
    pubString += " °C ";
    pubString += "Humi: "; 
    pubString += String(h);
    pubString += " %rH";

    
    Serial.println("publish to topic: " );
    Serial.print(TOPIC);
    Serial.print(" : ");
    Serial.println(pubString);
    char message_buff[pubString.length() + 1];
    pubString.toCharArray(message_buff, pubString.length() + 1);
    client.publish(TOPIC,message_buff );

    }

  }
void loop() {

 if (!client.connected()) 
   {
    reconnectmqtt();
   }

  
  unsigned long currentMillis = millis();
 
  if(currentMillis - previousMillis >= interval) {
    // cek interval  
    previousMillis = currentMillis;   

   SendTempHumid();
  }

}

Dan jika benar kreasi hardware dan koneksi mqtt nya dapat diuji pada aplikasi MQTT di PC maupun di  smartphone.

Pada bagian designer MIT APP Inventor dapat disetting langsung parameter broker mqtt nya dari extension paho mqtt atau juga bisa dilakukan ada bagian block. 

- Block Screen Initial

Maksudnya adaah koneksi ke broker mqtt dimulai saat layar selesai dimuat.

- Block status koneksi broker dan subscribe topik

Block ini berisikan satus dari koneksi ke broker dimana 0= terputus, 1 = menghubungkan, 2= terhubung, 3= sedang memutus, 4=koneksi abort. Jadi saya bikinkan kondisi IF..Then..Else dimana jika kondisi koneksi selain terhubung maka segera menyambungkannya kembali. Bisa juga di kondisikan sesuai keinginan si pembuat yang penting konsepnya adalah akan selalu berusaha menghubungkan ke broker. Sedangkan jika connection state =2 alias terhubung, maka lakukan subscribe ke topic yang digunakan pubsub data. Coding ini saya kondisikan persis logika yang selama ini digunakan pada pubsubclient di arduino.

Update: 

Cara diatas lebih elegan dengan memanfaatkan trigger dari clock1 yang saya settng tiap 5 detik akan melakukan proses pengecekan status koneksi ke broker MQTT lalu menghubungkannya kembali jika koneksi terputus. Variabel "sudah" digunakan untuk menyimpan status /flag apakah broker sudah terhubung atau tidak.

- Block Message Received

Secara gamblang dapat dilihat ketika ada message yang diterima dari topic maka data yang berformat : "Temp: 31.90 °C Humi: 95.00 %rH " akan diextract untuk mendapatkan nilai suhu dan kelembaban. Sedangkan nilai-nilai lainnya hampir mirip dengan tulisan sebelumnya, namun dibedakan adalah penulisan grafik yang terdahulu menggunakan trigger clock1 tiap 1 detik sedangkan kali ini akan diproses setelah message dari broker diterima. Karena hanya 1 topic yang diolah maka sederhana saja hanya melakukan pengolahan atau parsing data text saja. Selanjutnya hasil aplikasi IOT nya dapat dilihat pada gambar paling atas.

Bagaimana ? Selamat mencoba kawan

Read More

[Tutorial] Dasar Input Analog Mikrokontroler - Output ke Led Strip WS2812

 

Kita lanjutkan pembelajaran kali ini bersama dengan kuliah mikrokontroler mahasiswa teknik listrik unesa surabaya, dengan topik analog input. Sebagai mana kita bahas sebelumnya, sketch arduino sudah memiliki contoh-contoh program yang bisa dilihat pada sketch langsung atau pada website arduino.cc . Saya sekarang akan mengambil sebuah potensiometer yang bisa digunakan pada pengatur volume audio dan saya buat sebagai rangkaian pembagi tegangan 5 volt.

Catatan : Jika pake esp8266 maka tegangan 0 - 3,3 volt

A0 sampai A5 merupakan analog input dari arduino dimana memiliki range tegangan yang di ijinkan 0-5 volt. Resolusi atau kerapatan data bit nya adalah 10 bit, sehingga 5 volt diwakili oleh binari 0b1111111111 atau desimal 1023. Dari rumus matematika  sederhana dengan membagi 5 volt dengan 1023,  maka kita bisa membuat voltmeter sederhana dan bisa membaca tegangan yang diberikan oleh pin tengah dari potensiometer 10 k ohm yang saya gunakan. Silahkan coba script berikut ini :

#define ADC_PIN 1   //pin ADC 

float tegangan ;  //variabel tegangan desimal

void setup() {

  //pakai monitor serial

  Serial.begin(9600);

}

void loop() {

   //resolusi per bit = 5v/1023 = 0.0049 volt

   //baca ADC

   tegangan = analogRead(ADC_PIN) * 0.0049;

 

   //kirimkan output pembacaan ke serial

   Serial.print( "Tegangan = ");

   Serial.print( String(tegangan,2) );

   Serial.println (" volt");

    

  delay(100); 

  

}

Dari hasil diatas dapat dilihat perubahan tiap bit mewakili 4.9 miliVolt. Lalu bagaimana membuatnya lebih menarik ? Kita gunakan Led Strip ws2812b yang lagi ngetop belakangan ini. Untuk itu baca dulu pembahasan di blog yang saya temukan di internet disini.

Saya telah membeli 30 buah led ws2812b seharga 900 rupiah sebiji dan saya rangkai dengan arduino pro mini milik saya. Bisa menggunakan arduino jenis lain maupun esp8266 yang dimiliki, dan usahakan jika lednya banyak maka gunakanlah power suply 5 volt terpisah seperti pada gambar dibawah ini :

*) gunakan resistor 330 ohm sebagai pengaman agar led awal tidak cepat rusak

Koding yang saya gunakan adalah sebagai berikut :

#include <Adafruit_NeoPixel.h> //library

#define LED_PIN 4         //sesuaikan pin data

#define LED_COUNT 30      //sesuaikan jumlah led

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);

int posisi_led;     //variabel posisi led

void setup() {

//inisialisasi led strip 

  strip.begin();           

  strip.setBrightness(30); 

}

void loop() {

      

 // baca adc port A1 , sesuaikan

 //34 ==> pembulatan 1023/30LED

  

 posisi_led = analogRead(1)/34;

 

  strip.clear();

  strip.setPixelColor(posisi_led, 255, 255, 255);

  strip.show();   

 

  delay(100); 

  

}

Hasil dari coding diatas dapat dilihat pada animasi paling atas. Selamat Mencoba !! 

Read More