Tampilkan postingan dengan label html. Tampilkan semua postingan

Jumat, 11 November 2016

Membuat gambar SVG pada laman html

Cara yang paling mudah membuat gambar dengan format SVG adalah dengan menggunakan aplikasi Inkscape. Lalu setelah gambar dibuat, maka proses selanjutnya adalah sebagai berikut:

Ubah ukuran dokumen mengikuti ukuran gambar pada Inkscape dengan cara pilih menu File → Document Properties... → cari bagian Custom size → pilih Resize page to content... → Tekan tombol Resize page to drawing or selection
tutup jendela Document Properties
Simpan gambar sebagai plain SVG
Buka file SVG dengan penyunting teks (Notepad, Leafpad, atau pad-pad lainnya).
Ambil bagian yang diapit tag <svg>..</svg>
Salin ke laman html
Hapus bagian metadata dan yang tak diperlukan lainnya dari bagian yang ditempel (paste) seperti:

   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"

Penskalaan SVG di html

Untuk urusan penskalaan gambar SVG dapat kita tambahkan atribut viewbox dengan sintaks seperti berikut:

viewbox:"<min-x> <min-y> <width> <height>"

<min-x> <min-y>: koordinat pojok kiri atas viewbox (isi saja dengan 0 0)
<width>: lebar viewbox
<height>:tinggi viewbox

Isi atribut viewbox dengan nilai width dan height dari viewport-nya gambar SVG.

<svg
   width="200"  <!-- lebar dan tinggi viewport -->
   height="100"

   viewbox="0 0 200 100">

Setelah itu untuk penskalaan, ubah nilai viewport-nya SVG, sesuai dengan seberapa kali besar dari nilai viewbox. Contoh berikut adalah dua kali-nya

<svg
   width="400"
   height="200"

   viewbox="0 0 200 100">

Gambar berikut menggunakan format SVG.

Sistem Operasi: Slitaz 4.0 GNU/Linux | Peramban: Mozilla Firefox 34.0 | Penyunting Teks: Leafpad 0.8.18.1 | Aplikasi SVG: Inkscape 0.48

Kamis, 13 Oktober 2016

Mengubah format file gambar menggunakan base64

Encoder base64 dapat digunakan untuk mengubah file format gambar (jpg, gif, png dll) menjadi berformat teks. Encoder ini biasanya sudah termasuk dalam paket default distro Linux yaitu coreutils.

Agar dapat digunakan dalam dokumen html, maka perlu mengetahui sintaks penggunaannya yaitu:

<img src=\"data:<tipe-mime>;base64,<kode-base64>" />

Untuk mendapatkan kode-base64 dari sebuah file gambar, cukup dengan mengetikkan perintah berikut pada terminal:

$ base64 -w 0 image.png

Sekedar saran, sebaiknya pilih gambar yang ukuran file-nya tidak begitu besar bila ingin menampilkan gambar dengan .kode-base64 ini pada laman web (< 100kB).

Agar proses copy-paste kode-base64 ini dapat berjalan dengan mudah, perintah di atas dapat kita redirect langsung ke sebuah file misalnya test. Seperti contoh perintah berikut ini.

$ echo "<img src=\"data:image/png;base64,$(base64 -w 0 image.png)\" />" > test

Buka file test dengan editor teks, piih semua dengan Ctrl-A, lalu salin dengan Ctrl-C. Pindahkan isi clipboard-nya ke laman html yang diinginkan.

Sebagai contoh hasilnya adalah gambar berikut ini. Silakan lihat kode sumber-nya kalau perlu.

Untuk format CSS-nya, kode-base64 dapat ditempatkan sebagai isi alamat URI dari elemen background pada sebuah class. Sehingga gambar dengan format ini dapat digunakan berkali-kali dalam sebuah laman web. Contoh syntax-nya adalah:

.nama_class {
 background:url(data:<tipe-mime>;base64,<kode-base64>) no-repeat;
 width:px;
 height:px;
}

Elemen class width dan height haruslah ditentukan ukurannya, bila tidak maka gambar tidak akan muncul. Berikut adalah hasil dari penggunaan yang diterapkan pada pola CSS (silakan melihat kode sumber laman ini)

Rabu, 04 November 2015

Plotting Gelombang Sinus pada html

Setelah lama mencari cara mem-plot fungsi trigonometri pada laman html, akhirnya ketemu juga. Ya lumayan lah, meskipun masih banyak yang kurang

