Perkenalan Koding GIS - Open Street Map di D4 Transportasi Unesa

 

Dunia transportasi memiliki hubungan yang sangat erat dengan per-Peta-an yang dalam istilah kerennya disebut ilmu Geographic Information System. Penilaian dari sebuah lalu lintas apakah padat, lengang, macet, bahkan laporan bulananya akan menjadi lebih mudah dimengerti melalui laporan visual. Seperti orang bijak bilang "A picture is worth a thousand words" apalagi kalau "words" atau kata-kata yang ingin disampaikan berupa data-data numerik. Alasan inilah yang melatarbelakangi saya berbagi ilmu bagaimana menyusun sebuah laporan traffic dalam sebuah peta yang interactive.

Masih teringat jelas 5 tahun lalu saya sempat bermain perangkat GPS yang saya bawa keliling perumahan untuk mencoba mengambil data suhu dan kelembaban (baca disini), dan dimasa pandemi itu saya mendapatkan dasar-dasar penggabungan data numerik ke dalam sebuah peta yang saat itu saya gunakan adalah google maps. Begitu juga perkenalan saya dengan python dan geopy yang merupakan package berbasis OSM ( open street map). Jadi  topik pertama di awal sesi berbagi ilmu koding GIS di D4 transportasi fakultas vokasi unesa, saya perkenalan OSM dan bagaimana membuat simulasi perjalanan berbasis GPS-MQTT yang kemudian ditampilkan langsung di web browser.

OSM ini merupakan platform per-petaan yang berbasis open source, sehingga dapat digunakan secara bebas (tentunya dengan volume penggunaan yang wajar) untuk berbagai aplikasi perpetaan. Simulasi yang saya rancang akan membaca urutan titik-titik koordinat yang saya susun dan kemudian secara satu-persatu dikirimkan melalui protokol MQTT ( kalau belum paham  dasar mqtt bisa baca disini). Broker yang saya gunakan adalah hivemq.com yang kini sudah tidak full gratis lagi jika tidak mendaftar akun. Jadi jika kalian ingin mencobanya maka butuh mendaftar akun dan mendapatkan alamat broker private cloud yang lebih cepat dari sekedar broker.hivemq.com.

Koding simulator python Mqtt seperti ini :

#jalankan ini untuk mensimulasikan pergerakan sebuah kendaraan

import json

import time

import paho.mqtt.client as mqtt

import ssl

# MQTT Broker Configuration sesuaikan dengan account hivemq kalian

MQTT_BROKER = "xxxxxxxxxxxxxxxxxxxxxxxxx.s1.eu.hivemq.cloud"

MQTT_PORT = 8884  # WebSocket Secure (WSS) port

MQTT_TOPIC = "car/gps" #topiknya sama

MQTT_USERNAME = "user_name"  # Ganti dengan HiveMQ Cloud username

MQTT_PASSWORD = "password"  # Gant dengan HiveMQ Cloud password

# Create MQTT client with WebSocket transport

client = mqtt.Client(transport="websockets")

client.tls_set_context(ssl.create_default_context()) #websocket TLS 8884

client.username_pw_set(MQTT_USERNAME, MQTT_PASSWORD)  # Set credentials

# Connect to the broker

client.connect(MQTT_BROKER, MQTT_PORT)

print("Connected to MQTT broker")

# Load GPS data from the file GANTI FILENYA yang sesuai

with open("gps_1.txt", "r") as file:

    gps_data = json.load(file)

# Simulate car movement and publish GPS data

for point in gps_data:

    latitude = point["latitude"]

    longitude = point["longitude"]

    payload = {

        "latitude": latitude,

        "longitude": longitude

    }

    print(f"Publishing: {payload}")

    client.publish(MQTT_TOPIC, json.dumps(payload))

    time.sleep(0.1)  # Simulate 1-second delay

# Disconnect after publishing all points

client.disconnect()

print("Disconnected from MQTT broker")

Untuk bisa menampilkan pada web browser maka dibutuhkan MQTT dengan websocket dan hivemq menggunakan port 8884 untuk pub dan sub data. Sedangkan file urutan titik-titik perjalanan digunakan sebuah file yang pada contoh diatas bernama gps_1.txt. Sedangkan isi dari file ini adalah json sebagai berikut :

