Creating hexbins visualisation with mapbox in an angular 4 project - JavaScript Discussion Boards

Alan Burkhart13-Jul-18 13:10

13-Jul-18 13:10

I'm learning to script an application with ClearScript. My program is a tabbed text editor and the idea is to have access to all the open files via a List. For scripting, the program opens a separate window (so that the script is not part of the scriptable collection). Results are written to a second textbox. And there is where I discovered the problem. At present I'm just having the Javascript display the "FilePath" property of each item in the collection. This works fine with this script:

JavaScript

parent.OutPut.Text="";
var i;
var y=0;
for (i = 0; i < parent.OpenFiles.Count; i++) {
    y += 1
    parent.OutPut.Text += y + " " + parent.OpenFiles[i].FilePath + "\r\n";
    
}
parent.OutPut.Text += parent.OpenFiles.Count;

I get the following correct result in the textbox:

1 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\WikipediaCrimeData_RawText.txt
2 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\conspiracytheory.html
3 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\USConsSearch.html
4 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\wordley.html
5 C:\Users\Alan\Documents\new 1.txt
6 C:\Users\Alan\Documents\10Comms.txt
7 C:\Users\Alan\Documents\testfile.txt
8 C:\Users\Alan\Documents\Transfer\From Toshiba\TestSpellChecker.txt
9 C:\Users\Alan\Documents\Projects\NetPadd2 Help Files\AdntlRsc.html
10 C:\Users\Alan\Documents\Projects\NetPadd2 Help Files\intro.html
11 C:\Users\Alan\Documents\ForLoop.js
12 untitled_2.txt
13 C:\Users\Alan\Documents\ForEach.js
13

("13" is the number of items in the collection.)

However, if I use this script:

JavaScript

parent.OutPut.Text="";
var x;
var i=0
for (x in parent.OpenFiles) {
i+=1
parent.OutPut.Text += i + " " + parent.OpenFiles[x].FilePath + "\r\n";}
parent.OutPut.Text += parent.OpenFiles.Count;

I get the following result:
1 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\WikipediaCrimeData_RawText.txt
2 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\conspiracytheory.html
3 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\USConsSearch.html
4 C:\Users\Alan\Documents\Transfer\From Toshiba\Projects\alanburkhart.com\wordley.html
5 C:\Users\Alan\Documents\new 1.txt
6 C:\Users\Alan\Documents\10Comms.txt
7 C:\Users\Alan\Documents\testfile.txt
8 C:\Users\Alan\Documents\Transfer\From Toshiba\TestSpellChecker.txt
9 C:\Users\Alan\Documents\Projects\NetPadd2 Help Files\AdntlRsc.html
10 C:\Users\Alan\Documents\Projects\NetPadd2 Help Files\intro.html
11 C:\Users\Alan\Documents\ForLoop.js
12 undefined
13 undefined
14 undefined
15 undefined
16 undefined
17 undefined
18 undefined
19 undefined
20 undefined
21 undefined
22 undefined
23 undefined
24 undefined
25 undefined
26 undefined
27 undefined
28 undefined
29 undefined
30 undefined
31 undefined
32 undefined
33 undefined
34 undefined
35 undefined
36 undefined
37 undefined
38 undefined
39 undefined
40 undefined
41 undefined
42 undefined
43 undefined
44 undefined
45 undefined
46 undefined
47 undefined
48 undefined
11

The number of "undefined" remains at 37 no matter how many open files I have. I'm not an expert with JavaScript although I usually can write a script that works. Can anyone give me an idea what is causing this? I'm stumped. I've been using this text editor a couple of years without issue (it's one I wrote for my own use) and I don't see a reason for the problem in my VB code. Is it the JS code? Any ideas are appreciated.

Sometimes the true reward for completing a task is not the money, but instead the satisfaction of a job well done. But it's usually the money.

Re: Issue With JavaScript and ClearScript

Graham Breach14-Jul-18 2:07

Graham Breach

14-Jul-18 2:07

I don't know anything about ClearScript, but in Javascript using

for(x in parent.OpenFiles) {

iterates over all the members of whatever parent.OpenFiles happens to be. That will include parent.OpenFiles.Count and any other attributes it has (attributes can be accessed using parent.OpenFiles.Count or parent['OpenFiles']['Count']).

Your lines of undefined values are members of parent.OpenFiles that don't have their own member called FilePath, and there must be 37 of them.

Try using

parent.OutPut.Text += x + " " + parent.OpenFiles[x].FilePath + "\r\n";}

to see the attribute names instead of the numeric value you are assigning them.

Re: Issue With JavaScript and ClearScript

Alan Burkhart14-Jul-18 3:49

Alan Burkhart

14-Jul-18 3:49

Graham Breach wrote:
and any other attributes it has

I didn't realize that. Thank you. I was thinking in terms of the For Each loop in VB.

Sometimes the true reward for completing a task is not the money, but instead the satisfaction of a job well done. But it's usually the money.

JavaScript

Member 99702028-Jul-18 20:15

Member 9970202

8-Jul-18 20:15

How do I get all the input elements(by Id or name) from JSP/Html after form load, then attache the focusout/blur event to all input elements, so that I can get the value of the correspounding element when its got focusout.

Re: JavaScript

Member 997020210-Jul-18 4:44

Member 9970202

10-Jul-18 4:44

finally I found it,here is the code.

$(window).bind("load", function() {

var form = this.document.forms['mainForm'];
var selectElement = form.querySelectorAll('input');

var i;
for (i = 0; i < selectElement.length; i++) {

$(document.getElementById(selectElement[i].id)).blur(function() {
console.log($(this)[0].name);
console.log($(this)[0].value);

});
}

});

modified 10-Jul-18 10:51am.

Need some help with app, please.

Member 1388357522-Jun-18 12:03

Member 13883575

22-Jun-18 12:03

Application overview: Personal expenses management application that allows users to track how much money have they spent.
[MAJOR] Requirements:
As a result of test problem solution you should provide a command-line application that supports following commands:
● add 2017-04-25 12 USD Jogurt — adds expense entry to the list of user expenses.
Expenses for various dates could be added in any order.
Command accepts following parameters:
2017-04-25 — is the date when expense occurred
12 — is an amount of money spent
USD — the currency in which expense occurred
Jogurt — is the name of product purchased
● list — shows the list of all expenses sorted by date
● clear 2017-04-25 — removes all expenses for specified date, where:
2017-04-25 — is the date for which all expenses should be removed
● total PLN — this command should take a list of exchange rates from http://fixer.io , calculate the total amount of money spent and present it to user in specified currency, where:
PLN — is the currency in which total amount of expenses should be presented

[MINOR] Requirements: In order to get extra points for test problem solution you might cover your source code with unit tests.
Application usage example: Here is an example of normal application usage flow, for each command a corresponding output is shown:

add 2017-04-25 2 USD Jogurt
2017-04-25
Jogurt 2 USD
add 2017-04-25 3 EUR "French fries"
2017-04-25
Jogurt 2 USD
French Fries 3 EUR
add 2017-04-27 4.75 EUR Beer
2017-04-25
Jogurt 2 USD
French Fries 3 EUR
2017-04-27
Beer 4.75 EUR
add 2017-04-26 2.5 PLN Sweets
2017-04-25
Jogurt 2 USD
French Fries 3 EUR
2017-04-26
Sweets 2.5 PLN
2017-04-27
Beer 4.75 EUR
list
2017-04-25
Jogurt 2 USD
French Fries 3 EUR
2017-04-26
Sweets 2.5 PLN
2017-04-27
Beer 4.75 EUR
clear 2017-04-27
2017-04-25
Jogurt 2 USD
French Fries 3 EUR
2017-04-26
Sweets 2.5 PLN
total EUR
5.42 EUR

I’ve tried to do it like this, but i don’t know what to do next.

<pre lang="Javascript"><pre><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript"><pre lang="Javascript">

class List { constructor(date, amount, currency, product)
{
this._date = date;
this._amount = amount;
this._currency = currency;
this._product = product;
}

get data (){
return this._data;
}

get amount(){
return this._amount;
}

get currency (){
return this._currency;
}

get product (){
return this._product
}
}

class Result extends List {
constructor(date, amount, currency, product) {
super(date);
this._amount = amount;
this._currency = currency;
this._product = product;

} }

