/    Sign up×
Community /Pin to ProfileBookmark

Newbie with a few issues

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!

to post a comment
HTMLJavaScript

37 Comments(s)

Copy linkTweet thisAlerts:
@rpg2009Jan 17.2021 — > @Stevolution2021#1626880 Had a nightmare with the formatting in here... made a right mess of the code?

code tags
``<i>
</i>
code here...
<i>
</i>
`</CODE>

or enclosed in three backticks
<CODE></code></span>`<span><code> code here... </code></span>`<span><code></CODE>

<QUOTE><i>&gt; </i><POSTMENTION discussionid="392429" displayname="Stevolution2021" id="1626880" number="1" username="Stevolution2021">@Stevolution2021#1626880</POSTMENTION> 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?</QUOTE>

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
<CODE>
`<i>
</i>const clearText = () =&gt; {
input.value = ''
output.textContent = ''
}<i>
</i>
`</CODE>

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.

<CODE>
`<i>
</i>class Person {
constructor(name) {
this.name = name
}
}

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

const bob = new Person('Bob')
const rover = new Animal('Dog')<i>
</i>
``
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 18.2021 — Thank you for the reply. I just used the 'code' tags on the create post buttons and it placed ''.

I will try those suggestions
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 18.2021 — 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 &amp;&amp; this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
<br/>
<i> </i>reader.addEventListener('load', function (e) {
<i> </i> output.textContent = e.target.result;
<i> </i> //var content = reader.result;
<i> </i>});
<i> </i>
<i> </i>reader.readAsBinaryString(myFile); // } else {
<i> </i>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
Copy linkTweet thisAlerts:
@rpg2009Jan 18.2021 — I am glad it worked.

> @Stevolution2021#1626902 If I would like to send the contents of this text file using websockets, what do I send?

[Websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) 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.

> @Stevolution2021#1626902 Ah... learning at 53 yrs old, just isn’t as easy as it used to be

48, so not too far behind :)
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 19.2021 — 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.
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 19.2021 — Well, after another 4 hours with no progress, I am abandoning this project.

Put a mad amount of hours into it and not getting much back. Thanks for your advice
Copy linkTweet thisAlerts:
@rpg2009Jan 20.2021 — Sorry 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

``<i>
</i>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Gauge Example&lt;/title&gt;
&lt;script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/radial/gauge.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Injecting radial gauge --&gt;
&lt;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"
&gt;
&lt;/canvas&gt;
&lt;script&gt;
window.addEventListener('load', () =&gt; {

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

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

initGauge(window.document.gauges[0])
})
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;<i>
</i>
``

BTW the necessity for window.onload threw me for a bit
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 20.2021 — 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
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 20.2021 — Well, this is the HTML code that CodePly generates.

The layout works fine on a PC, but all colours, Bootstrap formatting etc fail on a mobile.

It requests css/styles.css, yet that file has nothing in it. I assume it's using the default Bootstrap settings for the page when viewed on a PC?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html &gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
&lt;meta name="generator" content="Codeply" /&gt;
&lt;title&gt;Bootstrap 5 RGB controller v7&lt;/title&gt;
&lt;base target="_self"&gt;

&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /&gt;

&lt;link rel="stylesheet" href="css/styles.css" /&gt;
&lt;/head&gt;
&lt;body &gt;
<br/>
&lt;div class="container-fluid"&gt;
&lt;div class="jumbotron text-center container p-3 my-3 bg-dark text-white"&gt; &lt;!-- Create the grey box --&gt;
&lt;img src="img/logo.png" alt="Logo image" width="300" height="100" class="mx-auto d-block"&gt;
&lt;h1&gt;RGB CONTROLLER&lt;/h1&gt;
&lt;p&gt;Communications over WiFi between webpage and ESP8266&lt;/p&gt;
&lt;p&gt;Received data: &lt;span id='d1'&gt;---&lt;/span&gt; &lt;/p&gt;
&lt;/div&gt; <br/>
&lt;/div&gt;

&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"&gt; <br/>
&lt;div class="row justify-content-center"&gt;
&lt;div class="col-auto"&gt;
&lt;table class="table table-responsive"&gt;
&lt;tr&gt;
&lt;td style="width:14.4px; text-align: right"&gt;R: &lt;/td&gt;
&lt;td&gt;&lt;input class="enabled" id="r" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="width:14.4px; text-align: right"&gt;G: &lt;/td&gt;
&lt;td&gt;&lt;input class="enabled" id="g" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="width:14.4px; text-align: right"&gt;B: &lt;/td&gt;
&lt;td&gt;&lt;input class="enabled" id="b" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p style="margin:8px 0px"&gt;
&lt;button id="rainbow" class="button" style="background-color:#999" onclick="rainbowEffect();"&gt;Rainbow mode&lt;/button&gt;
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt;

