I'm just curious - is it possible to send by SVG image code in the following way?
<original div with inline SVG> -> Input field -> <final DIV>
I want to use following code:
Copy-1
<div id="source-1">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
</div>
<input name="dynamichidden-637" value="" id="pole" />
<br />
Copy-2
<div id="source-2"></div>
and Jquery:
jQuery( document ).ready(function( $ ) {
$('#copy-1').click(function() {
var value = $('#source-1').html();
var input = $('#pole');
input.val('')
input.val(input.val() + value);
return false;
});
$('#copy-2').click(function() {
$('#pole').appendTo('#source-2');
return false;
});
});
So my question is - is it possible to achieve it in that way? or using somehow other solution which will allow me to transfer svg code from one page to another without storing the data in Database? This is JSfiddle:
http://jsfiddle.net/v2br8/16/
You just need to create the copy using the value of the input:
var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');
or simply:
$($('#pole').val()).appendTo('#source-2');
DEMO
Try: source-2.innerHTML=source_1.innerHTML
Related
Using AJAX I send a svg image to Django using the following function:
function uploadSVG(){
var svgImage = document.getElementById("SVG");
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svgImage);
$(document).ready(function(){
$.post("ajax_upload_svg/",
{
csrfmiddlewaretoken: csrftoken,
svgImage: svgStr
},
function(){
console.log('Done')
});
});
}
In Django I end up with the svg image as a string using the following function:
def uploadSVG(request):
svgImg = request.POST.get('svgImage')
return HttpResponse('')
The string I get looks like this:
<svg xmlns="http://www.w3.org/2000/svg" id="SVG" width="460" height="300" style="border:2px solid #000000"><rect x="150" y="70" width="160" height="130" fill="#292b2c"/></svg>
How can I convert this svg string into a svg file?
The solution is:
with open("svgTest.svg", "w") as svg_file:
svg_file.write(svgImg)
This question already has answers here:
jquery's append not working with svg element?
(17 answers)
Closed 2 years ago.
I'm trying to use JQuery to create an SVG element. The contents of the SVG is generated from a list of strings which is where I'm having my issues.
I'm populating a variable called 'arr' by looping through several hundred items in my database and creating an svg rect shaped based on that data which then gets appended to 'arr'. How can i append this list of string elements to my main SVG element in order to properly display it?
The main points here are:
Arr is populated with a list of strings, each one representing a shape to go inside the svg
The final Arr will be several hundreds strings
var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="300"></svg>');
arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
mapSvg[0].append(arr);
$('#tile-map').append(mapSvg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div style="background:lightblue; padding:10px;">
<div id="tile-map">
</div>
<svg id='tile-map-svg' width="100" height="100">
<rect height="25" width="25" fill="red" class="tile"/>
</svg>
</div>
I also tried this and it didn't work either...
var mapSvg = $.parseHTML('<svg id="tile-map-svg" width="100%" height="600"></svg>');
arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
for (var i = 0; i < arr.length; i++) {
var el = $.parseHTML(arr[i])[0];
mapSvg[0].append(el);
}
$('#tile-map').append(mapSvg);
How about looping over all the elements in arr before parsing the html:
let html = '<svg id="tile-map-svg" width="100%" height="300">';
arr.forEach(shape => {
html += shape;
});
html += "</svg>";
const mapSvg = $.parseHTML(html);
$("#tile-map").append(mapSvg);
Or simply copy HTML without jQ for example:
var mapSvg = document.getElementById("tile-map");
var arr = [
'<rect height="50" width="50" fill="blue"/>',
'<rect height="20" width="20" fill="green"/>'
]
var s = "<svg id='tile-map-svg' width=100 height=100>"+
arr.join('\n')+
"</svg>";
mapSvg.innerHTML = s;
mapSvg.innerHTML += s;
mapSvg.parentElement.innerHTML += mapSvg.outerHTML.replace(/</g,'<').replace(/>/g,'>');
<div style="background:lightblue; padding:10px;">
<div id="tile-map">
</div>
</div>
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.
Hi im trying to set an image from an input box and if i click another image the box change his value and then the first image change his src but i dont know why is not working.This is my script
$(document).ready(function() {
$("#skin").change(function() {
var inputVal = $(this).val();
$("#container").attr("src", inputVal);
});
});
$(document).ready(function() {
$("#container2").click(function() {
var source = document.getElementById("container2").src;
$("#skin").val(source)
});
});
<input type="text" id="skin">
<img id="container" width="200px" height="200px" border-radius="50%">
<img id="container2" src="http://i.imgur.com/xt0IkTL.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
First of all, you are using jQuery.
So you don't have to use native javascript dom selector.
Second; you have already defined your document ready function. You don't need to call that again.
Wrap your code between the first document ready function.
I strongly recommend you to change your on change method to something else like pressing a button or trigger with something else.
After all these recommendation;
Here how you can do this:
<input id="source-changer" type="text" placeholder="Image url huh?" />
<img id="container" width="200px" height="200px" border-radius="50%"><img id="container2" src="https://i.ytimg.com/vi/PjDtgj7qR94/maxresdefault.jpg" width="100">
<!-- sample address here: https://pp.vk.me/c622424/v622424967/39c6c/6poIwEXow7U.jpg -->
<script>
$(document).ready(function() {
var firstImage = $('#container');
var secondImage = $('#container2');
$('input#source-changer').blur(function(){
var value = $(this).val();
if(value !== "") {
firstImage.attr('src', value);
}
});
secondImage.click(function(){
firstImage.attr('src', $(this).attr('src'));
});
});
</script>
Test here:
https://jsfiddle.net/upLdgb8y/1/
I have a html page that gets automatically refreshed every 1 ms. I did it using mata tag:
<html>
<head>
<title>My Page</title>
<meta http-equiv="refresh" content="0.001">
</head>
<body>
<img src=" 0.bmp" alt="Smiley face" height="100" width="200" />
</body>
</html>
Now my requirement is such that after every refresh I must load a new file. So in my folder I have files named: 0.bmp, 1.bmp, 2.bmp,... 1000.bmp, which will be loaded on the html file. i.e after every refresh a new file from the folder will be loaded. Basically the file name in
<img src=" 0.bmp" alt="Smiley face" height="100" width="200" />
will change from 0.bmp to 1...1000.bmp and so on.
How can we do this in html i.e change the file name dynamically?
Edited #1:
I have just realized that my problem is basically of animation. So given 1000 images stored in hard disk, I have to play them one by one on an HTML page. This should be as fast as possible. The only requirement is it must be on html pages, this is because these HTML pages will be accessed from a client in a network. the problem that I am thinking is slow playback because read/write to the disk may not be fast.
Edited # 2
After getting inputs from following answers, I was able to animate the images. The issue right now I am facing is the display rate is too small, and so fluctuations are coming up. I understand this is a problem of slow read/write from hard disk. So I guess if I can put these images in buffer i.e: System RAM, and write a html/js code to access the images from the RAM instead of the disk, the play back will be much faster. Can someone send me a sample code to, write images in RAM and use html/js code to access these images from RAM?
Note: as per the policy of stackoverflow, I am updating my question as and when I am solving various steps of the original problem.
What you are trying to do should not be done by refreshing continuously the web page, but by the use of Javascript.
Consider this method using JQUERY and setInterval():
See a working Fiddle Example!
HTML
<html>
<head>
<title>My Page</title>
</head>
<body>
<img src="path_to_image_01.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_02.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_03.jpg" alt="Smiley face" height="128" width="128" />
<img src="path_to_image_04.jpg" alt="Smiley face" height="128" width="128" />
</body>
</html>
JQUERY
$(document).ready(function() {
$('img:not(:first)').hide();
var refreshId = setInterval( function()
{
var $target = $('body img:first');
$target.hide().next().show();
$target.appendTo('body');
}, 1000);
});
What's being done
Hide all images
`$('img:not(:first)').hide();`
Initialize an interval of 1 sec that will collect the first image,
hide it, jump to the next image, show it, lastly move the previous
image to the end.
var refreshId = setInterval( function()
{
var $target = $('body img:first');
$target.hide().next().show();
$target.appendTo('body');
}, 1000);
This keeps on going animating the images every second that passes.
I am updating my answer based on a now different question.
You can use this plugin: https://code.google.com/p/jsmovie/ It does exactly what you want by animating a set of images.
Original Answer Below:
Although I'd agree with many of the other answers, it seems the OP needs to refresh the entire window instead of doing this via ajax without a page reload.
<img src="" alt="Smiley face" height="100" width="200" style="display:none" />
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
var imgIndex = 0;
$(document).ready(function() {
if (getParameterByName("index")!='') {
imgIndex = parseInt(getParameterByName("index"));
}
$('img').attr('src', imgIndex + '.bmp').show();
var refreshId = setInterval( function()
{
imgIndex++;
location.href = location.pathname + "?index=" + encodeURIComponent(imgIndex);
}, 1000); // 1 second update as needed
});
The following fiddle demonstrates this though I dont' have a serial set of images so the jsfiddle is a little different in that it updates an index of already set images forked from a previous answer but it does demonstrate the page reload.
http://jsfiddle.net/smf9w/1/
DON'T, really DON'T do this!!
Use JS instead. Use setInterval() and use a time span greater than 1m...
As others say, this is not the way to do it. But you can use cookie or localstorage on modern browsers.
function getData() {
var c = 0;
if ("localStorage" in window && null !== window.localStorage)
c = localStorage.count;
else {
count = document.cookie.split("count=");
c = c[1].split(";");
c = c[0];
}
return c;
}
function updateData(count){
if ("localStorage" in window && null !== window.localStorage)
localStorage.count = count;
else {
var e = new Date;
e.setTime(e.getTime() + 31536E6);
e = e.toGMTString();
document.cookie = "count=" + count + "; expires=" + e + "; path=/"
}
}
var count = getData();
document.write('<img src="'+ count +'".bmp" alt="Smiley face" height="100" width="200" />');
updateData(++count);
Code above is just a sample.