[
    {
        "latitude": -7.23177,
        "longitude": 112.72837
    },
    {
        "latitude": -7.23173,
        "longitude": 112.72839
    },
    {
        "latitude": -7.23141,
        "longitude": 112.72854
    },
    {
        "latitude": -7.23106,
        "longitude": 112.72874
    },
    {
        "latitude": -7.23064,
        "longitude": 112.72896
    },
    {
        "latitude": -7.22985,
        "longitude": 112.72941
    },
    {
        "latitude": -7.22955,
        "longitude": 112.72953
    },
    {
        "latitude": -7.22906,
        "longitude": 112.72977
    },
    {
        "latitude": -7.229,
        "longitude": 112.7298
    },
    {
        "latitude": -7.2271,
        "longitude": 112.73066
    },
    {
        "latitude": -7.22666,
        "longitude": 112.73086
    },
    {
        "latitude": -7.22613,
        "longitude": 112.73111
    },
    {
        "latitude": -7.22598,
        "longitude": 112.73118
    },
    {
        "latitude": -7.2251,
        "longitude": 112.7316
    },
    {
        "latitude": -7.22491,
        "longitude": 112.73165
    },
    {
        "latitude": -7.22449,
        "longitude": 112.73179
    },
    {
        "latitude": -7.2244,
        "longitude": 112.73182
    },
    {
        "latitude": -7.22413,
        "longitude": 112.73189
    },
    {
        "latitude": -7.22356,
        "longitude": 112.73199
    },
    {
        "latitude": -7.223,
        "longitude": 112.73208
    },
    {
        "latitude": -7.22284,
        "longitude": 112.73205
    },
    {
        "latitude": -7.22266,
        "longitude": 112.73193
    },
    {
        "latitude": -7.2226,
        "longitude": 112.73187
    },
    {
        "latitude": -7.22241,
        "longitude": 112.73167
    },
    {
        "latitude": -7.22213,
        "longitude": 112.73142
    },
    {
        "latitude": -7.2214,
        "longitude": 112.73103
    },
    {
        "latitude": -7.22101,
        "longitude": 112.73084
    },
    {
        "latitude": -7.22074,
        "longitude": 112.7307
    },
    {
        "latitude": -7.22038,
        "longitude": 112.73051
    },
    {
        "latitude": -7.22029,
        "longitude": 112.73046
    },
    {
        "latitude": -7.22023,
        "longitude": 112.7304
    },
    {
        "latitude": -7.22009,
        "longitude": 112.73021
    },
    {
        "latitude": -7.22008,
        "longitude": 112.73019
    },
    {
        "latitude": -7.21994,
        "longitude": 112.72989
    },
    {
        "latitude": -7.21989,
        "longitude": 112.72975
    },
    {
        "latitude": -7.21982,
        "longitude": 112.72943
    },
    {
        "latitude": -7.21984,
        "longitude": 112.72922
    },
    {
        "latitude": -7.21996,
        "longitude": 112.72871
    },
    {
        "latitude": -7.22024,
        "longitude": 112.728
    },
    {
        "latitude": -7.22034,
        "longitude": 112.72766
    },
    {
        "latitude": -7.22043,
        "longitude": 112.72727
    },
    {
        "latitude": -7.22047,
        "longitude": 112.72693
    },
    {
        "latitude": -7.22049,
        "longitude": 112.72673
    },
    {
        "latitude": -7.22054,
        "longitude": 112.72555
    },
    {
        "latitude": -7.22061,
        "longitude": 112.7248
    },
    {
        "latitude": -7.22069,
        "longitude": 112.72444
    },
    {
        "latitude": -7.22088,
        "longitude": 112.72395
    },
    {
        "latitude": -7.22107,
        "longitude": 112.7236
    },
    {
        "latitude": -7.22126,
        "longitude": 112.72335
    },
    {
        "latitude": -7.22153,
        "longitude": 112.72308
    },
    {
        "latitude": -7.22185,
        "longitude": 112.72285
    },
    {
        "latitude": -7.22226,
        "longitude": 112.72264
    },
    {
        "latitude": -7.22265,
        "longitude": 112.7225
    },
    {
        "latitude": -7.22282,
        "longitude": 112.72246
    },
    {
        "latitude": -7.22292,
        "longitude": 112.72246
    },
    {
        "latitude": -7.22314,
        "longitude": 112.72252
    },
    {
        "latitude": -7.22331,
        "longitude": 112.72259
    },
    {
        "latitude": -7.22337,
        "longitude": 112.72264
    },
    {
        "latitude": -7.22348,
        "longitude": 112.72269
    },
    {
        "latitude": -7.2236,
        "longitude": 112.72271
    },
    {
        "latitude": -7.22368,
        "longitude": 112.72271
    },
    {
        "latitude": -7.22376,
        "longitude": 112.72271
    },
    {
        "latitude": -7.22393,
        "longitude": 112.72269
    },
    {
        "latitude": -7.22404,
        "longitude": 112.72266
    },
    {
        "latitude": -7.22415,
        "longitude": 112.72261
    },
    {
        "latitude": -7.22423,
        "longitude": 112.72254
    },
    {
        "latitude": -7.22425,
        "longitude": 112.72252
    },
    {
        "latitude": -7.2244,
        "longitude": 112.72235
    },
    {
        "latitude": -7.22453,
        "longitude": 112.72223
    },
    {
        "latitude": -7.22471,
        "longitude": 112.72211
    },
    {
        "latitude": -7.22486,
        "longitude": 112.72205
    },
    {
        "latitude": -7.22533,
        "longitude": 112.72196
    },
    {
        "latitude": -7.2261,
        "longitude": 112.72181
    },
    {
        "latitude": -7.22696,
        "longitude": 112.72164
    },
    {
        "latitude": -7.2273,
        "longitude": 112.72155
    },
    {
        "latitude": -7.22813,
        "longitude": 112.72135
    },
    {
        "latitude": -7.22875,
        "longitude": 112.72118
    },
    {
        "latitude": -7.22881,
        "longitude": 112.72117
    },
    {
        "latitude": -7.22884,
        "longitude": 112.72116
    },
    {
        "latitude": -7.229,
        "longitude": 112.7211
    },
    {
        "latitude": -7.22949,
        "longitude": 112.72093
    },
    {
        "latitude": -7.23014,
        "longitude": 112.72065
    },
    {
        "latitude": -7.2307,
        "longitude": 112.72038
    },
    {
        "latitude": -7.2315,
        "longitude": 112.71988
    },
    {
        "latitude": -7.23173,
        "longitude": 112.71973
    },
    {
        "latitude": -7.23199,
        "longitude": 112.71955
    },
    {
        "latitude": -7.23204,
        "longitude": 112.71951
    },
    {
        "latitude": -7.23219,
        "longitude": 112.7194
    },
    {
        "latitude": -7.23233,
        "longitude": 112.71929
    },
    {
        "latitude": -7.23601,
        "longitude": 112.71656
    },
    {
        "latitude": -7.23617,
        "longitude": 112.71644
    },
    {
        "latitude": -7.23633,
        "longitude": 112.71633
    },
    {
        "latitude": -7.23707,
        "longitude": 112.71577
    },
    {
        "latitude": -7.23774,
        "longitude": 112.71526
    },
    {
        "latitude": -7.23778,
        "longitude": 112.71523
    },
    {
        "latitude": -7.23842,
        "longitude": 112.71474
    },
    {
        "latitude": -7.23862,
        "longitude": 112.71459
    },
    {
        "latitude": -7.2389,
        "longitude": 112.71438
    },
    {
        "latitude": -7.23916,
        "longitude": 112.71418
    },
    {
        "latitude": -7.23978,
        "longitude": 112.71371
    },
    {
        "latitude": -7.24009,
        "longitude": 112.71348
    },
    {
        "latitude": -7.24021,
        "longitude": 112.7134
    },
    {
        "latitude": -7.24034,
        "longitude": 112.71331
    },
    {
        "latitude": -7.24053,
        "longitude": 112.71319
    },
    {
        "latitude": -7.24072,
        "longitude": 112.71306
    },
    {
        "latitude": -7.24098,
        "longitude": 112.71288
    },
    {
        "latitude": -7.24112,
        "longitude": 112.71278
    },
    {
        "latitude": -7.24116,
        "longitude": 112.71276
    },
    {
        "latitude": -7.24138,
        "longitude": 112.71258
    },
    {
        "latitude": -7.24154,
        "longitude": 112.71245
    },
    {
        "latitude": -7.24191,
        "longitude": 112.71214
    },
    {
        "latitude": -7.24209,
        "longitude": 112.71199
    },
    {
        "latitude": -7.24226,
        "longitude": 112.71186
    },
    {
        "latitude": -7.24289,
        "longitude": 112.71137
    },
    {
        "latitude": -7.24334,
        "longitude": 112.71104
    },
    {
        "latitude": -7.24361,
        "longitude": 112.71085
    },
    {
        "latitude": -7.24367,
        "longitude": 112.71081
    },
    {
        "latitude": -7.24372,
        "longitude": 112.71078
    },
    {
        "latitude": -7.24425,
        "longitude": 112.71042
    },
    {
        "latitude": -7.24469,
        "longitude": 112.71016
    },
    {
        "latitude": -7.24519,
        "longitude": 112.70993
    },
    {
        "latitude": -7.24532,
        "longitude": 112.70986
    },
    {
        "latitude": -7.24556,
        "longitude": 112.70977
    },
    {
        "latitude": -7.2459,
        "longitude": 112.70961
    },
    {
        "latitude": -7.24601,
        "longitude": 112.70958
    },
    {
        "latitude": -7.24615,
        "longitude": 112.70958
    },
    {
        "latitude": -7.24643,
        "longitude": 112.70948
    },
    {
        "latitude": -7.24684,
        "longitude": 112.7094
    },
    {
        "latitude": -7.24706,
        "longitude": 112.70937
    },
    {
        "latitude": -7.24733,
        "longitude": 112.70932
    },
    {
        "latitude": -7.24802,
        "longitude": 112.70928
    },
    {
        "latitude": -7.24847,
        "longitude": 112.70927
    },
    {
        "latitude": -7.24906,
        "longitude": 112.70926
    },
    {
        "latitude": -7.24991,
        "longitude": 112.70926
    },
    {
        "latitude": -7.25059,
        "longitude": 112.70928
    },
    {
        "latitude": -7.25067,
        "longitude": 112.70927
    },
    {
        "latitude": -7.25072,
        "longitude": 112.70927
    },
    {
        "latitude": -7.25092,
        "longitude": 112.70928
    },
    {
        "latitude": -7.25098,
        "longitude": 112.70928
    },
    {
        "latitude": -7.25199,
        "longitude": 112.70928
    },
    {
        "latitude": -7.2523,
        "longitude": 112.70929
    },
    {
        "latitude": -7.253,
        "longitude": 112.70931
    },
    {
        "latitude": -7.25341,
        "longitude": 112.70931
    },
    {
        "latitude": -7.25348,
        "longitude": 112.70931
    },
    {
        "latitude": -7.2541,
        "longitude": 112.70933
    },
    {
        "latitude": -7.25524,
        "longitude": 112.70934
    },
    {
        "latitude": -7.25577,
        "longitude": 112.70936
    },
    {
        "latitude": -7.25597,
        "longitude": 112.70937
    },
    {
        "latitude": -7.2565,
        "longitude": 112.70938
    },
    {
        "latitude": -7.25732,
        "longitude": 112.70941
    },
    {
        "latitude": -7.25799,
        "longitude": 112.70939
    },
    {
        "latitude": -7.25864,
        "longitude": 112.70939
    },
    {
        "latitude": -7.25901,
        "longitude": 112.70941
    },
    {
        "latitude": -7.25961,
        "longitude": 112.70943
    },
    {
        "latitude": -7.2599,
        "longitude": 112.70944
    },
    {
        "latitude": -7.25998,
        "longitude": 112.70945
    },
    {
        "latitude": -7.26115,
        "longitude": 112.70946
    },
    {
        "latitude": -7.2617,
        "longitude": 112.70945
    },
    {
        "latitude": -7.26272,
        "longitude": 112.70943
    },
    {
        "latitude": -7.26526,
        "longitude": 112.70929
    },
    {
        "latitude": -7.26607,
        "longitude": 112.70924
    },
    {
        "latitude": -7.26738,
        "longitude": 112.70915
    },
    {
        "latitude": -7.26747,
        "longitude": 112.70913
    },
    {
        "latitude": -7.26763,
        "longitude": 112.70912
    },
    {
        "latitude": -7.26779,
        "longitude": 112.70911
    },
    {
        "latitude": -7.26907,
        "longitude": 112.70903
    },
    {
        "latitude": -7.26947,
        "longitude": 112.709
    },
    {
        "latitude": -7.26963,
        "longitude": 112.70899
    },
    {
        "latitude": -7.27295,
        "longitude": 112.70878
    },
    {
        "latitude": -7.27298,
        "longitude": 112.70877
    },
    {
        "latitude": -7.27468,
        "longitude": 112.70865
    },
    {
        "latitude": -7.27573,
        "longitude": 112.70858
    },
    {
        "latitude": -7.27726,
        "longitude": 112.70848
    },
    {
        "latitude": -7.27979,
        "longitude": 112.7083
    },
    {
        "latitude": -7.27996,
        "longitude": 112.70828
    },
    {
        "latitude": -7.28079,
        "longitude": 112.70813
    },
    {
        "latitude": -7.28131,
        "longitude": 112.70802
    },
    {
        "latitude": -7.28207,
        "longitude": 112.70783
    },
    {
        "latitude": -7.28241,
        "longitude": 112.70772
    },
    {
        "latitude": -7.28311,
        "longitude": 112.70742
    },
    {
        "latitude": -7.28348,
        "longitude": 112.70725
    },
    {
        "latitude": -7.28361,
        "longitude": 112.70718
    },
    {
        "latitude": -7.28404,
        "longitude": 112.70693
    },
    {
        "latitude": -7.28449,
        "longitude": 112.70661
    },
    {
        "latitude": -7.28498,
        "longitude": 112.70619
    },
    {
        "latitude": -7.28524,
        "longitude": 112.70595
    },
    {
        "latitude": -7.28556,
        "longitude": 112.70563
    },
    {
        "latitude": -7.28601,
        "longitude": 112.70509
    },
    {
        "latitude": -7.28604,
        "longitude": 112.70506
    },
    {
        "latitude": -7.28607,
        "longitude": 112.70502
    },
    {
        "latitude": -7.28653,
        "longitude": 112.70437
    },
    {
        "latitude": -7.2871,
        "longitude": 112.70352
    },
    {
        "latitude": -7.28719,
        "longitude": 112.70338
    },
    {
        "latitude": -7.28824,
        "longitude": 112.70181
    },
    {
        "latitude": -7.28888,
        "longitude": 112.70088
    },
    {
        "latitude": -7.2891,
        "longitude": 112.70058
    },
    {
        "latitude": -7.28943,
        "longitude": 112.70012
    },
    {
        "latitude": -7.2899,
        "longitude": 112.69963
    },
    {
        "latitude": -7.29003,
        "longitude": 112.69951
    },
    {
        "latitude": -7.29006,
        "longitude": 112.69948
    },
    {
        "latitude": -7.29012,
        "longitude": 112.69943
    },
    {
        "latitude": -7.29032,
        "longitude": 112.69927
    },
    {
        "latitude": -7.29098,
        "longitude": 112.6988
    },
    {
        "latitude": -7.29126,
        "longitude": 112.69864
    },
    {
        "latitude": -7.29137,
        "longitude": 112.69859
    },
    {
        "latitude": -7.29171,
        "longitude": 112.69846
    },
    {
        "latitude": -7.2922,
        "longitude": 112.69828
    },
    {
        "latitude": -7.2923,
        "longitude": 112.69824
    },
    {
        "latitude": -7.29272,
        "longitude": 112.69815
    },
    {
        "latitude": -7.29317,
        "longitude": 112.69808
    },
    {
        "latitude": -7.29409,
        "longitude": 112.69801
    },
    {
        "latitude": -7.29492,
        "longitude": 112.69801
    },
    {
        "latitude": -7.29517,
        "longitude": 112.69801
    },
    {
        "latitude": -7.29849,
        "longitude": 112.6983
    },
    {
        "latitude": -7.30103,
        "longitude": 112.69851
    },
    {
        "latitude": -7.30178,
        "longitude": 112.69859
    },
    {
        "latitude": -7.30245,
        "longitude": 112.69867
    },
    {
        "latitude": -7.30286,
        "longitude": 112.69873
    },
    {
        "latitude": -7.30336,
        "longitude": 112.69883
    },
    {
        "latitude": -7.30387,
        "longitude": 112.69899
    },
    {
        "latitude": -7.30433,
        "longitude": 112.69918
    },
    {
        "latitude": -7.30477,
        "longitude": 112.69942
    },
    {
        "latitude": -7.30501,
        "longitude": 112.69957
    },
    {
        "latitude": -7.30534,
        "longitude": 112.69982
    },
    {
        "latitude": -7.30568,
        "longitude": 112.70012
    },
    {
        "latitude": -7.30599,
        "longitude": 112.70045
    },
    {
        "latitude": -7.30628,
        "longitude": 112.70083
    },
    {
        "latitude": -7.30652,
        "longitude": 112.70125
    },
    {
        "latitude": -7.30674,
        "longitude": 112.70169
    },
    {
        "latitude": -7.30704,
        "longitude": 112.7025
    },
    {
        "latitude": -7.30712,
        "longitude": 112.70271
    },
    {
        "latitude": -7.30753,
        "longitude": 112.70414
    },
    {
        "latitude": -7.3079,
        "longitude": 112.7056
    },
    {
        "latitude": -7.30803,
        "longitude": 112.70609
    },
    {
        "latitude": -7.30818,
        "longitude": 112.70663
    },
    {
        "latitude": -7.30838,
        "longitude": 112.70741
    },
    {
        "latitude": -7.30848,
        "longitude": 112.70776
    },
    {
        "latitude": -7.30864,
        "longitude": 112.70835
    },
    {
        "latitude": -7.30868,
        "longitude": 112.70853
    },
    {
        "latitude": -7.30873,
        "longitude": 112.7087
    },
    {
        "latitude": -7.30883,
        "longitude": 112.70909
    },
    {
        "latitude": -7.30896,
        "longitude": 112.7095
    },
    {
        "latitude": -7.30915,
        "longitude": 112.7101
    },
    {
        "latitude": -7.30937,
        "longitude": 112.71065
    },
    {
        "latitude": -7.30947,
        "longitude": 112.71087
    },
    {
        "latitude": -7.30952,
        "longitude": 112.71097
    },
    {
        "latitude": -7.30963,
        "longitude": 112.71118
    },
    {
        "latitude": -7.30966,
        "longitude": 112.71126
    },
    {
        "latitude": -7.30969,
        "longitude": 112.71131
    },
    {
        "latitude": -7.30975,
        "longitude": 112.71142
    },
    {
        "latitude": -7.30994,
        "longitude": 112.71176
    },
    {
        "latitude": -7.31003,
        "longitude": 112.71193
    },
    {
        "latitude": -7.31011,
        "longitude": 112.71206
    },
    {
        "latitude": -7.31034,
        "longitude": 112.71241
    },
    {
        "latitude": -7.31054,
        "longitude": 112.71266
    },
    {
        "latitude": -7.31058,
        "longitude": 112.71272
    },
    {
        "latitude": -7.31061,
        "longitude": 112.71275
    },
    {
        "latitude": -7.31084,
        "longitude": 112.71305
    },
    {
        "latitude": -7.31135,
        "longitude": 112.71358
    },
    {
        "latitude": -7.31172,
        "longitude": 112.71392
    },
    {
        "latitude": -7.31211,
        "longitude": 112.71424
    },
    {
        "latitude": -7.31221,
        "longitude": 112.71432
    },
    {
        "latitude": -7.31264,
        "longitude": 112.71471
    },
    {
        "latitude": -7.31317,
        "longitude": 112.71516
    },
    {
        "latitude": -7.31399,
        "longitude": 112.71582
    },
    {
        "latitude": -7.31421,
        "longitude": 112.71598
    },
    {
        "latitude": -7.31472,
        "longitude": 112.71631
    },
    {
        "latitude": -7.31513,
        "longitude": 112.71656
    },
    {
        "latitude": -7.31541,
        "longitude": 112.71671
    },
    {
        "latitude": -7.31603,
        "longitude": 112.71695
    },
    {
        "latitude": -7.31626,
        "longitude": 112.71702
    },
    {
        "latitude": -7.3164,
        "longitude": 112.71706
    },
    {
        "latitude": -7.31643,
        "longitude": 112.71707
    },
    {
        "latitude": -7.31689,
        "longitude": 112.71719
    },
    {
        "latitude": -7.31695,
        "longitude": 112.7172
    },
    {
        "latitude": -7.31704,
        "longitude": 112.71721
    },
    {
        "latitude": -7.31735,
        "longitude": 112.71723
    },
    {
        "latitude": -7.31773,
        "longitude": 112.71723
    },
    {
        "latitude": -7.31791,
        "longitude": 112.71721
    },
    {
        "latitude": -7.31847,
        "longitude": 112.71718
    },
    {
        "latitude": -7.31895,
        "longitude": 112.71711
    },
    {
        "latitude": -7.3206,
        "longitude": 112.7168
    },
    {
        "latitude": -7.32241,
        "longitude": 112.71635
    },
    {
        "latitude": -7.32288,
        "longitude": 112.71625
    },
    {
        "latitude": -7.32396,
        "longitude": 112.716
    },
    {
        "latitude": -7.32401,
        "longitude": 112.71599
    },
    {
        "latitude": -7.32455,
        "longitude": 112.71587
    },
    {
        "latitude": -7.32737,
        "longitude": 112.71526
    },
    {
        "latitude": -7.32763,
        "longitude": 112.71521
    },
    {
        "latitude": -7.3282,
        "longitude": 112.7151
    },
    {
        "latitude": -7.32828,
        "longitude": 112.71509
    },
    {
        "latitude": -7.32842,
        "longitude": 112.71506
    },
    {
        "latitude": -7.32879,
        "longitude": 112.715
    },
    {
        "latitude": -7.32922,
        "longitude": 112.71493
    },
    {
        "latitude": -7.33055,
        "longitude": 112.71472
    },
    {
        "latitude": -7.33163,
        "longitude": 112.71455
    },
    {
        "latitude": -7.33167,
        "longitude": 112.71454
    },
    {
        "latitude": -7.33275,
        "longitude": 112.71437
    },
    {
        "latitude": -7.33318,
        "longitude": 112.71432
    },
    {
        "latitude": -7.33367,
        "longitude": 112.71425
    },
    {
        "latitude": -7.33388,
        "longitude": 112.71422
    },
    {
        "latitude": -7.33533,
        "longitude": 112.71399
    },
    {
        "latitude": -7.33631,
        "longitude": 112.71381
    },
    {
        "latitude": -7.33792,
        "longitude": 112.71343
    },
    {
        "latitude": -7.33887,
        "longitude": 112.71318
    },
    {
        "latitude": -7.33899,
        "longitude": 112.71314
    },
    {
        "latitude": -7.3393,
        "longitude": 112.71316
    },
    {
        "latitude": -7.33991,
        "longitude": 112.71305
    },
    {
        "latitude": -7.34065,
        "longitude": 112.71287
    },
    {
        "latitude": -7.34087,
        "longitude": 112.7128
    },
    {
        "latitude": -7.3411,
        "longitude": 112.71273
    },
    {
        "latitude": -7.3413,
        "longitude": 112.71267
    },
    {
        "latitude": -7.34171,
        "longitude": 112.71252
    },
    {
        "latitude": -7.34196,
        "longitude": 112.71245
    },
    {
        "latitude": -7.34205,
        "longitude": 112.71244
    },
    {
        "latitude": -7.34221,
        "longitude": 112.71242
    },
    {
        "latitude": -7.34236,
        "longitude": 112.71243
    },
    {
        "latitude": -7.34248,
        "longitude": 112.71246
    },
    {
        "latitude": -7.34259,
        "longitude": 112.7125
    },
    {
        "latitude": -7.34268,
        "longitude": 112.71255
    },
    {
        "latitude": -7.34289,
        "longitude": 112.71268
    },
    {
        "latitude": -7.34324,
        "longitude": 112.71295
    },
    {
        "latitude": -7.34334,
        "longitude": 112.71301
    },
    {
        "latitude": -7.34356,
        "longitude": 112.71313
    },
    {
        "latitude": -7.34392,
        "longitude": 112.71327
    },
    {
        "latitude": -7.34414,
        "longitude": 112.71337
    },
    {
        "latitude": -7.3443,
        "longitude": 112.71349
    },
    {
        "latitude": -7.34441,
        "longitude": 112.7136
    },
    {
        "latitude": -7.34452,
        "longitude": 112.7138
    },
    {
        "latitude": -7.34474,
        "longitude": 112.7143
    },
    {
        "latitude": -7.34486,
        "longitude": 112.71456
    },
    {
        "latitude": -7.34489,
        "longitude": 112.7146
    },
    {
        "latitude": -7.34496,
        "longitude": 112.71463
    },
    {
        "latitude": -7.34521,
        "longitude": 112.7152
    },
    {
        "latitude": -7.34539,
        "longitude": 112.71556
    },
    {
        "latitude": -7.34572,
        "longitude": 112.71632
    },
    {
        "latitude": -7.34581,
        "longitude": 112.71655
    },
    {
        "latitude": -7.34591,
        "longitude": 112.71679
    },
    {
        "latitude": -7.34604,
        "longitude": 112.71716
    },
    {
        "latitude": -7.34623,
        "longitude": 112.71778
    },
    {
        "latitude": -7.34625,
        "longitude": 112.71788
    },
    {
        "latitude": -7.34629,
        "longitude": 112.71802
    },
    {
        "latitude": -7.34629,
        "longitude": 112.71807
    },
    {
        "latitude": -7.34632,
        "longitude": 112.71822
    },
    {
        "latitude": -7.34634,
        "longitude": 112.71833
    },
    {
        "latitude": -7.34637,
        "longitude": 112.7186
    },
    {
        "latitude": -7.34641,
        "longitude": 112.71895
    },
    {
        "latitude": -7.34643,
        "longitude": 112.71916
    },
    {
        "latitude": -7.34643,
        "longitude": 112.71958
    },
    {
        "latitude": -7.34641,
        "longitude": 112.71973
    },
    {
        "latitude": -7.34639,
        "longitude": 112.72004
    },
    {
        "latitude": -7.34635,
        "longitude": 112.72031
    },
    {
        "latitude": -7.34621,
        "longitude": 112.72101
    },
    {
        "latitude": -7.34616,
        "longitude": 112.7213
    },
    {
        "latitude": -7.34615,
        "longitude": 112.72159
    },
    {
        "latitude": -7.34617,
        "longitude": 112.72188
    },
    {
        "latitude": -7.34622,
        "longitude": 112.7222
    },
    {
        "latitude": -7.34644,
        "longitude": 112.72302
    },
    {
        "latitude": -7.34648,
        "longitude": 112.7232
    },
    {
        "latitude": -7.34662,
        "longitude": 112.72371
    },
    {
        "latitude": -7.34669,
        "longitude": 112.72418
    },
    {
        "latitude": -7.34673,
        "longitude": 112.72448
    },
    {
        "latitude": -7.34676,
        "longitude": 112.72468
    },
    {
        "latitude": -7.34677,
        "longitude": 112.72501
    },
    {
        "latitude": -7.34679,
        "longitude": 112.72531
    },
    {
        "latitude": -7.34676,
        "longitude": 112.72565
    },
    {
        "latitude": -7.34674,
        "longitude": 112.72614
    },
    {
        "latitude": -7.34677,
        "longitude": 112.72665
    },
    {
        "latitude": -7.34678,
        "longitude": 112.7273
    },
    {
        "latitude": -7.34678,
        "longitude": 112.7275
    },
    {
        "latitude": -7.34677,
        "longitude": 112.72867
    },
    {
        "latitude": -7.34678,
        "longitude": 112.72922
    },
    {
        "latitude": -7.34678,
        "longitude": 112.72928
    },
    {
        "latitude": -7.34677,
        "longitude": 112.7294
    },
    {
        "latitude": -7.34678,
        "longitude": 112.72959
    },
    {
        "latitude": -7.34678,
        "longitude": 112.73047
    },
    {
        "latitude": -7.34677,
        "longitude": 112.73066
    },
    {
        "latitude": -7.34674,
        "longitude": 112.73104
    },
    {
        "latitude": -7.34668,
        "longitude": 112.73137
    },
    {
        "latitude": -7.34662,
        "longitude": 112.73159
    },
    {
        "latitude": -7.34655,
        "longitude": 112.73178
    },
    {
        "latitude": -7.34646,
        "longitude": 112.73201
    },
    {
        "latitude": -7.34639,
        "longitude": 112.73213
    },
    {
        "latitude": -7.3462,
        "longitude": 112.73247
    },
    {
        "latitude": -7.34601,
        "longitude": 112.73277
    },
    {
        "latitude": -7.34526,
        "longitude": 112.73381
    },
    {
        "latitude": -7.34501,
        "longitude": 112.73417
    },
    {
        "latitude": -7.34483,
        "longitude": 112.73444
    },
    {
        "latitude": -7.34475,
        "longitude": 112.73457
    },
    {
        "latitude": -7.3447,
        "longitude": 112.73467
    },
    {
        "latitude": -7.34467,
        "longitude": 112.73476
    },
    {
        "latitude": -7.3446,
        "longitude": 112.73493
    },
    {
        "latitude": -7.34457,
        "longitude": 112.73507
    },
    {
        "latitude": -7.34455,
        "longitude": 112.73534
    },
    {
        "latitude": -7.34456,
        "longitude": 112.73569
    },
    {
        "latitude": -7.34459,
        "longitude": 112.73611
    },
    {
        "latitude": -7.3446,
        "longitude": 112.73618
    },
    {
        "latitude": -7.34461,
        "longitude": 112.73627
    },
    {
        "latitude": -7.34463,
        "longitude": 112.73642
    },
    {
        "latitude": -7.34467,
        "longitude": 112.73673
    },
    {
        "latitude": -7.34477,
        "longitude": 112.73739
    },
    {
        "latitude": -7.34479,
        "longitude": 112.73753
    },
    {
        "latitude": -7.34482,
        "longitude": 112.7377
    },
    {
        "latitude": -7.34484,
        "longitude": 112.7378
    },
    {
        "latitude": -7.34489,
        "longitude": 112.73824
    },
    {
        "latitude": -7.34489,
        "longitude": 112.73856
    },
    {
        "latitude": -7.34489,
        "longitude": 112.73876
    },
    {
        "latitude": -7.34488,
        "longitude": 112.73887
    },
    {
        "latitude": -7.34485,
        "longitude": 112.73911
    },
    {
        "latitude": -7.34479,
        "longitude": 112.73936
    },
    {
        "latitude": -7.3446,
        "longitude": 112.74005
    },
    {
        "latitude": -7.3445,
        "longitude": 112.74038
    },
    {
        "latitude": -7.34418,
        "longitude": 112.74152
    },
    {
        "latitude": -7.34413,
        "longitude": 112.7417
    },
    {
        "latitude": -7.34402,
        "longitude": 112.74207
    },
    {
        "latitude": -7.34397,
        "longitude": 112.74225
    },
    {
        "latitude": -7.34382,
        "longitude": 112.74276
    },
    {
        "latitude": -7.34367,
        "longitude": 112.74327
    },
    {
        "latitude": -7.34348,
        "longitude": 112.74387
    },
    {
        "latitude": -7.34337,
        "longitude": 112.74428
    },
    {
        "latitude": -7.34319,
        "longitude": 112.74494
    },
    {
        "latitude": -7.34305,
        "longitude": 112.74552
    },
    {
        "latitude": -7.34293,
        "longitude": 112.7461
    },
    {
        "latitude": -7.34289,
        "longitude": 112.74633
    },
    {
        "latitude": -7.34267,
        "longitude": 112.74784
    },
    {
        "latitude": -7.34261,
        "longitude": 112.74846
    },
    {
        "latitude": -7.34255,
        "longitude": 112.74916
    },
    {
        "latitude": -7.34254,
        "longitude": 112.7495
    },
    {
        "latitude": -7.34256,
        "longitude": 112.74994
    },
    {
        "latitude": -7.34261,
        "longitude": 112.75057
    },
    {
        "latitude": -7.34265,
        "longitude": 112.75097
    },
    {
        "latitude": -7.3427,
        "longitude": 112.75133
    },
    {
        "latitude": -7.34279,
        "longitude": 112.75186
    },
    {
        "latitude": -7.34296,
        "longitude": 112.75298
    },
    {
        "latitude": -7.34305,
        "longitude": 112.75361
    },
    {
        "latitude": -7.3432,
        "longitude": 112.75458
    },
    {
        "latitude": -7.34323,
        "longitude": 112.7548
    },
    {
        "latitude": -7.3433,
        "longitude": 112.7555
    },
    {
        "latitude": -7.34331,
        "longitude": 112.7557
    },
    {
        "latitude": -7.34329,
        "longitude": 112.75597
    },
    {
        "latitude": -7.34327,
        "longitude": 112.75621
    },
    {
        "latitude": -7.34313,
        "longitude": 112.75684
    },
    {
        "latitude": -7.34284,
        "longitude": 112.75814
    },
    {
        "latitude": -7.34279,
        "longitude": 112.75872
    },
    {
        "latitude": -7.34276,
        "longitude": 112.75907
    },
    {
        "latitude": -7.34277,
        "longitude": 112.75936
    },
    {
        "latitude": -7.34281,
        "longitude": 112.75959
    },
    {
        "latitude": -7.34291,
        "longitude": 112.76015
    },
    {
        "latitude": -7.34299,
        "longitude": 112.76047
    },
    {
        "latitude": -7.34318,
        "longitude": 112.7613
    },
    {
        "latitude": -7.3432,
        "longitude": 112.76146
    },
    {
        "latitude": -7.34324,
        "longitude": 112.7617
    },
    {
        "latitude": -7.34325,
        "longitude": 112.76185
    },
    {
        "latitude": -7.34323,
        "longitude": 112.76223
    },
    {
        "latitude": -7.34318,
        "longitude": 112.76248
    },
    {
        "latitude": -7.34311,
        "longitude": 112.76274
    },
    {
        "latitude": -7.34297,
        "longitude": 112.76307
    },
    {
        "latitude": -7.34262,
        "longitude": 112.76367
    },
    {
        "latitude": -7.34247,
        "longitude": 112.76393
    },
    {
        "latitude": -7.34241,
        "longitude": 112.76411
    },
    {
        "latitude": -7.34234,
        "longitude": 112.76432
    },
    {
        "latitude": -7.34227,
        "longitude": 112.76456
    },
    {
        "latitude": -7.34223,
        "longitude": 112.76475
    },
    {
        "latitude": -7.34223,
        "longitude": 112.76477
    },
    {
        "latitude": -7.34221,
        "longitude": 112.76494
    },
    {
        "latitude": -7.3422,
        "longitude": 112.76508
    },
    {
        "latitude": -7.34221,
        "longitude": 112.7654
    },
    {
        "latitude": -7.34224,
        "longitude": 112.76562
    },
    {
        "latitude": -7.34238,
        "longitude": 112.76621
    },
    {
        "latitude": -7.34248,
        "longitude": 112.76656
    },
    {
        "latitude": -7.34273,
        "longitude": 112.76755
    },
    {
        "latitude": -7.34283,
        "longitude": 112.76799
    },
    {
        "latitude": -7.34289,
        "longitude": 112.76833
    },
    {
        "latitude": -7.34296,
        "longitude": 112.76872
    },
    {
        "latitude": -7.34298,
        "longitude": 112.76882
    },
    {
        "latitude": -7.34302,
        "longitude": 112.76907
    },
    {
        "latitude": -7.34309,
        "longitude": 112.76954
    },
    {
        "latitude": -7.34322,
        "longitude": 112.7703
    },
    {
        "latitude": -7.3435,
        "longitude": 112.77199
    },
    {
        "latitude": -7.34375,
        "longitude": 112.77343
    },
    {
        "latitude": -7.34395,
        "longitude": 112.77469
    },
    {
        "latitude": -7.34412,
        "longitude": 112.77557
    },
    {
        "latitude": -7.34421,
        "longitude": 112.77612
    },
    {
        "latitude": -7.34427,
        "longitude": 112.77648
    },
    {
        "latitude": -7.34436,
        "longitude": 112.77697
    },
    {
        "latitude": -7.34447,
        "longitude": 112.77784
    },
    {
        "latitude": -7.34454,
        "longitude": 112.77819
    },
    {
        "latitude": -7.3447,
        "longitude": 112.77894
    },
    {
        "latitude": -7.34475,
        "longitude": 112.77917
    },
    {
        "latitude": -7.34489,
        "longitude": 112.77971
    },
    {
        "latitude": -7.34493,
        "longitude": 112.77983
    },
    {
        "latitude": -7.34531,
        "longitude": 112.78136
    },
    {
        "latitude": -7.34557,
        "longitude": 112.78245
    },
    {
        "latitude": -7.34621,
        "longitude": 112.78517
    },
    {
        "latitude": -7.34632,
        "longitude": 112.78564
    },
    {
        "latitude": -7.34639,
        "longitude": 112.78593
    },
    {
        "latitude": -7.34651,
        "longitude": 112.7864
    },
    {
        "latitude": -7.34696,
        "longitude": 112.78834
    },
    {
        "latitude": -7.34726,
        "longitude": 112.78961
    },
    {
        "latitude": -7.34752,
        "longitude": 112.79086
    },
    {
        "latitude": -7.34767,
        "longitude": 112.79177
    },
    {
        "latitude": -7.34776,
        "longitude": 112.79214
    },
    {
        "latitude": -7.34787,
        "longitude": 112.79266
    },
    {
        "latitude": -7.34799,
        "longitude": 112.79321
    },
    {
        "latitude": -7.34817,
        "longitude": 112.79419
    },
    {
        "latitude": -7.34859,
        "longitude": 112.7963
    },
    {
        "latitude": -7.34901,
        "longitude": 112.79845
    },
    {
        "latitude": -7.34952,
        "longitude": 112.80108
    },
    {
        "latitude": -7.34959,
        "longitude": 112.80138
    },
    {
        "latitude": -7.34969,
        "longitude": 112.80171
    },
    {
        "latitude": -7.34983,
        "longitude": 112.80203
    },
    {
        "latitude": -7.34989,
        "longitude": 112.80214
    },
    {
        "latitude": -7.35001,
        "longitude": 112.80235
    },
    {
        "latitude": -7.3501,
        "longitude": 112.80247
    },
    {
        "latitude": -7.35025,
        "longitude": 112.80264
    },
    {
        "latitude": -7.35055,
        "longitude": 112.80292
    },
    {
        "latitude": -7.35087,
        "longitude": 112.80315
    },
    {
        "latitude": -7.35118,
        "longitude": 112.80331
    },
    {
        "latitude": -7.35171,
        "longitude": 112.80349
    },
    {
        "latitude": -7.3521,
        "longitude": 112.80357
    },
    {
        "latitude": -7.35377,
        "longitude": 112.80386
    },
    {
        "latitude": -7.35523,
        "longitude": 112.80412
    },
    {
        "latitude": -7.35574,
        "longitude": 112.80423
    },
    {
        "latitude": -7.35606,
        "longitude": 112.80433
    },
    {
        "latitude": -7.35655,
        "longitude": 112.80452
    },
    {
        "latitude": -7.3567,
        "longitude": 112.8046
    },
    {
        "latitude": -7.35719,
        "longitude": 112.80488
    },
    {
        "latitude": -7.35876,
        "longitude": 112.80593
    },
    {
        "latitude": -7.35916,
        "longitude": 112.80616
    },
    {
        "latitude": -7.35946,
        "longitude": 112.80629
    },
    {
        "latitude": -7.35972,
        "longitude": 112.8064
    },
    {
        "latitude": -7.36011,
        "longitude": 112.8065
    },
    {
        "latitude": -7.36035,
        "longitude": 112.80655
    },
    {
        "latitude": -7.36038,
        "longitude": 112.80655
    },
    {
        "latitude": -7.36055,
        "longitude": 112.80657
    },
    {
        "latitude": -7.36082,
        "longitude": 112.80659
    },
    {
        "latitude": -7.36084,
        "longitude": 112.80659
    },
    {
        "latitude": -7.36103,
        "longitude": 112.80658
    },
    {
        "latitude": -7.36131,
        "longitude": 112.80656
    },
    {
        "latitude": -7.3616,
        "longitude": 112.80651
    },
    {
        "latitude": -7.36182,
        "longitude": 112.80646
    },
    {
        "latitude": -7.36221,
        "longitude": 112.80634
    },
    {
        "latitude": -7.3623,
        "longitude": 112.8063
    },
    {
        "latitude": -7.36238,
        "longitude": 112.80627
    },
    {
        "latitude": -7.36247,
        "longitude": 112.80623
    },
    {
        "latitude": -7.36266,
        "longitude": 112.80612
    },
    {
        "latitude": -7.36301,
        "longitude": 112.80591
    },
    {
        "latitude": -7.36323,
        "longitude": 112.80573
    },
    {
        "latitude": -7.36352,
        "longitude": 112.80548
    },
    {
        "latitude": -7.36377,
        "longitude": 112.80519
    },
    {
        "latitude": -7.36398,
        "longitude": 112.8049
    },
    {
        "latitude": -7.36409,
        "longitude": 112.80473
    },
    {
        "latitude": -7.36441,
        "longitude": 112.80416
    },
    {
        "latitude": -7.36447,
        "longitude": 112.80407
    },
    {
        "latitude": -7.36461,
        "longitude": 112.80378
    },
    {
        "latitude": -7.36472,
        "longitude": 112.8036
    },
    {
        "latitude": -7.36477,
        "longitude": 112.80349
    },
    {
        "latitude": -7.36491,
        "longitude": 112.80325
    },
    {
        "latitude": -7.3651,
        "longitude": 112.80297
    },
    {
        "latitude": -7.36543,
        "longitude": 112.80256
    },
    {
        "latitude": -7.36574,
        "longitude": 112.80226
    },
    {
        "latitude": -7.36619,
        "longitude": 112.80192
    },
    {
        "latitude": -7.36641,
        "longitude": 112.80178
    },
    {
        "latitude": -7.36685,
        "longitude": 112.80156
    },
    {
        "latitude": -7.36707,
        "longitude": 112.80148
    },
    {
        "latitude": -7.3673,
        "longitude": 112.80142
    },
    {
        "latitude": -7.36783,
        "longitude": 112.8013
    },
    {
        "latitude": -7.36811,
        "longitude": 112.80127
    },
    {
        "latitude": -7.36848,
        "longitude": 112.80127
    },
    {
        "latitude": -7.36936,
        "longitude": 112.8013
    },
    {
        "latitude": -7.37032,
        "longitude": 112.80133
    },
    {
        "latitude": -7.37068,
        "longitude": 112.80135
    },
    {
        "latitude": -7.37116,
        "longitude": 112.80136
    },
    {
        "latitude": -7.37148,
        "longitude": 112.80135
    },
    {
        "latitude": -7.37163,
        "longitude": 112.80132
    },
    {
        "latitude": -7.37186,
        "longitude": 112.80125
    },
    {
        "latitude": -7.37197,
        "longitude": 112.80119
    },
    {
        "latitude": -7.37209,
        "longitude": 112.80109
    },
    {
        "latitude": -7.37218,
        "longitude": 112.801
    },
    {
        "latitude": -7.37225,
        "longitude": 112.80091
    },
    {
        "latitude": -7.37231,
        "longitude": 112.80079
    },
    {
        "latitude": -7.37238,
        "longitude": 112.80062
    },
    {
        "latitude": -7.3724,
        "longitude": 112.80052
    },
    {
        "latitude": -7.37241,
        "longitude": 112.80044
    },
    {
        "latitude": -7.3724,
        "longitude": 112.80024
    },
    {
        "latitude": -7.37237,
        "longitude": 112.79998
    },
    {
        "latitude": -7.37227,
        "longitude": 112.79952
    },
    {
        "latitude": -7.37214,
        "longitude": 112.79909
    },
    {
        "latitude": -7.37197,
        "longitude": 112.79862
    },
    {
        "latitude": -7.37192,
        "longitude": 112.79848
    },
    {
        "latitude": -7.37183,
        "longitude": 112.7983
    },
    {
        "latitude": -7.37176,
        "longitude": 112.79809
    },
    {
        "latitude": -7.37167,
        "longitude": 112.79773
    },
    {
        "latitude": -7.37164,
        "longitude": 112.79763
    },
    {
        "latitude": -7.37157,
        "longitude": 112.79713
    },
    {
        "latitude": -7.37149,
        "longitude": 112.7965
    },
    {
        "latitude": -7.37139,
        "longitude": 112.79572
    },
    {
        "latitude": -7.37137,
        "longitude": 112.7956
    },
    {
        "latitude": -7.37136,
        "longitude": 112.79548
    },
    {
        "latitude": -7.37127,
        "longitude": 112.79559
    },
    {
        "latitude": -7.3713,
        "longitude": 112.79585
    },
    {
        "latitude": -7.37133,
        "longitude": 112.79609
    },
    {
        "latitude": -7.37153,
        "longitude": 112.79763
    },
    {
        "latitude": -7.37161,
        "longitude": 112.798
    },
    {
        "latitude": -7.3718,
        "longitude": 112.79852
    },
    {
        "latitude": -7.37196,
        "longitude": 112.7989
    },
    {
        "latitude": -7.37206,
        "longitude": 112.79922
    },
    {
        "latitude": -7.37216,
        "longitude": 112.79958
    },
    {
        "latitude": -7.37224,
        "longitude": 112.79997
    },
    {
        "latitude": -7.37228,
        "longitude": 112.80018
    },
    {
        "latitude": -7.37229,
        "longitude": 112.80032
    },
    {
        "latitude": -7.37226,
        "longitude": 112.80061
    },
    {
        "latitude": -7.37223,
        "longitude": 112.80071
    },
    {
        "latitude": -7.37209,
        "longitude": 112.80092
    },
    {
        "latitude": -7.37202,
        "longitude": 112.80099
    },
    {
        "latitude": -7.37193,
        "longitude": 112.80106
    },
    {
        "latitude": -7.37176,
        "longitude": 112.80115
    },
    {
        "latitude": -7.37146,
        "longitude": 112.80121
    },
    {
        "latitude": -7.37121,
        "longitude": 112.80122
    },
    {
        "latitude": -7.3703,
        "longitude": 112.80118
    },
    {
        "latitude": -7.37014,
        "longitude": 112.80116
    },
    {
        "latitude": -7.36935,
        "longitude": 112.80114
    },
    {
        "latitude": -7.36881,
        "longitude": 112.80112
    },
    {
        "latitude": -7.36827,
        "longitude": 112.80112
    },
    {
        "latitude": -7.36796,
        "longitude": 112.80113
    },
    {
        "latitude": -7.36747,
        "longitude": 112.80121
    },
    {
        "latitude": -7.36718,
        "longitude": 112.80128
    },
    {
        "latitude": -7.36692,
        "longitude": 112.80136
    },
    {
        "latitude": -7.36655,
        "longitude": 112.80153
    },
    {
        "latitude": -7.36625,
        "longitude": 112.80169
    },
    {
        "latitude": -7.36586,
        "longitude": 112.80196
    },
    {
        "latitude": -7.36545,
        "longitude": 112.8023
    },
    {
        "latitude": -7.3652,
        "longitude": 112.80259
    },
    {
        "latitude": -7.36503,
        "longitude": 112.8028
    },
    {
        "latitude": -7.36476,
        "longitude": 112.80322
    },
    {
        "latitude": -7.36464,
        "longitude": 112.80343
    },
    {
        "latitude": -7.36459,
        "longitude": 112.80351
    },
    {
        "latitude": -7.36442,
        "longitude": 112.80381
    },
    {
        "latitude": -7.36428,
        "longitude": 112.80406
    },
    {
        "latitude": -7.36421,
        "longitude": 112.80421
    },
    {
        "latitude": -7.36381,
        "longitude": 112.80487
    },
    {
        "latitude": -7.36362,
        "longitude": 112.80512
    },
    {
        "latitude": -7.36352,
        "longitude": 112.80525
    },
    {
        "latitude": -7.36337,
        "longitude": 112.80541
    },
    {
        "latitude": -7.36314,
        "longitude": 112.80561
    },
    {
        "latitude": -7.36294,
        "longitude": 112.80576
    },
    {
        "latitude": -7.36267,
        "longitude": 112.80595
    },
    {
        "latitude": -7.36231,
        "longitude": 112.80613
    },
    {
        "latitude": -7.36223,
        "longitude": 112.80616
    },
    {
        "latitude": -7.36222,
        "longitude": 112.80616
    },
    {
        "latitude": -7.36191,
        "longitude": 112.80628
    },
    {
        "latitude": -7.36168,
        "longitude": 112.80634
    },
    {
        "latitude": -7.36148,
        "longitude": 112.80638
    },
    {
        "latitude": -7.36111,
        "longitude": 112.80642
    },
    {
        "latitude": -7.36084,
        "longitude": 112.80643
    },
    {
        "latitude": -7.36079,
        "longitude": 112.80643
    },
    {
        "latitude": -7.3604,
        "longitude": 112.8064
    },
    {
        "latitude": -7.36005,
        "longitude": 112.80633
    },
    {
        "latitude": -7.35961,
        "longitude": 112.80619
    },
    {
        "latitude": -7.35938,
        "longitude": 112.8061
    },
    {
        "latitude": -7.35916,
        "longitude": 112.80599
    },
    {
        "latitude": -7.35904,
        "longitude": 112.80592
    },
    {
        "latitude": -7.3588,
        "longitude": 112.80577
    },
    {
        "latitude": -7.35855,
        "longitude": 112.80559
    },
    {
        "latitude": -7.35804,
        "longitude": 112.80521
    },
    {
        "latitude": -7.35774,
        "longitude": 112.80499
    },
    {
        "latitude": -7.35744,
        "longitude": 112.80481
    },
    {
        "latitude": -7.35693,
        "longitude": 112.80456
    },
    {
        "latitude": -7.35619,
        "longitude": 112.80422
    },
    {
        "latitude": -7.35594,
        "longitude": 112.80414
    },
    {
        "latitude": -7.35551,
        "longitude": 112.80403
    },
    {
        "latitude": -7.35461,
        "longitude": 112.80385
    },
    {
        "latitude": -7.35382,
        "longitude": 112.80371
    },
    {
        "latitude": -7.35208,
        "longitude": 112.80341
    },
    {
        "latitude": -7.35163,
        "longitude": 112.8033
    },
    {
        "latitude": -7.35146,
        "longitude": 112.80325
    },
    {
        "latitude": -7.35117,
        "longitude": 112.80313
    },
    {
        "latitude": -7.35093,
        "longitude": 112.803
    },
    {
        "latitude": -7.35078,
        "longitude": 112.8029
    },
    {
        "latitude": -7.35045,
        "longitude": 112.80263
    },
    {
        "latitude": -7.35027,
        "longitude": 112.80243
    },
    {
        "latitude": -7.35005,
        "longitude": 112.80211
    },
    {
        "latitude": -7.3499,
        "longitude": 112.8018
    },
    {
        "latitude": -7.34977,
        "longitude": 112.80142
    },
    {
        "latitude": -7.34969,
        "longitude": 112.8011
    },
    {
        "latitude": -7.34916,
        "longitude": 112.79841
    },
    {
        "latitude": -7.34886,
        "longitude": 112.79691
    }
]

