Hello. I hope I am not going to annoy anyone here!
Decided to try and make my ESP8266 talk to a webpage and back again.
Got websockets etc working fine. I don't know HTML or JavaScript that well, so I am learning as I go.
I have been using CodePly as a learning platform. Seems quite decent.
So, using Bootstrap 5. I have the following issues..
There are gauges on the page. Initialised in HTML and the value is updated in Java after being received from my ESP8266. They animate fine when viewed on a PC, but the needle animation is missing when viewed on my mobile phone (Android). The needle simply jumps between values.
The gauge demo page works on my phone, so I cannot work out what I am missing with regards to animation on my phone. Must be a library or something?
Rather than post the large code, maybe anyone has an idea of what needs adding to enable animations on a mobile device?
https://canvas-gauges.com/documentation/examples/
Clearing a HTML text box.
I have a button to browse my pc and upload a .txt file to a form using HTML and Java.
Works fine. But the clear function does not work.
When you press the clear button, the text clears, and the button resets as I expected. But, when you select a new file, it does not load it into the text window. It's a one shot affair. Ideas?
HTML:
`<form name="GetMacro">
<div class="form-group">
<p class="mb-3"></p>
<input type="file" class="form-control-file" id="myFile" accept=".txt"> <! --Opens a file browse box-->
<p class="mb-3"></p>
<label>Retrieved text from local file</label>
<textarea class="form-control" id="output" readonly cols="100" rows="5"></textarea> <! --Draws a box to display the text-->
<input type="button" value="Reset Form" onClick="this.form.reset()" />
</div>
</form>
<p class="mb-2"></p>
<button class="btn btn-danger" onclick="ClearText();" >Clear text box</button>
//JavaScript:
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
function ClearText () { // Clear the selected file
//output.setText("");
document.getElementById('myFile').value = ""; // This clears the selected file
document.getElementById('output').value = ""; // This clears the text box
//document.getElementById("GetMacro").reset();
//document.getElementById("output").reset();
//form.reset();
//document.forms[0].reset();
}
`
The commented out items in the ClearText script are other attempts to make it work.
Had a nightmare with the formatting in here... made a right mess of the code?
Thank you!
