Compare commits
6 Commits
61a70e898a
...
268bd63b77
Author | SHA1 | Date |
---|---|---|
radex | 268bd63b77 | |
radex | 472e483dc8 | |
radex | af683eed28 | |
radex | c3b660fa23 | |
radex | 9e215c23ad | |
radex | 48e94958f1 |
|
@ -6,7 +6,7 @@
|
||||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||||
<title>Method Draw Vector Editor</title>
|
<title>HSWAW Method Draw Vector Editor</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="description" content="Method Draw is an open source SVG editor for the web, you can use it online without signing up.">
|
<meta name="description" content="Method Draw is an open source SVG editor for the web, you can use it online without signing up.">
|
||||||
|
|
||||||
|
@ -87,8 +87,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
|
<div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
|
||||||
<div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
|
<div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
|
||||||
<div class="separator"></div>
|
</div>
|
||||||
<div data-action="print" id="tool_print" class="menu_item">Print on Zebra <span class="shortcut">⌘P</span></div>
|
</div>
|
||||||
|
|
||||||
|
<div class="menu">
|
||||||
|
<div class="menu_title" style="background: pink; color: black; border-radius: 4px;">Print</div>
|
||||||
|
<div class="menu_list inverted-undo" id="print_menu">
|
||||||
|
<div data-action="print_dymo" id="tool_print" class="menu_item">Print on DYMO (small label)</div>
|
||||||
|
<div data-action="print_zebra" id="tool_print" class="menu_item">Print on Zebra (big label)</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -154,12 +160,12 @@
|
||||||
|
|
||||||
|
|
||||||
<label data-title="Change canvas width" class="draginput">
|
<label data-title="Change canvas width" class="draginput">
|
||||||
<input id="canvas_width" type="text" pattern="[0-9]*" value="600" />
|
<input id="canvas_width" type="text" pattern="[0-9]*" value="1200" />
|
||||||
<span class="icon_label">Width</span>
|
<span class="icon_label">Width</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label data-title="Change canvas height" class="draginput">
|
<label data-title="Change canvas height" class="draginput">
|
||||||
<input id="canvas_height" type="text" pattern="[0-9]*" value="400" />
|
<input id="canvas_height" type="text" pattern="[0-9]*" value="800" />
|
||||||
<span class="icon_label">Height</span>
|
<span class="icon_label">Height</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
@ -175,7 +181,7 @@
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="draginput">
|
<div class="draginput" style="outline: 3px solid pink">
|
||||||
<span>Size</span>
|
<span>Size</span>
|
||||||
<select id="resolution">
|
<select id="resolution">
|
||||||
|
|
||||||
|
@ -183,9 +189,9 @@
|
||||||
<option id="fitToContent" value="content">Fit to Content</option>
|
<option id="fitToContent" value="content">Fit to Content</option>
|
||||||
|
|
||||||
<optgroup label="HSWAW">
|
<optgroup label="HSWAW">
|
||||||
<option value="356x144">Small Label / DYMO (89 × 36mm)</option>
|
<option value="1080x432">Small Label / DYMO (89 × 36mm)</option>
|
||||||
<option value="600x400" selected="selected">Large Label Landscape / 4x6 / Zebra (150 × 100mm)</option>
|
<option value="1200x800" selected="selected">Large Label Landscape / 4x6 / Zebra (150 × 100mm)</option>
|
||||||
<option value="400x600">Large Label Portrait / 4x6 / Zebra (100 × 150mm)</option>
|
<option value="800x1200">Large Label Portrait / 4x6 / Zebra (100 × 150mm)</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
|
|
||||||
<optgroup label="Social Media">
|
<optgroup label="Social Media">
|
||||||
|
@ -242,7 +248,7 @@
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
<div class="caret"></div>
|
<div class="caret"></div>
|
||||||
<label id="resolution_label">600x400</label>
|
<label id="resolution_label">Default</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -705,9 +711,9 @@
|
||||||
<option value="12">12%</option>
|
<option value="12">12%</option>
|
||||||
<option value="16">16%</option>
|
<option value="16">16%</option>
|
||||||
<option value="25">25%</option>
|
<option value="25">25%</option>
|
||||||
<option value="50">50%</option>
|
<option value="50" selected="selected">50%</option>
|
||||||
<option value="75">75%</option>
|
<option value="75">75%</option>
|
||||||
<option value="100" selected="selected">100%</option>
|
<option value="100">100%</option>
|
||||||
<option value="150">150%</option>
|
<option value="150">150%</option>
|
||||||
<option value="200">200%</option>
|
<option value="200">200%</option>
|
||||||
<option value="300">300%</option>
|
<option value="300">300%</option>
|
||||||
|
@ -721,7 +727,7 @@
|
||||||
<span id="zoomLabel" class="zoom_tool icon_label">
|
<span id="zoomLabel" class="zoom_tool icon_label">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||||||
</span>
|
</span>
|
||||||
<input id="zoom" value="100%" type="text" readonly="readonly" />
|
<input id="zoom" value="50%" type="text" readonly="readonly" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,7 @@ MD.Shapelib = function(){
|
||||||
|
|
||||||
// This populates the category list
|
// This populates the category list
|
||||||
var categories = {
|
var categories = {
|
||||||
|
hswaw: 'HSWAW',
|
||||||
basic: 'Basic',
|
basic: 'Basic',
|
||||||
object: 'Objects',
|
object: 'Objects',
|
||||||
symbol: 'Symbols',
|
symbol: 'Symbols',
|
||||||
|
|
|
@ -88,9 +88,12 @@ MD.Zoom = function(){
|
||||||
};
|
};
|
||||||
|
|
||||||
function reset(){
|
function reset(){
|
||||||
multiply(1);
|
multiply(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// dunno how to set initial value lol
|
||||||
|
setTimeout(()=>reset(), 0)
|
||||||
|
|
||||||
this.multiply = multiply;
|
this.multiply = multiply;
|
||||||
this.reset = reset;
|
this.reset = reset;
|
||||||
this.changed = changed;
|
this.changed = changed;
|
||||||
|
|
|
@ -24,7 +24,7 @@ const dao = [
|
||||||
name: "canvasSize",
|
name: "canvasSize",
|
||||||
label: "Canvas Size",
|
label: "Canvas Size",
|
||||||
type: "array",
|
type: "array",
|
||||||
default: [600, 400],
|
default: [1200, 800],
|
||||||
private: false,
|
private: false,
|
||||||
save: true
|
save: true
|
||||||
},
|
},
|
||||||
|
@ -60,10 +60,10 @@ const dao = [
|
||||||
name: "canvasContent",
|
name: "canvasContent",
|
||||||
label: "Canvas Content",
|
label: "Canvas Content",
|
||||||
type: "string",
|
type: "string",
|
||||||
default: `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'>
|
default: `<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'>
|
||||||
<g>
|
<g>
|
||||||
<title>Layer 1</title>
|
<title>Layer 1</title>
|
||||||
<text font-weight="normal" font-style="normal" stroke="#000" xml:space="preserve" text-anchor="start" font-family="'Open Sans'" font-size="42" id="svg_1" y="54.90625" x="10" stroke-width="0" fill="#000000">Sample text</text>
|
<text font-weight="normal" font-style="normal" stroke="#000" xml:space="preserve" text-anchor="center" font-family="'Open Sans'" font-size="84" id="svg_1" y="120" x="80" stroke-width="0" fill="#000000">Sample text</text>
|
||||||
</g>
|
</g>
|
||||||
</svg>`,
|
</svg>`,
|
||||||
private: true,
|
private: true,
|
||||||
|
|
|
@ -278,9 +278,9 @@ MD.Editor = function(){
|
||||||
c.width = svgCanvas.contentW;
|
c.width = svgCanvas.contentW;
|
||||||
c.height = svgCanvas.contentH;
|
c.height = svgCanvas.contentH;
|
||||||
canvg(c, data.svg, {renderCallback: function() {
|
canvg(c, data.svg, {renderCallback: function() {
|
||||||
if (data.shouldPrint) {
|
if (data.printerName) {
|
||||||
c.toBlob((blob) => {
|
c.toBlob((blob) => {
|
||||||
fetch('/print?printer=zebra', {
|
fetch(`/print?printer=${data.printerName}`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: blob
|
body: blob
|
||||||
}).then(response => {
|
}).then(response => {
|
||||||
|
@ -425,22 +425,32 @@ MD.Editor = function(){
|
||||||
this.saveCanvas = saveCanvas;
|
this.saveCanvas = saveCanvas;
|
||||||
this.loadFromUrl = loadFromUrl;
|
this.loadFromUrl = loadFromUrl;
|
||||||
|
|
||||||
this.export = function(shouldPrint = false){
|
this.export = function(printerName = null){
|
||||||
if(window.canvg) {
|
if(window.canvg) {
|
||||||
svgCanvas.rasterExport(shouldPrint);
|
svgCanvas.rasterExport(printerName);
|
||||||
} else {
|
} else {
|
||||||
$.getScript('js/lib/rgbcolor.js', function() {
|
$.getScript('js/lib/rgbcolor.js', function() {
|
||||||
$.getScript('js/lib/canvg.js', function() {
|
$.getScript('js/lib/canvg.js', function() {
|
||||||
svgCanvas.rasterExport(shouldPrint);
|
svgCanvas.rasterExport(printerName);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
|
|
||||||
|
|
||||||
function print() {
|
function print(printerName) {
|
||||||
editor.menu.flash($('#file_menu'));
|
if (!confirm(`Do you want to print on ${printerName}?`)) return;
|
||||||
if (!confirm("Do you want to print?")) return;
|
this.export(printerName)
|
||||||
this.export(true)
|
|
||||||
}
|
}
|
||||||
this.print = print
|
this.print = print
|
||||||
|
|
||||||
|
function print_dymo() {
|
||||||
|
this.print("DYMO")
|
||||||
|
}
|
||||||
|
|
||||||
|
function print_zebra() {
|
||||||
|
this.print("Zebra")
|
||||||
|
}
|
||||||
|
|
||||||
|
this.print_dymo = print_dymo
|
||||||
|
this.print_zebra = print_zebra
|
||||||
}
|
}
|
|
@ -45,7 +45,7 @@ var svgns = "http://www.w3.org/2000/svg",
|
||||||
var curConfig = {
|
var curConfig = {
|
||||||
show_outside_canvas: true,
|
show_outside_canvas: true,
|
||||||
selectNew: true,
|
selectNew: true,
|
||||||
dimensions: [600, 400],
|
dimensions: [1200, 800],
|
||||||
initFill: {color: 'fff', opacity: 1},
|
initFill: {color: 'fff', opacity: 1},
|
||||||
initStroke: {width: 3, color: '000', opacity: 1},
|
initStroke: {width: 3, color: '000', opacity: 1},
|
||||||
imgPath: 'images/',
|
imgPath: 'images/',
|
||||||
|
@ -146,7 +146,7 @@ all_properties.text = $.extend(true, {}, all_properties.shape);
|
||||||
$.extend(all_properties.text, {
|
$.extend(all_properties.text, {
|
||||||
fill: "#000000",
|
fill: "#000000",
|
||||||
stroke_width: 0,
|
stroke_width: 0,
|
||||||
font_size: 42,
|
font_size: 84,
|
||||||
font_family: curConfig.defaultFont
|
font_family: curConfig.defaultFont
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -5364,7 +5364,7 @@ this.save = function() {
|
||||||
// Function: rasterExport
|
// Function: rasterExport
|
||||||
// Generates a PNG Data URL based on the current image, then calls "exported"
|
// Generates a PNG Data URL based on the current image, then calls "exported"
|
||||||
// with an object including the string and any issues found
|
// with an object including the string and any issues found
|
||||||
this.rasterExport = function(shouldPrint) {
|
this.rasterExport = function(printerName) {
|
||||||
// remove the selected outline before serializing
|
// remove the selected outline before serializing
|
||||||
clearSelection();
|
clearSelection();
|
||||||
|
|
||||||
|
@ -5391,7 +5391,7 @@ this.rasterExport = function(shouldPrint) {
|
||||||
});
|
});
|
||||||
|
|
||||||
var str = this.svgCanvasToString();
|
var str = this.svgCanvasToString();
|
||||||
call("exported", {svg: str, issues: issues, shouldPrint});
|
call("exported", {svg: str, issues: issues, printerName});
|
||||||
};
|
};
|
||||||
|
|
||||||
// Function: getSvgString
|
// Function: getSvgString
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue