Soften the support step 1
📦 BAMU LAB
✨ The Prompt Phrase
To soften the support, check that "enable support" is selected in the image, then set the top Z distance to 0.4 or 0.5 to create a softer connection between the support and the product.You will find this in the support section in the bamboo under Prepare Tab
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Printer Slicer Interface</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size: 12px;
color: #333;
background: #f5f5f5;
}
.container {
width: 320px;
background: white;
height: 100vh;
overflow-y: auto;
}
.top-bar {
background: #2d2d2d;
padding: 8px;
display: flex;
gap: 8px;
align-items: center;
}
.menu-btn {
color: white;
background: none;
border: none;
padding: 4px 8px;
cursor: pointer;
font-size: 12px;
}
.icon-btn {
color: white;
background: none;
border: none;
padding: 6px;
cursor: pointer;
}
.tabs {
display: flex;
background: #3d3d3d;
}
.tab {
flex: 1;
padding: 10px;
text-align: center;
color: white;
cursor: pointer;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.tab.active {
background: #00c853;
}
.printer-header {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}
.printer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
.printer-card {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 8px;
text-align: center;
cursor: pointer;
position: relative;
}
.printer-card.active::before {
content: '';
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
background: #00c853;
border-radius: 50%;
}
.printer-icon {
width: 50px;
height: 50px;
background: #555;
margin: 0 auto 6px;
border-radius: 4px;
}
.printer-name {
font-size: 11px;
}
.nozzle-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
.nozzle-config {
position: relative;
padding-top: 12px;
}
.nozzle-config::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #00c853;
}
.nozzle-label {
font-size: 10px;
color: #666;
margin-bottom: 4px;
}
.nozzle-info {
font-size: 11px;
margin-bottom: 2px;
}
.section-header {
padding: 10px 12px;
background: #f8f8f8;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.section-icons {
display: flex;
gap: 6px;
}
.small-icon-btn {
width: 20px;
height: 20px;
border: 1px solid #ccc;
background: white;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.filament-item {
padding: 10px 12px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #e0e0e0;
}
.warning-icon {
color: #ffa000;
font-weight: bold;
}
.filament-swatch {
width: 14px;
height: 14px;
background: #ffeb3b;
border-radius: 50%;
border: 1px solid #ddd;
}
.process-header {
padding: 10px 12px;
background: #f8f8f8;
border-bottom: 1px solid #e0e0e0;
display: flex;
gap: 8px;
align-items: center;
}
.process-tabs {
display: flex;
gap: 6px;
}
.process-tab {
padding: 4px 12px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 11px;
}
.process-tab.active {
background: #00c853;
color: white;
}
.process-tab.inactive {
background: #e0e0e0;
color: #666;
}
.profile-selector {
padding: 10px 12px;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
}
.settings-tabs {
display: flex;
border-bottom: 2px solid #e0e0e0;
padding: 0 12px;
}
.settings-tab {
padding: 10px 16px;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
font-size: 11px;
}
.settings-tab.active {
border-bottom-color: #ff5722;
color: #ff5722;
}
.settings-content {
padding: 12px;
}
.subsection {
margin-bottom: 16px;
}
.subsection-title {
font-weight: 600;
font-size: 11px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
gap: 6px;
}
.form-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 11px;
}
.form-label {
color: #555;
flex: 1;
}
.form-label.highlight {
color: #ff5722;
}
.form-control {
display: flex;
align-items: center;
gap: 4px;
}
.form-input {
width: 60px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 11px;
text-align: right;
}
.form-input.highlight {
border-color: #ff5722;
background: #fff3f0;
}
.form-select {
width: 120px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 11px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 6px;
}
.checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #00c853;
}
.unit {
color: #999;
font-size: 10px;
}
.toggle-switch {
width: 40px;
height: 20px;
background: #00c853;
border-radius: 10px;
position: relative;
cursor: pointer;
}
.toggle-switch::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
top: 2px;
right: 2px;
transition: 0.3s;
}
.expand-icon {
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<!-- Top Bar -->
<div class="top-bar">
<button class="menu-btn">☰ File</button>
<button class="icon-btn">📁</button>
<button class="icon-btn">←</button>
<button class="icon-btn">→</button>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab active">
<span>✓</span> Prepare
</button>
<button class="tab">
<span>👁</span> Preview
</button>
<button class="tab">
<span>📱</span> Device
</button>
</div>
<!-- Printer Header -->
<div class="printer-header">
<span>🖨 Printer</span>
<button class="small-icon-btn">⚙</button>
</div>
<!-- Printer Selection -->
<div class="printer-grid">
<div class="printer-card active">
<div class="printer-icon"></div>
<div class="printer-name">Bambu Lab H2D</div>
</div>
<div class="printer-card">
<div class="printer-icon"></div>
<div class="printer-name">Texture...</div>
</div>
<div class="printer-card">
<div class="printer-icon"></div>
<div class="printer-name">Sync info</div>
</div>
</div>
<!-- Nozzle Configuration -->
<div class="nozzle-section">
<div class="nozzle-config">
<div class="nozzle-label">Left Nozzle</div>
<div class="nozzle-info">AMS Not installed</div>
<div class="nozzle-info">Diameter: 0.4</div>
<div class="nozzle-info">Flow: Standard</div>
</div>
<div class="nozzle-config">
<div class="nozzle-label">Right Nozzle</div>
<div class="nozzle-info">AMS Not installed</div>
<div class="nozzle-info">Diameter: 0.4</div>
<div class="nozzle-info">Flow: Standard</div>
</div>
</div>
<!-- Project Filaments -->
<div class="section-header">
<span>📦 Project Filaments</span>
<div class="section-icons">
<button class="small-icon-btn">+</button>
<button class="small-icon-btn">−</button>
<button class="small-icon-btn">⟳</button>
<button class="small-icon-btn">⚙</button>
</div>
</div>
<div class="filament-item">
<span class="warning-icon">⚠</span>
<div class="filament-swatch"></div>
<span>■ PLA Glow</span>
</div>
<!-- Process Settings -->
<div class="process-header">
<span>⚙ Process</span>
<div class="process-tabs">
<button class="process-tab active">Global</button>
<button class="process-tab inactive">Objects</button>
</div>
<button class="small-icon-btn">Advanced</button>
</div>
<!-- Profile Selector -->
<div class="profile-selector">
<span class="expand-icon">▼</span>
<span>* 0.20mm Standard @BBL H2D</span>
</div>
<!-- Settings Tabs -->
<div class="settings-tabs">
<div class="settings-tab">Quality</div>
<div class="settings-tab">Strength</div>
<div class="settings-tab">Speed</div>
<div class="settings-tab active">Support</div>
<div class="settings-tab">Others</div>
</div>
<!-- Settings Content -->
<div class="settings-content">
<!-- Support Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Support</span>
</div>
<div class="form-row">
<label class="form-label">Enable support</label>
<div class="form-control">
<div class="toggle-switch"></div>
<input type="checkbox" class="checkbox" id="enableSupport" checked>
</div>
</div>
<div class="form-row">
<label class="form-label">Type</label>
<div class="form-control">
<select class="form-select">
<option>tree(auto)</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Style</label>
<div class="form-control">
<select class="form-select">
<option>Default</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Threshold angle</label>
<div class="form-control">
<input type="number" class="form-input" value="30">
<span class="unit">°</span>
</div>
</div>
<div class="form-row">
<label class="form-label">On build plate only</label>
<input type="checkbox" class="checkbox">
</div>
<div class="form-row">
<label class="form-label">Support critical regions only</label>
<input type="checkbox" class="checkbox">
</div>
<div class="form-row">
<label class="form-label">Remove small overhangs</label>
<input type="checkbox" class="checkbox" checked>
</div>
</div>
<!-- Raft Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Raft</span>
</div>
<div class="form-row">
<label class="form-label">Raft layers</label>
<div class="form-control">
<input type="number" class="form-input" value="0">
<span class="unit">layers</span>
</div>
</div>
</div>
<!-- Filament for Supports -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Filament for Supports</span>
</div>
<div class="form-row">
<label class="form-label">Support/raft base</label>
<div class="form-control">
<select class="form-select">
<option>Default</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Support/raft interface</label>
<div class="form-control">
<select class="form-select">
<option>Default</option>
</select>
</div>
</div>
</div>
<!-- Advanced Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Advanced</span>
</div>
<div class="form-row">
<label class="form-label">Initial layer density</label>
<div class="form-control">
<input type="number" class="form-input" value="90">
<span class="unit">%</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Initial layer expansion</label>
<div class="form-control">
<input type="number" class="form-input" value="-1">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Support wall loops</label>
<div class="form-control">
<input type="number" class="form-input" value="-1">
</div>
</div>
<div class="form-row">
<label class="form-label highlight">Top Z distance</label>
<div class="form-control">
<input type="number" class="form-input highlight" id="topZDistance" value="0.4" step="0.1">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Bottom Z distance</label>
<div class="form-control">
<input type="number" class="form-input" value="0.2">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Base pattern</label>
<div class="form-control">
<select class="form-select">
<option>Default</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Base pattern spacing</label>
<div class="form-control">
<input type="number" class="form-input" value="2.5">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Pattern angle</label>
<div class="form-control">
<input type="number" class="form-input" value="0">
<span class="unit">°</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Top interface layers</label>
<div class="form-control">
<input type="number" class="form-input" value="2">
<span class="unit">layers</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Interface pattern</label>
<div class="form-control">
<select class="form-select">
<option>Default</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Top interface spacing</label>
<div class="form-control">
<input type="number" class="form-input" value="0.5">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Normal Support expansion</label>
<div class="form-control">
<input type="number" class="form-input" value="0">
<span class="unit">mm</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Live Preview