Add miniPaint as new frontend base
This commit is contained in:
motion
@@ -0,0 +1,76 @@
|
||||
<html>
|
||||
<body style="margin:0;">
|
||||
|
||||
<iframe id="myFrame" style="width:100%;height:100vh;border:0;" src="../" allow="camera"></iframe>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function (e) {
|
||||
draw_various();
|
||||
}, false);
|
||||
|
||||
async function draw_various() {
|
||||
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
||||
|
||||
//add layer
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = 50;
|
||||
canvas.height = 50;
|
||||
var ctx = canvas.getContext("2d");
|
||||
cross_X(ctx, 25, 25);
|
||||
var params = {
|
||||
type: 'image',
|
||||
data: canvas.toDataURL("image/png"),
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
};
|
||||
await Layers.insert(params);
|
||||
|
||||
//add new layer
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = 400;
|
||||
canvas.height = 400;
|
||||
var ctx = canvas.getContext("2d");
|
||||
cross_X(ctx, 200, 200, null, '#00cc00');
|
||||
var params = {
|
||||
type: 'image',
|
||||
data: canvas.toDataURL("image/png"),
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
};
|
||||
await Layers.insert(params);
|
||||
|
||||
//update last layer
|
||||
var canvas = Layers.convert_layer_to_canvas(null, true); //no trim
|
||||
var ctx = canvas.getContext("2d");
|
||||
cross_X(ctx, 300, 300, null, '#00cc00');
|
||||
Layers.update_layer_image(canvas);
|
||||
//also update layer
|
||||
var link = Layers.get_layer();
|
||||
link.x = parseInt(canvas.dataset.x);
|
||||
link.y = parseInt(canvas.dataset.y);
|
||||
link.width = canvas.width;
|
||||
link.height = canvas.height;
|
||||
}
|
||||
|
||||
function cross_X(ctx, x, y, size = 20, col = '#ff0000') {
|
||||
if(size == null)
|
||||
size = 20;
|
||||
x = parseFloat(x);
|
||||
y = parseFloat(y);
|
||||
size = parseInt(size);
|
||||
var lw = parseInt(5);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x - size, y - size);
|
||||
ctx.lineTo(x + size, y + size);
|
||||
ctx.lineWidth = lw;
|
||||
ctx.strokeStyle = col;
|
||||
ctx.stroke();
|
||||
ctx.moveTo(x + size, y - size);
|
||||
ctx.lineTo(x - size, y + size);
|
||||
ctx.lineWidth = lw;
|
||||
ctx.strokeStyle = col;
|
||||
ctx.stroke();
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
<html>
|
||||
<body style="margin:0;">
|
||||
|
||||
<iframe id="myFrame" style="width:100%;height:70vh;border:0;" src="../" allow="camera"></iframe>
|
||||
|
||||
<div style="height:20vh;margin:10px;">
|
||||
Click on image to edit.
|
||||
<br /><br />
|
||||
<button onclick="open_image()">Open image</button>
|
||||
<button onclick="update_image()">Update image</button>
|
||||
<button onclick="save_image()">Save image</button>
|
||||
OR
|
||||
<button onclick="open_json()">Open JSON</button>
|
||||
<button onclick="save_json()">Save JSON</button>
|
||||
<br /><br />
|
||||
|
||||
<img style="max-height:100%" id="testImage" alt="" src="../images/logo-colors.png" onclick="open_image(this)" />
|
||||
|
||||
<textarea rows="8" style="width:500px;" id="testJson"></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* will open image on minipaint
|
||||
*
|
||||
* @param {string|image} image image or image id
|
||||
*/
|
||||
function open_image(image){
|
||||
if(image == undefined)
|
||||
image = document.getElementById('testImage');
|
||||
if(typeof image == 'string'){
|
||||
image = document.getElementById(image);
|
||||
}
|
||||
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
||||
var name = image.src.replace(/^.*[\\\/]/, '');
|
||||
var new_layer = {
|
||||
name: name,
|
||||
type: 'image',
|
||||
data: image,
|
||||
width: image.naturalWidth || image.width,
|
||||
height: image.naturalHeight || image.height,
|
||||
width_original: image.naturalWidth || image.width,
|
||||
height_original: image.naturalHeight || image.height,
|
||||
};
|
||||
Layers.insert(new_layer);
|
||||
}
|
||||
|
||||
function open_json(){
|
||||
var miniPaint = document.getElementById('myFrame').contentWindow;
|
||||
var miniPaint_FileOpen = miniPaint.FileOpen;
|
||||
|
||||
window.fetch("../images/test-collection.json").then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(json) {
|
||||
miniPaint_FileOpen.load_json(json, false);
|
||||
}).catch(function(ex) {
|
||||
alert('Sorry, image could not be loaded.');
|
||||
});
|
||||
}
|
||||
|
||||
function save_image(){
|
||||
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
var tempCtx = tempCanvas.getContext("2d");
|
||||
var dim = Layers.get_dimensions();
|
||||
tempCanvas.width = dim.width;
|
||||
tempCanvas.height = dim.height;
|
||||
Layers.convert_layers_to_canvas(tempCtx);
|
||||
|
||||
if(is_edge_or_ie() == false){
|
||||
//update image using blob (faster)
|
||||
tempCanvas.toBlob(function (blob) {
|
||||
alert('Data length: ' + blob.size);
|
||||
console.log(blob);
|
||||
}, 'image/png');
|
||||
}
|
||||
else{
|
||||
//slow way for IE, Edge
|
||||
var data = tempCanvas.toDataURL();
|
||||
alert('Data length: ' + data.length);
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
|
||||
function save_json(){
|
||||
var miniPaint = document.getElementById('myFrame').contentWindow;
|
||||
var miniPaint_FileSave = miniPaint.FileSave;
|
||||
|
||||
var data_json = miniPaint_FileSave.export_as_json();
|
||||
|
||||
document.getElementById('testJson').value = data_json;
|
||||
}
|
||||
|
||||
function update_image(){
|
||||
var target = document.getElementById('testImage');
|
||||
|
||||
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
||||
var tempCanvas = document.createElement("canvas");
|
||||
var tempCtx = tempCanvas.getContext("2d");
|
||||
var dim = Layers.get_dimensions();
|
||||
tempCanvas.width = dim.width;
|
||||
tempCanvas.height = dim.height;
|
||||
Layers.convert_layers_to_canvas(tempCtx);
|
||||
|
||||
target.width = dim.width;
|
||||
target.height = dim.height;
|
||||
target.src = tempCanvas.toDataURL();
|
||||
}
|
||||
|
||||
/**
|
||||
* will auto load image on page load. Uncomment line below to make it work
|
||||
*/
|
||||
window.onload = function () {
|
||||
//open_image(document.getElementById('testImage')); //uncomment me
|
||||
};
|
||||
|
||||
//if IE 11 or Edge
|
||||
function is_edge_or_ie() {
|
||||
//ie11
|
||||
if( !(window.ActiveXObject) && "ActiveXObject" in window )
|
||||
return true;
|
||||
//edge
|
||||
if( navigator.userAgent.indexOf('Edge/') != -1 )
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,71 @@
|
||||
<html>
|
||||
<body style="margin:0;">
|
||||
|
||||
<iframe id="myFrame" style="width:100%;height:100vh;border:0;" src="../" allow="camera"></iframe>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function (e) {
|
||||
main();
|
||||
}, false);
|
||||
|
||||
async function main() {
|
||||
var Layers = document.getElementById('myFrame').contentWindow.Layers;
|
||||
var config = document.getElementById('myFrame').contentWindow.AppConfig;
|
||||
|
||||
var canvas_width = 800;
|
||||
var canvas_height = 600;
|
||||
|
||||
//set size
|
||||
Layers.Base_gui.set_size(canvas_width, canvas_height);
|
||||
|
||||
//add rectangle
|
||||
this.layer = {
|
||||
name: 'layer1',
|
||||
type: 'rectangle',
|
||||
params: {
|
||||
fill: true,
|
||||
square: false,
|
||||
border_size: 2,
|
||||
border: false,
|
||||
border_color: "#1b1bd8",
|
||||
fill_color: "#1b1bd8"
|
||||
},
|
||||
color: '#ff0000',
|
||||
render_function: ['rectangle', 'render'],
|
||||
x: canvas_width/2 - 25,
|
||||
y: canvas_height/2 - 25,
|
||||
width: 50,
|
||||
height: 50,
|
||||
};
|
||||
await Layers.insert(this.layer);
|
||||
|
||||
//zoom to 500%
|
||||
setTimeout(function () {
|
||||
Layers.Base_gui.GUI_preview.zoom_to_position(0, 0);
|
||||
Layers.Base_gui.GUI_preview.zoom(500);
|
||||
}, 100);
|
||||
|
||||
//do this after system changed zoom position
|
||||
setTimeout(function () {
|
||||
//move visible area to begin of rectangle
|
||||
Layers.Base_gui.GUI_preview.zoom_to_position(500, 500); //change zoom position
|
||||
}, 500);
|
||||
|
||||
//action after 1 s - for preview purpose
|
||||
setTimeout(function () {
|
||||
//move visible area so rect is in center
|
||||
|
||||
var visible_area = Layers.Base_gui.get_visible_area_size();
|
||||
|
||||
//center of rect
|
||||
var cx = canvas_width/2;
|
||||
var cy = canvas_height/2;
|
||||
|
||||
//calc needed coords
|
||||
var x = cx - visible_area.width / 2;
|
||||
var y = cy - visible_area.height / 2;
|
||||
|
||||
Layers.Base_gui.GUI_preview.zoom_to_position(x, y); //change zoom position
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user