Category: Daily Diary

Learn Javascript

Hie everyone and welcome to the Javascript Tutorial. Here I will not hardcode each and every thing. Rather will introduce with the important concepts which you should know about the respective language.

We will start with the concept debugger. What do you mean by debugger in lay-men language. Think about it!

So, bug means fault and debug means to correct fault. Here, debugger is the program(code) which will help to correct errors. I think it is as easy as to understand.

In JS you can debug code in various ways. Here they are illustrated in two ways.

  1. Using Debugger Keyword
  2. Using Console.log

Using Debugger

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<p id=”demo”></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

var x = 15 * 5;
document.getElementById(“demo”).innerHTML = x;
debugger;
x = 15 + 5;
document.getElementById(“demo”).innerHTML = x;
debugger;
x = 15 + 7;
document.getElementById(“demo”).innerHTML = x;

</body>
</html>

The execution will be stopped whenever the keyword debugger will be encountered. In the above code it will stop three times. You can check value of x at every breakpoint.

Using console.log

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>
Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select “Console” in the debugger menu.
</p>

a = 5;
b = 6;
c = a + b;
console.log(c);

</body>
</html>

You will see the value of variable c in the console window. In firefox and  chrome open console window with F12.

Another Case

While doing experiments on JS forms I got to know very interesting thing.

<!DOCTYPE html>
<html>
<body>

<form name=”myForm” action=”/action_page_post.php”
onsubmit=”return false” method=”post”>
Name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>

</body>
</html>

In the “onsubmit” attribute of <form> tag we call some function in the value part. But if return false Boolean value as shown above then the form would not submit. We can use this benefit in some condition like if any field of the form is empty by adding JS code as illustrated below.

<!DOCTYPE html>
<html>
<head>

function validateForm() {
var x = document.forms[“myForm”][“fname”].value;
if (x == “”) {
alert(“Name must be filled out”);
return false;
}
}

</head>
<body>

<form name=”myForm” action=”/action_page_post.php”
onsubmit=”return validateForm()” method=”post”>
Name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>

</body>
</html>

 

That’s all for today. Thank-you for bearing me.:)

Advertisements

WordPress Installation

Well the purpose of this blog is clear from the title only. But it’s not just that. Actually, I want to make my OSM_installation_script just like it or better than it. Moreover, my mentor Dr. H. S. Rai asked me to do so.

I followed the below link to install WordPress.

https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-lamp-on-ubuntu-16-04

When done all the steps mentioned on browsing to the http://localhost I got the  error illustrated below.

word_error

 

On googling to solve the error I got to know about installing the following package.

$ sudo apt install php7.0-mysql

It’s all done. Really it’s a job of 5 minutes.

 

 

Configure Apache2 Userdir

Scenario#- Consider a situation that you are a normal user rather a sudo user. You are desperate to run php program or anything require of Apache server. Ohho! You don’t have permission to edit anything in the directory /var/www/html(considering it as DocumentRoot Directory).

No worry, Apache2 provides here you a solution. You can even run everything from your home directory. It’s a job of 10 minutes. Believe me. 🙂

Steps Involved

$cd /home/username/
$mkdir public_html

Don’t make it with sudo as it will come under the owner root.

Change the permissions of certain directories.

 $ chmod 711 /home
 $ chmod 711 /home/username
 $ chmod 755 /home/username/public_html
 $ chmod o+r /home/username/public_html/index.html

Now, move to the directory mods-available

$cd /etc/apache2/mods-available
$sudo touch userdir.load           //don't replace userdir with your username
$sudo vim userdir.conf

Add the following code in it and save.

