1 line
20 KiB
HTML
1 line
20 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><title>Beer Gravity Monitor</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script></head><body class="py-4"><!-- START MENU --><nav class="navbar navbar-expand-sm navbar-dark bg-primary"><a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbar"><ul class="navbar-nav mr-auto"><li class="nav-item"><a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a></li><li class="nav-item active"><a class="nav-link" href="/config.htm">Configuration</a></li><li class="nav-item"><a class="nav-link" href="/calibration.htm">Calibration</a></li><li class="nav-item"><a class="nav-link" href="/about.htm">About</a></li></ul></div><div class="spinner-border text-light" id="spinner" role="status"></div></nav><!-- START MAIN INDEX --><div class="container"><hr class="my-2"><div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"><div id="alert-msg">...</div><button type="button" id="alert-btn" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-warning fade hide show d-none" role="alert" id="warning-sleep"><div>A sleep-interval of less than 300s will reduce battery life, consider using 900s</div></div><div class="alert alert-warning fade hide show d-none" role="alert" id="warning-gyro"><div>When using the gyro temperature use a sleep-interval that is greater than 300s for accurate readings</div></div><script type="text/javascript">function showError(s){$("#alert").removeClass("alert-success").addClass("alert-danger").removeClass("d-none").addClass("show"),$("#alert-msg").text(s)}function showSuccess(s){$("#alert").addClass("alert-success").removeClass("alert-danger").removeClass("d-none").addClass("show"),$("#alert-msg").text(s)}function showWarningSleep(){$("#warning-sleep").removeClass("d-none").addClass("show")}function hideWarningSleep(){$("#warning-sleep").addClass("d-none").removeClass("show")}function showWarningGyro(){$("#warning-gyro").removeClass("d-none").addClass("show")}function hideWarningGyro(){$("#warning-gyro").addClass("d-none").removeClass("show")}$("#alert-btn").click(function(s){$("#alert").addClass("d-none").removeClass("show")})</script><div class="accordion" id="accordion"><input type="text" name="runtime-average" id="runtime-average" hidden><div class="card"><div class="card-header" id="headingDevice"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" onclick="window.location.href="#collapseDevice"" type="button" data-toggle="collapse" data-target="#collapseDevice" aria-expanded="true" aria-controls="collapseDevice">Device settings</button></h2></div><div id="collapseDevice" class="collapse show" aria-labelledby="headingDevice" data-parent="#accordion"><div class="card-body"><form action="/api/config/device" method="post"><input type="text" name="id" id="id1" hidden><div class="form-group row"><label for="mdns" class="col-sm-3 col-form-label">Device name:</label><div class="col-sm-9"><input type="text" maxlength="12" class="form-control" name="mdns" id="mdns"></div></div><fieldset class="form-group row"><legend class="col-form-label col-sm-3 float-sm-left pt-0">Temperature Format:</legend><div class="col-sm-6"><div class="form-check"><input class="form-check-input" type="radio" name="temp-format" id="temp-format-c" value="C" checked> <label class="form-check-label" for="temp-format-c">Celsius</label></div><div class="form-check"><input class="form-check-input" type="radio" name="temp-format" id="temp-format-f" value="F"> <label class="form-check-label" for="temp-format-f">Farenheight</label></div></div></fieldset><div class="form-group row"><label for="sleep-interval" class="col-sm-3 col-form-label">Interval (seconds):</label><div class="col-sm-2"><input type="number" min="10" max="3600" class="form-control" name="sleep-interval" id="sleep-interval"></div><label for="sleep-interval" class="col-sm-7 col-form-label" id="sleep-interval-info"></label></div><div class="form-group row"><div class="col-sm-8 offset-sm-3"><button type="submit" class="btn btn-primary" id="device-btn">Save</button></div></div></form><hr class="my-2"><div class="form-group row"><label for="calibrate-btn" class="col-sm-3 col-form-label">Current calibration values:</label> <label for="calibrate-btn" class="col-sm-3 col-form-label" id="gyro-calibration-data">Loading...</label> <label for="gyro-calibration-data" class="col-sm-3 col-form-label" id="angle">Loading...</label><div class="col-sm-8 offset-sm-3"><button type="button" class="btn btn-warning" id="calibrate-btn">Calibrate device</button></div></div></div></div></div><div class="card"><div class="card-header" id="headingPush"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href="#collapsePush"" type="button" data-toggle="collapse" data-target="#collapsePush" aria-expanded="false" aria-controls="collapsePush">Push settings</button></h2></div><div id="collapsePush" class="collapse" aria-labelledby="headingPush" data-parent="#accordion"><div class="card-body"><form action="/api/config/push" method="post"><input type="text" name="id" id="id2" hidden> <input type="text" name="section" value="collapsePush" hidden> <input type="text" name="http-push-h1" id="http-push-h1" hidden> <input type="text" name="http-push-h2" id="http-push-h2" hidden> <input type="text" name="http-push2-h1" id="http-push2-h1" hidden> <input type="text" name="http-push2-h2" id="http-push2-h2" hidden><div class="form-group row"><label for="http-push" class="col-sm-2 col-form-label">Http URL 1:</label><div class="col-sm-8"><input type="url" maxlength="120" class="form-control" name="http-push" id="http-push"></div><div class="col-sm-2"><button type="button" class="btn btn-info" data-field1="#http-push-h1" data-field2="#http-push-h2" data-toggle="modal" data-target="#modal-http">Headers</button></div></div><div class="form-group row"><label for="http-push2" class="col-sm-2 col-form-label">Http URL 2:</label><div class="col-sm-8"><input type="url" maxlength="120" class="form-control" name="http-push2" id="http-push2"></div><div class="col-sm-2"><button type="button" class="btn btn-info" data-field1="#http-push2-h1" data-field2="#http-push2-h2" data-toggle="modal" data-target="#modal-http">Headers</button></div></div><hr class="my-2"><div class="form-group row"><label for="token" class="col-sm-2 col-form-label">Token:</label><div class="col-sm-4"><input type="text" maxlength="50" class="form-control" name="token" id="token"></div></div><hr class="my-2"><div class="form-group row"><label for="inputBrewfatherPush" class="col-sm-2 col-form-label">Brewfather URL:</label><div class="col-sm-10"><input type="url" maxlength="100" class="form-control" name="brewfather-push" id="brewfather-push"></div></div><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button type="submit" class="btn btn-primary" id="push-btn">Save</button></div></div></form><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button class="btn btn-info" id="format-btn">Format editor</button> <button class="btn btn-info" id="test-btn">Test Push</button></div></div></div></div></div><div class="card"><div class="card-header" id="headingPush2"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href="#collapsePush2"" type="button" data-toggle="collapse" data-target="#collapsePush2" aria-expanded="false" aria-controls="collapsePush2">Push settings (2)</button></h2></div><div id="collapsePush2" class="collapse" aria-labelledby="headingPush2" data-parent="#accordion"><div class="card-body"><form action="/api/config/push" method="post"><input type="text" name="id" id="id5" hidden> <input type="text" name="section" value="collapsePush2" hidden><div class="form-group row"><label for="influxdb2-push" class="col-sm-2 col-form-label">InfluxDB v2 URL:</label><div class="col-sm-6"><input type="url" maxlength="40" class="form-control" name="influxdb2-push" id="influxdb2-push"></div></div><div class="form-group row"><label for="influxdb2-org" class="col-sm-2 col-form-label">InfluxDB v2 Org:</label><div class="col-sm-4"><input type="text" maxlength="50" class="form-control" name="influxdb2-org" id="influxdb2-org"></div></div><div class="form-group row"><label for="influxdb2-bucket" class="col-sm-2 col-form-label">InfluxDB v2 Bucket:</label><div class="col-sm-4"><input type="text" maxlength="50" class="form-control" name="influxdb2-bucket" id="influxdb2-bucket"></div></div><div class="form-group row"><label for="influxdb2-auth" class="col-sm-2 col-form-label">InfluxDB v2 Auth:</label><div class="col-sm-4"><input type="text" maxlength="100" class="form-control" name="influxdb2-auth" id="influxdb2-auth"></div></div><hr class="my-2"><div class="form-group row"><label for="mqtt-push" class="col-sm-2 col-form-label">MQTT Server:</label><div class="col-sm-4"><input type="text" maxlength="40" class="form-control" name="mqtt-push" id="mqtt-push"></div></div><div class="form-group row"><label for="mqtt-topic" class="col-sm-2 col-form-label">MQTT Port:</label><div class="col-sm-4"><input type="number" min="1" max="65535" class="form-control" name="mqtt-port" id="mqtt-port"></div></div><div class="form-group row"><label for="mqtt-user" class="col-sm-2 col-form-label">MQTT User:</label><div class="col-sm-4"><input type="text" maxlength="20" class="form-control" name="mqtt-user" id="mqtt-user"></div></div><div class="form-group row"><label for="mqtt-pass" class="col-sm-2 col-form-label">MQTT Password:</label><div class="col-sm-4"><input type="text" maxlength="20" class="form-control" name="mqtt-pass" id="mqtt-pass"></div></div><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button type="submit" class="btn btn-primary" id="push-btn2">Save</button></div></div></form><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button class="btn btn-info" id="format-btn2">Format editor</button> <button class="btn btn-info" id="test-btn2">Test Push</button></div></div></div></div></div><div class="card"><div class="card-header" id="headingGravity"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href="#collapseGravity"" type="button" data-toggle="collapse" data-target="#collapseGravity" aria-expanded="false" aria-controls="collapseGravity">Gravity</button></h2></div><div id="collapseGravity" class="collapse" aria-labelledby="headingGravity" data-parent="#accordion"><div class="card-body"><form action="/api/config/gravity" method="post"><input type="text" name="id" id="id3" hidden><fieldset class="form-group row"><legend class="col-form-label col-sm-2 float-sm-left pt-0">Gravity Format:</legend><div class="col-sm-4"><div class="form-check"><input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-g" value="G" checked> <label class="form-check-label" for="gravity-format-g">SG</label></div><div class="form-check"><input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-p" value="P"> <label class="form-check-label" for="gravity-format-p">Plato</label></div></div></fieldset><div class="form-group row"><label for="gravity-formula" class="col-sm-2 col-form-label">Formula (SG)</label><div class="col-sm-10"><input type="text" maxlength="200" class="form-control" name="gravity-formula" id="gravity-formula"></div></div><div class="form-group row"><div class="col-sm-4 offset-sm-2"><div class="form-check"><input class="form-check-input" type="checkbox" name="gravity-temp-adjustment" id="gravity-temp-adjustment"> <label class="form-check-label" for="gravity-temp-adjustment">Temperature adjust gravity</label></div></div></div><div class="form-group row"><div class="col-sm-4 offset-sm-2"><button type="submit" class="btn btn-primary" id="gravity-btn">Save</button></div></div></form></div></div></div><div class="card"><div class="card-header" id="headingHardware"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href="#collapseHardware"" type="button" data-toggle="collapse" data-target="#collapseHardware" aria-expanded="false" aria-controls="collapseHardware">Hardware settings</button></h2></div><div id="collapseHardware" class="collapse" aria-labelledby="headingHardware" data-parent="#accordion"><div class="card-body"><form action="/api/config/hardware" method="post"><input type="text" name="id" id="id4" hidden><div class="form-group row"><label for="voltage-factor" class="col-sm-2 col-form-label">Voltage factor:</label><div class="col-sm-2"><input type="number" step=".01" class="form-control" name="voltage-factor" id="voltage-factor"></div><label for="voltage-factor" class="col-sm-3 col-form-label" id="battery">Loading...</label></div><div class="form-group row"><label for="temp-adjustment-value" class="col-sm-2 col-form-label">Temp Sensor Adj:</label><div class="col-sm-2"><input type="number" step=".1" class="form-control" name="temp-adjustment-value" id="temp-adjustment-value"></div></div><div class="form-group row"><div class="col-sm-3 offset-sm-2"><div class="form-check"><input class="form-check-input" type="checkbox" name="gyro-temp" id="gyro-temp"> <label class="form-check-label" for="gyro-temp">Use gyro temperature</label></div></div></div><div class="form-group row"><label class="col-sm-2 col-form-label" for="ble">Bluetooth tilt color:</label><div class="col-sm-2"><select class="form-control" id="ble" name="ble" disabled><option value="">-not active-</option><option value="red">red</option><option value="green">green</option><option value="black">black</option><option value="purple">purple</option><option value="orange">orange</option><option value="blue">blue</option><option value="yellow">yellow</option><option value="pink">pink</option></select></div></div><div class="form-group row"><label for="ota-url" class="col-sm-2 col-form-label">OTA base URL:</label><div class="col-sm-10"><input type="url" maxlength="90" class="form-control" name="ota-url" id="ota-url"></div></div><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button type="submit" class="btn btn-primary" id="hardware-btn">Save</button></div></div></form></div></div></div></div><hr class="my-4"></div><div class="modal fade" id="modal-http" tabindex="-1" role="dialog" aria-labelledby="modal-header" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="modal-header">Define HTTP headers</h5></div><div class="modal-body"><label for="http-header" class="col-form-label">Header 1 (Header: value)</label> <input type="text" maxlength="100" class="form-control" id="header1" oninput="checkHeader(this)"> <label for="http-header" class="col-form-label">Header 2 (Header: value)</label> <input type="text" maxlength="100" class="form-control" id="header2" oninput="checkHeader(this)"> <input type="text" id="field1" hidden> <input type="text" id="field2" hidden></div><div class="modal-footer"><button type="button" class="btn btn-primary" id="btn-close" data-dismiss="modal">Close</button></div></div></div></div><script>function checkHeader(d){console.log(d.value),""!=d.value&&-1==d.value.indexOf(":")?($("#btn-close").prop("disabled",!0),$(d).removeClass("is-valid").addClass("is-invalid")):($("#btn-close").prop("disabled",!1),$(d).removeClass("is-invalid").addClass("is-valid"))}$("#modal-http").on("show.bs.modal",function(d){var a=$(d.relatedTarget),l=a.data("field1"),e=a.data("field2"),i=$(this);i.find(".modal-body #header1").val($(l).val()),i.find(".modal-body #header2").val($(e).val()),i.find(".modal-body #field1").val(l),i.find(".modal-body #field2").val(e)}),$("#modal-http").on("hide.bs.modal",function(d){var a=$(this);field1=a.find(".modal-body #field1").val(),field2=a.find(".modal-body #field2").val(),$(field1).val(a.find(".modal-body #header1").val()),$(field2).val(a.find(".modal-body #header2").val())})</script><script type="text/javascript">function estimateBatteryLife(t){var a=160,e=5,o=2200,l=parseInt($("#runtime-average").val());l<1&&(l=2);var i=86400/(t+l)*(l/3600)*a+e;return o/i}function updateSleepInfo(){var t=parseInt($("#sleep-interval").val()),a=estimateBatteryLife(t),e=Math.floor(t/60)+" m "+t%60+" s",o=Math.floor(a/7)+" weeks "+t%7+" days";$("#sleep-interval-info").text(e),console.log("Estimated life: "+o),hideWarningGyro(),0<t&&t<300?($("#gyro-temp").is(":checked")&&showWarningGyro(),showWarningSleep()):hideWarningSleep()}function setButtonDisabled(t){$("#device-btn").prop("disabled",t),$("#calibrate-btn").prop("disabled",t),$("#push-btn").prop("disabled",t),$("#format-btn").prop("disabled",t),$("#test-btn").prop("disabled",t),$("#gravity-btn").prop("disabled",t),$("#hardware-btn").prop("disabled",t),$("#push-btn2").prop("disabled",t),$("#format-btn2").prop("disabled",t),$("#test-btn2").prop("disabled",t)}function getConfig(){setButtonDisabled(!0);var t="/api/config";$("#spinner").show(),$.getJSON(t,function(t){console.log(t),"esp32"==t.platform&&($("#ble").prop("disabled",!1),$("#ble").val(t.ble)),$("#id1").val(t.id),$("#id2").val(t.id),$("#id3").val(t.id),$("#id4").val(t.id),$("#id5").val(t.id),$("#mdns").val(t.mdns),"C"==t["temp-format"]?$("#temp-format-c").click():$("#temp-format-f").click(),"G"==t["gravity-format"]?$("#gravity-format-g").click():$("#gravity-format-p").click(),$("#ota-url").val(t["ota-url"]),$("#token").val(t.token),$("#http-push").val(t["http-push"]),$("#http-push-h1").val(t["http-push-h1"]),$("#http-push-h2").val(t["http-push-h2"]),$("#http-push2").val(t["http-push2"]),$("#http-push2-h1").val(t["http-push2-h1"]),$("#http-push2-h2").val(t["http-push2-h2"]),$("#brewfather-push").val(t["brewfather-push"]),$("#influxdb2-push").val(t["influxdb2-push"]),$("#influxdb2-org").val(t["influxdb2-org"]),$("#influxdb2-bucket").val(t["influxdb2-bucket"]),$("#influxdb2-auth").val(t["influxdb2-auth"]),$("#mqtt-push").val(t["mqtt-push"]),$("#mqtt-port").val(t["mqtt-port"]),$("#mqtt-user").val(t["mqtt-user"]),$("#mqtt-pass").val(t["mqtt-pass"]),$("#sleep-interval").val(t["sleep-interval"]),$("#voltage-factor").val(t["voltage-factor"]),$("#gravity-formula").val(t["gravity-formula"]),$("#temp-adjustment-value").val(t["temp-adjustment-value"]),$("#gravity-temp-adjustment").prop("checked",t["gravity-temp-adjustment"]),$("#gyro-temp").prop("checked",t["gyro-temp"]),$("#gyro-calibration-data").text(t["gyro-calibration-data"].ax+","+t["gyro-calibration-data"].ay+","+t["gyro-calibration-data"].az+","+t["gyro-calibration-data"].gx+","+t["gyro-calibration-data"].gy+","+t["gyro-calibration-data"].gz),$("#battery").text(t.battery+" V"),$("#angle").text(t.angle),$("#runtime-average").val(t["runtime-average"])}).fail(function(){showError("Unable to get data from the device.")}).always(function(){$("#spinner").hide(),setButtonDisabled(!1),updateSleepInfo()})}window.onload=getConfig,setButtonDisabled(!0),$(document).ready(function(){null!=location.hash&&""!=location.hash&&($(".collapse").removeClass("in"),$(location.hash+".collapse").collapse("show"))}),$("#calibrate-btn").click(function(t){console.log("Calibrating..."),$.ajax({type:"POST",url:"/api/calibrate",data:{id:$("#id1").val()},success:function(t){showSuccess("Calibration of device was completed successfully."),getConfig()},error:function(t){showError("Unable to calibrate device.")}})}),$("#format-btn").click(function(t){window.location.href="/format.htm"}),$("#format-btn2").click(function(t){window.location.href="/format.htm"}),$("#test-btn").click(function(t){window.location.href="/test.htm"}),$("#test-btn2").click(function(t){window.location.href="/test.htm"}),$("#sleep-interval").keyup(updateSleepInfo),$("#gyro-temp").change(updateSleepInfo)</script><!-- START FOOTER --><div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div></body></html> |