Save polygon or line to database django/mapbox - django

I would like to save the drawn polygon in the code below to the postgis database :
Assume that mapbox is set correctly and that the polygon drawing and download works (i haven't put everything in the code to focus on the problem at hand)
<script type="text/javascript">
map.addControl(draw);
map.on('draw.create', updateArea);
map.on('draw.delete', updateArea);
map.on('draw.update', updateArea);
function updateArea(e) {
var data = draw.getAll();
var answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = Math.round(area*100)/100;
answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
}
}

Related

Spritekit Hexagonal map: tile detection in end SKAction.

I ask this question because i didn't found any solution for this kind of issues. In fact Hex map support are not very popular.
I'am making a game with the SpriteKit Framework. I use SktileMapNode with an Hexagonal map, with 1 set of 4 groups tiles.
The playernode moves on each tiles, what i wan't it's when he move on a specifics tiles some event can be triggered ( print , function , Sktransition) but for the moment i'm stuck on just detecting those tiles.
I setup the user data ( as bool ) and apply them in the code , but nothing happened, even with a touch event on a tile.
extension GameScene {
func move(theXAmount:CGFloat , theYAmount:CGFloat, theAnimation:String ) {
let wait:SKAction = SKAction.wait(forDuration: 0.05)
let walkAnimation:SKAction = SKAction(named: theAnimation, duration: moveSpeed )!
let moveAction:SKAction = SKAction.moveBy(x: theXAmount, y: theYAmount, duration: moveSpeed )
let group:SKAction = SKAction.group( [ walkAnimation, moveAction ] )
let finish:SKAction = SKAction.run {
let position = self.thePlayer.position
let column = self.galaxieMapnode.tileColumnIndex(fromPosition: position)
let row = self.galaxieMapnode.tileRowIndex(fromPosition: position)
if let tile:SKTileDefinition = self.galaxieMapnode.tileDefinition(atColumn: column, row: row) {
if let tileBoolData = tile.userData?["wormholeTile"] as? Bool {
if (tileBoolData == true) {
print("Wormhole touched")
}
}
} else {
print("different tile")
}
}
Only the "different tile " output is fired.
Any help are welcome.
Link for image example : the thing I want
I think you want to run your finish block after the other actions have completed? You can do this as a sequence.
var sequence = [SKAction]()
let action = SKAction.move(to: location, duration: 1)
let completionHandler = SKAction.run({
// Check tile info here
})
sequence += [action, completionHandler]
self.player.run(SKAction.sequence(sequence))
Typically in a hexagonal map you would move the player to an adjacent tile and check the tiles attributes, then continue with the next move action. This requires the graph and pathfinding functionality from GameplayKit.

Constrain RaphaelJS print to boundaries and position

I am looking for a more efficient way to constrain/set text in Raphael.
I have text that can be written in a box. That text should be centered (based on a number that could change if user wanted to shift text left/right) and the text cannot go beyond the boundaries of the paper.
This is what I do now and its not manageable performance wise
// Build a path
var path = this.paper.print(x, x, text, font, size, 'middle')
// Center line by getting bounding box and shifting to half of that
var bb = path.getBBox()
path.transform('...T' + [-bb.width / 2, 0])
// Compare paper size vs bb
// if it goes beyond I adjust X and Y accordingly and redo the above
So ideally I would like to predict the size of the text before it prints - I am not sure this is possible though as it is probably font dependent. I have looked for a command to contrain text but do not see one?
The other thought I had was to create some kind of shadow paper that does not print to screen and use that to determine size before I render to user. I am not sure where the lag is though - if it's in the screen rendering good but if its in the general logic of creating the svg then that wont help.
I'd appreciate suggestions
You can use opentype.js for measuring text, also you can get svg path by using Path.toPathData method. There is no need of cufon compiled js fonts.
For text measure, create a canvas element somewhere in your DOM.
<canvas id="canvas" style="display: none;"></canvas>
this function will load text and count width, height
function measureText(text, font_name, size) {
var dfd = $.Deferred();
opentype.load('/fonts/' + font_name + '.ttf', function (err, font) {
if (err) {
dfd.reject('Font is not loaded');
console.log('Could not load font: ' + err);
} else {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
var tmp_path = font.getPath(text, 100, 100, size);
tmp_path.draw(ctx); // Draw path on the canvas
var ascent = 0;
var descent = 0;
var width = 0;
var scale = 1 / font.unitsPerEm * size;
var glyphs = font.stringToGlyphs(text_string);
for (var i = 0; i < glyphs.length; i++) {
var glyph = glyphs[i];
if (glyph.advanceWidth) {
width += glyph.advanceWidth * scale;
}
if (i < glyphs.length - 1) {
var kerningValue = font.getKerningValue(glyph, glyphs[i + 1]);
width += kerningValue * scale;
}
ascent = Math.max(ascent, glyph.yMax);
descent = Math.min(descent, glyph.yMin);
}
return dfd.resolve({
width: width,
height: ascent * scale,
actualBoundingBoxDescent: descent * scale,
fontBoundingBoxAscent: font.ascender * scale,
fontBoundingBoxDescent: font.descender * scale
});
}
});
return dfd.promise();
},
then use this function to get text dimensions:
$.when(measureText("ABCD", "arial", 48)).done(function(res) {
var height = res.height,
width = res.width;
...
});

RaphaelJS subpath on transformed path

I'm having issues with creating a subpath on a path that has been transformed. It seems that the subpath is generated with the original position of the path in reference rather than the post transform location of the path. How do I get around this?
var paper = new Raphael("canvas");
var lineParams = {
fill: "#ff0",
gradient: "90-#526c7a-#64a0c1",
stroke: "#3b4449",
"stroke-width": 2
};
var line1 = paper.path("M 0 50 h 200").attr(lineParams);
line1.transform("T100,100");
if (line1 != null) {
var lineBBox = line1.getBBox()
var lineEnd = lineBBox.x2 - lineBBox.x;
var lineTipStart = lineEnd - 10;
var lineTipString = line1.getSubpath(lineTipStart, lineEnd);
var lineTip = paper.path(lineTipString);
lineTip.attr({
"stroke-width": 2,
stroke: '#FF0000'
});
}
http://jsfiddle.net/nzwthkmo/1/
Its not so much a case of getting around it, as realising what its doing, and deciding how you want to approach it.
The original path has a transform applied to it, the path is still exactly the same. So do you want the same thing (maybe your code will be expecting that), or do you want a new modified path with new baked coordinates with the transform in place.
So depending on what you will do in the future with it, you could either
a) Simply apply the same transform to the subpath...
var lineTip = paper.path(lineTipString).transform("T100,100");
or
b) create a new path where the coordinates are all permanently transformed...
var lineTip = paper.path( Raphael.transformPath(lineTipString, "T100,100") )
fiddle with both examples (one commented out).

