FIDS Editor

Di bawah ini adalah halaman home FIDS editor yang muncul setelah klik view salah satu display frame yang telah dibuat pada modul admin FIDS >> menu display frame. Klik disini untuk melihat kembali penjelasan detil menu display frame

Halaman Home FIDS Editor

../_images/home_fids_editor.png

Halaman Home FIDS Editor

Modul FIDS editor ini dibuat untuk memudahkan petugas bandara dalam hal membuat custom template FIDS. Petugas tinggal menambahkan komponen seperti teks, image, atau komponen lain yang dapat dikonfigurasi color, size, tata letak, dan lainnnya hanya dengan isi form. Tanpa harus mahir memprogram html-CSS. Config tata letak komponen dapat dilakukan dengan drag and drop.

Note

Namun, dalam hal ini tim Inalix sudah menyediakan global template siap pakai. Petugas bandara dapat menggunakannya secara langsung, edit kondigurasinya, atau create baru dengan langkah seperti dijelaskan berikut.

Ada 2 langkah utama yang dapat dilakukan untuk custom template FIDS:

  1. Add Screen

Screen adalah bingkai layar FIDS yang di create pertama kali, sebagai wadah komponen (content) FIDS seperti text, image, clock, video, running text, slide, visual paging, dan daily flight

  1. Add Komponen (Content) FIDS

Komponen (content) yang dapat diinput ke dalam screen meliputi text, image, clock, video, running text, slide, visual paging, dan daily flight. Konfigurasi content seperti coloring, size, tata letak, atau lainnnya dilakukan disini

Screen

Screen adalah bingkai layar FIDS yang di create pertama kali, sebagai wadah komponen (content) FIDS seperti text, image, clock, video, running text, slide, visual paging, dan daily flight. Setelah masuk halaman home FIDS Editor, klik add_screen, akan muncul form add screen seperti berikut

../_images/form_add_screen.png

Form Add Screen

Keterangan

  • Top, margin atas, isi batas margin atas screen dengan satuan px, isi dengan 0px agar screen memenuhi bagian atas layar (tidak ada tampilan kosong di screen bagian atas)

  • Left, margin kiri, isi batas margin kiri screen dengan satuan px, isi dengan 0px agar screen memenuhi bagian kiri layar (tidak ada tampilan kosong di screen bagian kiri)

  • Width, isi lebar screen sesuai resolusi layar yang digunakan dengan satuan px, umumnya:

    • isi width = 1920px jika menggunakan layar full HD

    • isi width = 1366px jika menggunakan layar HD

  • Height, isi tinggi screen sesuai resolusi layar yang digunakan dengan satuan px, umumnya:

    • isi height = 1080px jika menggunakan layar full HD

    • isi height = 720px jika menggunakan layar HD

  • Klik save akan muncul screen seperti berikut:

../_images/home_add_screen.png

**Add Screen Berhasil, ditandai dengan adanya bingkai guideline warna merah sesuai ukuran width dan height

  • icon_move_handle, klik, tahan, dan geser icon ini untuk memindah posisi screen (config top dan left existing akan auto berubah)

  • icon_plus_content_fids, untuk menambah content FIDS, meliputi add text, image, clock, video, running text, slide, visual paging, atau daily flight

  • icon_edit, untuk mengubah konfigurasi screen (top, left, width, dan height)

  • icon_switch_screen, untuk pindah screen

plugin-image

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

  • Setelah menambahkan screen, klik icon_plus_content_fids yang ada di pojok kanan atas screen >> klik image, akan muncul form add image seperti berikut.

../_images/form_add_image.png

Form Add Image

  • Isi form di atas:

    • klik choose_file, untuk menambahkan gambar: pilih gambar >> klik open

    • position & size:

      • 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 add image, atau klik icon_x untuk membatalkan

Contoh

ex_add_images

screen_configuration

image_configuration2

image_configuration1

Contoh add image pada FIDS Editor

  • Contoh diatas adalah contoh add image di dalam screen yang telah dibuat:

    • gambar gelap (kehitaman) memanjang, digunakan untuk backgrooud header

    • gambar icon departure flight, diinput setelah gambar backgrooud header agar berada di layer atas

    • saat mouse hover >> muncul guideline merah yang menggambarkan tata letak komponen gambar (top, left, width, height)

  • Untuk edit gambar, double klik gambar akan muncul form edit image seperti berikut

../_images/form_edit_image.png

Form Edit Image

Keterangan

  • choose_file, untuk mengganti dengan content gambar lain

  • position & size, update nilai top, left, width, height sesuai kebutuhan

  • save, untuk menyimpan hasil edit

  • delete, untuk menghapus content gambar

  • bring_to_front, untuk memindahkan objek gambar ada di layer atas

  • copy, untuk menggandakan content gambar, dengan posisi top dan left sama 0px

  • icon_x, close dan cancel edit

  • drag and drop untuk menyesuaikan tata letak gambar (konfigurasi tata letak top dan left auto berubah)

