Microcontrollers
/
LEDLamp
Наблюдаван 1
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Wemos D1 Mini Frimware zur Steuerung einer RGBW-LED-Lampe
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
18 Ревизии
1 Клон
ИН на ревизия: 5b8c26fe0f
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от '5b8c26fe0f'
${ noResults }
LEDLamp/HtmlPages.h

HtmlPages.h 11KB
Директен файл Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566 
  1. /*

  2.  * HtmlPage.h

  3.  *

  4.  *  Created on: 08.06.2026

  5.  *      Author: FSmilari

  6.  */

  7. 

  8. #ifndef HTMLPAGES_H_

  9. #define HTMLPAGES_H_

  10. 

  11. #include <WString.h>

  12. 

  13. const String getSetupPage(String macAddress) {

  14. 

  15. 	String html =

  16. 			R"rawliteral(

  17. 	<!DOCTYPE html>

  18. 	

  19. 	<html>

  20. 

  21. 		<script>

  22. 			function togglePassword() {

  23. 			  const pass = document.getElementById("pass");

  24. 			  const eye = document.querySelector(".toggle-eye");

  25. 			

  26. 			  if (pass.type === "password") {

  27. 				pass.type = "text";

  28. 				eye.textContent = "❌";

  29. 			  } else {

  30. 				pass.type = "password";

  31. 				eye.textContent = "👁";

  32. 			  }

  33. 			}

  34. 		</script>

  35. 

  36. 		<head>

  37. 			<meta name="viewport" content="width=device-width, initial-scale=1">

  38. 			<title>Wemos LEDLamp Setup</title>

  39. 

  40. 			<style>

  41. 			  body {

  42. 				margin: 0;

  43. 				font-family: Arial, sans-serif;

  44. 				background: linear-gradient(135deg, #1e1e2f, #2b5876);

  45. 				color: white;

  46. 				display: flex;

  47. 				justify-content: center;

  48. 				align-items: center;

  49. 				height: 100vh;

  50. 			  }

  51. 		

  52. 			  * {

  53. 				box-sizing: border-box;

  54. 			  }

  55. 		

  56. 			  .card {

  57. 				background: rgba(255,255,255,0.08);

  58. 				backdrop-filter: blur(10px);

  59. 				padding: 25px;

  60. 				border-radius: 16px;

  61. 				width: 90%;

  62. 				max-width: 360px;

  63. 				box-shadow: 0 8px 20px rgba(0,0,0,0.3);

  64. 				animation: fadeIn 0.8s ease;

  65. 			  }

  66. 		

  67. 			  h2 {

  68. 				margin-top: 0;

  69. 				text-align: center;

  70. 			  }

  71. 		

  72. 			  .info {

  73. 				font-size: 12px;

  74. 				opacity: 0.8;

  75. 				margin-top: 8px;

  76. 				margin-bottom: 15px;

  77. 				text-align: center;

  78. 			  }

  79. 		

  80. 			  input {

  81. 				width: 100%;

  82. 				padding: 12px;

  83. 				margin: 8px 0px;

  84. 				border-radius: 10px;

  85. 				border: none;

  86. 				outline: none;

  87. 				font-size: 14px;

  88. 				transition: 0.2s;

  89. 			  }

  90. 		

  91. 			  input:focus {

  92. 				transform: scale(1.02);

  93. 			  }

  94. 		

  95. 			  button {

  96. 				width: 100%;

  97. 				padding: 12px;

  98. 				margin-top: 10px;

  99. 				border: none;

  100. 				border-radius: 10px;

  101. 				background: #00c6ff;

  102. 				color: white;

  103. 				font-size: 16px;

  104. 				cursor: pointer;

  105. 				transition: 0.3s;

  106. 			  }

  107. 		

  108. 			  button:hover {

  109. 				background: #0072ff;

  110. 				transform: translateY(-2px);

  111. 			  }

  112. 		

  113. 			  .mac {

  114. 				font-size: 11px;

  115. 				text-align: center;

  116. 				margin-bottom: 15px;

  117. 				opacity: 0.7;

  118. 				word-break: break-all;

  119. 			  }

  120. 		

  121. 			  .pw-wrapper {

  122. 				position: relative;

  123. 				width: 100%;

  124. 				margin: 8px 0;

  125. 			   }

  126. 				

  127. 			  .pw-wrapper input {

  128. 				 width: 100%;

  129. 				 padding: 12px 40px 12px 12px; /* Platz für Icon rechts */

  130. 				 border-radius: 10px;

  131. 				 border: none;

  132. 				 outline: none;

  133. 				 font-size: 14px;

  134. 				 box-sizing: border-box;

  135. 			   }

  136. 				

  137. 			   .toggle-eye {

  138. 				 position: absolute;

  139. 				 right: 12px;

  140. 				 top: 50%;

  141. 				 transform: translateY(-50%);

  142. 				 cursor: pointer;

  143. 				 font-size: 16px;

  144. 				 opacity: 0.6;

  145. 				 user-select: none;

  146. 				 transition: 0.2s;

  147. 				}

  148. 				

  149. 				.toggle-eye:hover {

  150. 				  opacity: 1;

  151. 				}

  152. 

  153. 			  .bar_white {

  154. 				background: white;

  155. 				width: 100%;

  156. 				height: 3px;

  157. 				margin-bottom: 20px;

  158. 			  }

  159. 	

  160. 			  .bar_red {

  161. 				background: red;

  162. 				width: 100%;

  163. 				height: 3px;

  164. 				margin-bottom: 20px;

  165. 			  }	

  166. 

  167. 			  .bar_green {

  168. 				background: green;

  169. 				width: 100%;

  170. 				height: 3px;

  171. 				margin-bottom: 20px;

  172. 			  }	

  173. 

  174. 			  .bar_blue {

  175. 				background: blue;

  176. 				width: 100%;

  177. 				height: 3px;

  178. 				margin-bottom: 20px;

  179. 			  }			

  180. 			  @keyframes fadeIn {

  181. 				from {opacity: 0; transform: translateY(10px);}

  182. 				to {opacity: 1; transform: translateY(0);}

  183. 			  }

  184. 			</style>

  185. 		</head>

  186. 

  187. 		<body>

  188. 

  189. 			<div class="card">

  190.  				<div style="display: flex">

  191. 				  <div class="bar_green"></div>

  192. 			  	  <div class="bar_white"></div>

  193. 				  <div class="bar_red"></div>

  194. 				  <div class="bar_blue"></div>

  195. 			    </div>

  196. 			  <h2>Wemos LEDLamp Setup</h2>

  197. 			  <div class="mac">Device: )rawliteral"

  198. 					+ macAddress

  199. 					+ R"rawliteral(</div>

  200. 

  201. 			  <form action="/save" method="POST">

  202. 			  	<input name="ssid" placeholder="WLAN Name (SSID)">

  203. 	          

  204. 			  	<div class="pw-wrapper">

  205. 			  	  <input id="pass" name="pass" type="password" placeholder="Passwort">

  206. 			  	  <span class="toggle-eye" onclick="togglePassword()">👁</span>

  207. 			  	</div>

  208. 	          

  209. 			  	<button type="submit">Speichern & Verbinden</button>

  210. 			  </form>

  211. 			  <div class="info">Verbinde den LEDLamp Wemos mit einem WLAN Netzwerk</div>

  212. 			</div>

  213. 

  214. 		</body>

  215. 	</html>

  216. 	)rawliteral";

  217. 

  218. 	return html;

  219. }

  220. 

  221. 

  222. const String getSTAControlPage(String macAddress) {

  223. 	String html =

  224. 			R"rawliteral(

  225. 	<!DOCTYPE html>

  226. 	

  227. 	<html>

  228. 		<head>

  229. 			<meta charset="UTF-8">

  230. 			<meta name="viewport" content="width=device-width, initial-scale=1">

  231. 			<title>Wemos LEDLamp Control</title>

  232. 

  233. 			<style>

  234. 			  body {

  235. 				margin: 0;

  236. 				font-family: Arial, sans-serif;

  237. 				background: linear-gradient(135deg, #1e1e2f, #2b5876);

  238. 				color: white;

  239. 				display: flex;

  240. 				justify-content: center;

  241. 				align-items: center;

  242. 				height: 100vh;

  243. 			  }

  244. 		

  245. 			  * {

  246. 				box-sizing: border-box;

  247. 			  }

  248. 		

  249. 			  .card {

  250. 				background: rgba(255,255,255,0.08);

  251. 				backdrop-filter: blur(10px);

  252. 				padding: 25px;

  253. 				border-radius: 16px;

  254. 				width: 90%;

  255. 				max-width: 360px;

  256. 				box-shadow: 0 8px 20px rgba(0,0,0,0.3);

  257. 				animation: fadeIn 0.8s ease;

  258. 			  }

  259. 		

  260. 			  h2 {

  261. 				margin-top: 0;

  262. 				text-align: center;

  263. 			  }

  264. 		

  265. 			  .info {

  266. 				font-size: 12px;

  267. 				opacity: 0.8;

  268. 				margin-top: 8px;

  269. 				margin-bottom: 15px;

  270. 				text-align: center;

  271. 			  }

  272. 		

  273. 			  input {

  274. 				width: 100%;

  275. 				padding: 12px;

  276. 				margin-top: 10px;

  277. 				border-radius: 10px;

  278. 				border: none;

  279. 				outline: none;

  280. 				font-size: 14px;

  281. 				transition: 0.2s;

  282. 			  }

  283. 		

  284. 			  input:focus {

  285. 				transform: scale(1.02);

  286. 			  }

  287. 		

  288. 			  button {

  289. 				width: 100%;

  290. 				padding: 12px;

  291. 				border: none;

  292. 				border-radius: 10px;

  293. 				background: #00c6ff;

  294. 				color: white;

  295. 				font-size: 16px;

  296. 				cursor: pointer;

  297. 				transition: 0.3s;

  298. 			  }

  299. 		

  300. 			  button:hover {

  301. 				background: #0072ff;

  302. 				transform: translateY(-1px) translateX(1px);

  303. 			  }

  304. 

  305. 			  .btn-row {

  306. 				display: flex;

  307. 				gap: 10px;

  308. 				align-items: center;

  309. 				margin-top: 10px;

  310. 			  }	

  311. 

  312. 			  .rowTop {

  313. 				margin-top: 20px;

  314. 			  }	

  315. 		

  316. 			  .mac {

  317. 				font-size: 11px;

  318. 				text-align: center;

  319. 				margin-bottom: 15px;

  320. 				opacity: 0.7;

  321. 				word-break: break-all;

  322. 			  }

  323. 

  324. 			  .bar_white {

  325. 				background: white;

  326. 				width: 100%;

  327. 				height: 3px;

  328. 				margin-bottom: 20px;

  329. 			  }

  330. 	

  331. 			  .bar_red {

  332. 				background: red;

  333. 				width: 100%;

  334. 				height: 3px;

  335. 				margin-bottom: 20px;

  336. 			  }	

  337. 

  338. 			  .bar_green {

  339. 				background: green;

  340. 				width: 100%;

  341. 				height: 3px;

  342. 				margin-bottom: 20px;

  343. 			  }	

  344. 

  345. 			  .bar_blue {

  346. 				background: blue;

  347. 				width: 100%;

  348. 				height: 3px;

  349. 				margin-bottom: 20px;

  350. 			  }	

  351. 

  352. 			  @keyframes fadeIn {

  353. 				from {opacity: 0; transform: translateY(10px);}

  354. 				to {opacity: 1; transform: translateY(0);}

  355. 			  }

  356. 			</style>

  357. 		</head>

  358. 

  359. 		<body>

  360. 

  361. 			<div class="card">

  362. 			  <div style="display: flex">

  363. 				<div class="bar_green"></div>

  364. 			  	<div class="bar_white"></div>

  365. 				<div class="bar_red"></div>

  366. 				<div class="bar_blue"></div>

  367. 			  </div>

  368. 			  <h2>Wemos LEDLamp Control</h2>

  369. 			  <div class="mac">Device: )rawliteral"

  370. 					+ macAddress

  371. 					+ R"rawliteral(</div>

  372. 	          

  373. 			  <div class="btn-row">

  374. 			    <div id="led_status">⚫</div>	

  375. 			    <button type="button" onclick="ledOn()">LED EIN</button>

  376. 			    <button type="button" onclick="ledOff()">LED AUS</button>

  377. 			  </div>

  378. 			

  379. 			  <input id="id_cmd" class="rowTop" placeholder="Commad...">

  380. 

  381. 			  <div class="btn-row">

  382. 			    <button type="button" onclick="sendCommand()">Command senden</button>

  383. 			  </div>

  384. 			  <div class="btn-row rowTop">

  385. 			    <button type="button" onclick="resetWifiCfg()">Wifi-Konfiguration löschen</button>

  386. 			  </div>

  387. 			  <div id="reset_status" class="info">-</div>

  388. 			</div>

  389. 			

  390. 			<script>

  391. 				let ws;

  392. 	

  393. 				function connectWS() {

  394. 				  ws = new WebSocket("ws://" + location.hostname + ":81/");

  395. 				  

  396. 				  ws.onopen = () => {

  397. 					console.log("WebSocket connected");

  398. 				  };

  399. 				  

  400. 				  ws.onmessage = (e) => {

  401. 					console.log("ESP:", e.data);

  402. 					

  403. 					if (e.data === "LED ON") {

  404. 					  document.getElementById("led_status").innerHTML = "🟢";

  405. 					}

  406. 						  

  407. 					if (e.data === "LED OFF") {

  408. 					  document.getElementById("led_status").innerHTML = "⚫";

  409. 					}

  410. 

  411. 					if (e.data === "Wifi_Reset_Success") {

  412. 					  document.getElementById("reset_status").innerHTML = "Die Wifi-Konfiguration wurde erfolgreich zurückgesetzt.";

  413. 					}

  414. 				  };

  415. 				  

  416. 				  ws.onclose = () => {

  417. 					console.log("WS disconnected → reconnect");

  418. 					setTimeout(connectWS, 1000);

  419. 				  };

  420. 				}

  421. 	

  422. 				connectWS();

  423. 	

  424. 				function ledOn() {

  425. 				  if (ws && ws.readyState === 1) {

  426. 					ws.send("{\"cmd\":\"SWITCH_LED\",\"val\":\"on\"}");

  427. 				  }

  428. 				}

  429. 	

  430. 				function ledOff() {

  431. 				  if (ws && ws.readyState === 1) {

  432. 					ws.send("{\"cmd\":\"SWITCH_LED\",\"val\":\"off\"}");

  433. 				  }

  434. 				}

  435. 

  436. 				function resetWifiCfg() {

  437. 				  if (ws && ws.readyState === 1) {

  438. 					ws.send("{\"cmd\":\"RESET_WIFI_CFG\",\"val\":\"\"}");

  439. 				  }

  440. 				}

  441. 

  442. 				function sendCommand() {

  443. 				  if (ws && ws.readyState === 1) {

  444. 					cmd = document.getElementById('id_cmd').value

  445. 					ws.send(cmd);

  446. 				  }

  447. 				}

  448. 

  449. 	

  450. 			</script>

  451. 

  452. 		</body>

  453. 	</html>

  454. 	)rawliteral";

  455. 

  456. 	return html;

  457. }

  458. 

  459. 

  460. const String getConnectionSuccessPage() {

  461. 	String html =

  462. 			R"rawliteral(

  463. 	<!DOCTYPE html>

  464. 	

  465. 	<html>

  466. 		<head>

  467. 			<meta charset="UTF-8">

  468. 			<meta name="viewport" content="width=device-width, initial-scale=1">

  469. 			<title>Wemos LEDLamp Setup</title>

  470. 

  471. 			<style>

  472. 			  body {

  473. 				margin: 0;

  474. 				font-family: Arial, sans-serif;

  475. 				background: linear-gradient(135deg, #1e1e2f, #2b5876);

  476. 				color: white;

  477. 				display: flex;

  478. 				justify-content: center;

  479. 				align-items: center;

  480. 				height: 100vh;

  481. 			  }

  482. 		

  483. 			  * {

  484. 				box-sizing: border-box;

  485. 			  }

  486. 		

  487. 			  .card {

  488. 				background: rgba(255,255,255,0.08);

  489. 				backdrop-filter: blur(10px);

  490. 				padding: 25px;

  491. 				border-radius: 16px;

  492. 				width: 90%;

  493. 				max-width: 360px;

  494. 				box-shadow: 0 8px 20px rgba(0,0,0,0.3);

  495. 				animation: fadeIn 0.8s ease;

  496. 			  }

  497. 		

  498. 			  h2 {

  499. 				margin-top: 0;

  500. 				text-align: center;

  501. 			  }

  502. 		

  503. 			  .info {

  504. 				font-size: 12px;

  505. 				opacity: 0.8;

  506. 				margin-top: 8px;

  507. 				margin-bottom: 15px;

  508. 				text-align: center;

  509. 			  }

  510. 		

  511. 			  .bar_white {

  512. 				background: white;

  513. 				width: 100%;

  514. 				height: 3px;

  515. 				margin-bottom: 20px;

  516. 			  }

  517. 	

  518. 			  .bar_red {

  519. 				background: red;

  520. 				width: 100%;

  521. 				height: 3px;

  522. 				margin-bottom: 20px;

  523. 			  }	

  524. 

  525. 			  .bar_green {

  526. 				background: green;

  527. 				width: 100%;

  528. 				height: 3px;

  529. 				margin-bottom: 20px;

  530. 			  }	

  531. 

  532. 			  .bar_blue {

  533. 				background: blue;

  534. 				width: 100%;

  535. 				height: 3px;

  536. 				margin-bottom: 20px;

  537. 			  }	

  538. 

  539. 			  @keyframes fadeIn {

  540. 				from {opacity: 0; transform: translateY(10px);}

  541. 				to {opacity: 1; transform: translateY(0);}

  542. 			  }

  543. 			</style>

  544. 		</head>

  545. 

  546. 		<body>

  547. 			<div class="card">

  548. 			  <div style="display: flex">

  549. 				<div class="bar_green"></div>

  550. 			  	<div class="bar_white"></div>

  551. 				<div class="bar_red"></div>

  552. 				<div class="bar_blue"></div>

  553. 			  </div>

  554. 			  <h2>Wemos LEDLamp Setup gespeichert!</h2>

  555. 			  <div class="info">Wemos startet neu...</div>

  556. 			</div>

  557. 		</body>

  558. 	</html>

  559. 	)rawliteral";

  560. 

  561. 	return html;

  562. }

  563. 

  564. 

  565. 

  566. #endif /* HTMLPAGES_H_ */