const out = new Result(2017-04-25, 12, 'USD', 'Jogurt');
console.log(Result);

Re: Need some help with app, please.

Nathan Minier25-Jun-18 1:49

Nathan Minier

25-Jun-18 1:49

So for starters, utilize the code that you've already written or else you're wasting everyone's time. You already put assignment assessors in the base class constructor, so use them:

JavaScript

class Result extends List { 
   constructor(date, amount, currency, product) {
      super(date, amount, currency, product);
   } 
}

That said, I think that you haven't considered the problem properly, and that polymorphism is not an appropriate approach to this problem. If you look at the problem, it seems much more likely that a better approach might be enumeration. If you're learning software development, understanding the appropriate tools at your disposal and when to use them is important.

Next you need to logically decompose your problem. In the real world this involves what is known as the "Analysis" phase of engineering, where requirements are parsed into application states and workflows (among other possible architectural artifacts). In this case, though, your professor has been good enough to give you a set of specifications! You can directly code the requirements that s/he has provided as class members. Let's expand the example to demonstrate that:

JavaScript

class MyList{
   // not demonstrating constructor and base members
   // this is your homework, not mine :)

   add(date,amount,currency,product){
      /*method implementation*/
   }

   list(){
      /*method implementation*/
   }

   clear(date){
      /*method implementation*/
   }

   total(currency){
      /*method implementation*/
   }
}

If you need help with specifics when you have a model, feel free to ask, but no one on this site will just do the homework for you.

"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli

Creating hexbins visualisation with mapbox in an angular 4 project

Member 1387271014-Jun-18 2:35

Member 13872710

14-Jun-18 2:35

I'm getting started with web development, I try to create a hexbins visualisation with mapbox in an angular 4 project but I'm getting an error:

Quote:
core.js:1448 ERROR Error: Uncaught (in promise): Error: options is invalid
Error: options is invalid
at Object.Oo [as hexGrid] (turf.min.js:1)
at eval (map.component.ts:443)

Here is my code:

d3.json<ResponseData>('http://127.0.0.1:5000')
        .then((data) => {

          console.log('hex load!');

          // filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
          data.features = data.features.filter(function (d) {
            return d.geometry;
          });
          console.log('hex 1');

          // bounding box for our data's extent (I computed this ahead of time)
          var bbox = [14.334434, 46.6841, 16.552692, 48.5308];
          // our cell size, try changing this to a different value like 10
          var cellSize = 1;
          // units of our cells
          var units = 'kilometers';
          console.log('hex 2');
          console.log(data);

          // create our hex grid
          var hexgrid = turf.hexGrid(bbox, cellSize, units);

          //expcount the number of crashes in each hex grid, this will take a few seconds.
          // in an real life app we would want to display a loading GIF or message here
          console.log('binning data, hold on tight...');
          var hexPoints = turf.count(hexgrid, data, 'totalPoints');
          console.log('done! ', hexPoints);

          // create a jenks natural breaks classification, see: https://en.wikipedia.org/wiki/Jenks_natural_breaks_optimization
          // the number of breaks we are using
          var numberBreaks = 5;

          // NOTE: turf-jenks is technically depreciated, but it still works
          var jenksBreaks = turf.jenks(hexPoints, 'totalPoints', numberBreaks);
          console.log('our jenksBreaks array: ', jenksBreaks);

          // via color brewer: http://colorbrewer2.org/#type=sequential&scheme=RdPu&n=5
          var colors = ['#3bb3c3', '#669ec4', '#8b88b6', '#7a0177', '#aa5e79'];

          // create our color stops for the hexCrashes map layer style
          var colorStops = jenksBreaks.map(function (b, i) {
            if (i > 0) {
              // here we map each color in the color array to it's corresponding bin
              return [b, colors[i - 1]];
            } else {
              // in the case of 0, hide the bin
              return [b, 'rgba(255, 255, 255, 0)'];
            }
          });

          // add our hex crashes layer data
          map.addSource('pointsHexGrid', {
            type: 'geojson',
            data: hexPoints
          });

          // add our hex crashes layer style
          map.addLayer({
            "id": "pointsHexGrid",
            "type": "fill",
            "source": "pointsHexGrid",
            "layout": {},
            "paint": {
              'fill-color': {
                property: 'totalPoints',
                stops: colorStops,
              },
              'fill-opacity': 0.6
            }
          });

        })
        .catch((err) => {
          if (err) throw err;
        });

