API tools faq
paste
Advertisement
Guest User

Brewpi

a guest
Aug 16th, 2016
170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 41.36 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html >
  3. <html>
  4.     <head>
  5.         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.         <title>BrewPi reporting for duty!</title>
  7.         <link type="text/css" href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
  8.         <link type="text/css" href="css/style.css" rel="stylesheet"/>
  9.         <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  10.         <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
  11.         <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
  12.         <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
  13.         <meta name="apple-mobile-web-app-title" content="BrewPi">
  14.     </head>
  15.     <body>
  16.         <div id="beer-panel" class="ui-widget ui-widget-content ui-corner-all">
  17.             <div id="top-bar" class="ui-widget ui-widget-header ui-corner-all">
  18.     <div id="lcd" class="lcddisplay">
  19.         <span class="lcd-text">
  20.             <span class="lcd-line" id="lcd-line-0">Live LCD waiting</span>
  21.             <span class="lcd-line" id="lcd-line-1">for update from</span>
  22.             <span class="lcd-line" id="lcd-line-2">script...</span>
  23.             <span class="lcd-line" id="lcd-line-3"></span>
  24.         </span>
  25.     </div>
  26.     <div id="logo-container">
  27.         <img src="brewpi_logo.png">
  28.         <div id=beer-name-container>
  29.             <span>Fermenting: </span><a href='#' id="beer-name">Black IPA</a>
  30.             <span class="data-logging-state"></span>
  31.         </div>
  32.     </div>
  33.     <button class="script-status ui-state-error"></button>
  34.     <button id="maintenance" class="ui-state-default">Maintenance panel</button>
  35. </div>
  36. <div class="chart-container">
  37.     <div id="curr-beer-chart-label" class="beer-chart-label"></div>
  38.     <div id="curr-beer-chart" class="beer-chart" style="width:815px; height:390px"></div>
  39.     <div id="curr-beer-chart-controls" class="beer-chart-controls" style="display: none">
  40.         <div id="curr-beer-chart-buttons" class="beer-chart-buttons">
  41.             <div class="beer-chart-legend-row">
  42.                 <button class="refresh-curr-beer-chart" title="Refresh"></button>
  43.                 <div class="beer-chart-legend-label">Refresh Chart</div>
  44.                 <br class="crystal" />
  45.             </div>
  46.             <div class="beer-chart-legend-row last">
  47.                 <button class="chart-help" title="Help"></button>
  48.                 <div class="beer-chart-legend-label">Help</div>
  49.                 <br class="crystal" />
  50.             </div>
  51.         </div>
  52.         <div id="curr-beer-chart-legend" class="beer-chart-legend">
  53.             <div class="beer-chart-legend-row time">
  54.                 <div class="beer-chart-legend-time">Date/Time</div>
  55.             </div>
  56.             <div class="beer-chart-legend-row beerTemp">
  57.                 <div class="toggle beerTemp" onClick="toggleLine(this)"></div>
  58.                 <div class="beer-chart-legend-label" onClick="toggleLine(this)">Beer Temp</div>
  59.                 <div class="beer-chart-legend-value">--</div>
  60.                 <br class="crystal" />
  61.             </div>
  62.             <div class="beer-chart-legend-row beerSet">
  63.                 <div class="toggle beerSet" onClick="toggleLine(this)"></div>
  64.                 <div class="beer-chart-legend-label" onClick="toggleLine(this)">Beer Setting</div>
  65.                 <div class="beer-chart-legend-value">--</div>
  66.                 <br class="crystal" />
  67.             </div>
  68.             <div class="beer-chart-legend-row fridgeTemp">
  69.                 <div class="toggle fridgeTemp" onClick="toggleLine(this)"></div>
  70.                 <div class="beer-chart-legend-label" onClick="toggleLine(this)">Fridge Temp</div>
  71.                 <div class="beer-chart-legend-value">--</div>
  72.                 <br class="crystal" />
  73.             </div>
  74.             <div class="beer-chart-legend-row fridgeSet">
  75.                 <div class="toggle fridgeSet" onClick="toggleLine(this)"></div>
  76.                 <div class="beer-chart-legend-label" onClick="toggleLine(this)">Fridge Setting</div>
  77.                 <div class="beer-chart-legend-value">--</div>
  78.                 <br class="crystal" />
  79.             </div>
  80.             <div class="beer-chart-legend-row roomTemp">
  81.                 <div class="toggle roomTemp" onClick="toggleLine(this)"></div>
  82.                 <div class="beer-chart-legend-label" onClick="toggleLine(this)">Room Temp</div>
  83.                 <div class="beer-chart-legend-value">--</div>
  84.                 <br class="crystal" />
  85.             </div>
  86.             <div class="beer-chart-legend-row state">
  87.                 <div class="state-indicator"></div>
  88.                 <div class="beer-chart-legend-label"></div>
  89.                 <br class="crystal" />
  90.             </div>
  91.             <div class="beer-chart-legend-row annotation last">
  92.                 <div class="toggleAnnotations dygraphDefaultAnnotation" onClick="toggleAnnotations(this)">A</div>
  93.                 <div class="beer-chart-legend-label" onClick="toggleAnnotations(this)">Annotations</div>
  94.                 <br class="crystal" />
  95.             </div>
  96.         </div>
  97.     </div>
  98. </div>
  99. <div id="chart-help-popup" title="Beer graph help" style="display: none">
  100.     <p>This chart displays all temperatures and state information logged by BrewPi.
  101.         Not all temperatures are shown by default, but you can toggle them with the colored dots.</p>
  102.     <p>Click and drag left or right to zoom horizontally, click and drag up or down to zoom vertically. Double click to zoom out.
  103.         When zoomed in, you can hold shift to pan around. On your phone or tablet you can just pinch to zoom.</p>
  104.     <p>The state information is shown as colored bars at the bottom of the graph, explanation below.</p>
  105.     <div class="state-info"><span class="state-color state-idle"></span><span class="state-name">Idle</span>
  106.         <span class="state-explanation">
  107.             No actuator is active.
  108.         </span>
  109.     </div>
  110.     <div class="state-info">
  111.         <span class="state-color state-cooling"></span><span class="state-name">Cooling</span>
  112.         <span class="state-explanation">
  113.             The fridge is cooling!
  114.         </span>
  115.     </div>
  116.     <div class="state-info"><span class="state-color state-heating"></span><span class="state-name">Heating</span>
  117.         <span class="state-explanation">
  118.             The heater is heating!
  119.         </span>
  120.     </div>
  121.     <div class="state-info"><span class="state-color state-waiting-to-cool"></span><span class="state-name">Waiting to cool</span>
  122.         <span class="state-explanation">
  123.             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.
  124.         </span>
  125.     </div>
  126.     <div class="state-info"><span class="state-color state-waiting-to-heat"></span><span class="state-name">Waiting to heat</span>
  127.         <span class="state-explanation">
  128.             Idem for heating. There is a a minimum time for between heat cycles and a minimum time for switching from cooling to heating.
  129.         </span>
  130.     </div>
  131.     <div class="state-info"><span class="state-color state-cooling-min-time"></span><span class="state-name">Cooling minimum time</span>
  132.         <span class="state-explanation">
  133.             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.
  134.         </span>
  135.     </div>
  136.     <div class="state-info"><span class="state-color state-heating-min-time"></span><span class="state-name">Heating minimum time</span>
  137.         <span class="state-explanation">
  138.             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.
  139.         </span>
  140.     </div>
  141.     <div class="state-info"><span class="state-color state-waiting-peak"></span><span class="state-name">Waiting for peak detect</span>
  142.         <span class="state-explanation">
  143.             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.
  144.             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.
  145.         </span>
  146.     </div>
  147. </div>
  148.  
  149.         </div>
  150.         <div id="control-panel" style="display:none"> <!--// hide while loading -->
  151.             <ul>
  152.     <div id="control-bar-text">
  153.         <div id="set-mode-text">Set temperature mode:</div>
  154.         <div id="status-text">Status:</div>
  155.     </div>
  156.     <li><a href="#profile-control"><span>Beer profile</span></a></li>
  157.     <li><a href="#beer-constant-control"><span>Beer constant</span></a></li>
  158.     <li><a href="#fridge-constant-control"><span>Fridge constant</span></a></li>
  159.     <li><a href="#temp-control-off"><span>Off</span></a></li>
  160.     <button id="apply-settings">Apply</button>
  161.     <div id="status-message" class="ui-state-error ui-corner-all">
  162.         <p>
  163.             <span id="icon" class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
  164.             <span id="message">Not loaded</span>
  165.         </p>
  166.     </div>
  167. </ul>
  168. <div id="profile-control">
  169.     <div id="controls">
  170.         <button id="load-controls">Open</button>
  171.         <button id="new-controls">New</button>
  172.         <button id="edit-controls">Edit</button>
  173.         <button id="saveas-controls">Save As</button>
  174.         <button id="refresh-controls">Refresh</button>
  175.         <button id="help-profile" class="profile-help">Help</button>
  176.     </div>
  177.     <div id="profileNameDate">
  178.         <div><span class="profileTableLabel">Profile Name:</span><span class="profileTableValue" id="profileTableName"></span></div>
  179.         <div><span class="profileTableLabel">Start Date:</span><span class="profileTableValue" id="profileTableStartDate"></span></div>
  180.     </div>
  181.     <div id="profileChartDiv"></div>
  182.     <div id="profileTableDiv"></div>
  183.     <div id="profileSelectDiv">
  184.         <div id="profileSelectChartDiv"><span class="chart-placeholder">Click a profile to load a preview here</span></div>
  185.         <ol id="profileSelect"></ol>
  186.         <div id="profileSelectTableDiv" style="display: none;"></div>
  187.     </div>
  188.     <div id="profileEditDiv">
  189.            <div id="profileEditChartDiv"><span class="chart-placeholder">Profile preview will be displayed here</span></div>
  190.            <div id="profileEditControls">
  191.            <div class="profileEditFieldSet">
  192.                <div id="profileEditNameLabel" class="profileTableLabel edit">Profile Name:</div><input class="profileTableField" type="text" id="profileEditName" name="profileEditName" value="" />
  193.                <div class="profileTableLabel edit">Start Date:</div><input class="profileTableField" type="text" id="profileEditStartDate" name="profileEditStartDate" value="" tabindex="-1" />
  194.            </div>
  195.            <button class="halfwidth-button" type="button" id="profileEditNowButton">Start Now</button>
  196.            <button class="halfwidth-button" type="button" id="profileEditAddCurrentButton">Insert Now</button>
  197.            <div id="profileSaveError">Error Saving Profile!</div>
  198.            </div>
  199.     </div>
  200.     <div id="profileHelpDiv">
  201.         <p> A temperature profile is a set of timestamps and beer temperature settings. Between the points you define, the temperature is interpolated.
  202.             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.
  203.             This will result in a temperature of 22 degrees on day 3.
  204.         </p>
  205.         <span class="help-h1">Open</span>
  206.         <p>
  207.             The <i>Open</i> button shows a list of saved profiles. Clicking them loads the profile in the web interface, but does <span
  208.                 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.
  209.             Remember to change the start date when loading an old profile!
  210.         </p>
  211.         <span class="help-h1">New</span>
  212.         <p>
  213.             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!
  214.         </p><p>
  215.             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.
  216.         </p><p>
  217.             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.
  218.         </p><p>
  219.             The <i>Insert Now</i> button adds a new point to the profile at the current date and the current beer temperature setting.
  220.             This allows you to change a running profile 'from now on', while not changing the part of the profile that already passed.
  221.         </p><p>
  222.             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.
  223.         </p>
  224.         <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>
  225.         <span class="help-h1">Edit</span>
  226.         <p>
  227.             The <i>Edit profile</i> button allows you to the edit the currently loaded profile.
  228.         </p>
  229.         <span class="help-h1">Save As</span>
  230.         <p>
  231.             The <i>Save As</i> opens the same dialog as the Edit button, but allows you to save under a new name after editing.
  232.         </p>
  233.         <span class="help-h1">Refresh</span>
  234.         <p>
  235.             The refresh button can be useful if you edited the profile outside of the web interface: it reloads the profile from the Raspberry Pi.
  236.         </p>
  237.         <span class="help-h1">Final notes..</span>
  238.         <p>
  239.             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.
  240.         </p><p>
  241.             You can leave a temperature cell empty to temporarily disable temperature control in profile mode.
  242.             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.
  243.         </p><p>
  244.             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.
  245.         </p><p>
  246.             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.
  247.         </p>
  248.     </div>
  249. </div>
  250. <div id="beer-constant-control">
  251.     <div id="beer-temp" class="temp-display">
  252.         <div class="temp-container"></div>
  253.         <button id="beer-temp-up" class="temp-up"></button>
  254.         <input class='temperature' /><span class='degree'>&deg;F</span>
  255.         <button id="beer-temp-down" class="temp-down"></button>
  256.     </div>
  257. </div>
  258. <div id="fridge-constant-control">
  259.     <div id="fridge-temp" class="temp-display">
  260.         <div class="temp-container"></div>
  261.         <button id="fridge-temp-up" class="temp-up"></button>
  262.         <input class='temperature' /><span class='degree'>&deg;F</span>
  263.         <button id="fridge-temp-down" class="temp-down"></button>
  264.     </div>
  265. </div>
  266. <div id="temp-control-off">
  267.     <span id="temp-off-text">Temperature control disabled. Fridge will not cool or heat, but will still log temperatures.</span>
  268. </div>
  269.         </div>
  270.         <div id="maintenance-panel" style="display:none"> <!--// hide while loading -->
  271.             <ul>
  272.     <button class="script-status"></button>
  273.     <li><a href="#settings"><span class="setting-name">Settings</span></a></li>
  274.     <li><a href="#view-logs"><span>View logs</span></a></li>
  275.     <li><a href="previous_beers.php"><span>Previous Beers</span></a></li>
  276.     <li><a href="#control-algorithm"><span>Control Algorithm</span></a></li>
  277.     <li><a href="#device-config"><span>Device Configuration</span></a></li>
  278.     <li><a href="#advanced-settings"><span>Advanced Settings</span></a></li>
  279.     <li><a href="#reprogram-arduino"><span>Reprogram <span class="boardMoniker">controller</span></span></a></li>
  280.     <!--kinda dirty to have buttons in the ul, but the ul is styled as a nice header by jQuery UI -->
  281. </ul>
  282. <div id="reprogram-arduino">
  283.     <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.
  284.         The script will automatically restart itself after programming.
  285.         Just hit the back button on your browser to continue running BrewPi.</p>
  286.     <div id = "program-container">
  287.         <!-- This form has a hidden iFrame as target, so the full page is not refreshed -->
  288.         <form action="program_arduino.php" method="post" enctype="multipart/form-data" target="upload-target">
  289.             <div id="program-options">
  290.                 <div class="program-option">
  291.                     <label for="file"><span class="programFileType">HEX</span> file:</label>
  292.                     <input type="file" name="file" id="file" /> <!-- add max file size?-->
  293.                 </div>
  294.                 <div class="program-option">
  295.                     <label for="boardType"> Board type:</label>
  296.                     <select name="boardType" class="boardType">
  297.                         <option value="leonardo">Leonardo</option>
  298.                         <option value="uno">Uno</option>
  299.                         <option value="atmega328">ATmega328 based</option>
  300.                         <option value="diecimila">Atmega168 based</option>
  301.                         <option value="mega2560">Mega 2560</option>
  302.                         <option value="mega">Mega 1280</option>
  303.                         <option value="core">Spark Core</option>
  304.                         <option value="photon">Particle Photon</option>
  305.                     </select>
  306.                 </div>
  307.                 <div class="program-option">
  308.                     <label for="restoreSettings">Restore old settings after programming</label>
  309.                     <input type="radio" name="restoreSettings" value="true" checked>Yes
  310.                     <input type="radio" name="restoreSettings" value="false">No
  311.                 </div>
  312.                 <div class="program-option">
  313.                     <label for="restoreDevices">Restore installed devices after programming</label>
  314.                     <input type="radio" name="restoreDevices" value="true" checked>Yes
  315.                     <input type="radio" name="restoreDevices" value="false">No
  316.                 </div>
  317.             </div>
  318.             <input id="program-submit-button" type="submit" name="Program" value="Program">
  319.         </form>
  320.  
  321.         <h3 id="program-stderr-header">Script stderr output will auto-refresh while programming if you keep this tab open</h3>
  322.         <div class="stderr console-box"></div>
  323.         <iframe id="upload-target" name="upload-target" src="about:blank" style="width:0;height:0;border:0px solid #fff;"></iframe>
  324.     </div>
  325. </div>
  326. <div id="settings">
  327.     <div class="settings-container">
  328.         <div class="setting-container">
  329.             <span class="setting-name">Log data point every:</span>
  330.             <select id="interval">
  331.               <option value="10">10 Seconds</option>
  332.               <option value="30">30 Seconds</option>
  333.               <option value="60">1 Minute</option>
  334.               <option value="120">2 Minutes</option>
  335.               <option value="300">5 Minutes</option>
  336.               <option value="600">10 Minutes</option>
  337.               <option value="1800">30 Minutes</option>
  338.               <option value="3600">1 hour</option>
  339.             </select>
  340.             <button id="apply-interval" class="apply-button">Apply</button>
  341.         </div>
  342.         <div class="setting-container">
  343.             <span class="setting-name">Profile name:</span>
  344.             <input id="profile-name" value="(BCS) Oatmeal Stout" size=30 type="text" />
  345.             <button class="apply-profile-name apply-button">Apply</button>
  346.         </div>
  347.         <div class="setting-container">
  348.             <span class="setting-name">Date format:</span>
  349.             <select id="datetime-format-display">
  350.                 <option selected="selected">mm/dd/yy</option>
  351.                 <option >dd/mm/yy</option>
  352.             </select>
  353.             <button class="apply-datetime-format-display apply-button">Apply</button>
  354.         </div>
  355.     </div>
  356. </div>
  357. <div id="control-algorithm">
  358.     <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  359.         <span class='container-title'>PID algorithm for fridge setting</span>
  360.         <button class="cs update-from-arduino">Update control settings</button>
  361.         <button class="cv update-from-arduino">Update control variables</button>
  362.         <button class="cc update-from-arduino">Update control constants</button>
  363.     </div>
  364.     <div class="algorithm-container ui-widget-content ui-corner-all">
  365.         <div class="help-panel">
  366.             <p>
  367.                 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.
  368.                 <br/>
  369.                 The orange values are control variables. These are intermediate results of the fridge setting calculation.
  370.                 <br/>
  371.                 The blue values are constants, they never change automatically.
  372.             </p>
  373.         </div>
  374.         <div class="equation">
  375.             <div class="cv beerDiff"><span class="name">Beer temp. error</span><span class="val"></span></div>
  376.             <span class="operator multiply">*</span>
  377.             <div class="cc Kp"><span class="name">Kp</span><span class="val"></span></div>
  378.             <span class="operator equals">=</span>
  379.             <div class="cv p"><span class="name">P</span><span class="val"></span></div>
  380.         </div>
  381.         <div class="equation">
  382.             <div class="cv diffIntegral"><span class="name">Beer temp. error integral</span><span class="val"></span></div>
  383.             <span class="operator multiply">*</span>
  384.             <div class="cc Ki"><span class="name">Ki</span><span class="val"></span></div>
  385.             <span class="operator equals">=</span>
  386.             <div class="cv i"><span class="name">I</span><span class="val"></span></div>
  387.         </div>
  388.         <div class="equation">
  389.             <div class="cv beerSlope"><span class="name">Beer temp. derivative</span><span class="val"></span></div>
  390.             <span class="operator multiply">*</span>
  391.             <div class="cc Kd"><span class="name">Kd</span><span class="val"></span></div>
  392.             <span class="operator equals">=</span>
  393.             <div class="cv d"><span class="name">D</span><span class="val"></span></div>
  394.         </div>
  395.         <div class="sum-line"><div class="line"></div><span class="operator plus">+</span></div>
  396.         <div class="equation">
  397.             <div class="cs beerSet"><span class="name">Beer Setting</span><span class="val"></span></div>
  398.             <span class="operator plus">+</span>
  399.             <div class="cv pid-result"><span class="name">P + I + D</span><span class="val"></span></div>
  400.             <span class="operator equals">=</span>
  401.             <div class="cs fridgeSet"><span class="name">FridgeSetting</span><span class="val"></span></div>
  402.         </div>
  403.     </div>
  404.     <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  405.         <span class='container-title'>Predictive ON/OFF and peak detection</span>
  406.         <button class="cs update-from-arduino">Update control settings</button>
  407.         <button class="cv update-from-arduino">Update control variables</button>
  408.         <button class="cc update-from-arduino">Update control constants</button>
  409.     </div>
  410.     <div class="algorithm-container ui-widget-content ui-corner-all">
  411.         <div class="help-panel">
  412.             <p>
  413.                 The heater and cooler are controlled by a predictive on-off algorithm.
  414.                 BrewPi estimates the overshoot that would happen when it would go to IDLE. When that lands on the target temperature, it goes to IDLE.
  415.                 The overshoot is estimated as time active in hours * estimator.
  416.                 BrewPi detects the actual peaks and compares them to the prediction to automatically adjusts the estimators.
  417.                 You can change them manually in 'advanced settings' when they are far off.
  418.             </p>
  419.         </div>
  420.         <div class="on-off-parameters">
  421.             <div class="cv estPeak"><span class="name">Estimated peak</span><span class="val"></span></div>
  422.             <div class="cv negPeak"><span class="name">Last detected negative peak</span><span class="val"></span></div>
  423.             <div class="cv negPeakEst"><span class="name">Last target for negative peak</span><span class="val"></span></div>
  424.             <div class="cv posPeak"><span class="name">Last detected positive peak</span><span class="val"></span></div>
  425.             <div class="cv posPeakEst"><span class="name">Last target for positive peak</span><span class="val"></span></div>
  426.             <div class="cs coolEst"><span class="name">Cooling overshoot estimator</span><span class="val"></span></div>
  427.             <div class="cs heatEst"><span class="name">Heating overshoot estimator</span><span class="val"></span></div>
  428.         </div>
  429.     </div>
  430. </div>
  431. <div id="advanced-settings">
  432.     <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  433.         <span class='container-title'>Control settings</span>
  434.         <button class="cs load-defaults">Reload defaults</button>
  435.         <button class="cs receive-from-script">Receive from script</button>
  436.         <button class="cs update-from-arduino">Update from <span class="boardMoniker">controller</span></button>
  437.     </div>
  438.     <div id="control-settings-container" class="ui-widget-content ui-corner-all">
  439.         <div class="setting-container">
  440.             <span class="setting-name">Mode</span>
  441.             <span class="explanation">Active temperature control mode. Use to control panel to switch (apply button).</span>
  442.             <select name="mode" class="cs mode">
  443.                 <option value="b">Beer Constant</option>
  444.                 <option value="p">Beer Profile</option>
  445.                 <option value="f">Fridge Constant</option>
  446.                 <option value="o">Off</option>
  447.                 <option value="t">Test mode</option>
  448.             </select>
  449.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  450.         </div>
  451.         <div class="setting-container">
  452.             <span class="setting-name">Beer Temperature Setting</span>
  453.             <span class="explanation">Beer temperature setting when in profile or beer constant mode. Use the control panel to adjust.</span>
  454.             <input type="text" name="beerSet" class="cs beerSet">
  455.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  456.         </div>
  457.         <div class="setting-container">
  458.             <span class="setting-name">Fridge Temperature Setting</span>
  459.             <span class="explanation">Automatically adjust when in profile/beer constant mode. Use the control panel to adjust.</span>
  460.             <input type="text" name="fridgeSet" class="cs fridgeSet">
  461.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  462.         </div>
  463.         <div class="setting-container">
  464.             <span class="setting-name">Cooling overshoot estimator</span>
  465.             <span class="explanation">This is a self learning estimator for the overshoot when turning the cooler off.
  466.             It is adjusted automatically, but you can set adjust it manually here. This does not stop further automatic adjustment.</span>
  467.             <input type="text" name="coolEst" class="cs coolEst">
  468.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  469.         </div>
  470.         <div class="setting-container">
  471.             <span class="setting-name">Heating overshoot estimator</span>
  472.             <span class="explanation">This is a self learning estimator for the overshoot when turning the heater off.
  473.             It is adjusted automatically, but you can set adjust it manually here. This does not stop further automatic adjustment.</span>
  474.             <input type="text" name="heatEst" class="cs heatEst">
  475.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  476.         </div>
  477.     </div>
  478.     <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  479.         <span class='container-title'>Control constants</span>
  480.         <button class="cc load-defaults">Reload defaults</button>
  481.         <button class="cc receive-from-script">Receive from script</button>
  482.         <button class="cc update-from-arduino">Update from <span class="boardMoniker">controller</span></button>
  483.     </div>
  484.     <div id="control-constants-container" class="ui-widget-content ui-corner-all">
  485.         <div class="setting-container">
  486.             <span class="setting-name">Temperature format</span>
  487.             <span class="explanation">Switch your temperature format here. The algorithm always uses fixed point Celcius format internally,
  488.                 but it converts all settings that go in or out to the right format.</span>
  489.             <select name="tempFormat" class="cc tempFormat">
  490.                 <option value="C">Celsius</option>
  491.                 <option value="F">Fahrenheit</option>
  492.             </select>
  493.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  494.         </div>
  495.         <div class="setting-container">
  496.             <span class="setting-name">Temperature setting minimum</span>
  497.             <span class="explanation">The fridge and beer temperatures cannot go below this value.</span>
  498.             <input type="text" name="tempSetMin" class="cc tempSetMin">
  499.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  500.         </div>
  501.         <div class="setting-container">
  502.             <span class="setting-name">Temperature setting maximum</span>
  503.             <span class="explanation">The fridge and beer temperatures cannot go above this value.</span>
  504.             <input type="text" name="tempSetMax" class="cc tempSetMax">
  505.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  506.         </div>
  507.         <span class="section-explanation">The fridge temperature is controlled with PID. The fridge setting = beer setting + PID.
  508.             The proportional part is linear with the temperature error.
  509.             The integral part slowly increases when an error stays present, this prevents steady state errors.
  510.             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.
  511.         </span>
  512.         <div class="setting-container">
  513.             <span class="setting-name">PID: Kp</span>
  514.             <span class="explanation">The beer temperature error is multiplied by Kp to give the proportional part of the PID value.</span>
  515.             <input type="text" name="Kp" class="cc Kp">
  516.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  517.         </div>
  518.         <div class="setting-container">
  519.             <span class="setting-name">PID: Ki</span>
  520.             <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>
  521.             <input type="text" name="Ki" class="cc Ki">
  522.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  523.         </div>
  524.         <div class="setting-container">
  525.             <span class="setting-name">PID: Kd</span>
  526.             <span class="explanation">The derivative of the beer temperature is multiplied by Kd to give the derivative part of the PID value.</span>
  527.             <input type="text" name="Kd" class="cc Kd">
  528.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  529.         </div>
  530.         <div class="setting-container">
  531.             <span class="setting-name">PID: maximum</span>
  532.             <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>
  533.             <input type="text" name="pidMax" class="cc pidMax">
  534.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  535.         </div>
  536.         <div class="setting-container">
  537.             <span class="setting-name">Integrator: maximum temp error &deg;F</span>
  538.             <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>
  539.             <input type="text" name="iMaxErr" class="cc iMaxErr">
  540.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  541.         </div>
  542.         <div class="setting-container">
  543.             <span class="setting-name">Temperature idle range top</span>
  544.             <span class="explanation">When the fridge temperature is within this range, it won't heat or cool, regardless of other settings.</span>
  545.             <input type="text" name="idleRangeH" class="cc idleRangeH">
  546.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  547.         </div>
  548.         <div class="setting-container">
  549.             <span class="setting-name">Temperature idle range bottom</span>
  550.             <span class="explanation">When the fridge temperature is within this range, it won't heat or cool, regardless of other settings.</span>
  551.             <input type="text" name="idleRangeL" class="cc idleRangeL">
  552.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  553.         </div>
  554.         <div class="setting-container">
  555.             <span class="setting-name">Heating target upper bound</span>
  556.             <span class="explanation">When the overshoot lands under this value, the peak is within target range and the estimator is not adjusted.</span>
  557.             <input type="text" name="heatTargetH" class="cc heatingTargetH">
  558.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  559.         </div>
  560.         <div class="setting-container">
  561.             <span class="setting-name">Heating target lower bound</span>
  562.             <span class="explanation">When the overshoot lands above this value, the peak is within target range and the estimator is not adjusted.</span>
  563.             <input type="text" name="heatTargetL" class="cc heatingTargetL">
  564.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  565.         </div>
  566.         <div class="setting-container">
  567.             <span class="setting-name">Cooling target upper bound</span>
  568.             <span class="explanation">When the overshoot lands under this value, the peak is within target range and the estimator is not adjusted.</span>
  569.             <input type="text" name="coolTargetH" class="cc coolingTargetH">
  570.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  571.         </div>
  572.         <div class="setting-container">
  573.             <span class="setting-name">Cooling target lower bound</span>
  574.             <span class="explanation">When the overshoot lands above this value, the peak is within target range and the estimator is not adjusted.</span>
  575.             <input type="text" name="coolTargetL" class="cc coolingTargetL">
  576.             <button class="send-button">Send to <span class="boardMoniker">Arduino</span></button>
  577.         </div>
  578.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  579.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  580.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  581.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  582.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  583.         <div class="setting-container">
  584.             <span class="setting-name">Maximum time in seconds for heating overshoot estimator</span>
  585.             <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>
  586.             <input type="text" name="maxHeatTimeForEst" class="cc maxHeatTimeForEst">
  587.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  588.         </div>
  589.         <div class="setting-container">
  590.             <span class="setting-name">Maximum time in seconds for cooling overshoot estimator</span>
  591.             <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>
  592.             <input type="text" name="maxCoolTimeForEst" class="cc maxCoolTimeForEst">
  593.             <button class="send-button">Send to <span class="boardMoniker">controller</span></button>
  594.         </div>
  595.         <div class="setting-container">
  596.             <span class="setting-name">Beer fast filter delay time</span>
  597.             <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>
  598.             <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>
  599.         </div>
  600.         <div class="setting-container">
  601.             <span class="setting-name">Beer slow filter delay time</span>
  602.             <span class="explanation">The beer slow filter is used for the control algorithm. The fridge temperature setting is calculated from this filter.
  603.                 Because a small difference in beer temperature causes a large adjustment in the fridge temperature, more smoothing is needed.</span>
  604.             <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>
  605.         </div>
  606.         <div class="setting-container">
  607.             <span class="setting-name">Beer slope filter delay time</span>
  608.             <span class="explanation">The slope is calculated every 30 seconds and fed to this filter. More filtering means a smoother fridge setting.</span>
  609.             <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>
  610.         </div>
  611.         <div class="setting-container">
  612.             <span class="setting-name">Fridge fast filter delay time</span>
  613.             <span class="explanation">The fridge fast filter is used for on-off control, display and logging. It needs to have a small delay.</span>
  614.             <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>
  615.         </div>
  616.         <div class="setting-container">
  617.             <span class="setting-name">Fridge slow filter delay time</span>
  618.             <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>
  619.             <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>
  620.         </div>
  621.         <div class="setting-container">
  622.             <span class="setting-name">Fridge slope filter delay time</span>
  623.             <span class="explanation">The fridge slope filter is not used in the current version.</span>
  624.             <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>
  625.         </div>
  626.         <div class="setting-container">
  627.             <span class="setting-name">Use light as heater</span>
  628.             <span class="explanation">If this option is set to 'Yes' the light wil be used as a heater.</span>
  629.             <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>
  630.         </div>
  631.         <div class="setting-container">
  632.             <span class="setting-name">Trigger rotary encoder at every ...</span>
  633.             <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>
  634.             <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>
  635.         </div>
  636.  
  637.         <span class="section-explanation">
  638.             <p>With the button below, you can reset the entire <span class="boardMoniker">controller</span> to factory defaults.</p>
  639.             <p>This will reset all settings and will remove all installed devices.</p>
  640.             <button class="reset-controller-button">Reset <span class="boardMoniker">controller</span> to factory defaults</button>
  641.         </span>
  642.     </div>
  643. </div>
  644.  
  645. <div id="device-config">
  646.     <div class="console-box" id="device-console">
  647.         <span></span>
  648.     </div>
  649.     <div class = "header ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  650.         <span class='container-title'>Device List</span>
  651.         <div class="refresh-options-container">
  652.             <div class="refresh-option">
  653.                 <input type="checkbox" name="read-values" id="read-values"/><label for="read-values">Read values</label>
  654.             </div>
  655.         </div>
  656.         <button class="refresh-device-list">Refresh device list</button>
  657.     </div>
  658.     <div class="device-list-container ui-widget-content ui-corner-all">
  659.         <div class ="spinner-position"></div>
  660.         <div class="device-list"></div>
  661.     </div>
  662. </div>
  663.  
  664. <div id="view-logs">
  665.     <div id="log-buttons" style="clear:both">
  666.         <button id="erase-logs">Erase logs</button>
  667.         <button id="auto-refresh-logs">Enable auto refresh</button>
  668.         <button id="refresh-logs">Refresh</button>
  669.     </div>
  670.     <h3>stderr:</h3>
  671.     <div class="stderr console-box"></div>
  672.     <h3>stdout:</h3>
  673.     <div class="stdout console-box"></div>
  674. </div>
  675.         </div>
  676.         <!-- Load scripts after the body, so they don't block rendering of the page -->
  677.         <!-- <script type="text/javascript" src="js/jquery-1.11.0.js"></script> -->
  678.         <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  679.         <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
  680.         <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
  681.         <script type="text/javascript" src="js/spin.js"></script>
  682.         <script type="text/javascript" src="js/dygraph-combined.js"></script>
  683.         <script type="text/javascript">
  684.             // pass parameters to JavaScript
  685.             window.tempFormat = 'F';
  686.             window.beerName = "Black%20IPA";
  687.             window.profileName = "(BCS)%20Oatmeal%20Stout";
  688.             window.dateTimeFormat = "yy-mm-dd";
  689.             window.dateTimeFormatDisplay = "mm/dd/yy";
  690.         </script>
  691.         <script type="text/javascript" src="js/main.js"></script>
  692.         <script type="text/javascript" src="js/device-config.js"></script>
  693.         <script type="text/javascript" src="js/control-panel.js"></script>
  694.         <script type="text/javascript" src="js/maintenance-panel.js"></script>
  695.         <script type="text/javascript" src="js/beer-chart.js"></script>
  696.         <script type="text/javascript" src="js/profile-table.js"></script>
  697.     </body>
  698. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!