Я нашел отличный проект по адресу (https://www.martyncurrey.com/), код которого я хочу перепрофилировать для своего проекта на основе ESP01. Скриншот вывода кода приложен ниже.
Я удалил элементы topContainer и topContainer2, один за другим. Однако в обоих случаях код перестает работать.
Я хочу удалить часы и значок яркости (обведен красным) для своего проекта. Однако, несмотря на мои многодневные роды, я не увенчался успехом. Когда я удаляю различные участки кода для удаления значка яркости и часов, остальная часть страницы перестает работать. Код следующий:
Код: Выделить всё
IOT Webpage Test
body {background-color: #ffffff; font-size: 100% }
#wrapper { width: 500px; margin: 20px auto; padding: 5px 5px 5px 5px; text-align:center; border: 2px solid blue; border-radius: 15px; }
h2 { text-align: center;}
h3 { margin: 0px 0px 5px 0px; }
#topContainer { display: flex; align-items: center; justify-content: center; Margin: 0px auto 2em auto;}
#topContainer2 { text-align: center; margin-right: 2em; }
#brightnessIcon { }
#time { display: inline; font-family: 'Courier New', Courier, monospace; font-size: 250%; }
#dialContainer { display:inline-block; margin: 0px auto 0px auto; }
#dial_1 { display:inline-block; }
#dial_2 { display:inline-block; margin: 0px 0px 0px 30px; }
canvas { background-color: #ffffff; }
.bigText { font-size: 150%;}
.noMargin { margin: 0px 0px 0px 0px; }
#graphContainer { display:inline-block; text-align:left; margin: 20px 0px 20px 0px; }
#key { width: 200px;}
.box { float: left; height:15px; width:10px; margin: 0px 10px 0px 0px; clear: both; }
.red { background-color: red; }
.blue { background-color: blue; }
Temperature & Humidity
Brightness
00:00:00
Temperature
00 °C
Humidity
00 %
Temperature
Humidity
// 50) { t=-30; }
h++; if (h > 100) { h=0; }
b++ ; if (b>12) { b=0; }
drawSVG(b);
drawDial('canvasTemp', '#ffaaaa', 160, 20, -30, 50, t);
drawDial('canvasHumid', '#aaaaff', 160, 20, 0, 100, h);
document.getElementById('temp').innerHTML = t;
document.getElementById('humd').innerHTML = h;
graphMin = -30;
graphMax = 100;
drawGraph('graph', graphMin, graphMax, false, t, h);
}
// =========================================== DIAL =========================================
function drawDial(canvasID, dialColour, startAngle, stopAngle, minVal, maxVal, dialValue)
{
oneDegreeInRadians = Math.PI/180;
if (stopAngle < startAngle) { stopAngle = stopAngle + 360;}
let arcStartAngleInRadians = oneDegreeInRadians * (startAngle-5) ;
let arcStopAngleInRadians = oneDegreeInRadians * (stopAngle+5) ;
var c = document.getElementById(canvasID);
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
let H = c.height;
let W = c.width;
let arcLineWidth = W/5;
ctx.translate(W/2, W/2); // move coordinates 0,0 to the centre of the canvas
// draw arc
ctx.beginPath();
let radius = W/2 - (arcLineWidth/2) - (W/100);
ctx.lineWidth = arcLineWidth;
ctx.lineCap = 'butt';
ctx.strokeStyle = dialColour;
ctx.arc(0, 0, radius, arcStartAngleInRadians, arcStopAngleInRadians, false);
ctx.stroke();
// draw centre circle
ctx.beginPath();
let centerCircleRadius = W/100*3.5
ctx.strokeStyle = '#000000';
ctx.fillStyle = '#222222';
ctx.lineWidth = 2;
ctx.arc(0, 0, centerCircleRadius, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.fill();
// draw ticks
ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = '#333333';
ctx.font = '12px Arial';
ctx.fillStyle = '#333333';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
let tickStartPoint = radius - (arcLineWidth/2) ; // bottom of the arc
let tickLength = 5/8 * arcLineWidth - 5;
let labelPos = radius + (arcLineWidth/2) - 2;
for (let angle=minVal; angle 10) { numySteps = numySteps /10; }
var numxSteps = 20;
var xStep = graphWidth / numxSteps;
var yStep = graphHeight / numySteps;
ctx.lineWidth = 1;
ctx.strokeStyle = '#e5e5e5';
ctx.lineCap = 'butt';
for (let x = 0; x < c.width; x=x+xStep)
{
ctx.moveTo(x, 0); ctx.lineTo(x, c.height); ctx.stroke();
}
for (let y = 0; y
TIA
azhaque
Подробнее здесь: https://stackoverflow.com/questions/792 ... om-webpage
Мобильная версия