Merge pull request #54 from ayufan-research/persist-data

Persist all form parameters
This commit is contained in:
teachingtechYT
2020-08-18 08:17:07 +10:00
committed by GitHub
3 changed files with 239 additions and 104 deletions

View File

@ -17,8 +17,9 @@
<script src="js/encoding-indexes.js"></script>
<script src="js/encoding.js"></script>
<script src="js/gcodeprocessing.js"></script>
<script src="js/persist.js"></script>
</head>
<body>
<body onload="loadAllFormData()">
<div id="header">
<img src="img/tt.png" class="icon" style="vertical-align:middle;" /><h1>Teaching Tech 3D Printer Calibration</h1><span id="donate">Useful? Considering supporting me: <a href="https://paypal.me/testlawgicau" target="blank"><img class="icon" src="img/paypal.png" /></a><a href="http://www.patreon.com/teachingtech" target="blank"><img class="icon" src="img/patreon.png" /></a></span>
</div>
@ -166,6 +167,7 @@
<label>Retraction speed (mm/sec): <input type="number" name="retspeed" value="40" min="5" max="150"></label><br />
<p><input type="button" onclick="processBaseline()" value="Download Gcode"></p>
<p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"></p>
</form>
<h2>Interpreting Results:</h2>
<p>The cube should look similar to those at the top of this page. If there are no major issues, please continue to the next step. If there is a significant defect, the culprit will likely be found by working through the frame page.</p>
@ -205,6 +207,7 @@
<p><label>Previous E-steps as reported by M92: <input type="number" name="oldSteps" value="93" step="0.01"></label></p>
<p><label>Measurement between extruder entry and mark on filament (mm): <input type="number" name="remainingFil" value="20" step="0.01"></label></p>
<input type="button" onclick="esteps();" value="Calculate">
<input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters">
<div id="estepsresult">
<p>There was <b id="e1"></b> mm of filament remaining, which means you extruded <b id="e2"></b> mm of filament. Your new E-steps should be <b id="e3"></b><br />
Enter the following in the terminal:</p>
@ -303,10 +306,11 @@
<tr>
<td>
<form name="flow1" onsubmit="return false;">
<p><label>Previous flow rate: <input type="number" name="oldFlow" value="100" min="0" max="200" step="1"></label></p>
<p><label>Previous flow rate: <input type="number" name="oldFlow1" value="100" min="0" max="200" step="1"></label></p>
<p><label>Target wall thickness (mm): <input type="number" name="targetWall" value="0.4" min="0.1" max="1" step="0.01"></label></p>
<p><label>Measured wall thickness (mm): <input type="number" name="measuredWall" value="0.4" min="0.1" max="1" step="0.01"></label></p>
<input type="button" onclick="flowCalc1()" value="Calculate">
<input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters">
<div id="flow1result">
<p>Your new flow rate should be <b id="f1"></b></p>
</div>
@ -314,10 +318,11 @@
</td>
<td>
<form name="flow2" onsubmit="return false;">
<p><label>Previous flow rate: <input type="number" name="oldFlow" value="1.0" step="0.1" min="0.1" max="2"></label></p>
<p><label>Previous flow rate: <input type="number" name="oldFlow2" value="1.0" step="0.1" min="0.1" max="2"></label></p>
<p><label>Target wall thickness (mm): <input type="number" name="targetWall" value="0.4" min="0.1" max="1" step="0.01"></label></p>
<p><label>Measured wall thickness (mm): <input type="number" name="measuredWall" value="0.4" min="0.1" max="1" step="0.01"></label></p>
<input type="button" onclick="flowCalc2();" value="Calculate">
<input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters">
<div id="flow2result">
<p>Your new flow rate should be <b id="f2"></b></p>
</div>
@ -545,43 +550,44 @@
<img src="img/retractiondiagram.jpg" />
</td>
<td style="text-align: center;">F</td>
<td><input type="number" min="0" max="20" name="f1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="f2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="f3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_f1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_f2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_f3" value="0" step="0.1"></td>
</tr>
<tr>
<td style="text-align: center;">E</td>
<td><input type="number" min="0" max="20" name="e1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="e2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="e3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_e1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_e2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_e3" value="0" step="0.1"></td>
</tr>
<tr>
<td style="text-align: center;">D</td>
<td><input type="number" min="0" max="20" name="d1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="d2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="d3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_d1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_d2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_d3" value="0" step="0.1"></td>
</tr>
<tr>
<td style="text-align: center;">C</td>
<td><input type="number" min="0" max="20" name="c1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="c2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="c3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_c1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_c2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_c3" value="0" step="0.1"></td>
</tr>
<tr>
<td style="text-align: center;">B</td>
<td><input type="number" min="0" max="20" name="b1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="b2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="b3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_b1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_b2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_b3" value="0" step="0.1"></td>
</tr>
<tr>
<td style="text-align: center;">A</td>
<td><input type="number" min="0" max="20" name="a1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="a2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="a3" value="0" step="0.1"></td>
<td><input type="number" min="0" max="20" name="ret_a1" value="6" step="0.1"></td>
<td><input type="number" min="5" max="200" name="ret_a2" value="40" step="1"></td>
<td><input type="number" min="-10" max="10" name="ret_a3" value="0" step="0.1"></td>
</tr>
</tbody>
</table>
<p><input type="button" onclick="processRetraction()" value="Download Gcode"></p>
<p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"></p>
</form>
<h2>Interpreting Results:</h2>
<p>Inspect your finished print. Hopefully, there will be a clear difference between the segments that reflect the settings you entered. In the example below (Ender 3 direct drive, PLA, linear advance enabled), the retraction distance varied from 0.4 up to 1.4mm in 0.2mm increments. Segments A and B have the least stringing. Based on this, I would assume that a retraction distance of 0.4 - 0.6 is best for this printer. this is consistent with linear advance being enabled.</p>
@ -658,27 +664,28 @@
<img src="img/temperaturediagram.jpg" />
</td>
<td style="text-align: center;">E</td>
<td><input type="number" min="150" max="450" name="e1" value="210"></td>
<td><input type="number" min="150" max="450" name="temp_e1" value="210"></td>
</tr>
<tr>
<td style="text-align: center;">D</td>
<td><input type="number" min="150" max="450" name="d1" value="205"></td>
<td><input type="number" min="150" max="450" name="temp_d1" value="205"></td>
</tr>
<tr>
<td style="text-align: center;">C</td>
<td><input type="number" min="150" max="450" name="c1" value="200"></td>
<td><input type="number" min="150" max="450" name="temp_c1" value="200"></td>
</tr>
<tr>
<td style="text-align: center;">B</td>
<td><input type="number" min="150" max="450" name="b1" value="195"></td>
<td><input type="number" min="150" max="450" name="temp_b1" value="195"></td>
</tr>
<tr>
<td style="text-align: center;">A</td>
<td><input type="number" min="150" max="450" name="a1" value="190"></td>
<td><input type="number" min="150" max="450" name="temp_a1" value="190"></td>
</tr>
</tbody>
</table>
<p><input type="button" onclick="processTemperature()" value="Download Gcode"></p>
<p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"></p>
</form>
<h2>Interpreting Results:</h2>
<p>Inspect your finished print. Hopefully, there will be a clear difference between the segments that reflect the temperatures you entered. In the example below (Ender 3 direct drive, PLA, linear advance enabled), the hot end temperature varied from 185 to 225 in 10 degree increments"</p>
@ -809,8 +816,8 @@
<label>Base feedrate (mm/sec): <input type="number" name="feedrate" value="60" min="20" max="500"></label>
<h4>Acceleration and jerk/junction deviation</h4>
<p>After entering <b>M503</b>, I have determined my 3D printer firmware uses:</p>
<label>Jerk: <input type="radio" value="jerk" name="selector" checked="checked" onchange="toggleJ()"></label>
<label>Junction deviation: <input type="radio" value="jd" name="selector" onchange="toggleJ()"></label>
<label>Jerk: <input type="radio" value="jerk" name="jerk_or_jd" checked="checked" onchange="toggleJ()"></label>
<label>Junction deviation: <input type="radio" value="jd" name="jerk_or_jd" onchange="toggleJ()"></label>
<p>Based on the values you saw from <b>M503</b>, enter variables around this below.</p>
<p>Junction deviation requires a single value, whereas jerk has separate values for X and Y. You can leave them the same or enter independent values.</p>
<p>You should only change either acceleration or jerk/junction deviation for each test print, otherwise it will be impossible to know which parameter is responsible for any changes.</p>
@ -829,49 +836,50 @@
<tr>
<td rowspan="6" style="text-align: center;"><img src="img/accelerationdiagram.jpg" /></td>
<td style="text-align: center;">F</td>
<td><input type="number" name="f1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="f2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="f3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="f4" value="0.05" min="0.01" max="20" step="0.01"></td>
<td><input type="number" name="accel_f1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_f2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_f3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_f4" value="0.05" min="0.01" max="20" step="0.01"></td>
</tr>
<tr>
<td style="text-align: center;">E</td>
<td><input type="number" name="e1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="e2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="e3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="e4" value="0.05" min="0.01" max="20" step="0.01"></td>
<td><input type="number" name="accel_e1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_e2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_e3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_e4" value="0.05" min="0.01" max="20" step="0.01"></td>
</tr>
<tr>
<td style="text-align: center;">D</td>
<td><input type="number" name="d1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="d2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="d3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="d4" value="0.05" min="0.01" max="20" step="0.01"></td>
<td><input type="number" name="accel_d1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_d2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_d3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_d4" value="0.05" min="0.01" max="20" step="0.01"></td>
</tr>
<tr>
<td style="text-align: center;">C</td>
<td><input type="number" name="c1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="c2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="c3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="c4" value="0.05" min="0.01" max="20" step="0.01"></td>
<td><input type="number" name="accel_c1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_c2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_c3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_c4" value="0.05" min="0.01" max="20" step="0.01"></td>
</tr>
<tr>
<td style="text-align: center;">B</td>
<td><input type="number" name="b1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="b2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="b3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="b4" value="0.05" min="0.01" max="20" step="0.01"></td>>
<td><input type="number" name="accel_b1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_b2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_b3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_b4" value="0.05" min="0.01" max="20" step="0.01"></td>>
</tr>
<tr>
<td style="text-align: center;">A</td>
<td><input type="number" name="a1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="a2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="a3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="a4" value="0.05" min="0.01" max="20" step="0.01"></td>
<td><input type="number" name="accel_a1" value="500" min="10" max="5000" step="100"></td>
<td class="jerktd"><input type="number" name="accel_a2" value="8" min="1" max="30" step="1"></td>
<td class="jerktd"><input type="number" name="accel_a3" value="8" min="1" max="30" step="1"></td>
<td class="jdtd"><input type="number" name="accel_a4" value="0.05" min="0.01" max="20" step="0.01"></td>
</tr>
</tbody>
</table>
<p><input type="button" onclick="processAcceleration()" value="Download Gcode"></p>
<p><input type="button" onclick="resetFormToDefaults(form)" value="Reset parameters"></p>
</form>
<h2>Interpreting Results:</h2>
<p>Inspect your finished print. Hopefully, there will be a clear difference between the segments that reflect the acceleration values you entered. In the example below (Ender 3 direct drive, PLA, linear advance enabled), acceleration varied from 300 to 800 in 100 mm/sec/sec increments. Junction deviation was left at the default 0.08. The difference between each segment is subtle, but there is increased ghosting around the letter Y on the higher segments. The previous value was 500, but a small increase in quality may be achieved from lowering the value to 400.</p>