Hasil dari koding python diatas jika dijalankan pada google colab seperti gambar berikut ini :

Pada bagian tampilan di web browser, saya gunakan leaflet.js yang merupakan library perpetaan milik OSM yang sangat banyak digunakan, bisa dilihat beberapa aplikasi seperti bus suroboyo pun menggunakan leaflet.js untuk peta realtime pada aplikasi Bus Suroboyo. Saya akan bagikan kodingnya dan dapat disimpan langsung pada PC tanpa menggunakan server, hanya simpan sebagai file html biasa.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car GPS Tracking</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.3.7/mqtt.min.js"></script>
    <style>
        #map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Initialize the map
        const map = L.map('map').setView([-7.23177, 112.72837], 15); // Initial view at the first GPS point
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Define a custom car icon
        const carIcon = L.icon({
            iconUrl: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh97sGns5_ZMJSFQPbC-gYR090rGj3OyacILohQ4k_v6OT_niNcR1JSRV_0ZMl2cyry85DKHnuinr8oU_Oaw8ez4Wl6capGSc0EQelQv0zYS18xmW1GGHz7eQTfwbLoLuejhwnuRvBmugL1Si1SJ_zmhMygRSODpUdrneYM6nmSb1lle6sz5riVcFAsapC/s50/car.png', // Replace with your car image URL		
            iconSize: [38, 38], // Size of the icon (width, height)
            iconAnchor: [19, 19], // Point of the icon which corresponds to the marker's location
        });

        // Marker for the car
        let carMarker = null;

        // Array to store the trail points
        const trailPoints = [];

        // Polyline for the trail
        const trailLine = L.polyline(trailPoints, { color: 'blue' }).addTo(map);

        // MQTT Client Setup
        // GANTI PAKE AKUN KAMU ..ini punya pak nyoman
		const client = mqtt.connect('wss://xxxxxxxxxx.s1.eu.hivemq.cloud:8884/mqtt', {
		username: 'user', // Replace with your HiveMQ Cloud username
		password: 'pass', // Replace with your HiveMQ Cloud password
		protocol: 'wss', // Ensure WebSocket Secure (WSS) is used
		rejectUnauthorized: true // Optional: Set to false if using self-signed certificates (not recommended for production)
});
        client.on('connect', () => {
            console.log('Connected to MQTT broker');
            client.subscribe('car/gps', (err) => {
                if (!err) {
                    console.log('Subscribed to car/gps topic');
                }
            });
        });

        // Handle incoming GPS data
        client.on('message', (topic, message) => {
            const data = JSON.parse(message.toString());
            const { latitude, longitude } = data;

            console.log(`Received GPS data: Latitude=${latitude}, Longitude=${longitude}`);

            // Add the new point to the trail
            trailPoints.push([latitude, longitude]);

            // Update the trail polyline
            trailLine.setLatLngs(trailPoints);

            // Update the car marker position
            if (carMarker) {
                carMarker.setLatLng([latitude, longitude]);
            } else {
                carMarker = L.marker([latitude, longitude], { icon: carIcon }).addTo(map);
            }

            // Center the map on the car's position
            map.setView([latitude, longitude], 15);
        });
    </script>
