Customize Template FIDS

Setting Frame (Templating) FIDS

Frame (template) FIDS dapat dicustom sesuai keinginan, misal: dibuat tampilan klasik dengan menampilkan list jadwal penerbangan berjajar ke bawah, dibuat tampilan kanan-kiri dengan scope domestik-internasional, disetting warna background, ditambahkan gambar, video atau templating yang lain hanya dengan add komponen frame, set ukuran, dan drag and drop komponen yang telah ditambahkan. Setting Frame seperti ini hanya dapat dilakukan pada web console FIDS versi terbaru. Berikut langkah yang dapat dilakukan untuk setting frame FIDS:

  • Masuk ke halaman yang menampilkan list device FIDS (masuk ke halaman Application –> Device –> Device)

  • Klik tombol view, akan menampilkan templating FIDS

  • Klik keybord “ctrl + shift + ?” untuk memunculkan pengaturan frame seperti berikut:

../_images/halaman_utama_setting_frame.png

Halaman Utama Setting Frame FIDS

Halaman di atas adalah halaman utama setting frame FIDS. Untuk pengaturan konfigurasi device dengan option frame dipilih blank, maka akan muncul tampilan blank putih dan muncul tombol add_screen_live di pojok kiri atas.

  • Klik add_screen, untuk mambuat screen baru, akan muncul form pengaturan seperti berikut:

    • Top: isi batas margin screen bagian atas dengan satuan px, isi dengan 0px agar screen memenuhi bagian atas layar

    • Left: isi batas margin screen bagian kiri dengan satuan px, isi dengan 0px agar screen memenuhi bagian kiri layar

    • Width: isi lebar resolusi layar dengan satuan px, misal isi 1920px untuk layar full HD, 1366px untuk layar HD, atau menyesuaikan sesuai kebutuhan

    • Height: isi tinggi resolusi layar dengan satuan px, misal isi 1080px untuk layar full HD, 720px untuk layar HD, atau menyesuaikan sesuai kebutuhan

    • Klik save akan muncul screen seperti berikut:

../_images/frame_add_screen1.png

Langkah 1 Setting Templating FIDS (Add Screen)

Keterangan:

  • Move Screen Handle: Klik dan tahan pada tulisan ini, kemudian gerak-gerakkan. Maka posisi screen akan bergeser (margin top dan left akan berubah otomatis).

  • Klik add, untuk menambah komponen tampilan FIDS, meliputi add text, image, clock, video, running text, slide, visual paging, daily flight.

  • Klik edit, untuk mengubah setting screen (top, left, width, dan height)

Menambahkan atau Edit Gambar FIDS

Untuk menambahkan gambar pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Setelah menambahkan screen, klik add –> image, akan muncul form add new image seperti berikut.

../_images/form_add_image.png

Form Add New Image

  • Isi form di atas:

    • Klik pilih_file, cari dan pilih gambar yang diinginkan –> klik open

    • Top: batas margin atas gambar terhadap screen, satuan px, misal: isi dengan 20px

    • Left: batas margin kiri gambar terhadap screen, satuan px, misal: isi dengan 20px

    • Width: lebar gambar, satuan px, misal: isi dengan 100px

    • Height: tinggi gambar, satuan px, misal: isi dengan 50px

    • Klik save untuk menyimpan konfigurasi setting gambar, atau close untuk membatalkan

  • Ketika gambar sudah muncul pada screen, double klik gambar untuk edit gambar.

    • Klik pilih_file untuk mengganti dengan gambar lain

    • Update nilai top, left, width, height sesuai yang diinginkan

    • Klik copy untuk menggandakan gambar

    • Klik bring_to_front untuk membawa objek gambar berada di lapisan atas

    • Klik delete untuk menghapus gambar

    • klik save untuk simpan hasil edit

    • Klik close untuk menutup form edit (tanpa simpan)

    • Klik gambar, tahan, drag and drop untuk memindah posisi gambar (nilai top dan left otomatis berubah)

Menambahkan atau Edit Teks FIDS

Untuk menambahkan teks pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Setelah menambahkan screen, klik add –> teks, akan muncul form add teks seperti berikut.

../_images/form_add_teks.png

