Welcome to Your Professional Programming Guide

010-060-0160 6:00 AM - 11:00 PM (Mon-Fri)
Twitter Facebook Google+ LinkedIn Pinterest Tumblr Reddit
Question

using Bootstrap 5. I have the following issues

Tags: JavaScript HTML Client-Side
Date:
Status:Unresolved
Question Id:24

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!

Answer
Date:
Correct:No

code tags

[code] 
code here... 
[/code]

or enclosed in three backticks

``` code here... ```
Answer
Date:
Correct:No

Setting output's textContent instead of value, seems to do the trick.

Note you have already declared input and output, so no need to search the DOM each time clearText is called

const clearText = () => {
  input.value = ''
  output.textContent = ''
}

I would also avoid starting your function names with a capital letter. The convention is to reserve this for classes and constructor functions e.g.

class Person {
  constructor(name) {
    this.name = name
  }
}

function Animal(type) {
  this.type = type
}

const bob = new Person('Bob')
const rover = new Animal('Dog')
Answer
Date:
Correct:No

Thank you for the reply. I just used the 'code' tags on the create post buttons and it placed ''.

I will try those suggestions

Answer
Date:
Correct:No

RPG. You are a saint. That works. Thank you. Literally hours and hours of Googling didn't get me anywhere.

I also changed all my names to lower case. Thanks

Just got to fix this lack of animation on a mobile device now.

Also, as a side question... This routine reads gets text of the text box we have just fixed.

 

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; //var content = reader.result; }); reader.readAsBinaryString(myFile); // } else { output.innerText = "File not supported!" } });

I lifted this from online and tweaked it for my requirements, but have still to get my head around how this exactly works.

If I would like to send the contents of this text file using websockets, what do I send?

