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: .. image:: image_fids/halaman_utama_setting_frame.png :width: 450 :align: center .. centered:: 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: .. image:: image_fids/frame_add_screen1.png :width: 450 :align: center .. centered:: 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) .. |add_screen_live| image:: image_fids/add_screen_live.png :width: 80 .. |add_screen| image:: image_fids/add_screen.png :width: 60 .. |view| image:: image_fids/view.png :width: 30 .. |add| image:: image_fids/add.png :width: 40 .. |edit| image:: image_fids/edit1.png :width: 40 .. |save| image:: image_fids/save.png :width: 40 .. |close| image:: image_fids/close.png :width: 40 .. |pilih_file| image:: image_fids/pilih_file.png :width: 50 .. |copy| image:: image_fids/copy.png :width: 40 .. |bring_to_front| image:: image_fids/bring_to_front.png :width: 60 .. |delete| image:: image_fids/delete.png :width: 40 .. |edit_video| image:: image_fids/edit_video.png :width: 40 .. |add_new| image:: image_fids/add_new.png :width: 40 .. |switch| image:: image_fids/switch.png :width: 40 .. |move_item| image:: image_fids/move_item.png :width: 40 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. .. image:: image_fids/form_add_image.png :width: 230 :align: center .. centered:: 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. .. image:: image_fids/form_add_teks.png :width: 350 :align: center .. centered:: 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. .. image:: image_fids/form_config_clock.png :width: 330 :align: center .. centered:: 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. .. image:: image_fids/form_insert_video.png :width: 200 :align: center .. centered:: 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. .. image:: image_fids/form_add_running_text.png :width: 300 :align: center .. centered:: 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. .. image:: image_fids/form_add_slide.png :width: 300 :align: center .. centered:: 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 .. image:: image_fids/bingkai_templating_slide.png :width: 300 :align: center * 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: .. Image:: image_fids/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. .. image:: image_fids/form_add_daily_flight.png :width: 300 :align: center .. centered:: 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: * `Klik disini > tutorial tempalting FIDS part 1 (Intro; add image, text, clock, running text, video, dan slide)`_ * `Klik disini > tutorial tempalting FIDS part 2 (add daily flight)`_ .. _Klik disini > tutorial tempalting FIDS part 1 (Intro; add image, text, clock, running text, video, dan slide): https://www.youtube.com/watch?v=A13k2nFcr88 .. _Klik disini > tutorial tempalting FIDS part 2 (add daily flight): https://youtu.be/lXpuYP9hKm8