Plotting Gelombang Sinus

Untuk persamaan:

┌─────────────────────────────┐
│                             │
│ y = C + A ⋅ Sin (B (x + D)) │
│                             │
└─────────────────────────────┘

dengan x : 0 < x < 360°
Kalau bingung, isi saja variabel dibawah dengan
A = 1, B = 1, C = 0 dan D = 0, lalu tekan tombol Plot.

Isi lagi (tanpa mengosongkan kanvas) nilai variabel di atas dengan nilai yang berbeda lalu plot untuk hasil yang berbeda,
Bila ingin mengosongkan kanvas bawah klik-kanan lalu pilih "Reload this page" pada laman browser(Firefox).

JavaScript must be enabled and supported

Naskah html ini cuma dibuat memakai Notepad.
Html ditampilkan dengan baik pada browser Mozilla Firefox 41.0.2 (Akhir 2015)
Netbook HP Mini-nya jebol woooi ❀ R.I.P. ❀

Rabu, 28 Oktober 2015

Contoh Rumus dalam Form HTML

Rumus Volume

Bila tidak tahu tentang rumus ini berarti sekolah SD-nya sampai gerbang doang.

Rumus Listrik

Bila:

V : Tegangan (Volt)
I : Arus (Ampere)
R : Tahanan (Ohm)
P : Daya (Watt/detik)

Maka:

┌──────────────────────────────────────┐
│                V       V             │
│  V = I⋅R ; I = ─ ; R = ─ ; P = V⋅I   │
│                R       I             │
└──────────────────────────────────────┘

Rabu, 21 Oktober 2015

Simbol Flowchart JavaScript

Kode fungsi JavaScript untuk simbol Flowchart

Silakan copy dan paste sendiri ke bagian body dari dokumen HTML. Atau salin dan buat ke dalam file js juga boleh. Untuk masalah syntax, silakan raba-raba sendiri deh (pengin buat tabelnya tapi keburu ngantuk).

var angle = Math.atan2(key-dariy,kex-darix);

//starting path of the arrow from the start square to the end square and drawing the stroke
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, key);
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();

//starting a new path from the head of the arrow to one of the sides of the point
   ctx.beginPath();
   ctx.moveTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//path from the side point of the arrow, to the other side point
   ctx.lineTo(kex-headlen*Math.cos(angle+Math.PI/7),key-headlen*Math.sin(angle+Math.PI/7));

//path from the side point back to the tip of the arrow, and then again to the opposite side point
   ctx.lineTo(kex, key);
   ctx.lineTo(kex-headlen*Math.cos(angle-Math.PI/7),key-headlen*Math.sin(angle-Math.PI/7));

//draws the paths created above
   ctx.strokeStyle = "#000000";
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.fillStyle = "#000000";
   ctx.fill();
}

function drawDecision(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var stgx = (kex-darix)/2;
   var stgy = (key-dariy)/2;
   
   ctx.beginPath();
   ctx.moveTo(darix+stgx, dariy);
   ctx.lineTo(kex, dariy+stgy);
   ctx.lineTo(darix+stgx, key);
   ctx.lineTo(darix, dariy+stgy);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();
   ctx.strokeStyle = warnax;
   ctx.lineWidth = 2;
   ctx.stroke();
   ctx.moveTo((kex-darix)/2, key);
}
function drawProcess(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   
   ctx.beginPath();
   ctx.moveTo(darix, dariy);
   ctx.lineTo(kex, dariy);
   ctx.lineTo(kex, key);
   ctx.lineTo(darix, key);
   ctx.closePath();
   
   ctx.fillStyle = warnay;
   ctx.fill();

ctx.strokeStyle = warnax;
   ctx.lineWidth = 2; 
   ctx.stroke();
}

function drawTerminal(n, darix, dariy, kex, key, warnax, warnay){
   //variables to be used
   var c = document.getElementById(n);
   var ctx = c.getContext("2d");
   var jar = (key - dariy)/2;
   
   ctx.moveTo(darix, dariy);
   ctx.beginPath();
   ctx.arc(darix+jar,key-jar,jar,0.5*(Math.PI),1.5*(Math.PI));
   ctx.lineTo(kex-jar, dariy);
   ctx.arc(kex-jar,key-jar,jar,1.5*(Math.PI),0.5*(Math.PI));
   ctx.closePath();