I am thinking I have a for I loop until an end character is reported and send the data one letter at a time using connection.send(content[#]); ?

Not even sure which variable contains the document!

Ah... learning at 53 yrs old, just isn’t as easy as it used to be

Answer
Date:
Correct:No

I am glad it worked.

Websockets are not something I have any experience with.

Reading up you can send a string, BLOB, Array buffer, typed array or DataView object.

There is a bufferedAmount property on the websockets object, which tells you the number of bytes buffered/left to send — There is no event listener for this though.

I would imagine some sort of setTimeout loop could be used to check on that amount, but that is purely guess work — out of my depth really.

Maybe someone else on here is better placed to help.

48, so not too far behind 🙂

Answer
Date:
Correct:No

I am sure this isn't the way to learn it, but it's worked for me so far.
I basically lift code from Google, try and work out how it works and adapt it to my needs. I have yet to find a decent book that doesn't fry my tiny mind with techno-babble.

I have Websockets working. I can send: connection.send("Hello Steve"); and it will arrive on my Oled display attached to my ESP8266 IC fine. I also have it controlling an RGB LED just fine sending variables.

My stumbling block at the moment is actually the mobile application. I just cannot get it to work correctly on a mobile device.
If I put @import "bootstrap/scss/bootstrap"; in the CSS field, it will load the graphics and formatting - even though it reports that the import is illegal and doesn't work. Animation of the gauges app doesn't work either.
I am clearly missing some important code to allow mobile device usage.

I thought CodePly as a learning tool would have assisted there, but it doesn't. It's a nice learning environment for quick coding, but doesn't help when it comes to the correct method of laying out a document or script (doesn't allow <Script> <Head> etc.
I will abandon it soon, as it appears to have zero customer support or community.

Answer
Date:
Correct:No

orry what with work, have not had time to look at this.

Looking at the samples page on an android phone the animations work fine.

Have you tried running a test with a basic demo gauge example, maybe minus bootstrap 5 initially — as a process of elimination.

For instance, could you get this to work on android

<!doctype html>
<html>
<head>
    <title>Gauge Example</title>
    <script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/radial/gauge.min.js"></script>
</head>
<body>
<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
        data-width="400"
        data-height="400"
        data-units="Km/h"
        data-title="false"
        data-value="0"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-animated-value="true"
>
</canvas>
<script>
  window.addEventListener('load', () => {

    const getRandomValue = ({maxValue, minValue}) => (
      Math.random() * (maxValue - minValue) + minValue
    )

    const initGauge = gauge => {
        setInterval(
          () => {
            gauge.value = getRandomValue(gauge.options)
          },
          gauge.animation.duration + 1000
        )
    }

    initGauge(window.document.gauges[0])
  })
</script>
</body>
</html>

BTW the necessity for window.onload threw me for a bit

Answer
Date:
Correct:No

Oh the time I have put into this 😅

I just have no idea why it doesn't load. I now seem to have lost the formatting entirely, and I have not removed anything.
I don't think this CodePly platform is actually helping me. I think its making it more difficult to work out what is wrong.

I am not sure if it's the correct way to do it, but I loaded the gauges examples page an then viewed its elements to see if I could find what I am missing. No luck there.

I did bin Bootstrap 5 and try 4, but that made no difference. I will try you suggestion. Thank you

Answer
Date:
Correct:No

Again haven't had chance to have a proper look. I'm not familiar with codeply — I'm guessing it is similar to codepen, which I do use.

When I have chance I will see how your code runs in codepen.

Personally I tend to develop in vscode, which if you haven't tried is an excellent code editor/environment to work in.

A quick manual conversion of the JS back to pre ES6 (Not tested)

window.addEventListener('load', function() {

  const getRandomValue = function(options) {
    return Math.random() * (options.maxValue - options.minValue) + options.minValue
  }

  const initGauge = function(gauge) {
      setInterval(
        function() {
          gauge.value = getRandomValue(gauge.options)
        },
        gauge.animation.duration + 1000
      )
  }

  initGauge(window.document.gauges[0])
})

Off to work.....

Answer
Date:
Correct:No

I VERY much appreciate you taking the time to look through this. I would buy you a beer if I could.

I will look through your code and amend mine to suit. See if I can achieve the same outcome.

Many thanks for your valuable time.

Answer
Date:
Correct:No

OK. After a little tinkering around, we are all working fine.
Turned out that CodePly was messing up the links to the external libraries.
After I looked through the HTML code, and altered some links, its all up and running.
Many thanks rpg2009 for your assistance.

CodePly is OK, but actually makes learning HTML etc harder.
I have got on better just using NotePad!

Answer
Date:
Correct:No

That's great to hear Stevolution2021 — well done for sticking at it.

I used to use notepad++, then sublime text and now VSCode.

I had vscode recommended to me about a year ago, by someone at work, and it's excellent.

It comes with emmet built in e.g. type ! then tab key and it builds a basic html template for you.

Liveserver is a handy extension that opens up a browser preview which updates in real time as you make changes.

There are a whole host of easy to install and useful extensions as well as a built in terminal, it's worth a look.

Answer
Date:
Correct:No

Just as a follow on update...

I got the code to work on a mobile, but I have had to bin CodePly as a platform, as it is totally unhelpful.
There is no support what-so-ever for starters.

I need to add links to my external .JS files (stored on the ESP8266) and you just cannot do it.
There doesn't appear to be any way of adding these to your project (and therefore, it's created index.html file) in the correct place.

For instance, I needed to add into the Head:

<script src='/js/scripts.js'></script>
<script src='/js/bootstrap.js.map'></script>
<script src='/js/bootstrap.min.js'></script>
<script src='/js/gauge.min.js'></script>

But you cannot do that. It will not accept any code with script as the source, and will not allow any source links unless they start http:// (which they are not, because they are locally stored files).
Therefore, the only way to do it is by manually adding these lines into the index.html file after it's been created.
That is a real pain to do every single time you test the code.

Also, you then have to take out several lines that you don't need that it has added.

So, I tried VSCode and literally had no idea what the heck I was doing. I gave up after an hour.

So, I think it's time I admitted defeat. Developing this software is proving to be outside my ability.
The development setup is just too complicated.

Your Answer

Review Your Answer