mirror of
https://github.com/sehugg/8bitworkshop.git
synced 2024-12-27 14:29:39 +00:00
114 lines
6.5 KiB
HTML
114 lines
6.5 KiB
HTML
<html lang="en">
|
|
<!DOCTYPE html>
|
|
<head>
|
|
<title>8bitworkshop Pixel Editor</title>
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
overflow: hidden !important;
|
|
font-size: 11px;
|
|
}
|
|
.thumbdiv {
|
|
}
|
|
.fcontainer
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
.fitem
|
|
{
|
|
background-color: #f3f2ef;
|
|
border-radius: 3px;
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="css/ui.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="controls_top">
|
|
<span id="palette_group" class="palette_group">
|
|
</span>
|
|
<span style="float:right">
|
|
<button id="btn_cancel" type="submit" title="Cancel">Discard <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
|
|
<button id="btn_saveandclose" type="submit" title="Save and Close">Save and Close <span class="glyphicon glyphicon-save" aria-hidden="true"></span></button>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="notebook">
|
|
<div style="width:60%;height:100%;position:absolute;left:0">
|
|
<div id="maineditor" class="fcontainer">
|
|
</div>
|
|
</div>
|
|
<div style="width:40%;height:100%;position:absolute;right:0">
|
|
<div id="thumbnaildiv" class="fcontainer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="jquery/jquery-3.3.1.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
|
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="FileSaver.js/FileSaver.min.js"></script>
|
|
|
|
<script>
|
|
var exports = {};
|
|
function require(modname) {
|
|
if (modname == 'jquery') return $;
|
|
else if (modname.startsWith('.')) return exports;
|
|
else { console.log("Unknown require()", modname); return exports; }
|
|
}
|
|
</script>
|
|
|
|
<script src="gen/util.js"></script>
|
|
<script src="gen/pixed/pixeleditor.js"></script>
|
|
|
|
<script>
|
|
|
|
if (window.self === window.top) {
|
|
/*
|
|
var datastr = "{ 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00 }, { 0x7e,0x81,0x95,0xb1,0xb1,0x95,0x81,0x7e }, { 0x7e,0xff,0xeb,0xcf,0xcf,0xeb,0xff,0x7e }, { 0x0e,0x1f,0x3f,0x7e,0x3f,0x1f,0x0e,0x00 }, { 0x08,0x1c,0x3e,0x7f,0x3e,0x1c,0x08,0x00 }, { 0x38,0x3a,0x9f,0xff,0x9f,0x3a,0x38,0x00 }, { 0x10,0x38,0xbc,0xff,0xbc,0x38,0x10,0x00 }, { 0x00,0x00,0x18,0x3c,0x3c,0x18,0x00,0x00 }, { 0xff,0xff,0xe7,0xc3,0xc3,0xe7,0xff,0xff }, { 0x00,0x3c,0x66,0x42,0x42,0x66,0x3c,0x00 }";
|
|
var fmt = {w:8,h:8,bpp:1,count:8};
|
|
var palette = [0xff000000, 0xffffffff];
|
|
*/
|
|
var paldatastr = " 0x00, 0x03, 0x19, 0x50, 0x52, 0x07, 0x1f, 0x37, 0xe0, 0xa4, 0xfd, 0xff, 0x38, 0x70, 0x7f, 0xf8, ";
|
|
var fmt = {w:14,h:16,bpp:4,brev:1,count:128};
|
|
var datastr = "0x00,0x00,0xef,0xef,0xe0,0x00,0x00, 0x00,0xee,0xee,0xfe,0xee,0xe0,0x00, 0x0e,0xed,0xef,0xef,0xed,0xee,0x00, 0x0e,0xee,0xdd,0xdd,0xde,0xee,0x00, 0x0e,0xee,0xed,0xde,0xee,0xee,0x00, 0x00,0xee,0xee,0xde,0xee,0xe0,0x00, 0x00,0xee,0xee,0xde,0xee,0xe0,0x00, 0x00,0x00,0xed,0xdd,0xe0,0x00,0x0d, 0xdd,0xdd,0xee,0xee,0xed,0xdd,0xd0, 0x0d,0xee,0xee,0xee,0xee,0xee,0x00, 0x0e,0xe0,0xee,0xee,0xe0,0xee,0x00, 0x0e,0xe0,0xee,0xee,0xe0,0xee,0x00, 0x0e,0xe0,0xdd,0xdd,0xd0,0xde,0x00, 0x0d,0x00,0xee,0x0e,0xe0,0x0d,0x00, 0x00,0x00,0xed,0x0e,0xe0,0x00,0x00, 0x00,0x0d,0xdd,0x0d,0xdd,0x00,0x18,";
|
|
/*
|
|
var datastr = "$00,0xfe,0x82,0x82,0x82,0xfe,0xfe,0x00,0x00,0x00,0xfe,0xfe,0xc0,0x00,0x00,0x00,0x00,0xf2,0xf2,0x92,0x92,0x9e,0x9e,0x00,0x00,0xfe,0xfe,0x92,0x92,0x82,0x00,0x00,0x08,0xfe,0xfe,0x88,0x88,0xf8,0xf8,0x00,0x00,0x9e,0x9e,0x92,0x92,0xf2,0xf2,0x00,0x00,0x9e,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0xf0,0xf0,0x9e,0x9e,0x80,0x80,0x00,0x00,0xfe,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0xfe,0x92,0x92,0x92,0xf2,0xf0,0x00,0x00,0xfe,0xc8,0x88,0x88,0xfe,0xfe,0x00,0x00,0xee,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,0x00,0xfc,0x86,0x82,0x82,0xfe,0xfe,0x00,0x00,0x82,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x80,0x90,0x90,0x90,0xfe,0xfe,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xfe,0xc8,0x88,0x88,0xfe,0xfe,0x00,0x00,0xee,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,0x00,0xfc,0x86,0x82,0x82,0xfe,0xfe,0x00,0x00,0x82,0x92,0x92,0x92,0xfe,0xfe,0x00,0x80,0x90,0x90,0x90,0x90,0xfe,0xfe,0x00,0x00,0x9e,0x92,0x82,0x82,0xfe,0xfe,0x00,0xfe,0xfe,0x10,0x10,0x10,0xfe,0xfe,0x00,0x00,0x00,0xbe,0xbe,0x00,0x00,0x00,0x00,0xfc,0xfe,0x06,0x02,0x02,0x02,0x00,0x00,0x00,0x82,0x44,0x28,0x18,0xfe,0xfe,0x00,0x02,0x02,0x02,0x06,0xfe,0xfe,0x00,0x00,0xfe,0x40,0x20,0x18,0x20,0xfe,0xfe,0x00,0xfe,0x0c,0x08,0x10,0x20,0xfe,0xfe,0x00,0xfe,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,0x00,0xfe,0x82,0x82,0x82,0xfe,0xfe,0x00,0x00,0x00,0xfe,0xfe,0xc0,0x00,0x00,0x00,0x00,0xf2,0xf2,0x92,0x92,0x9e,0x9e,0x00,0x00,0xfe,0xfe,0x92,0x92,0x82,0x00,0x00,0x08,0xfe,0xfe,0x88,0x88,0xf8,0xf8,0x00,0x00,0x9e,0x9e,0x92,0x92,0xf2,0xf2,0x00,0x00,0x9e,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0xf0,0xf0,0x9e,0x9e,0x80,0x80,0x00,0x00,0xfe,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0xfe,0x92,0x92,0x92,0xf2,0xf0,0x00,0x00,0xfe,0xc8,0x88,0x88,0xfe,0xfe,0x00,0x00,0xee,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,0x00,0xfc,0x86,0x82,0x82,0xfe,0xfe,0x00,0x00,0x82,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x80,0x90,0x90,0x90,0xfe,0xfe,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xfe,0xc8,0x88,0x88,0xfe,0xfe,0x00,0x00,0xee,0x92,0x92,0x92,0xfe,0xfe,0x00,0x00,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,0x00,0xfc,0x86,0x82,0x82,0xfe,0xfe,0x00,0x00,0x82,0x92,0x92,0x92,0xfe,0xfe,0x00,0x80,0x90,0x90,0x90,0x90,0xfe,0xfe,0x00,0x00,0x9e,0x92,0x82,0x82,0xfe,0xfe,0x00,0xfe,0xfe,0x10,0x10,0x10,0xfe,0xfe,0x00,0x00,0x00,0xbe,0xbe,0x00,0x00,0x00,0x00,0xfc,0xfe,0x06,0x02,0x02,0x02,0x00,0x00,0x00,0x82,0x44,0x28,0x18,0xfe,0xfe,0x00,0x02,0x02,0x02,0x06,0xfe,0xfe,0x00,0x00,0xfe,0x40,0x20,0x18,0x20,0xfe,0xfe,0x00,0xfe,0x0c,0x08,0x10,0x20,0xfe,0xfe,0x00,0xfe,0x82,0x82,0x82,0x86,0xfe,0xfe,0x00,";
|
|
var fmt = {w:8,h:8,bpp:1,np:2,pofs:0x100,count:32,xform:"rotate(90deg) scaleX(-1)"};
|
|
var paldatastr = "0x00,0x30,0x4f,0xff,0x00,0xf0,0xc0,0x7f, 0x00,0xc0,0x04,0x1f,0x00,0xd0,0xd0,0x0f, 0x00,0xc0,0xc0,0x0f,0x00,0x04,0x04,0x0f, 0x00,0xff,0x0f,0xf0,0x00,0x7f,0x0f,0xdf,";
|
|
*/
|
|
pixelEditorReceiveMessage({data:{fmt:fmt,bytestr:datastr,palfmt:{pal:332,n:16},palstr:paldatastr}});
|
|
console.log(postToParentWindow({save:true}));
|
|
}
|
|
|
|
//
|
|
|
|
window.addEventListener("message", pixelEditorReceiveMessage, false);
|
|
window.addEventListener("resize", pixelEditorResize, false);
|
|
window.addEventListener("keypress", pixelEditorKeypress, false);
|
|
|
|
$("#btn_cancel").click(function(e) {
|
|
if (confirm("Sure you want to cancel and discard?")) {
|
|
postToParentWindow({close:true});
|
|
}
|
|
});
|
|
$("#btn_saveandclose").click(function(e) {
|
|
try {
|
|
postToParentWindow({close:true,save:true});
|
|
} catch (ex) {
|
|
alert("Could not convert to bytes: " + ex);
|
|
throw ex;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|