diff options
Diffstat (limited to 'share/frontend/im/newimagemaker.html')
| -rwxr-xr-x | share/frontend/im/newimagemaker.html | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/share/frontend/im/newimagemaker.html b/share/frontend/im/newimagemaker.html new file mode 100755 index 0000000..50db4df --- /dev/null +++ b/share/frontend/im/newimagemaker.html @@ -0,0 +1,289 @@ +<!doctype html> +<html> +<head> +<title>IM PORTAL</title> +<style type="text/css"> +* + { + padding: 0; + margin: 0; + font-family: sans-serif; + } +body + { + background-color: #e6e0e0; + } +#controls,#result + { + display: inline-block; + padding: 10px; + width: 430px; + position: absolute; + } +#controls + { + font-size: 14px; + top: 10px; left: 10px; + max-height: 450px; + background-color: #fff; + z-index: 5; + } +#result + { + background-color: #d6d0d0; + top: 10px; left: 480px; + display: none; + z-index: 5; + } +#instructions + { + position: absolute; + bottom: 10px; + left: 10px; + line-height: 18px; + z-index: 1; + } +#instructions p + { + background-color: #fff; + padding: 10px; + font-size: 14px; + width: 430px; + } +#gallery-link + { + background-color: #fff; + position: absolute; + top: 10px; + right: 10px; + padding: 10px; + z-index: 10; + } +.error + { + color: red; + font-size: 20px; + } +a + { + color: #b4d; + font-weight: bold; + } +label + { + display: inline-block; + width: 190px; + padding-right: 10px; + text-align: right; + } +input[type=text] + { + width: 100px; + } +#img-url,#output-url + { + width: 200px; + } +#img-fuzz,#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate + { + width: 50px; + text-align: right; + } +button + { + padding: 2px 5px; + font-size: 16px; + } +#result img + { + max-width: 400px; + max-height: 400px; + } +#output-cmd + { + font-size: 12px; + white-space: pre; + } +.shim + { + height: 10px; + clear: both; + } +#output-url + { + width: 320px; + } +</style> +<body> +<section id="controls"> + <label>IMAGE URL</label> + <input type="text" id="img-url" /> + <br/> + + <div class="shim"></div> + + <label>make transparent?</label> + <input type="checkbox" id="img-transparent" value="1" checked="true" /> + <br/> + + <label>remove color</label> + <input type="text" id="img-subtract" value="white" /> + <br/> + + <label>transparency fuzz</label> + <input type="text" id="img-fuzz" value="5" />% + <br/> + + <div class="shim"></div> + + <label>resize width</label> + <input type="text" id="img-width" /><small>px</small> + <br/> + + <label>resize height</label> + <input type="text" id="img-height" /><small>px</small> + <br/> + + <div class="shim"></div> + + <label>recolor white</label> + <input type="text" id="img-white" value="white" /> + <br/> + + <label>recolor black</label> + <input type="text" id="img-black" value="black" /> + <br/> + + <div class="shim"></div> + + <label>hue <small>(0-200)</small></label> + <input type="text" id="img-hue" value="" /> + <br/> + + <label>saturation <small>(0-200)</small></label> + <input type="text" id="img-saturation" value="" /> + <br/> + + <label>brightness <small>(0-200)</small></label> + <input type="text" id="img-brightness" value="" /> + <br/> + +<!-- + <label>contrast <small>(0-200)</small></label> + <input type="text" id="img-contrast" value="" /> + <br/> +--> + + <div class="shim"></div> + + <label>flip horizontally?</label> + <input type="checkbox" id="img-flop" value="1" /> + <br/> + + <label>flip vertically?</label> + <input type="checkbox" id="img-flip" value="1" /> + <br/> + + <label>rotate <small>(0-360)</small></label> + <input type="text" id="img-rotate" value="" />° + <br/> + + <div class="shim"></div> + +<!-- + <label>output format</label> + <select id="img-format"> + <option selected="selected">gif</option> + <option>jpg</option> + <option>png</option> + </select> + <div class="shim"></div> +--> + + <label> </label> + <button id="img-generate">GENERATE</button> + +</section> + +<section id="result"> + → <input type="text" id="output-url"/><br/> + <span id="output-cmd"></span><br/> + + <img id="output-img" /> +</section> + +<section id="instructions"> + <p> + This page provides a basic interface to the command-line image utility <a href="http://www.imagemagick.org/Usage/">IMAGEMAGICK.</a> + Paste a link into the first box, then use the other settings to colorize, distort, and add transparency. + </p> + <div class="shim"></div> + <p> + See what people have made → <a href="/im/gallery/">Image Gallery</a> + </p> +</section> + +</body> +<script type="text/javascript" src="/js/jquery.js"></script> +<script type="text/javascript"> +var Main = + { + API_HEADER: "#@im", + enter: function (e) + { + if (e.keyCode === 13) + Main.go() + }, + go: function () + { + $("#output-cmd").html('generating...').show() + $("#result").show() + var data = + { + url: $("#img-url").val(), + transparent: $('#img-transparent:checked').val() !== undefined ? "true" : "false", + flip: $('#img-flip:checked').val() !== undefined ? "true" : "false", + flop: $('#img-flop:checked').val() !== undefined ? "true" : "false", + rotate: $("#img-rotate").val(), + subtract: $("#img-subtract").val(), + fuzz: $("#img-fuzz").val(), + width: $("#img-width").val(), + height: $("#img-height").val(), + black: $("#img-black").val(), + white: $("#img-white").val(), + brightness: $("#img-brightness").val(), + saturation: $("#img-saturation").val(), + hue: $("#img-hue").val(), + contrast: $("#img-contrast").val(), + } + $.post("/cgi-bin/im/pepperimagemaker", data, Main.callback) + }, + error: function (s) + { + $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show() + $("#output-url").hide() + $("#output-img").hide() + }, + callback: function (raw) + { + lines = raw.split("\n") + if (lines[0] !== Main.API_HEADER) + return Main.error("problem loading API") + if (lines[1].indexOf("ERROR\t") === 0) + return Main.error(lines[1].split("\t")[1]) + + // $("#output-cmd").html(lines[1]+"<br/>"+lines[2]) + $("#output-cmd").hide() + $("#output-url").val(lines[3]) + $("#output-img").hide().attr("src", lines[3]).fadeIn(700) + }, + init: function () + { + $("#img-generate").bind("click", Main.go) + $("section input[type=text]").bind("keydown", Main.enter) + }, + } +Main.init() +</script> +</html> + |