Tutorial – Add Winamp’s current playing song to your Website!

In this tutorial, I’ll be showing how to use AMIP (Now Playing) Tool + AMIP Configurator, and Dropbox with some html/CSS and jquery plugins, for showing or embedding the current playing track of your Windows System’s media player, on your website/blog.

AMIP stands for Advanced mIRC Integration Plug-in. The title doesn’t reflect actual functionality. Ie, It’s not only for mIRC, but can be used for various different ways…

Currently, media players supported by AMIP are:

Winamp, foobar2000, iTunes, Quintessential Media Player

+ Winamp API compatible players: Apollo, MediaMonkey, AIMP Classic

In my tutorial, I’ll be using AMIP + Configurator, WINAMP 5, dropbox, and notepad for displaying the current playing song on an html page.

 Tools required:

 JS Plugins required:

__________________________________________________________

*  Step 1:

Download and install AMIP & Configurator.

Open the Configurator as ADMIN (with admin rights).

Click on Callbacks/Web Tab (under Other Integrations)

Now add the following code or similar code, according to your requirement/setup.

nowplaying_step1 nowplaying_step2

 

Explanation: /template(*): This code takes a file as input, and generates an output file to the specified file location.

You can give any location or extension to the input/output files, but I’ve selected dropbox’s public folder for this, to make it easier for the html javascript in loading the file from an open-to-public source. Also, the info needs to be changed after every track change, so updating of the out.html needs to be done via dropbox (20gb/month usage for free users).

Now close the configurator, and proceed to Step 2.

__________________________________________________________

 * STEP 2:

Open up your dropbox’s public folder, similar to this location:

C:\Users\Mohit\Dropbox\Public\Stuff\Music\Now.Playing.Winamp\

(I’v e got lots of files in my public folder, hence I’ve got a different tree structure for keeping my online/public files. You could also keep the in/out files in Dropbox/public root folder, but make sure the path matches the path specified in configurator on Step 1.)

Now create an html file in this folder. Name this file as : in.html

Now open up this in.html file in notepad and copy/paste the following code:

 

More variables and functions for the in.html file are defined here: http://amip.tools-for.net/wiki/manual/amip

This in.html file would now contain all the AMIP and HTML input code which will be first processed by the AMIP plugin for winamp, and then by loaded into your index.html page as described in further steps.

The script above contains annonations which can be removed. These annonations explain what each code line is used for, so that you may change the code as per your will and purpose for your final index.html

Annonations are marked by // or <!–  –>

Now we move onto Step 3.

__________________________________________________________

STEP 3:

Now we start with coding the index.html page.

Firstly copy these three files to your /js/ folder:

  • Jquery.min.js
  • to_relative_time.jquery.js
  • date.extensions.js

Open in Notepad: your “index.html” file that you want to publish on the web. It can be index.html or any other file you need to publish with info about your current playing track.

Add the following lines in the <head> </head>  tags.

 

Three javascripts are added in the code above, and a javascript function script is then added to get the out.html file from the dropbox/public folder.

To get the public link for your out.html file in dropbox: Go to dropbox folder in your windows system, select the file (out.html) and right click > copy public link.

Note: This out.html file has been configured to be generated by the AMIP on track change of winamp (STEP 1)

Now to Step 4, where further addition of code is required for the index.html

__________________________________________________________

STEP 4:

Firstly, add this code in your document’s <HEAD> tags..:

 

Now, copy paste the following code into your <BODY> tag of your document:

 

 

The code above almost completes the tutorial, explanation of this step below:

First we add css for Div : box in our document’s head tags.

Then, we group different parts of our songs info into different ways:

Dynamic text values being changed are:

  • “now_playing_text”: 0 minutes ago!
  • “nowPlayingInfo”: Artist – Song Title

Both the classes/ids have been defined in the in.html which will is resulted into out.html with exact content, but original values as per the AMIP code parser.

That’s it! Now you have an embedded display for your winamp’s currently playing song!

download_source

Do submit your views below in comments section, and post a response (form below) about whether this tutorial was helpful or not.

Google Form Customization & Validation

In this tutorial, I’ll be showing how to Customize a Google Form, and validate it using javascript. The scripting also includes a custom thankyou page for redirection on success.

—————————————————–1———————————————————-

  • STEP 1: Firstly, we create a Google Form on Google Drive.
  • This is how my demo form looks like on Google Drive page

1_form

——————————————————-2————————————————————

  • STEP 2: Now we click on Live source to view the form, and on that page we click on “right click>view source”, and then copy the page source between <form> </form>

2_view_live_form

  • And Clicking on “right-click>view page source”

