Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html >
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>BrewPi reporting for duty!</title>
- <link type="text/css" href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
- <link type="text/css" href="css/style.css" rel="stylesheet"/>
- <link rel="apple-touch-icon" href="touch-icon-iphone.png">
- <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
- <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
- <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
- <meta name="apple-mobile-web-app-title" content="BrewPi">
- </head>
- <body>
- <div id="beer-panel" class="ui-widget ui-widget-content ui-corner-all">
- <div id="top-bar" class="ui-widget ui-widget-header ui-corner-all">
- <div id="lcd" class="lcddisplay">
- <span class="lcd-text">
- <span class="lcd-line" id="lcd-line-0">Live LCD waiting</span>
- <span class="lcd-line" id="lcd-line-1">for update from</span>
- <span class="lcd-line" id="lcd-line-2">script...</span>
- <span class="lcd-line" id="lcd-line-3"></span>
- </span>
- </div>
- <div id="logo-container">
- <img src="brewpi_logo.png">
- <div id=beer-name-container>
- <span>Fermenting: </span><a href='#' id="beer-name">Black IPA</a>
- <span class="data-logging-state"></span>
- </div>
- </div>
- <button class="script-status ui-state-error"></button>
- <button id="maintenance" class="ui-state-default">Maintenance panel</button>
- </div>
- <div class="chart-container">
- <div id="curr-beer-chart-label" class="beer-chart-label"></div>
- <div id="curr-beer-chart" class="beer-chart" style="width:815px; height:390px"></div>
- <div id="curr-beer-chart-controls" class="beer-chart-controls" style="display: none">
- <div id="curr-beer-chart-buttons" class="beer-chart-buttons">
- <div class="beer-chart-legend-row">
- <button class="refresh-curr-beer-chart" title="Refresh"></button>
- <div class="beer-chart-legend-label">Refresh Chart</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row last">
- <button class="chart-help" title="Help"></button>
- <div class="beer-chart-legend-label">Help</div>
- <br class="crystal" />
- </div>
- </div>
- <div id="curr-beer-chart-legend" class="beer-chart-legend">
- <div class="beer-chart-legend-row time">
- <div class="beer-chart-legend-time">Date/Time</div>
- </div>
- <div class="beer-chart-legend-row beerTemp">
- <div class="toggle beerTemp" onClick="toggleLine(this)"></div>
- <div class="beer-chart-legend-label" onClick="toggleLine(this)">Beer Temp</div>
- <div class="beer-chart-legend-value">--</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row beerSet">
- <div class="toggle beerSet" onClick="toggleLine(this)"></div>
- <div class="beer-chart-legend-label" onClick="toggleLine(this)">Beer Setting</div>
- <div class="beer-chart-legend-value">--</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row fridgeTemp">
- <div class="toggle fridgeTemp" onClick="toggleLine(this)"></div>
- <div class="beer-chart-legend-label" onClick="toggleLine(this)">Fridge Temp</div>
- <div class="beer-chart-legend-value">--</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row fridgeSet">
- <div class="toggle fridgeSet" onClick="toggleLine(this)"></div>
- <div class="beer-chart-legend-label" onClick="toggleLine(this)">Fridge Setting</div>
- <div class="beer-chart-legend-value">--</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row roomTemp">
- <div class="toggle roomTemp" onClick="toggleLine(this)"></div>
- <div class="beer-chart-legend-label" onClick="toggleLine(this)">Room Temp</div>
- <div class="beer-chart-legend-value">--</div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row state">
- <div class="state-indicator"></div>
- <div class="beer-chart-legend-label"></div>
- <br class="crystal" />
- </div>
- <div class="beer-chart-legend-row annotation last">
- <div class="toggleAnnotations dygraphDefaultAnnotation" onClick="toggleAnnotations(this)">A</div>
- <div class="beer-chart-legend-label" onClick="toggleAnnotations(this)">Annotations</div>
- <br class="crystal" />
- </div>
- </div>
- </div>
- </div>
- <div id="chart-help-popup" title="Beer graph help" style="display: none">
- <p>This chart displays all temperatures and state information logged by BrewPi.
- Not all temperatures are shown by default, but you can toggle them with the colored dots.</p>
- <p>Click and drag left or right to zoom horizontally, click and drag up or down to zoom vertically. Double click to zoom out.
- When zoomed in, you can hold shift to pan around. On your phone or tablet you can just pinch to zoom.</p>
- <p>The state information is shown as colored bars at the bottom of the graph, explanation below.</p>
- <div class="state-info"><span class="state-color state-idle"></span><span class="state-name">Idle</span>
- <span class="state-explanation">
- No actuator is active.
- </span>
- </div>
- <div class="state-info">
- <span class="state-color state-cooling"></span><span class="state-name">Cooling</span>
- <span class="state-explanation">
- The fridge is cooling!
- </span>
- </div>
- <div class="state-info"><span class="state-color state-heating"></span><span class="state-name">Heating</span>
- <span class="state-explanation">
- The heater is heating!
- </span>
- </div>
- <div class="state-info"><span class="state-color state-waiting-to-cool"></span><span class="state-name">Waiting to cool</span>
- <span class="state-explanation">
- The fridge is waiting to start cooling. It has to wait because BrewPi has just cooled or heated. There is a a minimum time for between cool cycles and a minimum time for switching from heating to cooling.
- </span>
- </div>
- <div class="state-info"><span class="state-color state-waiting-to-heat"></span><span class="state-name">Waiting to heat</span>
- <span class="state-explanation">
- Idem for heating. There is a a minimum time for between heat cycles and a minimum time for switching from cooling to heating.
- </span>
- </div>
- <div class="state-info"><span class="state-color state-cooling-min-time"></span><span class="state-name">Cooling minimum time</span>
- <span class="state-explanation">
- There is a minimum on time for each cool cycle. When the fridge hits target but has not cooled the minimum time, it will continue cooling until the minimum time has passed.
- </span>
- </div>
- <div class="state-info"><span class="state-color state-heating-min-time"></span><span class="state-name">Heating minimum time</span>
- <span class="state-explanation">
- There is a minimum on time for each heat cycle too. When the fridge hits target but has not heated the minimum time, it will continue heating until the minimum time has passed.
- </span>
- </div>
- <div class="state-info"><span class="state-color state-waiting-peak"></span><span class="state-name">Waiting for peak detect</span>
- <span class="state-explanation">
- BrewPi estimates fridge temperature overshoot to be able to turn off the actuators early. To adjust the estimators, it has to detect the peaks in fridge temperature.
- When BrewPi would be allowed to heat/cool by the time limits but no peak has been detected yet for previous cycle, it waits in this state for a peak.
- </span>
- </div>
- </div>
- </div>
- <div id="control-panel" style="display:none"> <!--// hide while loading -->
- <ul>
- <div id="control-bar-text">
- <div id="set-mode-text">Set temperature mode:</div>
- <div id="status-text">Status:</div>
- </div>
- <li><a href="#profile-control"><span>Beer profile</span></a></li>
- <li><a href="#beer-constant-control"><span>Beer constant</span></a></li>
- <li><a href="#fridge-constant-control"><span>Fridge constant</span></a></li>
- <li><a href="#temp-control-off"><span>Off</span></a></li>
- <button id="apply-settings">Apply</button>
- <div id="status-message" class="ui-state-error ui-corner-all">
- <p>
- <span id="icon" class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
- <span id="message">Not loaded</span>
- </p>
- </div>
- </ul>
- <div id="profile-control">
- <div id="controls">
- <button id="load-controls">Open</button>
- <button id="new-controls">New</button>
- <button id="edit-controls">Edit</button>
- <button id="saveas-controls">Save As</button>
- <button id="refresh-controls">Refresh</button>
- <button id="help-profile" class="profile-help">Help</button>
- </div>
- <div id="profileNameDate">
- <div><span class="profileTableLabel">Profile Name:</span><span class="profileTableValue" id="profileTableName"></span></div>
- <div><span class="profileTableLabel">Start Date:</span><span class="profileTableValue" id="profileTableStartDate"></span></div>
- </div>
- <div id="profileChartDiv"></div>
- <div id="profileTableDiv"></div>
- <div id="profileSelectDiv">
- <div id="profileSelectChartDiv"><span class="chart-placeholder">Click a profile to load a preview here</span></div>
- <ol id="profileSelect"></ol>
- <div id="profileSelectTableDiv" style="display: none;"></div>
- </div>
- <div id="profileEditDiv">
- <div id="profileEditChartDiv"><span class="chart-placeholder">Profile preview will be displayed here</span></div>
- <div id="profileEditControls">
- <div class="profileEditFieldSet">
- <div id="profileEditNameLabel" class="profileTableLabel edit">Profile Name:</div><input class="profileTableField" type="text" id="profileEditName" name="profileEditName" value="" />
- <div class="profileTableLabel edit">Start Date:</div><input class="profileTableField" type="text" id="profileEditStartDate" name="profileEditStartDate" value="" tabindex="-1" />
- </div>
- <button class="halfwidth-button" type="button" id="profileEditNowButton">Start Now</button>
- <button class="halfwidth-button" type="button" id="profileEditAddCurrentButton">Insert Now</button>
- <div id="profileSaveError">Error Saving Profile!</div>
- </div>
- </div>
- <div id="profileHelpDiv">
- <p> A temperature profile is a set of timestamps and beer temperature settings. Between the points you define, the temperature is interpolated.
- Using profile mode, you can easily do slow temperature increases/decreases, for example: set the temperature to 20 degrees on day 1 and 23 on day 4.
- This will result in a temperature of 22 degrees on day 3.
- </p>
- <span class="help-h1">Open</span>
- <p>
- The <i>Open</i> button shows a list of saved profiles. Clicking them loads the profile in the web interface, but does <span
- style="text-decoration: underline;">not</span> activate it yet. When you hit 'Apply', the profile is set as active and the script will start following it.
- Remember to change the start date when loading an old profile!
- </p>
- <span class="help-h1">New</span>
- <p>
- When you click the <i>New</i> button, a dialog will open where you can enter a name for the profile and add temperature points. Decimals are allowed in both columns!
- </p><p>
- You can right-click on a row to insert a new row or to delete the row. There will always be an empty row at the bottom too.
- </p><p>
- The <i>Start Now</i> button sets the start date of the profile to the current date on your computer. Make sure your Pi and your computer are in sync.
- </p><p>
- The <i>Insert Now</i> button adds a new point to the profile at the current date and the current beer temperature setting.
- This allows you to change a running profile 'from now on', while not changing the part of the profile that already passed.
- </p><p>
- When you are done with your profile, click <i>Save</i>. This will save the profile on the Raspberry Pi and load it in the web interface.
- </p>
- <p>Note: The table is kept sorted based on the Date and Time column. The 'Date and Time' column cannot be edited directly: it is calculated from the start date and the Day column.</p>
- <span class="help-h1">Edit</span>
- <p>
- The <i>Edit profile</i> button allows you to the edit the currently loaded profile.
- </p>
- <span class="help-h1">Save As</span>
- <p>
- The <i>Save As</i> opens the same dialog as the Edit button, but allows you to save under a new name after editing.
- </p>
- <span class="help-h1">Refresh</span>
- <p>
- The refresh button can be useful if you edited the profile outside of the web interface: it reloads the profile from the Raspberry Pi.
- </p>
- <span class="help-h1">Final notes..</span>
- <p>
- If your start date is in the future, BrewPi will use the first temperature in the profile. If your last date is in the past, BrewPi will use the last temperature.
- </p><p>
- You can leave a temperature cell empty to temporarily disable temperature control in profile mode.
- You can start a profile with an empty temperature cell at day 0 to postpone starting temperature control or you can end with an empty cell to disable temperature control after a while.
- </p><p>
- Take into account that your points define 'line pieces', to end with 22 degrees for a while and then OFF you define: 22, 22, empty.
- </p><p>
- It might sound a bit complicated now, but just play around with the editor a bit and look at the changes in the chart. It is not as complicated as it sounds here.
- </p>
- </div>
- </div>
- <div id="beer-constant-control">
- <div id="beer-temp" class="temp-display">
- <div class="temp-container"></div>
- <button id="beer-temp-up" class="temp-up"></button>
- <input class='temperature' /><span class='degree'>°F</span>
- <button id="beer-temp-down" class="temp-down"></button>
- </div>
- </div>
- <div id="fridge-constant-control">
- <div id="fridge-temp" class="temp-display">
- <div class="temp-container"></div>
- <button id="fridge-temp-up" class="temp-up"></button>
- <input class='temperature' /><span class='degree'>°F</span>
- <button id="fridge-temp-down" class="temp-down"></button>
- </div>
- </div>
- <div id="temp-control-off">
- <span id="temp-off-text">Temperature control disabled. Fridge will not cool or heat, but will still log temperatures.</span>
- </div>
- </div>
- <div id="maintenance-panel" style="display:none"> <!--// hide while loading -->
- <ul>
- <button class="script-status"></button>
- <li><a href="#settings"><span class="setting-name">Settings</span></a></li>
- <li><a href="#view-logs"><span>View logs</span></a></li>
- <li><a href="previous_beers.php"><span>Previous Beers</span></a></li>
- <li><a href="#control-algorithm"><span>Control Algorithm</span></a></li>
- <li><a href="#device-config"><span>Device Configuration</span></a></li>
- <li><a href="#advanced-settings"><span>Advanced Settings</span></a></li>
- <li><a href="#reprogram-arduino"><span>Reprogram <span class="boardMoniker">controller</span></span></a></li>
- <!--kinda dirty to have buttons in the ul, but the ul is styled as a nice header by jQuery UI -->
- </ul>
- <div id="reprogram-arduino">
- <p>Here you can upload a <span class="programFileType">firmware</span> file which will be uploaded to the <span class="boardMoniker">controller</span> by the Python script.
- The script will automatically restart itself after programming.
- Just hit the back button on your browser to continue running BrewPi.</p>
- <div id = "program-container">
- <!-- This form has a hidden iFrame as target, so the full page is not refreshed -->
- <form action="program_arduino.php" method="post" enctype="multipart/form-data" target="upload-target">
- <div id="program-options">
- <div class="program-option">
- <label for="file"><span class="programFileType">HEX</span> file:</label>
- <input type="file" name="file" id="file" /> <!-- add max file size?-->
- </div>
- <div class="program-option">
- <label for="boardType"> Board type:</label>
- <select name="boardType" class="boardType">
- <option value="leonardo">Leonardo</option>
- <option value="uno">Uno</option>
- <option value="atmega328">ATmega328 based</option>
- <option value="diecimila">Atmega168 based</option>
- <option value="mega2560">Mega 2560</option>
- <option value="mega">Mega 1280</option>
- <option value="core">Spark Core</option>
- <option value="photon">Particle Photon</option>
- </select>
- </div>
- <div class="program-option">
- <label for="restoreSettings">Restore old settings after programming</label>
- <input type="radio" name="restoreSettings" value="true" checked>Yes
- <input type="radio" name="restoreSettings" value="false">No
- </div>
- <div class="program-option">
- <label for="restoreDevices">Restore installed devices after programming</label>
- <input type="radio" name="restoreDevices" value="true" checked>Yes
- <input type="radio" name="restoreDevices" value="false">No
- </div>
- </div>
- <input id="program-submit-button" type="submit" name="Program" value="Program">
- </form>
- <h3 id="program-stderr-header">Script stderr output will auto-refresh while programming if you keep this tab open</h3>
- <div class="stderr console-box"></div>
- <iframe id="upload-target" name="upload-target" src="about:blank" style="width:0;height:0;border:0px solid #fff;"></iframe>
- </div>
- </div>
- <div id="settings">
- <div class="settings-container">
- <div class="setting-container">
- <span class="setting-name">Log data point every:</span>
- <select id="interval">
- <option value="10">10 Seconds</option>
- <option value="30">30 Seconds</option>
- <option value="60">1 Minute</option>
- <option value="120">2 Minutes</option>
- <option value="300">5 Minutes</option>
- <option value="600">10 Minutes</option>
- <option value="1800">30 Minutes</option>
- <option value="3600">1 hour</option>
- </select>
- <button id="apply-interval" class="apply-button">Apply</button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Profile name:</span>
- <input id="profile-name" value="(BCS) Oatmeal Stout" size=30 type="text" />
- <button class="apply-profile-name apply-button">Apply</button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Date format:</span>
- <select id="datetime-format-display">
- <option selected="selected">mm/dd/yy</option>
- <option >dd/mm/yy</option>
- </select>
- <button class="apply-datetime-format-display apply-button">Apply</button>
- </div>
- </div>
- </div>
- <div id="control-algorithm">
- <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- <span class='container-title'>PID algorithm for fridge setting</span>
- <button class="cs update-from-arduino">Update control settings</button>
- <button class="cv update-from-arduino">Update control variables</button>
- <button class="cc update-from-arduino">Update control constants</button>
- </div>
- <div class="algorithm-container ui-widget-content ui-corner-all">
- <div class="help-panel">
- <p>
- The red values are control settings. The beer setting is set by the profile or constant. The fridge setting is set by PID or constant.
- <br/>
- The orange values are control variables. These are intermediate results of the fridge setting calculation.
- <br/>
- The blue values are constants, they never change automatically.
- </p>
- </div>
- <div class="equation">
- <div class="cv beerDiff"><span class="name">Beer temp. error</span><span class="val"></span></div>
- <span class="operator multiply">*</span>
- <div class="cc Kp"><span class="name">Kp</span><span class="val"></span></div>
- <span class="operator equals">=</span>
- <div class="cv p"><span class="name">P</span><span class="val"></span></div>
- </div>
- <div class="equation">
- <div class="cv diffIntegral"><span class="name">Beer temp. error integral</span><span class="val"></span></div>
- <span class="operator multiply">*</span>
- <div class="cc Ki"><span class="name">Ki</span><span class="val"></span></div>
- <span class="operator equals">=</span>
- <div class="cv i"><span class="name">I</span><span class="val"></span></div>
- </div>
- <div class="equation">
- <div class="cv beerSlope"><span class="name">Beer temp. derivative</span><span class="val"></span></div>
- <span class="operator multiply">*</span>
- <div class="cc Kd"><span class="name">Kd</span><span class="val"></span></div>
- <span class="operator equals">=</span>
- <div class="cv d"><span class="name">D</span><span class="val"></span></div>
- </div>
- <div class="sum-line"><div class="line"></div><span class="operator plus">+</span></div>
- <div class="equation">
- <div class="cs beerSet"><span class="name">Beer Setting</span><span class="val"></span></div>
- <span class="operator plus">+</span>
- <div class="cv pid-result"><span class="name">P + I + D</span><span class="val"></span></div>
- <span class="operator equals">=</span>
- <div class="cs fridgeSet"><span class="name">FridgeSetting</span><span class="val"></span></div>
- </div>
- </div>
- <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- <span class='container-title'>Predictive ON/OFF and peak detection</span>
- <button class="cs update-from-arduino">Update control settings</button>
- <button class="cv update-from-arduino">Update control variables</button>
- <button class="cc update-from-arduino">Update control constants</button>
- </div>
- <div class="algorithm-container ui-widget-content ui-corner-all">
- <div class="help-panel">
- <p>
- The heater and cooler are controlled by a predictive on-off algorithm.
- BrewPi estimates the overshoot that would happen when it would go to IDLE. When that lands on the target temperature, it goes to IDLE.
- The overshoot is estimated as time active in hours * estimator.
- BrewPi detects the actual peaks and compares them to the prediction to automatically adjusts the estimators.
- You can change them manually in 'advanced settings' when they are far off.
- </p>
- </div>
- <div class="on-off-parameters">
- <div class="cv estPeak"><span class="name">Estimated peak</span><span class="val"></span></div>
- <div class="cv negPeak"><span class="name">Last detected negative peak</span><span class="val"></span></div>
- <div class="cv negPeakEst"><span class="name">Last target for negative peak</span><span class="val"></span></div>
- <div class="cv posPeak"><span class="name">Last detected positive peak</span><span class="val"></span></div>
- <div class="cv posPeakEst"><span class="name">Last target for positive peak</span><span class="val"></span></div>
- <div class="cs coolEst"><span class="name">Cooling overshoot estimator</span><span class="val"></span></div>
- <div class="cs heatEst"><span class="name">Heating overshoot estimator</span><span class="val"></span></div>
- </div>
- </div>
- </div>
- <div id="advanced-settings">
- <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- <span class='container-title'>Control settings</span>
- <button class="cs load-defaults">Reload defaults</button>
- <button class="cs receive-from-script">Receive from script</button>
- <button class="cs update-from-arduino">Update from <span class="boardMoniker">controller</span></button>
- </div>
- <div id="control-settings-container" class="ui-widget-content ui-corner-all">
- <div class="setting-container">
- <span class="setting-name">Mode</span>
- <span class="explanation">Active temperature control mode. Use to control panel to switch (apply button).</span>
- <select name="mode" class="cs mode">
- <option value="b">Beer Constant</option>
- <option value="p">Beer Profile</option>
- <option value="f">Fridge Constant</option>
- <option value="o">Off</option>
- <option value="t">Test mode</option>
- </select>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Beer Temperature Setting</span>
- <span class="explanation">Beer temperature setting when in profile or beer constant mode. Use the control panel to adjust.</span>
- <input type="text" name="beerSet" class="cs beerSet">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Fridge Temperature Setting</span>
- <span class="explanation">Automatically adjust when in profile/beer constant mode. Use the control panel to adjust.</span>
- <input type="text" name="fridgeSet" class="cs fridgeSet">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Cooling overshoot estimator</span>
- <span class="explanation">This is a self learning estimator for the overshoot when turning the cooler off.
- It is adjusted automatically, but you can set adjust it manually here. This does not stop further automatic adjustment.</span>
- <input type="text" name="coolEst" class="cs coolEst">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Heating overshoot estimator</span>
- <span class="explanation">This is a self learning estimator for the overshoot when turning the heater off.
- It is adjusted automatically, but you can set adjust it manually here. This does not stop further automatic adjustment.</span>
- <input type="text" name="heatEst" class="cs heatEst">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- </div>
- <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- <span class='container-title'>Control constants</span>
- <button class="cc load-defaults">Reload defaults</button>
- <button class="cc receive-from-script">Receive from script</button>
- <button class="cc update-from-arduino">Update from <span class="boardMoniker">controller</span></button>
- </div>
- <div id="control-constants-container" class="ui-widget-content ui-corner-all">
- <div class="setting-container">
- <span class="setting-name">Temperature format</span>
- <span class="explanation">Switch your temperature format here. The algorithm always uses fixed point Celcius format internally,
- but it converts all settings that go in or out to the right format.</span>
- <select name="tempFormat" class="cc tempFormat">
- <option value="C">Celsius</option>
- <option value="F">Fahrenheit</option>
- </select>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Temperature setting minimum</span>
- <span class="explanation">The fridge and beer temperatures cannot go below this value.</span>
- <input type="text" name="tempSetMin" class="cc tempSetMin">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Temperature setting maximum</span>
- <span class="explanation">The fridge and beer temperatures cannot go above this value.</span>
- <input type="text" name="tempSetMax" class="cc tempSetMax">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <span class="section-explanation">The fridge temperature is controlled with PID. The fridge setting = beer setting + PID.
- The proportional part is linear with the temperature error.
- The integral part slowly increases when an error stays present, this prevents steady state errors.
- The derivative part is in the opposite direction to the proportional part. This prevents overshoot: it lowers the PID value when there's 'momentum' in the right direction.
- </span>
- <div class="setting-container">
- <span class="setting-name">PID: Kp</span>
- <span class="explanation">The beer temperature error is multiplied by Kp to give the proportional part of the PID value.</span>
- <input type="text" name="Kp" class="cc Kp">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">PID: Ki</span>
- <span class="explanation">When the integral is active, the error is added to the integral every 30 seconds. The result is multiplied by Ki to give the integral part.</span>
- <input type="text" name="Ki" class="cc Ki">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">PID: Kd</span>
- <span class="explanation">The derivative of the beer temperature is multiplied by Kd to give the derivative part of the PID value.</span>
- <input type="text" name="Kd" class="cc Kd">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">PID: maximum</span>
- <span class="explanation">You can define the maximum difference between the beer temp setting and fridge temp setting here. The fridge setting will be clipped to this range.</span>
- <input type="text" name="pidMax" class="cc pidMax">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Integrator: maximum temp error °F</span>
- <span class="explanation">The integral is only active when the temperature is close to the target temperature. This is the maximum error for which the integral is active..</span>
- <input type="text" name="iMaxErr" class="cc iMaxErr">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Temperature idle range top</span>
- <span class="explanation">When the fridge temperature is within this range, it won't heat or cool, regardless of other settings.</span>
- <input type="text" name="idleRangeH" class="cc idleRangeH">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Temperature idle range bottom</span>
- <span class="explanation">When the fridge temperature is within this range, it won't heat or cool, regardless of other settings.</span>
- <input type="text" name="idleRangeL" class="cc idleRangeL">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Heating target upper bound</span>
- <span class="explanation">When the overshoot lands under this value, the peak is within target range and the estimator is not adjusted.</span>
- <input type="text" name="heatTargetH" class="cc heatingTargetH">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Heating target lower bound</span>
- <span class="explanation">When the overshoot lands above this value, the peak is within target range and the estimator is not adjusted.</span>
- <input type="text" name="heatTargetL" class="cc heatingTargetL">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Cooling target upper bound</span>
- <span class="explanation">When the overshoot lands under this value, the peak is within target range and the estimator is not adjusted.</span>
- <input type="text" name="coolTargetH" class="cc coolingTargetH">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Cooling target lower bound</span>
- <span class="explanation">When the overshoot lands above this value, the peak is within target range and the estimator is not adjusted.</span>
- <input type="text" name="coolTargetL" class="cc coolingTargetL">
- <button class="send-button">Send to <span class="boardMoniker">Arduino</span></button>
- </div>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- <div class="setting-container">
- <span class="setting-name">Maximum time in seconds for heating overshoot estimator</span>
- <span class="explanation">The time the fridge has been heating is used to estimate overshoot. This is the maximum time that is taken into account.</span>
- <input type="text" name="maxHeatTimeForEst" class="cc maxHeatTimeForEst">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Maximum time in seconds for cooling overshoot estimator</span>
- <span class="explanation">The time the fridge has been cooling is used to estimate overshoot. This is the maximum time that is taken into account.</span>
- <input type="text" name="maxCoolTimeForEst" class="cc maxCoolTimeForEst">
- <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Beer fast filter delay time</span>
- <span class="explanation">The beer fast filter is used for display and data logging. More filtering give a smoother line, but also more delay.</span>
- <select name=beerFastFilt class="cc beerFastFilt"><option value=0> 9 seconds</option><option value=1> 18 seconds</option><option value=2> 39 seconds</option><option value=3> 78 seconds</option><option value=4> 159 seconds</option><option value=5> 318 seconds</option><option value=6> 639 seconds</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Beer slow filter delay time</span>
- <span class="explanation">The beer slow filter is used for the control algorithm. The fridge temperature setting is calculated from this filter.
- Because a small difference in beer temperature causes a large adjustment in the fridge temperature, more smoothing is needed.</span>
- <select name=beerSlowFilt class="cc beerSlowFilt"><option value=0> 9 seconds</option><option value=1> 18 seconds</option><option value=2> 39 seconds</option><option value=3> 78 seconds</option><option value=4> 159 seconds</option><option value=5> 318 seconds</option><option value=6> 639 seconds</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Beer slope filter delay time</span>
- <span class="explanation">The slope is calculated every 30 seconds and fed to this filter. More filtering means a smoother fridge setting.</span>
- <select name=beerSlopeFilt class="cc beerSlopeFilt"><option value=0> 27 seconds</option><option value=1> 54 seconds</option><option value=2> 2 minutes</option><option value=3> 4 minutes</option><option value=4> 8 minutes</option><option value=5> 16 minutes</option><option value=6> 32 minutes</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Fridge fast filter delay time</span>
- <span class="explanation">The fridge fast filter is used for on-off control, display and logging. It needs to have a small delay.</span>
- <select name=fridgeFastFilt class="cc fridgeFastFilt"><option value=0> 9 seconds</option><option value=1> 18 seconds</option><option value=2> 39 seconds</option><option value=3> 78 seconds</option><option value=4> 159 seconds</option><option value=5> 318 seconds</option><option value=6> 639 seconds</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Fridge slow filter delay time</span>
- <span class="explanation">The fridge slow filter is used for peak detection to adjust the overshoot estimators. More smoothing is needed to prevent small fluctuations to be recognized as peaks.</span>
- <select name=fridgeSlowFilt class="cc fridgeSlowFilt"><option value=0> 9 seconds</option><option value=1> 18 seconds</option><option value=2> 39 seconds</option><option value=3> 78 seconds</option><option value=4> 159 seconds</option><option value=5> 318 seconds</option><option value=6> 639 seconds</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Fridge slope filter delay time</span>
- <span class="explanation">The fridge slope filter is not used in the current version.</span>
- <select name=fridgeSlopeFilt class="cc fridgeSlopeFilt"><option value=0> 27 seconds</option><option value=1> 54 seconds</option><option value=2> 2 minutes</option><option value=3> 4 minutes</option><option value=4> 8 minutes</option><option value=5> 16 minutes</option><option value=6> 32 minutes</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Use light as heater</span>
- <span class="explanation">If this option is set to 'Yes' the light wil be used as a heater.</span>
- <select name=lah class="cc lah"><option value=1> Yes</option><option value=0> No</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <div class="setting-container">
- <span class="setting-name">Trigger rotary encoder at every ...</span>
- <span class="explanation">When you feel like you have to turn your rotary encoder two steps for every trigger, set this to half step.</span>
- <select name=hs class="cc hs"><option value=0> Full step</option><option value=1> Half step</option></select> <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
- </div>
- <span class="section-explanation">
- <p>With the button below, you can reset the entire <span class="boardMoniker">controller</span> to factory defaults.</p>
- <p>This will reset all settings and will remove all installed devices.</p>
- <button class="reset-controller-button">Reset <span class="boardMoniker">controller</span> to factory defaults</button>
- </span>
- </div>
- </div>
- <div id="device-config">
- <div class="console-box" id="device-console">
- <span></span>
- </div>
- <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- <span class='container-title'>Device List</span>
- <div class="refresh-options-container">
- <div class="refresh-option">
- <input type="checkbox" name="read-values" id="read-values"/><label for="read-values">Read values</label>
- </div>
- </div>
- <button class="refresh-device-list">Refresh device list</button>
- </div>
- <div class="device-list-container ui-widget-content ui-corner-all">
- <div class ="spinner-position"></div>
- <div class="device-list"></div>
- </div>
- </div>
- <div id="view-logs">
- <div id="log-buttons" style="clear:both">
- <button id="erase-logs">Erase logs</button>
- <button id="auto-refresh-logs">Enable auto refresh</button>
- <button id="refresh-logs">Refresh</button>
- </div>
- <h3>stderr:</h3>
- <div class="stderr console-box"></div>
- <h3>stdout:</h3>
- <div class="stdout console-box"></div>
- </div>
- </div>
- <!-- Load scripts after the body, so they don't block rendering of the page -->
- <!-- <script type="text/javascript" src="js/jquery-1.11.0.js"></script> -->
- <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
- <script type="text/javascript" src="js/spin.js"></script>
- <script type="text/javascript" src="js/dygraph-combined.js"></script>
- <script type="text/javascript">
- // pass parameters to JavaScript
- window.tempFormat = 'F';
- window.beerName = "Black%20IPA";
- window.profileName = "(BCS)%20Oatmeal%20Stout";
- window.dateTimeFormat = "yy-mm-dd";
- window.dateTimeFormatDisplay = "mm/dd/yy";
- </script>
- <script type="text/javascript" src="js/main.js"></script>
- <script type="text/javascript" src="js/device-config.js"></script>
- <script type="text/javascript" src="js/control-panel.js"></script>
- <script type="text/javascript" src="js/maintenance-panel.js"></script>
- <script type="text/javascript" src="js/beer-chart.js"></script>
- <script type="text/javascript" src="js/profile-table.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement