mirror
/
WLED
kopia lustrzana https://github.com/Aircoookie/WLED
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność
WLED/wled00/data/pixart/pixart.htm

210 wiersze
9.1 KiB
HTML
Czysty Zwykły widok Historia

Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>WLED Pixel Art Converter</title>
<link rel="stylesheet" href="pixart.css">
<link rel="shortcut icon" href="favicon-16x16.png">
Inline fixes.
2023-01-20 21:33:30 +00:00
<script type="text/javascript">
var d = document;
function gId(e) {return d.getElementById(e);}
function cE(e) {return d.createElement(e);}
</script>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</head>
<body>
<body>
<div class="top-part" >
<div style="display: flex; justify-content: center;">
<h1 style="display: flex; align-items: center;">
Inline fixes.
2023-01-20 21:33:30 +00:00
<svg style="width:36px;height:36px;margin-right:6px;" viewBox="0 0 32 32">
<rect style="fill:#003FFF" x="6" y="22" width="8" height="4"/>
<rect style="fill:#003FFF" x="14" y="14" width="4" height="8"/>
<rect style="fill:#003FFF" x="18" y="10" width="4" height="8"/>
<rect style="fill:#003FFF" x="22" y="6" width="8" height="4"/>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</svg>
WLED Pixel Art Converter
</h1>
</div>
<h2>Convert image to WLED JSON (pixel art on WLED matrix)</h2>
<p>
<table id="fieldTable" style="width: 100%; table-layout: fixed; align-content: center;">
<tr>
<td style="vertical-align: middle;">
<label for="ledSetupSelector">Led setup:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
<select id="ledSetupSelector" class="mainSelector">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<option value="matrix" selected>2D Matrix</option>
<option value="r2l">Serpentine, first row right to left &lt;-</option>
<option value="l2r">Serpentine, first row left to right -&gt;</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="formatSelector">Output format:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
<select id="formatSelector" class="mainSelector">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<option value="wled" selected>WLED JSON</option>
<option value="curl">CURL</option>
<option value="ha">Home Assistant YAML</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="colorFormatSelector">Color code format:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
<select id="colorFormatSelector" class="mainSelector">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<option value="hex" selected>HEX (#f4f4f4)</option>
<option value="dec">DEC (244,244,244)</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="addressingSelector">Addressing:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
<select id="addressingSelector" class="mainSelector">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<option value="hybrid" selected>Hybrid (#f0f0f0,10, 17, #f4f4f4)</option>
<option value="range">Range (10, 17, #f4f4f4)</option>
<option value="single">Single (#f4f4f4)</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="brightnessNumber">Brightness:</label>
</td>
<td style="vertical-align: middle; display: flex; align-items: center;">
Inline fixes.
2023-01-20 21:33:30 +00:00
<input type="range" id="brightnessNumber" min="1" max="255" value="128">
<span id="brightnessValue">128</span>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="colorLimitNumber">Max no of colors/JSON:</label>
</td>
<td style="vertical-align: middle; display: flex; align-items: center;">
<input type="range" id="colorLimitNumber" min="1" max="512" value="256">
<span id="colorLimitValue" >256</span>
</td>
</tr>
<tr class="ha-hide">
<td style="vertical-align: middle;">
<label for="haID">HA Device ID:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<input class="fullTextField" type="text" id="haID" value="pixel_art_controller_001">
</td>
</tr>
<tr class="ha-hide">
<td style="vertical-align: middle;">
<label for="haUID">HA Device Unique ID:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<input class="fullTextField" type="text" id="haUID" value="pixel_art_controller_001a">
</td>
</tr>
<tr class="ha-hide">
<td style="vertical-align: middle;">
<label for="haName">HA Device Name:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<input class="fullTextField" type="text" id="haName" value="Pixel Art Kitchen">
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="curlUrl">Device IP/host name:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<input class="fullTextField" type="text" id="curlUrl" value="">
</td>
</tr>
<tr>
<td style="vertical-align: middle;">
<label for="targetSegment">Target segment id:</label>
</td>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<td class="adaptiveTD">
<input class="flxTFld" type="number" id="segID" value="0" min="0" max="63">
<select id="targetSegment" class="adaptiveSelector">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</select>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<div id="getSegmentsDiv" class="segmentsDiv"></div>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</td>
</tr>
</table>
<table class= "scaleTableClass" id="scaleTable" style="width: 100%; table-layout: fixed; align-content: center;">
<tr>
<td style="vertical-align: middle;">
<div id="scaleDiv">
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
<svg id="scaleToggle" style="width:36px;height:36px; cursor: pointer;" viewBox="0 0 24 24" onclick="switchScale()">
<path id="scaleTogglePath" fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" />
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</svg>
Segment selection and touch ups
2023-01-21 15:33:59 +00:00
&nbsp;Scale image
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</div>
</td>
<td style="vertical-align: middle;">
<div id="sizeDiv" style="display: none;">
UI, simpler process, get more data from device
2023-01-22 17:47:34 +00:00
<label for="sizeX">W : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeX" min="1" value="16">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
&nbsp;&nbsp;&nbsp;
UI, simpler process, get more data from device
2023-01-22 17:47:34 +00:00
<label for="sizeY">H : </label> &nbsp;<input class="sizeInputFields" type="number" id="sizeY" min="1" value="16">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</div>
</td>
</tr>
</table>
</p>
<p>
<label for="file-picker">
<div id="drop-zone">
Drop image here <br>or <br>
Click to select a file
</div>
</label>
</p>
<p>
<input type="file" id="file-picker" style="display: none;">
<div style="width: 100%; text-align: center;">
Inline fixes.
2023-01-20 21:33:30 +00:00
<img id="preview" style="display: none; margin: 0 auto;">
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</div>
UI, simpler process, get more data from device
2023-01-22 17:47:34 +00:00
<!--
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<div id="submitConvertDiv" style="display: none;">
<button id="convertbutton" class="buttonclass"></button>
</div>
UI, simpler process, get more data from device
2023-01-22 17:47:34 +00:00
-->
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
<div id="raw-image-container" style="display: none">
<img id="image" src="" alt="RawImage image">
</div>
</p>
<div id="image-container" style="display: none;">
<div id="image-info" style="display: none"></div>
UI, simpler process, get more data from device
2023-01-22 17:47:34 +00:00
<textarea id="JSONled" readonly></textarea>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</div>
<div id="button-container" style="display: none;">
<button id="copyJSONledbutton" class="buttonclass"></button>
<div id="gap1" class="gap"></div>
<button id="sendJSONledbutton" class="buttonclass"></button>
</div>
<div>
Size optimizations and cleanup
2023-01-23 20:30:55 +00:00
<h3><div id="version">Version 1.0.7</div>&nbsp;-&nbsp; <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
Pixelart - full implementation
2023-01-20 13:40:45 +00:00
</div>
</div>
<div id=bottom-part style="display: none" class=bottom-part></div>
<canvas id="pixelCanvas"></canvas>
</div>
<script src="statics.js" type="text/javascript"></script>
<script src="getPixelValues.js" type="text/javascript"></script>
<script src="boxdraw.js" type="text/javascript"></script>
<script src="pixart.js" type="text/javascript"></script>
</body>
</html>