Aplikasi di atas adalah aplikasi untuk transliterasi Aksara Bali. Mungkin dalam berbagai hal aplikasi ini masih memerlukan pembenahan.
Komentar, masukan, saran, kritik dan sebagainya dari anda sangat diharapkan. Selamat mencoba.

Terima Kasih

Sebagai lanjutan dari tulisan sebelumnya masih mengenai Canvas dalam HTML5, berikut kita membahas mengenai Fill dan Gradasi (Gradient). Tentu kita hanya menggunakan fungsi2 bawaan HTML5 untuk mengelola canvas. Hasil akhir dari pelajaran kita hari ini kira2 seperti gambar berikut :

HTML5 Canvas Fill and Gradient

Langkah2nya pembuatannya masih sama mulai dari mempersiapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :

<canvas id="canvasku" width="300" height="300"></canvas>

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Selanjutnya rujuk ke file JS atau tambahkan tag <script></script> yang berisi code berikut

var canvas=document.getElementById('canvasku');
var context=canvas.getContext('2d');

/* SOLID */
//kotak 1
context.beginPath();
context.rect(10, 10, 80, 40);
context.fillStyle = 'lime';
context.fill();

//kotak 2
context.beginPath();
context.rect(100, 10, 80, 40);
context.strokeStyle = 'green';
context.stroke();

//kotak 3
context.beginPath();
context.rect(190, 10, 80, 40);
context.fillStyle = 'lime';
context.strokeStyle = 'green';
context.fill();
context.stroke();

/* LINEAR GRADIENT */
//kotak 4
context.beginPath();
var grdf = context.createLinearGradient(10, 3, 10+80, 3); //x1,y1,x2,y2
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.rect(10, 60, 80, 40);
context.fillStyle = grdf;
context.fill();

//kotak 5
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');   
grdl.addColorStop(1, '#f65');
context.rect(100, 60, 80, 40);
context.strokeStyle = grdl;
context.stroke();

//kotak 6
context.beginPath();
var grdl = context.createLinearGradient(3, 60, 3, 100);
grdl.addColorStop(0, '#865');   
grdl.addColorStop(1, '#f65');
var grdf = context.createLinearGradient(190, 3, 190+80, 3);
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.rect(190, 60, 80, 40);
context.fillStyle = grdf;
context.fill();
context.strokeStyle = grdl;
context.lineWidth = 5;
context.stroke();

//garis bantu
circles([[3, 60],[3, 100]]);
lines([[3, 60],[3, 100]],grdl);
circles([[190, 3],[190+80, 3]]);
lines([[190, 3],[190+80, 3]],grdf);

/* RADIAL GRADIENT */
//lingkaran 1
context.beginPath();
var grdf = context.createRadialGradient(40, 140, 0, 40, 140, 30); //circle1x,circle1y,circle1radius,circle2x,circle2y,circle2radius,
grdf.addColorStop(0, '#234');   
grdf.addColorStop(1, '#23e');
context.arc(40, 140, 30, 0, 2 * Math.PI, false); //lingkaran
context.fillStyle = grdf;
context.fill();

