diff options
Diffstat (limited to 'share/frontend/imgradient/index.html')
| -rwxr-xr-x | share/frontend/imgradient/index.html | 541 |
1 files changed, 541 insertions, 0 deletions
diff --git a/share/frontend/imgradient/index.html b/share/frontend/imgradient/index.html new file mode 100755 index 0000000..dd4c8f4 --- /dev/null +++ b/share/frontend/imgradient/index.html @@ -0,0 +1,541 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<!-- + __ __ __ __ __ __ __ +/_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ /_/\/\ +\_\ / \_\ / \_\ / \_\ / \_\ / \_\ / \_\ / +/_/ \ /_/ \ /_/ \ /_/ \ /_/ \ /_/ \ /_/ \ +\_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ \_\/\ \ + \_\/ \_\/ \_\/ \_\/ \_\/ \_\/ \_\/ +--> + +<html> +<head> +<title>GRADIENT PHOTOBLASTER</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta property="og:title" content="GRADIENT PHOTOBLASTER"/> +<meta property="og:type" content="website"/> +<meta name=Author content="Pepper .... with help from Jules Welter/LaPlace"/> +<meta property="og:url" content="http://asdf.us/imgradient/"/> +<meta property="og:image" content="http://asdf.us/g/experiment/whitegreencrazy.jpg" /> +<meta property="og:site_name" content="asdf.us"/> +<meta property="og:description" content="choose colors and options, let it flow out of you."/> +<meta property="fb:admins" content="100001923956223,1709246"/> +<link href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> +<link rel="stylesheet" type="text/css" href="/im/colors/css/jquery.fancybox.css?v=2.1.5" media="screen" /> +<style type="text/css"> +* + { + padding: 0; + margin: 0; + font-family: times; + } +body + { + background-color: #e6e0e0; + color: #696969; + overflow-x:hidden; + } +h1 + { + font-size: 40px; + } +#brightness-slider,#hue-slider,#saturation-slider,#blur-slider + { + margin-top:10px; + margin-bottom:10px; + background-color:#B3B3B3; + } +#stripenumber,#stripeintensity,#percentbeveled + { + height:10px; + width :25px; + font-size:9; + } +#controls,#result + { + padding: 10px; + width: 460px; + } +#controls + { + display:block; + font-size: 14px; + top: 10px; left: 10px; + z-index: 5; + background-color: #fff; + -moz-box-shadow: 0px 0px 9px 3px mediumseagreen; + -webkit-box-shadow: 0px 0px 9px 3px mediumseagreen; + box-shadow: 0px 0px 9px 3px mediumseagreen; + border: 60px outset #777; + } +#result + { + background-color: #d6d0d0; + top: 10px; left: 580px; + z-index: 5; + display: none; + position: fixed; + } +#instructions + { + position: absolute; + bottom: 10px; + left: 10px; + line-height: 18px; + z-index: 1; + } +p + { + background-color: #fff; + padding: 10px; + font-size: 14px; + width: 430px; + display: block; + } +#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: 300px; + padding-right: 10px; + text-align: center; + } +input[type=text] + { + width: 50px; + } +#img-url,#output-url,#img-background + { + width: 200px; + } +#img-width,#img-height,#img-brightness,#img-saturation,#img-contrast,#img-hue,#img-rotate,#img-blur,#img-tilt + { + width: 50px; + text-align: right; + } +button + { + padding: 2px 5px; + font-size: 16px; + width:200px; + float:right; + font-weight:bold; + color:#222222; + } +#result img + { + max-width: 400px; + max-height: 400px; + } +#output-cmd + { + font-size: 12px; + white-space: pre; + } +.shim + { + height: 10px; + clear: both; + display: block; + } +#output-url + { + width: 320px; + } +#likebutton + { + position: fixed; + bottom: 10px; + right: 10px; + width: 350px; + background-color: #fff; + padding: 10px; + color: #ddd; + font-family: times; + text-transform: uppercase; + } +.arrow + { + float:right; + white-space:inherit; + display:inline; + } + +</style> +<body> +<div id="error"></div> +<div id="controls"> +<form id="reset" onsubmit="return false"> +<h1> + GRADIENT GENERATOR FOR PHOTOBLASTER + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115918_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115933_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115941_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115946_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115946_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115946_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115946_pepper.gif"/> + <img src="http://i.asdf.us/im/4e/angreekcolumnshowcaselg_1315115946_pepper.gif"/> +</h1> + + <span class="shim"></span> + + + <label><span style="font-weight:bold; color:black;">CHOOSE A GRADIENT TYPE<span class="arrow">→</span></span></label> + <select id="gradient-type"> + <option selected="selected" value="gradient">STRAIGHT FADE</option> + <option value="plasma">PLASMA</option> + <!-- <option value="-function sinusoid 4,-90 gradient:">bands</option>--> + <option value="canvas">JUST A FLAT COLOR</option> + <option value="radial">RADIAL GRADIENT</option> + <option value="colorspace">GRAYSCALE PLASMA</option> + <option value="plasmawash">PLASMA WASH</option> + <option value="gradientwash">GRADIENT WASH</option> + <option value="mirrored">MIRRORED PLASMA</option> + <option value="noise">RANDOM NOISE</option> + </select> + + <span class="shim"></span> + + <label><span style="font-weight:bold">ADJUST THE WIDTH</span><span class="arrow">→</span></label> + <input type="text" id="img-width" value="400" /><small>px</small> + <br/> + + <span class="shim"></span> + + <label><span style="font-weight:bold">ADJUST THE HEIGHT</span><span class="arrow">→</span></label> + <input type="text" id="img-height" value="400" /><small>px</small> + <br/> + + <span class="shim"></span> + + <label>CHOOSE SOME COLORS<span class="arrow">→</span></label> + <span class="shim"></span> + + <label><span style="font-weight:bold; color:black;">COLOR 1</span><span class="arrow">→</span></label> + <input type="text" id="img-color1" value="white" class="color1" /> <a href="http://asdf.us/im/colors" target="_blank" class="color1">color list</a> + <br/> + + <span class="shim"></span> + + <label><span style="font-weight:bold; color:black;">COLOR 2</span><span class="arrow">→</span></label> + <input type="text" id="img-color2" value="black" class="color2"/> <a href="http://asdf.us/im/colors" target="_blank" class="color2">color list</a> + <br/> + + <span class="shim"></span> + + <span style="font-size:11px"> + <label>BANDS(also called stripes)?<span class="arrow">→</span></label> + <input type="checkbox" id="stripes" value="1" /> + <small>if yes...</small><label>NUMBER:</label><input value="" type="text" id="stripenumber"></input><small>0-400</small><label>INTENSITY:</label><input value="" type="text" id="stripeintensity"></input><small>0-2000</small> + </span> + + <span class="shim"></span> + <span class="shim"></span> + + <label>BLURRINESS <small>(0-20)</small><span class="arrow">→</span></label> + <input type="text" id="img-blur" value="" /> + <br/> + + <div class="slider" id="blur-slider"></div> + + <label>HUE <small>(0-200)</small><span class="arrow">→</span></label> + <input type="text" id="img-hue" value="" /> + <br/> + + <div class="slider" id="hue-slider"></div> + + <label>SATURATION <small>(0-200)</small><span class="arrow">→</span></label> + <input type="text" id="img-saturation" value="" /> + <br/> + + <div class="slider" id="saturation-slider"></div> + + <label>BRIGHTNESS <small>(0-200)</small><span class="arrow">→</span></label> + <input type="text" id="img-brightness" value="" /> + <br/> + + <div class="slider" id="brightness-slider"></div> + + <span class="shim"></span> + + + <label><span style="font-size:11px">CHOOSE A HALFTONE FILTER</span><span class="arrow">→</span></label> + <select id="halftone-type"> + <option selected="selected" value="">None</option> + <option value="checkeredfade">checkered-fade</option> + <option value="etchedtransition">etched-transition</option> + <option value="bendaydots">benday dots</option> + <option value="smallerdots1">smaller dots 1</option> + <option value="smallerdots2">smaller dots 2</option> + <option value="flatstripes">flat stripes</option> + </select> + + + <span class="shim"></span> + + <label><span style="font-size:11px">ADD A BEVELED BORDER</span><span class="arrow">→</span></label> + + <select id="bevel-type"> + <option selected="selected" value="">None</option> + <option value="flatout">flat out</option> + <option value="flatinner">flat inner</option> + <option value="evenlyframed">evely framed</option> + <option value="biginner">big inner</option> + <option value="bigouter">big outer</option> + <option value="dramaticflatout">dramatic flat out</option> + <option value="dramaticflatinner">dramatic flat inner</option> + </select> + + <span style="font-size:11px"><label>PERCENT BEVELED?</label></span> <input val="" type="text" id="percentbeveled"><small>%</small> + + + <span class="shim"></span> + <span class="shim"></span> + <label>FLIP HORIZONTALLY? + <span class="arrow">→</span></label> + <input type="checkbox" id="img-flop" value="1" /> + <br/> + + <label>FLIP VERTICALLY?<span class="arrow">→</span></label> + <input type="checkbox" id="img-flip" value="1" /> + <br/> + <label>TILT<small>(0-360)</small><span class="arrow">→</span></label> + <input type="text" id="img-tilt" value="" />° + <br/> + <span class="shim"></span> + + <label>ROTATE THE CANVAS<small>(0-360)</small><span class="arrow">→</span></label> + <input type="text" id="img-rotate" value="" />° + <br/> + + <span class="shim"></span> + + <span class="shim"></span> + + <label>output format:</label> + <select id="img-format"> + <option selected="selected">png</option> + <option>jpg</option> + <option>gif</option> + </select> + + <span class="shim"></span> + + <label>PUT YOUR NAME HERE >>></label> + <input type="text" id="img-name" value="" /> + <br/> + + <span class="shim"></span> + + <label> </label> + <button id="img-generate">GENERATE</button> + + <span class="shim"></span> + <br> + VIEW AND ARRANGE THE PHOTOBLASTS → <a href="/im/gallery/" target="_blank">Image Gallery</a><br/> + <span class="shim"></span> + OPEN THE PHOTOBLASTER EDITOR → <a href="/im" target="_blank">PHOTOBLASTER</a> + <span class="shim"></span> + TOP PHOTOBLASTS GO TO THE TUMBLR → <a href="http://photoblaster.tumblr.com/">Photoblaster Tumblr</a> + </p> + +</div> + +<div id="result"> + → <input type="text" id="output-url"/><br/> + <span id="output-cmd"></span><br/> + + <img id="output-img" /> +</div> +</form> +</div> + +<div id="likebutton"> +<div id="fb-root" style="background-color: transparent;"></div><script src="http://connect.facebook.net/en_US/all.js#appId=236917449658413&xfbml=1"></script><fb:like href="http://asdf.us/im/" send="false" width="347" show_faces="true" colorscheme="light" font="" style="background-color: transparent;"></fb:like> +</div> + +<script type="text/javascript" src="/js/jquery.js"></script> +<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script> +<script type="text/javascript" src="/im/colors/js/jquery.remember-state.js"></script> +<script type="text/javascript" src="/im/colors/js/jquery.fancybox.js?v=2.1.5"></script> +<script type="text/javascript" src="/js/colors_iframe.js"></script> +<script type="text/javascript"> + + $(function() { + $( "#blur-slider" ).slider({ + value:0, + min: 0, + max: 20, + step: 1, + slide: function( event, ui ) { + $( "#img-blur" ).val(ui.value); + } + }); + $( "#img-blur" ).val( $( "#blur-slider" ).slider( "value" ) ); + + $( "#brightness-slider" ).slider({ + value:100, + min: 0, + max: 200, + step: 1, + slide: function( event, ui ) { + $( "#img-brightness" ).val(ui.value); + } + }); + $( "#img-brightness" ).val( $( "#brightness-slider" ).slider( "value" ) ); + + $( "#hue-slider" ).slider({ + value:100, + min: 0, + max: 200, + step: 1, + slide: function( event, ui ) { + $( "#img-hue" ).val(ui.value); + } + }); + $( "#img-hue" ).val($( "#hue-slider" ).slider( "value" ) ); + + $( "#saturation-slider" ).slider({ + value:100, + min: 0, + max: 200, + step: 1, + slide: function( event, ui ) { + $( "#img-saturation" ).val(ui.value); + } + }); + $( "#img-saturation" ).val($( "#saturation-slider" ).slider( "value" ) ); + }); + +var Main = + { + API_HEADER: "#@imgradient", + enter: function (e) + { +// console.log("calling enter") + if (e.keyCode === 13){ + Main.go() + } + }, + go: function () + { + $("#output-cmd").html('generating...').show() + $("#result").show() + var data = + { + flip: $('#img-flip:checked').val() !== undefined ? "true" : "false", + flop: $('#img-flop:checked').val() !== undefined ? "true" : "false", + tilt: $('#img-tilt').val(), + rotate: $("#img-rotate").val(), + subtract: $("#img-subtract").val(), + width: $("#img-width").val(), + height: $("#img-height").val(), + color2: $("#img-color2").val(), + color1: $("#img-color1").val(), + brightness: $("#img-brightness").val(), + saturation: $("#img-saturation").val(), + blurriness: $("#img-blur").val(), + hue: $("#img-hue").val(), + contrast: $("#img-contrast").val(), + gradienttype: $('#gradient-type :selected').val(), + bevel: $('#bevel-type :selected').val(), + percentbeveled: $('#percentbeveled').val(), + halftone: $('#halftone-type :selected').val(), + stripes: $('#stripes:checked').val() !== undefined ? "true" : "false", + stripenumber: $('#stripenumber').val(), + stripeintensity: $('#stripeintensity').val(), + format: $('#img-format :selected').text(), + name: $("#img-name").val(), + } + if (data.name.length > 0){ + document.cookie = "imname="+data.name+";path=/;domain=.asdf.us;max-age=1086400" + } + $.post("/im/api/imgradient", data, Main.callback) + $("#controls").css('margin',"") + }, + error: function (s) + { + $("#output-cmd").html("<span class='error'>ERROR: " + s + "</span>").show() + $("#output-url").hide() + $("#output-img").hide() + }, + callback: function (data) + { + data = JSON.parse(data) + if (data.error){ + return Main.error(data.error) + } + $("#output-cmd").html("size: "+Main.filesize(data.size)+"<br/>"+data.height + " x " + data.width) + $("#output-url").val(data.url) + $("#output-img").hide().attr("src", data.url).fadeIn(700) + }, + filesize: function (size) + { + if (size < 1024) + return size + " bytes" + if (size < 1024 * 1024) + return Math.floor (size/1024) + " KB" + else + return Math.floor (size/(1024*1024)) + " MB" + }, + cookie: function () + { + if (document.cookie) + { + var cookies = document.cookie.split(";") + for (i in cookies) + { + var cookie = cookies[i].split("=") + if (cookie[0].indexOf("imname") !== -1) + { + if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length) + { + return cookie[1] + } + } + } + } + return "" + }, + init: function () + { + var name = Main.cookie () + $("#img-name").val(name) + }, +} + +$(document).ready(function(){ + Main.init () + $('form').submit(function() { + return false; + }); + $(document).keydown(Main.enter) + $("#img-generate").click(Main.go) + document.getElementById("reset").reset() +}) +</script> +<!--<script type="text/javascript" src="http://asdf.us/js/pbembed.js"></script>--> +</body> +</html> + |