Mirrors/Tasmota
2
0
Fork 0
mirror of https://github.com/arendst/Tasmota.git synced 2026-02-20 00:32:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove extrapolated HTML fragments from doc

Browse Source
This commit is contained in:
s-hadinger
2025-09-23 18:49:59 +02:00
committed by GitHub
parent cf5f9d2f3f
commit 5c329adcf6
1 changed files with 17 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
.doc_for_ai/TASMOTA_WEBUI_CODING_GUIDE.md
View File

@@ -388,7 +388,7 @@ For configuration pages with forms:
<fieldset> <fieldset>
<legend><b>&nbsp;Template&nbsp;</b></legend> <legend><b>&nbsp;Template&nbsp;</b></legend>
<p> <p>
<input id='t1' placeholder="Template" value='{"NAME":"ESP32-DevKit",...}'> <input id='t1' placeholder="Template" value='{&quot;NAME&quot;:&quot;ESP32-DevKit&quot;,&quot;GPIO&quot;:[1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1376,0,1,224,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1],&quot;FLAG&quot;:0,&quot;BASE&quot;:1}'>
</p> </p>
<p> <p>
<label> <label>
@@ -493,11 +493,6 @@ The main control page features a prominent status display and interactive contro
</tr> </tr>
</table> </table>
<!-- Large Status Display -->
<div style='text-align:center;font-size:4em;font-weight:bold;color:var(--c_txt);padding:20px;'>
OFF
</div>
<!-- Button State Script --> <!-- Button State Script -->
<script> <script>
eb('o1').style.background = 'var(--c_btnoff)'; eb('o1').style.background = 'var(--c_btnoff)';
@@ -506,65 +501,7 @@ The main control page features a prominent status display and interactive contro
## Advanced UI Components ## Advanced UI Components
### Status Display
The main page features a large, prominent status display:
```css
.status-display {
text-align: center;
font-size: 4em;
font-weight: bold;
color: var(--c_txt);
padding: 20px;
margin: 10px 0;
}
```
```html
<div class="status-display">OFF</div>
```
### Color Control Sliders
The interface includes sophisticated color control with visual feedback:
```html
<!-- Hue Control with Rainbow Gradient -->
<div class='r' style='background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);'>
<input type='range' min='0' max='359' value='95' onchange='updateHue(this.value)'>
</div>
<!-- Saturation Control -->
<div class='r' style='background: linear-gradient(to right, #ccc, #0f0);'>
<input type='range' min='0' max='100' value='94' onchange='updateSaturation(this.value)'>
</div>
<!-- Brightness Control -->
<div class='r' style='background: linear-gradient(to right, #000, #fff);'>
<input type='range' min='0' max='100' value='80' onchange='updateBrightness(this.value)'>
</div>
```
### Button Layout Patterns
Based on the screenshots, buttons follow specific layout patterns:
```css
/* Full-width buttons with consistent spacing */
.btn-full {
width: 100%;
margin: 2px 0;
padding: 12px;
border-radius: 4px;
}
/* Button color variations */
.btn-primary { background: var(--c_btn); } /* Blue - Navigation */
.btn-success { background: var(--c_btnsv); } /* Green - Save */
.btn-danger { background: var(--c_btnrst); } /* Red - Reset/Restart */
.btn-secondary { background: var(--c_btnoff); } /* Gray - Disabled */
```
## Advanced UI Components ## Advanced UI Components
@@ -657,143 +594,15 @@ td {
## Integration with Tasmota Backend ## Integration with Tasmota Backend
### Command Execution Pattern
```javascript
// Execute Tasmota command via AJAX
function executeCommand(cmd, params) {
var url = '/?m=1&' + cmd;
if (params) url += '=' + encodeURIComponent(params);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Handle response
updateUI(xhr.responseText);
}
};
xhr.send();
}
```
### Status Updates
```javascript
// Auto-refresh status every 400ms
function refreshStatus() {
la(); // Calls the main load function
}
setInterval(refreshStatus, 400);
```
### Form Submission
```javascript
// Handle form submission with confirmation
function submitForm(formId, confirmMsg) {
if (confirmMsg && !confirm(confirmMsg)) {
return false;
}
document.getElementById(formId).submit();
return true;
}
```
## Visual Design Specifications
### Layout Dimensions
Based on the screenshots, the interface uses these key dimensions:
- **Minimum width**: 340px (as specified in CSS)
- **Button height**: Approximately 48px for touch-friendly interaction
- **Spacing**: 2-4px between elements, larger gaps between sections
- **Border radius**: 4px for buttons and form elements
### Typography Hierarchy
```css
/* Device name header */
h3 {
font-size: 1.2em;
color: var(--c_ttl);
margin: 10px 0;
}
/* Main title */
h2 {
font-size: 1.8em;
color: var(--c_ttl);
margin: 5px 0;
}
/* Status display */
.status {
font-size: 4em;
font-weight: bold;
text-align: center;
}
/* Section headers */
legend {
font-weight: bold;
padding: 0 10px;
}
```
### Form Element Styling
The screenshots show consistent form styling:
```css
/* Text inputs with proper spacing */
input[type="text"], input[type="password"] {
padding: 8px;
margin: 4px 0;
border: 1px solid #666;
border-radius: 4px;
background: var(--c_in);
color: var(--c_intxt);
}
/* Checkboxes with labels */
input[type="checkbox"] {
margin-right: 8px;
transform: scale(1.2);
}
/* Radio buttons in groups */
input[type="radio"] {
margin-right: 8px;
margin-left: 0;
}
```
### Matter Protocol Integration
The screenshots show Matter protocol support with a distinctive icon:
```html
<button>
<svg style='vertical-align:middle;' width='24' height='24' viewBox='100 100 240 240'>
<!-- Matter protocol icon SVG path -->
</svg>
Matter
</button>
```
## Common UI Patterns ## Common UI Patterns
### 1. Toggle Buttons ### 1. Toggle Buttons (from original source)
```html ```html
<button id='toggle1' onclick='toggleRelay(1)'>Toggle 1</button> <button id='o1' onclick='la("&o=1");'>Toggle 1</button>
<script>
function toggleRelay(num) {
la('&o=' + num);
}
</script>
``` ```
### 2. Configuration Sections ### 2. Configuration Sections
@@ -847,101 +656,50 @@ function toggleRelay(num) {
<input id='wp' type='password' placeholder="Web Admin Password" value="****"> <input id='wp' type='password' placeholder="Web Admin Password" value="****">
``` ```
### 7. Template Configuration ### 7. Template Configuration (from original source)
```html ```html
<fieldset> <fieldset>
<legend><b>&nbsp;Template&nbsp;</b></legend> <legend><b>&nbsp;Template&nbsp;</b></legend>
<p> <p>
<input id='template' placeholder="Template" <input id='t1' placeholder="Template" value='{&quot;NAME&quot;:&quot;ESP32-DevKit&quot;,&quot;GPIO&quot;:[1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1376,0,1,224,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1],&quot;FLAG&quot;:0,&quot;BASE&quot;:1}'>
value='{"NAME":"ESP32-DevKit","GPIO":[1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1376,0,1,224,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1],"FLAG":0,"BASE":1}'>
</p> </p>
<p> <p>
<label> <label>
<input type='checkbox' checked disabled> <input id='t2' type='checkbox' checked disabled>
<b>Activate</b> <b>Activate</b>
</label> </label>
</p> </p>
</fieldset> </fieldset>
``` ```
### 8. Status Display with Dynamic Updates ### 8. Color Control Sliders (from original source)
```html ```html
<div id='status-display' style='text-align:center;font-size:4em;font-weight:bold;color:var(--c_txt);padding:20px;'>
OFF
</div>
<script>
function updateStatus(state) {
const display = eb('status-display');
display.textContent = state ? 'ON' : 'OFF';
display.style.color = state ? 'var(--c_txtscc)' : 'var(--c_txt)';
}
</script>
```
### 9. Color Picker Sliders
```html
<!-- Complete color control system -->
<table style='width:100%'> <table style='width:100%'>
<!-- Hue slider with rainbow background -->
<tr> <tr>
<td colspan='2'> <td colspan='2' style='width:100%'>
<div class='r' style='background:linear-gradient(to right,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%);'> <div id='b' class='r' style='background-image:linear-gradient(to right,#800,#f00 5%,#ff0 20%,#0f0 35%,#0ff 50%,#00f 65%,#f0f 80%,#f00 95%,#800);'>
<input id='hue' type='range' min='0' max='359' value='95' onchange='updateColor()'> <input id='sl2' type='range' min='0' max='359' value='95' onchange='lc("h",0,value)'>
</div> </div>
</td> </td>
</tr> </tr>
<!-- Saturation slider -->
<tr> <tr>
<td colspan='2'> <td colspan='2' style='width:100%'>
<div class='r' style='background:linear-gradient(to right,#ccc,#0f0);'> <div id='s' class='r' style='background-image:linear-gradient(to right,#CCCCCC,#6AFF00);'>
<input id='sat' type='range' min='0' max='100' value='94' onchange='updateColor()'> <input id='sl3' type='range' min='0' max='100' value='94' onchange='lc("n",0,value)'>
</div> </div>
</td> </td>
</tr> </tr>
<!-- Brightness slider with button -->
<tr> <tr>
<td style='width:15%'> <td style='width:15%'>
<button onclick='toggleSecondary()'>T2</button> <button id='o2' onclick='la("&o=2");'>T2</button>
</td> </td>
<td style='width:85%'> <td colspan='1' style='width:85%'>
<div class='r' style='background:linear-gradient(to right,#000,#fff);'> <div id='c' class='r' style='background-image:linear-gradient(to right,#000,#fff);'>
<input id='bri' type='range' min='0' max='100' value='80' onchange='updateColor()'> <input id='sl4' type='range' min='0' max='100' value='80' onchange='lc("d",0,value)'>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
``` ```
## Mobile Optimization
Based on the screenshots, the interface is optimized for mobile devices:
### Touch-Friendly Design
- **Button height**: Minimum 44px for easy touch interaction
- **Slider handles**: Large enough for finger control
- **Spacing**: Adequate gaps between interactive elements
- **Text size**: Readable on small screens
### Responsive Layout
```css
@media (max-width: 480px) {
.container {
min-width: 320px;
padding: 10px;
}
button {
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
}
input[type="range"] {
height: 44px;
}
}
```
This guide provides the foundation for creating Tasmota-compatible WebUI interfaces that are efficient, user-friendly, and consistent with the existing design system. The visual specifications are based on actual Tasmota WebUI screenshots showing the main control page, configuration forms, and navigation menus. This guide provides the foundation for creating Tasmota-compatible WebUI interfaces that are efficient, user-friendly, and consistent with the existing design system. The visual specifications are based on actual Tasmota WebUI screenshots showing the main control page, configuration forms, and navigation menus.