Update app.py

app.py

@@ -114,13 +114,40 @@ def pack_banners(df: pd.DataFrame, roll_width: float, margin: float,
         orig_w, orig_h = original_dims[r.rid]
         is_rotated = round(r.width - margin, 3) != round(orig_w, 3)
 
+                # --- Koordinat OUTER (banner + margin) ---
         x0 = r.x * px_per_unit
-        # sumbu Y dibalik supaya (0,0) tampil di kiri-atas seperti lembar cetak
         y0 = (used_height - r.y - r.height) * px_per_unit
         x1 = (r.x + r.width) * px_per_unit
         y1 = (used_height - r.y) * px_per_unit
 
-        draw.rectangle([x0, y0, x1, y1], fill=color, outline="black", width=2)
+        # --- Koordinat INNER (banner asli, margin disamakan ke 4 sisi) ---
+        m = margin * px_per_unit
+        ix0, iy0 = x0 + m / 2, y0 + m / 2
+        ix1, iy1 = x1 - m / 2, y1 - m / 2
+
+        # --- Warna ---
+        base_label = r.rid.rsplit("#", 1)[0]
+        color = generate_color(base_label)
+
+        # Buat warna lebih terang untuk area margin (outer)
+        def lighten(c, factor=0.4):
+            return tuple(min(255, int(v + (255 - v) * factor)) for v in c)
+
+        outer_color = "#f0f0f0"   # abu-abu terang
+        inner_color = color        # warna banner
+
+
+        # --- Gambar OUTER (margin area) ---
+        draw.rectangle([x0, y0, x1, y1], fill=outer_color, outline="black", width=2)
+
+        # --- Gambar INNER (banner asli) ---
+        # Pastikan inner tidak lebih kecil dari 1 pixel
+        if ix1 > ix0 and iy1 > iy0:
+            draw.rectangle([ix0, iy0, ix1, iy1], fill=inner_color, outline="black", width=1)
+
+        # --- Deteksi rotasi ---
+        orig_w, orig_h = original_dims[r.rid]
+        is_rotated = round(r.width - margin, 3) != round(orig_w, 3)
 
         label_text = base_label
         size_text = f"{orig_w:g} x {orig_h:g}" + (" (diputar)" if is_rotated else "")