Thread: TOTAL newbie, trying to get my head around several issues

Hello

Hope htis is the correct place to post?

Been playing about with CodePly, and tying to get my head around HTML and Java programming. My usual way to learn this stuff is to just throw random 'chunks' of code in that I have found with Google, and then work out how to make it work.
Not sure that is really the way forward, but it's worked up until now.

I am playing around with 2 way comms between my ESP8266 and a webpage.

I have several issues that I have been some time trying to fix.

My HTML draws some gauges using the CanvasGauge library. They then update from Java. The animate the needle movement and all works fine on a PC webpage, but the animation is missing when viewed on a mobile device (the needle instantly jumps between values). Cannot work out what I am missing to make animations active on a mobile device.
Any idea what I should be adding to my code to make it work on a mobile device?

Not sure what code you would want me to post here ... it's fairly extensive. If you look at the examples on a mobile device, the animations work.

It won't let me post the link to the gauges page.


Then I have a form set up in HTML that lets you browse and select a local .txt file. This then displays in a text box underneath the button.

The HTML...

<div class="container-fluid">        
    <div class="jumbotron text-center container p-3 my-3 bg-secondary text-white">      
        <div class="row justify-content-center">
            <div class="col-auto">            
                <h4 class="text-center">Send text file to the processor</h4>
                    <form>
                        <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-->
                        </div>
                    </form>
                    <p class="mb-2"></p>
                    <button class="btn btn-danger" onclick="ClearText();" >Clear text box</button>
                <p class="mb-3"></p>
 
                <button class="btn btn-info" onclick="TextData();">Send the text data to the ESP8266</button>
            </div>
        </div>  
    </div>    
</div>

The Java...

var input = document.getElementById("myFile");        // Display the opened file in the HTML text box   Selected file = myFile
var output = document.getElementById("output");       // The file after it has been opened, and sent back to the page as '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);                // Read the contents of 'myFile'
  }
});

This works, but I would now like to send that retrieved text file onto my ESP8266 using Websockets .I use ... connection.send('myData');
How would I achieve that?

Finally, there is a clear the text box button...

function ClearText () {                                 // Clear the text box and flag
    document.getElementById('output').value = "";
}

This clears the text, but then when you open a new text file, it doesn't display it.

Hmm...