Soften the support step 2
📦 BAMU LAB
✨ The Prompt Phrase
Under the Prepare tab, navigate to the Strength section (one of five sections, located next to Quality). Set Bottom shell layer to 5 and Sparse infill density to 20. The defaults are 3 and 15, respectively.
💻 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 - Strength Settings</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;
position: relative;
}
.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;
display: flex;
align-items: center;
gap: 4px;
}
.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;
font-weight: 600;
}
.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;
position: relative;
}
.form-row.highlighted {
background: #fff3e0;
padding: 8px;
margin-left: -8px;
margin-right: -8px;
border-radius: 4px;
border: 2px solid #ff9800;
}
.form-label {
color: #555;
flex: 1;
}
.form-label.highlight {
color: #ff5722;
font-weight: 600;
}
.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;
font-weight: 600;
}
.form-input:focus {
outline: none;
border-color: #00c853;
box-shadow: 0 0 0 2px rgba(0, 200, 83, 0.2);
}
.form-select {
width: 120px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 11px;
}
.checkbox {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: #00c853;
}
.unit {
color: #999;
font-size: 10px;
}
.expand-icon {
cursor: pointer;
user-select: none;
}
.pattern-preview {
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 2px;
background: repeating-linear-gradient(
45deg,
#333,
#333 2px,
transparent 2px,
transparent 4px
);
}
/* Arrow Pointer Styles */
.arrow-pointer {
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 5px;
color: #ff5722;
font-weight: bold;
font-size: 14px;
animation: pulse 1.5s ease-in-out infinite;
}
.arrow-pointer::before {
content: '←';
font-size: 24px;
color: #ff5722;
}
@keyframes pulse {
0%, 100% {
transform: translateY(-50%) translateX(0);
}
50% {
transform: translateY(-50%) translateX(-5px);
}
}
.arrow-label {
background: #ff5722;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
}
</style>
</head>
<body>
<div class="container">
<!-- Top Bar -->
<div class="top-bar">
<button class="menu-btn">☰ File <span style="font-size: 10px;">▼</span></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 active">Strength</div>
<div class="settings-tab">Speed</div>
<div class="settings-tab">Support</div>
<div class="settings-tab">Others</div>
</div>
<!-- Settings Content -->
<div class="settings-content">
<!-- Infill Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Infill</span>
</div>
<div class="form-row">
<label class="form-label">Detect thin wall</label>
<input type="checkbox" class="checkbox">
</div>
</div>
<!-- Top/Bottom Shells Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Top/bottom shells</span>
</div>
<div class="form-row">
<label class="form-label">Top surface pattern</label>
<div class="form-control">
<div class="pattern-preview"></div>
<select class="form-select">
<option>Monotoni...</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Top shell layers</label>
<div class="form-control">
<input type="number" class="form-input" value="5">
</div>
</div>
<div class="form-row">
<label class="form-label">Top shell thickness</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">Top paint penetration layers</label>
<div class="form-control">
<input type="number" class="form-input" value="5">
</div>
</div>
<div class="form-row">
<label class="form-label">Bottom surface pattern</label>
<div class="form-control">
<div class="pattern-preview"></div>
<select class="form-select">
<option>Monotonic</option>
</select>
</div>
</div>
<div class="form-row highlighted">
<label class="form-label highlight">Bottom shell layers</label>
<div class="form-control">
<input type="number" class="form-input highlight" id="bottomShellLayers" value="5">
</div>
<div class="arrow-pointer">
<span class="arrow-label">EDIT THIS!</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Bottom shell thickness</label>
<div class="form-control">
<input type="number" class="form-input" value="0">
<span class="unit">mm</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Bottom paint penetration layers</label>
<div class="form-control">
<input type="number" class="form-input" value="3">
</div>
</div>
<div class="form-row">
<label class="form-label">Internal solid infill pattern</label>
<div class="form-control">
<div class="pattern-preview"></div>
<select class="form-select">
<option>Rectilinear</option>
</select>
</div>
</div>
</div>
<!-- Sparse Infill Section -->
<div class="subsection">
<div class="subsection-title">
<span class="expand-icon">▼</span>
<span>Sparse infill</span>
</div>
<div class="form-row highlighted">
<label class="form-label highlight">Sparse infill density</label>
<div class="form-control">
<input type="number" class="form-input highlight" id="sparseInfillDensity" value="20">
<span class="unit">%</span>
</div>
<div class="arrow-pointer">
<span class="arrow-label">EDIT THIS!</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Fill multiline</label>
<div class="form-control">
<input type="number" class="form-input" value="1">
</div>
</div>
<div class="form-row">
<label class="form-label">Sparse infill pattern</label>
<div class="form-control">
<div class="pattern-preview"></div>
<select class="form-select">
<option>Grid</option>
</select>
</div>
</div>
<div class="form-row">
<label class="form-label">Length of sparse infill anchor</label>
<div class="form-control">
<input type="text" class="form-input" value="400%">
<span class="unit">mm or %</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Maximum length of sparse infill anchor</label>
<div class="form-control">
<input type="number" class="form-input" value="20">
<span class="unit">mm or %</span>
</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">Infill/Wall overlap</label>
<div class="form-control">
<input type="number" class="form-input" value="15">
<span class="unit">%</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Infill direction</label>
<div class="form-control">
<input type="number" class="form-input" value="45">
<span class="unit">°</span>
</div>
</div>
<div class="form-row">
<label class="form-label">Bridge direction</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">Minimum sparse infill threshold</label>
<div class="form-control">
<input type="number" class="form-input" value="15">
<span class="unit">mm²</span>
</div>
</div>
</div>
</div>
</div>
<script>
// Make the highlighted inputs more interactive
const bottomShellInput = document.getElementById('bottomShellLayers');
const sparseInfillInput = document.getElementById('sparseInfillDensity');
// Add focus effect
[bottomShellInput, sparseInfillInput].forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.parentElement.style.boxShadow = '0 0 10px rgba(255, 87, 34, 0.5)';
});
input.addEventListener('blur', function() {
this.parentElement.parentElement.style.boxShadow = 'none';
});
});
</script>
</body>
</html>
Live Preview