|
|
I'm working on a project in which i'm capturing map screenshot (using dom-to-image library) and sending it to an external api which is returning back some co-ordinates(x,y,w,h) after processing the sent image. These co-ordinates(rectangles) i'm trying to draw on leaflet.
As the captured image size is bigger than width and height of captured area (don't know why), I need to do scaling the co-ordinates.
Now the problem is Leaflet rectangles are not drawing on accurate position which external API is returning.
However, I'm sure that the external API is returning correct co-ordinates (x,y,w,h) with correspond to send image's width & height.
Something wrong i'm doing on scaling coordinates.
Below is the code snippet i'm trying:
domtoimage.toPng(document.querySelector("#map"))
.then(function (dataUrl) {
var boundsOnly = map.getBounds();
let topLeft = boundsOnly.getNorthWest();
let topRight = boundsOnly.getNorthEast();
let bottomLeft = boundsOnly.getSouthWest();
let bottomRight = boundsOnly.getSouthEast();
var currBBOXpoints = { x1y1: map.latLngToLayerPoint(topLeft), x2y2: map.latLngToLayerPoint(topRight), x3y3: map.latLngToLayerPoint(bottomRight), x4y4: map.latLngToLayerPoint(bottomLeft) };
var pW = currBBOXpoints.x2y2.x - currBBOXpoints.x1y1.x;
var pH = currBBOXpoints.x3y3.y - currBBOXpoints.x1y1.y;
currBBOXpoints.pW = pW;
currBBOXpoints.pH = pH;
var i = new Image();
i.onload = function () {
$.ajax({
type: 'post',
url: '/externalapi',
data: JSON.stringify(dataUrl),
contentType: "application/json",
dataType: "json",
success: function (resultData) {
resultData["iW"] = i.width;
resultData["iH"] = i.height;
resultData["currBBOXpoints"] = currBBOXpoints;
drawRects(resultData);
}
});
};
i.src = dataUrl;
});
function drawRects(rectData) {
var scale = Math.max(rectData.currBBOXpoints.pW / rectData['iW'], rectData.currBBOXpoints.pH / rectData['iH']);
var shifted_x = rectData.currBBOXpoints.pW / 2 - rectData['iW'] / 2 * scale;
var shifted_y = rectData.currBBOXpoints.pH / 2 - rectData['iH'] / 2 * scale;
rectData.od.forEach(rc => {
var modifiedX = Number(rc['x']) * scale + shifted_x;
var modifiedY = Number(rc['y']) * scale + shifted_y;
var modifiedW = (modifiedX + rc['w'])
var modifiedH = (modifiedY + rc['h'])
let point3 = map.layerPointToLatLng(L.point(modifiedX, modifiedY));
let point4 = map.layerPointToLatLng(L.point(modifiedW, modifiedH));
var rectBounds = [[point3.lat, point3.lng], [point4.lat, point4.lng]];
var boundingBox = L.rectangle(rectBounds, { color: "yellow", weight: 1, name: "rect", fillOpacity: 0.10 });
map.addLayer(boundingBox);
});
}
|
|
|
|
|
Maybe it has something to do with the monitors screen resolution, dpi, 100% vs 125% view magnification.
When you draw an image is say Illustrator, at 100 x 100, it's 100 pixels x 100 pixels. But when you output that Illustrator file to JPEG or PNG, and then load it up, we think it's still 100 x 100, but it may actually be smaller or larger on the screen.
look at the scale, try a 1 to 1 scale manually.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
let sum = () => {
a=prompt();
b=prompt();
return a+b;
}
console.log(sum());
I don't understand why the hell concatenate two numbers instead of sum them. Less understand why only a summary is a problem and multiply, extraction, dividing is OK. Can you help me please?
|
|
|
|
|
Most likely because the prompt returns a string rather than an integer. You need to convert the input to integers with parseInt :
a = parseInt(prompt());
b = parseInt(prompt());
|
|
|
|
|
Thank you! I'm very grateful
|
|
|
|
|
|
let object_literal1 ={
fullName : "shanu1",
name : () => {
return this.fullName
},
greeting : (message) => console.log(message + " "+ this.name())
}
object_literal1.greeting("Welcome")
I want to access the value of object literal's property(here fullName) inside the object literal's function(here greeting). But while doing so I am getting error. Please let me know where I am going wrong and how to do that?
|
|
|
|
|
Member 13954890 wrote: But while doing so I am getting error. What is the error?
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Same question as below with different wording. Which line errors and what error?
|
|
|
|
|
greeting : (message) => console.log(message + " "+ this.name())
^
TypeError: this.name is not a function
|
|
|
|
|
|
The "function" version works so just use it.
|
|
|
|
|
let person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
}
console.log(person.fullName())
When I am using arrow function here then I am getting undefined undefined as my output. Could anyone please let me know why this is happening. Below is my code with arrow function.
let person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : () => {
return this.firstName + " " + this.lastName;
}
}
console.log(person.fullName())
|
|
|
|
|
Arrow functions do not have access to this. They are not meant to be used the way you are doing here.
JavaScript Arrow Function[^]
Quote: with arrow functions there are no binding of this.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I am in the process of building a website in Squarespace, I am using Javascript to create a multi-lingual website in English and French. I differentiate between English and French using the URL/Slug
Example
www.websitename.com/en/home
or
www.websitename.com/fr/home
Everything is translating, almost. I am having issues with the footer translating.
Here are some images
https://i.stack.imgur.com/rLjn1.png[^]
https://i.stack.imgur.com/ruE24.png[^]
https://i.stack.imgur.com/Bz1cx.png[^]
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
var defaultLanguage = 'en';
var lang = location.pathname.split("/")[1];
var defaultClass = 'lang-'+defaultLanguage+'';
var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']";
if (lang == "" || lang.length > 2 ){
var lang = defaultLanguage;
}
$('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+'');
$('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () {
var langType = $(this).attr('href').split("/")[1];
var multiLanguageClass = 'multilanguage lang-' + langType + '';
if (undefined !== langType && langType.length <= 2)
$(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass);
});
$('nav button').each(function () {
var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0];
var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + '';
if (undefined !== langTypeFolder && langTypeFolder.length <= 2)
$(this).addClass(multiLanguageClass);
});
if (lang == "fr") {
$('a[href="/"]').attr("href", "/fr/home/");
}
$('.exclude-me,.exclude-me a').addClass('exclude');
$('.sqs-svg-icon--list a,.SocialLinks-link').addClass('exclude');
$('.multilanguage:not(".lang-'+lang+',.exclude")').remove();
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en"></a> <a href="/fr/home/" class="lang-fr"></a></div>');
});
</script>
[JavaScript] MULTI-LANGUAGE Javscript for Website - Pastebin.com[^]
|
|
|
|
|
Just debug your code and figure out what you're doing wrong. Should be pretty simple.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
function textToBinary(text) {
let alphabet;
let letter;
let binary = "";
let value;
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (letter in text) {
if (alphabet.includes(text[letter].toUpperCase())) {
if (text[letter] === text[letter].toUpperCase()) {
binary += "010";
} else {
binary += "011";
}
value = alphabet.indexOf(text[letter].toUpperCase()) + 1;
if (value >= 16) {
binary += "1";
value -= 16;
} else {
binary += "0";
}
if (value >= 8) {
binary += "1";
value -= 8;
} else {
binary += "0";
}
if (value >= 4) {
binary += "1";
value -= 4;
} else {
binary += "0";
}
if (value >= 2) {
binary += "1";
value -= 2;
} else {
binary += "0";
}
if (value >= 1) {
binary += "1";
value -= 1;
} else {
binary += "0";
}
} else {
binary += "00100000";
}
}
console.log(binary);
}
textToBinary("this is written in BINARY");
|
|
|
|
|
|
Any tips?
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
For Numbers and BigInts toString() takes an optional parameter radix the value of radix must be minimum 2 and maximum 36.
By using radix you can also convert base 10 numbers (like 1,2,3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number ...
So your entire series of if (value >= ...) blocks can be replaced with a single call to toString , along with a call to padStart[^] to add any leading zeros:
value = alphabet.indexOf(text[letter].toUpperCase()) + 1;
binary += value.toString(2).padStart(5, "0");
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yeah, get rid of the semicolons
|
|
|
|
|
I am using npm module xlsx to write and read JSON data.
I want to write this JSON to excel
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
Later when I read back I want to get same JSON from excel file
If you already solved, any suggestion or help will be of great help
Here is what I have tried
```
var XLSX = require("xlsx");
console.log("Node Version: " + process.versions.node);
console.log("XLSX Version: " + XLSX.version);
/* GENERATE TEST FILE */
(function() {
// create workbook
var wb = XLSX.utils.book_new();
var ws = XLSX.utils.json_to_sheet([
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
], {header:["name","class","address","street","city"]});
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "testfile.xlsx");
let worksheet = wb.Sheets['Sheet1'];
let jsonArray= XLSX.utils.sheet_to_json(worksheet);
console.log(JSON.stringify(jsonArray));
})();
```
This returns
```
Node Version: 8.12.0
XLSX Version: 0.16.2
[{"name":"John","class":1}]
But I was expecting
{ "name": "John", "class": 1, "address" : [ { "street": "12th Cross" , "city": "London" }, { "street": "22nd Cross" , "city": "Cade" } ] }
```
Any help or suggestion will be of great help
|
|
|
|
|
I am creating a program where if an action occurs then a message box through visual basic script (.vbs). I plan to do I through a fstream file.
if (statement)
{
open fstream file }
|
|
|
|
|
I think that this one is a bit misplaced in the "Javascript" section
|
|
|
|
|