&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"&gt; <br/>
&lt;div class="row justify-content-center"&gt;
&lt;div class="col-auto"&gt;
&lt;p&gt;RGB values relayed back from the processor in gauge format&lt;/p&gt;
<br/>
<i> </i> &lt;! --RED gauge---------------------------------------------------------&gt;
<i> </i> &lt;canvas data-type="radial-gauge"
<i> </i> id="redGauge"
<i> </i> data-width="150"
<i> </i> data-height="150"
<i> </i> data-animation="true"
<i> </i> data-animatedValue="true"
<i> </i> data-animateOnInit="true"
<i> </i> data-animation-duration="800"
<i> </i> data-animation-rule="linear"
<i> </i>
<i> </i> data-value-box="true"
<i> </i> data-font-value="Led"
<i> </i> data-units="RED"
<i> </i> data-title="LED"
<i> </i>
<i> </i> data-min-value="0"
<i> </i> data-max-value="1200"
<i> </i>
<i> </i> data-major-ticks="0,100,200,300,400,500,600,700,800,900,1000,1100,1200"
<i> </i> data-minor-ticks="10"
<i> </i> data-stroke-ticks="false"
<i> </i> data-highlights='[
<i> </i> { "from": 0, "to": 200, "color": "rgba(0,255,0,.15)" },
<i> </i> { "from": 200, "to": 400, "color": "rgba(255,255,0,.15)" },
<i> </i> { "from": 400, "to": 600, "color": "rgba(255,30,0,.25)" },
<i> </i> { "from": 600, "to": 800, "color": "rgba(255,0,225,.25)" },
<i> </i> { "from": 800, "to": 1200, "color": "rgba(0,0,255,.25)" }
<i> </i> ]'
<i> </i> data-color-plate="#fc0022"
<i> </i> data-color-major-ticks="#ffffff"
<i> </i> data-color-minor-ticks="#ddd"
<i> </i> data-color-title="#fff"
<i> </i> data-color-units="#ffffff"
<i> </i> data-color-numbers="#ffffff"
<i> </i>
<i> </i> data-color-needle-start="rgba(240, 128, 128, 1)"
<i> </i> data-color-needle-end="rgba(255, 160, 122, .9)"
<i> </i> data-needleShadow="true"
<i> </i> data-needleType="arrow"
<i> </i> data-needle-width="6"
<i> </i> data-needle-circle-size="10"
<i> </i> data-needle-circle-outer="true"
<i> </i> data-needle-circle-inner="true"
<i> </i> &gt;&lt;/canvas&gt;
<i> </i>
<i> </i> &lt;! --GREEN gauge---------------------------------------------------------&gt;
<i> </i> &lt;canvas id="greenGauge"
<i> </i> data-type="radial-gauge"
<i> </i> data-width="150"
<i> </i> data-height="150"
<i> </i> data-animatedValue="true"
<i> </i> data-animateOnInit="true"
<i> </i> data-units="GREEN"
<i> </i> data-title="false"
<i> </i> data-min-value="0"
<i> </i> data-max-value="1200"
<i> </i> data-major-ticks="0,100,200,300,400,500,600,700,800,900,1000,,1100,1200"
<i> </i> data-minor-ticks="10"
<i> </i> data-stroke-ticks="false"
<i> </i> data-highlights='[
<i> </i> { "from": 0, "to": 200, "color": "rgba(0,255,0,.15)" },
<i> </i> { "from": 200, "to": 400, "color": "rgba(255,255,0,.15)" },
<i> </i> { "from": 400, "to": 600, "color": "rgba(255,30,0,.25)" },
<i> </i> { "from": 600, "to": 800, "color": "rgba(255,0,225,.25)" },
<i> </i> { "from": 800, "to": 1200, "color": "rgba(0,0,255,.25)" }
<i> </i> ]'
<i> </i> data-color-plate="#54bd0f"
<i> </i> data-color-major-ticks="#ffffff"
<i> </i> data-color-minor-ticks="#ddd"
<i> </i> data-color-title="#fff"
<i> </i> data-color-units="#000000"
<i> </i> data-color-numbers="#000000"
<i> </i> data-color-needle-start="rgba(240, 128, 128, 1)"
<i> </i> data-color-needle-end="rgba(255, 160, 122, .9)"
<i> </i> data-needleShadow="true"
<i> </i> data-value-box="true"
<i> </i> data-animation-rule="linear"
<i> </i> data-needleType="arrow"
<i> </i> data-needle-width="6"
<i> </i> data-animation="true"
<i> </i> data-animation-duration="1000"
<i> </i> data-font-value="Led"
<i> </i> data-animated-value="true"&gt;
<i> </i> &lt;/canvas&gt;
<i> </i>
<i> </i> &lt;! --BLUE gauge---------------------------------------------------------&gt;
<i> </i> &lt;canvas id="blueGauge"
<i> </i> data-type="radial-gauge"
<i> </i> data-width="150"
<i> </i> data-height="150"
<i> </i> data-animation="true"
<i> </i> data-animatedValue="true"
<i> </i> data-animateOnInit="true"
<i> </i> data-animation-duration="1000"
<i> </i> data-animation-rule="linear"
<i> </i>
<i> </i> data-value-box="true"
<i> </i> data-font-value="Led"
<i> </i> data-units="BLUE"
<i> </i> data-title="false"
<i> </i>
<i> </i> data-min-value="0"
<i> </i> data-max-value="1200"
<i> </i>
<i> </i> data-major-ticks="0,100,200,300,400,500,600,700,800,900,1000,1100,1200"
<i> </i> data-minor-ticks="10"
<i> </i> data-stroke-ticks="false"
<i> </i> data-highlights='[
<i> </i> { "from": 0, "to": 200, "color": "rgba(0,255,0,.15)" },
<i> </i> { "from": 200, "to": 400, "color": "rgba(255,255,0,.15)" },
<i> </i> { "from": 400, "to": 600, "color": "rgba(255,30,0,.25)" },
<i> </i> { "from": 600, "to": 800, "color": "rgba(255,0,225,.25)" },
<i> </i> { "from": 800, "to": 1200, "color": "rgba(0,0,255,.25)" }
<i> </i> ]'
<i> </i> data-color-plate="#1638d2"
<i> </i> data-color-major-ticks="#ffffff"
<i> </i> data-color-minor-ticks="#ddd"
<i> </i> data-color-title="#fff"
<i> </i> data-color-units="#ffffff"
<i> </i> data-color-numbers="#ffffff"
<i> </i>
<i> </i> data-color-needle-start="rgba(240, 128, 128, 1)"
<i> </i> data-color-needle-end="rgba(255, 160, 122, .9)"
<i> </i> data-needleShadow="true"
<i> </i> data-needleType="arrow"
<i> </i> data-needle-width="6"
<i> </i> &gt;&lt;/canvas&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i>&lt;/div&gt;
&lt;/div&gt;
<br/>
<i> </i>
&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-warning text-black"&gt; <br/>
&lt;div class="col-auto"&gt; <br/>
&lt;h4 class="text-center"&gt;Reset Leds&lt;/h4&gt;
&lt;button class="btn btn-danger" onclick="redButton();"&gt;Clear RED&lt;/button&gt;
&lt;button class="btn btn-success" onclick="greenButton();"&gt;Clear GREEN&lt;/button&gt;
&lt;button class="btn btn-primary" onclick="blueButton();"&gt;Clear BLUE&lt;/button&gt;
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt;