3_view_page_source

 

  • Now we copy the page source between <form> </form> tags. We only need this source so we don’t copy the whole page source to edit it. We’ll also only need the values for tags like “name, id, value, and label” for our own customized form.

4_copy_source

 

——————————————————–3——————————————————–

  •  STEP 3: Now to customize the form with your own style.
  • You can remove the class=  from the copied google form code, and add your own classes to it. DON’T CHANGE THE ID, NAME, VALUE, DIR, OR TYPE TAGS. Personally, I’ve not changed most of the code, just removed the classes so that I could add my own styles to it.
  • Also, in my form I’ve added value to text fields, and add a code to clear that value from text fields when the user clicks on text field to enter data.

  • Here,  value="Your Email or Phone No."  puts that text already in the text box as help-text.

  • In this code, when user clicks on the text field, the text “Your Email /..” gets cleared.
  • You can further add or edit the code as per your own requirements.

———————————————————4——————————————————

  • STEP 4: Now after you’ve customized the form and edited it in CSS with your own styles, you can add a thankyou page via javascript code to the form.
  • Notice the following code from original Google Form:

  • To this we edit and add the following code, BEFORE THE FORM ACTION line:
  • First a javascript, for new variable submitted=false .

  • Then a hidden iframe for the redirection to the thankyou  page if submitted=true.

  • Then the form code with target changed to hidden iframe  and  onsubmit="submitted=true;"

  • We also add name=”myForm for the next step of form validation and for that we’ll change onsubmit=  value to onsubmit="return validateForm()"  if you want to validate the form.

——————————————————5——————————————————–

  •  STEP 5: In this step we’ll ad code for form validation. The code below only checks for NULL or blank enteries or if user hasn’t typed any data.
  • In the form code shown above  in step 4, we add a NAME = myForm  to the form & change the onsubmit value to javascript function defined in <head>:  validateForm():

  • Here’s the code that defines the javascript function to validate the form. Put this code in the <head> tags.:

  • This code basically just checks  for 2 text fields, if they are blank, it displays error via jquery (I’ll explain in next step) and if they are not blank it sets submitted=true  value for the hidden iframe to load the thankyou page.
  • Further explanation in regard to the Google form:

var x=document.forms["myForm"]["entry.1178504574"].value;

  • This sets a variable x to a value of the text field “Your Name”.
  • First it identifies the form by it’s name tag I mentioned earlier as  <form name=myForm action=”…/ >
  • It identifies the text fields by their “name=” value and not id or label.
  • So in the form code we have

  • Notice the  name="entry.1178504574" This is where we copy the identifier for the javascript function validateForm. Same goes for the Contact Info text field and any other field you want to validate.
  • The #dialog  is a jquery dialog box to display a message box instead of the standard windows error popup. I’ve used this to further style my form and is an option, ie, NOT REQUIRED FOR THE VALIDATION. You can replace it with your own code for errors… like “alert”.

—————————————————–6———————————————————-

  • STEP 6: This step is optional, and is for styling the error message that appears upon form validation.
  • Add this code to the <HEAD> of the html page.

  • Now we add the error message to the <BODY> of the html page:

  • So we add jquery-ui.css, jquery.js, and jquery-ui.js to the <head> of the document in the same sequence as mentioned above.
  • After that we add jquery function with autoOpen=false, and then the show, hide effects.
  • And in the javascript script, validateForm, we add the jquery option to OPEN the dialog box when the error occurs.

  •  Optional: Checkboxes in separate columns. If you want to add checked boxes in different columns, then you should try this:
  • When creating google form intially ON THE GOOGLE DRIVE PAGE, you should select separate fields for each checkbox. For example, For checkbox 1: select “Checkboxes on dropdown and type in your checkbox name and value. For checkbox 2 add new field and select  “checkboxes” again from the dropdown and type in your second checkbox name.
  • This will give a unique “name=” and “id=” +”value=” to your checkboxes which means each checbox, AFTER formatting as per this tutorial, will be added in respective column of the spreadsheet on google drive. Also, unchecked boxes will leave blank fields in spreadsheet.
  • I haven’t tested this but I think that for this purpose you shouldn’t <span> the checkboxes together.

—————————————————–7——————————————————-

  • Finally, the form is complete. Click the link below to view the complete  source of the html form page or view the demo page which is currently functional.
  • That’s it! That’s all needed for this tutorial. Do comment below or on the Demo Form.

———————————————- SOURCE CODE——————————————-

 

 

  • Form Demo Page : [ link ]
  • The Results Spreadsheet : [ link ]

Tutorial on Creating a “Random Status” Generator in Flash CS6

Hi!

In this tutorial, I’ll explain how to make a flash file that loads an external “200-on-liners.txt” text file and then displays a random one liner status from it. The text loaded into the flash file is selectable and can be copied and posted elsewhere.

Get Adobe Flash player

 

STEP 1 : Firstly, we’ll open Flash CS6, and create a new document in Actionscript 3.0

step.1.-.as3

STEP 2: Click on Modify > Document, and change the width and height of the Document to 480 x 800 pixels. Since this flash tutorial can also be used to create an Android APK, so we’ll be keeping the document size to these dimensions only.

 

STEP 3: In this step, I’ll be importing a jpg file to the stage, which I created in photoshop. You can either load the same file from the source (link at the bottom of the page) or you can create your own using the document dimensions.
Click on File > Import > Import to Stage… and import the file “random-status-faceboook.jpg” to the document. Now adjust the imported image file so that it fits in the entirety of the document.

 

STEP 4: Now click on the Type Tool and adjust the properties as per the following:

* Firstly set the text Properties as follows , while keeping the text as Dynamic and Selectable:

step.4a.-.character.properties

* Now click on the Stage to place the text object to the document. Give the instance name “r_status” and as mentioned before, make sure that the text is set to Dynamic.

step.4b.-.instance.name.of.r_status

* Click on Embed.. and select all glyphs in character ranges.

step.4c.-.embed.fonts

* Now place this text object in the center where you want the random status to be displayed.

 

STEP 5: Make sure r_status is selected and then convert this object into a movie symbol…: Click on Modify > Convert to Symbol…  Name this movie clip as,  “status_box”.

step.5a.-.convert.to.movie.symbol

* On the Object properties panel (right) give the instance name of this movie clip to “status_box”.

step.5b.-.instance.name.to.status_box

* The dynamic text was converted to a movie clip so that the actionscript made for this tutorial lets the generated text output to the center of the flash document.

 