//lingkaran 2
context.beginPath();
var grdf = context.createRadialGradient(110, 140, 20, 110, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(110, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

//lingkaran 3
context.beginPath();
var grdf = context.createRadialGradient(180, 140, 0, 180, 140, 50);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(180, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

//lingkaran 4
context.beginPath();
var grdf = context.createRadialGradient(250, 110, 0, 250, 140, 30);
grdf.addColorStop(0, '#234');
grdf.addColorStop(1, '#23e');
context.arc(250, 140, 30, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

/* KOMBINASI */
//lingkaran besar
context.beginPath();
var grdlin = context.createLinearGradient(0, 235-65, 0, 235+65);
grdlin.addColorStop(0, '#23e');   
grdlin.addColorStop(1, '#234');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdlin;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145+20, 235+80, 0, 145+20, 235+80, 130);
grdf.addColorStop(0, 'rgba(255,255,255,0.7)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();
context.beginPath();
var grdf = context.createRadialGradient(145-10, 235-40, 0, 145-10, 235-40, 90);
grdf.addColorStop(0, 'rgba(255,255,255,0.9)');
grdf.addColorStop(1, 'rgba(255,255,255,0)');
context.arc(145, 235, 65, 0, 2 * Math.PI, false);
context.fillStyle = grdf;
context.fill();

/* fungsi tambahan */
function circles(a,color){
  color=color||'rgba(0,0,0,0.5)';
  for (var i=0; i<a.length; i++ ){
    context.beginPath();
    context.arc(a[i][0], a[i][1], 3, 0, 2 * Math.PI, false);
    context.fillStyle = color;
    context.fill();
  }
}

function lines(a,color){
  color=color||'rgba(0,0,0,0.5)';
  context.beginPath();
  context.moveTo(a[0][0],a[0][1]);
  for (var i=1; i<a.length; i++ ){
    context.lineTo(a[i][0],a[i][1]);
  }
  context.lineWidth = 1;
  context.strokeStyle = color;
  context.stroke();
}

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Maka hasilnya akan menjadi seperti gambar di atas, atau hasil berikut :

See the Pen Canvas Basic (Fill & Gradient) by Agus Made (@agusmade) on CodePen.

Maaf saya masih males ngasi panduan bertele2 dalam kata2, karna dalam soure code sudah disertai ketarangan tidap bagiannya. Kalo ada yang belum jelas, atau salah, atau usul atau protes, silahkan tulis komen.
Moga pikiran yang baik senantiasa menyertai kita.
Makasih

Canvas dalam HTML5 bukanlah barang baru, namun kebanyakan dari web developer khususnya yang berkutat di HTML5 dan javascript jarang peduli sama hal ini. Mengapa demikian? karena udah banyak library2 javascript yang instan dan mudah digunakan untuk pengelolaan gambar.

Gak peduli apapun alasannya, tahu bagaimana cara ngurusi canvas di HTML5 lebih baik daripada gak tahu sama sekali. Karna sebagian besar library pengelolaan gambar dengan javascript menggunakan object dan fungsi dasar dalam HTML5 canvas.

Dalam Tutorial ini kita akan belajar membuat gambar2 sederhana pada canvas menggunakan fungsi2 bawaan pada canvas. Berikut kira2 penampilan hasil dari apa yang kita lakukan :

HTML5 Canvas Line and Curve

Langkah2nya pembuatannya adalah sebagai berikut :
Pertama siapkan halaman HTML yang berisi tag canvas dalam <body></body> seperti tag berikut :

<canvas id="canvasku" width="400" height="50"></canvas>

See the Pen Canvas Basic (Line & Curve) by Agus Made (@agusmade) on CodePen.

Selanjutnya rujuk ke file JS atau tambahkan tag

yang berisi sintaks berikut :

var canvas=document.getElementById('canvasku');
var context=canvas.getContext('2d');

/* GARIS (line) */
context.beginPath();
context.moveTo(0,10);
context.lineTo(200,100);
context.stroke();

context.beginPath();
context.moveTo(50,10);
context.lineTo(250,100);
//ukuran garis
context.lineWidth=10;
context.stroke();

context.beginPath();
context.moveTo(100,10);
context.lineTo(300,100);
context.lineWidth=10;
//warna garis
context.strokeStyle = '#ff0000';
context.stroke();

context.beginPath();
context.moveTo(150,10);
context.lineTo(350,100);
context.lineWidth=15;
context.strokeStyle = 'rgba(0,0,255,.5)';
//ujung garis
context.lineCap = 'round';
context.stroke();

/* BUSUR (arc) */
context.beginPath();
context.arc(10, 100, 50, 0, Math.PI/2, false); //x, y, radius, startAngle, endAngle, counterClockwise
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'green';
context.stroke();
circles([[10,100]]); //titik pusat

context.beginPath();
context.moveTo(10, 200)
context.arcTo(50, 200, 50, 180, 20); //x1, y1, x2, y2, radius
context.arcTo(50, 140,100, 190, 15);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'purple';
context.stroke();
circles([[10,200],[50, 200],[50, 180],[50, 140],[100, 190]]); //titik pusat
lines([[10,200],[50, 200],[50, 180],[50, 140],[100, 190]]); //titik pusat

/* KURVA (curve) */
context.beginPath();
context.moveTo(80,110);
context.quadraticCurveTo(100,220,240,110);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'blue';
context.stroke();
circles([[80,110],[100,220],[240,110]]); //titik bantu
lines([[80,110],[100,220],[240,110]]); //garis bantu

context.beginPath();
context.moveTo(140,200);
context.bezierCurveTo(240,260,390,110,240,120);
context.lineWidth = 5;
context.lineCap = 'butt';
context.strokeStyle = 'red';
context.stroke();
circles([[140,200],[240,260],[390,110],[240,120]]); //titik bantu
lines([[140,200],[240,260],[390,110],[240,120]]); //garis bantu

function circles(a,color){
  color=color||'rgba(0,0,0,0.5)';
  for (var i=0; i<a.length; i++ ){
    context.beginPath();
    context.arc(a[i][0], a[i][1], 3, 0, 2 * Math.PI, false);
    context.fillStyle = color;
    context.fill();
  }
}

function lines(a,color){
  color=color||'rgba(0,0,0,0.5)';
  context.beginPath();
  context.moveTo(a[0][0],a[0][1]);
  for (var i=1; i<a.length; i++ ){
    context.lineTo(a[i][0],a[i][1]);
  }
  context.lineWidth = 1;
  context.strokeStyle = color;
  context.stroke();
}
See the Pen Canvas Basic (Line & Curve) by Agus Made (@agusmade) on CodePen.

Maka hasilnya akan menjadi seperti gambar di atas, atau hasil berikut :

See the Pen Canvas Basic (Line & Curve) by Agus Made (@agusmade) on CodePen.

Maaf tidak banyak panduan dalam kata2, karna dalam soure code semua ada keterangannya. Kalo ada yang belum jelas, atau salah, atau usul atau protes, silahkan tulis komen.

Moga pikiran yang baik senantiasa menyertai kita.
Makasih

Sebuah trik mensiasati blogger agar mau memenggal artikel yg terlalu panjang. dan tidak menampilkan semua di halaman utama.
aseli bikinan agusmade

Kayaknya ini sangat penting dan banyak sekali para blogger mengharapkan fitur ini difasilitasi oleh blogger, tapi entah mengapa blogger belum memfasilitasinya. Kalo pada wordpress kita cukup memberi tag html sederhana seperti ini :

 <!--more-->

sedangkan diblogger gak ada.
Tapi jangan kecewa dulu, artikel ini saya post untuk menangani masalah ini. Setelah saya telusuri helpnya blogger, akhirnya saya ketemu cara (baca: akal-akalan) yang disarankan untuk melakukannya.

Kita mulai, Pada dasarnya metode ini hanyalah akal-akalan penampilan saja, artinya tulisan lengkap hanya tidak di tampilkan, bukan tidak ada. Namun setidaknya dapat mengatasi masalah capek-nya pengguna hanya untuk menggulung layar di halaman utama blog anda hanya untuk melihat 5 sampai 10 blog yang tampil, dihalaman utama.
Pengguna hanya akan melihat summary pada setiap post yg ada dihalaman utama dan dapat membaca selengkapnya tulisan tersebut pada halaman terpisah, hanya dengan mengklik tulisan "Baca Selengkapnya!",
Bagaimana cara membuatnya?

Berikut adalah langkah demi langkah melakukan hal ini :

Edit CSS template blog anda
Setelah anda login diblogger Pilih seting TataLetak | trus Edit HTML (ini kalo blogger anda disetting Bahasa Indonesia, kalo nggak cari aja link yang maksudnya sama), setelah itu, untuk jaga-jaga jangan lupa backup dulu template anda dengan mengklik tulisan Download Template Lengkap lalu simpan. seandainya ada kesalahan dalam utak-atik, anda dapat menguploadnya kembali.

beri tanda Cek pada CheckBox "Expand Template Widget" biar semuanya kelihatan.
terus cari tulisan
</head>
lalu ketikkan kode beriku ini diatasnya:

 <style>
  <b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
  <b:else/>
   span.fullpost {display:none;}
  </b:if>
 </style>

tujuannya adalah mengatur kondisi penampilan pada keadaan : jika hanya artikel tersebut yang ditampilkan maka bagian yang ada didalam "span" dengan "class=fullpost" akan ditampilkan, selain itu tidak.

Tambahkan Link pada Tiap Akhir Artikel di halaman Utama
selanjutnya cari tulisan :
<data:post.body/>
ketikan kode berikut dibawahnya :

 <b:if cond='data:blog.pageType != "item"'>
  <a expr:href='data:post.url' target='_blank'>Baca Selengkapnya !</a>
 </b:if>

tujuannya adalah tulisan "Baca Selengkapnya !" -- yang bisa di klik untuk membaca artikel selengkapnya --, pada setiap akhir artikel dihalaman utama.
Selanjutnya simpan template anda dengan mengkli tombol "SIMPAN TEMPLATE".

Edit Semua Post yang ingin dipenggal
Nah, ini adalah bagian yang paling menyebalkan.
kita harus mengedit setiap Artikel yang sudah kita kirim untuk menentukan sampai dimana summary artikel kita.
Lakukan pengeditan berikut dalam mode HTML.

Tentukan bagian pemenggalan artile anda, dan beri tag berikut :

 Ini adalah contoh bagian summary artikel 
 dan akan tampil di halaman utama.
 <span class=fullpost>
  Dan ini adalah kelanjutan-nya, 
  dan bagian ini tidak akan tampil di halaman utama
 </span>

Perhatikan kode di atas, bagian yang ada dibuka dengan "<span class=fullpost>" dan ditutup dengan "</span>" tidak akan tampil pada halaman utama.

Saat pengguna meng-klik tulisan Baca Selengkapnya! maka web akan membuka window baru dan menampilkan seluruh artikel.
Sudah selesai, ohya, Anda dapat memodifikasinya, misalnya hilangkan tulisan target='_blank' biar tidak selalu membuka window baru, atau ganti tulisan "Baca Selengkapnya!" dengan kata2 lain sesuai selera.

Artikel ini sudah saya coba di sini dan berhasil. selamat mencoba.

Terima kasih
Agus Made K http://agusmade.blogspot.com

 

Sejak kemunculannya tahun 2005, webblogku dengan penampilannya yang sangat klasik, bosen juga akhirnya. Biar gak dianggap kurang peduli pada pengunjung yg mulai membludak, tak ganti tampilannya agar lebih enak dilihat dan dibaca. Oya, theme ini saya dapat dari themelib.com

Beberapa gadget dah ditambah, seperti track recent visitor, top tags dan tools yang mungkin berguna bagi teman-teminku smua seperti pencarian artikel internal blog (pake google), google translator, currency converter dan lain2. dan iklan2 yg hanya ngabis2in bandwidth sudah mulai dihapuskan. Liat aja disebelah kanan.
Dengan sedikit pertimbangan beberapa news feed dan shout box masih dipertahankan, siapa tau berguna.

Tapi untuk sementara saya belum sempat menanggapi beberapa email dan shout yang masuk... sorry bgt, masih agak sibuk, nih.

Semoga perubahan ini menambah kenyamanan kita semua untuk tetap mencerdaskan kehidupan bangsa melalui berbagi ilmu lewat blog.


teng kyu paramex... :-)

Agus Made (http://agusmade.blogspot.com)
aseli bikkinan agus made

Untuk berbagai kepentingan, kita sering memerukan aplikasi praktis dan simple untuk menggantikan aktivitas mudah, sangat sering dilakukan namun cukup memakan waktu.
Sebagai contoh membersihkan file2 yg tidak berguna dari project directory, meng-compile source code, konversi data/file, hide/unhide folder dan seluruh strukturnya, mempublish web via ftp dan masih banyak lagi aktivitas rutin dan mudah yang menyita banyak energi.

Untuk kepentingan ini saya sering menggunakan batch file (*.bat -- yang berisi kumpulan perintah dos, atau command line terhadap program) untuk melakukannya. kalo perlu saya membuat sebuah aplikasi yang mendukung command line (sudah tentu dg delphi), untuk kemudian saya panggil melalui batch file.

Sesungguhnya selain batch file, masih ada Windows Scripting Host (WSH) dan Powershell (untuk dot net). dua yg terkhir ini lebih kompleks dan mendukung GUI (Graphical User Interface) sederhana.
Aktivitas Mengetik daftar berintah baris demi baris pada sebuah file yang nantinya file tersebut melakukan aktivitas pengganti pekerjaan tangan yg menjemukan kita sebut saja sebagai Batch Programming (saya lupa dapat istilah ini dari mana).

berikut adalah gambaran bagaimana bekerjanya Batch File dan WSH


moga suatu waktu kita sempat membahas lebih detail tentang Batch Programming. untuk sementara saya berikan beberapa link yang mungkin berguna untuk dijadikan referinsi, antara lain :
An A-Z Index of the Windows XP command line
DOS Command Index
Batch Scripts for Windows
Windows PowerShell Blog
PowerShell.com ==> Script Library

semoga bermanfaat
Agus Made K (http://agusmade.blogspot.com)
aseli bikinan agus made
Seperti biasa, saya berasumsi anda sudah mengenal CorelDraw (sebuah aplikasi pengolah gambar berbasis vektor yg lumayan terkenal). Seandainya anda belum mengenalnya, sangat saya sayangkan tulisan ini bukan untuk anda.

Langsung saja, siapkan alat dan bahan sebagai berikut :
1. Aplikasi CorelDraw yang mendukung VBA (saya menggunakan CorelDraw 12)
2. Aplikasi AdobePhotoshop (opsional)
3. Secangkir Kopi (kalo anda ngopi), sebatang rokok (kalo memang perokok). kalo nggak ada, beli di warung sebrang jalan.

Langkahnya sangat sederhana, mudah, cepat dan hasilnya keren. Bermula dari jalankan CorelDraw. Buka VisualBasic Editor-nya (cek menu Tools|VisualBasic|VisualBasic Editor...) Pastikan Project Explorernya tampil, kalo belum cek menu View|Project Explorer. DoubleClick "ThisDocument" pada Project Explorer (VBAProject|CorelDraw12 Objects). Lalu ketik (atau copy-paste) script berikut pada Code Editor-nya:

Sub latihan()
Dim sa As Shape
For i = 1 To 300
Set sa = ActiveLayer.CreateArtisticText((Rnd() * 100) / 10, (Rnd() * 80) / 10,"Agus Made Krisna Parta", _
cdrEnglishUS, , "Arial", (Rnd() * 200) / 10 + 4, cdrTrue, cdrTrue, , cdrLeftAlignment)
sa.Transparency.ApplyUniformTransparency Rnd() * 100
Next i
End Sub


Kalo udah, Tutup VisualBasic Editor dan kembali ke Corel. lalu jalankan Script Anda (Pilih menu Tools|VisualBasic|Play..., pilih "latihan"|Run)
Tunggu sebentar, dan Lihat hasilnya... wow menakjubkan!!! keren khan?
Biar lebih keren SelectAll terus beri warna (misalnya Biru), export ke *.psd, buka di Photoshop, beri latar hitam dan hasilnya akan tampak seperti gambar di atas.


Hehe... saya rasa sudah cukup bikin 'sakit kepala' para pengguna CorelDraw dan Photoshop yg Konvensional. Untuk informasi lebih lengkap soal VBA pada CorelDraw silahkan pencet F1 dari VisualBasic Editor-nya. oke...

dan berikut adalah contoh2 hasil utak-atik VBA pada CorelDraw yg dan saya beri sentuhan akhir dengan Photoshop:





Terima kasih
Agus Made K (http://agusmade.blogspot.com)

GPS adalah Global Positioning System, merupakan sebuah system penanda lokasi tertentu berdasar Koordinat Bumi. Moga suatu saat kita bisa bahas lebih detail tentang system ini. untuk sementara berikut adalah contoh Aplikasi yg sudah saya bikin, guna mengelola data GPS.

Karena software ini masih langkah awal dan hanya untuk kepentingan teman-teman yg baru sibuk dimojokerto saja, jadi kayaknya perlu banyak pembenahan:

kali ini baru satu kali mengalami pembenahan, pada:
1. Handle Track Log.
2. Auto renaming symbol, (Oya Pak Adi jangan lupa cek Setting dulu sebelum buka file pertama kali, biar sampean gak bingung)
3. Memory Lack, untuk data banyak (sekarang dah lebih kuat dari excel)

Pak Pur, Pak Adi atau Fu'ah silahkan download lagi aja softwarenya :
Klik di sini untuk download yg baru, sedangkan

yang lama klik ini. terima kasih.

More

Mengenai Saya

Foto Saya

Seperti orang2 pada umumnya.

Label

3D (1) blogger (1) Canvas (2) cerita pribadi (4) cms (1) coreldraw (1) delphi (6) freeware (1) GLScene (1) gps (1) HTML5 (2) humor (1) library (1) mysql (4) OLE/DDE (1) online tools (1) oop (2) OpenGL (1) photoshop (2) php (1) PJU (2) project (4) referensi (1) software (8) tamzbackup (1) tutorial dasar (8) zeos (3)