Kamis, 11 Januari 2018

Menampilkan Logo pada Display P10 dan Membuat Library Font Header untuk Logo-nya

Keinginan saya untuk menampilkan logo pada display P10 akhirnya bisa terwujud dengan berbagai cara sederhana, meskipun tampaknya terlihat rumit tapi hasilnya memuaskan.

Cara saya ini adalah dengan membuat sebuah library font header yang akan disertakan kedalam folder DMD dalam direktori instalasi arduino dikomputer, yang nantinya bisa digunakan dalam sketch arduino.

Berikut langkah-langkahnya :

1. Membuat font header untuk logo.

2. Menyiapkan gambar/logo.

3. Menyiapkan beberapa aplikasi pendukung diantaranya:

a. Converter foto ke 8bit, untuk mengubah logo ke tampilan 8 bit.

b. Photoshop, menambahkan grid pada logo hasil konversi tadi(sebenarnya diaplikasi Converter juga bisa ditampilkan grid).

c. Dot Matrix, untuk memetakan tampilan dan mengambil data hasil pemetaan berupa nilai dalam bentuk bilangan hex.
Pertama adalah membuat font header untuk logo yaitu memahami bagaimana data font didalam header dipanggil dan parameter-parameternya.

Lihat pada gambar

Data library font header. 

- Pada baris 9, nama "FareedRead32x32" harus digunakan merujuk pada pemakaian huruf ini. PROGMEM memaksa data menggunakan memori program untuk menghindari pemakai RAM yang terbatas.

- Pada baris 11 nilai heksa untuk ukuran, nilai 0 menandakan ukuran huruf tetap diatur oleh nilai berikutnya.

- Pada baris 12 nilai heksa untuk lebar yaitu 0x20(32), lebar piksel panel P10 adalah 32 piksel.

- Pada baris 13 nilai heksa untuk tinggi yaitu 0x10(16), tinggi piksel panel P10 adalah 16 piksel.

- Pada baris 14 nilai heksa untuk huruf pertama yaitu 0x31(dalam ASCII angka 1 adalah urutan ke 49 atau dalam heksa menjadi 0x31).

- Pada baris 15 nilai heksa untuk hitungan/banyaknya huruf yaitu 0x02(2), karena logo yang saya buat  memerlukan sampai 2 panel P10 maka nilai untuk huruf/font memerlukan 2.

- Pada baris 18 ini merupakan data huruf ataupun data logo yang kita buat.

Cara kerja Display P10 dalam mengirimkan data adalah 32 bytes data pertama dikirim untuk setengah panel(8 piksel) bagian atas, 32 bytes selanjutnya dikirim untuk setengah panel(8 piksel) bagian bawah. Jadi untuk keseluruhan 1 panel P10, memerlukan 64 bytes data. Karena data logo yang dibuat berjumlah 128 bytes maka terbagi menjadi 2 panel P10.

Tahap selanjutnya adalah mengonversi gambar logo menjdi gambar 8 bit. Untuk caranya silakan pakai cara masing-masing sesuai keahlian, sebagai contoh saya menggunakan aplikasi Android bernama 8Bit Photo Lab, karena hasilnya tanpa grid maka saya tambahkan grid di Photoshop.

Nah selesai mendapatkan gambar dengan resolusi 32x32 piksel maka saya bagi menjadi 4 bagian, sesuai cara kerja Display P10, yaitu 4 baris pertama bagian atas dan 4 baris kedua bawah.

Untuk memetakanya perlu bantuan aplikasi bernama "Dot Matrix", dengan aplikasi ini kita sangat mudah untuk mendapatkan data konversi berupa nilai heksa.

Nilai heksa yang didapat lalu dicatat untuk dimasukkan kedalam data font tadi.
Selesai.

Aplikasi 8Bit Photo Lab. 

Logo yang digunakan. 

Konversi ke 8 bit, 32x32 piksel. 

Hasil konversi. 

Pemetaan dengan aplikasi Dot Matrix. 

Data hasil pemetaan. 

Data hasil pemetaan keseluruhan. 

64 bytes data kesatu. 

64 bytes data kedua. 

Hasil Akhir. 






Selanjunya bisa membuat bitmap seperti ini.

14 Comments

"Looks like to hard to use..but i will try..):
nice blog...thank's.

maaf pak saya ingin bertanya bagaimana mendapatkan data hasil pemetaan keseluruhan yang bapak tulis dibuku dari aplikasi dot matrix.

Karena dot Matrix nya terbatas pada area 8x8 sedangkan p10 32x16 nah maka untuk baris 32 memeelukan pembagian 4 sedangkan kolom 2

mas saya masih bingung,ini maksudnya gimana y?

file .ino nya kok ga di upload mas?

jujur gan. ini salah satu yg buat saya malas search tutorial berbahasa Indonesia. Keterangannya naggung semua. tiba tiba aja jadi.

Maaf jika artikelnya kurang memuaskan tapi jikalau gak mengerti bisa ditanyakan disini

Trimsmakasih ilmunya, semoga barokah

Ini pake DMD1 apa DMD2 mas, terus instruksi untuk menampilkan array pakai fungsi apa mas

bagaimana caranya buat 1 panel ? jadi buka 32x32 tapi 32x16 . terima kasih

bagaimana cara pemetaannya ya ?

link aplikasi dot matrix nya om