&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"&gt; <br/>
&lt;div class="row justify-content-center"&gt;
&lt;div class="col-auto"&gt; <br/>
&lt;h4 class="text-center"&gt;Send text file to the processor&lt;/h4&gt;
&lt;form id="ToSend"&gt;
&lt;div class="form-group"&gt;
&lt;p class="mb-3"&gt;&lt;/p&gt;
&lt;input type="file" class="form-control-file" id="myFile" accept=".txt"&gt; &lt;! --Opens a file browse box--&gt;
&lt;p class="mb-3"&gt;&lt;/p&gt;
&lt;label&gt;Retrieved text from local file&lt;/label&gt;
&lt;textarea class="form-control" id="output" readonly cols="100" rows="5"&gt;&lt;/textarea&gt; &lt;! --Draws a box to display the text--&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;p class="mb-2"&gt;&lt;/p&gt;
&lt;button class="btn btn-danger" onclick="clearText();" &gt;Clear text box&lt;/button&gt;
&lt;p class="mb-3"&gt;&lt;/p&gt;
&lt;button class="btn btn-info" onclick="textData();"&gt;Send the text data to the ESP8266&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt;
<br/>
<i> </i>
&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"&gt; <br/>
&lt;div class="row justify-content-center"&gt;
&lt;div class="col-auto"&gt; <br/>
&lt;h4 class="text-center"&gt;Check switches&lt;/h4&gt;
&lt;div class="form-col align-items-center"&gt;
&lt;div class="col-auto"&gt;
&lt;input class="form-check-input" type="checkbox" id="gridCheck1" onclick="tick1();"&gt;
&lt;label class="form-check-label" for="gridCheck1"&gt; Switch 1 &lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-auto"&gt;
&lt;input class="form-check-input" type="checkbox" id="gridCheck2" onclick="tick2();"&gt;
&lt;label class="form-check-label" for="gridCheck2"&gt; Switch 2 &lt;/label&gt;
&lt;/div&gt;
&lt;div class="col-auto"&gt;
&lt;input class="form-check-input" type="checkbox" id="gridCheck3" onclick="tick3();"&gt;
&lt;label class="form-check-label" for="gridCheck3"&gt; Switch 3 &lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt;
<br/>
<i> </i>
&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-white text-black"&gt; <br/>
&lt;div class="col-auto"&gt; <br/>
&lt;button class="btn btn-info" onclick="getMacro();" &gt;Retrieve current Macro file (.txt data)&lt;/button&gt;
&lt;p class="text-center"&gt;This is the current Macro file data:&lt;/p&gt;
&lt;/div&gt; <br/>
&lt;/div&gt; <br/>
&lt;/div&gt;

&lt;div class="container-fluid"&gt; <br/>
&lt;div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"&gt; <br/>
&lt;div class="col-auto"&gt; <br/>
&lt;! --VOLTAGE gauge--&gt;
&lt;canvas id="volts"
data-type="linear-gauge"
data-width="100"
data-height="300"
data-color-plate="#e0e0eb"
data-border-radius="10"
data-borders="0"
data-bar-begin-circle="25"
data-minor-ticks="10"
data-value="0"
data-min-value="0"
data-max-value="12"
data-title="Processor Volts"
data-major-ticks="1,2,3,4,5,6,7,8,9,10,11,12"
data-ticks-width="18"
data-ticks-width-minor="5"
data-bar-width="5"
data-highlights="false"
data-color-value-box-shadow="false"
data-value-box-stroke="0"
data-color-value-box-background="false"
data-value-int="2"
data-value-dec="1"
&gt;&lt;/canvas&gt;
<br/>
<i> </i> &lt;! --Pot gauge--&gt;
<i> </i> &lt;canvas data-type="radial-gauge"
<i> </i> canvas id="pot"
<i> </i> data-width="200"
<i> </i> data-height="200"
<i> </i> data-units="ADC"
<i> </i> data-min-value="0"
<i> </i> data-max-value="1000"
<i> </i> data-major-ticks="0,100,200,300,400,500,600,700,800,900,1000"
<i> </i> data-minor-ticks="5"
<i> </i> data-stroke-ticks="true"
<i> </i> data-highlights='[
<i> </i> {"from": 800, "to": 1023, "color": "rgba(200, 50, 50, .75)"}
<i> </i> ]'
<i> </i> data-color-plate="#fff"
<i> </i> data-border-shadow-width="0"
<i> </i> data-borders="false"
<i> </i> data-needle-type="arrow"
<i> </i> data-needle-width="2"
<i> </i> data-needle-circle-size="7"
<i> </i> data-needle-circle-outer="true"
<i> </i> data-needle-circle-inner="false"
<i> </i> data-animation-duration="1500"
<i> </i> data-animation-rule="linear"
<i> </i> &gt;&lt;/canvas&gt;
<i> </i>
<i> </i> &lt;! --Swing gauge--&gt;
<i> </i> &lt;canvas data-type="radial-gauge"
<i> </i> canvas id="swing"
<i> </i> data-width="200"
<i> </i> data-height="200"
<i> </i> data-units="Swing"
<i> </i> data-min-value="0"
<i> </i> data-start-angle="0"
<i> </i> data-ticks-angle="180"
<i> </i> data-value-box="false"
<i> </i> data-max-value="10"
<i> </i> data-major-ticks="0,1,2,3,4,5,6,7,8,9,10"
<i> </i> data-minor-ticks="2"
<i> </i> data-stroke-ticks="true"
<i> </i> data-highlights='[
<i> </i> {"from": 7, "to": 10, "color": "rgba(200, 50, 50, .75)"}
<i> </i> ]'
<i> </i> data-color-plate="#6c757d"
<i> </i> data-color-numbers="#eee"
<i> </i> data-color-units="#ffffff"
<i> </i> data-border-shadow-width="0"
<i> </i> data-borders="false"
<i> </i> data-needle-type="arrow"
<i> </i> data-needle-width="2"
<i> </i> data-needle-circle-size="7"
<i> </i> data-needle-circle-outer="true"
<i> </i> data-needle-circle-inner="false"
<i> </i> data-animation-duration="1500"
<i> </i> data-animation-rule="linear"
<i> </i> data-animation-target="plate"
<i> </i> &gt;&lt;/canvas&gt;
<i> </i> &lt;/div&gt;
<i> </i>&lt;/div&gt;
&lt;/div&gt;


