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?
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!
>@Stevolution2021#1626880 Had a nightmare with the formatting in here... made a right mess of the code?
``<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>> </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 = () => {
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>
``
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();
<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!"
}
});
>@Stevolution2021#1626902 If I would like to send the contents of this text file using websockets, what do I send?
>@Stevolution2021#1626902 Ah... learning at 53 yrs old, just isn’t as easy as it used to be
``<i>
</i><!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><i>
</i>
``
<i>
</i><!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content="Codeply" />
<title>Bootstrap 5 RGB controller v7</title>
<base target="_self">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body >
<br/>
<div class="container-fluid">
<div class="jumbotron text-center container p-3 my-3 bg-dark text-white"> <!-- Create the grey box -->
<img src="img/logo.png" alt="Logo image" width="300" height="100" class="mx-auto d-block">
<h1>RGB CONTROLLER</h1>
<p>Communications over WiFi between webpage and ESP8266</p>
<p>Received data: <span id='d1'>---</span> </p>
</div> <br/>
</div>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"> <br/>
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
<tr>
<td style="width:14.4px; text-align: right">R: </td>
<td><input class="enabled" id="r" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td>
</tr>
<tr>
<td style="width:14.4px; text-align: right">G: </td>
<td><input class="enabled" id="g" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td>
</tr>
<tr>
<td style="width:14.4px; text-align: right">B: </td>
<td><input class="enabled" id="b" type="range" min="0" max="1023" step="1" oninput="sendRGB();" value="0"></td>
</tr>
</table>
<p style="margin:8px 0px">
<button id="rainbow" class="button" style="background-color:#999" onclick="rainbowEffect();">Rainbow mode</button>
</div> <br/>
</div> <br/>
</div> <br/>
</div>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"> <br/>
<div class="row justify-content-center">
<div class="col-auto">
<p>RGB values relayed back from the processor in gauge format</p>
<br/>
<i> </i> <! --RED gauge--------------------------------------------------------->
<i> </i> <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> ></canvas>
<i> </i>
<i> </i> <! --GREEN gauge--------------------------------------------------------->
<i> </i> <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">
<i> </i> </canvas>
<i> </i>
<i> </i> <! --BLUE gauge--------------------------------------------------------->
<i> </i> <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> ></canvas>
<i> </i> </div>
<i> </i> </div>
<i> </i></div>
</div>
<br/>
<i> </i>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-warning text-black"> <br/>
<div class="col-auto"> <br/>
<h4 class="text-center">Reset Leds</h4>
<button class="btn btn-danger" onclick="redButton();">Clear RED</button>
<button class="btn btn-success" onclick="greenButton();">Clear GREEN</button>
<button class="btn btn-primary" onclick="blueButton();">Clear BLUE</button>
</div> <br/>
</div> <br/>
</div>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"> <br/>
<div class="row justify-content-center">
<div class="col-auto"> <br/>
<h4 class="text-center">Send text file to the processor</h4>
<form id="ToSend">
<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> <br/>
</div> <br/>
</div>
<br/>
<i> </i>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"> <br/>
<div class="row justify-content-center">
<div class="col-auto"> <br/>
<h4 class="text-center">Check switches</h4>
<div class="form-col align-items-center">
<div class="col-auto">
<input class="form-check-input" type="checkbox" id="gridCheck1" onclick="tick1();">
<label class="form-check-label" for="gridCheck1"> Switch 1 </label>
</div>
<div class="col-auto">
<input class="form-check-input" type="checkbox" id="gridCheck2" onclick="tick2();">
<label class="form-check-label" for="gridCheck2"> Switch 2 </label>
</div>
<div class="col-auto">
<input class="form-check-input" type="checkbox" id="gridCheck3" onclick="tick3();">
<label class="form-check-label" for="gridCheck3"> Switch 3 </label>
</div>
</div>
</div>
</div> <br/>
</div> <br/>
</div>
<br/>
<i> </i>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-white text-black"> <br/>
<div class="col-auto"> <br/>
<button class="btn btn-info" onclick="getMacro();" >Retrieve current Macro file (.txt data)</button>
<p class="text-center">This is the current Macro file data:</p>
</div> <br/>
</div> <br/>
</div>
<div class="container-fluid"> <br/>
<div class="jumbotron text-center container p-3 my-3 bg-secondary text-white"> <br/>
<div class="col-auto"> <br/>
<! --VOLTAGE gauge-->
<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"
></canvas>
<br/>
<i> </i> <! --Pot gauge-->
<i> </i> <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> ></canvas>
<i> </i>
<i> </i> <! --Swing gauge-->
<i> </i> <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> ></canvas>
<i> </i> </div>
<i> </i></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js"></script>
<script src="https://canvas-gauges.com/assets/js/bundle.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
<i>
</i> window.addEventListener('load', () => {
<i> </i>const getRandomValue = ({maxValue, minValue}) => (
<i> </i> Math.random() * (maxValue - minValue) + minValue
<i> </i>)
<i> </i>const initGauge = gauge => {
<i> </i> setInterval(
<i> </i> () => {
<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])
})
``<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>
``
``<i>
</i><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<meta name='generator' content='Codeply' />
<title>Bootstrap 5 RGB controller v7</title>
<base target='_self' />
<link
rel='stylesheet'
href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css'
/>
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<div class='jumbotron text-center container p-3 my-3 bg-dark text-white'>
<!-- Create the grey box -->
<img
src='img/logo.png'
alt='Logo image'
width='300'
height='100'
class='mx-auto d-block'
/>
<h1>RGB CONTROLLER</h1>
<p>Communications over WiFi between webpage and ESP8266</p>
<p>Received data: <span id='d1'>---</span></p>
</div>
</div>
<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'>
<table class='table table-responsive'>
<tr>
<td style='width: 14.4px; text-align: right'>R:</td>
<td>
<input
class='enabled'
id='r'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/>
</td>
</tr>
<tr>
<td style='width: 14.4px; text-align: right'>G:</td>
<td>
<input
class='enabled'
id='g'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/>
</td>
</tr>
<tr>
<td style='width: 14.4px; text-align: right'>B:</td>
<td>
<input
class='enabled'
id='b'
type='range'
min='0'
max='1023'
step='1'
oninput='sendRGB();'
value='0'
/>
</td>
</tr>
</table>
<p style='margin: 8px 0px'>
<button
id='rainbow'
class='button'
style='background-color: #999'
onclick='rainbowEffect();'
>
Rainbow mode
</button>
</p>
</div>
</div>
</div>
</div>
<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'>
<p>RGB values relayed back from the processor in gauge format</p>
<!-- RED gauge -->
<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'
></canvas>
<!-- GREEN gauge -->
<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'
>
</canvas>
<!-- BLUE gauge -->
<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'
></canvas>
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class='jumbotron text-center container p-3 my-3 bg-warning text-black'>
<div class='col-auto'>
<h4 class='text-center'>Reset Leds</h4>
<button class='btn btn-danger' onclick='redButton();'>
Clear RED
</button>
<button class='btn btn-success' onclick='greenButton();'>
Clear GREEN
</button>
<button class='btn btn-primary' onclick='blueButton();'>
Clear BLUE
</button>
</div>
</div>
</div>
<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 id='ToSend'>
<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>
<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'>Check switches</h4>
<div class='form-col align-items-center'>
<div class='col-auto'>
<input
class='form-check-input'
type='checkbox'
id='gridCheck1'
onclick='tick1();'
/>
<label class='form-check-label' for='gridCheck1'>
Switch 1
</label>
</div>
<div class='col-auto'>
<input
class='form-check-input'
type='checkbox'
id='gridCheck2'
onclick='tick2();'
/>
<label class='form-check-label' for='gridCheck2'>
Switch 2
</label>
</div>
<div class='col-auto'>
<input
class='form-check-input'
type='checkbox'
id='gridCheck3'
onclick='tick3();'
/>
<label class='form-check-label' for='gridCheck3'>
Switch 3
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='container-fluid'>
<div class='jumbotron text-center container p-3 my-3 bg-white text-black'>
<div class='col-auto'>
<button class='btn btn-info' onclick='getMacro();'>
Retrieve current Macro file (.txt data)
</button>
<p class='text-center'>This is the current Macro file data:</p>
</div>
</div>
</div>
<div class='container-fluid'>
<div
class='jumbotron text-center container p-3 my-3 bg-secondary text-white'
>
<div class='col-auto'>
<!-- VOLTAGE gauge -->
<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'
></canvas>
<!-- Pot gauge -->
<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'
></canvas>
<!-- Swing gauge -->
<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'
></canvas>
</div>
</div>
</div>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js'></script>
<script src='src/js/gauges.js'></script>
</body>
</html><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>
``
>@Stevolution2021#1627105 After I looked through the HTML code, and altered some links, its all up and running.
>@Stevolution2021#1627105 CodePly is OK, but actually makes learning HTML etc harder.
> I have got on better just using NotePad!
<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>
<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 && 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!"
}
});
``<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>
``
>@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.
>@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 🙂
<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 && 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.
}
});
``<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 && 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>
``
>The opened file loads back into the output container on the HTML page fine. This is with both readAsBinary and readAsText.
<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" && 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>}
}
<i>
</i>function processReceivedCommand(evt) { // Incoming Websockets data
if ((evt.data[0] =='A') & (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') & (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>
}
>@Stevolution2021#1628934 OK fine. This works.
``html<i>
</i><!-- validate.php being the backend script to do proper checks -->
<form action='validate.php' method='post' autocomplete='off'>
<div class='container'>
<label for='username'><b>Username</b></label>
<input type='text' placeholder='Enter Username' id='username' name='username' required>
<label for='password'><b>Password</b></label>
<input type='password' placeholder='Enter Password' id='password' name='password' pattern='^(?=.*[A-Z])(?=.*d)[A-Za-zd]{8,}$' required>
<span class='hint'>Must be atleast 8 characters long and contain a minimum of one captial letter and one number</span>
<button type='submit'>Login</button>
</div>
</form><i>
</i>
``
0.1.9 — BETA 4.29