|
| 1 | +<h2>🧩 WLED Matrix YAML Generator (4 Segments)</h2> |
| 2 | +<p>Select the entity type and enter the full Home Assistant entity ID. Example: <code>sensor.temp_living_room</code></p> |
| 3 | + |
| 4 | +<form id="entity-form"> |
| 5 | + <div id="entity-entries"></div> |
| 6 | +</form> |
| 7 | + |
| 8 | +<h3>📝 Generated YAML:</h3> |
| 9 | +<pre id="output" style="background:#1e1e1e;color:#dcdcdc;padding:1em;overflow:auto;border-radius:5px;"></pre> |
| 10 | +<button onclick="copyYAML()">📋 Copy to Clipboard</button> |
| 11 | + |
| 12 | +<script> |
| 13 | +const defaultFX = 122; |
| 14 | +const output = document.getElementById("output"); |
| 15 | +const entries = document.getElementById("entity-entries"); |
| 16 | + |
| 17 | +const exampleEntities = [ |
| 18 | + { type: "weather", entity: "weather.nowcast" }, |
| 19 | + { type: "lock", entity: "lock.front_door_lock" }, |
| 20 | + { type: "sensor", entity: "sensor.brandon_air_1_co2" }, |
| 21 | + { type: "alarm_control_panel", entity: "alarm_control_panel.alarmo" } |
| 22 | +]; |
| 23 | + |
| 24 | +// Build 4 input blocks |
| 25 | +for (let i = 0; i < 4; i++) { |
| 26 | + const div = document.createElement("div"); |
| 27 | + const example = exampleEntities[i]; |
| 28 | + div.innerHTML = ` |
| 29 | + <fieldset style="margin-bottom:1em;border:1px solid #ccc;padding:1em;border-radius:6px;"> |
| 30 | + <legend>Segment ${i}</legend> |
| 31 | + <label>Entity Type: |
| 32 | + <select name="type" data-id="${i}"> |
| 33 | + <option value="sensor">sensor</option> |
| 34 | + <option value="lock">lock</option> |
| 35 | + <option value="alarm_control_panel">alarm_control_panel</option> |
| 36 | + <option value="weather">weather</option> |
| 37 | + <option value="other">other</option> |
| 38 | + </select> |
| 39 | + </label><br> |
| 40 | + <label>Entity ID: |
| 41 | + <input type="text" name="entity" value="${example.entity}" placeholder="e.g., sensor.temp_living_room" data-id="${i}" style="width: 300px;"> |
| 42 | + </label> |
| 43 | + </fieldset> |
| 44 | + `; |
| 45 | + entries.appendChild(div); |
| 46 | +} |
| 47 | + |
| 48 | +// Update YAML output when inputs change |
| 49 | +entries.querySelectorAll("input, select").forEach(el => { |
| 50 | + el.addEventListener("input", updateYAML); |
| 51 | + el.addEventListener("change", updateYAML); |
| 52 | +}); |
| 53 | + |
| 54 | +function formatTemplate(entity, type) { |
| 55 | + if (!entity) return ""; |
| 56 | + const name = entity.split(".")[1]?.replace(/_/g, " "); |
| 57 | + switch (type) { |
| 58 | + case "sensor": |
| 59 | + return `{{ states('${entity}') | round(0) }} (${name})`; |
| 60 | + case "lock": |
| 61 | + return `${name}: {{ 'Locked' if is_state('${entity}', 'locked') else 'Unlocked' }}`; |
| 62 | + case "alarm_control_panel": |
| 63 | + return `Alarm: {{ states('${entity}') | title }}`; |
| 64 | + case "weather": |
| 65 | + return `Weather: {{ states('${entity}') | title }}`; |
| 66 | + default: |
| 67 | + return `{{ states('${entity}') }} (${name})`; |
| 68 | + } |
| 69 | +} |
| 70 | + |
| 71 | +function updateYAML() { |
| 72 | + const segments = Array.from(entries.querySelectorAll("fieldset")).map((fs, i) => { |
| 73 | + const type = fs.querySelector('select[name="type"]').value; |
| 74 | + const entity = fs.querySelector('input[name="entity"]').value.trim(); |
| 75 | + if (!entity) return null; |
| 76 | + const template = formatTemplate(entity, type).replace(/"/g, '\\"'); |
| 77 | + return ` {\n "id": ${i},\n "fx": ${defaultFX},\n "n": "${template}"\n }`; |
| 78 | + }).filter(Boolean); |
| 79 | + |
| 80 | + const yaml = `rest_command:\n matrix_all_segments:\n url: http://10.10.10.176/json/state\n content_type: 'application/json'\n verify_ssl: false\n method: 'post'\n timeout: 20\n payload: >\n {\n "seg":[\n${segments.join(",\n")}\n ]\n }`; |
| 81 | + |
| 82 | + output.textContent = yaml; |
| 83 | +} |
| 84 | + |
| 85 | +function copyYAML() { |
| 86 | + navigator.clipboard.writeText(output.textContent).then(() => { |
| 87 | + alert("YAML copied to clipboard!"); |
| 88 | + }); |
| 89 | +} |
| 90 | + |
| 91 | +updateYAML(); |
| 92 | +</script> |
![cloudcannon[bot]](https://avatars.githubusercontent.com/in/230880?v=4&size=40){kind=avatar}
0 commit comments