Display Admob banner in bottom of IOS device

I am developing an Application in Xcode using cocos2dx.In my Application I want my admob banner to display in Bottom of the screen, for that I am using the following code. It moves the game content to top and displays the banner in bottom. But I want the banner in bottom without moving the content. The banner is displaying in top without moving the content. please advise me to correct my mistake.
- (void)viewDidLayoutSubviews
{
CGRect contentFrame = self.view.bounds;
CGRect bannerFrame = CGRectZero;
#if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_6_0
bannerFrame = _bannerView.frame;
#else
bannerFrame.size = [_bannerView sizeThatFits:contentFrame.size];
#endif
bannerFrame.origin.x = (contentFrame.size.width - bannerFrame.size.width) / 2;
////To display the banner in Bottom
if (_bannerLoaded) {
contentFrame.size.height -= bannerFrame.size.height;
bannerFrame.origin.y = contentFrame.size.height;
} else {
bannerFrame.origin.y = contentFrame.size.height;
}
////To display the banner in top
// if (_bannerLoaded) {
// bannerFrame.origin.y = 0;
// } else {
// bannerFrame.origin.y = -bannerFrame.size.height;
// }
_contentController.view.frame = contentFrame;
_bannerView.frame = bannerFrame;
}
In the above coding make Some changes in the if condition like this.
if (_bannerLoaded)
{
contentFrame.size.height = 0;
bannerFrame.origin.y = contentFrame.size.height-bannerFrame.size.height;
}
else
{
bannerFrame.origin.y = contentFrame.size.height-bannerFrame.size.height;
}

Limit UIPanGestureRecognizer to a specific area

In my view I have in the right part 3 UISlider and in the left part the user can slide the menu with a UIPanGestureRecognizer. Sometimes, when the user uses the slider, it also drag the view. I don't want this to happen. I have this code in my panLayer method:
- (IBAction)panLayer:(UIPanGestureRecognizer *)pan {
if (pan.state == UIGestureRecognizerStateChanged) {
CGPoint point= [pan translationInView:self.topLayer];
CGRect frame = self.topLayer.frame;
frame.origin.x = MIN(258.0f, self.layerPosition + point.x);
if (frame.origin.x < 0) frame.origin.x = 0;
self.topLayer.frame = frame;
}
if (pan.state == UIGestureRecognizerStateEnded) {
if (self.topLayer.frame.origin.x <=160) {
[self animateLayerToPoint:0];
}
else {
[self animateLayerToPoint:VIEW_HIDDEN];
}
}
}
I want to create an if statement with the x position. Something like this:
if (firstTouch.x < 150 && firstTouch.x > 0) {
//Add my previous code
}
How can I access to the firstTouch in the view, and if it is in this area, run the UIPanGestureRecognizer?
Thanks
This can be easily achieved by adopting UIGestureRecognizerDelegate and implementing the following method:
-(BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldReceiveTouch:(UITouch*)touch
{
return touch.view != myUISlider;
}