Censor Icon Modal, Pop Up Window and Circular Navigation

[senoadiw]

From @milakhaerunnisa on April 18, 2017 11:24

Modal Window

Terdapat 4 tipe modal window yang dapat dimunculkan dari http://geostech.org/mhews/index.php. Background pada UI design ini berwarna putih dengan latar transparan. Namun untuk background nya bisa disesuaikan berdasarkan hasil kesepakatan bersama. Tipe-tipe tersebut terangkum sebagai berikut:

Tipe 1

Tipe 1 ini terdiri dari beberapa sensor dengan halaman berikut ini: http://geostech.org/mhews/info_awlr_dki http://geostech.org/mhews/info_wxmod http://geostech.org/mhews/info_extenso_bpptkg http://geostech.org/mhews/info_ch_bpptkg

Tampilan UI

Tipe 2

Tipe 2 ini terdiri dari beberapa sensor dengan halaman berikut ini: http://geostech.org/mhews/info_awlr_pusair.php

Tampilan UI

Tipe 3

Tipe 3 ini terdiri dari beberapa sensor dengan halaman berikut ini: http://geostech.org/mhews/dl_posko_tma.php http://geostech.org/mhews/bppt_awlr.php http://geostech.org/mhews/info_awlr_bppt

Tampilan UI

Tipe 4

Tipe 4 ini terdiri dari beberapa sensor dengan halaman berikut ini: Beda Tipe Sensor LongsorBNPB http://geostech.org/mhews/info_ch_bnpb.php Sensor Induk/AWS BNPB http://geostech.org/mhews/info_ch_bnpb.php?a=LEW01

Tampilan UI

Tipe 5

Tipe 5 ini terdiri dari sensor dengan halaman berikut ini: http://geostech.org/mhews/bmkg_radar.php

Tampilan UI

Pop Up Window

Update 20 April 2017 Pop up window disesuaikan dengan tipe modal window di atas. Dimana tampilan nya sebagai berikut:

Pop Up Tipe 1

Tipe 1 ini terdiri dari beberapa icon sensor, yaitu:

1. Sensor AWLR DKI http://geostech.org/mhews/info_awlr_dki
2. Sensor WXMOD http://geostech.org/mhews/info_wxmod
3. Sensor Extenso BPPTKG http://geostech.org/mhews/info_extenso_bpptkg
4. Sensor Curah Hujan BPPTKG http://geostech.org/mhews/info_ch_bpptkg

Update 27 April 2017

Pop Up Tipe 2

Tipe 2 ini untuk sensor icon AWLR Pusair http://geostech.org/mhews/info_awlr_pusair.php

Update 27 April 2017

Pop Up Tipe 3

Tipe 3 ini terdiri dari beberapa icon sensor, yaitu:

1. Sensor AWLR DKI pada menu Lihat Data >> Sumber Lain >> Data TMA (http://geostech.org/mhews/index.php) http://geostech.org/mhews/dl_posko_tma.php
2. Sensor AWLR BPPT http://geostech.org/mhews/bppt_awlr.php
3. Sensor AWLR BPPT pada menu Lihat Data >> BPPT >> Data AWLR http://geostech.org/mhews/info_awlr_bppt

Update 27 April 2017

Pop Up Tipe 4

Tipe 4 ini terdiri dari dua icon sensor, yaitu:

1. Sensor LongsorBNPB http://geostech.org/mhews/info_ch_bnpb.php
2. Sensor Induk/AWS BNPB http://geostech.org/mhews/info_ch_bnpb.php?a=LEW01

Update 27 April 2017

Pop Up Tipe 5

Tipe 5 ini untuk icon sensor radar http://geostech.org/mhews/bmkg_radar.php

Update 27 April 2017

Pop Up Tipe 6

Update 27 April 2017 Pop ini diperuntukan bagi icon bencana. Icon bencana ini akan muncul di Halaman Peringatan Bencana (untuk bencana yang sudah terjadi) dan pada saat melakukan pencarian bencana pada search box. Untuk "Ketersediaan Data" dan "Rincian Berita" diganti dengan icon yang ketika kursor mengarah ke icon tersebut akan muncul tool tip.

Circular Navigation untuk Sensor Icon

Update 21 April 2017 Circular Navigation ini memiliki background yang transparan. Untuk Sensor Icon ini terdiri dari 3 icon, yaitu:

1. Icon Zoom In Ketika user mengklik ini, maka akan ter-zoom langsung ke sensor yang bersangkutan
2. Icon Detail Data Berisikan detail data yang ditampilkan pada modal window di atas
3. Icon Zoom Out Ketika user mengklik ini, maka akan ter-zoom out ke luasan area yang terdapat icon sensor nya

Note

Untuk icon pada keterangan icon ada di dropbox yang link nya ada di Issue #11 pada folder 13 Sencor Icon for Modal Window

Copied from original issue: geoenvo/mhews#15

[senoadiw]

From @faizalprbw on April 27, 2017 4:15

Untuk desain UI modal Tipe 3 masih terkendala dikarenakan ada error saat query databases akibat ada nama tabel yang miss