plugin-text

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

  • Pada screen yang sudah dibuat: klik icon_plus_content_fids >> pilih teks >> isi form konfigurasi teks berikut

../_images/form_add_text.png

Form Add Text

  • Isi form di atas:

    • Text1, Teks2, Text3, dan Text4, Tuliskan teks yang ingin ditampilkan pada field ini, tidak harus diisi semua. Teks akan muncul bergantian.

    • position & size

      • top, batas margin atas teks terhadap screen, isi dengan satuan px

      • left, batas margin kiri teks terhadap screen, isi dengan satuan px

      • width, lebar bingkai teks, isi dengan satuan px

    • styling,

      • Color, warna teks, isi dengan kode hexadecimal, atau nama warna dalam bahasa inggris, misal: red, atau langsung klik pada kolom ini dan pilih warna

      • bgcolor, warna background bingkai teks

      • Font family, jenis font

      • font size, ukuran font

      • Line height: tinggi bingkai teks, tulis satuan px

      • rounded: membuat objek sudut melengkung, isi dengan satuan px

      • Text Align: posisi (tata letak) teks, pilih salah satu (rata kiri, tengah atau kanan terhadap bingkai/ width content text)

    • Klik save untuk menyimpan konfigurasi add text, atau klik icon_x untuk close dan cancel add text

../_images/ex_add_text.png

screen_configuration

|text_configuration|

image_configuration1

Contoh add text pada FIDS Editor

  • Untuk edit text, double klik teks akan muncul form edit text seperti berikut

../_images/form_edit_text.png

Form Edit Text

Keterangan

  • Text1, Text2, Text3, Text4, update content text sesuai kebutuhan

  • position & size, update nilai top, left, width sesuai kebutuhan

  • styling, update nilai styling sesuai kebutuhan

  • save, untuk menyimpan hasil edit

  • delete, untuk menghapus content text

  • bring_to_front, untuk memindahkan objek text ada di layer atas

  • copy, untuk menggandakan content text

  • icon_x, close dan cancel edit

Tips,

  • field minimal yang harus diisi untuk add text adalah text1 >> klik save >> tampilan teks sudah bisa muncul >> kemudian baru double klik untuk melengkapi field yang lain

  • setelah muncul content teks, posisi (tata letak) dapat diatur dengan klik, tahan, dan pindahkan >> nilai top dan left akan berubah otomatis

plugin-clock

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

  • Setelah menambahkan screen, klik icon_plus_content_fids yang ada di pojok kanan atas screen >> klik clock, akan muncul form add clock seperti berikut.

../_images/form_add_clock.png

Form Add Clock

  • Isi form di atas:

    • Display format, pilih format tanggal atau format jam.

    • Language, bahasa display FIDS

    • Posision

      • Top, margin atas content clock terhadap screen

      • Left, margin kiri content clock terhadap screen

      • Width, lebar konten clock

    • Styling

      • Font size, ukuran teks tanggal, satuan px

      • Line height, tinggi kontent tanggal

      • Text align, tata letak teks, pilih salah satu

      • Color, warna, isi dengan kode hexadecimal, atau nama warna dalam bahasa inggris, atau klik pada kolom ini dan langsung pilih warna

      • BG color, warna backgrooud

      • Font family, jenis font

  • Untuk edit content clock, double klik clock, akan muncul form edit clock seperti berikut

../_images/form_edit_clock.png

Form Edit Clock

Keterangan

  • edit nilai-nilai yang ada di form sesuai kebutuhan

  • save, untuk menyimpan hasil edit

  • delete, untuk menghapus content clock

  • bring_to_front, untuk memindahkan objek clock ada di layer atas

  • copy, untuk menggandakan content clock

  • icon_x, close dan cancel edit

plugin-video

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

  • Setelah menambahkan screen, klik icon_plus_content_fids yang ada di pojok kanan atas screen >> klik video, akan muncul form add video seperti berikut.

../_images/form_add_video.png

Form Add Video

  • Isi form di atas:

    • Klik choose_file untuk menambahkan video >> pilih video >> klik open

    • Posision & size

      • 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 save untuk menyimpan konfigurasi add video, atau klik icon_x untuk cancel add video

  • Untuk edit content video, klik icon_edit yang ada di dalam video yang terupload, akan muncul form edit seperti berikut

../_images/form_edit_video.png

Form Edit Video

Keterangan

  • klik choose_file, untuk mengganti content dengan video lain

  • position & size, update nilai top, left, width, height sesuai kebutuhan

  • save, untuk menyimpan hasil edit

  • delete, untuk menghapus content video

  • bring_to_front, untuk memindahkan objek video ada di layer atas

  • copy, untuk menggandakan content video, dengan posisi top dan left sama dengan 0px

  • icon_x, close dan cancel edit

