Contoh Penggunaan SmilesDrawer di Blogger

Berikut contoh penggunaan Smiles Drawer yang diterapkan dalam postingan blogger. Tujuannya agar ketika akan menampilkan struktur molekul 2D dapat langsung disisipkan dalam tulisan, tidak perlu menyisipkan sebagai gambar. Untuk uji coba dapat langsung menggunakan aplikasi online yang tersedia di sini.

Contoh-1: struktur etana (C2, test sederhana):

Kode yang digunakan:
<canvas data-smiles="CC" id="canvas1"></canvas>

---

Contoh-2: struktur alkohol dengan jumlah C sebanyak 5 (1-Pentanol):

Kode yang digunakan:
<canvas data-smiles="CCCCCO" id="canvas2"></canvas>

---

Contoh-3: struktur oktanol (C8, panjang):

Kode yang digunakan:
<canvas data-smiles="CCCCCCCCO" id="canvas3"></canvas>

---

Contoh-4: struktur asam sulfat (H2SO4):

Kode yang digunakan:
<canvas data-smiles="[H]OS(=O)(=O)O[H]" id="canvas4"></canvas>

---

Contoh-5: struktur bezena (C6H6):

Kode yang digunakan:
<canvas data-smiles="C1=CC=CC=C1" id="canvas5"></canvas>

---

Contoh-6: struktur 3,5-dimetilfenol:

Kode yang digunakan:
<canvas data-smiles="Oc1cc(C)cc(C)c1" id="canvas6"></canvas>

---

Contoh-7: struktur metil salisilat:

Kode yang digunakan:
<canvas data-smiles="COC(=O)C1=CC=CC=C1O" id="canvas7"></canvas>

---

Kode utama yang harus dipasang dalam page/postingan blogger sebagai berikut.

<style>
  canvas { max-width: 100%; height: auto; margin: -40px 0;} /* Responsive di Blogger */
</style>

<script src="https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js"></script>
<script>
  window.onload = function() {
    const baseOptions = {
      fontSize: 24, // Seragam dengan teks artikel
      bondThickness: 1, // Garis proporsional
      compactDrawing: false,
      explicitHydrogens: true,
      terminalCarbons: true,
      atomVisualization: 'default',
      drawImplicitHydrogens: true,
      padding: 10
    };

    const pixelsPerBond = 50; // Estimasi pixels per bond untuk canvas fleksibel (tweak 30-50 kalau perlu)

    const canvases = document.querySelectorAll('canvas[data-smiles]');
    canvases.forEach(function(canvas) {
      const smiles = canvas.getAttribute('data-smiles').trim();
      if (!smiles) {
        canvas.width = 200;
        canvas.height = 50;
        const ctx = canvas.getContext('2d');
        ctx.font = '16px Arial';
        ctx.fillText('No SMILES provided', 10, 20);
        return;
      }

      SmilesDrawer.parse(
        smiles,
        function(tree) {
          // Estimasi dimensi kasar berdasarkan panjang SMILES
          const bondCount = smiles.length * 0.5; // Asumsi 1 bond ~2 chars (kasar)
          const newWidth = Math.min(Math.ceil(bondCount * pixelsPerBond + 2 * baseOptions.padding), 800);
          const newHeight = Math.min(Math.ceil(2 * pixelsPerBond + 2 * baseOptions.padding), 200); // Tinggi fixed untuk linear

          canvas.width = newWidth;
          canvas.height = newHeight;

          const options = { ...baseOptions, width: newWidth, height: newHeight };
          const smilesDrawer = new SmilesDrawer.Drawer(options);

          smilesDrawer.draw(tree, canvas.id, "light", false);
        },
        function(err) {
          canvas.width = 200;
          canvas.height = 50;
          const ctx = canvas.getContext('2d');
          ctx.font = '16px Arial';
          ctx.fillText('Invalid SMILES: ' + smiles, 10, 20);
        }
      );
    });
  };
</script>

---