|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<script src="/static/js/FileSaver.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
{{ svg|safe }}
|
|
|
|
|
|
|
|
|
|
<div id="save-buttons">
|
|
|
|
|
<label for="text-checkbox"
|
|
|
|
|
title="display the remaining text and markers in the svg output in red">
|
|
|
|
|
preview</label>
|
|
|
|
|
<input id="text-checkbox" type="checkbox" class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe"/>
|
|
|
|
|
<button id="save-svg">get SVG</button>
|
|
|
|
|
<button id="save-hpgl">get HPGL</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
function toggle_class(classname, val){
|
|
|
|
|
if(val){
|
|
|
|
|
document.body.classList.add(classname);
|
|
|
|
|
}
|
|
|
|
|
else{
|
|
|
|
|
document.body.classList.remove(classname);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
let body_class_checkboxes = document.getElementsByClassName("body-class-check");
|
|
|
|
|
for(let checkbox of body_class_checkboxes){
|
|
|
|
|
let classname = checkbox.value;
|
|
|
|
|
checkbox.addEventListener('input', function(){
|
|
|
|
|
toggle_class(classname, checkbox.checked);
|
|
|
|
|
});
|
|
|
|
|
toggle_class(classname, checkbox.checked);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let save_button = document.getElementById('save-svg');
|
|
|
|
|
|
|
|
|
|
save_button.addEventListener('click', function(){
|
|
|
|
|
//get svg element.
|
|
|
|
|
let svg = document.getElementsByTagName("svg")[0];
|
|
|
|
|
|
|
|
|
|
//get svg source.
|
|
|
|
|
let serializer = new XMLSerializer();
|
|
|
|
|
let source = serializer.serializeToString(svg);
|
|
|
|
|
|
|
|
|
|
let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
|
|
|
|
|
saveAs(blob, 'cobbled-paths.svg');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let save_button_hpgl = document.getElementById('save-hpgl');
|
|
|
|
|
save_button_hpgl.addEventListener('click', function () {
|
|
|
|
|
let url = document.URL,
|
|
|
|
|
parts = url.split('/'),
|
|
|
|
|
name = parts[parts.length-1],
|
|
|
|
|
hpgl_url = '/hpgl/' + name,
|
|
|
|
|
a = document.createElement('a');
|
|
|
|
|
a.href = hpgl_url;
|
|
|
|
|
a.setAttribute('download', 'download');
|
|
|
|
|
if (document.createEvent) {
|
|
|
|
|
const event = document.createEvent('MouseEvents');
|
|
|
|
|
event.initEvent('click', true, true);
|
|
|
|
|
a.dispatchEvent(event);
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
a.click();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
