Google Gadgets

Making iGoogle Gadget Transparent

posted Jan 24, 2011 8:06 AM by Anantha Narayan   [ updated Jan 25, 2011 8:19 PM ]

I think i could make iGoogle Gadgets Transparent, at least some of them. I got clues from Les Liens du Vin.

The Style should have these elements...i have just put what worked for me

body
{
background-color: transparent; 
padding: 0;
margin:0;
}

font,div{
  background-color: transparent; 
  color: #383A3E;
  font-size: 12px;
}


In iframe tag, if you are using it, add - - allowtransparency='true'   --- " or ' be consistent

External Page Code Mod for Transparency


Then i made this Horseshoe gadget Transparent.

But the Code got from this page  The Lucky Fortune Horseshoe cannot be used in an external page without losing transparency.

So modify the code, by muntzing the tail end of the code. Then the gadget is transparent even in Blogger, Wordpress and Plain ol' HTML in any site.

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/111832241340844584180

/horseshoe.xml&amp;synd=open&amp;w=210&amp;h=210&amp;title=The+Lucky+Fortune+Horseshoe***&amp;output=js">

</script>

*** Here is where you get snippy with the code

The Above Script will not work, its is only an illustration.....

Feedcast and Podcast on Google Sites

posted Jan 16, 2011 9:01 PM by Anantha Narayan   [ updated Jan 17, 2011 11:02 PM ]

Here is a simple way you can add a RSS XML Atom Feed on to a Google Sites Page or any other Blog or Site. The feed with full Text will be Rendered on a page integrated into your website.

This is a gadget mod from google api example which i patched up to make a webpage rss reader for Google Sites. The xml-feed-reader is the link to add the gadget. Here is the Feed-Reader-Gadget-Page.

News Feed Reader Gadget

Use only public feeds, When publishing a feed the link back to the source is very important. Also give a clear navigable Link and description of the Site to which the feed, news, podcast belongs.

This gadget can be used with iGoogle in canvas mode. This can help you build a full page News Page, for your private view. See a demo below.

My coding skills are weakening day by day, in this i only modified an example. In the future, i think i will just write Short Stories. If and only if a my "Speech to Text" Engine can catch my mumbling, jumbling and grumbling.

Or i could hire a Bot who will do all this and even post in a blog, all automated. Blabber-to-Post Robot, it comes with an optional Multi Social Networking Plugin which Enhances the Visibility of my drab blobs. 

Limitations

Things i cannot fix right now or could be API Feature.
  1. Google Sites the max page pixel height for this gadget is/maybe 2000px.  
  2. In iGoogle the Height is auto limited in canvas view, is/maybe 1000px.
  3. In "Add to Webpage" for external site, while configuring, the no of posts, preview may not work. But code renders as per your settings correctly.
  4. I am still not sure if this gadget has been used correctly in this way.

PCMag Tube


Pin Notes now with Data Freedom

posted Mar 24, 2010 8:21 AM by Anantha Narayan   [ updated May 27, 2010 8:49 AM ]

The inspiration for this has been Stickies. Which i have been using for some time. So i built this for my learning few years back. 

Project page - pin-notes


Now it has Data Freedom, Means your data can be backed up and restored whenever you want. Also you can import data into your Spreadsheet and use it in any other software.

Pin Note Manual

This is not the real Data Freedom the professionals are talking about. This is just my implementation for making this gadget more interesting. The code is opensource and  some neat css and js tricks can be seen.

This gadget idea was the first thing i got when i saw the dom-drag script in DD. I then picked up enough skills to complete this.

I used PSV in data freedom because this i learnt in one of my jobs, they were things like like. VI Editor, Norton Editor, PSV, Informix SQL and AWK. I could not learn much of these. But i think i got the essence. Database and SQL can be a very accomplishing experience.

I am now adding a Help Icon and a Help page for every gadget, i have been fired many times for this deficiency.

Get Pin Notes Gadget

Handheld Web Browser Changed

posted Mar 23, 2010 5:38 AM by Anantha Narayan   [ updated May 27, 2010 8:02 PM ]

This is no real gadget, nothing at all. I just put Goggle Mobile related links and Google Transcoder in a small window to simulate a Mobile device. Navigation JavaScript and Colorful Images made it a gadget.

It was not working for some time, probably technology changed. It works well in a pop-up window and not in iframe. The pop-up window works in different ways in the various browsers.  Used a Dynamic Drive script it works better. Try it.


Get Mobile Page Browser 

This Gadget helps browsing mobile phone web pages on Desktop Computer. It can also be used to browse .mobi websites, Assists Web Design of Pages with Mobile Phone Accessibility. Webmasters can use this to make Mobile Friendly pages.

Project Page - wap-browser

Related Links -

Tractor Bank improved with SM2

posted Mar 23, 2010 12:43 AM by Anantha Narayan   [ updated Oct 26, 2010 5:44 AM by Anantha Narayan ]

I have added more sound effects along with Flash Sound using SoundManager 2. This will make it work smoother in all browsers. This gadget helps youngsters learn about saving. Saving Money, Budgeting and Spending wisely is very important for a harmonious existence.

A Craftsman should use extra money to improve his own profession/trade or machinery/tools. A person engaged in Employment, has to spend on Enhancing his skill sets and specialization too. Books, Advanced Education and computers.
   
Computers open the biggest window of learning/building or widening your skill sets and knowledge. Buy a Netbook today.

The gadget spec URL could not be found

Get the Tractor Bank Gadget

Digital Timer upgraded with SM2

posted Mar 20, 2010 8:54 PM by Anantha Narayan   [ updated May 27, 2010 9:29 AM ]