Please can someone guide me to the source of this error? (In a simple HTML file the visualisation works fine and shows my data correctly)

Javascript function - onclick problem

Member 201089711-Jun-18 16:23

Member 2010897

11-Jun-18 16:23

Why Javascript code does not execute anymore after I put it inside function - onclick event?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

 
  <script type="text/javascript" src="http://cryptojs.altervista.org/api/functions_cryptography.js"></script>
 
  <script type="text/javascript">  
     
function Enkript(){
    var Crypt = new Crypt();  // constructor  
     
    /*** encrypt */  
    var ciphertext = Crypt.AES.encrypt("plaintext");  
    // XluzvcUwZFU=3MD2vMz8PHySPJlKZiWjJg==1Gv6n6Tv8azr  
     
    /*** decrypt */  
    var plaintext  = Crypt.AES.decrypt(ciphertext);  

    alert(ciphertext);
    alert(plaintext);
}
     
    </script>
  <title>enkripcija</title>

 
</head><body onload="javascript:Enkript();">
<input value="klikni" onclick="javascript:Enkript();" type="button">
<br>

<br>

</body></html>

modified 14-Jun-18 10:25am.

Re: Javascript function - onclick problem

Member 1387615717-Jun-18 19:57

Member 13876157

17-Jun-18 19:57

var Crypt = new Crypt(); <----- ERROR

Crypt = name error

Try it

var Cryptx or var Cryptxx or var Cryptxx or

ex.)

var Cryptxx = new Crypt(); // constructor
/*** encrypt */
var ciphertext = Cryptxx.AES.encrypt("plaintext");
// XluzvcUwZFU=3MD2vMz8PHySPJlKZiWjJg==1Gv6n6Tv8azr
/*** decrypt */
var plaintext = Cryptxx.AES.decrypt(ciphertext);

modified 18-Jun-18 2:07am.

Re: Javascript function - onclick problem

Richard MacCutchan17-Jun-18 21:49

Richard MacCutchan

17-Jun-18 21:49

You are declaring a variable called Crypt and then trying to use the same name in your new clause. Which is the variable and which is the class? Use a different name for the variable.

not work onClick operation

Member 1382834015-May-18 6:29

Member 13828340

15-May-18 6:29

HTML

<div class="BlocksRow">

        <div class="BlockInner col-md-4">
            <a id="AllModules" onclick="Modules(1)" class="OuterBlock" style="background-color:green !important">
                <h5 class="text-semibold no-margin">
                <label>AllModules</label>
            </a>
        </div>
        <div class="BlockInner col-md-4">
            <a id="AllActiveModules" onclick="Modules(2)" class="OuterBlock" style="background-color:#dc3b41!important">
                <h5 class="text-semibold no-margin">^__i class="icon-file-text"></h5>
                <label>AllActiveModules</label>
            </a>
        </div>

        <div class="BlockInner col-md-4">
            <a id="AllInActiveModules" onclick="Modules(3)" class="OuterBlock" style="background-color:darkorange!important">
                <h5 class="text-semibold no-margin">^__i class="icon-file-text"></h5>
                <label>AllInActiveModules</label>
            </a>
        </div>
    </div>
    <div style="overflow:auto;width:100%;padding: 0 20px;">
        <table id="tbl_GetAllModule" class="table datatable-basic table-responsive">
            <thead>
                <tr>
                    <th></th>
                    <th>Module Name</th>
                    <th>Modified Date</th>
                    <th>Status</th>
                    <th>IsDefault</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

$(document).ready(function () {
$("#Menu_SettingsDefaults").addClass("active");
$('.listbox').bootstrapDualListbox();
});
var init = false;
var CreateModule = function () {
$('#CreateModule form')[0].reset();
$('#CreateModule').modal("show");
}

var Modules = function (e1) {
CustomFilter = e1;
tbl_GetAllModule.ajax.url(DomainUrl + "Settings/GetModuleList").load();

}

Re: not work onClick operation

Richard Deeming15-May-18 9:10

