jay's old blog

this blog will be deleted soon - please visit my new blog - https://thesanguinetechtrainer.com

jQuery – Getting and Setting DOM stuff

Getting and setting values in one of the most basic stuff that you can do when it comes to manipulating DOM elements. A simple scenario would be for you to read the contents of an input box. Then, based on the input box contents, you will be able to process it, and then put out the output into an output box or into a p tag.

To that effect, jQuery provides you with simple ‘actions’ that work as both ‘getting stuff’ and ‘putting stuff’ depending on what you do with the parameters.

Getting stuff

Most of the time you want to read the text that a particular DOM element holds. If so, here are two statements that help you do just that.

This one, gets the text that is part of a p tag element.

var collected_text  = $("#get_this_1").text();

This one, gets the text that is part of a input element.

var collected_value = $("#input_name").val();

If you wish to set a value, then you would do something similar, meaning the exact same method, but put the value as a function parameter.

$("#set_this_1").text("hello " + collected_value);

You will see that the same text action, works for both getting and setting the values. You don’t send any parameters, then it would be a ‘get’ action. If you do send a parameter, the same text action becomes ‘set’ and the parameter that was sent would be the value that needs to be set.

This can be taken further, if you wish to implement some sort of a call back function. A call back function allows you to get the ‘index’ of the element in the DOM, and also get a return value. Here is how it would look.

                //here is the call back stuff.

                $("#set_this_2").text(

                    //this is the call back function

                    //i will hold the index of the current element

                    //existing_text will hold the existing text in the DOM that is currently being manipulated

                    function(i,existing_text)

                    {

                        var text_returned = " index is i " + i + "previously it had - " + existing_text;

                        return text_returned;//this return value will be the new text to be set.

                    }

                );                   

As always, check our code repo to see all this in action.

jQuery – adding and removing stuff

Earlier we spoke about getting and setting a few things. However, this only works when you already have existing DOM elements to work with. However, you should also be able to add and remove DOM elements themselves. In other words, before you decide to manipulate DOM elements, you wish to create some DOM elements on the fly.

That is what this post is all about.

Here is how you might want to append stuff.

$("#hello_1").append(" <b>added this. ah!</b>.");

Here is how you might remove stuff.

$("#list_1").empty();

Honestly, I would simply ask you to go ahead and check out code repo because these methods are pretty straight forward, and the code and seeing it in action is the only way to go.

jQuery – Selectors

Earlier we wrote about the basic syntax of jQuery. Further, if we are to do DOM manipulation, then we need to know or ‘select’ the DOM elements we wish to manipulate. That means, we need some way to select the DOM elements and that is where we run into jQuery selectors.

Now, it’s example time to understand what these selectors are. Let’ say you are trying to catch fish. For that, you would use a net. Let’s say you were trying to catch a rat. You would use rat food or bait to do the same. Let’s say you are looking to catch some mosquitoes. Well, you just sit in your room with all windows open in the evening and wait for them to come near you. Of course, I am kidding with the mosquito catching. Don’t do that because mosquito bites are not funny and can be fatal.

Nevertheless, you get the point I am trying to make. Depending on what you wish to catch, you use the corresponding catching mechanism. Similarly, you use different selectors for different DOM element.

element selector

The element selector will help you select elements, using their tags.

id selector

The id selector will help you select element based on id.

class selector

The class selector will help you select elements based on their class.

combine selectors

you can also mix and match and select elements based on the parameters provided.

As always, check our repo to see all this code in action.

jQuery – including it in your webpage

In the previous post, I spoke about how jQuery is a library that works with web pages, allowing them to use JavaScript more efficiently. Of course, the next immediate question is, how do you include this ‘jQuery’ library.

As always, there are options. Both have merits and demerits.

Option 1 – download the jQuery library and include the file manually in your webpage.

jQuery is a JavaScript file that is available for download from jquery.com. Head over to their download section and get the jQuery file and include it into your webpage like you would include any other external JavaScript file.