plugin-runningtext

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

  • Setelah menambahkan screen, klik icon_plus_content_fids yang ada di pojok kanan atas screen >> klik running teks akan muncul form add running text seperti berikut

../_images/form_add_runningtext.png

Form Add Running Text

Isi form di atas:

  • Group: pilih grup running text, apakah informasi running teks untuk grup khusus (misal: grup departure, arrival, atau yang lain). Kategori grup dapat dibuat melalui modul admin FIDS (menu display group)

  • Height: tinggi text (running text), isi dengan satuan px

  • Styling

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

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

    • Font family: pilih jenis font

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

    • BG 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 add running text, atau klik icon_x untuk cancel add running text

  • Untuk edit content running text, double klik running text, akan muncul form edit running text seperti berikut

../_images/form_edit_runningtext.png

Form Edit Running Text

Keterangan

  • Update data konfigurasi running text sesuai kebutuhan

  • save, untuk menyimpan hasil edit

  • delete, untuk menghapus content gambar

  • bring_to_front, untuk memindahkan objek gambar ada di layer atas

  • copy, untuk menggandakan content gambar, dengan posisi top dan left sama 0px

  • icon_x, close dan cancel edit

plugin-slide

Slide adalah semacam lembar kerja yang ditampikan bergantian secara otomatis. Slide pada templating FIDS akan menampilkan content-content FIDS secara bergantian, dapat berupa kombinasi 2 jenis content, misal: text + image. Jadi langkah pertama yang harus dilakukan untuk menggunakan konten templating slide, adalah menyiapkan 2 konten FIDS selain slide. Berikut langkah detail menambahkan konten slide pada FIDS:

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

  • Tambahkan content slide pada screen FIDS sebagai frame utama dengan cara klik icon_plus_content_fids| yang ada di pojok kanan atas screen >> klik slide akan muncul form add slide seperti berikut

../_images/form_add_slide.png

Form Add Slide

  • Isi form di atas untuk membuat frame utama slide:

    • Posision & size

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

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

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

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

    • Slide: kosongkan, nanti akan terisi otomatis

    • Klik save akan muncul frame utama slide FIDS seperti berikut

../_images/main_frame_slide.png

Frame Utama Slide FIDS

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

  • Untuk insert content lain ke dalam frame slide dapat dilakukan dengan cara sebagai berikut:

    • Klik icon_switch_screen untuk menentukan halaman yang diinsert

    • klik move_item akan muncul list content di luar slide yang dapat diinput ke frame slide seperti gambar berikut:

../_images/list_content_to_input_to_slide.png

List Content yang Siap Diinput ke Frame Utama Slide FIDS

  • Pilih salah satu item yang akan diinser

plugin-flights

Ada 2 langkah utaman untuk menambahkan content daily flight pada screen FIDS dapat dilakukan dengan cara sebagai berikut

  1. buat frame (bingkai) content daily flight di dalam screen FIDS editor

  2. isi frame dengan data-data daily flight sesuai kebutuhan

Frame Content Daily Flight

Untuk membuat frame utama di screen daily flight dapat dilakuakn dengan cara sebagai berikut

  • klik icon_plus_content_fids yang ada di pojok kanan atas screen >> klik daily flight, akan muncul form add daily flight seperti berikut

../_images/form_add_daily_flight.png

Form Add Daily Flight, untuk membuat frame utama

  • isi form di atas:

    • position (frame utama)

      • 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

    • styling

      • Row height: tigggi row (baris) data

      • Row bg color: warna background row

      • Row bg color odd: warna backgroud baris ganjil

      • Font Family: jenis font

      • A/D: pilih data yang ingin ditampilkan (untuk informasi arrival/departure/keduanya)

    • Table data

      • Start Row: isi 0

      • Lines: Jumlah baris data

      • Number of slides: jumlah slide, isi 1

      • include/exclude: pilih include

    • Flight filter

      • isi jika ingin menampilkan data flight dengan filter

      • kosongkan jika tidak ada filter flight

    • Multiple row condition, skip, belum digunakan

    • Klik save untuk menyimpan, maka akan muncul frame utama daily flight di dalam screen; atau klik icon_x untuk cancel add daily flight

Input Frame Daily Flight dengan Field Data

  • Untuk input field data pada frame daily flight, double klik frame daily flight >> muncul form edit daily flight >> klik add_new yang ada di pojok kanan, akan muncul form konfigurasi add field.

    • Field: pilih field yang ingin ditampilkan

    • Order: isi 1

    • Posision, posisi field

      • 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

    • Styling

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

      • Color: warna teks

      • BG color: warna background, jika tidak diisi sama dengan warna bingkai daily flight

      • BG 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

      • Extras: skip, belum digunakan

    • Multiple row condition, skip, belum digunakan

    • Klik save untuk menyimpan

    • Klik add_new lagi untuk menambahkan field yang lain