Compare commits

...

29 commits

Author SHA1 Message Date
ceca65577c
Update mrbeam_index.jinja2 2018-06-29 01:29:29 +02:00
47cd5345e8
mr drawification 2018-06-29 01:12:06 +02:00
3a24067560
Update README.md 2018-06-29 01:04:49 +02:00
make-ing
ff8b77500b changed pull command in git-pull.py script to fix my github delete repo fuck up. 2017-01-20 11:30:05 +01:00
make-ing
39c8f7886a chrome vs. firefox bugfix... Maybe needs further check to see if it can be simplyfied. Maybe use other values etc... 2016-10-04 13:03:35 +02:00
Florian
eb5e7408a9 Merge pull request #80 from mrbeam/mrbeam-dev
July Release
2016-07-06 15:08:57 +02:00
clemniem
0e346add14 #77 fixed
dataURL needed to be encoded correctly for non latin1

- rephrasing of popup for DPI conversion (Illustrator)
2016-07-06 12:11:53 +02:00
clemniem
5a696e01fa - cleanup of code 2016-07-01 12:42:40 +02:00
clemniem
9311463cfa - remove text deleted (again)
- clippath text edited
2016-07-01 12:35:32 +02:00
Florian
b19477dcfb Merge pull request #74 from mrbeam/stable-1.2.2
bux fixing issue #67: Chrome now treats the event target attributes l…
2016-07-01 10:18:32 +02:00
Clem
75f69dd0df Merge pull request #73 from mrbeam/mrbeam-dev-textInSvg
Mrbeam dev text in svg
2016-07-01 10:10:31 +02:00
clemniem
793b009ab6 popup dialoge informing user about the handling of text elements in SVG that have been detected 2016-06-30 17:45:41 +02:00
clemniem
e366b4c805 popup shows always laser infill if text is in userContent. 2016-06-30 17:31:07 +02:00
make-ing
bcfa42a034 changed back to the correct grbl.hex file 2016-06-24 10:39:38 +02:00
clemniem
6c44d8e243 added text to infill conversion, text will be treated like an image and always engraved. 2016-06-23 16:51:50 +02:00
make-ing
24cebced83 removed the xml stuff which magically appeared a previous commit 2016-06-23 15:49:47 +02:00
clemniem
8e02a97a61 added text to infill conversion, test 2 2016-06-23 14:53:04 +02:00
clemniem
4cb819fd7b added text to infill conversion 2016-06-23 14:43:04 +02:00
clemniem
3ffdceb5af fixed conversion dialog, added second checkbox for text_fills, no real functionality added yet 2016-06-23 14:09:39 +02:00
clemniem
fffc0c4ecb excluded text from being jumped over, because it is not on the paper 2016-06-23 11:04:22 +02:00
make-ing
1966a8b68c fixed #28: select all elements with attribute "display=none" and remove them. 2016-06-21 16:20:41 +02:00
clemniem
aad5efff2d WIP show text after upload in svg.
missing:
- add warning/dialogue about text in conversion dialogue
- cleanup
2016-06-21 15:13:36 +02:00
make-ing
f486a24914 fixed the DPI settings not working Problem, and added a PNotify messsage if an Illustrator comment is detected. 2016-06-21 13:44:19 +02:00
make-ing
179d2571ee Merge remote-tracking branch 'origin/mrbeam-dev' into mrbeam-dev 2016-06-21 09:49:29 +02:00
make-ing
074140bcd0 removed "?" from position commands to avoid aditional "ok" response and mazbe problems with advanced character counting. 2016-06-21 09:49:04 +02:00
clemniem
6641390620 resolved #69
rectangles are now removed after pressing clear button
2016-06-20 11:26:08 +02:00
make-ing
12a3f092e2 fixed problem when svg elements contain mm units, by converting them to pixel with a fixed dpi of 90. 2016-06-17 14:18:44 +02:00
make-ing
25be52587e fixed problem when xml tag in svg file is missing. 2016-06-17 12:02:56 +02:00
make-ing
16d2e18daa bux fixing issue #67: Chrome now treats the event target attributes like Firefox, so no need for distinction anymore.
(cherry picked from commit 3128ac7)
2016-05-27 18:27:13 +02:00
13 changed files with 1966 additions and 8222 deletions

View file

