Postingan

Menampilkan postingan dari Januari, 2022

Plot Garis dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Untuk keperluan analisis data, seringkali diperlukan membuat grafik, untuk melihat persebaran data. Seperti yang penulis butuhkan dalam video di atas, untuk melihat performa iklan Admob dari aplikasi-aplikasi buatan penulis, penulis perlu melihat performa jumlah iklan yang dipanggil tiap waktunya. Dengan teknologi HTML5 Canvas, ternyata membuat plotting garis sederhana dapat dilakukan dengan mudah. Cukup dengan membuat field input file, memilih data yang akan ditampilkan, dan menggambar grafiknya dengan Canvas. Fungsi berikut ini adalah perintah untuk membuat plotting dengan Canvas: function plotting(name,x,min,max) { var c = document.createElement('canvas'); c.width=300; c.height=200; var ctx = c.getContext("2d"); ctx.font = "14px Arial"; ctx.fillText(name+" "+x.length,5,16); ctx.beginPath(); for(var i=0;i<x.length;i++){ if(i==0){ ctx.moveTo(Math.round(1.0*i*c.width/x.length),Math.round(c.height-1.0*(x[i]-min)*c.height/(max-min)...
Posting Komentar
Baca selengkapnya

Pembahasan Soal Olimpiade Sains Bu Ani Perjalanan ke Pasar selama 2 Jam

Oleh Uboiz -
Gambar
Sebuah pertanyaan olimpiade sains tingkat sekolah dasar, menantang rasa penasaran penulis. Soal itu adalah sebagaimana berikut: Bu Ani pergi ke pasar dengan kecepatan awal 40 km/jam. Setelah setengah perjalanan, Bu Ani menurunkan kecepatan sepeda motornya mencapai 60 km/jam. Waktu yang diperlukan Bu Ani sampai di pasar adalah 2 jam perjalanan. Berapakah jarak pasar dengan rumah Bu Ani? Sebagai seorang lulusan jurusan Fisika, meski tidak berijazah, tentu penulis tertarik untuk menyelesaikannya. Dan penulis menemukan dua hal yang tidak masuk akal, dan lucu juga. Hal pertama, yang menurut penulis lucu adalah Bu Ani pergi ke pasarnya sangat lama, 2 jam perjalanan. Itu jauh, untuk seorang Bu Ani yang hanya bersepeda motor. Mungkin Bu Ani pedagang besar yang hanya memesan barang. Dan barang pesanannya dikirim ke rumahnya melalui jasa pengiriman. Siapa tahu? Kedua, disetengah perjalanan, Bu Ani menurunkan kecepatan hingga 60 km/jam. Hal ini berarti, kecepatan disetengah perjalanan (V1) harus ...
Posting Komentar
Baca selengkapnya

Preview File Gambar sebelum di Upload dengan Javascript

Oleh Uboiz -
Gambar
Seringkali, ketika akan mengupload file gambar, perlu dipastikan dahulu gambar yang akan diupload dalam bentuk preview. Dan teknologi HTML5 telah menambahkan kemampuan upload banyak file dengan hanya satu element input dengan tag type='file' dan multiple. Sangat mudah. Entah penulis yang ketinggalan informasi atau gimana, sebab penulis teringat jaman dahulu, perlu menambahkan satu persatu, sesuai jumlah file yang akan ditambahkan melalui appendChild, jika diperlukan upload banyak file pada form. Di bawah ini adalah kode preview image ketika input file berubah (onchange), dan gambar akan ditampilkan pada element dengan Id='imgpreview'. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <h1>The input multiple attribute</h1> <form action="/action_page.php" enctype="multipart/form-data">...
Posting Komentar
Baca selengkapnya

Contoh Circle Progressbar untuk Loading Website

Oleh Uboiz -
Gambar
Dalam membuat sebuah website, adakalanya diperlukan untuk menambahkan progressbar berbentuk lingkaran (circle) yang berputar, untuk menandakan halaman website sedang dimuat. Meskipun sederhana, penambahan progressbar ini menurut penulis penting, karena akan memberikan perintah secara halus kepada pengunjung, untuk menunggu dan menandakan bahwa website kita sedang di proses. Sebab, penulis sendiri, lebih sering untuk pergi ke website lain, ketika website yang sedang penulis kunjungi serasa berhenti (stuck) tanpa adanya tanda progres. Berikut ini salah satu kode circle progressbar dengan CSS: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .boxloader{ position: fixed; top: 50%; right: 50%; text-align:center; } .loader { border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 20px; height: 20px; -webkit-animation: spin 0.5s linear infinite;...
Posting Komentar
Baca selengkapnya