How to grid a polyline points? Pathfinding.js library - javascript

I have a shape like this:
Is it possible to grid them using their points and store it in an array?
<polyline class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
Edit: Is it possible to use Pathfinding.js to the grid and how will I set the setWalkableAt function in the library?

Inspired by the mention of the SVG DOM in How do I add coordinates to an SVG polyline?, I came up with...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var polyline= document.getElementById("myPolyline");
var pts = [];
for (var i=0; i < polyline.points.length; i++) {
pts.push([polyline.points[i].x, polyline.points[i].y]);
}
console.log(pts);
}
</script>
</head>
<body>
<svg width="1920" height="340">
<polyline id="myPolyline" class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
</svg>
</body>
</html>
Note that I gave the polyline an id attribute to make it easy to get a reference to it with document.getElementById().
Look in the console of your browser's developer tools to see the array of arrays.

Related

How to use svg polygons custom attributes (data-*) to style these same polygons?

I'm very new to programming and coding. I'm using a .svg file generated by Adobe Illustrator to make an interactive map with d3.js.
This SVG is organized with g's with polygon's inside which have their own id's. I also added custom data do each polygon in the SVG (data-price="number"):
<g id="price-range">
<polygon id="name" data-price="price number" points="..."/>
<polygon id="name2" data-price="price2 number" points="..."/>
// and so on
</g>
I would like to use those custom data attributes as data to generate different style outputs for each of these polygon's. This is my code so far (it's not working):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style type="text/css">
#map-block {
width: 100%;
max-width: 1000px;
align-content: center;
margin: auto; }
</style>
</head>
<body>
<div id="map-block">
<svg id="mapa-usados-sp" width="100%"></svg>
</div>
<script>
var svg = null;
var mapa = null;
d3.xml("sp.svg", function(error, xml) {
if (error) throw error;
var domSVG = document.getElementById('mapa-usados-sp');
domSVG.appendChild(xml.documentElement.getElementById('mapa'));
svg = d3.select(domSVG);
mapa = svg.select('#mapa');
var xmlSVG = d3.select(xml.getElementsByTagName('svg')[0]);
svg.attr('viewBox', xmlSVG.attr('viewBox'));
var bg = mapa.selectAll("g#contexto");
bg.style("fill", "#e9e9e9");
var shapes = mapa.select("g#zones").selectAll("polygon");
var price = shapes.(xml.documentElement.getAttribute('data-
price'));
shapes.style("fill", function(price) {
if (price = 0) { return "#323232";}
if (price <= 1700 && price > 0 ) {return "#2169dd";}
if (price > 1700 && d <= 2500) {return "#6921dd";}
});
});
</script>
</body>
</html>
I chose not to style each shape refering to it's id or class because I would really like to use the custom-data attributes in the .svg file to generate visual outputs.
In the end this will be a very dynamic piece. I'm going to add interactions and event listeners, so this is why I'm very interested in finding out how to extract data from .svg attributes and use it to style the shapes that contain these attributes.
I hope I have made my point corretly.
The way to get the "data" attribute of each polygon is using dataset:
The HTMLElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element, either in HTML or in the DOM.
In your case, where this is the current DOM element:
this.dataset.price
Pay attention that this will return a string, you may want to coerce it to a number.
Here is the demo, using the value of data-price to fill the polygons:
var svg = d3.select("svg");
var shapes = svg.selectAll("polygon");
shapes.each(function() {
var thisPrice = +this.dataset.price;
d3.select(this).attr("fill", thisPrice === 0 ? "#323232" :
thisPrice > 1700 ? "#6921dd" : "#2169dd")
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
<polygon id="name1" data-price="0" points="30,10 10,50 50,50" />
<polygon id="name2" data-price="1000" points="80,10 60,50 100,50" />
<polygon id="name3" data-price="2000" points="130,10 110,50 150,50" />
</svg>
PS: It's not clear what's the colour if the value is above 2500.

Why won't the images appear in the browser?

In this code, the images won't appear once I run it in the browser. I have tried different browsers and different ways to sort the image. Could you tell me why this is happening and how I will be able to fix this because I have been trying for days now. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"
];
var index = 0;
function changeLights()
{
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src=list[index];
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
</head>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"red.gif",
"green.gif",
"amber.gif"
];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length) index = 0;
var image = document.getElementById('light');
image.src = list[index];
}
</script>
</body>
</html>
I've cleaned up the code a little. Note that the full path has been removed from the images.
Where ever the HTML file is located if the images are located directly next to the HTML file then they do not need an absolute path (c:/...). Instead relative paths should be used. So assuming the HTML file is found at C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html then the following code below should work as it can easily find the .gif files.
Natively there's no permission to access this kind of URL (from user's computer) that starts of file://, C://, etc... (in any web browser)
If your file is located at some directory in computer, then you can input the files you'll use that are in the same directory, like:
src/styles.css, file.png, etc

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

How to show SVG with JavaScript in img

I have a php-file that sends an SVG header and draws itself partly with JavaScript. Everything works fine when I show the SVG directly in the browser. However, when I embed it in an <img>, then the JavaScript seems not to be executed. Maybe I am doing something wrong?
Here is the php-file (testsvg.php):
<?php
header('Content-type: image/svg+xml');
?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="800"
height="600"
id="example_text">
<g id="layer1">
<text
x="100"
y="100"
id="text_holder">
<?php echo filter_input(INPUT_GET, 'text'); ?>
</text>
</g>
<script type="text/javascript">
function create_from_rect (client_rect, offset_px) {
if (! offset_px) {
offset_px=0;
}
var box = document.createElementNS(
document.rootElement.namespaceURI,
'rect'
);
if (client_rect) {
box.setAttribute('x', client_rect.left - offset_px);
box.setAttribute('y', client_rect.top - offset_px);
box.setAttribute('width', client_rect.width + offset_px * 2);
box.setAttribute('height', client_rect.height + offset_px * 2);
}
return box;
}
function add_bounding_box (text_id, padding) {
var text_elem = document.getElementById(text_id);
if (text_elem) {
var f = text_elem.getClientRects();
if (f) {
var bbox = create_from_rect(f[0], padding);
bbox.setAttribute(
'style',
'fill: none;'+
'stroke: black;'+
'stroke-width: 0.5px;'
);
text_elem.parentNode.appendChild(bbox);
}
}
}
add_bounding_box('text_holder', 10);
</script>
</svg>
(The SVG/JavaScript is mostly taken from How can I draw a box around text with SVG?.)
When I open this file directly in the browser, e.g. with http://localhost/testsvg.php?text=Test it draws a proper box around the text Test.
However, when I embed it with an <img>, e.g. with <img src="testsvg.php?text=Test" alt="">, it does not show the box.
To protect user's privacy, script is not run in images. There are other restrictions.
When thinking of an image it helps to have the mental model "could I do this if I used a raster image"? If you bear that in mind you won't go far wrong as that's basically the model the browsers implement.
Your alternatives are to use <object> or <iframe> tags instead of <img> as they do allow scripting.

CamanJS image manipulation, strange error

i'm using CamanJS to do some images manipulation with javascript, and I have two similar really simple scripts, the first works well, the second not (and this is the script i need working).
This is the first working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
</head>
<body>
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
<script>
var immagine;
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</body>
</html>
This is the second not working, it return in firebug the error: TypeError: this.c.pixelData is undefined
<!DOCTYPE html>
<html lang="en">
<head>
<title>CamanJS Testing Playground</title>
<script type="text/javascript" src="caman.full.min.js"></script>
<script>
var immagine;
function carica()
{
var smallImage = document.getElementById('smallImage');
smallImage.src = "test1_600.jpg";
immagine = Caman("#smallImage", function () {});
}
function filtraPhoto() {
immagine.brightness(10).contrast(500).render(function () {
alert("Done!");
});
}
</script>
</head>
<body>
<button onclick="carica();">carica immagine</button><br />
<button onclick="filtraPhoto();">MODIFICA</button><br />
<img id="smallImage" />
</body>
</html>
Any help please?
It runs just fine in both Firefox and Chrome for me. In my limited experience, this.c.pixelData typically comes when your conversion to a CamanInstance was not successfully created.
This can be because of many things, but one that isn't expected is that CamanJS won't let you use the same html identifier (class or id) for more than one object, even if you've swapped them out. So if you're running the two scripts above on the same page, it will cause errors.
Sorry, without being able to reproduce your error, it's hard to help more than that.

Categories

Resources