</body>
</html>

Tampilan web nya  seperti pada animasi paling atas halaman ini, dan untuk melihat perjalanan pengiriman titik koordinatnya melalui MQTT dapat dilihat dengan klik kanan-inspeksi-console, seperti contoh berikut :

Diagram kerja dari simulasi diatas mirp-mirip dengan yang sering kita bahas mengenai topik IOT - MQTT di blog ini dan mungkin para pembaca setia sudah hapal dengan skema dibawah ini.

Selamat Mencoba !

Read More

Mengembangkan Ilmu Machine Vision Bersama Prodi D4 Transportasi Unesa

 

Di awal tahun 2025 ini terasa sedikit telat menulis blog ini kembali, entah karena umur sudah terasa bertambah banyak ? Entahlah ....namun alasan yang tidak mengenakkan ini menjadi pengingat penting bagi saya. Semangat saya menulis blog ini dikarenakan memori otak buatan era tahun 80an ini lumayan gampang pelupa. Jadi seharusnya bulan yang agak sibuk januari-februari 2025 ini harus saya simpan di blog ini agar suatu saat saya membutuhkannya dapat dengan mudah melakukan search kembali di google.

Memang kesibukan kali ini ditahun 2025 dimulai dari 1 bulan sebelumnya dimana saya diminta menyelesaikan project penelitian di FIKK-UNESA (akan saya ceritakan jika sudah kelar), dan yang sangat menjadi perhatian ketika diundang oleh Prodi D4 Transportasi Fakultas Vokasi - Unesa untuk membagi ilmu saya mengenai deteksi objek via YOLO mulai sering di bicarakan oleh prodi D4 Teknik Listrik, dimana saya 4 tahun mengajar sebagai program praktisi mengajar. Kini saya diminta untuk menjajal membagi ilmu koding kepada mahasiswa yang nol putul terhadap coding.