form Add Text

  • Isi form di atas:

    • Isi text1, teks2, text3, dan text4, untuk menampilkan teks dinamis. Keempat teks akan muncul bergantian. (tidak harus diisi semua).

    • Color, isi dengan kode hexadecimal, atau nama warna dalam bahasa inggris.

    • Font family, pilih jenis font

    • Top, Left: margin top dan margin left text terhadap screen, diisi dengan satuan px

    • Width: lebar bingkai teks, tulis satuan px

    • Line height: tinggi bingkai teks, tulis satuan px

    • Font size: ukuran font, tulis satuan px

    • Align: posisi (tata letak) teks, pilih salah satu

    • Klik save untuk menyimpan konfigurasi setting gambar, atau close untuk membatalkan

  • Ketika teks sudah muncul pada screen, double klik bingkai untuk edit teks.

    • Update nilai-nilai yang ada form, seperti text, font family, top, left, width, height, dan lain-lain sesuai yang diinginkan

    • Klik copy untuk menggandakan teks

    • Klik bring_to_front untuk membawa objek teks berada di lapisan atas

    • Klik delete untuk menghapus teks

    • klik save untuk simpan hasil edit

    • Klik close untuk menutup form edit (tanpa simpan)

    • Klik bingkai teks, tahan, drag and drop untuk memindah posisi (nilai top dan left otomatis berubah)i

Menambahkan dan Edit Clock (Tanggal dan Jam)

Untuk menambahkan clock (tanggal dan jam) pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Setelah menambahkan screen, klik add –> clock, akan muncul form konfigurasi add clock seperti berikut.

../_images/form_config_clock.png

Form Konfigurasi Add Clock

Isi form di atas:

  • Display format, pilih format tanggal atau format jam.

  • Language, bahasa display FIDS

  • Top, margin atas terhadap screen

  • Left, margin kiri terhadap screen

  • Width, lebar konten tanggal

  • Line height, tinggi kontent tanggal

  • Font size, ukuran teks tanggal, satuan px

  • Text align, pilih posisi teks,

  • Color, isi dengan kode hexadecimal, atau nama warna dalam bahasa inggris.

  • Background color, warna latar dari width and height

  • Font family, pilih jenis font

  • Ketika clock sudah muncul pada screen, double klik gambar untuk edit konfigurasi clock.

    • Update nilai-nilai yang ada form, seperti diplay format, language, top, left, width, dan lain-lain sesuai yang diinginkan

    • Klik copy untuk menggandakan teks

    • Klik bring_to_front untuk membawa objek teks berada di lapisan atas

    • Klik delete untuk menghapus teks

    • klik save untuk simpan hasil edit

    • Klik close untuk menutup form edit (tanpa simpan)

    • Klik bingkai clock, tahan, drag and drop untuk memindah posisi (nilai top dan left otomatis berubah)i

Menambahkan Video dan Mengganti Video yang Telah Diupload

Untuk menambahkan video pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Setelah menambahkan screen, klik add –> video, akan muncul form add video seperti berikut.

../_images/form_insert_video.png

Form Add Video

Isi form di atas:

  • Top: batas margin atas video terhadap screen, isi dengan satuan px, misal: 20px

  • Left: batas margin kiri video terhadap screen, isi dengan satuan px, misal: 20px

  • Width: lebar bingkai video, isi dengan satuan px, misal: 100px

  • Height: tinggi bingkai video, isi dengan satuan px, misal: 50px

  • Klik pilih_file, cari gambar yang diinginkan –> open

  • Klik save untuk menyimpan konfigurasi setting gambar, atau close untuk membatalkan

  • Ketika video sudah muncul pada screen, klik edit_video untuk edit video terupload.

    • Update margin top-left, atau update file video sesuai yang diinginkan

    • Klik copy untuk menggandakan video

    • Klik bring_to_front untuk membawa objek video berada di lapisan atas

    • Klik delete untuk menghapus video

    • klik save untuk simpan hasil edit

    • Klik close untuk menutup form edit (tanpa simpan)

    • Klik dan tahan teks move video, drag and drop untuk memindah posisi video (nilai top dan left otomatis berubah)

Menambahkan dan Edit Running Text

Running text adalah komponen pada FIDS berupa teks berjalan, yang biasa dimunculkan pada layar bagian bawah. Untuk menambahkan teks berjalan pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Setelah menambahkan screen, klik add –> running teks akan muncul form konfigurasi add running text seperti berikut.

../_images/form_add_running_text.png

Form Add Running Text

Isi form di atas:

  • Group: pilih grup running text yang telah dibuat pada halaman admin web console FIDS (klik Apllication –> Display –> Running Text)

  • Height: , tinggi bingkai text, seperti line spacing, isi dengan satuan px, dan dapat disamakan dengan nilai line height

  • Line height: tinggi bingkai running text, isi dengan satuan px, misal: 20px

  • Font size: ukuran font, isi dengan satuan px, misal: 24px

  • Font family: pilih jenis font

  • Color, warna teks, isi dengan kode hexadecimal atau nama warna dalam bahasa inggris.

  • Background color: warna bingkai ruunning teks, isi dengan kode hexadesimal atau nama warna dalam bahasa inggris.

  • Border color: warna border bingkai running teks, isi dengan kode hexadesimal atau nama warna dalam bahasa inggris

  • Klik save untuk menyimpan konfigurasi setting gambar, atau close untuk membatalkan

  • Ketika running text sudah muncul pada screen, klik double klik untuk edit konfigurasi running text.

    • Update data konfigurasi, mulai dari group, height, dan lain-lain sesuai yang diinginkan

    • Klik bring_to_front untuk membawa objek running text berada di lapisan atas

    • Klik delete untuk menghapus running text

    • klik save untuk simpan hasil edit

    • Klik close untuk menutup form edit (tanpa simpan)