&lt;script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;

&lt;script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js"&gt;&lt;/script&gt;

&lt;script src="https://canvas-gauges.com/assets/js/bundle.js"&gt;&lt;/script&gt;

&lt;script src="js/scripts.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;



I added to the JavaScript:

<i>
</i> window.addEventListener('load', () =&gt; {

<i> </i>const getRandomValue = ({maxValue, minValue}) =&gt; (
<i> </i> Math.random() * (maxValue - minValue) + minValue
<i> </i>)

<i> </i>const initGauge = gauge =&gt; {
<i> </i> setInterval(
<i> </i> () =&gt; {
<i> </i> gauge.value = getRandomValue(gauge.options)
<i> </i> },
<i> </i> gauge.animation.duration + 1000
<i> </i> )
<i> </i>}

<i> </i>initGauge(window.document.gauges[0])
})


This got the gauges to work within the CodePly platform (They already worked on a standalone webpage).

I had to add the following to prevent ESversion 6 errors

/*jshint esversion: 6 */ //This prevents error warnings regarding ES Version 6


I dunno!

Just going to try the code you suggested now...
Copy linkTweet thisAlerts:
@rpg2009Jan 21.2021 — 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)

``<i>
</i>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])
})<i>
</i>
``

Off to work.....
Copy linkTweet thisAlerts:
@rpg2009Jan 21.2021 — Just a quick look. I've stripped out some of the functionality just for the time being — buttons and what not — just to get back to basics. Note. Importing Bootstrap 5 CDN

Only tested in vscode with live server at the moment. Will come back to it later.

``<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset='utf-8' /&gt;
&lt;meta name='viewport' content='width=device-width, initial-scale=1.0' /&gt;
&lt;meta name='generator' content='Codeply' /&gt;
&lt;title&gt;Bootstrap 5 RGB controller v7&lt;/title&gt;
&lt;base target='_self' /&gt;

&lt;link
rel='stylesheet'
href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css'
/&gt;
&lt;script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class='container-fluid'&gt;
&lt;div class='jumbotron text-center container p-3 my-3 bg-dark text-white'&gt;
&lt;!-- Create the grey box --&gt;
&lt;img
src='img/logo.png'
alt='Logo image'
width='300'
height='100'
class='mx-auto d-block'
/&gt;
&lt;h1&gt;RGB CONTROLLER&lt;/h1&gt;
&lt;p&gt;Communications over WiFi between webpage and ESP8266&lt;/p&gt;
&lt;p&gt;Received data: &lt;span id='d1'&gt;---&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div
class='jumbotron text-center container p-3 my-3 bg-secondary text-white'
&gt;
&lt;div class='row justify-content-center'&gt;
&lt;div class='col-auto'&gt;
&lt;table class='table table-responsive'&gt;
&lt;tr&gt;
&lt;td style='width: 14.4px; text-align: right'&gt;R:&lt;/td&gt;
&lt;td&gt;
&lt;input
class='enabled'
id='r'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style='width: 14.4px; text-align: right'&gt;G:&lt;/td&gt;
&lt;td&gt;
&lt;input
class='enabled'
id='g'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style='width: 14.4px; text-align: right'&gt;B:&lt;/td&gt;
&lt;td&gt;
&lt;input
class='enabled'
id='b'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p style='margin: 8px 0px'&gt;
&lt;button
id='rainbow'
class='button'
style='background-color: #999'
onclick='rainbowEffect();'
&gt;
Rainbow mode
&lt;/button&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div
class='jumbotron text-center container p-3 my-3 bg-secondary text-white'
&gt;
&lt;div class='row justify-content-center'&gt;
&lt;div class='col-auto'&gt;
&lt;p&gt;RGB values relayed back from the processor in gauge format&lt;/p&gt;

&lt;!-- RED gauge --&gt;
&lt;canvas
data-type='radial-gauge'
id='redGauge'
data-width='150'
data-height='150'
data-animation='true'
data-animatedValue='true'
data-animateOnInit='true'
data-animation-duration='800'
data-animation-rule='linear'
data-value-box='true'
data-font-value='Led'
data-units='RED'
data-title='LED'
data-min-value='0'
data-max-value='1200'
data-major-ticks='0,100,200,300,400,500,600,700,800,900,1000,1100,1200'
data-minor-ticks='10'
data-stroke-ticks='false'
data-highlights='[
{ 'from': 0, 'to': 200, 'color': 'rgba(0,255,0,.15)' },
{ 'from': 200, 'to': 400, 'color': 'rgba(255,255,0,.15)' },
{ 'from': 400, 'to': 600, 'color': 'rgba(255,30,0,.25)' },
{ 'from': 600, 'to': 800, 'color': 'rgba(255,0,225,.25)' },
{ 'from': 800, 'to': 1200, 'color': 'rgba(0,0,255,.25)' }
]'
data-color-plate='#fc0022'
data-color-major-ticks='#ffffff'
data-color-minor-ticks='#ddd'
data-color-title='#fff'
data-color-units='#ffffff'
data-color-numbers='#ffffff'
data-color-needle-start='rgba(240, 128, 128, 1)'
data-color-needle-end='rgba(255, 160, 122, .9)'
data-needleShadow='true'
data-needleType='arrow'
data-needle-width='6'
data-needle-circle-size='10'
data-needle-circle-outer='true'
data-needle-circle-inner='true'
&gt;&lt;/canvas&gt;