Sound Playing in Webpages or Widgets should be just integrated in all browsers by just one plugin for all recognized formats. It should not depend on media players on desktop or be OS dependent. The fight of Browsers and Media Players for the desktop years back, has lead to a mess for audio-video playback and even the cross browser scripts makes user/coders life difficult. The mozilla like standards are the best for all browsers and secure for any OS.


I have integrated SoundManager 2 in the programmable-digital-timer simulation. This is also an experimental gadget, to study and demonstrate usability in pushbutton interfaces in small electronic instruments. These are called DIN standard instruments in Process Control. See Omega Timers Counters to see many new instruments with advanced GUI.

Get the Digital Timer Gadget

Even if we have more keys it is ok, the operation should be simple for user. Too many buttons or too less, both are trouble.

Human Beings understand Analog Best, Computers understand digital best. We cannot force digital on an operator, when it is not needed. A Digital Display is good for precision, an analog bargraph can indicate graphically a process, this is seen well from a distance and easy to understand and aids decision making of operator. Inputs can be Analog Like for least strain/error. Operator/user feedback is very important in the GUI creation of electronic equipment.

See related tweet.

Optical Rotary Encoders, Magnetic/Eddy/Capacitive/Hall Effect based Non-Contact Joysticks, Makes Human Analog Interface with Digital Output.
12:59 AM Mar 15th via web

Eco Green Digital Alarm Clock

posted Mar 14, 2010 4:49 AM by Anantha Narayan   [ updated May 27, 2010 9:29 AM ]

This is an Alarm Clock Simulation, Eco Green is to inspire saving energy and keeping earth Green, Clean and last longer.

This is an experimental gadget, usable but not easy. This gadget can demonstrate how difficult ergonomics is, when you need to press buttons in sequence to get an electronic gadget to perform.

This problem in user interface for electronic gadgets was vanquished by Touchscreen Interface as seen in the now popular iPad and iPod.

Observations -


Bug - 0 
(old bug) only after one alarm is set/run, the gadget starts working properly. The cookies have to be primed.
(Working on it - ?  )

Bug - 1
Works ok in IE and FF so far, in Chrome when inline inner html form submit is done. The gadget refreshes.
( Fixed - Form input was changed to image for save and reset alarm, now chrome also works fine)

Gadget under test please Wait for beta test to be done....

This is an upgrade of the digital-alarm-clock gadget which uses embed for sound. In this version it uses SoundManager 2

Development -

I am now slowly making a larger Alarm Clock, canvas and gears. that is easy to use, just trying. Also try figure and fix bugs above if possible.

Jot-a-Note using Google Gears

posted Mar 12, 2010 7:39 AM by Anantha Narayan   [ updated May 27, 2010 9:30 AM ]

This is a port of my Pin Note Gadget for iGoogle or Blog. This gadget uses the Google Gears local database to store the notes. It works in New Versions of FF, IE and Chrome with Gears installed as Plugin. This also has the Canvas or Large Size View from Opensocial. Try it on iGoogle.

Jot a Note, Tiny Memo Pad, Write Memos, Reminders or Notes. Get the Jot-a-Note for your iGoogle or Blog

See a demo in Google sites Canvas View Jot-a-Note Gadget

For closer examination look at jot-a-note at Google Code – Floating Notes for iGoogle with Google Gears.

Gears Database

This gadget uses the Google Gears local database to store the notes. It works in New Versions of FF, IE and Chrome with Gears installed as Plugin. The data on notes are on your computer and not in any server on the web. For every Browser you use, a different set of notes. If you use Chrome and Firefox on a computer, you will have two sets of unique notes in each. You cannot access these notes from another computer. If you have another computer, the notes in that will be unique again.

When you want to Move from One browser to another or One computer to another use the Backup/Restore carefully to migrate. You can keep a backup copy of Text Database in your Pen Drive. You can also import it into any database/spreadsheet, as it is structured in such a way.

Gears API Blog

The Text database should strictly follow this structure -

I am a Note|a|a|d|0|5|50||I can be Moved|b|b|d|0|25|100||Make a Memo|c|c|d|0|45|150||A Reminder|d|d|d|0|65|200||Tasks to Complete|e|e|d|0|85|250||Note a Point|f|f|d|0|105|300||Jot a Thought|g|g|d|0|125|350||




Applications and Enhancements

  • You can store your tweet drafts, ideas or URL etc.
  • Developers can integrate Twitter API for Tweet from Note.
  • Developers can make a Chrome Extension to Jot a Note over a Web Page.
  • You can make an iGoogle internal Messaging with inbox and outbox using notes.

Observations

  • HTML 4 to HTML 5 and Web Applications - So it may be that, i have to migrate when it happens, till that have fun. 
  • When Paper Color or Pen Color is set, Chrome may move focus in some positions, not in FF and IE.
  • This has been tested, local and remote in FF, IE and Chrome Browser and found usable enough.
  • Jot-a-Note may still have quite a few bugs, let me know, it helps to learn and improve. Use Contact form.
Nbc and Nfc is back color and fore color. Nxp and Nyp are x-y positions of notes. Tst is Trash state. Nst is Note State.

.................... Read more in the Jot-a-Note User manual.

Running Lights Improved

posted Mar 7, 2010 7:41 AM by Anantha Narayan   [ updated May 27, 2010 8:48 AM ]

I improved the graphics of this gadget, this was not really required. This helps keep in practice of html-js-css. Its better that not doing anything.

The gadget spec URL could not be found

Get Running Lights for your Webpage.

1-9 of 9