I have recently gotten into the d3 javascript library.
I have made a scatter plot chart that grabs random values from an array
Here is the code
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="d3.v3.js"></script>
<style>
.axis path,
.axis line
{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text
{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//fix padding issues
var padding = 30;
//var dataset = [
// [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
// [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150], [77, 69], [290, 68]
// ];
var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++) {
var newNumber1 = Math.round(Math.random() * xRange);
var newNumber2 = Math.round(Math.random() * yRange);
dataset.push([newNumber1, newNumber2]);
}
//Create scale functions
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]); //use scale function
})
.attr("cy", function(d) {
return yScale(d[1]); //use scale function
})
.attr("r", function(d) {
return rScale(d[1]);
});
//create svg text
//svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d) {
// return d[0] + "," + d[1];
// })
// .attr("x", function(d) {
// return xScale(d[0]);
// })
// .attr("y", function(d) {
// return yScale(d[1]);
// })
// .attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill", "red");
//create axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//place axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//define y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//place y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
As you can see, it graphs the values that get randomly created and placed into an array. This is great, but I'd like to make one small change. I want to create a php file that generates random numbers and have those be plotted instead.
The php file is simple enough
<?php
echo rand(1, 50);
?>
So how do i actually
1. Get the php file to generate 20 random numbers
2. Actually place those numbers into the array for scatter graph.
Thanks!
This PHP code will do the trick:
<?php
$i=20;
while($i > 0) {
echo rand(1, 50);
$i--;
}
?>
To generate the random numbers in PHP, push items to an array, then echo:
$count = 0;
while($count < 20) {
$numbers[$count] = rand(1, 50);
$count++;
}
echo json_encode($numbers);
This should produce something like:
[35,5,46,25,22,47,23,27,15,17,30,27,17,36,24,40,10,30,14,20]
Using JavaScript and AJAX, get the PHP page and parse using JSON.parse
Getting the PHP page and parsing (using jQuery):
var random = [];
$.get("random.php",function(data) {
random = JSON.parse(data);
}
Note: for the PHP script, you could also use array_push, but I've used the above just because we already have a while loop.
Related
I'm trying to generate images (jpg or png) from HTML and I've already tried PhantomJS (via jonnyw/php-phantomjs in php) and wkhtmltoimage but they both have the same problem when generating the image. Any border radius, images, or fonts all have really bad jagged edges and aren't crisp at all.
At first I thought it was no fonts being loaded but my font-icons work fine, they're just really poor quality. I have 100 quality set and I get the same results when using Phantomjs or wkhtmltoimage on any website.
Does anyone know what could be causing this?
UPDATE
UPDATE 2
Here's the code used from jonnyw/php-phantomjs:
$client = Client::getInstance();
$client->isLazy();
$client->getEngine()->setPath('phantomjs');
$client->getEngine()->debug(true);
$width = 560;
$height = 670;
$top = 1;
$left = 1;
$request = $client->getMessageFactory()->createCaptureRequest('https://myurltoscreengrab.com', 'GET');
$request->setOutputFile('uploads/stats/test.png');
$request->setFormat('png');
$request->setViewportSize($width, $height);
$request->setCaptureDimensions($width, $height, $top, $left);
$response = $client->getMessageFactory()->createResponse();
// Send the request
$client->send($request, $response);
JS Being Used
/**
* Set up page and script parameters
*/
var page = require('webpage').create(),
system = require('system'),
response = {},
debug = [],
logs = [],
procedure = {},
resources = 0,
timeout;
/**
* Global variables
*/
/**
* Define width & height of capture
*/
var rectTop = 1,
rectLeft = 1,
rectWidth = 530,
rectHeight = 670;
if(rectWidth && rectHeight) {
debug.push(new Date().toISOString().slice(0, -5) + ' [INFO] PhantomJS - Set capture clipping size ~ top: ' + rectTop + ' left: ' + rectLeft + ' ' + rectWidth + 'x' + rectHeight);
page.clipRect = {
top: rectTop,
left: rectLeft,
width: rectWidth,
height: rectHeight
};
}
/**
* Define paper size.
*/
/**
* Define viewport size.
*/
var viewportWidth = 530,
viewportHeight = 670;
if(viewportWidth && viewportHeight) {
debug.push(new Date().toISOString().slice(0, -5) + ' [INFO] PhantomJS - Set viewport size ~ width: ' + viewportWidth + ' height: ' + viewportHeight);
page.viewportSize = {
width: viewportWidth,
height: viewportHeight
};
}
/**
* Define custom headers.
*/
page.customHeaders = {};
/**
* Page settings
*/
page.settings.resourceTimeout = 5000;
/**
* On resource timeout
*/
page.onResourceTimeout = function (error) {
response = error;
response.status = error.errorCode;
};
/**
* On resource requested
*/
page.onResourceRequested = function (req) {
resources++;
window.clearTimeout(timeout);
};
/**
* On resource received
*/
page.onResourceReceived = function (res) {
var resource = res; // To be removed in version 5.0
if(!response.status) {
response = resource;
}
if(!res.stage || res.stage === 'end') {
resources--;
if (resources === 0) {
timeout = window.setTimeout(function() {
procedure.execute('success');
}, 300);
}
}
};
/**
* Handle page errors
*/
page.onError = function (msg, trace) {
var error = {
message: msg,
trace: []
};
trace.forEach(function(t) {
error.trace.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function + ')' : ''));
});
logs.push(error);
};
/**
* Handle global errors
*/
phantom.onError = function(msg, trace) {
var stack = [];
trace.forEach(function(t) {
stack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line + (t.function ? ' (in function ' + t.function + ')' : ''));
});
response.status = 500;
response.content = msg;
response.console = stack;
system.stdout.write(JSON.stringify(response, undefined, 4));
phantom.exit(1);
};
/**
* Open page
*/
page.open ('https://boxstat.co/widgets/image/stats/2898784/18/500/FFFFFF-EEEEEE-fafafa-333333-85bd4d-ffffff-e4f8cf-71b42f-fddfc1-bd6610-fad3c9-c85639-fac9c9-c52e2e', 'GET', '', function (status) {
page.evaluate(function() {
var styles = {};
for(var property in styles) {
document.body.style[property] = styles[property];
}
});
window.setTimeout(function () {
procedure.execute(status);
}, 4800);
});
/**
* Execute procedure
*/
procedure.execute = function (status) {
if (status === 'success') {
try {
page.render('uploads/stats/test.png', {
format: 'png',
quality: 100,
});
response.content = page.evaluate(function () {
return document.getElementsByTagName('html')[0].innerHTML
});
} catch(e) {
response.status = 500;
response.content = e.message;
}
}
response.console = logs;
system.stderr.write(debug.join('\\n') + '\\n');
system.stdout.write(JSON.stringify(response, undefined, 4));
phantom.exit();
};
Add viewportSize and zoomFactor in your phantomjs like:
await page.property('viewportSize', { height: 1600, width: 3600 });
await page.property('zoomFactor', 4);
And/or add:
<script>
window.devicePixelRatio = 4;
</script>
Try setting the zoom factor using a higher DPI for paper in relation to screen DPI:
page.zoomFactor = 300 / 96; // or use / 72
Must be set after page size is defined.
I also found 2 functions that attempt to deal with this sort of problem...
Function 1
var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
var scaleFactor = Math.floor(dpi / 96);
// Save original size of element
var originalWidth = srcEl.offsetWidth;
var originalHeight = srcEl.offsetHeight;
// Save original document size
var originalBodyWidth = document.body.offsetWidth;
var originalBodyHeight = document.body.offsetHeight;
// Add style: transform: scale() to srcEl
srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
srcEl.style.transformOrigin = "left top";
// create wrapper for srcEl to add hardcoded height/width
var srcElWrapper = document.createElement('div');
srcElWrapper.id = srcEl.id + '-wrapper';
srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
// insert wrapper before srcEl in the DOM tree
srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
// move srcEl into wrapper
srcElWrapper.appendChild(srcEl);
// Temporarily remove height/width constraints as necessary
document.body.style.width = originalBodyWidth*scaleFactor +"px";
document.body.style.height = originalBodyHeight*scaleFactor +"px";
window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
html2canvas(srcElWrapper, {
onrendered: function(canvas) {
destIMG.src = canvas.toDataURL("image/png");
srcElWrapper.style.display = "none";
// Reset height/width constraints
document.body.style.width = originalBodyWidth + "px";
document.body.style.height = originalBodyHeight + "px";
}
});
};
Usage
var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)
Function 2
function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
// Save original size of element
var originalWidth = srcEl.offsetWidth;
var originalHeight = srcEl.offsetHeight;
// Force px size (no %, EMs, etc)
srcEl.style.width = originalWidth + "px";
srcEl.style.height = originalHeight + "px";
// Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
// See html2canvas issues #790, #820, #893, #922
srcEl.style.position = "absolute";
srcEl.style.top = "0";
srcEl.style.left = "0";
// Create scaled canvas
var scaledCanvas = document.createElement("canvas");
scaledCanvas.width = originalWidth * scaleFactor;
scaledCanvas.height = originalHeight * scaleFactor;
scaledCanvas.style.width = originalWidth + "px";
scaledCanvas.style.height = originalHeight + "px";
var scaledContext = scaledCanvas.getContext("2d");
scaledContext.scale(scaleFactor, scaleFactor);
html2canvas(srcEl, { canvas: scaledCanvas })
.then(function(canvas) {
destIMG.src = canvas.toDataURL("image/png");
srcEl.style.display = "none";
});
};
Usage
var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI
I hope this helps you. Now let me tell you what I would do. I've been making browser automation scripts for a while now and PhantomJS is, IMO, not so good. Consider using NightmareJS. It's MUCH faster than Phantom and easier to use.
I am working on a graph that shows the temperature, date and time. Until now everything is working pretty good, but in order to get the new values from my MySQL database in need to completely refresh my page.
I want to be able to update the graph without pressing the Refresh button.
This is the code:
<?php require($_SERVER['DOCUMENT_ROOT'] . '/assets/php/getTemp.php' ); ?>
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>RPi</title>
</head>
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 120px;
height: 28px;
padding: 3px;
font: 12px sans-serif;
background: lightgrey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
body { font: 14px Arial;}
path {
stroke: #FF8C00;
stroke-width: 3;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 2;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: grey;
stroke-opacity: 0.3;
shape-rendering: geometricPrecision;
}
.grid path {
stroke-width: 0;
}
</style>
<body>
<div id="option">
<input name="updateButton"
type="button"
value="Update"
onclick="updateData()"
/>
</div>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 800 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var formatTime = d3.time.format("%d-%m-%Y %H:%M:%S");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom");
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.datetime); })
.y(function(d) { return y(d.temperature); });
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
<?php echo "data=".$json_data.";" ?>
data.forEach(function(d) {
d.datetime = parseDate(d.datetime);
d.temperature = +d.temperature;
});
x.domain(d3.extent(data, function(d) { return d.datetime; }));
y.domain([0, d3.max(data, function(d) { return d.temperature; })]);
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4)
.attr("cx", function(d) { return x(d.datetime); })
.attr("cy", function(d) { return y(d.temperature); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", 1);
div.html(formatTime(d.datetime) + "<br/>" + d.temperature + " ℃")
.style("left", (d3.event.pageX + 16) + "px")
.style("top", (d3.event.pageY + 16) + "px")
.style("position", "absolute");
})
.on("mouseout", function(d) {
div.transition()
.duration(50)
.style("opacity", 0);
});
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
</script>
</body>
I tried to do this:
function updateData() {
//d3.json("/assets/php/getTemp.php", function(error, data) {
<?php echo "data=".$json_data.";" ?>
data.forEach(function(d) {
d3.select("body").selectAll("svg")
d.datetime = parseDate(d.datetime);
d.temperature = +d.temperature;
});
x.domain(d3.extent(data, function(d) { return d.datetime; }));
y.domain([0, d3.max(data, function(d) { return d.temperature; })]);
var svg = d3.select("body").transition();
svg.select(".line")
.duration(750)
.attr("d", valueline(data));
svg.select(".x.axis")
.duration(750)
.call(xAxis);
svg.select(".y.axis")
.duration(750)
.call(yAxis);
};
but nothing happens, not even an error.
If it matters this is the PHP code used to get the temperatures and time form MySQL:
<?php
$hostname = 'localhost';
$username = 'root';
$password = 'admin';
try {
$dbh = new PDO("mysql:host=$hostname;dbname=temp_database",
$username, $password);
$sth = $dbh->prepare("
SELECT `datetime`, `temperature` FROM `tempLog`
");
$sth->execute();
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
$json_data = json_encode($result);
?>
What i need to do ?
Look into using the d3.json function. This lets you get json from php scripts without reloading the entire page from scratch. It's AJAX stuff, but the d3 helper functions hide the details.
https://github.com/mbostock/d3/wiki/Requests
PS. Remember, it will be an asynchronous call, so see the accepted answer here as well:
JSON output from PHP using d3.json
As to why it doesn't work currently, my hunch*, though there's not enough info to confirm, is that there's no change because it's always the same data, so nothing will change
<?php echo "data=".$json_data.";" ?>
That line^^^ in updateData is evaluated once at the start and then the whole function is plonked into the javascript realm. However many times you then call updateData, that previously generated javascript variable (data={some_json}) won't change without reloading the php page that generated updateData, even if you call that database related php that generates the server side variable.
*could be nonsense, but the bit above the line is still right
I recently found using stage.toDataURL for saving stage content as a image.(KineticJS version 5.0.1)
Custom Shape drawFunc content with core HTML5 canvas object will not applied in image after saving an image.
###################### Images
Please see attached image to get better clarity.
1)Original canvas(stage).
https://f.cloud.github.com/assets/1320926/2300781/c8167c30-a107-11e3-9b61-acf94005c252.png
2)Image after saving stage content
test1
https://f.cloud.github.com/assets/1320926/2300784/fc5343b6-a107-11e3-8c69-07cccc4d7ac4.png
We see that the vertical string "Sample Text" will not saved or it's invisible whatever it is.
###################### Code
1)Here is my code of shape object where line was printed vertically "Sample Text"
var sampleText = new Kinetic.Shape({
drawFunc: function(context) {
var ctx=this.getContext()._context;
ctx.beginPath();
var maxWidth = 2;
var lineHeight = 25;
var x = 415;
var y = 700;
var text = 'Sample Text';
ctx.font = '15pt Calibri';
ctx.fillStyle = 'green';
//Function for vetical text display
wrapText(ctx, text, x, y, maxWidth, lineHeight);
ctx.closePath();
ctx.fill();
ctx.restore();
},
});
//wrapText function if needed
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split('');
var line = '';
//alert(context);
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = 20;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
2)Stage code for saving an image
stage.toDataURL({
callback: function(dataUrl) {
/*
* here you can do anything you like with the data url.
* In this tutorial we'll just open the url with the browser
* so that you can see the result as an image
*/
$('#theimage').attr('src',dataUrl);
$.ajax({
type: "POST",
url: "save.php",
data: { imageData: dataUrl },
});
}
});
Please advise.
Thanks in advance for your time and consideration.
-Naitik.
You chould not use this.getContext()._context because _context is "private" property (starts with undescore). It is not KinetiJS way. Use context as in an example: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
Your solution:
var sampleText = new Kinetic.Shape({
drawFunc: function(ctx) {
ctx.beginPath();
var maxWidth = 2;
var lineHeight = 25;
var x = 0;
var y = 0;
var text = 'Sample Text';
ctx.setAttr("font", '15pt Calibri');
ctx.setAttr('fillStyle','green');
//Function for vetical text display
wrapText(ctx, text, x, y, maxWidth, lineHeight);
ctx.closePath();
// KineticJS specific context method
ctx.fillStrokeShape(this);
}
});
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split('');
var line = '';
//alert(context);
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context._context.measureText(testLine);
var testWidth = 20;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
Demo: http://jsbin.com/xolen/1/edit
Note: KineticJS's context has not measureText method, so you have to use _context property. I think measureText method will be added soon.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
i am storing html in database but database but server responds with 403 forbidden error... and i am storing html just as code not for actual rendering...
for example, this question is posted successfully and on my server it would give 403 error...
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<script>
var angularVelocity = 6;
var angularVelocities = [];
var lastRotations = 0;
var controlled = false;
var numWedges = 25;
var angularFriction = 0.2;
var target, activeWedge, stage, layer, wheel, pointer;
function getAverageAngularVelocity() {
var total = 0;
var len = angularVelocities.length;
if(len === 0) {
return 0;
}
for(var n = 0; n < len; n++) {
total += angularVelocities[n];
}
return total / len;
}
function purifyColor(color) {
var randIndex = Math.round(Math.random() * 3);
color[randIndex] = 0;
return color;
}
function getRandomColor() {
var r = 100 + Math.round(Math.random() * 55);
var g = 100 + Math.round(Math.random() * 55);
var b = 100 + Math.round(Math.random() * 55);
var color = [r, g, b];
color = purifyColor(color);
color = purifyColor(color);
return color;
}
function bind() {
wheel.on('mousedown', function(evt) {
angularVelocity = 0;
controlled = true;
target = evt.shape;
});
// add listeners to container
document.body.addEventListener('mouseup', function() {
controlled = false;
angularVelocity = getAverageAngularVelocity() * 5;
if(angularVelocity > 20) {
angularVelocity = 20;
}
else if(angularVelocity < -20) {
angularVelocity = -20;
}
angularVelocities = [];
}, false);
document.body.addEventListener('mousemove', function(evt) {
var mousePos = stage.getMousePosition();
if(controlled && mousePos && target) {
var x = mousePos.x - wheel.getX();
var y = mousePos.y - wheel.getY();
var atan = Math.atan(y / x);
var rotation = x >= 0 ? atan : atan + Math.PI;
var targetGroup = target.getParent();
wheel.setRotation(rotation - targetGroup.startRotation - (target.getAngle() / 2));
}
}, false);
}
function getRandomReward() {
var mainDigit = Math.round(Math.random() * 9);
return mainDigit + '\n0\n0';
}
function addWedge(n) {
var s = getRandomColor();
var reward = getRandomReward();
var r = s[0];
var g = s[1];
var b = s[2];
var angle = 2 * Math.PI / numWedges;
var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
r += 100;
g += 100;
b += 100;
var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';
var wedge = new Kinetic.Group({
rotation: 2 * n * Math.PI / numWedges,
});
var wedgeBackground = new Kinetic.Wedge({
radius: 400,
angle: angle,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 400,
fillRadialGradientColorStops: [0, startColor, 1, endColor],
fill: '#64e9f8',
fillPriority: 'radial-gradient',
stroke: '#ccc',
strokeWidth: 2
});
wedge.add(wedgeBackground);
var text = new Kinetic.Text({
text: reward,
fontFamily: 'Calibri',
fontSize: 50,
fill: 'white',
align: 'center',
stroke: 'yellow',
strokeWidth: 1
});
// cache text as an image to improve performance
text.toImage({
width: text.getWidth(),
height: text.getHeight(),
callback: function(img) {
var cachedText = new Kinetic.Image({
image: img,
listening: false,
rotation: (Math.PI + angle) / 2,
x: 380,
y: 30
});
wedge.add(cachedText);
layer.draw();
}
});
wedge.startRotation = wedge.getRotation();
wheel.add(wedge);
}
function animate(frame) {
// handle wheel spin
var angularVelocityChange = angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
angularVelocity -= angularVelocityChange;
if(controlled) {
if(angularVelocities.length > 10) {
angularVelocities.shift();
}
angularVelocities.push((wheel.getRotation() - lastRotation) * 1000 / frame.timeDiff);
}
else {
wheel.rotate(frame.timeDiff * angularVelocity / 1000);
}
lastRotation = wheel.getRotation();
// activate / deactivate wedges based on point intersection
var intersection = stage.getIntersection({
x: stage.getWidth() / 2,
y: 100
});
if(intersection) {
var shape = intersection.shape;
if(shape && (!activeWedge || (shape._id !== activeWedge._id))) {
pointer.setY(20);
pointer.transitionTo({
y: 30,
easing: 'elastic-ease-out',
duration: 0.3
});
if(activeWedge) {
activeWedge.setFillPriority('radial-gradient');
}
shape.setFillPriority('fill');
activeWedge = shape;
}
}
}
function init() {
stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
layer = new Kinetic.Layer();
wheel = new Kinetic.Group({
x: stage.getWidth() / 2,
y: 410
});
for(var n = 0; n < numWedges; n++) {
addWedge(n);
}
pointer = new Kinetic.Wedge({
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 30,
fillRadialGradientColorStops: [0, 'white', 1, 'red'],
stroke: 'white',
strokeWidth: 2,
lineJoin: 'round',
angleDeg: 30,
radius: 30,
x: stage.getWidth() / 2,
y: 30,
rotationDeg: -105,
shadowColor: 'black',
shadowOffset: 3,
shadowBlur: 2,
shadowOpacity: 0.5
});
// add components to the stage
layer.add(wheel);
layer.add(pointer);
stage.add(layer);
// bind events
bind();
var anim = new Kinetic.Animation(animate, layer);
// wait one second and then spin the wheel
setTimeout(function() {
anim.start();
}, 1000);
}
init();
</script>
</body>
</html>
No, it is not safe to do that. Let's say you output the html like this:
<code>
user_submitted_html
</code
and the user submits
</code>
<script>
do_something_malicious();
</script>
<code>
putting that together will give you
<code>
</code>
<script>
do_something_malicious();
</script>
<code>
</code>
So the user's script is no longer in a code block.
You should serialize your data before putting it in the DB, then unserialize it when you take it out. http://php.net/manual/en/function.serialize.php
Edit: Sorry for answering that too fast... As sys.stderr said, you must sanitize the data BEFORE serializing / displaying it.
It is safe as long as you escape all of the html characters in the input. If using php you want to run the content through the built-in function htmlspecialchars(). This will prevent the web browser from rendering the html and instead show the original code.
I need to implement a custom info window on my google map.
I found this custom info window here : Creating custom info windows in Google Maps
I used the code provided by Googles Developers page , to create the map and everything worked great with the typical info window. Now i changed my code to try and implement the above custom info window , called "infobox" . However it is not working. I am not sure if i used the code correctly.
This is my code for the google map. Note the infoBox function , is the custom info window.
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL and Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 15,
mapTypeId: 'roadmap'
});
//var infoWindow = new google.maps.InfoWindow;
infobox = new InfoBox({ width: "260px" }); // initialize
// Change this depending on the name of your PHP file
downloadUrl("testing.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infobox, html);
}
});
}
function bindInfoWindow(marker, map, infobox, html) {
google.maps.event.addListener(marker, 'click', function() {
//infoWindow.setContent(html);
//infoWindow.open(map, marker);
infobox.setContent(html); // set content
infobox.open(map, marker); // open on the marker
infobox.draw(); // to redraw if infobox size changed
//infobox.close();
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function InfoBox(opt_opts) {
opt_opts = opt_opts || {};
this.imgPath='img/infoBox/';
google.maps.OverlayView.apply(this, arguments);
// Standard options (in common with google.maps.InfoWindow):
this.content_ = opt_opts.content || "";
this.maxWidth_ = opt_opts.maxWidth || 0;
this.pixelOffset_ = opt_opts.pixelOffset || new google.maps.Size(0, 0);
this.position_ = opt_opts.position || new google.maps.LatLng(0, 0);
this.zIndex_ = opt_opts.zIndex || null;
// Additional options (unique to InfoBox):
this.boxStyle_ = opt_opts || {};
this.infoBoxClearance_ = new google.maps.Size(1, 1);
this.isHidden_ = opt_opts.isHidden || false;
this.pane_ = "overlayMouseTarget";
this.enableEventPropagation_ = opt_opts.enableEventPropagation || false;
this.div_ = null;
this.closeListener_ = null;
this.eventListener1_ = null;
this.eventListener2_ = null;
this.eventListener3_ = null;
this.contextListener_ = null;
this.fixedWidthSet_ = null;
}
/* InfoBox extends OverlayView in the Google Maps API v3. */
InfoBox.prototype = new google.maps.OverlayView();
// Creates the DIV representing the InfoBox. #private
InfoBox.prototype.createInfoBoxDiv_ = function(){
var bw, me = this;
// This handler prevents an event in the InfoBox from being passed on to the map.
var cancelHandler = function (e){ e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); };
// This handler ignores the current event in the InfoBox and conditionally prevents the event from being passed on to the map. It is used for the contextmenu event.
var ignoreHandler = function (e) { e.returnValue = false; if (e.preventDefault) e.preventDefault(); if (!me.enableEventPropagation_){ e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } };
if (!this.div_){ // first time create
this.div_ = document.createElement("div");
this.div_.className = 'infowindow';
this.setBoxStyle_();
// Apply required styles:
if (this.zIndex_ !== null) this.div_.style.zIndex = this.zIndex_;
this.div_.contentDiv = document.createElement('div');
this.div_.contentDiv.className = 'infowindow-wrapper';
this.div_.contentDiv.innerHTML = this.content_;
this.div_.innerHTML = '<img src="'+this.imgPath+'close.png" align="right" class="infowindow-close">';
this.div_.appendChild(this.div_.contentDiv);
// Add the InfoBox DIV to the DOM
this.getPanes()[this.pane_].appendChild(this.div_);
this.addClickHandler_();
if (this.div_.style.width) this.fixedWidthSet_ = true;
else {
if (this.maxWidth_ !== 0 && this.div_.offsetWidth > this.maxWidth_) {
this.div_.style.width = this.maxWidth_;
this.fixedWidthSet_ = true;
}
else { // The following code is needed to overcome problems with MSIE
bw = this.getBoxWidths_();
this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + "px";
this.fixedWidthSet_ = false;
}
}
//add shadow
this.shadowContainer_ = document.createElement("div");
this.shadowContainer_.style.position='absolute';
this.shadowContainer_.style.display = 'block';
this.shadowContainer_.style.zIndex='-99';
this.getPanes()['overlayShadow'].appendChild(this.shadowContainer_);
this.shadow = document.createElement('img');
this.shadow.src = this.imgPath+'shadow.png';
this.shadow.style.position='absolute';
this.shadow.style.width = '100%';
this.shadow.style.height = '100%';
this.shadowContainer_.appendChild(this.shadow);
if (!this.enableEventPropagation_) {
this.eventListener1_ = google.maps.event.addDomListener(this.div_.contentDiv, "mousedown", cancelHandler);
this.eventListener2_ = google.maps.event.addDomListener(this.div_, "click", function(e){
e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation();
if (GoogleMap && GoogleMap.closeEditors) GoogleMap.closeEditors(true);
});
//this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", cancelHandler);
try{ this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", facilityEditor);}catch(e){}
}
this.contextListener_ = google.maps.event.addDomListener(this.div_, "contextmenu", ignoreHandler);
var contentWidth = parseInt(this.div_.style.width.slice(0,-2)), contentHeight = this.div_.offsetHeight;
this.wrapperParts = { //create an object to reference each image
tl:{l:-26, t:-26, w:26, h:26},
t:{l:0, t:-26, w:contentWidth, h:26},
tr:{l:contentWidth, t:-26, w:26, h:26},
l:{l:-26, t:0, w:26, h:contentHeight},
r:{l:contentWidth, t:0, w:26, h: contentHeight },
bl:{l:-26, t:contentHeight, w:26, h:26},
b:{l:0, t:contentHeight, w:contentWidth, h:26},
br:{l:contentWidth, t:contentHeight, w:26, h:26},
p:{l:contentWidth-170, t:contentHeight+18, w:92, h:77 }
}
for (i in this.wrapperParts){ //create the image DOM objects
var img = document.createElement('img');
img.src = this.imgPath + i + '.png'; //load the image from your local image directory based on the property name of the wrapperParts object
img.style.position='absolute'; //set the appropriate positioning attributes
img.style.top=this.wrapperParts[i].t+'px';
img.style.left=this.wrapperParts[i].l+'px';
img.style.width=this.wrapperParts[i].w+'px';
img.style.height=this.wrapperParts[i].h+'px';
this.div_.appendChild(img);
this.wrapperParts[i].img = img;
}
google.maps.event.trigger(this, "domready");
}
else {
var contentWidth = parseInt(this.div_.style.width.slice(0,-2)), contentHeight = this.div_.offsetHeight, twp=this.wrapperParts;
twp.t.img.style.width=contentWidth+'px';
twp.tr.img.style.left=contentWidth+'px';
twp.l.img.style.height=contentHeight+'px';
twp.r.img.style.left=contentWidth+'px';
twp.r.img.style.height=contentHeight+'px';
twp.bl.img.style.top=contentHeight+'px';
twp.b.img.style.top=contentHeight+'px';
twp.b.img.style.width=contentWidth+'px';
twp.br.img.style.left=contentWidth+'px';
twp.br.img.style.top=contentHeight+'px';
twp.p.img.style.left=(contentWidth-170)+'px';
twp.p.img.style.top=(contentHeight+18)+'px';
}
};
InfoBox.prototype.addClickHandler_=function(){
this.closeListener_ = google.maps.event.addDomListener(this.div_.firstChild, 'click', this.getCloseClickHandler_());
try{ this.eventListener3_ = google.maps.event.addDomListener(this.div_, "dblclick", facilityEditor);}catch(e){}
};
InfoBox.prototype.getCloseClickHandler_=function () { var me = this; return function(){ me.close(); google.maps.event.trigger(me, "closeclick"); }; };
//Pans the map so that the InfoBox appears entirely within the map's visible area. #private
InfoBox.prototype.panBox_ = function (disablePan) {
if (!disablePan) {
var map = this.getMap();
var bounds = map.getBounds();
// The degrees per pixel
var mapDiv = map.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var boundsSpan = bounds.toSpan();
var longSpan = boundsSpan.lng();
var latSpan = boundsSpan.lat();
var degPixelX = longSpan / mapWidth;
var degPixelY = latSpan / mapHeight;
// The bounds of the map
var mapWestLng = bounds.getSouthWest().lng();
var mapEastLng = bounds.getNorthEast().lng();
var mapNorthLat = bounds.getNorthEast().lat();
var mapSouthLat = bounds.getSouthWest().lat();
// The bounds of the box
var position = this.position_;
var iwOffsetX = this.pixelOffset_.width;
var iwOffsetY = this.pixelOffset_.height;
var padX = this.infoBoxClearance_.width;
var padY = this.infoBoxClearance_.height;
var iwWestLng = position.lng() + (iwOffsetX - padX - this.div_.contentDiv.offsetWidth/2 - 450) * degPixelX; // 450 - move right - from under the sidebar
var iwEastLng = position.lng() + (iwOffsetX + padX + 220) * degPixelX;
var iwNorthLat = position.lat() - (iwOffsetY - padY - this.div_.contentDiv.offsetHeight - 180) * degPixelY; // 180 - move down - from under the top search bar
var iwSouthLat = position.lat() - (iwOffsetY + padY + 20) * degPixelY;
// Calculate center shift
var shiftLng = (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) + (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
var shiftLat = (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) + (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
if (!(shiftLat === 0 && shiftLng === 0)) {
// Move the map to the new shifted center.
var c = map.getCenter();
map.setCenter(new google.maps.LatLng(c.lat() - shiftLat, c.lng() - shiftLng));
}
}
};
// Sets the style of the InfoBox. #private
InfoBox.prototype.setBoxStyle_ = function () {
var i;
var boxStyle = this.boxStyle_;
for (i in boxStyle) if (boxStyle.hasOwnProperty(i)) this.div_.style[i] = boxStyle[i];
// Fix up opacity style for benefit of MSIE:
if (typeof this.div_.style.opacity !== "undefined") this.div_.style.filter = "alpha(opacity=" + (this.div_.style.opacity * 100) + ")";
};
// Get the widths of the borders of the InfoBox. #private; #return {Object} widths object (top, bottom left, right)
InfoBox.prototype.getBoxWidths_ = function () {
var computedStyle;
var bw = {top: 0, bottom: 0, left: 0, right: 0};
var box = this.div_;
if (document.defaultView && document.defaultView.getComputedStyle) {
computedStyle = box.ownerDocument.defaultView.getComputedStyle(box, "");
if (computedStyle) {
// The computed styles are always in pixel units (good!)
bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;
bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;
bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;
}
}
else if (document.documentElement.currentStyle) { // MSIE
if (box.currentStyle) {
// The current styles may not be in pixel units, but assume they are (bad!)
bw.top = parseInt(box.currentStyle.borderTopWidth, 10) || 0;
bw.bottom = parseInt(box.currentStyle.borderBottomWidth, 10) || 0;
bw.left = parseInt(box.currentStyle.borderLeftWidth, 10) || 0;
bw.right = parseInt(box.currentStyle.borderRightWidth, 10) || 0;
}
}
return bw;
};
// Invoked when <tt>close</tt> is called. Do not call it directly.
InfoBox.prototype.onRemove = function () {
if (this.div_) {
this.shadowContainer_.parentNode.removeChild(this.shadowContainer_);
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
//Draws the InfoBox based on the current map projection and zoom level.
InfoBox.prototype.draw = function(){
this.createInfoBoxDiv_();
var pixPosition = this.getProjection().fromLatLngToDivPixel(this.position_);
this.div_.style.left = (pixPosition.x - this.div_.offsetWidth + 180 ) + "px";
this.div_.style.top = (pixPosition.y - this.div_.offsetHeight - 125) + "px";
this.shadowContainer_.style.left = (pixPosition.x - this.div_.offsetWidth + 220 ) + 'px';
this.shadowContainer_.style.top = (pixPosition.y - this.div_.offsetHeight - 130) + "px";
this.shadowContainer_.style.height = (this.div_.offsetHeight+100 ) + 'px';
this.shadowContainer_.style.width = (this.div_.offsetWidth+100 ) + 'px';
if (this.isHidden_) this.div_.style.visibility = 'hidden';
else this.div_.style.visibility = "visible";
this.panBox_();
};
InfoBox.prototype.setContent = function(content){
this.content_ = content;
if (this.div_){// Odd code required to make things work with MSIE.
this.div_.style.visibility='hidden'
if (!this.fixedWidthSet_) this.div_.style.width = "";
this.div_.contentDiv.innerHTML = content;
// Perverse code required to make things work with MSIE. (Ensures the close box does, in fact, float to the right.)
if (!this.fixedWidthSet_){ this.div_.style.width = this.div_.offsetWidth + "px"; this.div_.contentDiv.innerHTML = content; }
this.addClickHandler_();
}
// This event is fired when the content of the InfoBox changes. #name InfoBox#content_changed; #event
google.maps.event.trigger(this, "content_changed");
};
//Sets the geographic location of the InfoBox. #param {LatLng} latlng
InfoBox.prototype.setPosition = function (latlng) {
this.position_ = latlng;
if (this.div_) this.draw();
//This event is fired when the position of the InfoBox changes. #name InfoBox#position_changed; #event
google.maps.event.trigger(this, "position_changed");
};
InfoBox.prototype.getContent = function () { return this.content_; }; //Returns the content of the InfoBox. #returns {string}
InfoBox.prototype.show = function (){ this.isHidden_ = false; this.div_.style.visibility = "visible"; }; //Shows the InfoBox.
InfoBox.prototype.hide = function (){ this.isHidden_ = true; this.div_.style.visibility = "hidden"; }; //Hides the InfoBox.
InfoBox.prototype.open = function (map, anchor) {
if (anchor) this.position_ = anchor.getPosition();
this.setMap(map);
};
//Removes the InfoBox from the map.
InfoBox.prototype.close = function (){
if (this.closeListener_) {
google.maps.event.removeListener(this.closeListener_);
this.closeListener_ = null;
}
if (this.contextListener_) {
google.maps.event.removeListener(this.contextListener_);
this.contextListener_ = null;
}
this.setMap(null);
};
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 100%; height: 600px"></div>
</body>
</html>
In the above code , i just changed everything mentioning infowindow , with the new infobox , and added the new function InfoBox(). However i am not sure , how and where i should use the
infobox.setContent(html); // set content
infobox.open(map, marker); // open on the marker
infobox.draw(); // to redraw if infobox size changed
infobox.close();
Where should i use the infobox.close() function? In my code i commented this line , cause i didnt know how to use it.
I believe your missing a position: absolute style for the infobox and also background color if it's not set in the css (originally I had that set in css, that's why it worked for me :-))
look for this line in your code:
this.div_.className = 'infowindow';
and add this below:
this.div_.style.position = 'absolute';
this.div_.style.backgroundColor = '#fff';
You should also add some images for the infobox as the whole box is build based on the images (you'll find references in the script).