View File

@ -34,7 +34,7 @@ function esteps(){
}
function flowCalc1(){
var oldflow = document.flow1.oldFlow.value;
var oldflow = document.flow1.oldFlow1.value;
var targetwall = document.flow1.targetWall.value;
var measuredwall = document.flow1.measuredWall.value;
var newsteps = (oldflow/measuredwall*targetwall).toFixed(2);
@ -43,7 +43,7 @@ function flowCalc1(){
}
function flowCalc2(){
var oldflow = document.flow2.oldFlow.value;
var oldflow = document.flow2.oldFlow2.value;
var targetwall = document.flow2.targetWall.value;
var measuredwall = document.flow2.measuredWall.value;
var newsteps = (oldflow/measuredwall*targetwall).toFixed(2);
@ -70,7 +70,7 @@ function maxFee(){
}
function toggleJ() {
var value = document.accelerationForm.selector.value;
var value = document.accelerationForm.jerk_or_jd.value;
if(value == "jerk"){
$(".jdtd").hide();
$(".jerktd").show();
@ -179,24 +179,24 @@ function processRetraction(){
var bedY = Math.round((document.retractionForm.bedy.value-100)/2);
var abl = document.retractionForm.abl.value;
var pc = document.retractionForm.pc.value;
var a1 = document.retractionForm.a1.value;
var a2 = document.retractionForm.a2.value*60;
var a3 = document.retractionForm.a3.value;
var b1 = document.retractionForm.b1.value;
var b2 = document.retractionForm.b2.value*60;
var b3 = document.retractionForm.b3.value;
var c1 = document.retractionForm.c1.value;
var c2 = document.retractionForm.c2.value*60;
var c3 = document.retractionForm.c3.value;
var d1 = document.retractionForm.d1.value;
var d2 = document.retractionForm.d2.value*60;
var d3 = document.retractionForm.d3.value;
var e1 = document.retractionForm.e1.value;
var e2 = document.retractionForm.e2.value*60;
var e3 = document.retractionForm.e3.value;
var f1 = document.retractionForm.f1.value;
var f2 = document.retractionForm.f2.value*60;
var f3 = document.retractionForm.f3.value;
var a1 = document.retractionForm.ret_a1.value;
var a2 = document.retractionForm.ret_a2.value*60;
var a3 = document.retractionForm.ret_a3.value;
var b1 = document.retractionForm.ret_b1.value;
var b2 = document.retractionForm.ret_b2.value*60;
var b3 = document.retractionForm.ret_b3.value;
var c1 = document.retractionForm.ret_c1.value;
var c2 = document.retractionForm.ret_c2.value*60;
var c3 = document.retractionForm.ret_c3.value;
var d1 = document.retractionForm.ret_d1.value;
var d2 = document.retractionForm.ret_d2.value*60;
var d3 = document.retractionForm.ret_d3.value;
var e1 = document.retractionForm.ret_e1.value;
var e2 = document.retractionForm.ret_e2.value*60;
var e3 = document.retractionForm.ret_e3.value;
var f1 = document.retractionForm.ret_f1.value;
var f2 = document.retractionForm.ret_f2.value*60;
var f3 = document.retractionForm.ret_f3.value;
var retraction = originalRetraction;
if(pc == 1){
retraction = retraction.replace(/M106 S255/, "M106 S130");
@ -303,11 +303,11 @@ function processTemperature(){
var retSpeed = document.temperatureForm.retspeed.value*60;
var abl = document.temperatureForm.abl.value;
var pc = document.temperatureForm.pc.value;
var a1 = document.temperatureForm.a1.value;
var b1 = document.temperatureForm.b1.value;
var c1 = document.temperatureForm.c1.value;
var d1 = document.temperatureForm.d1.value;
var e1 = document.temperatureForm.e1.value;
var a1 = document.temperatureForm.temp_a1.value;
var b1 = document.temperatureForm.temp_b1.value;
var c1 = document.temperatureForm.temp_c1.value;
var d1 = document.temperatureForm.temp_d1.value;
var e1 = document.temperatureForm.temp_e1.value;
var temperature = originalTemperature;
if(pc == 1){
temperature = temperature.replace(/M106 S255/, "M106 S130");
@ -405,31 +405,31 @@ function processAcceleration(){
var abl = document.accelerationForm.abl.value;
var pc = document.accelerationForm.pc.value;
var feed = document.accelerationForm.feedrate.value*60;
var selector = document.accelerationForm.selector.value;
var a1 = document.accelerationForm.a1.value;
var a2 = document.accelerationForm.a2.value;
var a3 = document.accelerationForm.a3.value;
var a4 = document.accelerationForm.a4.value;
var b1 = document.accelerationForm.b1.value;
var b2 = document.accelerationForm.b2.value;
var b3 = document.accelerationForm.b3.value;
var b4 = document.accelerationForm.b4.value;
var c1 = document.accelerationForm.c1.value;
var c2 = document.accelerationForm.c2.value;
var c3 = document.accelerationForm.c3.value;
var c4 = document.accelerationForm.c4.value;
var d1 = document.accelerationForm.d1.value;
var d2 = document.accelerationForm.d2.value;
var d3 = document.accelerationForm.d3.value;
var d4 = document.accelerationForm.d4.value;
var e1 = document.accelerationForm.e1.value;
var e2 = document.accelerationForm.e2.value;
var e3 = document.accelerationForm.e3.value;
var e4 = document.accelerationForm.e4.value;
var f1 = document.accelerationForm.f1.value;
var f2 = document.accelerationForm.f2.value;
var f3 = document.accelerationForm.f3.value;
var f4 = document.accelerationForm.f4.value;
var jerk_or_jd = document.accelerationForm.jerk_or_jd.value;
var a1 = document.accelerationForm.accel_a1.value;
var a2 = document.accelerationForm.accel_a2.value;
var a3 = document.accelerationForm.accel_a3.value;
var a4 = document.accelerationForm.accel_a4.value;
var b1 = document.accelerationForm.accel_b1.value;
var b2 = document.accelerationForm.accel_b2.value;
var b3 = document.accelerationForm.accel_b3.value;
var b4 = document.accelerationForm.accel_b4.value;
var c1 = document.accelerationForm.accel_c1.value;
var c2 = document.accelerationForm.accel_c2.value;
var c3 = document.accelerationForm.accel_c3.value;
var c4 = document.accelerationForm.accel_c4.value;
var d1 = document.accelerationForm.accel_d1.value;
var d2 = document.accelerationForm.accel_d2.value;
var d3 = document.accelerationForm.accel_d3.value;
var d4 = document.accelerationForm.accel_d4.value;
var e1 = document.accelerationForm.accel_e1.value;
var e2 = document.accelerationForm.accel_e2.value;
var e3 = document.accelerationForm.accel_e3.value;
var e4 = document.accelerationForm.accel_e4.value;
var f1 = document.accelerationForm.accel_f1.value;
var f2 = document.accelerationForm.accel_f2.value;
var f3 = document.accelerationForm.accel_f3.value;
var f4 = document.accelerationForm.accel_f4.value;
var acceleration = originalAcceleration;
if(pc == 1){
acceleration = acceleration.replace(/M106 S255/, "M106 S130");
@ -521,7 +521,7 @@ function processAcceleration(){
acceleration = acceleration.replace(/accel5/g, "M204 P"+e1);
acceleration = acceleration.replace(/accel6/g, "M204 P"+f1);
if(selector == "jerk"){
if(jerk_or_jd == "jerk"){
acceleration = acceleration.replace(/j1/g, "M205 X"+a2+" Y"+a3);
acceleration = acceleration.replace(/j2/g, "M205 X"+b2+" Y"+b3);
acceleration = acceleration.replace(/j3/g, "M205 X"+c2+" Y"+c3);

127
js/persist.js Normal file
View File

@ -0,0 +1,127 @@
var persistChangeEvent = new Event('change');
function loadFormData(form) {
if (!form.name)
return;
if (!localStorage)
return;
for (var i = 0; i < form.length; ++i) {
var element = form[i];
if (!element.name)
continue;
if (
element.tagName == "INPUT" && element.type == "number" ||
element.tagName == "INPUT" && element.type == "checkbox" ||
element.tagName == "INPUT" && element.type == "radio" ||
element.tagName == "SELECT"
) {
var newValue = getPeristedValue(element);
if (newValue !== null) {
setFormItemValue(element, newValue);
}
element.addEventListener("change", persistFormValue);
}
}
}
function resetFormToDefaults(form) {
for (var i = 0; i < form.length; ++i) {
var element = form[i];
if (!element.name) {
continue;
}
setPersistedValue(element, null);
if (element.defaultValue) {
setFormItemValue(element, element.defaultValue);
}
}
}
function getPersistKey(element) {
return "persist_" + element.name;
}
function getPeristedValue(element) {
return localStorage.getItem(getPersistKey(element));
}
function setPersistedValue(element, value) {
var key = getPersistKey(element);
if (value != null) {
localStorage.setItem(key, value);
} else {
localStorage.removeItem(key);
}
}
function getFormItemValue(element) {
if (element.type == "radio") {
return element.checked ? element.value : null;
} else if (element.type == "checkbox") {
return element.checked ? "true" : "false";
} else {
return element.value;
}
}
function setFormItemValue(element, value) {
if (element.type == "radio") {
var realValue = (value == element.value);
if (element.checked == realValue) {
return;
}
element.checked = realValue;
} else if (element.type == "checkbox") {
var realValue = (value == "true");
if (element.checked == realValue) {
return;
}
element.checked = realValue;
} else {
if (element.value == value) {
return;
}
element.value = value;
}
element.dispatchEvent(persistChangeEvent);
}
function persistFormValue(event) {
// ignore cascade updates
if (persistChangeEvent == event) {
return;
}
var element = event.target;
var value = getFormItemValue(element);
var others = document.getElementsByName(element.name);
setPersistedValue(element, value);
// update all other inputs
for (var i = 0; i < others.length; ++i) {
var other = others[i];
if (other.tagName == element.tagName && other.type == element.type) {
setFormItemValue(other, value);
}
}
}
function loadAllFormData() {
for (var i = 0; i < document.forms.length; ++i) {
loadFormData(document.forms[i]);
}
}