Perl obk csv2json.pl testen
Het testen in Chrome van de json file die dit script 'obk_csv2json' aanmaakt wordt gecompliceerd door een bewuste beperking van Chrome
Achtergrond
Dit zegt ChatGPT hierover:
Chrome has security restrictions that prevent it from accessing local files due to potential security risks. However, you can try a few workarounds:
- Use a local server: You can set up a local server like XAMPP or WAMP and host your JSON file there. This way, Chrome can access it using a URL like "http://localhost/file.json".
- Use a file input element: You can create an input element of type "file" in your HTML and allow users to select the JSON file manually. Then, you can use JavaScript to read the contents of the selected file.
- Start Chrome with specific flags: You can start Chrome with the --allow-file-access-from-files flag, which disables the security restriction for local files. However, this is not recommended as it can compromise your security.
In general, it's better to avoid accessing local files in your web application and use a server instead, as it's more secure and scalable.
Over XAMPP en WAMP
XAMPP and WAMP are both popular free and open-source web server solutions that allow you to host and run websites and web applications on your local machine.
XAMPP stands for cross-platform (X), Apache, MySQL, PHP, and Perl. It is available for Windows, macOS, and Linux, and it includes Apache web server, MySQL database, PHP interpreter, and Perl programming language.
WAMP stands for Windows, Apache, MySQL, and PHP. As the name suggests, it is designed specifically for Windows, and it includes Apache web server, MySQL database, and PHP interpreter.
Both XAMPP and WAMP come with a user-friendly interface that makes it easy to manage and configure your web server, and they also come with additional tools and applications such as phpMyAdmin, a web-based MySQL database management tool.
Using XAMPP or WAMP can be useful for web developers who need to test their applications locally before deploying them to a live server. It can also be useful for people who want to run web applications on their local machine without the need for an internet connection.
However, it's important to note that XAMPP and WAMP are not intended for use as production servers, as they do not offer the same level of security and scalability as dedicated web hosting solutions.
Over using a file input element:
Option 2 is to create an HTML file input element of type "file" and allow users to select a local JSON file. Once the user has selected the file, you can use JavaScript to read the contents of the file.
Here's an example of how to create a file input element:
html Copy code <!DOCTYPE html> <html> <body> <input type="file" id="fileInput"> <script> const fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function() { const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function(e) { const content = e.target.result; // Do something with the file content console.log(content); }; reader.readAsText(file); }); </script> </body> </html> In this example, we create an input element of type "file" with the ID "fileInput". We then add an event listener that triggers when the user selects a file. Inside the event listener, we get the selected file using fileInput.files[0] and create a FileReader object to read the file contents.
Once the file is read, the onload function is called with the file content as the parameter. In this example, we simply log the file content to the console, but you can replace this with your own code to process the JSON data.
Option 2 is a good solution if you only need to read a local JSON file occasionally, and you don't want to set up a local server. However, it does require user interaction, so it may not be suitable for all use cases.
Conclusie
Geen van bovenstaande 'workarounds' is gevolgd:
- Use a local server: te veel processtappen bij installeren, te kwetsbaar voor software updates in XAMPP en WAMP (er zijn al zoveel afhankelijkheden, vooral in javascript modules)
- Use a file input element: bij elke test een handmatige stap extra
- Start Chrome with specific flags: zoals chatGPT al zegt, je maakt je extra kwetsbaar voor malware
Alternatief
Er is voor een alternatief gekozen:
- obk_csv2json.pl maakt ook een speciale testversie van de json file ('vermomd' als javascript file, dus met '.js' extensie)
- dit extra javascript bestand (waar dus alle bomen data in staan) wordt in een speciale test versie van de bomenkaart ingelezen (obk_test.htm i.p.v. obk.htm)
- deze versie van het bomenbestand bevat niet alleen json code ({..}), maar bevat als eerste regen 'data-test='
Voorbeeld (bomenbestand met één boom, de grote beuk in de Groenesteeg)
data_test = // lees hele json structuur in variable data_test in
{
"version": 0.6,
"generator": "Overpass API 0.7.59 e21c39fe",
"osm3s": {
"timestamp_osm_base": "2022-12-23T18:38:58Z",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL."
},
"elements": [
{
"type": "node",
"id": 5800911294,
"lat": 52.1573433,
"lon": 4.5034587,
"timestamp": "2022-02-12T19:50:01Z",
"version": 19,
"changeset": 117334054,
"user": "Infodisiac",
"uid": 8367,
"tags": {
"admin_ref": "4026902",
"circumference": "7.67m at 1.5m height",
"comment": "near grave 194",
"denotation": "natural_monument",
"description": "largest beech in province South Holland",
"height": "18 m",
"horticulture": "grafted",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Leiden-Groenesteeg-11.jpg/1024px-Leiden-Groenesteeg-11.jpg",
"leaf_cycle": "deciduous",
"leaf_type": "broadleaved",
"natural": "tree",
"source": "survey;https://bomen.meetnetportaal.nl/source/index.php?c=portal&mm=claim&m=custom&options=monumentale_bomen/claimformulier.xml&boomnr=1690124",
"species": "Fagus sylvatica Atropunicea",
"species:en": "Copper beech",
"species:nl": "Rode beuk",
"start_date": "ca 1860"
}
}]
}
Lang werd dit 'javascript' bestand in obk_test.html als vaste html toegevoegd, en kon tussen gemeenten gewisseld worden door de betreffende html regel in/uit commentaar te zetten.
Nu is een stukje javascript in obk_test.htm die deze html dynamisch invoegt. Dat is minder hardwerk, maar maakte het ook mogelijk semi-automatisch te wisselen tussen verschillende testbestanden.
var map_input = 'leiden' ;
...
document.write("<script src='test_trees_" + map_input + ".js'><\/script>\n");
In een special modus (cycle) wordt elke keer dat de kaart gerefresht wordt, een volgende kaart uit de lijst geselecteerd. Deze opzet maakt het veel makkelijker om alle kaarten een voor een tonen na een grote aanpassing in script obk_vsv2html. Eenvoudig tientallen keren op F5 drukken.
valid_inputs =
"nederland|albrandswaard|amersfoort|amsterdam|arnhem|barendrecht|delft|den_haag|dordrecht|eindhoven|" +
"groningen|leeuwarden|leiden|lelystad|nijmegen|oegstgeest|ridderkerk|tilburg|utrecht|" +
"voorschoten|zoetermeer|zwolle|" +
"ankerpark|berbice|berkhoutpark|blijdorp|burcht|groenesteeg|beuk|huigpark|houtkamp|lumc|maresingel|morsdistrict|" +
"okkerheide|plantsoen|rembrandtpark|singelpark|van_der_werfpark|" +
"berlin|bologna|edinburgh|ottawa|paris" ;
if ((map_input == 'cycle') && (localStorage)) /* alleen als data tussen sessies bewaard kunnen worden
...
(kies kaart en zet in map_input, en sla deze op voor volgende sessie)
...
document.write("<script src='test_trees_" + map_input + ".js'><\/script>\n");
In het js script komen beide manieren om data binnen te halen, bijeen in loader.js, functie readjson
Test mode (obk_test.htm)
if (test_local)
{
if (typeof data_test === 'undefined')
{
alert ("Loading tree data failed. Processing will be aborted.") ;
return ;
}
else
{ data = data_test ; }
console.log ("json input file '" + file_json + "' contains " + digitsGrouped (JSON.stringify (data).length) + " bytes") ;
if (data.elements)
{ total_trees_to_import = data.elements.length ; }
else
{ return ; }
setTimeout (delayLoadTrees, 200);
}
Live mode (obk.htm)
else
{
read_succeeded = false ;
var read_error = ;
msg_aborted = ;
console.log ("d3.json (" + file_json + ") - read attempt ", reads_failed) ;
d3.json (file_json)
.then (function (json)
{
if (reads_failed > 0)
{ console.log ("Json file loaded successfully after " + reads_failed + " failure(s).") ; }
read_succeeded = true ;
data = json ;
console.log ("json input file '" + file_json + "' contains " + digitsGrouped (JSON.stringify (json).length) + " bytes") ;
total_trees_to_import = data.elements.length ;
setTimeout (delayLoadTrees, 200);
[..]
}
}
Kaart na runnen perl script automatisch laden
De vele iteraties tijdens script ontwikkeling maken dat het ook nuttig om de nieuwe kaart automatisch te laden, als laatste actie in het perl script.
Daartoe is er in obk_csv2json een flag $start_chrome
my $start_chrome = 0 ; # set to true (1) to start browser and immediately load test json file at end of run
... // een heleboel code
... // en nog meer code, tot vlak voor einde
if ($start_chrome)
{ &StartChrome () ; }
...
sub StartChrome
{
(copieer obk_test_auto.htm naar obk_test_auto2.htm)
(tijdens het copieren vervang 'qqqqqq' door naam gemeente)
$cmd = 'start chrome.exe "(pad naar html file)/obk_test_auto2.htm"' ;
...
}