I wonder if there is a tool that could be used for easy generation of complex physics bodies in SpriteKit. I would like to have a volume based physical bodies with polygon-type shapes. SpriteKit allows to create such bodies with that method:
+ (SKPhysicsBody *)bodyWithPolygonFromPath:(CGPathRef)path
Unfortunately it's time consuming task to generate such paths manually, and it could be problematic when testing. There is a SpriteHelper application that allows you to define body shape within easy-to-use visual editor, but this app can't export paths that could be used here. It was made for cocos2d and it does a lot of things like texture packing etc. that I don't need and I can't use with SpriteKit. Does anyone know a solution that will allow to define CGPath's easily or maybe even auto-generate them from png images with alpha channel? Although auto-generation feature from my experience would need optimization, because the body shapes should be as simple as possible when textures could have more complicated shapes.
I am looking for the exact same thing, as it turn out I have done a small web app for this purpose.
SKPhysicsBody Path Generator
as action in example:
Update 2015-02-13: script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container {
max-width: none;
width: 970px;
}
#sprite {
background-color: #eee;
position: absolute;
}
#path {
cursor: crosshair;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use [SKPhysicsBody bodyWithPolygonFromPath:path] easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. (documentation link)</small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" width="940" height="100"></canvas>
<canvas id="path" width="0" height="100"></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:#"<span id="codeImgName">img</span>"];
CGFloat offsetX = sprite.frame.size.width * sprite.anchorPoint.x;
CGFloat offsetY = sprite.frame.size.height * sprite.anchorPoint.y;
CGMutablePathRef path = CGPathCreateMutable();
<span id="codeCGPath"></span>
CGPathCloseSubpath(path);
sprite.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src){
var image = new Image();
image.onload = function(){
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
};
image.src = src;
}
function loadImage(src){
if(!src.type.match(/image.*/)){
console.log('Dropped file is not image format');
return;
}
var reader = new FileReader();
reader.onload = function(e){
render(e.target.result);
};
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
}
spriteCanvas.addEventListener('dragover', function(e){
e.preventDefault();
}, true);
spriteCanvas.addEventListener('drop', function(e){
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
}, true);
var retinaMode = true;
function toggleRetinaMode(){
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
}
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e){
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
}
var pathArray = new Array();
pathCanvas.onclick = function(e){
var coor = {
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
};
pathArray.push(coor);
refreshShape(pathArray);
}
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray){
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray){
if(i == 0) {
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'CGPathMoveToPoint(path, NULL, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY);<br>';
continue;
}
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'CGPathAddLineToPoint(path, NULL, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY);<br>';
}
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
}
function resetShape(){
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
}
</script>
</body>
</html>
I created an editor and loader class to create complex SKPhysicsBodies and import them into your code. It allows you to trace around your sprite, add multiple bodies and export all within a pretty nice interface. Check out the SKImport here and the editor.
I know this is a bit late, but I've just created a cool tool for this purpose which automatically creates a path around the sprite image (so you don't have to manually click on the points yourself), and then you can adjust various settings to better suit your requirements. The tool also outputs both Objective C and Swift program code for adding the path to a sprite physics body. Hope it's helpful to some people. Thanks:
http://www.radicalphase.com/pathgen/
Here is the original script (from DazChong) adapted for Swift
SKPhysicsBody Path Generator Swift Version
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator (Swift version </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container {
max-width: none;
width: 970px;
}
#sprite {
background-color: #eee;
position: absolute;
}
#path {
cursor: crosshair;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use SKPhysicsBody(polygonFromPath: path) easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. (documentation link)</small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" width="940" height="100"></canvas>
<canvas id="path" width="0" height="100"></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
let sprite = SKSpriteNode(imageNamed: "codeImgName")
let offsetX = sprite.size.width * sprite.anchorPoint.x
let offsetY = sprite.size.height * sprite.anchorPoint.y
let path = CGPathCreateMutable()
<span id="codeCGPath"></span>
CGPathCloseSubpath(path)
sprite.physicsBody = SKPhysicsBody(polygonFromPath: path)
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src){
var image = new Image();
image.onload = function(){
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
};
image.src = src;
}
function loadImage(src){
if(!src.type.match(/image.*/)){
console.log('Dropped file is not image format');
return;
}
var reader = new FileReader();
reader.onload = function(e){
render(e.target.result);
};
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
}
spriteCanvas.addEventListener('dragover', function(e){
e.preventDefault();
}, true);
spriteCanvas.addEventListener('drop', function(e){
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
}, true);
var retinaMode = true;
function toggleRetinaMode(){
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
}
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e){
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
}
var pathArray = new Array();
pathCanvas.onclick = function(e){
var coor = {
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
};
pathArray.push(coor);
refreshShape(pathArray);
}
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray){
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray){
if(i == 0) {
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'CGPathMoveToPoint(path, nil, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY)<br>';
continue;
}
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'CGPathAddLineToPoint(path, nil, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY)<br>';
}
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
}
function resetShape(){
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
}
</script>
</body>
</html>
The Skphysicsbody Path generator tool seems to be missing.
I wrote an app that does the same thing though on mac: https://itunes.apple.com/us/app/physicsbodymaker/id951249779?ls=1&mt=12
This is an adaptation of Xelt's answer in Swift 3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator (Swift version </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container {
max-width: none;
width: 970px;
}
#sprite {
background-color: #eee;
position: absolute;
}
#path {
cursor: crosshair;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use SKPhysicsBody(polygonFromPath: path) easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. (documentation link)</small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" width="940" height="100"></canvas>
<canvas id="path" width="0" height="100"></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
let sprite = SKSpriteNode(imageNamed: "codeImgName")
let offsetX = sprite.size.width * sprite.anchorPoint.x
let offsetY = sprite.size.height * sprite.anchorPoint.y
let path = CGMutablePath()
<span id="codeCGPath"></span>
path.closeSubpath()
sprite.physicsBody = SKPhysicsBody(polygonFromPath: path)
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src){
var image = new Image();
image.onload = function(){
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
};
image.src = src;
}
function loadImage(src){
if(!src.type.match(/image.*/)){
console.log('Dropped file is not image format');
return;
}
var reader = new FileReader();
reader.onload = function(e){
render(e.target.result);
};
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
}
spriteCanvas.addEventListener('dragover', function(e){
e.preventDefault();
}, true);
spriteCanvas.addEventListener('drop', function(e){
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
}, true);
var retinaMode = true;
function toggleRetinaMode(){
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
}
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e){
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
}
var pathArray = new Array();
pathCanvas.onclick = function(e){
var coor = {
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
};
pathArray.push(coor);
refreshShape(pathArray);
}
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray){
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray){
if(i == 0) {
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'path.move(to: CGPoint(x: '+pathArray[i].displayX+' - offsetX, y: '+pathArray[i].displayY+' - offsetY))<br>';
continue;
}
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'path.addLine(to: CGPoint(x: '+pathArray[i].displayX+' - offsetX, y: '+pathArray[i].displayY+' - offsetY))<br>';
}
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
}
function resetShape(){
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
}
</script>
</body>
</html>
Awesome little web app, by DazChong. And canot wait for the update of PhysicsEditor!!
This one is also in development
You can download it in alpha stage here
You can just do this now to generate physics body from your sprite's PNG:
SKSpriteNode *yourPhysicsSprite = [SKSpriteNode spriteNodeWithImageNamed:#"yourPNG"];
yourPhysicsSprite.physicsBody = [SKPhysicsBody bodyWithTexture:yourPhysicsSprite.texture alphaThreshold:0.0f size:yourPhysicsSprite.texture.size];
Less precise and perhaps more costly than doing by hand, but works fine.
Related
I got sharepoint online working under O365, In our home page we need a chart showing the summary of our list data
I am trying to follow the below steps in my list
https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null;
function loadGoogleLibAndDraw(){
google.charts.load('current', {'packages':['bar','line']});
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('Project Issues').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Status');
data.addColumn('number', 'PercentComplete');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Status'));
row.push(listItem.get_item('PercentComplete'));
data.addRow(row);
}
var options = {
chart: {
title: 'Sales Trend',
},
bars: 'vertical'
};
var barChart = new google.charts.Bar(document.getElementById('BarChart'));
barChart.draw(data, options);
var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.draw(data, options);
}
function onFailedCallback(sender, args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body onload="loadGoogleLibAndDraw()">
<form name="metricsform" id="metricsform">
<input id="customListName" name="customListName" value="Project Issues" type="hidden"/>
</form>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 900px; height: 500px;"></div>
<div id="LineChart" style="width: 900px; height: 500px;"></div>
</div>
</body>
</html>
I embeded the above script to my sharepoint page , replacing listname,column names but its not showing any chart from my list but giving an error as below
Thank you
#aryan,
Please have a try below code, i am able to get the chart works.
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var returnedItems = null;
$(document).ready(function () {
loadGoogleLibAndDraw();
});
function loadGoogleLibAndDraw() {
google.charts.load('current', { 'packages': ['bar', 'line'] });
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle('smartphone_sales');
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Red Mi3');
data.addColumn('number', 'Honor 5s');
data.addColumn('number', 'Le 1s');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Title'));
row.push(listItem.get_item('RedMi3'));
row.push(listItem.get_item('Honor5s'));
row.push(listItem.get_item('Le1s'));
data.addRow(row);
}
var options = {
chart: {
title: 'Sales Trend',
},
bars: 'vertical'
};
var barChart = new google.charts.Bar(document.getElementById('BarChart'));
barChart.draw(data, options);
var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.draw(data, options);
}
function onFailedCallback(sender, args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 900px; height: 500px;"></div>
<div id="LineChart" style="width: 900px; height: 500px;"></div>
</div>
</body>
</html>
Test Result:
Please make sure the column's internal name in your code is correct. And you may check the source panel to see if the JS files have been loaded. Sometimes it will remains some caches, so please refresh the page or try it in a private window.
BR
Hi the only thing I would like to have in JSSOR is to toggle fullscreen gallery. I am using Image gallery version of JSSOR. I would like to have fullscreen button on the right upper corner which toggles fullscreen (not full but maximized) view and I can move with images there.
I did not see any tutorial on official jssor page or any other thread.
I would like to have something like this in the upper right corner. Any help with this ?
<script src="jssor.slider.min.js"></script>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div data-u="slides" style="position:absolute;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div><img data-u="image" src="image1.jpg" /></div>
<div><img data-u="image" src="image2.jpg" /></div>
</div>
<!-- https://www.jssor.com/development/slider-with-fixed-static-element.html -->
<img id="fullscreen_toggle_button" src="toggle-fullscreen.png" style="position:absolute;top:5px;right:5px;" />
</div>
<script>
var options = { $AutoPlay: 1 };
var jssor_1_slider_element = document.getElementById("jssor_1");
var jssor_1_slider_parent_element = jssor_1_slider_element.parentNode;
var jssor_1_slider = new $JssorSlider$(jssor_1_slider_element, options);
var isFullscreenMode = false;
var fullscreenElement;
var fullscreen_toggle_button_element = document.getElementById("fullscreen_toggle_button");
function ToggleFullscreen() {
isFullscreenMode = !isFullscreenMode;
if(isFullscreenMode) {
//create fullscreen div, move jssor slider into the div
fullscreenElement = document.createElement("div");
fullscreenElement.style.position = "fixed";
fullscreenElement.style.top = 0;
fullscreenElement.style.left = 0;
fullscreenElement.style.width = "100%";
fullscreenElement.style.height = "100%";
fullscreenElement.style.zIndex = 1000000;
document.body.appendChild(fullscreenElement);
var fullscreenRect = fullscreenElement.getBoundingClientRect();
var width = fullscreenRect.right - fullscreenRect.left;
var height = fullscreenRect.bottom - fullscreenRect.top;
fullscreenElement.appendChild(jssor_1_slider_element);
jssor_slider.$ScaleSize(width, height);
}
else if(fullscreenElement) {
//move jssor slider into its original container, remove the fullscreen div
jssor_1_slider_parent_element.appendChild(jssor_1_slider_element);
var width = jssor_1_slider_parent_element.clientWidth;
jssor_slider.$ScaleWidth(width);
document.body.removeChild(fullscreenElement);
fullscreenElement = null;
}
}
fullscreen_toggle_button_element.addEventListener("click", ToggleFullscreen);
</script>
I am having problem in cloning fabricjs i-text. When i change the color of a selected cloned text then the original text color is also changing.
var canvas = new fabric.Canvas('mycanvas');
var itext = new fabric.IText( "New text", { left : 50, top : 50} );
itext.setSelectionStyles({fill: 'red'});
canvas.add(itext).renderAll();
$('#clone').on('click', function(){
var obj = canvas.getActiveObject();
if(obj == null) return;
var obj1 = obj.clone();
obj1.set({
letf : 150,
top : 150
});
canvas.add(obj1).renderAll();
});
$("#colorchange").on('click',function(){
var obj = canvas.getActiveObject();
if(obj == null) return;
if(obj.setSelectionStyles && obj.isEditing)
obj.setSelectionStyles({fill: 'red'});
else
obj.set({fill: 'red'});
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c"></canvas>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<canvas id="mycanvas" width="400" height="300" style="border:solid 1px #ccc;"></canvas><br>
<button id="clone">clone</button>
<button id="colorchange">change color</button>
I made a few changes and I am able to produce the result you need. Let me know if thats what you needed.
var canvas = new fabric.Canvas('mycanvas');
var itext = new fabric.IText( "New text", { left : 50, top : 50} );
itext.setSelectionStyles({fill: 'red'});
canvas.add(itext).renderAll();
$('#clone').on('click', function(){
var gobj = canvas.getActiveObject();
if(gobj == null) return;
var obj1 = gobj.clone();
var vobj = obj1;
vobj.set({
left: 100,
top: 100,
fill: 'blue'
});
canvas.add(vobj).renderAll();
});
$("#colorchange").on('click',function(){
var obj = canvas.getActiveObject();
if(obj == null) return;
if(obj.setSelectionStyles && obj.isEditing)
obj.setSelectionStyles({fill: 'red'});
else
obj.set({fill: 'red'});
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<canvas id="mycanvas" width="400" height="300" style="border:solid 1px #ccc;"></canvas><br>
<button id="clone">clone</button>
<button id="colorchange">change color</button>
I find the solution , guy !
The key to your problem is your clone function do not use callback.
you may use it like this :
obj.clone(function(newobj){
newobj.set({
letf : 150,
top : 150
});
canvas.add(newobj).renderAll();
});
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;
<!doctype html>
<html>
<head>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
var name='';
var socket = io.connect('http://localhost:8000');
$(document).ready(function() {
//var app = require('http').createServer(handler),
//io = require('socket.io').listen(app);
//app.listen(8000);
//var url = 'http://localhost:8000';
//var socket = io.connect(url);
//socket.connect();
//socket.on('movement', function() {socket.send();
//console.log('Connected!');});
while (name == '') { name = prompt("What's your name?",""); }
var left =5;
var top = 5;
var width =20;
var height =20;
var rcolor= get_random_color();
var ctx = $('#cgame')[0].getContext("2d");
ctx.fillStyle = rcolor;
ctx.fillRect(left, top, width, height);
ctx.lineWidth = 10;
$(document).keydown(onkeydown);
socket.emit('movement', function onkeydown(left,top, width, height)
{
var kycode;
if (evt!= null)
{
kycode = evt.keyCode;
ctx = $('#cgame')[0].getContext("2d");
switch(kycode)
{
case 37: //left
if(left >> ctx.left){
call: clear();
left--;
call:draw();
//alert("Hi left");
break;
}
case 38: //up
if(top >> ctx.top)
{
call: clear();
top--;
call:draw();
//alert("Hi Up");
break;
}
case 39://right
if((left+width) << (ctx.width+ctx.left) )
{
call: clear();
left++;
call:draw();
//alert("Hi right");
break;
}
case 40:
{
call: clear();
top++;
call:draw();
//alert("Hi down");
break;
}
Default:
{
alert("Hi");
break;
}
}
}
}
);
function get_random_color()
{
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ )
{
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function clear()
{
ctx.width = ctx.width;
ctx.height = ctx.height;
ctx = $('#cgame')[0].getContext("2d");
ctx.clearRect(0,0,cgame.width,cgame.height);
}
function draw()
{
ctx.width = ctx.width;
ctx.height = ctx.height;
ctx = $('#cgame')[0].getContext("2d");
ctx.fillRect(left, top, width, height);
}
socket.emit('register', name );
$('#Name').hide();
$('#Game').hide();
$('#start').hide();
});
</script>
</head>
<body>
<label id="Game">Welcome to Node JS Gaming</label>
<input type='text' id ='Name'>
<input type='button' id="start" value= 'login' Onclick="welcome()" >
<div>
<canvas id= "cgame" style="border:1px solid #000000; width: 100%; height: 100%;"; onkeydown ="onkeydown"></canvas>
</div>
</body>
</html>
Attempted socket code:
var io = require('socket.io').listen(8000);
io.sockets.on('connection', function (socket)
{
socket.on('movement',function(left,top, width, height){});
socket.broadcast.emit('movement', {
});
});
}
);
//io.sockets.emit();
I have to pass the left top width and height values to the server so that the value is reflected on another client. Say for example, two clients are Chrome and Mozilla, whenever a user presses up, down, left or right the corresponding rectangle has to be moved. Similarly it should happen for other users as well.
I don't know how to pass the values. Sorry for being so naive; I am a beginner in node.js.
Please let me know what the appropriate code is for the server side.
Please see this question regarding a game that is very similar to what you are trying to achieve
EDIT: Just realised that that question omits the actual multiplayer section. My implementation of that code was as follows (not full code, only the important bits)
Client Side:
socket.on('message', function(msg) {
msg = JSON.parse(msg);
players[msg.player] = new Player(msg.name, msg.x, msg.y, msg.width, msg.height, msg.color);
});
In the Player class:
draw : function(){
context.fillStyle = this.color; // context is canvas.getContext('2d');
context.fillRect(this.x, this.y, this.width, this.height);
}
Now also on the client side you can have:
function update() {
context.clearRect(0, 0, 700, 300); // clearing the canvas (width = 700, height = 300)
for( var player in players ) {
players[player].draw();
}
}
var FPS = 60;
setInterval(update, 1000/FPS);
In my experience you'd be better off doing the actual moving of the players coordinates on the server side. So client presses Left -> sent via socket -> server adjusts players x to x-=1 and sends it back where it's then drawn.
Note that this is a crude version of the code required