{"index.html":"\n\n\n \n \n Smart Plant Watering System Simulation\n \n \n \n\n\n

Smart Plant Watering System

Simulate how a smart system waters a plant based on soil moisture.

\n\n

Let's Explore!

This is a simulation of a smart plant watering system. It shows how a sensor (measuring soil moisture) and a controller can automatically water a plant when the soil gets too dry.

How to Explore:

Adjust Initial Settings: Set the starting soil moisture, the moisture level at which the pump should turn on (threshold), how much water is added, and how quickly water evaporates.
Start the Simulation: Click \"Start Simulation\". The settings will lock.
Advance Step-by-Step: Click \"Next Step\" to see what happens in one time period. Observe how moisture changes due to evaporation and watering.
Monitor Status: Watch the \"Current Soil Moisture\", \"Pump Status\", and the visual plant display.
Check the Log: The \"Event Log\" records every action and change in the simulation.
Reset and Experiment: Click \"Reset Simulation\" to try different settings and see how they affect the plant's watering schedule and overall health. For example, what happens if the evaporation rate is very high? Or if the watering amount is very small?

\n\n

Controls & Settings

\n Initial Soil Moisture (%):\n \n

\n Watering Threshold (%):\n \n

\n Watering Amount (%):\n \n

\n Evaporation per Step (%):\n \n

\n \n \n

\n\n

Simulation Status

\n \n

\n Current Soil Moisture: \n N/A%\n

\n Pump Status: \n OFF\n \n

\n Simulation Step: \n 0\n

\n\n

Event Log

Welcome! Adjust settings and start the simulation.

Reflection Questions

You will respond to the following questions in the next item.

Sense: How does the soil moisture sensor figure out what's happening around it? What exactly is it measuring in the soil?
Process: In the Smart Plant Watering System, what does the computer (microcontroller) do with the sensor data? What decision does it make, and how does it know when to make it?
Interact: How does the water pump affect the plant's surroundings? What is the goal of using the pump?
What if the water reservoir is empty but the system doesn't know? How could you fix this with a sensor? Where would this fit in the S-P-I cycle?
What other sensors or devices could make this system better? What would each one sense or do? How would it fit into the S-P-I cycle?

\n\n \n\n\n \n \n\n\n ","sketch.js":"let p5Canvas;\nlet animationState = 'IDLE'; // IDLE, SENSING, PROCESSING, INTERACTING, WATERING, COMPLETE\nlet stateStartTime = 0;\nlet soilMoisture = 'Dry'; // 'Dry', 'Moist'\nlet waterParticles = [];\n\n// Durations for each animation state in milliseconds\nconst SENSE_DURATION = 2500;\nconst PROCESS_DURATION = 2500;\nconst INTERACT_DURATION = 1500;\nconst WATERING_DURATION = 3000;\nconst COMPLETE_MSG_DURATION = 3000;\n\n// Colors\nlet colors; \n\n// Element positions and sizes (relative to canvas size)\nlet positions = {};\n\nfunction setup() {\n let canvasContainer = select('#p5-canvas-container');\n // Ensure canvas is not wider than its container or a max width\n let canvasWidth = min(canvasContainer.elt.offsetWidth, 600); \n let canvasHeight = 300;\n\n p5Canvas = createCanvas(canvasWidth, canvasHeight);\n p5Canvas.parent('p5-canvas-container');\n\n // Initialize colors (can be accessed via colors.bg, colors.plant etc.)\n colors = {\n bg: color(240, 248, 255), // AliceBlue\n soilDry: color(188, 143, 143), // RosyBrown\n soilMoist: color(139, 69, 19), // SaddleBrown\n plant: color(34, 139, 34), // ForestGreen\n pot: color(210, 105, 30), // Chocolate\n sensor: color(100, 100, 100), // Gray for sensor body\n sensorLedOff: color(150,0,0),\n sensorLedOn: color(0,255,0),\n mcu: color(0, 0, 200), // Blue\n pump: color(128, 128, 128), // Gray\n water: color(173, 216, 230), // LightBlue\n text: color(50),\n highlight: color(255, 255, 0, 150) // Yellow highlight\n };\n\n // Set up positions based on canvas size\n calculateElementPositions();\n\n let restartButton = select('#restart-anim-btn'); // Selects the HTML button\n restartButton.mousePressed(startAnimationCycle);\n\n textAlign(CENTER, CENTER);\n initializeAnimation();\n}\n\nfunction calculateElementPositions() {\n // Pot\n positions.potX = width / 2;\n positions.potY = height * 0.85;\n positions.potW = width * 0.3;\n positions.potH = height * 0.25;\n // Soil (inside pot)\n positions.soilY = positions.potY - positions.potH * 0.3; \n positions.soilH = positions.potH * 0.6;\n // Plant stem\n positions.plantBaseY = positions.soilY - positions.soilH / 2;\n positions.plantTopY = height * 0.3;\n // Sensor in soil\n positions.sensorX = positions.potX + positions.potW * 0.15;\n positions.sensorY = positions.soilY - positions.soilH * 0.1;\n positions.sensorW = width * 0.03;\n positions.sensorH = height * 0.15;\n // MCU\n positions.mcuX = width * 0.25;\n positions.mcuY = height * 0.2;\n positions.mcuW = width * 0.15;\n positions.mcuH = height * 0.15;\n // Pump\n positions.pumpX = width * 0.75;\n positions.pumpY = height * 0.2;\n positions.pumpW = width * 0.1;\n positions.pumpH = height * 0.15;\n // Water source for pump (small reservoir)\n positions.reservoirX = positions.pumpX;\n positions.reservoirY = positions.pumpY + positions.pumpH * 1.2;\n positions.reservoirW = positions.pumpW;\n positions.reservoirH = positions.pumpH * 0.8;\n}\n\nfunction windowResized() {\n let canvasContainer = select('#p5-canvas-container');\n let newWidth = min(canvasContainer.elt.offsetWidth, 600);\n resizeCanvas(newWidth, 300); // Keep height fixed\n calculateElementPositions(); // Recalculate positions based on new width\n}\n\nfunction initializeAnimation() {\n animationState = 'IDLE';\n soilMoisture = 'Dry';\n waterParticles = [];\n stateStartTime = millis();\n}\n\nfunction startAnimationCycle() {\n initializeAnimation(); // Reset everything\n soilMoisture = 'Dry'; // Start with dry soil\n animationState = 'SENSING';\n stateStartTime = millis();\n}\n\nfunction draw() {\n background(colors.bg);\n drawEnvironment();\n drawComponents();\n handleAnimationStates();\n drawWater();\n drawInfoText();\n}\n\nfunction drawEnvironment() {\n // Pot\n fill(colors.pot);\n noStroke();\n rectMode(CENTER);\n rect(positions.potX, positions.potY, positions.potW, positions.potH, 5); // Rounded corners for pot\n\n // Soil\n fill(soilMoisture === 'Dry' ? colors.soilDry : colors.soilMoist);\n rect(positions.potX, positions.soilY, positions.potW * 0.95, positions.soilH);\n\n // Plant Stem\n stroke(colors.plant);\n strokeWeight(width * 0.015); // Thicker stem\n line(positions.potX, positions.plantBaseY, positions.potX, positions.plantTopY);\n\n // Plant Leaves (simple ellipses)\n noStroke();\n fill(colors.plant);\n ellipse(positions.potX - width * 0.05, positions.plantTopY + height * 0.05, width * 0.1, height * 0.1);\n ellipse(positions.potX + width * 0.05, positions.plantTopY + height * 0.05, width * 0.1, height * 0.1);\n ellipse(positions.potX, positions.plantTopY - height * 0.02, width * 0.12, height * 0.12);\n}\n\nfunction drawComponents() {\n rectMode(CENTER);\n noStroke();\n\n // Sensor\n fill(colors.sensor);\n rect(positions.sensorX, positions.sensorY, positions.sensorW, positions.sensorH);\n if (animationState === 'SENSING') {\n fill(colors.highlight);\n ellipse(positions.sensorX, positions.sensorY, positions.sensorW * 2, positions.sensorH * 1.5); // Highlight\n fill( (millis() / 500) % 2 < 1 ? colors.sensorLedOn : colors.sensorLedOff); // Blinking LED\n ellipse(positions.sensorX, positions.sensorY - positions.sensorH*0.3, 5,5);\n }\n fill(colors.text);\n textSize(max(width*0.02, 10));\n text(\"Sensor\", positions.sensorX, positions.sensorY + positions.sensorH * 0.7);\n\n\n // Microcontroller (MCU)\n fill(colors.mcu);\n rect(positions.mcuX, positions.mcuY, positions.mcuW, positions.mcuH, 3);\n if (animationState === 'PROCESSING') {\n fill(colors.highlight);\n ellipse(positions.mcuX, positions.mcuY, positions.mcuW * 1.5, positions.mcuH * 1.5); // Highlight\n }\n fill(colors.text);\n text(\"MCU\", positions.mcuX, positions.mcuY);\n\n // Pump\n fill(colors.pump);\n rect(positions.pumpX, positions.pumpY, positions.pumpW, positions.pumpH, 3);\n if (animationState === 'INTERACTING' || animationState === 'WATERING') {\n fill(colors.highlight);\n ellipse(positions.pumpX, positions.pumpY, positions.pumpW * 2, positions.pumpH * 1.5); // Highlight\n }\n fill(colors.text);\n text(\"Pump\", positions.pumpX, positions.pumpY);\n\n // Water Reservoir for pump\n fill(colors.water);\n rect(positions.reservoirX, positions.reservoirY, positions.reservoirW, positions.reservoirH);\n fill(colors.text);\n text(\"Water\", positions.reservoirX, positions.reservoirY);\n\n // Draw data/control flow lines if active\n drawFlowLines();\n}\n\nfunction drawFlowLines() {\n stroke(50, 50, 200, 150); // Blueish-purple for data flow\n strokeWeight(2);\n if (animationState === 'SENSING' || animationState === 'PROCESSING') { // Data from Sensor to MCU\n drawArrow(positions.sensorX, positions.sensorY - positions.sensorH/2, positions.mcuX, positions.mcuY - positions.mcuH/2, \"Data\");\n }\n if (animationState === 'PROCESSING' || animationState === 'INTERACTING' || animationState === 'WATERING') { // Control from MCU to Pump\n if (soilMoisture === 'Dry') { // Only show if action is needed\n drawArrow(positions.mcuX + positions.mcuW/2, positions.mcuY, positions.pumpX - positions.pumpW/2, positions.pumpY, \"Signal\");\n }\n }\n}\n\nfunction drawArrow(x1, y1, x2, y2, label) {\n line(x1, y1, x2, y2);\n push();\n translate(x2, y2);\n let a = atan2(y1 - y2, x1 - x2);\n rotate(a);\n fill(50, 50, 200);\n triangle(0, 0, -8, -4, -8, 4);\n pop();\n \n if (label) {\n push();\n translate((x1 + x2) / 2, (y1 + y2) / 2);\n fill(colors.text);\n noStroke();\n textSize(max(width*0.018, 9));\n text(label, 0, -8);\n pop();\n }\n}\n\n\nfunction handleAnimationStates() {\n let elapsedTime = millis() - stateStartTime;\n\n switch (animationState) {\n case 'SENSING':\n if (elapsedTime > SENSE_DURATION) {\n animationState = 'PROCESSING';\n stateStartTime = millis();\n }\n break;\n case 'PROCESSING':\n if (elapsedTime > PROCESS_DURATION) {\n if (soilMoisture === 'Dry') {\n animationState = 'INTERACTING';\n } else {\n animationState = 'COMPLETE'; // Already moist, cycle ends\n }\n stateStartTime = millis();\n }\n break;\n case 'INTERACTING':\n if (elapsedTime > INTERACT_DURATION) {\n animationState = 'WATERING';\n stateStartTime = millis();\n }\n break;\n case 'WATERING':\n // Spawn water particles\n if (frameCount % 5 == 0) { // Add new particle every 5 frames\n waterParticles.push({\n x: positions.pumpX,\n y: positions.pumpY + positions.pumpH / 2,\n vx: (positions.potX - positions.pumpX) / (width*0.2), // Horizontal velocity towards pot\n vy: 2 + random(-0.5, 0.5) // Initial vertical velocity\n });\n }\n if (elapsedTime > WATERING_DURATION) {\n soilMoisture = 'Moist';\n animationState = 'COMPLETE';\n stateStartTime = millis();\n }\n break;\n case 'COMPLETE':\n if (elapsedTime > COMPLETE_MSG_DURATION) {\n animationState = 'IDLE'; // Or loop by calling startAnimationCycle()\n }\n break;\n }\n}\n\nfunction drawWater() {\n fill(colors.water);\n noStroke();\n for (let i = waterParticles.length - 1; i >= 0; i--) {\n let p = waterParticles[i];\n p.x += p.vx;\n p.y += p.vy;\n p.vy += 0.1; // Gravity\n\n ellipse(p.x, p.y, width*0.015, width*0.015);\n\n // Remove particle if it hits the soil area or goes off screen\n let soilTop = positions.soilY - positions.soilH / 2;\n let soilLeft = positions.potX - (positions.potW * 0.95) / 2;\n let soilRight = positions.potX + (positions.potW * 0.95) / 2;\n\n if (p.y > soilTop && p.x > soilLeft && p.x < soilRight) {\n waterParticles.splice(i, 1);\n } else if (p.y > height) {\n waterParticles.splice(i, 1);\n }\n }\n}\n\nfunction drawInfoText() {\n fill(colors.text);\n textSize(max(width*0.025, 12));\n let mainMessage = \"\";\n let subMessage = `Soil is currently: ${soilMoisture}`;\n\n switch (animationState) {\n case 'IDLE':\n mainMessage = \"Click 'Restart Animation' to begin.\";\n break;\n case 'SENSING':\n mainMessage = \"SENSE: Soil sensor measuring moisture...\";\n break;\n case 'PROCESSING':\n mainMessage = \"PROCESS: MCU checking moisture level...\";\n break;\n case 'INTERACTING':\n mainMessage = \"INTERACT: MCU signaling pump to activate...\";\n if (soilMoisture !== 'Dry') mainMessage = \"PROCESS: Soil is already moist. No action needed.\";\n break;\n case 'WATERING':\n mainMessage = \"INTERACT: Pump is watering the plant...\";\n break;\n case 'COMPLETE':\n mainMessage = `Cycle Complete. ${soilMoisture === 'Moist' ? 'Plant watered successfully!' : 'No watering needed.'}`;\n break;\n }\n \n textAlign(CENTER, TOP);\n text(mainMessage, width / 2, height * 0.03);\n textSize(max(width*0.02, 10));\n text(subMessage, width / 2, height * 0.03 + max(width*0.03, 15) + 5);\n\n // Reset text align for other drawings if needed\n textAlign(CENTER, CENTER); \n}\n\n ","styles.css":"body {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f0f4f8; /* Light grayish blue */\n color: #333;\n line-height: 1.6;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nheader {\n background-color: #4CAF50; /* Green for plant/success */\n color: white;\n padding: 20px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nheader h1 {\n margin: 0 0 10px 0;\n font-size: 2em;\n}\nheader p {\n margin: 0;\n font-size: 18px;\n}\n\nmain {\n flex-grow: 1;\n padding: 20px;\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n box-sizing: border-box;\n font-size: 18px;\n}\n\n.simulation-layout {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n margin-bottom: 20px;\n}\n\n.controls, .simulation-display, .log {\n background-color: #ffffff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.controls {\n flex: 1;\n min-width: 300px;\n}\n\n.simulation-display {\n flex: 2;\n min-width: 320px; /* Accommodate p5 canvas */\n}\n\n.description {\n background-color: #ffffff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n margin-bottom: 20px; /* Add some space below the description */\n}\n\n.description h2, .description h3 {\n color: #4CAF50; /* Green for plant/success */\n margin-top: 0;\n margin-bottom: 10px;\n}\n.description h2 i {\n margin-right: 8px;\n}\n.description ul {\n list-style-position: outside;\n padding-left: 20px;\n margin-bottom: 0;\n}\n.description li {\n margin-bottom: 5px;\n}\n\n\n.controls h2, .simulation-display h2, .log h2, .description h2 {\n margin-top: 0;\n color: #4CAF50; /* Green for plant/success */\n border-bottom: 2px solid #4CAF50; /* Green for plant/success */\n padding-bottom: 10px;\n margin-bottom: 20px;\n font-size: 1.4em;\n}\n.controls h2 i, .simulation-display h2 i, .log h2 i, .description h2 i {\n margin-right: 8px;\n}\n\n.control-group {\n margin-bottom: 15px;\n}\n\n.control-group label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n color: #666;\n}\n\n.control-group input[type=\"number\"] {\n width: calc(100% - 20px);\n padding: 10px;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n font-size: 1em;\n box-sizing: border-box;\n}\n.control-group input[type=\"number\"]:focus {\n outline: none;\n border-color: #4CAF50; /* Green for plant/success */\n box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);\n}\n\n\n.action-buttons {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n}\n\n.action-buttons button {\n flex-grow: 1;\n padding: 12px 15px;\n font-size: 1em;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s ease, transform 0.1s ease;\n color: white;\n}\n.action-buttons button:active {\n transform: scale(0.98);\n}\n\n#startResetButton {\n background-color: #4CAF50; /* Green for plant/success */\n}\n#startResetButton:hover {\n background-color: #3e8e41;\n}\n#startResetButton.reset-mode {\n background-color: #f44336;\n}\n#startResetButton.reset-mode:hover {\n background-color: #d32f2f;\n}\n\n\n#nextStepButton {\n background-color: #2196F3; /* Blue for water/pump */\n}\n#nextStepButton:hover {\n background-color: #1e88e5;\n}\n\n#nextStepButton:disabled,\n.control-group input[type=\"number\"]:disabled {\n background-color: #bdbdbd;\n cursor: not-allowed;\n opacity: 0.7;\n}\n.control-group input[type=\"number\"]:disabled {\n background-color: #f0f0f0;\n}\n\n\n#plant-visualization-container {\n width: 100%;\n max-width: 350px; /* Control max size of canvas */\n min-height: 300px; /* Ensure space for canvas */\n margin: 0 auto 20px auto;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n overflow: hidden; /* clip canvas if it overflows by mistake */\n background-color: #e6f2ff; /* Light blue for canvas background */\n}\n#plant-visualization-container canvas {\n display: block; /* Removes any extra space below canvas */\n}\n\n.status-metrics div {\n font-size: 1.1em;\n margin-bottom: 10px;\n padding: 8px;\n background-color: #f9f9f9;\n border-radius: 4px;\n border-left: 4px solid #FFC107; /* Amber for highlights */\n}\n.status-metrics div i {\n margin-right: 8px;\n color: #FFC107; /* Amber for highlights */\n}\n.metric-value {\n font-weight: bold;\n color: #4CAF50; /* Green for plant/success */\n}\n\n#pumpIcon.pump-indicator-on {\n color: #2196F3; /* Blue for water/pump */\n}\n#pumpIcon.pump-indicator-off {\n color: #bdbdbd;\n}\n\n\n.log {\n width: 100%;\n box-sizing: border-box; /* Needed if main doesn't have width: 100% */\n}\n\n#eventLogList {\n list-style-type: none;\n padding: 0;\n margin: 0;\n max-height: 200px;\n overflow-y: auto;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n padding: 10px;\n background-color: #fdfdfd;\n}\n\n#eventLogList li {\n padding: 5px 0;\n border-bottom: 1px dashed #eee;\n font-size: 0.9em;\n color: #666;\n}\n#eventLogList li:last-child {\n border-bottom: none;\n}\n#eventLogList li.log-step-separator {\n font-weight: bold;\n color: #4CAF50; /* Green for plant/success */\n margin-top: 5px;\n}\n#eventLogList li.log-pump-on {\n color: #2196F3; /* Blue for water/pump */\n}\n#eventLogList li.log-pump-off {\n /* color: #666; default */\n}\n#eventLogList li.log-error {\n color: #f44336;\n font-weight: bold;\n}\n\n\nfooter {\n background-color: #333;\n color: white;\n text-align: center;\n padding: 15px;\n margin-top: auto; /* Pushes footer to bottom */\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n .simulation-layout {\n flex-direction: column;\n }\n .controls, .simulation-display {\n min-width: unset; /* Remove min-width for stacking */\n }\n header h1 {\n font-size: 1.8em;\n }\n .action-buttons {\n flex-direction: column;\n }\n}\n "}