214 lines
9.8 KiB
HTML
214 lines
9.8 KiB
HTML
|
<!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">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<body>
|
||
|
|
<div class="top-part" >
|
||
|
|
<div style="display: flex; justify-content: center;">
|
||
|
|
<h1 style="display: flex; align-items: center;">
|
||
|
|
<svg style="width:36px;height:36px" id="logomatrix" viewBox="0 0 24 24">
|
||
|
|
<path fill="#7e4c80" d="M6,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc1"/>
|
||
|
|
<path fill="#7e4c80" d="M12,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc2"/>
|
||
|
|
<path fill="#7e4c80" d="M18,5 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc3"/>
|
||
|
|
<path fill="#7e4c80" d="M6,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc4"/>
|
||
|
|
<path fill="#7e4c80" d="M12,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc5"/>
|
||
|
|
<path fill="#7e4c80" d="M18,11 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc6"/>
|
||
|
|
<path fill="#7e4c80" d="M6,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc7"/>
|
||
|
|
<path fill="#7e4c80" d="M12,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc8"/>
|
||
|
|
<path fill="#7e4c80" d="M18,17 a2,2 0 1,0 4,0 a2,2 0 1,0 -4,0" id="sc9"/>
|
||
|
|
</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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<select id="ledSetupSelector">
|
||
|
|
<option value="matrix" selected>2D Matrix</option>
|
||
|
|
<option value="r2l">Serpentine, first row right to left <-</option>
|
||
|
|
<option value="l2r">Serpentine, first row left to right -></option>
|
||
|
|
</select>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<label for="formatSelector">Output format:</label>
|
||
|
|
</td>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<select id="formatSelector">
|
||
|
|
<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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<select id="colorFormatSelector">
|
||
|
|
<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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<select id="addressingSelector">
|
||
|
|
<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;">
|
||
|
|
<input type="range" id="brightnessNumber" min="1" max="255" value="255">
|
||
|
|
<span id="brightnessValue">255</span>
|
||
|
|
</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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<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>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<input class="fullTextField" type="text" id="curlUrl" value="">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<label for="targetSegment">Target segment id:</label>
|
||
|
|
</td>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<select id="targetSegment">
|
||
|
|
</select>
|
||
|
|
</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">
|
||
|
|
<svg id="scaleToggle" style="width:36px;height:36px" 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" />
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<svg id="scaleSvg" style="width:36px;height:36px" viewBox="0 0 24 24" onclick="switchScale()">
|
||
|
|
<path id="scalePath" fill="currentColor" d="M21,15H23V17H21V15M21,11H23V13H21V11M23,19H21V21C22,21 23,20 23,19M13,3H15V5H13V3M21,7H23V9H21V7M21,3V5H23C23,4 22,3 21,3M1,7H3V9H1V7M17,3H19V5H17V3M17,19H19V21H17V19M3,3C2,3 1,4 1,5H3V3M9,3H11V5H9V3M5,3H7V5H5V3M1,11V19A2,2 0 0,0 3,21H15V11H1M3,19L5.5,15.79L7.29,17.94L9.79,14.72L13,19H3Z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td style="vertical-align: middle;">
|
||
|
|
<div id="sizeDiv" style="display: none;">
|
||
|
|
<label for="sizeX">X : </label> <input class="sizeInputFields" type="number" id="sizeX" value="0">
|
||
|
|
|
||
|
|
<label for="sizeY">Y : </label> <input class="sizeInputFields" type="number" id="sizeY" value="0">
|
||
|
|
</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;">
|
||
|
|
<img id="preview" style="display: block; margin: 0 auto;">
|
||
|
|
<img id="newimage" style="display: block; margin: 0 auto;"><br>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="submitConvertDiv" style="display: none;">
|
||
|
|
<button id="convertbutton" class="buttonclass"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<textarea id="JSONled"></textarea>
|
||
|
|
</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 id = "gap2" class="gap"></div>
|
||
|
|
<button id="fileJSONledbutton" class="buttonclass"></button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3><div id="version">Version 1.0.4</div> - <a href="https://github.com/werkstrom/WLED-PixelArtConverter/blob/main/README.md" target="_blank">Help/About</a></h3>
|
||
|
|
</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>
|