Commit 74207a23 authored by amandaghassaei's avatar amandaghassaei
Browse files

eod

parent 29719416
......@@ -401,4 +401,12 @@ a.seeMore.closed>.fui-triangle-down{
margin-left: auto;
margin-right: auto;
display: block;
}
.colorSwatch{
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
margin-bottom: 2px;
}
\ No newline at end of file
......@@ -875,7 +875,7 @@
<br/>
<b>Importing SVG:</b><br/><br/>
<ul>
<li>The SVG importer supports path objects and line objects (coming). Please convert polygons to paths before importing.</li>
<li>The SVG importer supports path, line, rect, polygon, and polyline objects</li>
<li>Mountain folds are <span style="color:red">red</span> - rgb(255, 0, 0), hex #ff0000</li>
<li>Valley folds are <span style="color:blue">blue</span> - rgb(0, 0, 255), hex #0000ff</li>
<li>Outline edges are <span style="color:black">black</span> - rgb(0, 0, 0), hex #000000</li>
......@@ -906,7 +906,6 @@
<li>Create geometry using the <b>Line Segment Tool</b>.</li>
<li>Illustrator can help you select all lines of a particular type so that you can edit their color or opacity together. Click the line,
then go to <b>Select>Same>Appearance</b> to select all similar lines in the pattern.
<li>To turn lines and polygons into path objects, select the geometry then right click and select <b>Make Compound Path</b>.</li>
<li>Finally hit <b>Save As</b> and select <b>.svg</b> extension. I'm using the default SVG 1.1 settings, but version 1.0 will work as well.</li>
</ul>
</p>
......
......@@ -21,17 +21,19 @@ function initPattern(globals){
var triangulations = [];
var polygons = [];
var badColors = [];//store any bad colors in svg file to show user
var SVGloader = new THREE.SVGLoader();
//filter for svg parsing
function outlineFilter(){
var stroke = getStroke($(this));
return stroke == "#000000" || stroke == "#000" || stroke == "black" || stroke == "rgb(0, 0, 0)";
return typeForStroke(stroke) == "outline";
}
function mountainFilter(){
var $this = $(this);
var stroke = getStroke($this);
if (stroke == "#ff0000" || stroke == "#f00" || stroke == "red" || stroke == "rgb(255, 0, 0)"){
if (typeForStroke(stroke) == "mountain"){
var opacity = parseFloat($this.attr("opacity"));
if (isNaN(opacity)) opacity = 1;
this.targetAngle = -opacity*Math.PI;
......@@ -42,7 +44,7 @@ function initPattern(globals){
function valleyFilter(){
var $this = $(this);
var stroke = getStroke($this);
if (stroke == "#0000ff" || stroke == "#00f" || stroke == "blue" || stroke == "rgb(0, 0, 255)"){
if (typeForStroke(stroke) == "valley"){
var opacity = parseFloat($this.attr("opacity"));
if (isNaN(opacity)) opacity = 1;
this.targetAngle = opacity*Math.PI;
......@@ -52,11 +54,11 @@ function initPattern(globals){
}
function cutFilter(){
var stroke = getStroke($(this));
return stroke == "#00ff00" || stroke == "#0f0" || stroke == "green" || stroke == "rgb(0, 255, 0)";
return typeForStroke(stroke) == "cut";
}
function triangulationFilter(){
var stroke = getStroke($(this));
return stroke == "#ffff00" || stroke == "#ff0" || stroke == "yellow" || stroke == "rgb(255, 255, 0)";
return typeForStroke(stroke) == "triangulation";
}
function getStroke(obj){
......@@ -70,10 +72,22 @@ function initPattern(globals){
return stroke.toLowerCase();
}
function typeForStroke(stroke){
if (stroke == "#000000" || stroke == "#000" || stroke == "black" || stroke == "rgb(0, 0, 0)") return "outline";
if (stroke == "#ff0000" || stroke == "#f00" || stroke == "red" || stroke == "rgb(255, 0, 0)") return "mountain";
if (stroke == "#0000ff" || stroke == "#00f" || stroke == "blue" || stroke == "rgb(0, 0, 255)") return "valley";
if (stroke == "#00ff00" || stroke == "#0f0" || stroke == "green" || stroke == "rgb(0, 255, 0)") return "cut";
if (stroke == "#ffff00" || stroke == "#ff0" || stroke == "yellow" || stroke == "rgb(255, 255, 0)") return "triangulation";
badColors.push(stroke);
return null;
}
function loadSVG(url){
SVGloader.load(url, function(svg){
var _$svg = $(svg);
badColors = [];
//format all appropriate svg elements
var $paths = _$svg.children("path");
$paths.css({fill:"none", 'stroke-dasharray':"none"});
......@@ -99,6 +113,17 @@ function initPattern(globals){
findType(_verticesRaw, _cutsRaw, cutFilter, $paths, $lines, $rects, $polygons, $polylines);
findType(_verticesRaw, _triangulationsRaw, triangulationFilter, $paths, $lines, $rects, $polygons, $polylines);
if (badColors.length>0){
badColors = _.uniq(badColors);
var string = "<br/>Some objects found with the following stroke colors:<br/><br/>";
_.each(badColors, function(color){
string += "<span style='background:" + color + "' class='colorSwatch'></span>" + color + "<br/>";
});
string += "<br/> These objects were ignored.<br/> Please check that your file is set up correctly, <br/>" +
"see <b>File>File Import Tips</b> for more information.<br/><br/>";
globals.warn(string);
}
parseSVG(_verticesRaw, _outlinesRaw, _mountainsRaw, _valleysRaw, _cutsRaw, _triangulationsRaw);
//find max and min vertices
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment