Node.js -3 | Reading user input from the command line

Readline module, which comes with the Node.js core reads user input so that you can use it as an interaction.

In this example, the user will tell how many glasses of water he/she drinks each day and we’ll say if it’s healthy enough or not.

In the script.js file, require the module like:

var rl = require("readline");

Create the prompts variable:

var prompts = rl.createInterface(process.stdin, process.stdout);

Request user input with a question:

prompts.question("How many glass of water do you drink each day?", function (glasses) {
	var message = "";
	if (glasses > 5) {
		message = "Great! Water is the key of a healthy life.";
	} else {
		message = "Are you drinking just " + glasses + " glass of water? You should drink at least " + (6 - glasses) + " more.";
	}
	console.log(message);
	process.exit();
});

Output will be like:

> node script.js
> How many glass of water do you drink each day?
> 5
> Are you drinking just 5 glass of water? You should drink at least 1 more.
> node script.js
> How many glass of water do you drink each day?
> 7
> Great! Water is the key of a healthy life.
Post a comment

Node.js -2 | Modules: Custom Module and Sample Usage of Markdown Module

In this post, I’ll share some code about how to use modules in Node.js. I will use a custom module (user-defined) and a public module (Markdown module). The code samples are form Lynda.com’s Node.js lessons.

——

Defining a local module (A module that returns Fibonacci numbers)

1- In the root of Node.js application, navigate to node_modules folder and then create a dir for your module:

> cd node_modules
> mkdir data_module

2- Create module file:

> nano fibonacci.js

And edit its content like this:

exports.data = [1,1,2,3,4,8,13,21];

Save and exit the editor.

3- In app root folder, create the main file:

> cd ..
> nano script.js

And edit like this:

// './' prefix tells that the module is local, not global
var sequence = require("./fibonacci");
console.log(sequence.data);

Note: “Local modules are useful for when you want to separate your data from your code.”

——

Markdown module simple usage

First, create a Node.js app with Markdown module dependency enabled and install these dependencies as I talked about here.

In your script.js file:

var parser = require("node-markdown");
var html = parser.Markdown("This is a **markdown** text.");
console.log(html);
Post a comment

Node.js -1 | Initialize a Node.js project with dependencies

Not so long ago I’ve started to study lessons about Node.js. There’s no need to praise or to talk about it or why I want to learn it, it just excites me as a new platform and I intend to keep studying unless I don’t feel like it’s not worth it -which I doubt.

Here I want to share my Node.js notes regularly, from very basic to the complex(hopefully).

———

Running Node.js scripts

Download and install from:

http://nodejs.org/

To build (run) a Node.js script:

> node file.js

———

Initializing a node app and build it with dependencies

1- Initialize:

> npm init

2- After initialization, package.json contains project information. You can add “dependencies” to this file like:

"dependencies": {
	"node-markdown": "0.1.0"
}

If you want to require latest version of a dependency module:

"node-markdown": "*"

3- Install these dependencies:

> npm install

———

Some other useful stuff about managing the app

Update these dependencies to latest versions:

> npm update

Update node.js global libraries:

> npm update -g

Remove an installed library:

# remove from "dependencies" object in package.json, then:
> npm prune

Search through node.js modules available for free:

> npm search 
# better not to use it without grep or it may take quite long time
> npm search | grep markdown
# or find from http://npmjs.org

Tail changes of a file and execute it automatically on console after each change:

# -g installs as global
> sudo npm install node-dev -g
> node-dev script.js

———

No “Hello, world!” yet. These are just basics that we’ll probably do quite seldom.

Post a comment

html2canvas- Take Screenshot of Web Page and Save It to Server (Javascript and PHP)

FeedBack is important. Usually, end-users struggle to clarify their problems. And you might be unreachable for a phone call or remote connection.

That causes a huge need of visualization. First solution that appears in mind is to capture the current screen of user.

However, when I tried to implement that, it wasn’t so easy as I expected. Some old ways offer ActiveX but it seems too outdated. Since there’s a bridge needed between client side and server, JS libraries are the best way.

There’s a great library, html2canvas. It is told to be reverse-engineered version of Google Plus’ way of taking screenshots.

When I first discovered this library, it took me a while to use for simplest implementation. I just wanted to visualize a div element. However, there was no single page to tell the whole path to follow, thus I had to combine various sources.

Here’s how you can easily use for taking a screenshot of a div:

1- Import libraries
There are 3 libraries to import:

  • jquery.js
  • html2canvas.js
  • jquery.plugin.html2canvas.js

You can download html2canvas and html2canvas jQuery plugin from this link.
Note: The source link contains html2canvas v0.40. I recommend you to check for a newer version and use it instead from official html2canvas site.

I have used jquery.min.js v1.7.1 but you can try other versions. For this jQuery library, use this link.
Here’s first lines of code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<!-- -->

2- Create your div
In my code, I used html2canvas for a div. You can use the whole body tag instead, it’s up to you.
Attach a div element to the page with a certain id:

<div id="target">
<!-- Render your page inside of this div. -->
</div>

3- Create a button and a hidden form
This part is important. In order to save the image to server, we need to pass captured image data with a form field.
In 4th step, you’ll see JavaScript code that writes the image data to hidden field and posts the form.

<input type="submit" value="Take Screenshot Of Div" onclick="capture();" />
<form method="POST" enctype="multipart/form-data" action="save.php" id="myForm">
    <input type="hidden" name="img_val" id="img_val" value="" />
</form>

4- JavaScript Code

    function capture() {
        $('#target').html2canvas({
            onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
                $('#img_val').val(canvas.toDataURL("image/png"));
                //Submit the form manually
                document.getElementById("myForm").submit();
            }
        });
    }

5- Use the posted values
Here I used a form to post the value. You can use Ajax calls or whatever. I have a PHP file, save.php. In this file, we will both show the picture and save it to the server.

//save.php code

//Show the image
echo '<img src="'.$_POST['img_val'].'" />';

//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);

//Decode the string
$unencodedData=base64_decode($filteredData);

//Save the image
file_put_contents('img.png', $unencodedData);

6- Enjoy your day
So that’s pretty much it. Click here for a live demo or download the codes from Github repository page.

7- Notes

* This tutorial uses html2canvas v0.4.0 – 30.1.2013. It has a new release, v0.4.1 – 7.9.2013, can be downloaded from here. Though avaliability of newer versions haven’t been tested with the code above.

* Some people have declared that they had issues with checkbox/radiobutton states on the captured image. Stu has shared his code to capture these elements with their states. I haven’t tried by myself but people who face problem about this may get some opinion from his comment.

154 Comments

Javascript: Export HTML Table to Excel With Custom File Name

Web browser wars hurt developers’ hearts. It is mostly about CSS, sometimes about JavaScript, HTML etc…

Thus I know how it feels when you expect something to get done easily appears a lot more harder than you expected.

Code below is tested only with Chrome (24+). It is making these processes:

  • Gets the HTML code of your table inside your div element.
  • Replaces the spaces in the code with correct syntax for Excel (otherwise spaces will be removed in your Excel sheet).
  • Generates a specific file name (for minutes) in order to avoid overriding old files and to supply archiving by date values.
  • And lastly and most importantly, saving the file with a custom file name.

Here’s my combination of codes (from different SO questions or tutorials) if you want to save HTML table to client computer using JavaScript code.

$(document).ready(function() {
	$("#btnExport").click(function(e) {
		//getting values of current time for generating the file name
		var dt = new Date();
		var day = dt.getDate();
		var month = dt.getMonth() + 1;
		var year = dt.getFullYear();
		var hour = dt.getHours();
		var mins = dt.getMinutes();
		var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
		//creating a temporary HTML link element (they support setting file names)
		var a = document.createElement('a');
		//getting data from our div that contains the HTML table
		var data_type = 'data:application/vnd.ms-excel';
		var table_div = document.getElementById('dvData');
		var table_html = table_div.outerHTML.replace(/ /g, '%20');
		a.href = data_type + ', ' + table_html;
		//setting the file name
		a.download = 'exported_table_' + postfix + '.xls';
		//triggering the function
		a.click();
		//just in case, prevent default behaviour
		e.preventDefault();
	});
});
70 Comments

Asp.Net Server Side: How to get Iframe’s Parent Window Url?

In Asp.Net server sided button’s click event, I somehow needed to find parent window url of an iframe, which means the url you see in the address bar of your web browser.

Let’s think of 2 pages: Parent.aspx and Child.aspx. Child.aspx is loading to an iframe in Parent.aspx. If you have a button in Child.aspx, you will be getting “Child.aspx” result when you use Request.Url method in this button’s click event.

But you see “Parent.aspx” in the address bar, right? So how to get it?

Here you need to work with client side peacefully. Otherwise the server will keep giving you the same result.

First, place a button running at server, add a click event and a client-click event.

    <asp:Button ID="btnFindParentUrl" runat="server" Text="Get Url!" OnClick="btnFindParentUrl_Click" OnClientClick="fillHidden();"></asp:Button>

Put a hidden textbox inside a div with style=”display: none;” (not Visible=”false” for button because if you do client can’t see and fill it):

    <div style="display: none;">
        <asp:TextBox ID="txtHiddenUrlField" runat="server" BorderStyle="None" Font-Size="0px" ForeColor="#F6F6F6" Height="0px" Width="0px"></asp:TextBox>
    </div>

Now place javascript code of fillHidden() function:

    <script type="text/javascript">
        function fillHidden() {
            document.getElementById('<%= txtHiddenUrlField.ClientID %>').value = parent.document.location.href;
        };
    </script>

That’s all you have to do at client side.
Let’s go to the server:

    protected void btnFindParentUrl_Click(object sender, EventArgs e)
    {
        string parentUrl = txtHiddenUrlField.Text;
    }

This way, you should be getting parent url from button in an iframe.

3 Comments