&lt;!-- GREEN gauge --&gt;
&lt;canvas
id='greenGauge'
data-type='radial-gauge'
data-width='150'
data-height='150'
data-animatedValue='true'
data-animateOnInit='true'
data-units='GREEN'
data-title='false'
data-min-value='0'
data-max-value='1200'
data-major-ticks='0,100,200,300,400,500,600,700,800,900,1000,,1100,1200'
data-minor-ticks='10'
data-stroke-ticks='false'
data-highlights='[
{ 'from': 0, 'to': 200, 'color': 'rgba(0,255,0,.15)' },
{ 'from': 200, 'to': 400, 'color': 'rgba(255,255,0,.15)' },
{ 'from': 400, 'to': 600, 'color': 'rgba(255,30,0,.25)' },
{ 'from': 600, 'to': 800, 'color': 'rgba(255,0,225,.25)' },
{ 'from': 800, 'to': 1200, 'color': 'rgba(0,0,255,.25)' }
]'
data-color-plate='#54bd0f'
data-color-major-ticks='#ffffff'
data-color-minor-ticks='#ddd'
data-color-title='#fff'
data-color-units='#000000'
data-color-numbers='#000000'
data-color-needle-start='rgba(240, 128, 128, 1)'
data-color-needle-end='rgba(255, 160, 122, .9)'
data-needleShadow='true'
data-value-box='true'
data-animation-rule='linear'
data-needleType='arrow'
data-needle-width='6'
data-animation='true'
data-animation-duration='1000'
data-font-value='Led'
data-animated-value='true'
&gt;
&lt;/canvas&gt;

&lt;!-- BLUE gauge --&gt;
&lt;canvas
id='blueGauge'
data-type='radial-gauge'
data-width='150'
data-height='150'
data-animation='true'
data-animatedValue='true'
data-animateOnInit='true'
data-animation-duration='1000'
data-animation-rule='linear'
data-value-box='true'
data-font-value='Led'
data-units='BLUE'
data-title='false'
data-min-value='0'
data-max-value='1200'
data-major-ticks='0,100,200,300,400,500,600,700,800,900,1000,1100,1200'
data-minor-ticks='10'
data-stroke-ticks='false'
data-highlights='[
{ 'from': 0, 'to': 200, 'color': 'rgba(0,255,0,.15)' },
{ 'from': 200, 'to': 400, 'color': 'rgba(255,255,0,.15)' },
{ 'from': 400, 'to': 600, 'color': 'rgba(255,30,0,.25)' },
{ 'from': 600, 'to': 800, 'color': 'rgba(255,0,225,.25)' },
{ 'from': 800, 'to': 1200, 'color': 'rgba(0,0,255,.25)' }
]'
data-color-plate='#1638d2'
data-color-major-ticks='#ffffff'
data-color-minor-ticks='#ddd'
data-color-title='#fff'
data-color-units='#ffffff'
data-color-numbers='#ffffff'
data-color-needle-start='rgba(240, 128, 128, 1)'
data-color-needle-end='rgba(255, 160, 122, .9)'
data-needleShadow='true'
data-needleType='arrow'
data-needle-width='6'
&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div class='jumbotron text-center container p-3 my-3 bg-warning text-black'&gt;
&lt;div class='col-auto'&gt;
&lt;h4 class='text-center'&gt;Reset Leds&lt;/h4&gt;
&lt;button class='btn btn-danger' onclick='redButton();'&gt;
Clear RED
&lt;/button&gt;
&lt;button class='btn btn-success' onclick='greenButton();'&gt;
Clear GREEN
&lt;/button&gt;
&lt;button class='btn btn-primary' onclick='blueButton();'&gt;
Clear BLUE
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div class='jumbotron text-center container p-3 my-3 bg-secondary text-white'&gt;
&lt;div class='row justify-content-center'&gt;
&lt;div class='col-auto'&gt;
&lt;h4 class='text-center'&gt;Send text file to the processor&lt;/h4&gt;
&lt;form id='ToSend'&gt;
&lt;div class='form-group'&gt;
&lt;p class='mb-3'&gt;&lt;/p&gt;
&lt;input
type='file'
class='form-control-file'
id='myFile'
accept='.txt'
/&gt;
&lt;!-- Opens a file browse box --&gt;
&lt;p class='mb-3'&gt;&lt;/p&gt;
&lt;label&gt;Retrieved text from local file&lt;/label&gt;
&lt;textarea
class='form-control'
id='output'
readonly
cols='100'
rows='5'
&gt;&lt;/textarea&gt;
&lt;!-- Draws a box to display the text --&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;p class='mb-2'&gt;&lt;/p&gt;
&lt;button class='btn btn-danger' onclick='clearText();'&gt;
Clear text box
&lt;/button&gt;
&lt;p class='mb-3'&gt;&lt;/p&gt;
&lt;button class='btn btn-info' onclick='textData();'&gt;
Send the text data to the ESP8266
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div class='jumbotron text-center container p-3 my-3 bg-secondary text-white'&gt;
&lt;div class='row justify-content-center'&gt;
&lt;div class='col-auto'&gt;
&lt;h4 class='text-center'&gt;Check switches&lt;/h4&gt;
&lt;div class='form-col align-items-center'&gt;
&lt;div class='col-auto'&gt;
&lt;input
class='form-check-input'
type='checkbox'
id='gridCheck1'
onclick='tick1();'
/&gt;
&lt;label class='form-check-label' for='gridCheck1'&gt;
Switch 1
&lt;/label&gt;
&lt;/div&gt;
&lt;div class='col-auto'&gt;
&lt;input
class='form-check-input'
type='checkbox'
id='gridCheck2'
onclick='tick2();'
/&gt;
&lt;label class='form-check-label' for='gridCheck2'&gt;
Switch 2
&lt;/label&gt;
&lt;/div&gt;
&lt;div class='col-auto'&gt;
&lt;input
class='form-check-input'
type='checkbox'
id='gridCheck3'
onclick='tick3();'
/&gt;
&lt;label class='form-check-label' for='gridCheck3'&gt;
Switch 3
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div class='jumbotron text-center container p-3 my-3 bg-white text-black'&gt;
&lt;div class='col-auto'&gt;
&lt;button class='btn btn-info' onclick='getMacro();'&gt;
Retrieve current Macro file (.txt data)
&lt;/button&gt;
&lt;p class='text-center'&gt;This is the current Macro file data:&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class='container-fluid'&gt;
&lt;div
class='jumbotron text-center container p-3 my-3 bg-secondary text-white'
&gt;
&lt;div class='col-auto'&gt;
&lt;!-- VOLTAGE gauge --&gt;
&lt;canvas
id='volts'
data-type='linear-gauge'
data-width='100'
data-height='300'
data-color-plate='#e0e0eb'
data-border-radius='10'
data-borders='0'
data-bar-begin-circle='25'
data-minor-ticks='10'
data-value='0'
data-min-value='0'
data-max-value='12'
data-title='Processor Volts'
data-major-ticks='1,2,3,4,5,6,7,8,9,10,11,12'
data-ticks-width='18'
data-ticks-width-minor='5'
data-bar-width='5'
data-highlights='false'
data-color-value-box-shadow='false'
data-value-box-stroke='0'
data-color-value-box-background='false'
data-value-int='2'
data-value-dec='1'
&gt;&lt;/canvas&gt;