The good about this method is that you have complete control over which jQuery version your webpage will use. Also, you will be providing a copy of your own jQuery file to your users. To me this option works well, when you are thinking of making some modifications to the jQuery library. Any modifications you did will be limited only to your jQuery file, so it makes sense that you would provide your own jQuery library.

This strategy of providing your own jQuery file will falter if something unexpected should happen. For instance, tomorrow when a better version of jQuery becomes available, your website (and by extension the users) cannot make the most of it. You will have to update your jQuery yourself. If something goes wrong when you are updating your own jQuery file, the entire website will stop working because, a lot of functionality depends on the now faulty jQuery file.

Unless you have a specific reason to do so, it is a good idea to not use your own jQuery file.

Including your own jQuery file would be something like this, which indicates that the jQuery library is available in the current folder of the webpage.

<script src="jquery-3.0.0.min.js">

Option 2 – use a Content Delivery Network

Content Delivery Network or CDN is some entity, usually a company, that provides a publicly accessible jQuery library file that anybody can use with almost zero restrictions. The cool part about this is that CDNs are big name companies like Google and Microsoft. So, you can be certain that the jQuery library you want will always be available. Further, these companies have super cool engineers who make sure that library itself will never get corrupted.

Not only that, the CDNs have file servers that serve this library file all over that world. That way, your users who are accessing the library can get the jQuery related stuff from a nearby server, while only getting the website stuff from your servers.

Overall, this is a pretty neat arrangement. You get the jQuery file that you need in the best possible manner at no cost to you. Someone else maintains it for you. Coolio!

Using a CDN – from Microsoft – would look something like this.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js">

As always, find our code at our repository that shows how to do this.

jQuery, JavaScript and libraries in general

I have already written a lot about Javascript earlier. Javascript is what makes awesomeness happen in a web page. But of course, this is the world of computer science. That means, once we have something awesome, we have to build something else which is even more awesome, making the previous awesomeness look mundane.

Part of that evolutionary approach is jQuery. There are many ways to describe jQuery, but for me, it reminds me of those libraries that we include when we build applications in c sharp or c or java or any programming language for that matter.

Here, let me harken back to the good old times when I was programming on c language. Back then, when I wished to use a function, I had to ensure that the necessary library file had to be included. For instance, we had something called ‘getch’ method that would halt the program from disappearing at the end of execution. Coming forward to present times, developing on .net, I use something like ‘console.readline’ to achieve the same effect.

In both cases, I must understand that, I had to include the necessary libraries before I can use them. If the libraries are not included, then the compiler has no idea, what ‘console.readline’ is. If the compiler does not know what they are, there is no way we can get a output build out of it. If we are looking at a more real life examples, I can think of two.

The first example would be reading a book and running into a word that you don’t understand. For instance, ‘you should be on the qui vive for bats’. Now, do you know what that sentence means? In all probability you don’t, not until you do a Bing search or grab a dictionary.

Another example would be watching the 5th movie in a 10 movie series. If some character comes (introduced in the 1st movie) and starts doing things, you won’t fully understand the character actions. You would either have to watch those earlier 4 movies or ask someone who has watched the 4 movies to get yourself up to speed.

jQuery is sort of like the ‘references’ or ‘dictionaries’ or ‘libraries’ that we use to speed our work. Going back to our movie example, let’s say you are already watching the 5th movie and that character comes. You have two choices. Watch all the earlier 4 movies or ask a friend who has already watched everything. Watching all the 4 movies may not be feasible, especially if you are already well into half of the 5th movie. It would be simpler if you simply get the necessary piece of information from your friend and enjoy watching the current movie.

This is in essence, what any library does in any programming language. You wish to do some advanced math? No problem. Obtain a math library and include it in the code. You wish to do animation? Include the animation libraries. You wish to do encryption? Include the necessary encryption libraries and start using them.