Koding  lengkap klik disini 

Gambar diatas ini merupakan demo saya pertama kali ketika diminta untuk membuktikan kemampuan YOLO V8 dalam mendeteksi golongan kendaraan sesuai kelas yang ditentukan oleh Kemenhub. Jadi dapat dikatakan demo ini menjadi pembuka ke keseruan lainnya dimana saya diberikan beberapa mahasiswa untuk saya 'ubah' tugas akhirnya menjadi lebih kekinian terutama dengan bantuan koding terkhusus yang berhubungan dengan machine vision di transportasi. Jadi harapannya adalah kemampuan saya di bidang machine vision dapat ditularkan ke mereka. 

Kelanjutan dari pertemuan tak terduga ini adalah ketika semester genap 2025 dimulai pada bulan februari, saya dipercayai oleh kepala prodi d4 transportasi Ibu Dr. Anita Susanti Spd. MT. untuk memberikan tambahan kelas di mata kuliah Metodologi Penelitian dan Aplikasi Komputer. Semangangatnya adalah untuk menjadikan tugas akhir dan penelitian para mahasiswa/i lebih berorientasi ke produk dan terhindar dari analisa yang lebih mirip penelitian di prodi asli sebelum dipecah yaitu Teknik Sipil S1. Jadi 'ROH' fakultas VOKASI yang dulu selama 4 tahun sempat saya sisipkan di D4 Teknik Listrik, kini akan saya lakukan metode yang serupa di D4 Transportasi.