&lt;!-- Pot gauge --&gt;
&lt;canvas
data-type='radial-gauge'
canvas
id='pot'
data-width='200'
data-height='200'
data-units='ADC'
data-min-value='0'
data-max-value='1000'
data-major-ticks='0,100,200,300,400,500,600,700,800,900,1000'
data-minor-ticks='5'
data-stroke-ticks='true'
data-highlights='[
{'from': 800, 'to': 1023, 'color': 'rgba(200, 50, 50, .75)'}
]'
data-color-plate='#fff'
data-border-shadow-width='0'
data-borders='false'
data-needle-type='arrow'
data-needle-width='2'
data-needle-circle-size='7'
data-needle-circle-outer='true'
data-needle-circle-inner='false'
data-animation-duration='1500'
data-animation-rule='linear'
&gt;&lt;/canvas&gt;

&lt;!-- Swing gauge --&gt;
&lt;canvas
data-type='radial-gauge'
canvas
id='swing'
data-width='200'
data-height='200'
data-units='Swing'
data-min-value='0'
data-start-angle='0'
data-ticks-angle='180'
data-value-box='false'
data-max-value='10'
data-major-ticks='0,1,2,3,4,5,6,7,8,9,10'
data-minor-ticks='2'
data-stroke-ticks='true'
data-highlights='[
{'from': 7, 'to': 10, 'color': 'rgba(200, 50, 50, .75)'}
]'
data-color-plate='#6c757d'
data-color-numbers='#eee'
data-color-units='#ffffff'
data-border-shadow-width='0'
data-borders='false'
data-needle-type='arrow'
data-needle-width='2'
data-needle-circle-size='7'
data-needle-circle-outer='true'
data-needle-circle-inner='false'
data-animation-duration='1500'
data-animation-rule='linear'
data-animation-target='plate'
&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js'&gt;&lt;/script&gt;
&lt;script src='src/js/gauges.js'&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;<i>
</i>
`</CODE>
JS saved in src/js folder. We obviously need to loop through all gauges, so amended accordingly.

<CODE>
`<i>
</i>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
)
}

window.document.gauges.forEach(initGauge)
})<i>
</i>
``

As I say will come back to this.

Edit:

Quick test with the above on codepen. Appears to be working on my android phone

