|
|
|
@ -1,37 +1,37 @@
|
|
|
|
|
let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 class="paintweb_appTitle">PaintWeb</h1>
|
|
|
|
|
|
|
|
|
|
<!-- All elements with data-pwTabPanel become interactive tabbed panels which
|
|
|
|
|
will also have a class name like .paintweb_tabPanel_id and a generic class
|
|
|
|
|
name .paintweb_tabPanel. In this case the class names will be
|
|
|
|
|
<!-- All elements with data-pwTabPanel become interactive tabbed panels which
|
|
|
|
|
will also have a class name like .paintweb_tabPanel_id and a generic class
|
|
|
|
|
name .paintweb_tabPanel. In this case the class names will be
|
|
|
|
|
.paintweb_tabPanel_main and .paintweb_tabPanel. -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div data-pwTabPanel="main" data-pwTabDefault="main">
|
|
|
|
|
|
|
|
|
|
<!-- All elements with data-pwTab will have a class name like
|
|
|
|
|
.paintweb_tabPanelId_tabID and a generic class name .paintweb_tab. In this
|
|
|
|
|
<!-- All elements with data-pwTab will have a class name like
|
|
|
|
|
.paintweb_tabPanelId_tabID and a generic class name .paintweb_tab. In this
|
|
|
|
|
case the class names will be .paintweb_main_main and .paintweb_tab. -->
|
|
|
|
|
<div data-pwTab="main">
|
|
|
|
|
|
|
|
|
|
<!-- All elements with some #id will also have a class name like
|
|
|
|
|
<!-- All elements with some #id will also have a class name like
|
|
|
|
|
.paintweb_id. In this case the class name will be .paintweb_tools. -->
|
|
|
|
|
<ul id="tools">
|
|
|
|
|
|
|
|
|
|
<!-- All elements with data-pwCommand will have a class name like
|
|
|
|
|
.paintweb_cmd_commandID and a generic class name .paintweb_command. In
|
|
|
|
|
this case the class names will be .paintweb_cmd_historyUndo and
|
|
|
|
|
<!-- All elements with data-pwCommand will have a class name like
|
|
|
|
|
.paintweb_cmd_commandID and a generic class name .paintweb_command. In
|
|
|
|
|
this case the class names will be .paintweb_cmd_historyUndo and
|
|
|
|
|
.paintweb_command. -->
|
|
|
|
|
|
|
|
|
|
<li data-pwTool="selection" hidden>영역 선택</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="imageBright">밝게</li><br/>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="imageDark">어둡게</li>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="paintweb_toolSeparator"> </li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="selectionCrop">자르기</li><br/>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="selectionForNumberPlate">번호판</li>
|
|
|
|
@ -40,24 +40,24 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="imageRotateLeft">왼쪽 회전</li><br/>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="imageRotateRight">오른쪽 회전</li>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="paintweb_toolSeparator"> </li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<span>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="selectionFill">가림막</li><br/>
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="historyUndo">실행취소</li>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="paintweb_toolSeparator"> </li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<label class="w-px-60 pe-2 text-sm-end">차량번호</label><input type='text' id='vhrno' name='vhrno' class='form-control-sm my-1' /><br />
|
|
|
|
|
<label class="w-px-60 pe-2 text-sm-end">차량명</label><input type='text' id='vhclNm' name='vhclNm' class='form-control-sm my-1' disabled /><br />
|
|
|
|
|
<label class="w-px-60 pe-2 text-sm-end">색상</label><input type='text' id='vhclColor' name='vhclColor' class='form-control-sm my-1' disabled />
|
|
|
|
|
<label class="w-px-60 pe-2 text-sm-end">색상</label><input type='text' id='vhclColr' name='vhclColr' class='form-control-sm my-1' disabled />
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="paintweb_toolSeparator"> </li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="paintweb_buttonStyle" data-pwCommand="imageSave">이미지 저장</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
@ -85,18 +85,18 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<p id="viewportResizer">Resize the image viewport.</p>
|
|
|
|
|
</div> <!-- .paintweb_statusbar -->
|
|
|
|
|
|
|
|
|
|
<!-- Elements with data-pwFloatingPanel become interactive GUI components.
|
|
|
|
|
These will also have two class names: .paintweb_floatingPanel and
|
|
|
|
|
.paintweb_floatingPanel_id. In this case, the id is "colormixer". If you want
|
|
|
|
|
to automatically hide the panel, simply use data-pwPanelHide="true".
|
|
|
|
|
Additionally, you can make the panel resizable if you add
|
|
|
|
|
<!-- Elements with data-pwFloatingPanel become interactive GUI components.
|
|
|
|
|
These will also have two class names: .paintweb_floatingPanel and
|
|
|
|
|
.paintweb_floatingPanel_id. In this case, the id is "colormixer". If you want
|
|
|
|
|
to automatically hide the panel, simply use data-pwPanelHide="true".
|
|
|
|
|
Additionally, you can make the panel resizable if you add
|
|
|
|
|
data-pwPanelResizable="true". -->
|
|
|
|
|
<div data-pwFloatingPanel="colormixer" data-pwPanelHide="true">
|
|
|
|
|
<!-- Make sure you have the panel title in the h1 element. This will have
|
|
|
|
|
<!-- Make sure you have the panel title in the h1 element. This will have
|
|
|
|
|
the .paintweb_floatingPanel_title class name. -->
|
|
|
|
|
<h1>Color mixer</h1>
|
|
|
|
|
|
|
|
|
|
<!-- Wrap your content in a single div. This element will have the
|
|
|
|
|
<!-- Wrap your content in a single div. This element will have the
|
|
|
|
|
.paintweb_floatingPanel_content class name. -->
|
|
|
|
|
<div>
|
|
|
|
|
<ol class="paintweb_colormixer_preview">
|
|
|
|
@ -113,7 +113,7 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
|
|
|
|
|
<div data-pwTabPanel="colormixer_selector" data-pwTabDefault="mixer">
|
|
|
|
|
<div data-pwTab="mixer">
|
|
|
|
|
<canvas id="colormixer_canvas" width="200" height="195">Your browser
|
|
|
|
|
<canvas id="colormixer_canvas" width="200" height="195">Your browser
|
|
|
|
|
does not support Canvas.</canvas>
|
|
|
|
|
<div id="colormixer_controls">
|
|
|
|
|
<span id="colormixer_chartDot"></span>
|
|
|
|
@ -130,13 +130,13 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<ol class="paintweb_colormixer_hexalpha">
|
|
|
|
|
<li>
|
|
|
|
|
<label>HEX
|
|
|
|
|
<input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7"
|
|
|
|
|
<input id="ckey_hex" value="#RRGGBB" type="text" maxlength="7"
|
|
|
|
|
pattern="#[a-f0-9]{6}" />
|
|
|
|
|
</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<label>Alpha
|
|
|
|
|
<input id="ckey_alpha" value="100" type="number" min="0" max="100"
|
|
|
|
|
<input id="ckey_alpha" value="100" type="number" min="0" max="100"
|
|
|
|
|
step="1" />
|
|
|
|
|
</label>
|
|
|
|
|
</li>
|
|
|
|
@ -147,19 +147,19 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="red" type="radio" />
|
|
|
|
|
<label>Red
|
|
|
|
|
<input name="ckey_red" value="0" type="number" min="0" max="255"
|
|
|
|
|
<input name="ckey_red" value="0" type="number" min="0" max="255"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="green" type="radio" />
|
|
|
|
|
<label>Green
|
|
|
|
|
<input name="ckey_green" value="0" type="number" min="0" max="255"
|
|
|
|
|
<input name="ckey_green" value="0" type="number" min="0" max="255"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="blue" type="radio" />
|
|
|
|
|
<label>Blue
|
|
|
|
|
<input name="ckey_blue" value="0" type="number" min="0" max="255"
|
|
|
|
|
<input name="ckey_blue" value="0" type="number" min="0" max="255"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
@ -168,19 +168,19 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="hue" type="radio" />
|
|
|
|
|
<label>Hue
|
|
|
|
|
<input name="ckey_hue" value="0" type="number" min="0" max="360"
|
|
|
|
|
<input name="ckey_hue" value="0" type="number" min="0" max="360"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="sat" type="radio" />
|
|
|
|
|
<label>Saturation
|
|
|
|
|
<input name="ckey_sat" value="0" type="number" min="0" max="255"
|
|
|
|
|
<input name="ckey_sat" value="0" type="number" min="0" max="255"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="val" type="radio" />
|
|
|
|
|
<label>Value
|
|
|
|
|
<input name="ckey_val" value="0" type="number" min="0" max="255"
|
|
|
|
|
<input name="ckey_val" value="0" type="number" min="0" max="255"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
@ -189,19 +189,19 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="cie_l" type="radio" />
|
|
|
|
|
<label>Lightness
|
|
|
|
|
<input name="ckey_cie_l" value="0" type="number" min="0"
|
|
|
|
|
<input name="ckey_cie_l" value="0" type="number" min="0"
|
|
|
|
|
max="100" step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="cie_a" type="radio" />
|
|
|
|
|
<label>a*
|
|
|
|
|
<input name="ckey_cie_a" value="0" type="number" min="-85"
|
|
|
|
|
<input name="ckey_cie_a" value="0" type="number" min="-85"
|
|
|
|
|
max="94" step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input name="ckey" value="cie_b" type="radio" />
|
|
|
|
|
<label>b*
|
|
|
|
|
<input name="ckey_cie_b" value="0" type="number" min="-109"
|
|
|
|
|
<input name="ckey_cie_b" value="0" type="number" min="-109"
|
|
|
|
|
max="95" step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
@ -209,22 +209,22 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<ol data-pwTab="cmyk">
|
|
|
|
|
<li>
|
|
|
|
|
<label>Cyan
|
|
|
|
|
<input name="ckey_cyan" value="0" type="number" min="0" max="100"
|
|
|
|
|
<input name="ckey_cyan" value="0" type="number" min="0" max="100"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<label>Magenta
|
|
|
|
|
<input name="ckey_magenta" value="0" type="number" min="0"
|
|
|
|
|
<input name="ckey_magenta" value="0" type="number" min="0"
|
|
|
|
|
max="100" step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<label>Yellow
|
|
|
|
|
<input name="ckey_yellow" value="0" type="number" min="0" max="100"
|
|
|
|
|
<input name="ckey_yellow" value="0" type="number" min="0" max="100"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<label>Key (Black)
|
|
|
|
|
<input name="ckey_black" value="0" type="number" min="0" max="100"
|
|
|
|
|
<input name="ckey_black" value="0" type="number" min="0" max="100"
|
|
|
|
|
step="1" /></label>
|
|
|
|
|
</li>
|
|
|
|
|
</ol>
|
|
|
|
@ -244,7 +244,7 @@ let xhtml = `<div xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<li><strong>Project site:</strong> <a href="http://code.google.com/p/paintweb">code.google.com/p/paintweb</a></li>
|
|
|
|
|
<li><strong>Modified site:</strong> <a href="https://github.com/gujc71/imageEditor">github.com/gujc71/imageEditor</a></li>
|
|
|
|
|
|
|
|
|
|
<li><strong>Code license:</strong> <a
|
|
|
|
|
<li><strong>Code license:</strong> <a
|
|
|
|
|
href="https://opensource.org/licenses/BSD-3-Clause" title="BSD License, version 3">New BSD License</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|