Manufacturing Bottleneck Simulator<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n .bottleneck-simulator {\n --primary: #3a6ea5;\n --secondary: #2c8c99;\n --success: #4caf50;\n --warning: #ff9800;\n --danger: #f44336;\n --light-bg: #f8f9fa;\n --card-bg: #ffffff;\n --text: #333333;\n --text-light: #666666;\n --border: #e0e0e0;\n \n max-width: 1000px;\n margin: 40px auto;\n padding: 25px;\n background: var(--light-bg);\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n overflow: hidden;\n border: 1px solid var(--border);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: var(--text);\n }\n \n .simulator-header {\n text-align: center;\n margin-bottom: 25px;\n }\n \n .simulator-header h2 {\n font-size: 1.8rem;\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .simulator-header p {\n color: var(--text-light);\n font-size: 1.1rem;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .industry-selector {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: center;\n margin: 20px 0;\n }\n \n .industry-card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n flex: 1;\n min-width: 140px;\n max-width: 180px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }\n \n .industry-card.active {\n background: #e6f7ff;\n border: 1px solid var(--primary);\n box-shadow: 0 0 0 2px rgba(58, 110, 165, 0.2);\n }\n \n .industry-icon {\n font-size: 1.8rem;\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .industry-title {\n font-size: 1rem;\n color: var(--primary);\n font-weight: 600;\n }\n \n .visualization-section {\n background: var(--card-bg);\n border-radius: 10px;\n padding: 15px;\n border: 1px solid var(--border);\n margin-bottom: 15px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .production-line-container {\n overflow-x: auto;\n padding: 10px 0;\n margin-bottom: 20px;\n }\n \n .production-line {\n display: flex;\n justify-content: space-around;\n align-items: center;\n min-width: 500px;\n padding: 10px 0;\n }\n \n .station {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100px;\n }\n \n .station-icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n background: #f0f8ff;\n border: 2px solid var(--primary);\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .station.bottleneck .station-icon {\n border-color: var(--danger);\n animation: pulse 1.5s infinite;\n background: #ffebee;\n }\n \n .station-label {\n font-size: 0.9rem;\n font-weight: 600;\n text-align: center;\n margin-bottom: 8px;\n color: var(--text);\n }\n \n .station-metrics {\n background: #f8f9fa;\n border-radius: 6px;\n padding: 8px;\n text-align: center;\n font-size: 0.85rem;\n width: 100%;\n border: 1px solid var(--border);\n }\n \n .station-capacity {\n color: var(--primary);\n font-weight: bold;\n }\n \n .station-queue {\n margin-top: 3px;\n font-size: 0.8rem;\n color: var(--text-light);\n }\n \n .buffer {\n width: 60px;\n height: 25px;\n background: #e8f4f8;\n border: 1px dashed var(--secondary);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n font-size: 0.8rem;\n margin: 0 5px;\n color: var(--text-light);\n }\n \n .metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n gap: 12px;\n margin: 20px 0;\n }\n \n .metric-card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 12px;\n text-align: center;\n border: 1px solid var(--border);\n box-shadow: 0 2px 5px rgba(0,0,0,0.03);\n }\n \n .metric-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n color: var(--text);\n }\n \n .metric-value {\n font-size: 1.5rem;\n font-weight: 700;\n margin: 5px 0;\n color: var(--primary);\n }\n \n .metric-label {\n font-size: 0.8rem;\n color: var(--text-light);\n }\n \n .comparison {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n padding-top: 5px;\n border-top: 1px solid var(--border);\n font-size: 0.8rem;\n color: var(--text);\n }\n \n .comparison-value {\n font-weight: 600;\n }\n \n .deterioration {\n color: var(--danger);\n }\n \n .bottleneck-indicator {\n height: 6px;\n background: #e0e0e0;\n border-radius: 3px;\n margin: 12px 0;\n position: relative;\n overflow: hidden;\n }\n \n .indicator-fill {\n height: 100%;\n background: linear-gradient(to right, var(--danger), var(--warning), var(--success));\n border-radius: 3px;\n width: 30%;\n transition: width 1s ease;\n }\n \n .insights-section {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n margin: 20px 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .insights-section h3 {\n color: var(--primary);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .insight-item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin: 10px 0;\n padding: 10px;\n border-radius: 6px;\n background: #f8f9fa;\n }\n \n .insight-icon {\n background: var(--primary);\n color: white;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 2px;\n font-size: 0.8rem;\n }\n \n .insight-content h4 {\n color: var(--primary);\n margin-bottom: 3px;\n font-size: 0.95rem;\n }\n \n .insight-content p {\n font-size: 0.85rem;\n line-height: 1.4;\n color: var(--text);\n }\n \n .control-panel {\n background: var(--card-bg);\n border-radius: 10px;\n padding: 20px;\n margin-top: 20px;\n border: 1px solid var(--border);\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .control-group {\n margin-bottom: 20px;\n }\n \n .control-group h3 {\n color: var(--primary);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .slider-container {\n margin: 10px 0;\n }\n \n .slider-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 6px;\n font-size: 0.85rem;\n color: var(--text);\n }\n \n .slider {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: #e0e0e0;\n border-radius: 3px;\n outline: none;\n }\n \n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--primary);\n cursor: pointer;\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n \n .btn-container {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n }\n \n .btn {\n flex: 1;\n background: var(--primary);\n color: white;\n border: none;\n padding: 10px 15px;\n font-size: 0.9rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n font-weight: 500;\n }\n \n .btn:hover {\n opacity: 0.9;\n transform: translateY(-2px);\n }\n \n .btn.reset {\n background: var(--danger);\n }\n \n .software-impact {\n background: #f0f7ff;\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n margin-top: 20px;\n }\n \n .impact-item {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px 0;\n font-size: 0.85rem;\n color: var(--text);\n padding: 8px;\n border-radius: 4px;\n }\n \n .impact-item i {\n color: var(--primary);\n background: #e6f2ff;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }\n 70% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }\n }\n \n @media (max-width: 767px) {\n .simulator-header h2 {\n font-size: 1.6rem;\n }\n \n .simulator-header p {\n font-size: 1rem;\n }\n \n .industry-card {\n min-width: 120px;\n padding: 12px;\n }\n \n .production-line {\n min-width: 450px;\n }\n \n .station {\n width: 90px;\n }\n \n .station-icon {\n width: 50px;\n height: 50px;\n font-size: 1.3rem;\n }\n \n .buffer {\n width: 50px;\n font-size: 0.7rem;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 480px) {\n .bottleneck-simulator {\n padding: 15px;\n }\n \n .industry-card {\n min-width: 100px;\n padding: 10px;\n }\n \n .btn-container {\n flex-direction: column;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"bottleneck-simulator\">\n <div class=\"simulator-header\">\n <h2>Manufacturing Bottleneck Simulator<\/h2>\n <p>Identify and resolve production bottlenecks in your manufacturing process<\/p>\n <\/div>\n \n <div class=\"industry-selector\">\n <div class=\"industry-card active\" data-industry=\"auto\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-cogs\"><\/i>\n <\/div>\n <div class=\"industry-title\">Automotive<\/div>\n <\/div>\n \n <div class=\"industry-card\" data-industry=\"packaging\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-box-open\"><\/i>\n <\/div>\n <div class=\"industry-title\">Packaging<\/div>\n <\/div>\n \n <div class=\"industry-card\" data-industry=\"food\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-utensils\"><\/i>\n <\/div>\n <div class=\"industry-title\">Food & Beverage<\/div>\n <\/div>\n <\/div>\n \n <div class=\"visualization-section\">\n <div class=\"production-line-container\">\n <div class=\"production-line\" id=\"productionLine\">\n \n <div class=\"station\" data-station=\"1\">\n <div class=\"station-icon\">\n <i class=\"fas fa-cut\"><\/i>\n <\/div>\n <div class=\"station-label\">Preparation<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station1Cap\">15\/min<\/div>\n <div class=\"station-queue\" id=\"station1Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"buffer\" id=\"buffer1\">Buffer: 0<\/div>\n \n \n <div class=\"station\" data-station=\"2\">\n <div class=\"station-icon\">\n <i class=\"fas fa-cogs\"><\/i>\n <\/div>\n <div class=\"station-label\">Processing<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station2Cap\">10\/min<\/div>\n <div class=\"station-queue\" id=\"station2Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"buffer\" id=\"buffer2\">Buffer: 0<\/div>\n \n \n <div class=\"station\" data-station=\"3\">\n <div class=\"station-icon\">\n <i class=\"fas fa-box\"><\/i>\n <\/div>\n <div class=\"station-label\">Packaging<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station3Cap\">20\/min<\/div>\n <div class=\"station-queue\" id=\"station3Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"metrics-grid\">\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <h3>Throughput<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"throughputValue\">42<\/div>\n <div class=\"metric-label\">Units per hour<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"throughputComparison\">32<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-clock\"><\/i>\n <h3>Cycle Time<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"cycleTimeValue\">8.4<\/div>\n <div class=\"metric-label\">Minutes per unit<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"cycleTimeComparison\">12.6<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-pallet\"><\/i>\n <h3>WIP Inventory<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"wipValue\">18<\/div>\n <div class=\"metric-label\">Units in process<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"wipComparison\">32<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-chart-line\"><\/i>\n <h3>OEE<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"oeeValue\">84%<\/div>\n <div class=\"metric-label\">Overall Effectiveness<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"oeeComparison\">62%<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bottleneck-indicator\">\n <div class=\"indicator-fill\" id=\"bottleneckIndicator\" style=\"width: 30%\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"insights-section\">\n <h3><i class=\"fas fa-lightbulb\"><\/i> Actionable Insights<\/h3>\n <div class=\"insight-item\">\n <div class=\"insight-icon\">\n <i class=\"fas fa-cog\"><\/i>\n <\/div>\n <div class=\"insight-content\">\n <h4>Processing Station is the bottleneck<\/h4>\n <p>This station’s capacity is limiting overall throughput. Consider adding resources or implementing automation to increase capacity.<\/p>\n <\/div>\n <\/div>\n <div class=\"insight-item\">\n <div class=\"insight-icon\">\n <i class=\"fas fa-buffer\"><\/i>\n <\/div>\n <div class=\"insight-content\">\n <h4>Optimize buffer before Processing<\/h4>\n <p>Increasing buffer capacity before the bottleneck station will help smooth workflow and prevent downstream starvation.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"control-panel\">\n <div class=\"control-group\">\n <h3><i class=\"fas fa-sliders-h\"><\/i> Production Parameters<\/h3>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Arrival Rate<\/span>\n <span id=\"arrivalRateValue\">8 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"8\" class=\"slider\" id=\"arrivalRateSlider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Preparation Capacity<\/span>\n <span id=\"station1Value\">15 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"15\" class=\"slider\" id=\"station1Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Processing Capacity<\/span>\n <span id=\"station2Value\">10 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"10\" class=\"slider\" id=\"station2Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Packaging Capacity<\/span>\n <span id=\"station3Value\">20 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"20\" class=\"slider\" id=\"station3Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Buffer Capacity<\/span>\n <span id=\"bufferValue\">8 units<\/span>\n <\/div>\n <input type=\"range\" min=\"3\" max=\"20\" value=\"8\" class=\"slider\" id=\"bufferSlider\">\n <\/div>\n \n <div class=\"btn-container\">\n <button class=\"btn\" id=\"simulateBtn\">\n <i class=\"fas fa-play\"><\/i> Run Simulation\n <\/button>\n <button class=\"btn reset\" id=\"resetBtn\">\n <i class=\"fas fa-redo\"><\/i> Reset\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"software-impact\">\n <h3><i class=\"fas fa-chart-line\"><\/i> Software Impact<\/h3>\n <div class=\"impact-item\">\n <i class=\"fas fa-robot\"><\/i>\n <div>Automatically balancing workloads<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-bolt\"><\/i>\n <div>Predicting and preventing failures<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <div>Optimizing material flow<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-brain\"><\/i>\n <div>AI to identify bottlenecks<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Elements\n const arrivalRateSlider = document.getElementById('arrivalRateSlider');\n const station1Slider = document.getElementById('station1Slider');\n const station2Slider = document.getElementById('station2Slider');\n const station3Slider = document.getElementById('station3Slider');\n const bufferSlider = document.getElementById('bufferSlider');\n const simulateBtn = document.getElementById('simulateBtn');\n const resetBtn = document.getElementById('resetBtn');\n \n \/\/ Value displays\n const arrivalRateValue = document.getElementById('arrivalRateValue');\n const station1Value = document.getElementById('station1Value');\n const station2Value = document.getElementById('station2Value');\n const station3Value = document.getElementById('station3Value');\n const bufferValue = document.getElementById('bufferValue');\n \n \/\/ Station capacity displays\n const station1Cap = document.getElementById('station1Cap');\n const station2Cap = document.getElementById('station2Cap');\n const station3Cap = document.getElementById('station3Cap');\n \n \/\/ Queue displays\n const station1Queue = document.getElementById('station1Queue');\n const station2Queue = document.getElementById('station2Queue');\n const station3Queue = document.getElementById('station3Queue');\n const buffer1 = document.getElementById('buffer1');\n const buffer2 = document.getElementById('buffer2');\n \n \/\/ Metrics\n const throughputValue = document.getElementById('throughputValue');\n const cycleTimeValue = document.getElementById('cycleTimeValue');\n const wipValue = document.getElementById('wipValue');\n const oeeValue = document.getElementById('oeeValue');\n \n \/\/ Comparisons\n const throughputComparison = document.getElementById('throughputComparison');\n const cycleTimeComparison = document.getElementById('cycleTimeComparison');\n const wipComparison = document.getElementById('wipComparison');\n const oeeComparison = document.getElementById('oeeComparison');\n \n \/\/ Bottleneck indicator\n const bottleneckIndicator = document.getElementById('bottleneckIndicator');\n \n \/\/ Industry cards\n const industryCards = document.querySelectorAll('.industry-card');\n \n \/\/ Initialize slider values\n updateSliderValues();\n \n \/\/ Update slider value displays\n function updateSliderValues() {\n arrivalRateValue.textContent = `${arrivalRateSlider.value} units\/min`;\n station1Value.textContent = `${station1Slider.value} units\/min`;\n station2Value.textContent = `${station2Slider.value} units\/min`;\n station3Value.textContent = `${station3Slider.value} units\/min`;\n bufferValue.textContent = `${bufferSlider.value} units`;\n \n \/\/ Update station capacities\n station1Cap.textContent = `${station1Slider.value}\/min`;\n station2Cap.textContent = `${station2Slider.value}\/min`;\n station3Cap.textContent = `${station3Slider.value}\/min`;\n }\n \n \/\/ Simulate production using simplified queuing theory\n function simulateProduction() {\n \/\/ Get current values\n const arrivalRate = parseFloat(arrivalRateSlider.value);\n const s1 = parseFloat(station1Slider.value);\n const s2 = parseFloat(station2Slider.value);\n const s3 = parseFloat(station3Slider.value);\n const bufferCapacity = parseFloat(bufferSlider.value);\n \n \/\/ Identify the bottleneck station\n const minCapacity = Math.min(s1, s2, s3);\n const bottleneckStation = s1 === minCapacity ? 1 : \n s2 === minCapacity ? 2 : 3;\n \n \/\/ Calculate throughput (min of arrival rate and bottleneck capacity)\n const TH = Math.min(arrivalRate, minCapacity);\n \n \/\/ Calculate utilizations for each station\n let util1 = TH \/ s1;\n let util2 = TH \/ s2;\n let util3 = TH \/ s3;\n \n \/\/ Calculate queue lengths (simplified)\n const queue1 = Math.round(util1 * 10);\n const queue2 = Math.round(util2 * 15);\n const queue3 = Math.round(util3 * 8);\n \n \/\/ Calculate work in process (queues + items in processing)\n const WIP = queue1 + queue2 + queue3 + 3; \/\/ 3 for items being processed\n \n \/\/ Calculate cycle time (WIP \/ throughput)\n const CT = WIP \/ TH;\n \n \/\/ Calculate OEE (throughput \/ bottleneck capacity)\n const OEE = (TH \/ minCapacity) * 100;\n \n \/\/ Calculate \"Without Software\" scenario\n const TH_ws = TH * 0.85;\n const WIP_ws = WIP * 1.3;\n const CT_ws = CT * 1.4;\n const OEE_ws = OEE * 0.85;\n \n \/\/ Update metrics display\n throughputValue.textContent = Math.round(TH * 60); \/\/ per hour\n cycleTimeValue.textContent = CT.toFixed(1);\n wipValue.textContent = Math.round(WIP);\n oeeValue.textContent = `${OEE.toFixed(0)}%`;\n \n throughputComparison.textContent = Math.round(TH_ws * 60);\n cycleTimeComparison.textContent = CT_ws.toFixed(1);\n wipComparison.textContent = Math.round(WIP_ws);\n oeeComparison.textContent = `${OEE_ws.toFixed(0)}%`;\n \n \/\/ Update queue displays\n station1Queue.textContent = `Queue: ${queue1}`;\n station2Queue.textContent = `Queue: ${queue2}`;\n station3Queue.textContent = `Queue: ${queue3}`;\n \n \/\/ Update buffer displays\n buffer1.textContent = `Buffer: ${Math.min(queue2, bufferCapacity)}`;\n buffer2.textContent = `Buffer: ${Math.min(queue3, bufferCapacity)}`;\n \n \/\/ Update bottleneck indicator\n bottleneckIndicator.style.width = `${(TH \/ minCapacity) * 100}%`;\n \n \/\/ Visualize queues\n visualizeQueues(bottleneckStation);\n \n \/\/ Update insights\n updateInsights(bottleneckStation);\n }\n \n \/\/ Visualize queues based on bottleneck\n function visualizeQueues(bottleneckStation) {\n \/\/ Reset all stations\n const stations = document.querySelectorAll('.station');\n stations.forEach(station => {\n station.classList.remove('bottleneck');\n });\n \n \/\/ Highlight the bottleneck station\n const bottleneck = document.querySelector(`.station[data-station=\"${bottleneckStation}\"]`);\n bottleneck.classList.add('bottleneck');\n }\n \n \/\/ Update actionable insights\n function updateInsights(bottleneckStation) {\n const insights = document.querySelectorAll('.insight-item');\n \n \/\/ First insight about bottleneck station\n const stationNames = {\n 1: \"Preparation\",\n 2: \"Processing\",\n 3: \"Packaging\"\n };\n \n insights[0].querySelector('h4').textContent = `${stationNames[bottleneckStation]} Station is the bottleneck`;\n }\n \n \/\/ Event listeners\n arrivalRateSlider.addEventListener('input', updateSliderValues);\n station1Slider.addEventListener('input', updateSliderValues);\n station2Slider.addEventListener('input', updateSliderValues);\n station3Slider.addEventListener('input', updateSliderValues);\n bufferSlider.addEventListener('input', updateSliderValues);\n \n simulateBtn.addEventListener('click', simulateProduction);\n \n resetBtn.addEventListener('click', function() {\n \/\/ Reset sliders to default\n arrivalRateSlider.value = 8;\n station1Slider.value = 15;\n station2Slider.value = 10;\n station3Slider.value = 20;\n bufferSlider.value = 8;\n \n \/\/ Update displays\n updateSliderValues();\n \n \/\/ Run simulation\n simulateProduction();\n });\n \n \/\/ Industry selection\n industryCards.forEach(card => {\n card.addEventListener('click', function() {\n \/\/ Remove active class from all cards\n industryCards.forEach(c => c.classList.remove('active'));\n \n \/\/ Add active class to clicked card\n this.classList.add('active');\n \n \/\/ Set values based on industry\n const industry = this.dataset.industry;\n \n switch(industry) {\n case 'auto':\n station1Slider.value = 18;\n station2Slider.value = 12;\n station3Slider.value = 22;\n break;\n case 'packaging':\n station1Slider.value = 15;\n station2Slider.value = 12;\n station3Slider.value = 18;\n break;\n case 'food':\n station1Slider.value = 12;\n station2Slider.value = 15;\n station3Slider.value = 12;\n break;\n }\n \n \/\/ Update displays\n updateSliderValues();\n \n \/\/ Run simulation\n simulateProduction();\n });\n });\n \n \/\/ Initialize simulation\n simulateProduction();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Thoughts on Our Manufacturing Bottleneck Simulator<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Manufacturing bottlenecks are inevitable in any production environment, but they don’t have to be permanent constraints. Through this simulator, we’ve demonstrated how even small adjustments to your slowest station can dramatically improve overall throughput and efficiency.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The key to bottleneck management is a systematic approach:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Identify the true constraint in your production line<\/li>\n\n\n\n<li>Exploit the bottleneck to maximize its efficiency<\/li>\n\n\n\n<li>Subordinate all other processes to the bottleneck<\/li>\n\n\n\n<li>Elevate the bottleneck’s capacity through investments<\/li>\n\n\n\n<li>Repeat the process as new constraints emerge<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Modern manufacturing software plays a crucial role in this process by providing:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-time monitoring of production metrics<\/li>\n\n\n\n<li>Predictive analytics to anticipate bottlenecks<\/li>\n\n\n\n<li>Automated adjustments to balance workloads<\/li>\n\n\n\n<li>Historical data for continuous improvement<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We encourage you to continue experimenting with different configurations in this simulator to deepen your understanding of production constraints and optimization strategies. The insights gained can be directly applied to improve your real-world manufacturing operations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What You Should Do Next <\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Explore the Shoplogix Blog<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you know more about our interactive manufacturing bottleneck simulator, why not check out our other blog posts? It’s full of useful articles, professional advice, and updates on the latest trends that can help keep your operations up-to-date. Take a look and find out more about what’s happening in your industry. <strong><a href=\"https:\/\/shoplogix.com\/blogs\/\">Read More<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Request a Demo <\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Learn more about how our product, Smart Factory Suite, can drive productivity and overall equipment effectiveness (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Overall_equipment_effectiveness\" target=\"_blank\" rel=\"noopener\">OEE<\/a>) across your manufacturing floor. Schedule a meeting with a member of the Shoplogix team to learn more about our solutions and align them with your manufacturing data and technology needs. <strong><a href=\"https:\/\/shoplogix.com\/contact-information\/\">Request Demo<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In manufacturing, a bottleneck is a point of congestion that reduces the flow of production. It’s the slowest part of your process that determines the overall output of your entire system. Identifying and resolving bottlenecks is crucial for improving efficiency, reducing costs, and increasing throughput. This interactive manufacturing bottleneck simulator demonstrates how bottlenecks form in […]<\/p>\n","protected":false},"author":10,"featured_media":9534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[189],"tags":[198],"class_list":["post-9533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-industrie","tag-intelligente-fabrik"],"acf":[],"_links":{"self":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts\/9533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/comments?post=9533"}],"version-history":[{"count":0,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts\/9533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/media\/9534"}],"wp:attachment":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/media?parent=9533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/categories?post=9533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/tags?post=9533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9533,"date":"2025-06-16T19:22:57","date_gmt":"2025-06-16T19:22:57","guid":{"rendered":"https:\/\/shoplogix.com\/manufacturing-bottleneck-simulator\/"},"modified":"2025-06-16T20:26:38","modified_gmt":"2025-06-16T20:26:38","slug":"manufacturing-bottleneck-simulator","status":"publish","type":"post","link":"https:\/\/shoplogix.com\/it\/manufacturing-bottleneck-simulator\/","title":{"rendered":"Manufacturing Bottleneck Simulator: Identify, Analyze & Optimize Production Constraints"},"content":{"rendered":"\n

In manufacturing, a bottleneck is a point of congestion that reduces the flow of production. It’s the slowest part of your process that determines the overall output of your entire system. Identifying and resolving bottlenecks is crucial for improving efficiency, reducing costs, and increasing throughput.<\/p>\n\n\n\n

This interactive manufacturing bottleneck simulator demonstrates how bottlenecks form in manufacturing processes and how they can be mitigated through capacity adjustments and production control software. By experimenting with different station capacities and arrival rates, you can see real-time impacts on key manufacturing metrics:<\/p>\n\n\n\n

Throughput:<\/strong> The rate at which products are produced<\/li>\n\n\n\n
Cycle Time:<\/strong> The time required to complete one production cycle<\/li>\n\n\n\n
WIP Inventory: <\/strong>Work-in-process inventory waiting between stations<\/li>\n\n\n\n
OEE: <\/strong>Overall Equipment Effectiveness measuring productivity<\/li>\n<\/ul>\n\n\n\n
$\"Shoplogix$ <\/figure>\n\n\n\n
Manufacturing bottlenecks typically occur when one station in a production line can’t keep up with the demand from previous stations, causing work to pile up and slowing down the entire process. The key to resolving bottlenecks lies in identifying the constraint and strategically allocating resources to balance the production flow.<\/p>\n\n\n\n
Interactive Manufacturing Bottleneck Simulator<\/h2>\n\n\n\n\n\n\n \n \n Manufacturing Bottleneck Simulator<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n .bottleneck-simulator {\n --primary: #3a6ea5;\n --secondary: #2c8c99;\n --success: #4caf50;\n --warning: #ff9800;\n --danger: #f44336;\n --light-bg: #f8f9fa;\n --card-bg: #ffffff;\n --text: #333333;\n --text-light: #666666;\n --border: #e0e0e0;\n \n max-width: 1000px;\n margin: 40px auto;\n padding: 25px;\n background: var(--light-bg);\n border-radius: 15px;\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\n overflow: hidden;\n border: 1px solid var(--border);\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n color: var(--text);\n }\n \n .simulator-header {\n text-align: center;\n margin-bottom: 25px;\n }\n \n .simulator-header h2 {\n font-size: 1.8rem;\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .simulator-header p {\n color: var(--text-light);\n font-size: 1.1rem;\n max-width: 700px;\n margin: 0 auto;\n }\n \n .industry-selector {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n justify-content: center;\n margin: 20px 0;\n }\n \n .industry-card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n flex: 1;\n min-width: 140px;\n max-width: 180px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n }\n \n .industry-card.active {\n background: #e6f7ff;\n border: 1px solid var(--primary);\n box-shadow: 0 0 0 2px rgba(58, 110, 165, 0.2);\n }\n \n .industry-icon {\n font-size: 1.8rem;\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .industry-title {\n font-size: 1rem;\n color: var(--primary);\n font-weight: 600;\n }\n \n .visualization-section {\n background: var(--card-bg);\n border-radius: 10px;\n padding: 15px;\n border: 1px solid var(--border);\n margin-bottom: 15px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .production-line-container {\n overflow-x: auto;\n padding: 10px 0;\n margin-bottom: 20px;\n }\n \n .production-line {\n display: flex;\n justify-content: space-around;\n align-items: center;\n min-width: 500px;\n padding: 10px 0;\n }\n \n .station {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100px;\n }\n \n .station-icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n background: #f0f8ff;\n border: 2px solid var(--primary);\n margin-bottom: 10px;\n color: var(--primary);\n }\n \n .station.bottleneck .station-icon {\n border-color: var(--danger);\n animation: pulse 1.5s infinite;\n background: #ffebee;\n }\n \n .station-label {\n font-size: 0.9rem;\n font-weight: 600;\n text-align: center;\n margin-bottom: 8px;\n color: var(--text);\n }\n \n .station-metrics {\n background: #f8f9fa;\n border-radius: 6px;\n padding: 8px;\n text-align: center;\n font-size: 0.85rem;\n width: 100%;\n border: 1px solid var(--border);\n }\n \n .station-capacity {\n color: var(--primary);\n font-weight: bold;\n }\n \n .station-queue {\n margin-top: 3px;\n font-size: 0.8rem;\n color: var(--text-light);\n }\n \n .buffer {\n width: 60px;\n height: 25px;\n background: #e8f4f8;\n border: 1px dashed var(--secondary);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n font-size: 0.8rem;\n margin: 0 5px;\n color: var(--text-light);\n }\n \n .metrics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n gap: 12px;\n margin: 20px 0;\n }\n \n .metric-card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 12px;\n text-align: center;\n border: 1px solid var(--border);\n box-shadow: 0 2px 5px rgba(0,0,0,0.03);\n }\n \n .metric-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-bottom: 8px;\n font-size: 0.9rem;\n color: var(--text);\n }\n \n .metric-value {\n font-size: 1.5rem;\n font-weight: 700;\n margin: 5px 0;\n color: var(--primary);\n }\n \n .metric-label {\n font-size: 0.8rem;\n color: var(--text-light);\n }\n \n .comparison {\n display: flex;\n justify-content: space-between;\n margin-top: 5px;\n padding-top: 5px;\n border-top: 1px solid var(--border);\n font-size: 0.8rem;\n color: var(--text);\n }\n \n .comparison-value {\n font-weight: 600;\n }\n \n .deterioration {\n color: var(--danger);\n }\n \n .bottleneck-indicator {\n height: 6px;\n background: #e0e0e0;\n border-radius: 3px;\n margin: 12px 0;\n position: relative;\n overflow: hidden;\n }\n \n .indicator-fill {\n height: 100%;\n background: linear-gradient(to right, var(--danger), var(--warning), var(--success));\n border-radius: 3px;\n width: 30%;\n transition: width 1s ease;\n }\n \n .insights-section {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n margin: 20px 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .insights-section h3 {\n color: var(--primary);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .insight-item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin: 10px 0;\n padding: 10px;\n border-radius: 6px;\n background: #f8f9fa;\n }\n \n .insight-icon {\n background: var(--primary);\n color: white;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: 2px;\n font-size: 0.8rem;\n }\n \n .insight-content h4 {\n color: var(--primary);\n margin-bottom: 3px;\n font-size: 0.95rem;\n }\n \n .insight-content p {\n font-size: 0.85rem;\n line-height: 1.4;\n color: var(--text);\n }\n \n .control-panel {\n background: var(--card-bg);\n border-radius: 10px;\n padding: 20px;\n margin-top: 20px;\n border: 1px solid var(--border);\n box-shadow: 0 2px 8px rgba(0,0,0,0.03);\n }\n \n .control-group {\n margin-bottom: 20px;\n }\n \n .control-group h3 {\n color: var(--primary);\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .slider-container {\n margin: 10px 0;\n }\n \n .slider-label {\n display: flex;\n justify-content: space-between;\n margin-bottom: 6px;\n font-size: 0.85rem;\n color: var(--text);\n }\n \n .slider {\n width: 100%;\n height: 6px;\n -webkit-appearance: none;\n background: #e0e0e0;\n border-radius: 3px;\n outline: none;\n }\n \n .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--primary);\n cursor: pointer;\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n \n .btn-container {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n }\n \n .btn {\n flex: 1;\n background: var(--primary);\n color: white;\n border: none;\n padding: 10px 15px;\n font-size: 0.9rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n font-weight: 500;\n }\n \n .btn:hover {\n opacity: 0.9;\n transform: translateY(-2px);\n }\n \n .btn.reset {\n background: var(--danger);\n }\n \n .software-impact {\n background: #f0f7ff;\n border-radius: 8px;\n padding: 15px;\n border: 1px solid var(--border);\n margin-top: 20px;\n }\n \n .impact-item {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 8px 0;\n font-size: 0.85rem;\n color: var(--text);\n padding: 8px;\n border-radius: 4px;\n }\n \n .impact-item i {\n color: var(--primary);\n background: #e6f2ff;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n @keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4); }\n 70% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }\n }\n \n @media (max-width: 767px) {\n .simulator-header h2 {\n font-size: 1.6rem;\n }\n \n .simulator-header p {\n font-size: 1rem;\n }\n \n .industry-card {\n min-width: 120px;\n padding: 12px;\n }\n \n .production-line {\n min-width: 450px;\n }\n \n .station {\n width: 90px;\n }\n \n .station-icon {\n width: 50px;\n height: 50px;\n font-size: 1.3rem;\n }\n \n .buffer {\n width: 50px;\n font-size: 0.7rem;\n }\n \n .metrics-grid {\n grid-template-columns: 1fr;\n }\n }\n \n @media (max-width: 480px) {\n .bottleneck-simulator {\n padding: 15px;\n }\n \n .industry-card {\n min-width: 100px;\n padding: 10px;\n }\n \n .btn-container {\n flex-direction: column;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"bottleneck-simulator\">\n <div class=\"simulator-header\">\n <h2>Manufacturing Bottleneck Simulator<\/h2>\n <p>Identify and resolve production bottlenecks in your manufacturing process<\/p>\n <\/div>\n \n <div class=\"industry-selector\">\n <div class=\"industry-card active\" data-industry=\"auto\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-cogs\"><\/i>\n <\/div>\n <div class=\"industry-title\">Automotive<\/div>\n <\/div>\n \n <div class=\"industry-card\" data-industry=\"packaging\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-box-open\"><\/i>\n <\/div>\n <div class=\"industry-title\">Packaging<\/div>\n <\/div>\n \n <div class=\"industry-card\" data-industry=\"food\">\n <div class=\"industry-icon\">\n <i class=\"fas fa-utensils\"><\/i>\n <\/div>\n <div class=\"industry-title\">Food & Beverage<\/div>\n <\/div>\n <\/div>\n \n <div class=\"visualization-section\">\n <div class=\"production-line-container\">\n <div class=\"production-line\" id=\"productionLine\">\n \n <div class=\"station\" data-station=\"1\">\n <div class=\"station-icon\">\n <i class=\"fas fa-cut\"><\/i>\n <\/div>\n <div class=\"station-label\">Preparation<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station1Cap\">15\/min<\/div>\n <div class=\"station-queue\" id=\"station1Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"buffer\" id=\"buffer1\">Buffer: 0<\/div>\n \n \n <div class=\"station\" data-station=\"2\">\n <div class=\"station-icon\">\n <i class=\"fas fa-cogs\"><\/i>\n <\/div>\n <div class=\"station-label\">Processing<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station2Cap\">10\/min<\/div>\n <div class=\"station-queue\" id=\"station2Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"buffer\" id=\"buffer2\">Buffer: 0<\/div>\n \n \n <div class=\"station\" data-station=\"3\">\n <div class=\"station-icon\">\n <i class=\"fas fa-box\"><\/i>\n <\/div>\n <div class=\"station-label\">Packaging<\/div>\n <div class=\"station-metrics\">\n <div class=\"station-capacity\" id=\"station3Cap\">20\/min<\/div>\n <div class=\"station-queue\" id=\"station3Queue\">Queue: 0<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"metrics-grid\">\n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-tachometer-alt\"><\/i>\n <h3>Throughput<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"throughputValue\">42<\/div>\n <div class=\"metric-label\">Units per hour<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"throughputComparison\">32<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-clock\"><\/i>\n <h3>Cycle Time<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"cycleTimeValue\">8.4<\/div>\n <div class=\"metric-label\">Minutes per unit<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"cycleTimeComparison\">12.6<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-pallet\"><\/i>\n <h3>WIP Inventory<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"wipValue\">18<\/div>\n <div class=\"metric-label\">Units in process<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"wipComparison\">32<\/span>\n <\/div>\n <\/div>\n \n <div class=\"metric-card\">\n <div class=\"metric-header\">\n <i class=\"fas fa-chart-line\"><\/i>\n <h3>OEE<\/h3>\n <\/div>\n <div class=\"metric-value\" id=\"oeeValue\">84%<\/div>\n <div class=\"metric-label\">Overall Effectiveness<\/div>\n <div class=\"comparison\">\n <span>Without Software:<\/span>\n <span class=\"comparison-value deterioration\" id=\"oeeComparison\">62%<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"bottleneck-indicator\">\n <div class=\"indicator-fill\" id=\"bottleneckIndicator\" style=\"width: 30%\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"insights-section\">\n <h3><i class=\"fas fa-lightbulb\"><\/i> Actionable Insights<\/h3>\n <div class=\"insight-item\">\n <div class=\"insight-icon\">\n <i class=\"fas fa-cog\"><\/i>\n <\/div>\n <div class=\"insight-content\">\n <h4>Processing Station is the bottleneck<\/h4>\n <p>This station’s capacity is limiting overall throughput. Consider adding resources or implementing automation to increase capacity.<\/p>\n <\/div>\n <\/div>\n <div class=\"insight-item\">\n <div class=\"insight-icon\">\n <i class=\"fas fa-buffer\"><\/i>\n <\/div>\n <div class=\"insight-content\">\n <h4>Optimize buffer before Processing<\/h4>\n <p>Increasing buffer capacity before the bottleneck station will help smooth workflow and prevent downstream starvation.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"control-panel\">\n <div class=\"control-group\">\n <h3><i class=\"fas fa-sliders-h\"><\/i> Production Parameters<\/h3>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Arrival Rate<\/span>\n <span id=\"arrivalRateValue\">8 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"8\" class=\"slider\" id=\"arrivalRateSlider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Preparation Capacity<\/span>\n <span id=\"station1Value\">15 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"15\" class=\"slider\" id=\"station1Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Processing Capacity<\/span>\n <span id=\"station2Value\">10 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"10\" class=\"slider\" id=\"station2Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Packaging Capacity<\/span>\n <span id=\"station3Value\">20 units\/min<\/span>\n <\/div>\n <input type=\"range\" min=\"5\" max=\"30\" value=\"20\" class=\"slider\" id=\"station3Slider\">\n <\/div>\n \n <div class=\"slider-container\">\n <div class=\"slider-label\">\n <span>Buffer Capacity<\/span>\n <span id=\"bufferValue\">8 units<\/span>\n <\/div>\n <input type=\"range\" min=\"3\" max=\"20\" value=\"8\" class=\"slider\" id=\"bufferSlider\">\n <\/div>\n \n <div class=\"btn-container\">\n <button class=\"btn\" id=\"simulateBtn\">\n <i class=\"fas fa-play\"><\/i> Run Simulation\n <\/button>\n <button class=\"btn reset\" id=\"resetBtn\">\n <i class=\"fas fa-redo\"><\/i> Reset\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"software-impact\">\n <h3><i class=\"fas fa-chart-line\"><\/i> Software Impact<\/h3>\n <div class=\"impact-item\">\n <i class=\"fas fa-robot\"><\/i>\n <div>Automatically balancing workloads<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-bolt\"><\/i>\n <div>Predicting and preventing failures<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-sync-alt\"><\/i>\n <div>Optimizing material flow<\/div>\n <\/div>\n <div class=\"impact-item\">\n <i class=\"fas fa-brain\"><\/i>\n <div>AI to identify bottlenecks<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Elements\n const arrivalRateSlider = document.getElementById('arrivalRateSlider');\n const station1Slider = document.getElementById('station1Slider');\n const station2Slider = document.getElementById('station2Slider');\n const station3Slider = document.getElementById('station3Slider');\n const bufferSlider = document.getElementById('bufferSlider');\n const simulateBtn = document.getElementById('simulateBtn');\n const resetBtn = document.getElementById('resetBtn');\n \n \/\/ Value displays\n const arrivalRateValue = document.getElementById('arrivalRateValue');\n const station1Value = document.getElementById('station1Value');\n const station2Value = document.getElementById('station2Value');\n const station3Value = document.getElementById('station3Value');\n const bufferValue = document.getElementById('bufferValue');\n \n \/\/ Station capacity displays\n const station1Cap = document.getElementById('station1Cap');\n const station2Cap = document.getElementById('station2Cap');\n const station3Cap = document.getElementById('station3Cap');\n \n \/\/ Queue displays\n const station1Queue = document.getElementById('station1Queue');\n const station2Queue = document.getElementById('station2Queue');\n const station3Queue = document.getElementById('station3Queue');\n const buffer1 = document.getElementById('buffer1');\n const buffer2 = document.getElementById('buffer2');\n \n \/\/ Metrics\n const throughputValue = document.getElementById('throughputValue');\n const cycleTimeValue = document.getElementById('cycleTimeValue');\n const wipValue = document.getElementById('wipValue');\n const oeeValue = document.getElementById('oeeValue');\n \n \/\/ Comparisons\n const throughputComparison = document.getElementById('throughputComparison');\n const cycleTimeComparison = document.getElementById('cycleTimeComparison');\n const wipComparison = document.getElementById('wipComparison');\n const oeeComparison = document.getElementById('oeeComparison');\n \n \/\/ Bottleneck indicator\n const bottleneckIndicator = document.getElementById('bottleneckIndicator');\n \n \/\/ Industry cards\n const industryCards = document.querySelectorAll('.industry-card');\n \n \/\/ Initialize slider values\n updateSliderValues();\n \n \/\/ Update slider value displays\n function updateSliderValues() {\n arrivalRateValue.textContent = `${arrivalRateSlider.value} units\/min`;\n station1Value.textContent = `${station1Slider.value} units\/min`;\n station2Value.textContent = `${station2Slider.value} units\/min`;\n station3Value.textContent = `${station3Slider.value} units\/min`;\n bufferValue.textContent = `${bufferSlider.value} units`;\n \n \/\/ Update station capacities\n station1Cap.textContent = `${station1Slider.value}\/min`;\n station2Cap.textContent = `${station2Slider.value}\/min`;\n station3Cap.textContent = `${station3Slider.value}\/min`;\n }\n \n \/\/ Simulate production using simplified queuing theory\n function simulateProduction() {\n \/\/ Get current values\n const arrivalRate = parseFloat(arrivalRateSlider.value);\n const s1 = parseFloat(station1Slider.value);\n const s2 = parseFloat(station2Slider.value);\n const s3 = parseFloat(station3Slider.value);\n const bufferCapacity = parseFloat(bufferSlider.value);\n \n \/\/ Identify the bottleneck station\n const minCapacity = Math.min(s1, s2, s3);\n const bottleneckStation = s1 === minCapacity ? 1 : \n s2 === minCapacity ? 2 : 3;\n \n \/\/ Calculate throughput (min of arrival rate and bottleneck capacity)\n const TH = Math.min(arrivalRate, minCapacity);\n \n \/\/ Calculate utilizations for each station\n let util1 = TH \/ s1;\n let util2 = TH \/ s2;\n let util3 = TH \/ s3;\n \n \/\/ Calculate queue lengths (simplified)\n const queue1 = Math.round(util1 * 10);\n const queue2 = Math.round(util2 * 15);\n const queue3 = Math.round(util3 * 8);\n \n \/\/ Calculate work in process (queues + items in processing)\n const WIP = queue1 + queue2 + queue3 + 3; \/\/ 3 for items being processed\n \n \/\/ Calculate cycle time (WIP \/ throughput)\n const CT = WIP \/ TH;\n \n \/\/ Calculate OEE (throughput \/ bottleneck capacity)\n const OEE = (TH \/ minCapacity) * 100;\n \n \/\/ Calculate \"Without Software\" scenario\n const TH_ws = TH * 0.85;\n const WIP_ws = WIP * 1.3;\n const CT_ws = CT * 1.4;\n const OEE_ws = OEE * 0.85;\n \n \/\/ Update metrics display\n throughputValue.textContent = Math.round(TH * 60); \/\/ per hour\n cycleTimeValue.textContent = CT.toFixed(1);\n wipValue.textContent = Math.round(WIP);\n oeeValue.textContent = `${OEE.toFixed(0)}%`;\n \n throughputComparison.textContent = Math.round(TH_ws * 60);\n cycleTimeComparison.textContent = CT_ws.toFixed(1);\n wipComparison.textContent = Math.round(WIP_ws);\n oeeComparison.textContent = `${OEE_ws.toFixed(0)}%`;\n \n \/\/ Update queue displays\n station1Queue.textContent = `Queue: ${queue1}`;\n station2Queue.textContent = `Queue: ${queue2}`;\n station3Queue.textContent = `Queue: ${queue3}`;\n \n \/\/ Update buffer displays\n buffer1.textContent = `Buffer: ${Math.min(queue2, bufferCapacity)}`;\n buffer2.textContent = `Buffer: ${Math.min(queue3, bufferCapacity)}`;\n \n \/\/ Update bottleneck indicator\n bottleneckIndicator.style.width = `${(TH \/ minCapacity) * 100}%`;\n \n \/\/ Visualize queues\n visualizeQueues(bottleneckStation);\n \n \/\/ Update insights\n updateInsights(bottleneckStation);\n }\n \n \/\/ Visualize queues based on bottleneck\n function visualizeQueues(bottleneckStation) {\n \/\/ Reset all stations\n const stations = document.querySelectorAll('.station');\n stations.forEach(station => {\n station.classList.remove('bottleneck');\n });\n \n \/\/ Highlight the bottleneck station\n const bottleneck = document.querySelector(`.station[data-station=\"${bottleneckStation}\"]`);\n bottleneck.classList.add('bottleneck');\n }\n \n \/\/ Update actionable insights\n function updateInsights(bottleneckStation) {\n const insights = document.querySelectorAll('.insight-item');\n \n \/\/ First insight about bottleneck station\n const stationNames = {\n 1: \"Preparation\",\n 2: \"Processing\",\n 3: \"Packaging\"\n };\n \n insights[0].querySelector('h4').textContent = `${stationNames[bottleneckStation]} Station is the bottleneck`;\n }\n \n \/\/ Event listeners\n arrivalRateSlider.addEventListener('input', updateSliderValues);\n station1Slider.addEventListener('input', updateSliderValues);\n station2Slider.addEventListener('input', updateSliderValues);\n station3Slider.addEventListener('input', updateSliderValues);\n bufferSlider.addEventListener('input', updateSliderValues);\n \n simulateBtn.addEventListener('click', simulateProduction);\n \n resetBtn.addEventListener('click', function() {\n \/\/ Reset sliders to default\n arrivalRateSlider.value = 8;\n station1Slider.value = 15;\n station2Slider.value = 10;\n station3Slider.value = 20;\n bufferSlider.value = 8;\n \n \/\/ Update displays\n updateSliderValues();\n \n \/\/ Run simulation\n simulateProduction();\n });\n \n \/\/ Industry selection\n industryCards.forEach(card => {\n card.addEventListener('click', function() {\n \/\/ Remove active class from all cards\n industryCards.forEach(c => c.classList.remove('active'));\n \n \/\/ Add active class to clicked card\n this.classList.add('active');\n \n \/\/ Set values based on industry\n const industry = this.dataset.industry;\n \n switch(industry) {\n case 'auto':\n station1Slider.value = 18;\n station2Slider.value = 12;\n station3Slider.value = 22;\n break;\n case 'packaging':\n station1Slider.value = 15;\n station2Slider.value = 12;\n station3Slider.value = 18;\n break;\n case 'food':\n station1Slider.value = 12;\n station2Slider.value = 15;\n station3Slider.value = 12;\n break;\n }\n \n \/\/ Update displays\n updateSliderValues();\n \n \/\/ Run simulation\n simulateProduction();\n });\n });\n \n \/\/ Initialize simulation\n simulateProduction();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Thoughts on Our Manufacturing Bottleneck Simulator<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Manufacturing bottlenecks are inevitable in any production environment, but they don’t have to be permanent constraints. Through this simulator, we’ve demonstrated how even small adjustments to your slowest station can dramatically improve overall throughput and efficiency.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The key to bottleneck management is a systematic approach:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Identify the true constraint in your production line<\/li>\n\n\n\n<li>Exploit the bottleneck to maximize its efficiency<\/li>\n\n\n\n<li>Subordinate all other processes to the bottleneck<\/li>\n\n\n\n<li>Elevate the bottleneck’s capacity through investments<\/li>\n\n\n\n<li>Repeat the process as new constraints emerge<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Modern manufacturing software plays a crucial role in this process by providing:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Real-time monitoring of production metrics<\/li>\n\n\n\n<li>Predictive analytics to anticipate bottlenecks<\/li>\n\n\n\n<li>Automated adjustments to balance workloads<\/li>\n\n\n\n<li>Historical data for continuous improvement<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We encourage you to continue experimenting with different configurations in this simulator to deepen your understanding of production constraints and optimization strategies. The insights gained can be directly applied to improve your real-world manufacturing operations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What You Should Do Next <\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Explore the Shoplogix Blog<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you know more about our interactive manufacturing bottleneck simulator, why not check out our other blog posts? It’s full of useful articles, professional advice, and updates on the latest trends that can help keep your operations up-to-date. Take a look and find out more about what’s happening in your industry. <strong><a href=\"https:\/\/shoplogix.com\/blogs\/\">Read More<\/a><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Request a Demo <\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Learn more about how our product, Smart Factory Suite, can drive productivity and overall equipment effectiveness (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Overall_equipment_effectiveness\" target=\"_blank\" rel=\"noopener\">OEE<\/a>) across your manufacturing floor. Schedule a meeting with a member of the Shoplogix team to learn more about our solutions and align them with your manufacturing data and technology needs. <strong><a href=\"https:\/\/shoplogix.com\/contact-information\/\">Request Demo<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In manufacturing, a bottleneck is a point of congestion that reduces the flow of production. It’s the slowest part of your process that determines the overall output of your entire system. Identifying and resolving bottlenecks is crucial for improving efficiency, reducing costs, and increasing throughput. This interactive manufacturing bottleneck simulator demonstrates how bottlenecks form in […]<\/p>\n","protected":false},"author":10,"featured_media":9534,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[189],"tags":[198],"class_list":["post-9533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-industrie","tag-intelligente-fabrik"],"acf":[],"_links":{"self":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts\/9533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/comments?post=9533"}],"version-history":[{"count":0,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/posts\/9533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/media\/9534"}],"wp:attachment":[{"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/media?parent=9533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/categories?post=9533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shoplogix.com\/it\/wp-json\/wp\/v2\/tags?post=9533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}