Web effects, HTML, Jquery, CSS Part 1.1 - My code for my front page.

Front page animation Sam's Playground (Portfolio)

Code Snippet for my animation on my front page here

View Animation

Javascript

So first we start by defining a few variables. Next we extract the characters from the head tag and perform required steps in the extract function. This is a function I defined to perform animation. It is a helper function. Also, we register animation frame for the window. All happening inside the ready function.

var head1 = $("h1#head1");
var total = 0;
var scene;
var camera;
var renderer;
var mwidth = 900, mheight = 900;
// Jquery Ready function, triggered when document is "ready"
$(document).ready(function() {
//Extract the head tag value
extract(head1);
// Use built-in function to create new animation frame to make it smooth.
window.requestAnimFrame(dripp);
// Variable to store oldtext from head value.
var oldtxt;
});

// Extracting Characters from the string from head tag. Making this a slightly modular approach.
function extract(_textholder){
var htext = _textholder.text();
var hlen = htext.length;
total += hlen;
_textholder.text("");
for(i=0; i< hlen; i++){
_textholder.append("<h1
class='drippers'>"+htext[i]+"</h1>");
}
}
// Function that actually performs addition and deletion of animation class so that we can animate random characters.

function dripp(){
rnd = parseInt(Math.random() * total);
$(".drippers").each(function(i, obj) {
if(i == rnd)
$(this).toggleClass("drippin");
});
window.requestAnimFrame(dripp);
}

// Fix for built-in function for setting callback time.
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000);
};
})();

CSS

.drippin is a CSS class which enables the 'drippin' keyframe animation. This is the class we apply and remove to perform the animation. The animation itself is defined in keyframes. The first part of the animation starts at 0% and the text-shadow property allows to create the effect. We define the property value for each of the time steps in the keyframe. We define individual keyframe animations for each browser.
Chrome - @-webkit-keyframe
Mozilla - @-moz-keyframe
Opera - @-o-keyframe
Others - @keyframe

.drippin {
 -webkit-animation: ease drippin 1.5s infinite;
 /* Safari 4+ */
 -moz-animation: ease drippin 1.5s infinite;
 /* Fx 5+ */
 -o-animation: ease drippin 1.5s infinite;
 /* Opera 12+ */
 animation: ease drippin 1.5s infinite;
 /* IE 10+, Fx 29+ */
}
.drippers {
 text-transform: full-width;
}



@-webkit-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px black;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -10px 4px white;
 }
}
@-moz-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px red;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px maroon;
 }
}
@-o-keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px red;
 }
 10% {
  text-shadow: 0px -0px 2px red;
 }
 15% {
  text-shadow: 0px -3px 3px red;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px maroon;
 }
}
@keyframes drippin {
 0% {
  text-shadow: 0px -5px 2px blue;
 }
 10% {
  text-shadow: 0px -0px 2px lightgreen;
 }
 15% {
  text-shadow: 0px -3px 3px blue;
 }
 20% {
  text-shadow: 0px -4px 3px red;
 }
 100% {
  text-shadow: 0px -100px 4px lightgreen;
 }
}

If any of the code doesn't work, you can troubleshoot it by:

1. Checking the variable names, definitions, and other related syntax 
2. Remove all or misplaced comments.
3. Check for keyword spelling mistakes.
4. Try a different browser.
5. Open Inspector > Console to check for errors.

Best of luck, and happy coding! Hope you have fun and create more such animations to place on your websites!

Samartha  K V

PYTHON COURSE 1b - INTRODUCTION TO PYTHON DEVELOPMENT

(Second Coming from report)

PLEASE ACCESS THE APPENDIX HERE

GITHUB

Working with SERIAL input from devices

Working with Windows Device Manager

Device Manager

These can be setup in the Device Manager section of the Control Panel in Windows. To access the Device Manager, please follow these steps.

•         Click the bottom-left Start button on desktop, type “device manager” in the search box and tap Device Manager on the menu.

•         Or else, Open Device Manager from Quick Access Menu. Press Windows + X to open the menu and choose Device Manager on it. 

•         One might also Access Device Manager in Control Panel. [Google]

Once device manager is visible, we can find the device under Ports (COM & LPT). The RADAR should be listed under this section only.

Note: Device Manager is used to setup both the devices.

Reading from serial input

When we have USB COMM Port devices, we need can read data generated by them using various toolkit libraries, such as pySerial in python etc. However, we might need to Poll the device for data once or twice before actually setting up automated tasks using python.

Here I go into the thinking involved while working with such devices.

I take as example the ICM 20948 IMU component. While reading data from this device, one must:

• Refer to the Datasheet for possible COMM Port settings and requirements.
• Utilize Putty to connect serially and read data
• Looking up related documentation for downloading and installing drivers. 
• Sometimes we might have to install unsigned Drivers
• Please refer to Google to find out how to disable Windows Driver Signature Verification at boot.
• Next, lookout for consumer facing data reading software.
• For example, ICM 20948 can be used with MotionLink provided by the manufacturers to view the real time data from all the sensors.
• Such software can be customized using their own IAR Workbench IDE. 
• Look for manufacturer provided examples. 
• Look at other alternative locations to download related datasheets and configuration files or supporting applications
• Be sure to try different versions of the IDE to figure out what works on your system with that particular component.

Link to my report on system for 3D-DIC measurements and techniques using ICM and RADAR component, while hooking it up with RaspberryPi.

I worked on an academic project with the Mechanical Department, where I worked with these components and used pyserial library to interact with both of them simultaneously as was the need of the project. The complete guide to software development in these scenarios can be found alongside the report of calibration and usage.

You may access the report from my drive link here

GitHub Repo

PYTHON COURSE 1a - BASIC INTRODUCTION TO PYTHON DEVELOPMENT

INSTALLING AND WORKING WITH PYTHON

1. DOWNLOAD VS CODE EDITOR

Download VS CODE here

WHILE INSTALLING, BE SURE TO CLICK

1. ADD TO PATH IF POSSIBLE
2. ADD TO CONTEXT MENU FOR
1. FOLDER
2. FILE

INSTALL PYTHON here

VERSION 2.7.XX

select Add to Path option while installing.

2. NEXT,

1. Open the command prompt by typing cmd in the Start application
2. Then type python in Console Window to check if python is installed.
3. If yes, the console should go into the python shell. LIKE SO
   

3. NEXT,

4. Exit the shell by keying in “exit()” into python shell
5. When in cmd console
1. You should see the cmd root like
   
2. “samar” is replaced by your username – THIS is your HOME folder.
3. Common CMD line commands are

                                                       i.      Make Directory

1. mkdir <space> <DIRECTORY_NAME>

                                                     ii.      Change Directory

1. cd                        Current Directory
2. cd <space> <DIRECTORY_NAME>  Goto DIRECTORY_NAME
3. cd <space> <DOT DOT> (cd ..) Go One folder up or Back.
4. Examples:
1. cd ..
2. cd Desktop
3. cd Desktop/Some_Folder
4. cd Desk*

                                                                                                                      i.      Autocompletes characters with * - 0 or more chars.

                                                                                                                    ii.      Autocompletes characters with + - 1 or more chars.

                                                   iii.      List Directories and files

1. dir in Windows.
2. ls in Linux.

                                                    iv.      Whatever you type here in cmd is a program

1. If the program exists, it is opened
1. If its console program, only console is shown.
2. If its GUI – window based program, both console and window is shown
2. If the program doesn’t exist, then the error command not found is shown.

4. NEXT,

6. Download the program.
   DOWNLOAD HERE - test.py
   
7. Open CMD C:\users\your_username> <ENTER CMD>
1. Navigate to Desktop cd Desktop
8. Create a folder using mkdir NEW_FOLDER_NAME (ex: mkdir test)
9. Copy the test.py into the directory. Enable Show File extensions for known formats from View Options at the top
10. AFTER making sure that the current directory is open by using cd
1. cd should show you C:\Users\YouRs\Desktop\test
2. else use cd test to enter the newly created folder housing the test.py file.
3. To edit the file, use vs-code. Try Right-Click in folder and select Open with Code.
11. Once the cmd is in test folder, we can try running the program.
12. Just type python test.py to run the code. You should get this output
    

To learn more try

1. Tutorials Point - python course

Machine Learning Resources

Udemy Courses:

1. Machine Learning A-Z™: Hands-On Python & R In Data Science
2. Advanced AI: Deep Reinforcement Learning in Python

Other sources

• Complete guide to ML/AI Pybook
• Programming and Core concepts
• ML is easier than it looks
• Best place to begin
• Textbooks
• AI-A Modern approach Download 
• Introduction to Machine learning Download
• Bishop Pattern Recognition and ML Download
• For programming Computer Vision - PCV

Web effects, HTML, Jquery, CSS Part 0.1

Hello guys, today I will let you know some tricks in Web development which you can use on your website too.

The modern libraries are helping us use advanced effects and filters which weren't available before.

HTML tips

1. Never start from scratch
2. use various libraries
3. do the new - use Node js to implment angular for front end and use express for backend.

CSS tips

1. Use CSS libraries.
2. use LESS and SASS.
3. dont have to edit colors and graphics from scratch
4. use dreamweaver or similar website builder
5. use material library from angular or such other solutions to quicken your design.

JS

1. Learn object oriented JS
2. Learn typescript and angular programming, refer to angular.io for their tutorials.

SEO

1. Try google SEO.
2. Try google adwords and define keywords to increase traffic to your website