[codepen test](https://codepen.io/rpg2019/project/live/XmqVPq)
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 21.2021 — RPG 2009. 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.
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 23.2021 — 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!
Copy linkTweet thisAlerts:
@rpg2009Jan 23.2021 — > @Stevolution2021#1627105 After I looked through the HTML code, and altered some links, its all up and running.

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

> @Stevolution2021#1627105 CodePly is OK, but actually makes learning HTML etc harder.

> I have got on better just using NotePad!


I used to use notepad++, then sublime text and now [VSCode](https://code.visualstudio.com/).

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

It comes with [emmet](https://emmet.io/) 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.
Copy linkTweet thisAlerts:
@JennieMillerJan 25.2021 — i also find the solution.
Copy linkTweet thisAlerts:
@Stevolution2021authorJan 30.2021 — 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.
Copy linkTweet thisAlerts:
@rpg2009Jan 30.2021 — Hi Steveolution2021,

Codeply sounds like a bit of a nightmare.

I know the frustration, but if you do feel like another go....

### VSCode



Just for starters here is a very basic installation/setup guide for vscode

https://www.youtube.com/watch?v=4NfFFsQC77M

It's a good idea to add a few extra extensions like **bracket colorizer** or **standardJS**, but see how you get on for starters.

### Codepen



As I have mentioned I use [codepen.io](https://codepen.io/) for convenient tests

Here is a link explaining how to use external links — it is a doddle.

https://blog.codepen.io/documentation/adding-external-resources/

Note you won't work directly with the head section though. The HTML is limited to a body section and the head is built for you behind the scenes. No problem with using external links though.

You can even save a simple javascript program in codepen, copy the generated link and import that into another codepen project as a module.

Codepen does also come with one free project allocated to you. In the project section you can build a project just like you would in a standard code editor.

You can setup your full html with head and imports. For example see the gauges example I built previously, the file structure and links in the head section

[https://codepen.io/rpg2019/project/editor/XmqVPq](https://codepen.io/rpg2019/project/editor/XmqVPq)
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 07.2021 — Hello. I have a question regarding my text routine.

This opens a locally stored text file and displays it in a text box on the HTML page. That all works fine.

But, I actually have no idea how it works (lifted from elsewhere).

I would like to now send this retrieved text data over websockets to my ESP8266 project.

I would assume I would use the websockets command: connection.send( ## mydata ##);

What part of this code below actually stores the text data to send?

Any clues on how to send this data gratefully received!!

<i>
</i>
//------------------------------- Open a local text file ----------------------------------------------------------------------


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 &amp;&amp; this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
<br/>
<i> </i>reader.addEventListener('load', function (e) {
<i> </i> output.textContent = e.target.result; //e.target.result should be the contents of the file ?
<i> </i>});
<i> </i>
<i> </i>reader.readAsBinaryString(myFile); // Read the contents of 'myFile'
<i> </i> } else {
<i> </i>output.innerText = "File not supported!"
}
});
Copy linkTweet thisAlerts:
@rpg2009Feb 07.2021 — A bit busy, but quickly I think this is the block to look at
``<i>
</i>reader.addEventListener('load', function (e) {
output.textContent = e.target.result; //e.target.result should be the contents of the file ?
});<i>
</i>
`</CODE>
Let's make a few changes
<CODE>
`<i>
</i>// The eventListener will pass an event object to the callback function. Previously abbreviated to 'e'
reader.addEventListener('load', function (event) {
// open your console (f12 in chrome)
console.dir(event) // have a look at this logged output
output.textContent = event.target.result; // the contents of the file
});<i>
</i>
``

Have a dig through the logged output. For instance find a property called target and click on it to see it's properties

I'm guessing if we read through [MDN - FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) that the target will have three properties error, readyState and result. readyState will have a value of 2 and result will be the text content.
Copy linkTweet thisAlerts:
@VITSUSAFeb 08.2021 — @Stevolution2021#1626880 As a newbie How much experience you have in coding?
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 12.2021 — Many thanks. I'll look at that. Sorry for the delay in replying, I am working away on a site Monday to Friday at the moment.

Experience? Lots with Arduino, but HTML, JavaScript etc is pretty shaky and still trying to grasp it
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 13.2021 — https://ibb.co/qnJR74D

Seems to be stuff in the debugger that I am totally unaware of... such as...

_“https://m.servedby-buysellads.com/monetization.js”.

Request to post https://www.paypal.com/xoplatform/logger/api/logger failed: [object ProgressEvent]._


What are they? Something to worry about?
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 14.2021 — Well had a tinker around. Could not find the data I required.

That code I posted above lets you find a local file and display it in the 'Output' box on the web page.

If sending this text onto a destinations using: connection.send("#####"); is to be achieved, I assume I would need to re-read that text file data and send it on in a loop or something.

I don't seem to be able to find that text as a useable data file.

I thought maybe I could use the data myFile (the file I opened), or output (the file being sent back to the text box), but apparently not.

Thanks for your help anyway
Copy linkTweet thisAlerts:
@viakgroupFeb 16.2021 — HTML is very easy to learn. Although it is code, it may seem intimidating to you at first glance, but you don't need to have any programming experience. HTML is hardly as difficult to learn as you think.
Copy linkTweet thisAlerts:
@rpg2009Feb 16.2021 — > @viakgroup#1628035 HTML is very easy to learn. Although it is code, it may seem intimidating to you at first glance, but you don't need to have any programming experience. HTML is hardly as difficult to learn as you think.

Like javascript, jquery etc. easy to learn badly I would say.

Laying out your HTML properly, having a decent grasp of the DOM and the ''bells and whistles' available to you makes adding javascript functionality a lot more effective.

I recently saw an example on another forum, where a guy had written 2000+ lines of jquery to validate a form. Had he have made use of the HTML built-in types (number, email, password, patterns etc. ) and checkValidity that could have been reduced down to what 10-20 lines of javascript code — maybe less.

So no, I wouldn't say difficult, but there is plenty of room for learning.

I know we have the likes of w3schools, but I would be interested to know of current recommended books — maybe that should be a question for another forum though.

I don't know how good this is, but it maybe a start

[https://www.w3schools.com/html/default.asp](https://www.w3schools.com/html/default.asp)
Copy linkTweet thisAlerts:
@NogDogFeb 16.2021 — FWIW, my first stop whenever I have HTML, CSS, or JavaScript questions is the Mozilla Developer Network (MDN) web docs at https://developer.mozilla.org/en-US/docs/Web . Their content seems to me both well-written and authoritative, so I tend to trust it more than most other sites. YMMV :)
Copy linkTweet thisAlerts:
@rpg2009Feb 17.2021 — > @NogDog#1628096 FWIW, my first stop whenever I have HTML, CSS, or JavaScript questions is the Mozilla Developer Network (MDN) web docs at [https://developer.mozilla.org/en-US/docs/Web](https://developer.mozilla.org/en-US/docs/Web) . Their content seems to me both well-written and authoritative, so I tend to trust it more than most other sites. YMMV 🙂

Must be having a dense moment. Yes absolutely, MDN should be the first port of call. : )
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 28.2021 — Hi

I never did get this working. Just came back to it after working away:

<i>
</i>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 &amp;&amp; this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
<br/>
<i> </i>reader.addEventListener('load', function (e) {
<i> </i> output.textContent = e.target.result; //Put the 'result' text data into the text content of output
<i> </i>});
<i> </i>
<i> </i>reader.readAsBinaryString(myFile); // Read the file contents
<i> </i>connection.send(output);
<i> </i> } else {
<i> </i>output.innerText = "File not supported!" // Output is the text that is sent back to the HTML text box.
}
});


The line near the bottom: connection.send(output); is to send the text data to my esp8266 Processor.

If I send: connection.send("hello"); then that is what will arrive on my processor debug screen.

But I obviously need to convert the text contents of 'output' to something else so that it will send as text correctly.

Tried every combination I can think of. Hmm
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — Try this code, I commented it to clarify what happens:
``<i>
</i> 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 &amp;&amp; this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();


reader.addEventListener('load', function (e) {
// Here the result of the reader is ready and we can send it out.
connection.send(e.target.result);
// As readAsBinaryString provides binary data it should not be entered to the output container
// output.textContent = e.target.result; //Put the 'result' text data into the text content of output
});