<IfModule mod_userdir.c>
        UserDir public_html
        UserDir disabled root
        <Directory /home/*/public_html>
                AllowOverride FileInfo AuthConfig Limit Indexes
                Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
                <Limit GET POST OPTIONS PROPFIND>
                     Require all granted
                </Limit>
                <LimitExcept GET POST OPTIONS PROPFIND>
                     Require all granted
                </LimitExcept>
        </Directory>
</IfModule>

 

$ cd /etc/apache2/mods-enabled
$ sudo ln -s ../mods-available/userdir.conf userdir.conf
$ sudo ln -s ../mods-available/userdir.load userdir.load
$ sudo a2enmod userdir
$ sudo /etc/init.d/apache2 restart 

And you are done! Now you can browse to http://localhost/~username

Apart from it, I tried to set up Apache virtual hosts using the link.

https://www.digitalocean.com/community/tutorials/how-to-set-up-apache-virtual-hosts-on-ubuntu-14-04-lts

Expand Your Vision

Today, I read about the difference the two directories sites-available
and sites-enabled. Likewise of mods-available and mods-enabled.

sites-available contain all the configuration files that may be active
or not whereas sites-enabled as it name suggest contain enabled or
active sites. We should never edit files in the sites-enabled
directory as it may create problem.

To manage the two directories simultaneously, edit the files in the
sites-available and create symlink in the sites-enabled. After that
run the command

$a2ensite abc.com

Similarly, substitute a2ensite with “a2enconf” for configuration file
and for .load file with “a2enmod”

Apart from this I tried to create passport size photograph and arranged it in a sheet using the online tools.

https://www.persofoto.com/upload/passport-photo

http://online-passport-photo.com/

 

 

 

 

Heating Saturday

So, here the presentation day came again, though entirely different. Before the session begins almost all trainees and new comers including me were demotivated, frustrated from last two weeks. Keeping all in mind there was General Body Meeting(GBM) cum motivation seminar.

My senior Vigasdeep shared some adventurous experiences with us. The moral of all the experiences was to execute it what you want to do, don’t think of anybody.

In-spite of all these knowledge, my senior Mandeep Singh gave a presentation on the the topic Password Manager- Pass

You can view it’s documentation from here

https://www.passwordstore.org/

Osmosis in OSM

Till now, whatever changes I do in the OSM data, I again download the latest data from OSM or from http://extract.bbbike.org/ and import the fresh data in the database. But this is not the efficient approach.

So Today, I am going to introduce you with the term osmosis. You can read it in detail from here

Osmosis Installation

$sudo apt install osmosis

$osmosis -v                          //tell version

INFO: Osmosis Version 0.44.1

Now, it’s time to use the tool. The first command I tried to check the difference in the changesets of the two files was

$ osmosis –read-xml file=”ludh.osm” –read-xml file=”ludhiana.pbf” –derive-change –write-xml-change file=”planetdiff-1-2.osc”

Luckily, I encountered with an error.;)

SEVERE: Thread for task 1-read-xml failed
org.openstreetmap.osmosis.core.OsmosisRuntimeException: An output error has occurred, aborting.

After browsing on the internet then I came to know about my silly mistake. For the file ludhiana.pbf I was using the flag –read-xml instead of –read-pbf. The correct command is

$ osmosis –read-xml file=”ludh.osm” –read-pbf file=”ludhiana.pbf” –derive-change –write-xml-change file=”planetdiff-1-2.osc”

Similarly, we can explore osmosis a lot.

 

 

FEM Presentation 2

As I have already mentioned in my previous blog I am taking course on Finite Element Method. I have given presentation on the topic Galerkin Form or Finite Dimensional Weak Form. I don’t know how much fruitful it was to the audience over there.

But the one who is reading this blog and was present over there can comment and questions for the same.

The documentation for the same is stored in zoho docs

After that I have put the whole code of webmap in my Github repository under the branch webmap.

https://github.com/amisha2016/pbOSM/tree/webmap

Now the task I am going to do is how to update data of OSM rather import it from scratch again and again. What I think it will be done through osmosis. But I am not sure.

Today, I tried was trying to make wiki page for pbOSM project and from that I came to to know that it is made with the Markup language. Again I have to learn one new language.:(

Now, it’s time to actualize the thing. So, bye bye for a time being.

FEM Saturday Begins

It’s necessary to nomenclature this Saturday as the master goal of the presentation was same  for all trainees “Finite Element Method Discussion”.

Necessity of this discussion?

Inspite of having very good videos by Coursera our focus is to assemble individuals knowledge at a hot point(TCC) and make a cool script out of it.;)

As I am having Jio at home. So, it’s difficult for me to watch videos online. For that  I tried to download whole playlists from youtube through youtube-dl command.

To download any playlist there is a special URL for that which is having playlist keyword in it. For example https://www.youtube.com/playlist?list=PLJhG_d-Sp_JHKVRhfTgDqbic_4MHpltXZ

This URL can be found by clicking on the link as shown below highlighted by red marker.

imageedit_4_5865450091

Command to download whole playlist is

$youtube-dl –yes-playlist –continue https://www.youtube.com/playlist?list=PLJhG_d-Sp_JHKVRhfTgDqbic_4MHpltXZ

While downloading big playlists if it breaks in between due to any technical issue like Net connection, Power off etc. you may use –continue flag to download existing playlists.

Apart from this I got a sticker of Apertium

IMG_1127.JPG

Apertium is free open source software for machine translation. For example

Screenshot from 2017-07-30 15-58-30.png

 

Inreased Zoom Level to 28 in OSM

Do you want to increase the zoom level of the OSM server? Then my friends, you are at right blog.;)

For it I am assuming that you have already made your pc an OSM server. While doing so, you have encountered with the term mod_tile. Am I right?

So, the whole story will revolve around mod_tile. If you are excited to know more about mod_tile then you can browse to my previous blogs.

Coming back to the topic we have to change overall 4 files in the directory mod_tile.

Edit the file /go/to/your/mod_tile/directory/openstreetmap-tiles-update-expire

EXPIRY_MAXZOOM=18

to

EXPIRY_MAXZOOM=28

The second file you have to edit is renderd.conf.

In [default] section uncomment the line MAXZOOM=18 and the change the value  from 18 to 28.

Note:- The file renderd.conf is located in two places. First one in mod_tile directory and other one in /usr/local/etc. You have to make changes in mod_tile directory because after making all necessary changes and recompiling mod_tile again. This renderd.conf file in mod_tile directory will automatically cloned to /usr/loca/etc.

Now, the turn comes for the third file i.e. mod_tile/includes/render_config.h

Change the variable

#define MAX_ZOOM 18

to

#define MAX_ZOOM 28

The last file which you have to edit is mod_tile/src/store_file_utils.c

This file need a lot of changes. So better to backup of this file initially.

 unsigned char i, hash[5];
to
unsigned char i, hash[7];

for (i=0; i<5; i++) {
to
for (i=0; i<7; i++) {

snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u.png”, tile_dir, xmlconfig, z, hash[4], hash[3], hash[2], hash[1], hash[0]);
to
snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u/%u/%u.png”, tile_dir, xmlconfig, z, hash[6], hash[5], hash[4], hash[3], hash[2], hash[1], hash[0]);

int i, n, hash[5], x, y, z;
to
int i, n, hash[7], x, y, z;

n = sscanf(path+i, “/%40[^/]/%d/%d/%d/%d/%d/%d”, xmlconfig, pz, &hash[0], &hash[1], &hash[2], &hash[3], &hash[4]);
if (n != 7) {
to
n = sscanf(path+i, “/%40[^/]/%d/%d/%d/%d/%d/%d/%d/%d”, xmlconfig, pz, &hash[0], &hash[1], &hash[2], &hash[3], &hash[4], &hash[5], &hash[6]);
if (n != 9) {

for (i=0; i<5; i++) {
to
for (i=0; i<7; i++) {

if (n != 4) {
to
if (n != 6) {

unsigned char i, hash[5], offset, mask;
to
unsigned char i, hash[7], offset, mask;

for (i=0; i<5; i++) {
to
for (i=0; i<7; i++) {

snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u.%s.meta”, tile_dir, xmlconfig, z, hash[4], hash[3], hash[2], hash[1], hash[0], options);
to
snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u/%u/%u.%s.meta”, tile_dir, xmlconfig, z, hash[6], hash[5], hash[4], hash[3], hash[2], hash[1], hash[0], options);

snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u.meta”, tile_dir, xmlconfig, z, hash[4], hash[3], hash[2], hash[1], hash[0]);
to
snprintf(path, len, “%s/%s/%d/%u/%u/%u/%u/%u/%u/%u.meta”, tile_dir, xmlconfig, z, hash[6], hash[5], hash[4], hash[3], hash[2], hash[1], hash[0]);

You have noticed that the hash value hash[5] is converted to hash[7]. It is due to make the metatile path longer. Not understood yet? Let me give an example.

The metatile take 5 bytes= 40 bits to cover all tiles for maximum zoom level 20. In simple words /var/lib/mod_tile/a/b/c/d/e/.meta

20 bits for x axis and 20 bits for y axis.

For zoom level 20 it require 5 bytes. Correspondingly for zoom level 28 it require 7 bytes.

28 bits for x axis and 28 bits for y axis.

That is why hash[5] changed to hash[7].

Now recompile your mod_tile again through the below commands.

make

sudo make install

sudo make install-mod_tile

sudo ldconfig

Now change the maxzooom parameter to 28 in Leaflet or any other Javascript library. You are done with it.

If you are having any problem with it. Then please do comment.

Data Structure- Relations

The basic data structure to map OSM are

  1. Nodes
  2. Ways
  3. Relations

To understand relations you should know about the first two elements. A Node is the x-y coordinate(basically a point) which is used to represent a point, icon on the map.

The table in the database which represent this nodes is planet_osm_nodes. This table defines the latitude, longitude of the point

Talking about the another element is “Ways” which is nothing but set of coordinates or a nodes to make a line, arc. In OSM it is used to represent rivers, boundary of a region etc.

The table in the database which represent these ways are planet_osm_ways. It displays unique id of a way, which nodes are participating to make a way and tags associated with the way.

Relations are an important data structure of OSM. Relations are basically combination of any of the two or all of the elements(Nodes, Ways, Relation). Relations are the conceptual database Model.

There are various types of relation like multipolygon, routes etc. To know more about relation types browse to http://wiki.openstreetmap.org/wiki/Types_of_relation

Invalid Multipolygons

  1. Unclosed Polygon like endpoint of way 2 and 3 are not joined.

400px-Multipolygon_Illustration_INVALID_1.svg

  1. If the endpoint of a way share more than two ways. As shown in fig endpoints of way #2 is shared by way #3, #1, #4 .

400px-Multipolygon_Illustration_INVALID_2.svg

Now, here I explain the table planet_osm_rels. There are columns id, rel_off, parts, members, tags.

  1. id– It assigns unique id to the osm relation. It can’t be null.
  2. rels_off– It tell number of members(nodes, ways, relation in total) participating to make a relation.
  3. parts– It tell which elements are participating by telling their unique id.
  4. members– It tell about the name of the element and associated role with it. Now here role describe the function of a member. Like, if type of relation is multipolygon than role of member(way) is inner or outer.

I think with this we have got a lot of overview of the data structures used in OSM.