@ -1,5 +1,6 @@
OctoPrint OctoPrint
========= =========
What I did was take the MrBeam fork of Octoprint (because I have a MrBeam, and I like it) - and modify it for pen plotting with an axidraw v3 clone.
[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=foosel&url=https://github.com/foosel/OctoPrint&title=OctoPrint&language=&tags=github&category=software) [![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=foosel&url=https://github.com/foosel/OctoPrint&title=OctoPrint&language=&tags=github&category=software)

File diff suppressed because it is too large Load diff

View file

@ -97,7 +97,7 @@ def update_source(git_executable, folder, target, force=False):
raise RuntimeError("Could not update, \"git reset --hard\" failed with returncode %d: %s" % (returncode, stdout)) raise RuntimeError("Could not update, \"git reset --hard\" failed with returncode %d: %s" % (returncode, stdout))
print(">>> Running: git pull") print(">>> Running: git pull")
returncode, stdout = _git(["pull"], folder, git_executable=git_executable) returncode, stdout = _git(["pull", "origin", "stable-1.2.2"], folder, git_executable=git_executable)
if returncode != 0: if returncode != 0:
raise RuntimeError("Could not update, \"git pull\" failed with returncode %d: %s" % (returncode, stdout)) raise RuntimeError("Could not update, \"git pull\" failed with returncode %d: %s" % (returncode, stdout))
print(stdout) print(stdout)

View file

@ -270,7 +270,7 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin,
feedrate = max(1,data["defaultFeedrate"]) feedrate = max(1,data["defaultFeedrate"])
s.set(["defaultFeedrate"], feedrate) s.set(["defaultFeedrate"], feedrate)
if "svgDPI" in data and data["svgDPI"]: if "svgDPI" in data and data["svgDPI"]:
s.set(["svgDPI"], data["svgDPI"]) s.set_int(["svgDPI"], data["svgDPI"])
if "debug_logging" in data: if "debug_logging" in data:
old_debug_logging = s.get_boolean(["debug_logging"]) old_debug_logging = s.get_boolean(["debug_logging"])
new_debug_logging = data["debug_logging"] in octoprint.settings.valid_boolean_trues new_debug_logging = data["debug_logging"] in octoprint.settings.valid_boolean_trues
@ -344,7 +344,7 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin,
if not machinecode_path: if not machinecode_path:
path, _ = os.path.splitext(model_path) path, _ = os.path.splitext(model_path)
machinecode_path = path + ".gco" machinecode_path = path + ".gco"
self._svgtogcode_logger.info("### Slicing %s to %s using profile stored at %s" % (model_path, machinecode_path, profile_path)) self._svgtogcode_logger.info("### Slicing %s to %s using profile stored at %s" % (model_path, machinecode_path, profile_path))
## direct call ## direct call
@ -357,6 +357,8 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin,
converter_path = '/home/teja/workspace/mrbeam-inkscape-ext' converter_path = '/home/teja/workspace/mrbeam-inkscape-ext'
elif("denkbrett" in hostname): elif("denkbrett" in hostname):
converter_path = '/home/flo/mrbeam/git/mrbeam-inkscape-ext' converter_path = '/home/flo/mrbeam/git/mrbeam-inkscape-ext'
elif ("clems-Air" in hostname):
converter_path = '/Users/clem/Dropbox/mrBeam/mrbeam-inkscape-ext'
import sys import sys
sys.path.append(converter_path) sys.path.append(converter_path)

View file

@ -16,7 +16,7 @@ defaults = dict(
# general settings # general settings
svgDPI = 90, svgDPI = 90,
pierce_time = 0, pierce_time = 0,
# vector settings # vector settings
speed = 300, speed = 300,
intensity = 500, intensity = 500,
@ -24,7 +24,7 @@ defaults = dict(
cross_fill = False, cross_fill = False,
fill_angle = 0, fill_angle = 0,
fill_spacing = 0.25, fill_spacing = 0.25,
# pixel settings # pixel settings
beam_diameter = 0.25, beam_diameter = 0.25,
intensity_white = 0, intensity_white = 0,
@ -251,8 +251,8 @@ class Profile(object):
} }
return settings return settings
def convert_to_engine2(self): def convert_to_engine2(self):
settings = { settings = {

View file

@ -41,8 +41,10 @@ $(function(){
// image engraving stuff // image engraving stuff
// preset values are a good start for wood engraving // preset values are a good start for wood engraving
self.images_placed = ko.observable(false); self.images_placed = ko.observable(false);
self.text_placed = ko.observable(false);
self.show_image_parameters = ko.computed(function(){ self.show_image_parameters = ko.computed(function(){
return self.images_placed() || (self.fill_areas() && self.show_vector_parameters()); return (self.images_placed() || self.text_placed()
|| (self.fill_areas() && self.show_vector_parameters()));
}); });
self.imgIntensityWhite = ko.observable(0); self.imgIntensityWhite = ko.observable(0);
self.imgIntensityBlack = ko.observable(500); self.imgIntensityBlack = ko.observable(500);
@ -85,6 +87,7 @@ $(function(){
self.show_vector_parameters(self.workingArea.getPlacedSvgs().length > 0); self.show_vector_parameters(self.workingArea.getPlacedSvgs().length > 0);
self.show_fill_areas_checkbox(self.workingArea.hasFilledVectors()) self.show_fill_areas_checkbox(self.workingArea.hasFilledVectors())
self.images_placed(self.workingArea.getPlacedImages().length > 0); self.images_placed(self.workingArea.getPlacedImages().length > 0);
self.text_placed(self.workingArea.hasTextItems());
//self.show_image_parameters(self.workingArea.getPlacedImages().length > 0); //self.show_image_parameters(self.workingArea.getPlacedImages().length > 0);
if(self.show_vector_parameters() || self.show_image_parameters()){ if(self.show_vector_parameters() || self.show_image_parameters()){

View file

@ -1,7 +1,7 @@
// Matrix Oven - a snapsvg.io plugin to apply & remove transformations from svg files. // Matrix Oven - a snapsvg.io plugin to apply & remove transformations from svg files.
// Copyright (C) 2015 Teja Philipp <osd@tejaphilipp.de> // Copyright (C) 2015 Teja Philipp <osd@tejaphilipp.de>
// //
// based on work by https://gist.github.com/timo22345/9413158 // based on work by https://gist.github.com/timo22345/9413158
// and https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js // and https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js
// //
// This program is free software: you can redistribute it and/or modify // This program is free software: you can redistribute it and/or modify
@ -20,24 +20,25 @@
Snap.plugin(function (Snap, Element, Paper, global) { Snap.plugin(function (Snap, Element, Paper, global) {
/** /**
* bakes transformations of the element and all sub-elements into coordinates * bakes transformations of the element and all sub-elements into coordinates
* *
* @param {boolean} toCubics : use only cubic path segments * @param {boolean} toCubics : use only cubic path segments
* @param {integer} dec : number of digits after decimal separator. defaults to 5 * @param {integer} dec : number of digits after decimal separator. defaults to 5
* @returns {undefined} * @returns {undefined}
*/ */
Element.prototype.bake = function (toCubics, dec) { Element.prototype.bake = function (toCubics, dec) {
var elem = this; var elem = this;
if (!elem || !elem.paper) // don't handle unplaced elements. this causes double handling.
if (!elem || !elem.paper || elem.type !== "text" || elem.type !== "#text" || elem.type !== "tspan"){
return; return;
} // don't handle unplaced elements. this causes double handling.
if (typeof (toCubics) === 'undefined') if (typeof (toCubics) === 'undefined')
toCubics = false; toCubics = false;
if (typeof (dec) === 'undefined') if (typeof (dec) === 'undefined')
dec = 5; dec = 5;
//var children = elem.selectAll('*')
var children = elem.children(); var children = elem.children();
if (children.length > 0) { if (children.length > 0) {
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
@ -54,15 +55,16 @@ Snap.plugin(function (Snap, Element, Paper, global) {
elem.type !== "polygon" && elem.type !== "polygon" &&
elem.type !== "polyline" && elem.type !== "polyline" &&
elem.type !== "image" && elem.type !== "image" &&
elem.type !== "path"){ elem.type !== "path" &&
elem.type !== "text" &&
// if(elem.type !== 'g' && elem.type !== 'desc' && elem.type !== 'defs') elem.type !== "tspan" &&
// console.log('skipping unsupported element ', elem.type); elem.type !== "#text"){
return; return;
} }
if (elem.type == 'image'){ if (elem.type == 'image' || elem.type == "text" || elem.type == "#text"){
// TODO ... // TODO ...
var x = parseFloat(elem.attr('x')), var x = parseFloat(elem.attr('x')),
y = parseFloat(elem.attr('y')), y = parseFloat(elem.attr('y')),
w = parseFloat(elem.attr('width')), w = parseFloat(elem.attr('width')),
@ -84,12 +86,11 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var transformedY = matrix.y(x, y); var transformedY = matrix.y(x, y);
var transformedW = matrix.x(x+w, y+h) - transformedX; var transformedW = matrix.x(x+w, y+h) - transformedX;
var transformedH = matrix.y(x+w, y+h) - transformedY; var transformedH = matrix.y(x+w, y+h) - transformedY;
elem.attr({x: transformedX, y: transformedY, width: transformedW, height: transformedH}); elem.attr({x: transformedX, y: transformedY, width: transformedW, height: transformedH});
return; return;
} }
//if(elem.type !== 'path') console.log("bake: converting " + elem.type + " to path");
var path_elem = elem.convertToPath(); var path_elem = elem.convertToPath();
if (!path_elem || path_elem.attr('d') === '' || path_elem.attr('d') === null) if (!path_elem || path_elem.attr('d') === '' || path_elem.attr('d') === null)
@ -101,7 +102,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
} else { } else {
dec = false; dec = false;
} }
function r(num) { function r(num) {
if (dec !== false) { if (dec !== false) {
return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec); return Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
@ -114,8 +115,8 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var d = path_elem.attr('d'); var d = path_elem.attr('d');
d = (d || "").trim(); d = (d || "").trim();
var arr_orig; var arr_orig;
arr = Snap.parsePathString(d); arr = Snap.parsePathString(d);
if (!toCubics) { if (!toCubics) {
arr_orig = arr; arr_orig = arr;
arr = Snap.path.toAbsolute(arr); arr = Snap.path.toAbsolute(arr);
} else { } else {
@ -128,7 +129,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var matrix = transform['totalMatrix']; var matrix = transform['totalMatrix'];
// apply the matrix transformation on the path segments // apply the matrix transformation on the path segments
var j; var j;
var m = arr.length; var m = arr.length;
var letter = ''; var letter = '';
var letter_orig = ''; var letter_orig = '';
@ -136,8 +137,8 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var y = 0; var y = 0;
var new_segments = []; var new_segments = [];
var pt = {x: 0, y: 0}; var pt = {x: 0, y: 0};
var pt_baked = {}; var pt_baked = {};
var subpath_start = {}; var subpath_start = {};
var prevX = 0; var prevX = 0;
var prevY = 0; var prevY = 0;
subpath_start.x = null; subpath_start.x = null;
@ -155,7 +156,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
pt.x = arr[i][6]; pt.x = arr[i][6];
pt.y = arr[i][7]; pt.y = arr[i][7];
new_segments[i] = _arc_transform(arr[i][1], arr[i][2], arr[i][3], arr[i][4], arr[i][5], pt, matrix); new_segments[i] = _arc_transform(arr[i][1], arr[i][2], arr[i][3], arr[i][4], arr[i][5], pt, matrix);
} else if (letter !== 'Z') { } else if (letter !== 'Z') {
// parse other segs than Z and A // parse other segs than Z and A
for (j = 1; j < arr[i].length; j = j + 2) { for (j = 1; j < arr[i].length; j = j + 2) {
@ -191,7 +192,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
y = subpath_start.y; y = subpath_start.y;
} }
} }
// Convert all that was relative back to relative // Convert all that was relative back to relative
// This could be combined to above, but to make code more readable // This could be combined to above, but to make code more readable
// this is made separately. // this is made separately.
@ -261,7 +262,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
//console.log("baked matrix ", matrix, " of ", path_elem.attr('id')); //console.log("baked matrix ", matrix, " of ", path_elem.attr('id'));
}; };
/** /**
* Helper to apply matrix transformations to arcs. * Helper to apply matrix transformations to arcs.
* From flatten.js (https://gist.github.com/timo22345/9413158), modified a bit. * From flatten.js (https://gist.github.com/timo22345/9413158), modified a bit.
@ -269,7 +270,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
* @param {type} a_rh : r1 of the ellipsis in degree * @param {type} a_rh : r1 of the ellipsis in degree
* @param {type} a_rv : r2 of the ellipsis in degree * @param {type} a_rv : r2 of the ellipsis in degree
* @param {type} a_offsetrot : x-axis rotation in degree * @param {type} a_offsetrot : x-axis rotation in degree
* @param {type} large_arc_flag : 0 or 1 * @param {type} large_arc_flag : 0 or 1
* @param {int} sweep_flag : 0 or 1 * @param {int} sweep_flag : 0 or 1
* @param {object} endpoint with properties x and y * @param {object} endpoint with properties x and y
* @param {type} matrix : transformation matrix * @param {type} matrix : transformation matrix
@ -311,12 +312,12 @@ Snap.plugin(function (Snap, Element, Paper, global) {
// convert implicit equation to angle and halfaxis: // convert implicit equation to angle and halfaxis:
// disabled intentionally // disabled intentionally
if (false && NEARZERO(B)) { // there is a bug in this optimization: does not work for path below if (false && NEARZERO(B)) { // there is a bug in this optimization: does not work for path below
a_offsetrot = 0; a_offsetrot = 0;
// d="M0,350 l 50,-25 // d="M0,350 l 50,-25
// a25,25 -30 0,1 50,-25 l 50,-25 // a25,25 -30 0,1 50,-25 l 50,-25
// a25,50 -30 0,1 50,-25 l 50,-25 // a25,50 -30 0,1 50,-25 l 50,-25
// a25,75 -30 0,1 50,-25 l 50,-25 // a25,75 -30 0,1 50,-25 l 50,-25
// a25,100 -30 0,1 50,-25 l 50,-25" // a25,100 -30 0,1 50,-25 l 50,-25"
// with matrix transform="scale(0.5,2.0)" // with matrix transform="scale(0.5,2.0)"
A2 = A; A2 = A;
@ -332,7 +333,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
// Clamp (precision issues might need this.. not likely, but better save than sorry) // Clamp (precision issues might need this.. not likely, but better save than sorry)
K = (K < 0) ? 0 : Math.sqrt(K); K = (K < 0) ? 0 : Math.sqrt(K);
A2 = 0.5 * (A + C + K * ac); A2 = 0.5 * (A + C + K * ac);
C2 = 0.5 * (A + C - K * ac); C2 = 0.5 * (A + C - K * ac);
a_offsetrot = 0.5 * Math.atan2(B, ac); a_offsetrot = 0.5 * Math.atan2(B, ac);
@ -353,7 +354,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
a_rh = A2; a_rh = A2;
} }
// If the transformation matrix contain a mirror-component // If the transformation matrix contain a mirror-component
// winding order of the ellise needs to be changed. // winding order of the ellise needs to be changed.
if ((matrix.a * matrix.d) - (matrix.b * matrix.c) < 0){ if ((matrix.a * matrix.d) - (matrix.b * matrix.c) < 0){
sweep_flag = !sweep_flag ? 1 : 0; sweep_flag = !sweep_flag ? 1 : 0;
@ -376,30 +377,30 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var _convertToString = function (arr) { var _convertToString = function (arr) {
return arr.join(',').replace(_p2s, '$1'); return arr.join(',').replace(_p2s, '$1');
}; };
/** /**
* Replaces an element with a path of same shape. * Replaces an element with a path of same shape.
* Supports rect, ellipse, circle, line, polyline, polygon and of course path * Supports rect, ellipse, circle, line, polyline, polygon and of course path
* The element will be replaced by the path with same id. * The element will be replaced by the path with same id.
* *
* @returns {path} * @returns {path}
*/ */
Element.prototype.convertToPath = function(){ Element.prototype.convertToPath = function(){
var old_element = this; var old_element = this;
var path = old_element.toPath(); var path = old_element.toPath();
old_element.before(path); old_element.before(path);
old_element.remove(); old_element.remove();
return path; return path;
}; };
/** /**
* Creates a path in the same shape as the origin element * Creates a path in the same shape as the origin element
* Supports rect, ellipse, circle, line, polyline, polygon and of course path * Supports rect, ellipse, circle, line, polyline, polygon and of course path
* *
* based on * based on
* https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js * https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js
* Modifications: Timo (https://github.com/timo22345) * Modifications: Timo (https://github.com/timo22345)
* *
* @returns {path} path element * @returns {path} path element
*/ */
Element.prototype.toPath = function () { Element.prototype.toPath = function () {
@ -430,7 +431,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var validRadius = function (val) { var validRadius = function (val) {
return (isFinite(val) && (val >= 0)); return (isFinite(val) && (val >= 0));
}; };
var validCoordinate = function (val) { var validCoordinate = function (val) {
return (isFinite(val)); return (isFinite(val));
}; };
@ -438,6 +439,19 @@ Snap.plugin(function (Snap, Element, Paper, global) {
// Possibly the cubed root of 6, but 1.81 works best // Possibly the cubed root of 6, but 1.81 works best
var num = 1.81; var num = 1.81;
var tag = old_element.type; var tag = old_element.type;
var convertMMtoPixel = function (val) {
attrList = ['rx','ry','r','cx','cy','x1','x2','y1','y2','x','y','width','height'];
for(var attrIdx in attrList) {
if(val.attr(attrList[attrIdx]) != null && val.attr(attrList[attrIdx]).indexOf('mm') > -1) {
var tmp = parseFloat(val.attr(attrList[attrIdx])) * 3.5433;
val.attr(attrList[attrIdx], tmp);
}
}
}
convertMMtoPixel(old_element);
switch (tag) { switch (tag) {
case 'ellipse': case 'ellipse':
case 'circle': case 'circle':
@ -448,13 +462,13 @@ Snap.plugin(function (Snap, Element, Paper, global) {
if (tag === 'circle') { if (tag === 'circle') {
rx = ry = +old_element.attr('r'); rx = ry = +old_element.attr('r');
} }
// If 'x' and 'y' are not specified, then set both to 0. // CorelDraw is creating that sometimes // If 'x' and 'y' are not specified, then set both to 0. // CorelDraw is creating that sometimes
if (!validCoordinate(cx)) if (!validCoordinate(cx))
cx = 0; cx = 0;
if (!validCoordinate(cy)) if (!validCoordinate(cy))
cy = 0; cy = 0;
d += _convertToString([ d += _convertToString([
['M', (cx - rx), (cy)], ['M', (cx - rx), (cy)],
['C', (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry)], ['C', (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry)],
@ -481,7 +495,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
d = 'M' + old_element.attr('points') + 'Z'; d = 'M' + old_element.attr('points') + 'Z';
break; break;
case 'rect': case 'rect':
// TODO ... // TODO ...
var rx = parseFloat(old_element.attr('rx')), var rx = parseFloat(old_element.attr('rx')),
ry = parseFloat(old_element.attr('ry')), ry = parseFloat(old_element.attr('ry')),
x = parseFloat(old_element.attr('x')), x = parseFloat(old_element.attr('x')),

View file

@ -1,7 +1,7 @@
// render_fills.js - a snapsvg.io plugin to render the infill of svg files into a bitmap. // render_fills.js - a snapsvg.io plugin to render the infill of svg files into a bitmap.
// Copyright (C) 2015 Teja Philipp <osd@tejaphilipp.de> // Copyright (C) 2015 Teja Philipp <osd@tejaphilipp.de>
// //
// based on work by http://davidwalsh.name/convert-canvas-image // based on work by http://davidwalsh.name/convert-canvas-image
// and http://getcontext.net/read/svg-images-on-a-html5-canvas // and http://getcontext.net/read/svg-images-on-a-html5-canvas
// //
// This program is free software: you can redistribute it and/or modify // This program is free software: you can redistribute it and/or modify
@ -20,12 +20,12 @@
Snap.plugin(function (Snap, Element, Paper, global) { Snap.plugin(function (Snap, Element, Paper, global) {
/** /**
* @param {elem} elem start point * @param {elem} elem start point
* *
* @returns {path} * @returns {path}
*/ */
@ -34,7 +34,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var selection = []; var selection = [];
var children = elem.children(); var children = elem.children();
if (children.length > 0) { if (children.length > 0) {
var goRecursive = (elem.type !== "defs" && // ignore these tags var goRecursive = (elem.type !== "defs" && // ignore these tags
elem.type !== "clipPath" && elem.type !== "clipPath" &&
@ -42,7 +42,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
elem.type !== "rdf:rdf" && elem.type !== "rdf:rdf" &&
elem.type !== "cc:work" && elem.type !== "cc:work" &&
elem.type !== "sodipodi:namedview"); elem.type !== "sodipodi:namedview");
if(goRecursive) { if(goRecursive) {
for (var i = 0; i < children.length; i++) { for (var i = 0; i < children.length; i++) {
var child = children[i]; var child = children[i];
@ -50,7 +50,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
} }
} }
} else { } else {
if(elem.type === 'image'){ if(elem.type === 'image' || elem.type === "text" || elem.type === "#text"){
selection.push(elem); selection.push(elem);
} else { } else {
if(fillPaths && elem.is_filled()){ if(fillPaths && elem.is_filled()){
@ -65,7 +65,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
Element.prototype.is_filled = function(){ Element.prototype.is_filled = function(){
var elem = this; var elem = this;
// TODO text support // TODO text support
// TODO opacity support // TODO opacity support
if (elem.type !== "circle" && if (elem.type !== "circle" &&
@ -74,14 +74,17 @@ Snap.plugin(function (Snap, Element, Paper, global) {
elem.type !== "line" && elem.type !== "line" &&
elem.type !== "polygon" && elem.type !== "polygon" &&
elem.type !== "polyline" && elem.type !== "polyline" &&
elem.type !== "path" ){ elem.type !== "path" //&&
// elem.type !== "text" &&
// elem.type !== "#text"
){
return false; return false;
} }
var fill = elem.attr('fill'); var fill = elem.attr('fill');
var opacity = elem.attr('fill-opacity'); var opacity = elem.attr('fill-opacity');
if(fill !== 'none'){ if(fill !== 'none'){
if(opacity === null || opacity > 0){ if(opacity === null || opacity > 0){
return true; return true;
@ -89,7 +92,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
} }
return false; return false;
}; };
Element.prototype.embedImage = function(callback){ Element.prototype.embedImage = function(callback){
var elem = this; var elem = this;
if(elem.type !== 'image') return; if(elem.type !== 'image') return;
@ -113,15 +116,15 @@ Snap.plugin(function (Snap, Element, Paper, global) {
}; };
image.src = url; image.src = url;
}; };
Element.prototype.renderPNG = function (wMM, hMM, pxPerMM, callback) { Element.prototype.renderPNG = function (wMM, hMM, pxPerMM, callback) {
var elem = this; var elem = this;
// get svg as dataUrl // get svg as dataUrl
var svgStr = elem.outerSVG(); var svgStr = elem.outerSVG();
var svgDataUri = 'data:image/svg+xml;base64,' + window.btoa(svgStr); var svgDataUri = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgStr))); //deprecated unescape needed!
var source = new Image(); var source = new Image();
source.src = svgDataUri; source.src = svgDataUri;
@ -129,7 +132,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
var renderCanvas = document.createElement('canvas'); var renderCanvas = document.createElement('canvas');
renderCanvas.id = "renderCanvas"; renderCanvas.id = "renderCanvas";
renderCanvas.width = wMM * pxPerMM; renderCanvas.width = wMM * pxPerMM;
renderCanvas.height = hMM * pxPerMM; renderCanvas.height = hMM * pxPerMM;
document.getElementsByTagName('body')[0].appendChild(renderCanvas); document.getElementsByTagName('body')[0].appendChild(renderCanvas);
var renderCanvasContext = renderCanvas.getContext('2d'); var renderCanvasContext = renderCanvas.getContext('2d');

View file

@ -107,6 +107,7 @@ $(function(){
self.clear = function(){ self.clear = function(){
snap.selectAll('#userContent>*').remove(); snap.selectAll('#userContent>*').remove();
snap.selectAll('#placedGcodes>*').remove(); snap.selectAll('#placedGcodes>*').remove();
snap.selectAll('rect:not(#coordGrid)').remove();
self.placedDesigns([]); self.placedDesigns([]);
}; };
@ -132,9 +133,15 @@ $(function(){
}; };
self.getXYCoord = function(evt){ self.getXYCoord = function(evt){
var scale = evt.target.parentElement.transform.baseVal[0].matrix.a; if(/firefox/.test(navigator.userAgent.toLowerCase())) {
var x = self.px2mm(evt.offsetX) * scale; var scale = evt.target.parentElement.transform.baseVal[0].matrix.a;
var y = self.px2mm(parseFloat(evt.target.attributes.height.value) - evt.offsetY) * scale; var x = self.px2mm(evt.offsetX) * scale;
var y = self.px2mm(parseFloat(evt.target.attributes.height.value) - evt.offsetY) * scale;
} else
{
var x = self.px2mm(evt.offsetX);
var y = self.px2mm(parseFloat(evt.target.farthestViewportElement.clientHeight) - evt.offsetY);
}
x = Math.min(x, self.workingAreaWidthMM()); x = Math.min(x, self.workingAreaWidthMM());
y = Math.min(y, self.workingAreaHeightMM()); y = Math.min(y, self.workingAreaHeightMM());
return {x:x, y:y}; return {x:x, y:y};
@ -236,7 +243,11 @@ $(function(){
var url = self._getSVGserveUrl(file); var url = self._getSVGserveUrl(file);
callback = function (f) { callback = function (f) {
var newSvgAttrs = {}; var newSvgAttrs = {};
var root_attrs = f.select('svg').node.attributes; if(f.select('svg') == null){
root_attrs = f.node.attributes;
} else {
var root_attrs = f.select('svg').node.attributes;
}
var doc_width = null; var doc_width = null;
var doc_height = null; var doc_height = null;
var doc_viewbox = null; var doc_viewbox = null;
@ -245,9 +256,13 @@ $(function(){
var clipPathEl = f.selectAll('clipPath'); var clipPathEl = f.selectAll('clipPath');
if(clipPathEl.length != 0){ if(clipPathEl.length != 0){
console.warn("Warning: removed unsupported clipPath element in SVG"); console.warn("Warning: removed unsupported clipPath element in SVG");
self.svg_contains_clipPath_warning();
clipPathEl.remove() clipPathEl.remove()
} }
// find all elements with "display=none" and remove them
f.selectAll("[display=none]").remove()
// iterate svg tag attributes // iterate svg tag attributes
for(var i = 0; i < root_attrs.length; i++){ for(var i = 0; i < root_attrs.length; i++){
var attr = root_attrs[i]; var attr = root_attrs[i];
@ -263,9 +278,19 @@ $(function(){
} }
} }
// find Illustrator comment and notify
f.node.childNodes.forEach(function(entry) {
if(entry.nodeType == 8) { // Nodetype 8 = comment
if(entry.textContent.indexOf('Illustrator') > -1) {
new PNotify({title: gettext("Illustrator SVG Detected"), text: "Illustrator SVG detected! To preserve coorect scale, please go to the \'Settings\' menu and change the \'SVG dpi\' field under \'Plugins/Svg Conversion\' according to your file. And add it again.", type: "info", hide: false});
}
}
});
// scale matrix // scale matrix
var mat = self.getDocumentViewBoxMatrix(doc_width, doc_height, doc_viewbox); var mat = self.getDocumentViewBoxMatrix(doc_width, doc_height, doc_viewbox);
var scaleMatrixStr = new Snap.Matrix(mat[0][0],mat[0][1],mat[1][0],mat[1][1],mat[0][2],mat[1][2]).toTransformString(); var dpiscale = 90 / self.settings.settings.plugins.svgtogcode.svgDPI();
var scaleMatrixStr = new Snap.Matrix(mat[0][0],mat[0][1],mat[1][0],mat[1][1],mat[0][2],mat[1][2]).scale(dpiscale).toTransformString();
newSvgAttrs['transform'] = scaleMatrixStr; newSvgAttrs['transform'] = scaleMatrixStr;
var newSvg = snap.group(f.selectAll("svg>*")); var newSvg = snap.group(f.selectAll("svg>*"));
@ -391,8 +416,20 @@ $(function(){
}; };
}; };
self.svg_contains_clipPath_warning = function(){
var error = "<p>" + gettext("The SVG file contains clipPath elements.<br/>clipPath is not supported yet and has been removed from file.") + "</p>";
//error += pnotifyAdditionalInfo("<pre>" + data.jqXHR.responseText + "</pre>");
new PNotify({
title: "clipPath elements removed",
text: error,
type: "warn",
hide: false
});
};
self.svg_contains_text_warning = function(svg){ self.svg_contains_text_warning = function(svg){
var error = "<p>" + gettext("The svg file contains text elements.<br/>Please convert them to paths.<br/>Otherwise they will be ignored.") + "</p>"; var error = "<p>" + gettext("The SVG file contains text elements.<br/>If you want to laser just their outlines,<br/>please convert them to paths.<br/>Otherwise they will be engraved with infill.") + "</p>";
//error += pnotifyAdditionalInfo("<pre>" + data.jqXHR.responseText + "</pre>"); //error += pnotifyAdditionalInfo("<pre>" + data.jqXHR.responseText + "</pre>");
new PNotify({ new PNotify({
title: "Text elements found", title: "Text elements found",
@ -400,7 +437,6 @@ $(function(){
type: "warn", type: "warn",
hide: false hide: false
}); });
svg.selectAll('text,tspan').remove();
}; };
self.svg_misfitting_warning = function(svg, misfitting){ self.svg_misfitting_warning = function(svg, misfitting){
@ -706,6 +742,16 @@ $(function(){
return snap.selectAll("#userContent image"); return snap.selectAll("#userContent image");
}; };
self.hasTextItems = function () {
if(snap.selectAll("#userContent tspan").length > 0 ||
snap.selectAll("#userContent text").length > 0 ||
snap.selectAll("userContent #text").length > 0) {
return true
}else{
return false
}
};
self.getPlacedGcodes = ko.computed(function() { self.getPlacedGcodes = ko.computed(function() {
var gcodeFiles = []; var gcodeFiles = [];
ko.utils.arrayForEach(self.placedDesigns(), function(design) { ko.utils.arrayForEach(self.placedDesigns(), function(design) {
@ -828,7 +874,7 @@ $(function(){
for (var i = 0; i < fillings.length; i++) { for (var i = 0; i < fillings.length; i++) {
var item = fillings[i]; var item = fillings[i];
if (item.type === 'image') { if (item.type === 'image' || item.type === "text" || item.type === "#text") {
// remove filter effects on images for proper rendering // remove filter effects on images for proper rendering
var style = item.attr('style'); var style = item.attr('style');
if (style !== null) { if (style !== null) {

View file

@ -18,7 +18,7 @@
</div> </div>
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Sets the intensity of the laser. The more intensity the deeper the effect on the material. Sets the intensity of the laser. The more intensity the deeper the effect on the material.
Cutting needs higher intensities than engraving. Cutting needs higher intensities than engraving.
The effect in general is dependent from the material and its color and surface. The effect in general is dependent from the material and its color and surface.
</div> </div>
@ -33,8 +33,8 @@
</div> </div>
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Sets the velocity of the laser head. The slower the movement the deeper the effect on the material. Sets the velocity of the laser head. The slower the movement the deeper the effect on the material.
Cutting needs slower movement than engraving. Cutting needs slower movement than engraving.
The effect in general is dependent from the material and its color and surface. The effect in general is dependent from the material and its color and surface.
</div> </div>
</div> </div>
@ -56,11 +56,11 @@
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Some (especially bright) materials require the laser to dwell a little until the surface has absorbed enough energy to be affected. Some (especially bright) materials require the laser to dwell a little until the surface has absorbed enough energy to be affected.
This parameter sets the amount of time in milliseconds the movement is paused after the laser is switched on. This parameter sets the amount of time in milliseconds the movement is paused after the laser is switched on.
If the result shows gaps in lines for example increase this value carefully. The higher the value the higher the risk of material ignition. If the result shows gaps in lines for example increase this value carefully. The higher the value the higher the risk of material ignition.
</div> </div>
</div> </div>
<div data-bind="visible: show_image_parameters "> <div data-bind="visible: show_image_parameters ">
<p>{{ _('Image engraving parameters:') }}</p> <p>{{ _('Image engraving parameters:') }}</p>
<div class="control-group" > <div class="control-group" >
@ -103,10 +103,10 @@
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Pixel / raster engravings are done line by line. This sets the distance between the single lines. Pixel / raster engravings are done line by line. This sets the distance between the single lines.
Smaller values allow finer engravings but require a more precise focus and are slower. Smaller values allow finer engravings but require a more precise focus and are slower.
</div> </div>
<p >{{ _('Image Preprocessing') }}</p> <p >{{ _('Image Preprocessing') }}</p>
<div class="controls"> <div class="controls">
<div class="img_preprocessing_preview before" style="background-image:url(/plugin/svgtogcode/static/img/kitty_grayscale.png);" >before</div> <div class="img_preprocessing_preview before" style="background-image:url(/plugin/svgtogcode/static/img/kitty_grayscale.png);" >before</div>
@ -114,22 +114,22 @@
<div class="img_preprocessing_preview contrast" style="background-image:url(/plugin/svgtogcode/static/img/kitty_contrast.png);" data-bind="style: { opacity: contrastPreview }" ></div> <div class="img_preprocessing_preview contrast" style="background-image:url(/plugin/svgtogcode/static/img/kitty_contrast.png);" data-bind="style: { opacity: contrastPreview }" ></div>
<div class="img_preprocessing_preview sharpened" style="background-image:url(/plugin/svgtogcode/static/img/kitty_sharpened.png);" data-bind="style: { opacity: sharpenedPreview }" ></div> <div class="img_preprocessing_preview sharpened" style="background-image:url(/plugin/svgtogcode/static/img/kitty_sharpened.png);" data-bind="style: { opacity: sharpenedPreview }" ></div>
<div class="img_preprocessing_preview dithered" style="background-image:url(/plugin/svgtogcode/static/img/kitty_dithered_150.png);" data-bind="visible: imgDithering"></div> <div class="img_preprocessing_preview dithered" style="background-image:url(/plugin/svgtogcode/static/img/kitty_dithered_150.png);" data-bind="visible: imgDithering"></div>
</div> </div>
<div class="photo_attribution"><a href="http://www.christianholmer.com" target="_blank">Photo: Christian Holmér</a></div> <div class="photo_attribution"><a href="http://www.christianholmer.com" target="_blank">Photo: Christian Holmér</a></div>
</div> </div>
<div data-bind="disable:imgDithering "> <div data-bind="disable:imgDithering ">
<label class="control-label">{{ _('Contrast') }}</label> <label class="control-label">{{ _('Contrast') }}</label>
<div class="controls img_slider"> <div class="controls img_slider">
<input id="svgtogcode_contrast_slider" type="text" data-bind="value: imgContrast" > <input id="svgtogcode_contrast_slider" type="text" data-bind="value: imgContrast" >
</div> </div>
<div style="clear:both"></div> <div style="clear:both"></div>
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Increases the image contrast before converting to gcode. Increases the image contrast before converting to gcode.
</div> </div>
<label class="control-label">{{ _('Sharpening') }}</label> <label class="control-label">{{ _('Sharpening') }}</label>
<div class="controls img_slider"> <div class="controls img_slider">
<input id="svgtogcode_sharpening_slider" class="uninitialized" type="text" data-bind="value: imgSharpening"> <input id="svgtogcode_sharpening_slider" class="uninitialized" type="text" data-bind="value: imgSharpening">
@ -137,10 +137,10 @@
<div style="clear:both"></div> <div style="clear:both"></div>
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Sharpens the image before converting to gcode. Sharpens the image before converting to gcode.
</div> </div>
</div> </div>
<label class="control-label">{{ _('Dithering') }}</label> <label class="control-label">{{ _('Dithering') }}</label>
<div class="controls"> <div class="controls">
<label class="checkbox"> <label class="checkbox">
@ -149,8 +149,8 @@
</div> </div>
<div class="controls alert alert-info hint" data-bind="visible: showHints"> <div class="controls alert alert-info hint" data-bind="visible: showHints">
<span class="icon icon-question-sign" aria-hidden="true"></span> <span class="icon icon-question-sign" aria-hidden="true"></span>
Converts the image to solely black and white pixels. Converts the image to solely black and white pixels.
Use this if the laser effect on your material is not able to transfer grayscales. Use this if the laser effect on your material is not able to transfer grayscales.
</div> </div>
</div> </div>
@ -185,4 +185,4 @@
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: $root.cancel_conversion()">{{ _('Cancel') }}</a> <a href="#" class="btn" data-dismiss="modal" aria-hidden="true" data-bind="click: $root.cancel_conversion()">{{ _('Cancel') }}</a>
<a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableConvertButton()) { $root.convert() } }, enabled: enableConvertButton, css: {disabled: !$root.enableConvertButton()}">{{ _('Convert') }}</a> <a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableConvertButton()) { $root.convert() } }, enabled: enableConvertButton, css: {disabled: !$root.enableConvertButton()}">{{ _('Convert') }}</a>
</div> </div>
</div> </div>

View file

@ -331,7 +331,7 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
def position(self, x, y): def position(self, x, y):
printer_profile = self._printerProfileManager.get_current_or_default() printer_profile = self._printerProfileManager.get_current_or_default()
movement_speed = min(printer_profile["axes"]["x"]["speed"], printer_profile["axes"]["y"]["speed"]) movement_speed = min(printer_profile["axes"]["x"]["speed"], printer_profile["axes"]["y"]["speed"])
self.commands(["G90", "G0 X%.3f Y%.3f F%d" % (x, y, movement_speed), "?"]) self.commands(["G90", "G0 X%.3f Y%.3f F%d" % (x, y, movement_speed)])
def _convert_rate_value(self, factor, min=0, max=200): def _convert_rate_value(self, factor, min=0, max=200):
if not isinstance(factor, (int, float, long)): if not isinstance(factor, (int, float, long)):

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title data-bind="text: title">Mr Beam</title> <title data-bind="text: title">Mr Draw</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}"> <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
@ -16,7 +16,7 @@
<div class="container"> <div class="container">
<div class="navbar-header brand" style="min-width: 272px;"> <div class="navbar-header brand" style="min-width: 272px;">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img alt="Mr Beam Logo" src="{{ url_for('static', filename='img/mr-typo-red_x120.png') }}"> <img alt="Mr Draw Logo" src="{{ url_for('static', filename='img/mr-draw-red_x120.png') }}">
</a> </a>
</div> </div>
<!-- Navbar --> <!-- Navbar -->
@ -58,7 +58,7 @@
<div id="control" class="accordion-inner" data-bind="visible: isReady() || isLocked() || isFlashing()"> <div id="control" class="accordion-inner" data-bind="visible: isReady() || isLocked() || isFlashing()">
<div data-bind="visible: isLocked "> <div data-bind="visible: isLocked ">
Mr Beam is in a locked state as it does not know its position. Mr Draw is in a locked state as it does not know its position.
First remove any objects blocking the gantry's travel range. First remove any objects blocking the gantry's travel range.
Then do a homing cycle. Then do a homing cycle.
<div style='text-align: center; padding:.5em;'> <div style='text-align: center; padding:.5em;'>
@ -657,12 +657,10 @@
<div class="span4"> <div class="span4">
<ul class="focus_steps"> <ul class="focus_steps">
<li>1. Place your material on the working area</li> <li>1. Place your material on the working area</li>
<li>2. Move the laser over the material</li> <li>2. Move the pen over the material</li>
<li>3. Put on your safety glasses</li> <li>&RightArrow; Now enable the pen calibration mode</li>
<li>4. Turn the laser safety switch to on</li> <li>5. Adjust the pen until it touches the paper</li>
<li>&RightArrow; Now enable the focus mode</li> <li>&RightArrow; Disable the pen calibration mode. </li>
<li>5. Adjust the focus until the laser beam is as small as possible</li>
<li>&RightArrow; Disable the focus mode. </li>
</ul> </ul>
<div style="text-align:center"> <div style="text-align:center">
<div class="btn-group" role="group" aria-label="focus mode control" style=""> <div class="btn-group" role="group" aria-label="focus mode control" style="">