LALU BAGAIMANA BISA PRODI TANPA KULIAH KODING DIJEJALI OPENCV-YOLO  ?

Bukan aisi555 kalau tanpa ide nyeleneh, teringat saat awal kuliah 25 tahun yang lalu yang sangat membekas ketika disodorkan tugas pemrograman C++ tanpa sempat diberikan penjelasan oleh dosen. Bagaimana paniknya seorang anak kampung yang hanya tau komputer untuk mengetik, kini diminta mengerjakan tugas koding kalender abadi ? Analogi kejadian di tahun reformasi ini menjadikan sebuah acuan bahwa saya ini tidak sehebat teman-teman dari sma di surabaya yang rata-rata sudah mengenal minimal bahasa BASIC, namun waktu itu saya tetap berusaha agar mengerti dengan cepat. Kalau dulu kuncinya "copy paste " punya teman, kini anak jaman sekarang dimudahkan dengan mesin pencari sumber-sumber kodingan siap pakai yang bertebaran di internet. Bahkan dengan ChatGpt pun kalau dilakukan dengan tepat "kelar ini barang" !

Yang saya ingin tanamkan adalah agar mahasiswa tidak menyerah diawal apalagi setelah ketemu kata-kata asing sepert syntax, python env, library, variabel, IF THEN, Loop dan sebagainya. Logika mengajar bahasa pemrograman saya balik dengan memberikan contoh yang siap pakai pada google colab ( buka koding lengkap disini ), lalu saya demokan dikelas bersama-sama 120++ mahasiswa. Lumayan banyak penuh di auditorium K10 dan dapat dibayangkan bagaimana kehebohannya. Gambar diatas adalah pengenalan opencv untuk mendeteksi bentuk lingkaran pada sebuah gambar.

Metode ini kemudian saya lanjutkan pada koding kedua berupa pengenalan object karakter pelat nomer menggunakan inference dan API roboflow (koding lengkap disini). Sekali lagi saya berusaha memperkenalkan bahwa di internet sana ada pemodelan AI dari berbagai object yang dapat diambil dengan gratis salah satunya adalah ROBOFLOW. Mahasiswa cukup hanya tahu bagian mana yang harus diubah agar gambar plat nomer yang mereka ambil sebelum kuliah dapat dideteksi sesuai harapan.

Masih banyak keseruan kedepannya terutama tawaran-tawaran untuk mempelajari berbagai metode-metode algoritma di dunia transportasi - jalan raya -logistik - kereta api - pelabuhan dan banyak lainnya yang akan saya bagikan ke pembaca setia blog ini. Yang seperti ini nih ....

Read More

Grafik IOT Dynamic dengan Webhook - GoogleSheets - Google Apps Script

 

Semakin hari layanan internet web "gratis" semacam google berlomba menyajikan kemudahan bagi penggunanya, seperti saya yang kebetulan sedang mencari cara menampilkan grafik IOT secara dinamic. Pada platform IOT semacam antares / telkomiot bisa memanfaatkan fasilitas widget grafik dan pernah juga saya bahas menggunakan webhook pada antares (baca disini). Namun teringat saya pada request seorang mahasiswa yang kesulitan melakukan embeeded / tempel grafiknya di laporan tugas akhirnya dan pada waktu itu saya pake jembatan di google collab untuk menampilkan grafik di quickchart.io. 

