Web-Interface-Example/index.html

<!-- Cole L - April 28th 2023 - https://github.com/cole8888/SRNE-Solar-Charge-Controller-Monitor -->
<!-- Originally based on https://github.com/fabaff/mqtt-panel -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="A web interface for MQTT over Websockets">

		<title>Solar Monitor</title>

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />		
		<link rel="stylesheet" href="./custom.css">

		<script src=" https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"></script>
		<script type="text/javascript" src="./index.js"></script>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
			<div class="container-fluid">
				<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Solar Monitor</a>
				<div class="d-flex justify-content-between ">
					<div class="form-check form-switch me-3 mb-0">
						<label class="form-check-label ms-3" for="lightSwitch">
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="24"
								height="24"
								fill=white
								class="bi bi-brightness-high"
								viewBox="0 0 16 16"
							>
								<path id="sunMoon" d="" />
							</svg>
						</label>
						<input
						class="form-check-input"
						type="checkbox"
						id="lightSwitch"
						style="margin-top: 6px"
						/>
					</div>
				</div>
			</div>
		</nav>
		<div class="container">
			<!-- Overview Section -->
			<div class="row" style="padding-top: 0.5rem;">
				<!-- Overview section -->
				<div class="col-12 col-lg-4 col-md-6" style="padding-top: 0.5rem; padding-right: 0.5rem; padding-left: 0.5rem;">
					<div class="card mb-2 custom-card-dark">
						<div class="card-title" style="padding-top: 1rem; margin-bottom: 0.5rem; text-align: center;">
							<h4><b>Overview</b></h4>
						</div>
						<div class="card-body" style="padding-top: 0rem; padding-bottom: 0.75rem;">
							<div class="card-title">
								<h6>Battery Volts:
									<span id="CC1battVoltsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Battery SOC:
									<span id="CC1SOCLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Charge Watts:
									<span id="CC1panelWattsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>							
							<div class="card-title">
								<h6>Battery Amps:
									<span id="CC1battAmpsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Charge Mode:
									<span id="CC1chargeModeLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Power:
									<span id="CC1dailyPowerLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Battery Min Volts:
									<span id="CC1battMinVoltsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Battery Max Volts:
									<span id="CC1battMaxVoltsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Controller Temperature:
									<span id="CC1controllerTempLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Battery Temperature:
									<span id="CC1battTempLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
							</div>
						</div>
					</div>
				</div>

				<!-- Other Section -->
				<div class="col-12 col-lg-4 col-md-6" style="padding-top: 0.5rem; padding-right: 0.5rem; padding-left: 0.5rem;">
					<div class="card mb-2 custom-card-dark">
						<div class="card-title", style="padding-top: 1rem; margin-bottom: 0.5rem; text-align: center;">
							<h4><b>Other</b></h4>
						</div>
						<div class="card-body", style="padding-top: 0rem; padding-bottom: 0.75rem;">
							<div class="card-title">
								<h6>Panel Amps:
									<span id="CC1panelAmpsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Panel Volts:
									<span id="CC1panelVoltsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Max Watts:
									<span id="CC1panelMaxPowerLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Max Amps:
									<span id="CC1battMaxChargeCurrentLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Amp Hours:
									<span id="CC1dailyAmpHoursLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Total Power:
									<span id="CC1totalPowerLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Total Amp Hours:
									<span id="CC1totalAmpHoursLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Over-Discharges:
									<span id="CC1numOverDischargesLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Full Charges:
									<span id="CC1numFullChargesLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Days Operational:
									<span id="CC1numDaysLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
							</div>						
						</div>
					</div>
				</div>
				
				<!-- Load Section -->
				<div class="col-12 col-lg-4 col-md-6" style="padding-top: 0.5rem; padding-right: 0.5rem; padding-left: 0.5rem;">
					<div class="card mb-2 custom-card-dark">
						<div class="card-title", style="padding-top: 1rem; margin-bottom: 0.5rem; text-align: center;">
							<h4><b>Load</b></h4>
						</div>
						<div class="card-body", style="padding-top: 0rem; padding-bottom: 0.75rem;">
							<div class="card-title">
								<h6>Load State:
									<span id="CC1loadStateLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Load Watts:
									<span id="CC1loadWattsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Load Amps:
									<span id="CC1loadAmpsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Load Volts:
									<span id="CC1loadVoltsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0.25rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Max Watts:
									<span id="CC1loadMaxWattsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Max Amps:
									<span id="CC1loadMaxAmpsLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Power:
									<span id="CC1loadDailyPowerLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Daily Amp Hours:
									<span id="CC1loadDailyAmpHoursLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Total Power:
									<span id="CC1loadTotalPowerLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
								<hr style="margin-top: -4px; margin-bottom: -4px;">
							</div>
							<div class="card-title">
								<h6>Total Amp Hours:
									<span id="CC1loadTotalAmpHoursLabel" class="badge bg-secondary text-light" style="float: right; margin-top: -0.5px; margin-left: 0rem;">⋅⋅⋅</span>
								</h6>
							</div>
						</div>
					</div>
				</div>
				
				<!-- Faults Section -->
				<div class="col-12 col-xl-4 col-lg-6 col-md-6 offset-xl-4 offset-lg-3" style="padding-top: 0.5rem; padding-right: 0.5rem; padding-left: 0.5rem;">
					<div class="card mb-2 custom-card-dark">
						<div class="card-title" style="padding-top: 1rem; margin-bottom: 0.5rem; text-align: center;">
							<h4><b>Faults</b></h4>
						</div>
						<div class="card-body" style="padding-top: 0rem; padding-bottom: 0.75rem;">
							<div class="card-title">
								<h6><span id="CC1faults" style="text-align: left;">None :)</span></h6>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Status bar -->
			<div class="row" style="padding-top: 0.5rem;">
				<div class="col-12">
					<div id="status" class="alert" style="margin-left: -0.25rem; margin-right: -0.25rem;">
						<small>Loading...</small>
					</div>
				</div>
			</div>
		</div>
		<script src="./darkLightSwitch.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
	</body>
</html>