Richard Deeming

15-May-18 9:10

Do you want to try that again, this time telling us what the actual problem is?

Include the full details of any errors, and tell us which line of code they relate to.

And explain where the undefined Javascript variable tbl_GetAllModule comes from, and where the non-standard .ajax.url(...).load() is declared.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: not work onClick operation

Shivnandan singh25-May-18 0:31

Shivnandan singh

25-May-18 0:31

Re: not work onClick operation

Shivnandan singh25-May-18 0:32

Shivnandan singh

25-May-18 0:32

Call jquery function after partial view page return.

Rahulgupta.hanu14-May-18 3:28

Rahulgupta.hanu

14-May-18 3:28

$("[data-ajax-update*='partial']").after(function () {
                   alert('Hiiiiiiiiii');
                });

Re: Call jquery function after partial view page return.

CP_Member88829-Jul-18 19:32

CP_Member888

29-Jul-18 19:32

what is the issue?

Java script and SQL

Johannes Moolman7-May-18 23:04

Johannes Moolman

7-May-18 23:04

Good day. hope someone can give me some advice.

i am quite new to HTML5 and Jscript. i am just trying a very standard webpage where i want someone to enter a name, surname , and age for example via a HTML form (which i can easily create).

However i am struggling to find anything on the web to teach me how to use Jscript to enter those fields into a database and retrieve it later if i need to.

Is it even possible or must i use something like NODE.js

maybe if someone can even point me to a beginners tutorial.

thanks in advance: Confused | :confused:

Re: Java script and SQL

W∴ Balboos, GHB9-May-18 8:54

W∴ Balboos, GHB

9-May-18 8:54

I like to "do it right" and use a php back-end. This will give you other advantages down the line, such as the ability to invoke AJAX to update parts of pages and execute SQL without a page refresh, and of course the ability customize pages on the server side.

It's somewhat similar to JavaScript it syntax as both use the "C" like style. PHP runs purely on the server, before the page gets sent. You'll be able to work magic with ease.

Tutorials that work (and are free!):
JavaScript[^] PHP[^]

They also have SQL, CSS, and you really aught to learn DOM, a part of javaScript that really makes it all worth it. Not as big an undertaking as it sounds.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

MVVM knockoutjs Grid

padav146-May-18 0:01

padav14

6-May-18 0:01

Hello to all
I'm using knockoutjs for my new project.
I ask you for advice on the most suitable choice for the grill
I tried to use KOGrid, very useful but with some problem (in my opinion) on the graphic aspect (non-responsive)
Do you have any suggestions?
Which grid do you use?

Thank you

Re: MVVM knockoutjs Grid

Afzaal Ahmad Zeeshan6-May-18 3:04

Afzaal Ahmad Zeeshan

6-May-18 3:04

Perhaps you should consider a library that provides support for such controls. I think most community based platforms do provide these controls — DevExpress, Kendu etc.

Anyways, take a look at this GitHub repository: https://github.com/dnbard/awesome-knockout, there is a list of the controls that are supported for Knockout.

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

Beginner, no pc

Rufus1827-Apr-18 0:29

Rufus18

27-Apr-18 0:29

I am a total beginner to programming. I want to start with javascript, but there is a problem. My laptop has stopped working and all I have is my smartphone. I still want to learn programming and it will be a while before I get a laptop/pc. Can you suggest ways to learn programming through apps/online, or I am willing to read books as well. What would be the best way to approach this situation Thanks alot

Re: Beginner, no pc

F-ES Sitecore27-Apr-18 1:54

F-ES Sitecore

27-Apr-18 1:54

You can practice js etc using JSFiddle[^] Not sure how well it will work through a smart-phone, and obviously it'll be much harder than with a laptop but probably your best option. I'd also look to see if there was a library or school or some other public institution that had a PC I could use.

Re: Beginner, no pc

Anushkasharma1021-Jun-18 3:42

Anushkasharma10

21-Jun-18 3:42

Thanks for your useful information. It is helpful.

Re: Beginner, no pc

Richard MacCutchan27-Apr-18 2:12

Richard MacCutchan

27-Apr-18 2:12

Try JavaScript Tutorial[^]. Not sure how well it will work on a phone, but worth a try.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.