Lalu gambar grafik iot diatas kok bisa dinamis dan interaktif begitu ? Mari saya kasi tau caranya ..

Pertama kita butuh mikrokontroler untuk mengirimkan data atau bisa juga gunakan simulator saja dan yang saya pilihkan bernama wokwi yang sudah sering dibahas di blog ini. Jadi kita akan membuat simulator pengirim data tegangan dan arus (secara random) yang bisa dibuka pada link wokwi disini.

Script nya akan mengirim data secara POST menuju alamat endpoint webhooks dan format datanya berupa JSON. Untuk mengetest apakah data terkirim dengan benar dapat menggunakan tester webhooks / POST online bernama requestcatcher seperti pada gambar berikut :

Lalu kita lanjutkan mengirimkan weebhook ke Google sheets seperti yang saya tulis terdahulu (baca disini) menggunakan antares, dan kini tanpa antares langsung dari ESP32 menuju googlesheets dan hasilnya tiap item pada JSON akan di tambahkan ke baris baru kebawah terus menerus jika ada data baru yg masuk.

Lalu bagaimana caranya membuat agar datanya hanya dibatasi 20 data terakhir sehingga grafiknya dapat lebih mudah dilihat ? Ternyata googlesheets memiliki fasilitas APPS SCRIPTS yang bisa menjadi coding otomasi dari webhooks ke googlesheets. Secara default maka apps scripts yang disediakan adalah berhubungan dengan webhooks, namun kita bisa hapus dan kemudian kreasikan sendiri (thanks to chatgpt).

 

Script yang saya tambahkan seperti berikut

function doPost(e) {

  try {

    if (!e || !e.postData) {

      throw new Error("No postData received. Check the incoming request.");

    }

   

    // Log the raw data for debugging

    Logger.log(e.postData.contents);

    // Parse the incoming JSON data

    var jsonData = JSON.parse(e.postData.contents);

   

    // Extract voltage and current from the JSON payload

    var voltage = jsonData.volt || "N/A";  // Default to "N/A" if missing

    var current = jsonData.amp || "N/A";  // Default to "N/A" if missing

    var timestamp = new Date().toISOString(); // Get the current timestamp

   

    // Get the active sheet and append the data as a new row

    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

    sheet.appendRow([timestamp, voltage, current]);

   

    // Keep only the last 20 rows (delete older rows if necessary)

    var lastRow = sheet.getLastRow();

    if (lastRow > 21) { // Keep the header row

      sheet.deleteRow(2); // Always delete the second row (keep header row intact)

    }

   

    return ContentService.createTextOutput("Data added to Google Sheets");

  } catch (error) {

    // Log the error for debugging

    Logger.log("Error: " + error.message);

    return ContentService.createTextOutput("Error: " + error.message);

  }

}

Dan kemudian hasilnya grafik/charts yang saya buat sesuai harapan menjadi hanya 20 baris data saja.

Seperti yang kita ketahui, google sheets secara keseluruhan maupun grafiknya saja dapat dipublish sebagai gambar ataupun grafik interaktif, sehingga bisa ditempel secara iframe pada website seperti pada grafik paling atas tulisan saya ini.

Bagaimana ? Mudah bukan ? Secara default google yang memberikan fasilitas secara gratis ini, mengatur refresh rate tiap 5 menit untuk meng-update tampilan grafiknya. Jadi kendalanya grafik tidak terlalu realtime tapi cukup menggembirakan bagi saya yang pecinta gratisan...hehehehe..

Read More

[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