Similarly, jQuery allows you to do a lot of the usual Javascript work (which boils down to making web calls, playing with data and DOM manipulation) faster. If jQuery is not there, you can still do most of the things with JavaScript. However, the situation is similar to walking to work or taking the cab to work. In both cases, you will reach your office, but which one is more beneficial from a strictly efficiency perspective?

jQuery – the core syntax and stuff

When you read about JavaScript you saw about some essential things you will do when working with it. For instance, you can simply use variables without actually having to declare it. You can write comments inside the ‘script’ tag. Stuff like this.

Similarly, jQuery also has some basic stuff that act like the foundation rules. Once you know about these things, you will have a much easier time understanding jQuery. Of all the foundation stuff, two basic things would be the ‘ready’ event and the ‘3 part’ syntax.

Ready Event

Web pages, by their very nature of getting all the things from the server, take time to load. Now, if a page is still ‘loading’ and we try to operate on it, it could…well…it will definitely lead to problems. The page might become unresponsive. To avoid these issues, you always…and I mean, always, put your jQuery stuff inside the ready event.

It looks something like this.

$(document).ready(

    function()

    {

    //put all your code here man or

    //put all your code here woman

    });

Whatever jQuery work you want done, it will go inside the function definition above. The ready event is a built in event detection system in jQuery which tells the script that, yes, the page is ready for DOM manipulation. This way, you ensure that your page does not become unresponsive and also ensure that the page is ready before you kick the door, ready for some DOM manipulation action.

jQuery standard syntax

jQuery always has 3 parts to its each line - $(document).ready(function(){}); - and you can find them used anytime jQuery is active. In this code that I just gave – borrowed from the above ready event section – you can see the three essential parts of any jQuery usage.

The three parts here are

·         $ - in this case, well, the $ symbol. This is used to indicate that jQuery is about to happen.

·         selector – in this case, the selector is (document). This indicates that we are apply jQuery things to the entire document.

·         action – now that we have grabbed a DOM element via the selector, apply an action. In this example, the action is ready(function(){});. Here the action is that, once the document is ready, lets trigger the function inside ready.

In general, the same three part syntax is followed throughout jQuery. If you think about it, it makes perfect sense. JavaScript and by extension, jQuery, are but tools. Tools that make it easy for you to manipulate DOM elements. The 3 parts of the syntax align perfectly with it. We first use the ‘$’ symbol to indicate that jQuery is about to happen. Then, we choose one or two or some set of DOM elements. After that, we apply some action to the selected DOM elements.

It cannot be more simple than this. As always, check our code repo for actual code doing the above.

Project on grid tie inverter (GTI) -Part 3

This is the last blog about grid tie inverter. I am going to explain the hardware part of the project here.

Below is the control circuit for the implementation of grid tie inverter.

 
                           


The control circuit is comprised of three basic blocks, the six volt reference, sine wave generator and triangle wave generator. When these blocks are implemented with comparators and other small analog circuitry they control the PWM signals that the two MOSFET drivers will send. The PWM signals are fed into these MOSFET drivers that perform level translation to drive four N Channel MOSFETs in an H Bridge configuration.From here the signal is sent through a low pass LC filter so that the output delivers a pure sine wave.

Power circuit for the implementation of GTI is as shown below,

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          

                                                                                                                                                                                        Working of an H-bridge can be divided into two modes.

  • In Mode 1, the input signal at the gate of M1 is high and at the gate of M4 it is low. This causes conduction from M1-M4 and we achieve a +12V signal at the output.
  • In Mode 2, the input signal at the gate of M3 is high and at the gate of M2 it is low. This causes conduction from M3-M2 and we achieve a -12V signal at the output.
 Thus we obtain a 24V peak-peak signal at the output

Advantages of GTI:
  •       It reduces electric bill.
  •       Simple to install
  •       Reliable and flexible
  •       Renewable energy has always helped in reducing global warming and greenhouse effect
Disadvantages of GTI:
  •       It cannot feed power when the  main grid is off.
  •       It will work effectively and produce direct current only when the Sunlight is strong.
  •       The solar panels that are used to attract Sunlight requires lots of space.
The final output waveform we obtained from the hardware circuit is,



                                              


Conclusion and future scope:
The frequency,amplitude and phase of the GTI output signal are synchronized with the voltage signal of the grid in the MATLAB (Simulation). Results confirm that the GTI is capable of producing an AC waveform that is synchronized with the grid. Future software modifications will add the capability to control real and reactive power output from the inverter, in addition to output frequency. Simulations show that the proposed control scheme is capable of handling all the non linearities of the system.


Project on grid tie inverter (GTI) -Part 2

In this blog I am going to explain in detail about the grid tie inverter simulation.

Below is the brief description of the system.

 
                       

                                          (a):four-quadrant DC/DC converter (b):voltage at the output of the inverter

The proposed system is shown in Fig (a), The renewable energy source is connected to a single-phase stiff grid through a single-phase current source inverter. On the DC side of the inverter, an inductive filter allows reducing the low order current harmonics induced by the input voltage of the inverter. The battery bank is connected to the inverter through a low pass filter and a four-quadrant DC/DC converter that manages the DC current from and to the battery bank.

The current source H-bridge inverter has a capacitor connected across its output, with a capacitance value of Co,which filters the current and voltage at the point of common coupling (PCC). On the other hand, the four quadrant DC/DC converter allows bidirectional power flow between the battery and the grid by keeping the polarity of the DC current on the inverter side while changing the polarity of the applied voltage.

Fig (b) shows the voltage vat the output of the inverter at the output of the inverter (the injected voltage), and the voltage imposed by the stiff grid, vs. The phase angle o φ between vo and vs will be used to control the direction of the power flow between the Battery Energy Storage System(BESS) and the grid.

The complete simulated model is as shown below.


           
                                                                                                        Complete simulation model

The operation of the proposed inverter can be divided into two parts. The first part is the synchronizing and the second part is the power sending. On the synchronizing part, the inverter will generate the output in phase with the grid. This is done by sample the sine wave and set the phase shift to zero. This unshifted sine wave will be rectified and compared with the high frequency triangle wave to produce the PWM(Pulse Width Modulated) signal.This PWM signal will then undergo an AND operation with the square wave and produce 4 set of the signals. 

Output voltage waveform of the above simulated model is as shown below.The dark blue waveform shows the Grid Tie inverter output voltage compared with that of the light blue waveform of the grid voltage.



                        
                                                                  output voltage compared with that of grid

 

The Fast Fourier Transform (FFT) tool in MATLAB allows the computation of the fundamental component of voltage and current while simulation is running.From the harmonic analysis  the total harmonic distortion is 7.64% and DC component is 5.874 when one cycle of AC waveform is considered.

In the next blog I am going to explain the hardware part of  the project along with result and conclusion.

 







Getting started with Amazon Web Services

There was a time when I, and by extension our club, study nildana, was a full on Microsoft house. All of us used windows phones, windows 10 desktops, visual studio for development and Microsoft Azure for cloud and site hosting. However, times change and study nildana has to move on with times. Hence, we made some changes to adapt other service providers as well.

One of those decisions was to explore what Amazon Web Services has to offer. Of course, while a decision was made to use other service providers, there is always a trigger point that leads into actual action. Over the last few weeks, I have been thinking about servers. I know my way around Microsoft SQL servers, but my knowledge about MySQL is extremely limited. Back when I was Microsoft only, and Azure only, I had jump through a lot of hoops to get MySQL.

In fact, I still do not know why Microsoft won’t give a native cloud solution for MySQL. As of today, there are two ways to get your own MySQL solution running.

·         Buy from a vendor. Microsoft has a marketplace which is extremely useful. One of those vendors is ClearDB who provides instances of MySQL databases. This is good for most use cases but the problem is, this is no different than buying database from a local provider. You get none of the obvious benefits of Azure. Heck, if you have Azure credits, it won’t work in the marketplace, at least not with ClearDB. Further, ClearDB has some extreme limitations which makes it next to useless for most scenarios. I have used ClearDB and it was insanely expensive and it was extremely not productive at all.

·         Build your own MySQL server. This is something that I eventually decided to do. You see, MySQL is open source. That means, you can install it wherever you want. That’s one piece of the puzzle. Then, there is the fact that Microsoft provides windows server as a virtual machine, at fairly low prices. So, you simply commission yourself a windows server virtual machine, and install MySQL on top of it. Open up the ports and you have an almost native solution.

The second option – using the windows sever with MySQL running on top of it – is good. Still, it is still not as cool as the native azure service. For instance, look at the MS Server databases that Azure provides. All the scalability in the world, cheap prices and incredible backup and security. You get none of that flexibility with MySQL related.

That is when, it occurred to me, Amazon provides native MySQL services. I have been itching to try that service out. Here are some of the stuff that impressed me.

·         I was able to use my existing amazon account. Made sign up easy.

·         Amazon is giving a year of free cloud usage, which is good enough for my practicing and blogging.

·         They of course have native MySQL solutions.

First impressions though, the Amazon ‘console’ is simply not as good looking as the Azure management site or the management portal. Also, it looks like everything is bare bones on Amazon, in terms of user friendliness. I will blog as and when I do more on it right here.

Mapping Azure site to Godaddy domain

One of the many things that I find myself doing a lot is domain mapping. This is essential and something that happens a lot when you are experimenting with lots of web content. Here is how it normally works.

  1.          You build your site on your computer.
  2.          You then push your site files from your computer to your site on azure web sites.
  3.          Then, you buy the domain from Godaddy.
  4.          Now, you need to connect that domain from Godaddy and the site on your azure web sites.

In this post, I am talking about the last step, connecting domain with azure web site. In order to do this, you will need some information from Azure, and also from Godday.

On the Azure, side of things, you need to be ready with the following.

  1.          Login to your Azure management site (not the azure portal, which is frankly a big mess and I don’t use it right now).
  2.          Select your website, and head over to the dashboard.
  3.          At the bottom of the webpage, you will see ‘manage domains’.
  4.          Here, you will fill in some stuff, but later. Right now, simply make a note of the IP address provided over there.

On the Godaddy side of things, you need to.

  1.          Login, of course.
  2.          Then, head over to your domain details and select your domain. If you don’t see something complicated (you will know it when you see it) ensure that you are using ‘list view’. DO NOT USE ‘card view’.
  3.          Once you are in your domain, you will see something called ‘DNS Zone File’. Yup, go into that.
  4.          Here, there two things that bother you – A (HOST) and CNAME (Alias).
  5.          Under A, you have two things ‘*’ and ‘@’. For both, put that IP address that you got from Azure (the top steps of Azure). Save the changes.
  6.          Under CNAME, you need to add two entries.
  7.          First entry will be ‘awverify’ (Host) and ‘awverify.<yourazurewebsiteaddress>’ (Points To)
  8.          Second entry will be ‘awverify.www’ (Host) and ‘awverify.<yourazurewebsiteaddress>’ (Points To)
  9.          Your azure website address will be something like hello123.azurewebsites.net. Here ‘hello123’ is the name you may have used when creating the website on Azure management window.
  10.          After adding both, save.
  11.      Now, come back to that Azure page, where you found the IP address (Manage Domains).
  12.          Enter your domain name, without ‘www’. Azure will find it, and give you a green check mark.
  13.          Enter your domain name, with ‘www’. Azure will find it, and give you a green check mark.

That’s it! Now, your azure site and domain on Godaddy are both connected. Of course, these steps will work for not just Godaddy but any domain company from which you purchased your domain from.