STEP 6: Now we create the button via which the text will be loaded at each click. Select Type tool again, and set properties to > Static .. & Color to Orange (#FF9900). Then with Type tool selected Click below the previous text we created (dynamic status box) and type “Generate”.

step.6.-.generate.static.text

 

 

STEP 7: Now to convert the text to movie clip and further put the movie clip into another movie clip.

* Click on Modify > Convert to Symbol… and name it “gen_button”. Also name the Instance name to “gen_button”.
* With “gen_button” selected click on Modify > Convert to Symbol… and name it “g_gen_button”. Also name the instance to “g_gen_button”.
* I converted the static text into movie clip twice, so that the mouse event animation is smooth (tint etc)

step.7.-.convert.to.movie.clip.twice

 

 

Step 8: Now to animate the “gen_button” for mouse click event.

Double click on g_gen_button object to change the timeline settings of gen_button.
* Add a new layer on the left by click the “add new layer” button, and name it “as3”. This layer is for the actionscript: stop and gotoandplay.
* Name the bottom layer with keyframe to “base”. This layer will be for the animation.

step.8a.-.animation.of.gen_button

* Add keyframes (Function key F6) on frame 5 and frame 10 of base layer. Set Lable for frame 1-4 as “still”, and for frame 5-9 as “click”.

* Click on frame 5, and then click on the “generate” object on stage. This will bring up the “color effect” box on the properties panel on right. Select Tint to 79%, and color to green (#00FF00).

* Now for the actionscript for this button: Click on frame 4, and press F6 to add a new keyframe. Again click on frame 9 and press F6 again to add another new keyframe.
* Now click on frame 1 of of the “as3” layer and rightclick>actions. Type this code on line 1

* Now click on frame 9 of the “as3” layer and rightclick>actions. Type this code on line 1:

step.8b.-.final.animated.timeline

* Animating and scripting the button is complete. Now we go to our main scene 1 to add the final actionscript.

 

STEP 9 :  Rightclick on Frame 1 of the Scene’s timeline, and add the following actionscript.

 

STEP 10: Create a new text file in the same folder as your exported swf (or copy from the source files.) Name this text file as: “200-one-liners.txt” Copy as many status one liners to this text file as you like, and then save the file in the same folder as the exported swf. Make sure each status in the text file is separated by each other by one line, ie, each status update must be in their own lines. Also, don’t leave a blank line or sometimes you’ll get a blank text in your swf flash file.

That’s it! The tutorial is complete.

Source Files : Random.Status.Tutorial.zip

-Mohit Khanna.

How to align Multiple GIF Animations side by side

On this page, I’ll provide info and links about how to align / join / stitch / attach 2 or more gif animations side by side.

THIS:

INTO:

Tools Required:

GIMP : [ ::: link ::: ]
Ofnuts’ “Interleave layers” Python script: [ ::: info ::: ] ||| [ ::: script link ::: ]
UnFreeze Portable Utility (for joining extracted gif’s): [ ::: link ::: ]
Irfanview Portable (for extracting gif) : [ ::: link ::: ]

Method:

I’m about to copy paste the text from the [ ::: source ::: ] of this tutorial. But before that I need to explain about what to do if there are different amount of frames (ie, layers in GIMP) of your gif files… For example,

owl1.gif = 38 frames
owl2.gif = 45 frames
owl3.gif = 68 frames

In this case, extract all the frames into separate folders for each gif file via Irfanview. Open the image in Irfanview: “OPTIONS > Extract all Frames…”.. You should do this for each gif image. You can also use any program for this extraction, but I’ve used irfanview.

After extraction, open the folder to which the extracted frames of gif files are saved.

Frame Folder 1 : 38 extracted frames .gif’s
Frame Folder 2 : 45 extracted frames .gif’s
Frame Folder 3 : 68 extracted frames .gif’s

Notice frame folder 3 has maximum frames, and so we need to somehow add more frames to the frame folders 1 and 2. We do this by selecting initial amount of frames and copy-pasting them into the same folder of respective extracted frames. So all folders will now have 68 frames and all in sequence.

Now open Unfreeze.exe (link provided above), and drag these frames into this utility. Set delay to 0 and “loop animation”. Save this newly created gif into any folder from where you’ll be able to access it via Gimp.

Now I copy paste the source tutorial … ( ::: from here ::: ]

- load both images individually
- on both: convert to RGB mode (image/Mode RGB)
- on both: “Image/Canvas size” to the total size required
- on both in the Canvas size dialog: Layers->Resize all layers
- on the image that should be on the right: in the Canvas size: drag it to the right in the preview
- use my interleave-layers script to merge the layers
- or to do it manually, save one of the images as XCF, and in the other one: “File/Open as layers”, and then reorder/merge layers.

Export as GIF

 

(In GIMP > Image > Interleave Script > ) You should select “Interleave Stack of Layers” …

That’s the end of this tutorial. Credits to Ofnuts for posting the tutorial…which I found via google.

How to Sync your game saves between multiple computers

This is simple batch file script, which starts a program, then waits for the program to close, after which is launches another program.

My need for this script arose when I wanted to play Assassin’s Creed 3, while wanting to continue playing it between two computers. I mostly play at home, but at work I have free time during evening so I do play some games on my work pc too.. So I needed to sync my game save data between the two computers, so that I can continue from wherever I left the game story level. The script mentioned in this post starts my game, then waits for me to finish playing and upon exit it launches the sync tool that syncs my game save folder with a dropbox folder, which is further syncing with my pc at either location.

Tools Required to Sync ACIII save files:

1. Assassin’s Creed 3 save game locations
2. Synkron Portable [ ::: link ::: ]
3. The batch file script
4. Dropbox

Extract and run Synkron and set the folder locations of game saves in it. Also, check “sync all at launch” under options menu. You’ll need the dropbox folder, and the ac3 save folder.

open notepad and copy this code in it, then save it as AC3_save_sync.bat … Save this batch file in the game’s installation directory so that it can run the game without the need of administrative privileges… Take note of the correct program locations on your pc, and change the code/script accordingly.

@echo off
Start /w “” “D:\Download\Portable Programs\Utilities & System Tools\SynkronPortable\SynkronPortable.exe”
Start /w “” “AssassinsCreed3.exe”
Start /w notepad.exe
Start “” “D:\Download\Portable Programs\Utilities & System Tools\SynkronPortable\SynkronPortable.exe”
echo.
echo.
echo Files Synchronized…
echo.
echo.
pause

 

The /w character allows the batch file to wait for the game to exit and then only it will launch the sync tool. The notepad is opened because somehow game file’s launcher exits instantly upon execution and so synkron and game start simultaneously, which should not happen. So I put “start /w notepad.exe” so that when you exit the game, you should close notepad to let the batch file execute the next in line which is synkron.

As I said, you should save this batch file in the game’s installation directory and send to desktop as shortcut. I suggest to change this shortcut’s icon, and rename it as “Assassin’s Creed 3″. The only run the game from this shortcut, and you’ll always have your game saves being synced!

 

ACIII-256ACIII-256

The Home Page

Check out the home page: http://117.boxhost.me/

Currently it’s my previous designed site called Applestreet. Though I also have a page on fb, which is named Applestreet, this website is only meant as a result of some days work as a hobby. Will be posting on here often.

Created this wordpress blog only to be able to generate a page with info and explanation of how to do various things on Windows PC.

 

-Mohit.