reader.readAsBinaryString(myFile); // Read the file contents
// As the reader works asynchronously the result is not yet
// ready at this place or time. We have to wait for the load event
// connection.send(output);
} else {
output.innerText = "File not supported!" // Output is the text that is sent back to the HTML text box.
}
});<i>
</i>
``

As you are using readAsBinaryString I assumed that your file is binary. If it's text, you should use readAsText and you can enter the text to the output container.
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 28.2021 — Well I thought it should be readAsText, but this is the code (lifted from elsewhere on the web).

It works and loads the opened file back to the HTML page, so I assumed readAsBinary was correct.

Maybe I need to open it as Text as well
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 28.2021 — Hmm. None of that works. Changed it to readAsText and it just crashes the receiving ESP8266
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — In the end text is binary, so maybe it will work with readAsBinary either. But I'm not shure about this.

If your file contains text, as a first step I would recommend to enter it into your output container in parallel and check if it's OK there.

If the ESP crashes I would suspect that there is an issue in the processing there. Please post the related code. My knowledge regaring ESP is limited, but if I cannot help out, maybe someone else can.
Copy linkTweet thisAlerts:
@Stevolution2021authorFeb 28.2021 — Well, I am on a steep learning curve here too.

Pretty sure the receiving code on the ESP8266 is correct. It's a piece of demo code and it reliably decodes everything I send it.

As i mentioned, if I send: connection.send("hello"); Then the text 'hello' is decoded correctly.

I can send very long pieces of text to the ESP8266 in the format above and it receives it all correctly.

So I must not be decoding/selecting/retrieving or correctly parsing the text obtained from the text box in the JavaScript before I send it.

That is my logic anyway.

The opened file loads back into the output container on the HTML page fine. This is with both readAsBinary and readAsText.
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — >The opened file loads back into the output container on the HTML page fine. This is with both readAsBinary and readAsText.

Yes, I tested this myself right now and readAsBinary is working fine.
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — Maybe the issue is subject of character encoding. When I'm reading a text file encoded as "UTF-8 with BOM" there are some garbadge characters at the beginning. Maybe these are causing trouble on the ESP?
Copy linkTweet thisAlerts:
@Stevolution2021authorMar 05.2021 — OK, I am progressing here and learning as I go.

This evenings issue...

I have username and password page. They are input

<i>
</i>var attempt = 3; // Variable to count number of attempts.

function submit(){ // Below function Executes on click of login button.
var inputname = document.getElementById("username").value;
var inputpassword = document.getElementById("password").value;
<br/>
<i> </i>if (inputname == "Steve" &amp;&amp; inputpassword == "1234"){
<i> </i> document.getElementById("lockimage").src = "access.png"; // Change the graphic to an unlocked padlock
<i> </i> alert ("Logged in successfully");
<i> </i>
<i> </i> window.location.href = "/Communications.html"; // Redirecting to communications page.
<i> </i> return false;
<i> </i>}
<i> </i>else{
<i> </i> attempt --; // Decrementing by one.
<i> </i> alert("You have "+attempt+" login attempts remaining;"); // Disabling fields after 3 attempts.

<i> </i> if( attempt === 0){
<i> </i> document.getElementById("username").disabled = true;
<i> </i> document.getElementById("password").disabled = true;
<i> </i> document.getElementById("submit").disabled = true;
<i> </i> return false;
<i> </i>}
<i> </i>}
}


OK fine. This works.

But, I would like the change the line:

if (inputname == "Steve" && inputpassword == "1234"){

so that instead, it compares to a received text it receives using websockets.

That text arrives as follows:

<i>
</i>function processReceivedCommand(evt) { // Incoming Websockets data

if ((evt.data[0] =='A') &amp; (evt.data[1] =='1')) { // The password page has loaded, and has asked for the ESP8266 username
<br/>
<i> </i> var esp8266user = (evt.data.slice(2)); // The username minus the A1
<i> </i> }
<i> </i>
<i> </i> else if ((evt.data[0] =='A') &amp; (evt.data[1] =='2')) { // The password page has loaded, and has asked for the ESP8266 password
<i> </i>
<i> </i> var esp8266password = (evt.data.slice(2)); // The username minus the A2
<i> </i> }
<i> </i>
<i> </i> else {
<i> </i> document.getElementById('received').textContent = '' // Clear the text box first
<i> </i> document.getElementById('received').innerHTML = evt.data; // If its not a command, then send the text to the HTML box received
<i> </i> }
<i> </i> <br/>
<i> </i>
}


The text is stored in esp8266user and esp8266password.

Buy I cannot work out the command to compare these two sets of data?

e.g inputname == esp8266user and inputpassword == esp8266password
Copy linkTweet thisAlerts:
@rpg2009Mar 07.2021 — > @Stevolution2021#1628934 OK fine. This works.

I don't think this is the right approach.

These sort of checks should be done securely **_server side_** — surely?

It may be worth taking your question over to the [server-side](https://www.webdeveloper.com/t/server-side) section.

When It comes to forms JS can be used for validation to make sure you eliminate any nonsense and assist the user in a correctly inputting their data. It is then _properly_ processed in the backend.

In fact checking can be done entirely without JS in your HTML.

This is quickly nabbed and amended from w3schools. I've added a hint with a set password pattern requirement.
``html<i>
</i>&lt;!-- validate.php being the backend script to do proper checks --&gt;
&lt;form action='validate.php' method='post' autocomplete='off'&gt;
&lt;div class='container'&gt;
&lt;label for='username'&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
&lt;input type='text' placeholder='Enter Username' id='username' name='username' required&gt;

&lt;label for='password'&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
&lt;input type='password' placeholder='Enter Password' id='password' name='password' pattern='^(?=.*[A-Z])(?=.*d)[A-Za-zd]{8,}$' required&gt;
&lt;span class='hint'&gt;Must be atleast 8 characters long and contain a minimum of one captial letter and one number&lt;/span&gt;
&lt;button type='submit'&gt;Login&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;<i>
</i>
``

[codepen here](https://codepen.io/rpg2019/pen/yLVxxaE)
×

Success!

Help @Stevolution2021 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...