Menambahkan Slide

Untuk menambahkan slide pada screen FIDS dapat dilakukan dengan cara sebagai berikut:

  • Siapkan 2 item templating fids selain slide sebelum membuat templating ini, misal: add text, image, clock, video atau media lainnnya.

  • Tambahkan bingkai utama templating slide dengan cara klik add –> slide akan muncul form konfigurasi add slide seperti berikut.

../_images/form_add_slide.png

Form Konfigurasi Add Slide

  • Isi form di atas untuk membuat bingkai utama slide:

    • Top: batas margin atas templating slide terhadap screen, isi dengan satuan px, misal: 50px

    • Left: batas margin kiri templating slide terhadap screen, isi dengan satuann px, misal: 50px

    • Width: lebar bingkai templating slide, isi dengan satuan px, misal: 500px

    • Height: tinggi bingkai templating slide, isi dengan satuan px, misal: 300px

    • Slide: kosongkan, nanti akan terisi otomatis

    • Klik save akan muncul bingkai templating slide seperti berikut

../_images/bingkai_templating_slide.png

  • Klik switch untuk melihat tampilan pada slide page 1 dan page 2

  • Untuk insert item templating yang yang sudah disiapkan sebelumnya ke dalam templating slide dapat dilakukan dengan:

    • Klik switch untuk menentukan halaman yang diinsert

    • klik move_item akan muncul item templating yang ada di luar slide seperti gambar berikut:

../_images/choose_item_slide.png

  • Pilih salah satu item yang akan diinsert.

Daily Flight

Untuk menambahkan tampilan daily flight pada screen FIDS dapat dilakukan dengan cara sebagai berikut.

  • Buat bingkai utama templating daily flight dengan cara klik add –> daily flight akan muncul form konfigurasi add daily text seperti berikut.

../_images/form_add_daily_flight.png

Form Membuat Bingkai Utama Add Daily Flight

  • Isi form Bingkai Utama tersebut dengan:

    • Top: batas margin atas templating daily flight terhadap screen, isi dengan satuan px, misal: 20px

    • Left: batas margin kiri templating daily flight terhadap screen, isi dengan satuan px, misal: 20px

    • Width: lebar bingkai templating daily flight, isi dengan satuan px, misal: 100px

    • Height: tinggi bingkai templating daily flight, isi dengan satuan px, misal: 50px

    • Row Height: tigggi row (baris) data

    • Row Background Color: warna background row

    • Row Background Color Odd: warna backgroud baris ganjil

    • Font Family: jenis font

    • A/D: pilih data yang ingin ditampilkan (untuk informasi Arrival/Departure)

    • Start Row: isi 0

    • Lines: Jumlah baris data

    • Number of slides: jumlah slide, isi 1

    • include/exclude: pilih include

    • Klik save untuk menyimpan, maka akan muncul bingkai daily flight; atau klik close untuk membatalkan

  • Untuk membuat sebuah field (kolom data) daily flight, double klik bingkai utama –> muncul form konfigurasi –> klik add_new yang ada di pojok kanan, akan muncul form konfigurasi field.

    • Field: pilih field yang ingin ditampilkan

    • Order: isi 1

    • Top: batas margin atas item field terhadap bingkai utama daily fight, isi dengan satuan px, misal: 20px

    • Left: batas margin kiri item field terhadap bingkai utama daily flight, isi dengan satuan px, misal: 20px

    • Width: lebar item field, isi dengan satuan px, misal: 100px

    • Height: tinggi item field, isi dengan satuan px, misal: 50px

    • Padding: padding, isi padding dengan urutan top right bottom left, misal: 0px 20px 4px 20px

    • Color: warna item field, diisi untuk teks

    • Background color: warna background, jika tidak diisi sama degan warna bingkai daily flight

    • Background color odd: warna backgrooud baris ganjil, jika tidak diisi sama dengan warna bingkai daily flight

    • Border bottom: warna border bawah

    • Line height: tinggi baris

    • Font size: ukuran font

    • Text align: perataan, pilih left, right, atau center

    • Font family: jenis font

    • Klik save untuk menyimpan

    • Klik add_new lagi untuk menambahkan field yang lain

Tuturial Templating FIDS Berbasis Video

Untuk penjelasan detail fitu templating FIDS, silahkan kunjungi link berikut: