ZXpaintyONE <style type="text/css"> #left_column { float: left; } #canvas_outer { border: 1px solid #888; } #canvas { line-height: 1px; border-spacing: 0; cursor: crosshair; } #palette_panel { margin-top: 8px; border: 1px solid #888; width: 512px; } #palette_panel ul#palette { float: left; margin: 8px 0; list-style-type: none; padding: 0; } #palette_panel ul#palette li { float: left; width: 32px; height: 32px; border: 1px solid #888; margin-left: 8px; } #palette_panel ul#mouse_colours { float: right; list-style-type: none; padding: 0; } #palette_panel ul#mouse_colours li { float: left; margin-right: 8px; } #palette_panel ul#mouse_colours li span { padding: 0 8px; margin-left: 4px; border: 1px solid #888; } .swatch_0 { background-color: white; } .swatch_1 { background-image: url(halftone.png); } .swatch_2 { background-color: black; } #controls { float: right; margin-left: 3px; } .tile { padding: 0; margin: 0; width: 8px; height: 8px; background-image: url(shades_large_transparent.png); background-repeat: no-repeat; background-position: left; } .tile.odd { background-color: black; } .tile.even { background-color: white; } #canvas.preview .tile { width: 4px; height: 4px; background-image: url(shades.png); } html > img { display: none; /* hide autoscroll icon */ } .panel { border: 1px dotted grey; margin: 3px; padding: 3px; } .panel h4 { margin-top: 0; } #help { position: absolute; display: none; top: 20px; left: 100px; width: 650px; height: 384px; border: 2px solid grey; background-color: #eeeeee; padding: 0.5em; } </style> <script type="text/javascript"> /* <![CDATA[ */ var htmlCanvas; var tiles = []; var pixels = []; var penDown = false; var penColour; var isEdited = false; var mouseButtonColours = { 1:2, 2:1, 3:0 } var seqToCode = { '0000' : '00', '2000' : '01', '0200' : '02', '2200' : '03', '0020' : '04', '2020' : '05', '0220' : '06', '2220' : '07', '1111' : '08', '0011' : '09', '1100' : '0A', '2222' : '80', '0222' : '81', '2022' : '82', '0022' : '83', '2202' : '84', '0202' : '85', '2002' : '86', '0002' : '87', '2211' : '89', '1122' : '8A' } var codeToSeq = { '00' : [0,0,0,0], '01' : [2,0,0,0], '02' : [0,2,0,0], '03' : [2,2,0,0], '04' : [0,0,2,0], '05' : [2,0,2,0], '06' : [0,2,2,0], '07' : [2,2,2,0], '08' : [1,1,1,1], '09' : [0,0,1,1], '0A' : [1,1,0,0], '80' : [2,2,2,2], '81' : [0,2,2,2], '82' : [2,0,2,2], '83' : [0,0,2,2], '84' : [2,2,0,2], '85' : [0,2,0,2], '86' : [2,0,0,2], '87' : [0,0,0,2], '89' : [2,2,1,1], '8A' : [1,1,2,2], } function go() { htmlCanvas = document.getElementById('canvas'); for (var y = 0; y < 48; y++) { var tr = document.createElement('TR'); tiles[y] = []; pixels[y] = []; for (var x = 0; x < 64; x++) { var tile = document.createElement('TD'); tile.className = 'tile ' + ((x ^ y) & 2 ? 'odd' : 'even'); tile.yPos = y; tile.xPos = x; tiles[y][x] = tile; pixels[y][x] = 0; tile.onmousedown = tileOnMousedown; tile.onmousemove = tileOnMousemove; tr.appendChild(tile); } htmlCanvas.appendChild(tr); } document.onmouseup = function() { penDown = false; } htmlCanvas.oncontextmenu = function() { return false; } if (window.location.href.match(/^http:/)) { document.getElementById('overlay_available').style.display = 'none'; } else { document.getElementById('overlay_unavailable').style.display = 'none'; } for (var button = 1; button <= 3; button++) { document.getElementById('mouse_colour_'+button).className = 'swatch_'+mouseButtonColours[button]; } for (var colour = 0; colour < 3; colour++) { document.getElementById('palette_'+colour).oncontextmenu = function() { return false; } applyPaletteMousedown(colour); } } function applyPaletteMousedown(colour) { document.getElementById('palette_'+colour).onmousedown = function(e) { if (!e) var e = window.event; mouseButtonColours[e.which] = colour; document.getElementById('mouse_colour_'+e.which).className = 'swatch_'+colour; } } function tileOnMousedown(e) { if (!e) var e = window.event; penDown = true; penColour = mouseButtonColours[e.which]; setTile(this); e.preventDefault(); return false; } function tileOnMousemove() { if (penDown) setTile(this); } function setTile(tile) { var charX = tile.xPos & -2; var charY = tile.yPos & -2; var charHasGrey = (pixels[charY][charX] == 1 || pixels[charY+1][charX] == 1) /* only need to check one pixel per row, as per valid characters */ if (charHasGrey || penColour == 1) { pixels[tile.yPos][charX] = pixels[tile.yPos][charX + 1] = penColour; tiles[tile.yPos][charX].style.backgroundPosition = tiles[tile.yPos][charX + 1].style.backgroundPosition = backgroundForPenColour(penColour); pixels[tile.yPos^1][charX + 1] = pixels[tile.yPos^1][charX]; tiles[tile.yPos^1][charX + 1].style.backgroundPosition = backgroundForPenColour(pixels[tile.yPos^1][charX]); } else { pixels[tile.yPos][tile.xPos] = penColour; tile.style.backgroundPosition = backgroundForPenColour(penColour) } isEdited = true; } function backgroundForPenColour(penColour) { return (penColour == 0) ? 'left' : (penColour == 1) ? 'center' : 'right'; } function saveToHex() { document.getElementById('hex').value = dataAsHex(); isEdited = false; } function dataAsHex() { var savedata = ''; for (var y = 0; y < 48; y += 2) { for (var x = 0; x < 64; x += 2) { seq = '' + pixels[y][x] + pixels[y][x+1] + pixels[y+1][x] + pixels[y+1][x+1] if (seqToCode[seq] == null) { alert('Save error: invalid block graphic at coordinates ' + (x/2) + ',' + (y/2)); return; } else { savedata += seqToCode[seq]; } } } return savedata; } function clearImage() { if (isEdited) { if (!confirm("You have unsaved changes. Do you want to continue and discard these changes?")) return; } for (var y = 0; y < 48; y++) { for (var x = 0; x < 64; x++) { pixels[y][x] = 0; tiles[y][x].style.backgroundPosition = 'left'; } } isEdited = false; } function loadFromHex() { if (isEdited) { if (!confirm("You have unsaved changes. Do you want to continue and discard these changes?")) return; } var bytes = (document.getElementById('hex').value.match(/[0-9A-F][0-9A-F]/g)) if (bytes == null || bytes.length < 768) { alert('Load error: Not enough data to load'); return; } for (var y = 0; y < 48; y += 2) { for (var x = 0; x < 64; x += 2) { var byte = bytes.shift(); if (codeToSeq[byte] == null) { alert('Load error: unknown character code ' + byte); return; } else { var seq = codeToSeq[byte]; pixels[y][x] = seq[0]; pixels[y][x+1] = seq[1]; pixels[y+1][x] = seq[2]; pixels[y+1][x+1] = seq[3]; tiles[y][x].style.backgroundPosition = backgroundForPenColour(seq[0]); tiles[y][x+1].style.backgroundPosition = backgroundForPenColour(seq[1]); tiles[y+1][x].style.backgroundPosition = backgroundForPenColour(seq[2]); tiles[y+1][x+1].style.backgroundPosition = backgroundForPenColour(seq[3]); } } } document.getElementById('hex').value = ''; isEdited = false; } function addOverlayImage() { var filename = document.getElementById('bg_image_filename').value; var file_url; if (filename.match(/^\w\:\\/)) { /* Windows path - replace backslashes with forward slashes */ file_url = 'file://' + filename.replace(/\\/g, '/'); } else { file_url = 'file://' + filename; } document.getElementById('canvas_outer').style.backgroundImage = 'url(' + file_url + ')'; document.getElementById('canvas').style.opacity = 1 - parseFloat(document.getElementById('overlay_opacity').value); } function removeOverlayImage() { document.getElementById('canvas_outer').style.backgroundImage = 'none'; document.getElementById('canvas').style.opacity = 1; } function setOverlay() { if (document.getElementById('overlay_enabled').checked && !document.getElementById('overlay_enabled').disabled) { addOverlayImage(); } else { removeOverlayImage(); } } function setPreviewState() { if (document.getElementById('preview').checked) { document.getElementById('overlay_enabled').disabled = true; setOverlay(); document.getElementById('canvas').className = 'preview'; } else { document.getElementById('canvas').className = 'none'; document.getElementById('overlay_enabled').disabled = false; setOverlay(); } } function showHelp() { document.getElementById('help').style.display = 'block'; } function exportImage() { var savedata = dataAsHex(); var section1 = savedata.substr(0, 512).replace(/(..)/g, '%$1'); var section2 = savedata.substr(512, 512).replace(/(..)/g, '%$1'); var section3 = savedata.substr(1024, 384).replace(/(..)/g, '%$1'); var section4 = savedata.substr(1408, 128).replace(/(..)/g, '%$1'); window.open('data:application/octet-stream,%00%0a%00%82%44%83%44%9b%47%00%00%9c%47%9d%47%00%00%9e%47%9e%47%00%5d%40%00%02%00%00%ff%ff%0f%37%82%44%00%00%00%00%00%6b%0c%00%00%7d%fd%00%00%bc%21%18%40%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%0a%02%00%e5%76%00%14%02%00%fb%76%00%1e%02%00%fd%76%00%28%05%01%f5%0b' + section1 + '%0b%19%76%00%32%05%01%f5%0b' + section2 + '%0b%19%76%00%3c%c5%00%f5%0b' + section3 + '%0b%19%76%00%46%47%00%f1%26%0d%14%0b' + section4 + '%0b%76%00%50%2f%00%f1%38%14%1f%7e%82%40%00%00%00%15%d3%1d%22%20%1c%1c%7e%8f%00%20%00%00%15%1e%21%22%7e%89%00%00%00%00%17%d3%1d%22%20%1c%1d%7e%8f%00%22%00%00%76%00%5a%31%00%f1%29%14%23%1e%23%7e%8a%35%c0%00%00%15%d3%1d%22%1f%25%22%7e%8f%00%18%00%00%15%1e%21%22%7e%89%00%00%00%00%17%d3%1d%22%1f%25%23%7e%8f%00%1a%00%00%76%00%64%10%00%fa%c6%26%0d%dd%22%20%7e%87%00%00%00%00%de%e3%76%00%6e%14%00%eb%2b%14%1c%7e%00%00%00%00%00%df%22%1f%7e%86%7c%00%00%00%76%00%78%19%00%f4%29%15%2b%15%10%2b%12%1f%1d%7e%85%78%00%00%00%11%1a%d3%10%38%15%2b%11%76%00%82%03%00%f3%2b%76%00%8c%02%00%e4%76%00%96%0b%00%f2%20%2a%20%7e%90%1c%40%00%00%76%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%76%80%76','_blank','height=300,width=400'); } /* ]]> */ </script> </head> <body onload="go()"> <div id="left_column"> <div id="canvas_outer"> <table id="canvas"> </table> </div> <div id="palette_panel"> <ul id="palette"> <li id="palette_2" class="swatch_2"></li> <li id="palette_1" class="swatch_1"></li> <li id="palette_0" class="swatch_0"></li> </ul> <ul id="mouse_colours"> <li>left: <span id="mouse_colour_1"></span></li> <li>middle: <span id="mouse_colour_2"></span></li> <li>right: <span id="mouse_colour_3"></span></li> </ul> <br style="clear: both;" /> </div> </div> <div id="controls"> <div class="panel"> <input type="checkbox" id="preview" onclick="setTimeout(setPreviewState, 10)" onchange="setTimeout(setPreviewState, 10)" /> <label for="preview">Preview at 1x1</label> </div> <div class="panel"> <h4>load/save</h4> <input type="button" value="Save" onclick="saveToHex()" /> <input type="button" value="Load" onclick="loadFromHex()" /> <input type="button" value="Export" onclick="exportImage()" /><br /> <textarea id="hex" name="hex" rows="8"></textarea><br /> <input type="button" value="New" onclick="clearImage()" /> </div> <div class="panel"> <h4>overlay</h4> <div id="overlay_available"> <input type="checkbox" id="overlay_enabled" onclick="setTimeout(setOverlay, 10)" onchange="setTimeout(setOverlay, 10)" /> <label for="overlay_enabled">Enable overlay</label><br /> <label for="overlay_opacity">Opacity</label><input type="text" id="overlay_opacity" value="0.3" /><br /> <label for="bg_image_filename">Image file</label><br /> <input type="file" id="bg_image_filename" /><br /> <input type="button" value="Load overlay" onclick="setOverlay()" /> </div> <div id="overlay_unavailable"> <p>This feature is unavailable<br />in the online version.<br /><a href="http://matt.west.co.tt/apps/zxpaintyone/zxpaintyone_v2.zip">Download ZXpaintyONE</a> to get it!</p> </div> </div> <div class="panel"> <a href="javascript:void(showHelp())">Help</a> </div> </div> <div id="help"> <h1>ZXpaintyONE</h1> <h2>by Gasman</h2> <ul> <li>This application is best run in Mozilla Firefox. If it runs in anything else, that's a bonus. You may need to set your browser preferences to allow the right-click menu to be disabled: under Preferences, go to Content, then 'Advanced...' (next to 'Enable Javascript'), and ensure that 'Disable or replace context menus' is ticked.</li> <li>Use a 3-button mouse to draw. Left button = black, middle button = grey, right button = white, or left/middle/right-click on the palette buttons to change.</li> <li>To save an image, click 'Save' - this will fill up the text box with some hex data. Copy and paste this to somewhere safe. To load an image, paste some hex data into the text box and click 'Load'.</li> <li>To use the Overlay feature, prepare a GIF/JPG/PNG image sized 512x384. Select this file in the 'Image file' selector, and tick the 'Enable overlay' box.</li> <li>Opacity should be a number between 0 and 1, to determine how much the overlay shows through the graphics layer. After setting the opacity or selecting another file, click 'Load overlay'.</li> <li>'Export' allows you to save this picture as a program to be loaded into a ZX81 emulator; when prompted to save a file, save it with the .P extension. (Thanks to Russell Marks for the full-screen display routine!)</li> <input type="button" onclick="document.getElementById('help').style.display = 'none'" value="OK" /> </ul> </div> </body> </html>