PDA

View Full Version : Vista Sidebar Gadgets


krakjoe
May 19th, 2007, 04:33
Anyone made any yet ???

They are just javascript and html .....

Heres a little one I made to get information about my wireless network

Do this :

Win Key + R
%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets
Create a folder named Wifi-info.Gadget
Create a file inside the above folder named "Wifi-info.html"



<html>
<head>
<title>Wifi-info</title>
<style>
body
{
width: 130px;
height: 100%;
text-align: center;
font-family: Tahoma;
font-size: 10pt;
position: absolute;
}
</style>
<script language="javascript">

var ssid ;
var secure ;
var ip ;

function load( )
{
if( ssid )
{
ssidContent.innerText = ssid ;
secureContent.innerText = secure ? 'Secure Network' : 'Insecure';
signalContent.innerText = 'Signal : ' + strength + '%';
addressContent.innerText = 'IP : ' + address ;
}
else
{
ssidContent.innerText = 'Not Connected';
secureContent.innerText = '';
signalContent.innerText = '';
addressContent.innerText = '';
}
}
function detect( )
{
window.setTimeout( 'detect()', 1000 );
ssid = System.Network.Wireless.ssid ;
if( ssid )
{
strength = System.Network.Wireless.signalStrength ;
address = System.Network.Wireless.address ;
secure = System.Network.Wireless.secureConnection ;
}
load( );
}
</script>
</head>
<body onload="detect( );">
<span id="ssidContent"></span>
<br />
<span id="secureContent"></span>
<br />
<span id="signalContent"></span>
<br />
<span id="addressContent"></span>
</body>
</html>


Create another file named "gadget.xml"



<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Wifi-Info</name>
<namespace>Wifi-Info</namespace>
<version>1.0.0.0</version>
<author name="Joe Watkins aka krakjoe">
<info url="www.krakjoe.com" />
</author>
<copyright>&#169; 2008-2010 J Watkins</copyright>
<description>Simple Wifi Monitor</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Wifi-info.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>


Now open the sidebar, and it'll be in the list of gadgets [ + at top of screen ]

Seriously, I think microsoft got it right for once, javascript is REAL easy to use and if I knew how to make things look nice that would be real easy too.....

Anyone have any suggestions for cool gadgets, I'm ---- at coming up with ideas .....
Matt8
May 19th, 2007, 04:56
Have a screeny of your gadget?

I had an idea for one but I have no idea if it would be simple or not. Something that would check the number of Unread posts at various forums, like here and refresh by itself. Now that would make me more productive!
krakjoe
May 19th, 2007, 05:03
I can do that, you can use ajax so it's possible to achieve it I think, I'll mess around for a while.....

The one I made so far is real plain, just a white box with the information about my wifi network in it ....

http://krakjoe.com/images/Wifi-info.png

I'm gonna have a mess about to see if it'll make ajax requests across networks without giving error messages, ajax can do that, but in interenet explorer the requests are blocked to squash xss, I don't imagine it to be a problem the weather gadget will be doing exactly that .....

EDIT:

Wait ......
krakjoe
May 19th, 2007, 15:40
I did it ....

that tells you new posts since last visit and number of pms, however it only works for fws as the data is different on this website to other vb forums .....

http://krakjoe.com/images/FWStatos.png preview .....

just gonna put some finishing touches on it, couple of bugs arisen .....
Matt8
May 19th, 2007, 17:42
You are the man, simply put.

Finish it up and hook me up with the download link!!!! I'd give you a +rep but I can't yet...
krakjoe
May 19th, 2007, 21:46
http://krakjoe.com/FWStatos.gadget

I think that's it .... we'll see how it goes, the "Frequency" in the settings part is seconds inbetween requests not minutes........

I have too go to bed, it's half two in the morning .... I'm shattered.....
Matt8
May 20th, 2007, 00:38
Awesome. Love it. My only recommendation would be that you could click on it and launch freewebspace.net/forums

Love it man, seriously.
stuffradio
May 20th, 2007, 02:24
Well... I might have a look at developing some gadgets... just upgraded to Home Premium from a RC1 version Rofl, I must say... way more stable and quicker too! :lol:

Edit:

wth do you need all that code for in prototype.js? It makes me cry :)
krakjoe
May 20th, 2007, 05:02
Awesome. Love it. My only recommendation would be that you could click on it and launch freewebspace.net/forums

Love it man, seriously.

done, download it again and as if by magic your wish will come true ....

I'm glad you like it, it was fun to make .......

@stuff .... prototype is hardly ever needed completely, it's a habit of mine when I work with ( marginally ) complicated js - not to reinvent the wheel everytime, prototype has a LOT of very useful functions, it's always good to have around.....although the js code for communication is only a few lines, had I coded it entirely myself without prototype it would be far far more .......
Matt8
May 20th, 2007, 13:56
You have definitely earned a spot in my vista sidebar. Thanks a ton.
krakjoe
May 20th, 2007, 14:21
I'm trying to rewrite it, but for some reason, krakjoe.com is allowed to post data to here, but localhost ( 127.0.0.1 ) isn't, see at the moment, I wrote a sort of "Webservice" for it, as you would if you were using asp.net ajax ( which is what you should do ), the code for the service is good, and it's working really well ( as you know ) I'm just a little worried about security, don't panic, it's as secure as code can be, it would be far better for your own computer to make the requests though ......

I don't see the difference between your pc making a request automatically and you making request physically on the site ( browsing ), I don't suppose you know anything about the rules surrounding posting data to here ???

I want to make some more "features" like the ability to change your usertitle to something else, as I noticed you stay logged in even when you're not here, simply because you keep creating a session to get the data you want, and also, the ability to stop polling would be good ( you can set the frequency below 30 to do that, but still a button would be nice ), and the ability to carry on the session ( when you click on the gadget, it logs you in ), I can't do that with a webservice, the session is invalid for the ip, but if I can generate a session with javascripts only, then I can store the session id and append it to the url when you click on the gadget like ?s=sessionid

Can someone tell me why I can't post, it's quite unlikely I'm doing something wrong I think ...... also why can krakjoe.com post here ??? ( for the love of god don't change that ) ?????

If you don't know the answer to that, you have any more ideas ??? couple of hours to kill tonight .....
iBrightDev
May 22nd, 2007, 18:53
Joe, I love your stuff. keep them coming. :D going to install your gadget as soon as i get home
iBrightDev
May 22nd, 2007, 21:06
do you need something else for the Wifi Info gadget? all it says for me when i copy your code is...

Not Connected
stuffradio
May 22nd, 2007, 21:08
did you try clicking on the wrench tool bar thing and entering any info? I'm guessing you have to do that... haven't personally tried it
iBrightDev
May 23rd, 2007, 09:10
there is no wrench unless a Settings.html file is created, but, he gave no html for such a file.
krakjoe
May 23rd, 2007, 10:23
There is no settings for the wifi one, and that's not really a "gadget" as such, it's an example of how to make a gadget, it worked on my system, but I don't plan to "make" it work on others .....

All of those methods are part of the gadget object, so it's not real programming, I just read it off the msdn website and wrote it down, hence it's too boring to bother with really .....

I have written a javascript, akin to prototype, with an Ajax.Request method not unlike prototypes, only my one is about 3kb and prototype is 70 ..... it has some neat features, like you can replace most methods with your own on initialization, you can specify a loading message or html, or a loading function to perform while requests are in progress, you can poll ( make continuous requests ) at set intervals, just like PeriodicalUpdater, it is written with gadgets in mind however it works cross browser anyway for websites, but I'm looking for a couple of javascript know it alls, ( or some at least ), to test this out for me, and find bugs with it ( possibly even develop it ), which I'm sure there are plenty, as it's quite an unbelivable size difference ......

Anyone up for testing it ?? I'm not so keen on just posting the code, not unless I have some takers .......

The reason I wrote my own, is mostly boredom, NOT to be better than prototype, nor as advanced as prototype is, I dunno how to use JSON or anything like that, apart from boredom, I took on board what stuff said, and 70kb is quite large when most of it is not needed, this object is for AJAX ONLY, not document manipulation, so it uses native methods and doesn't rely on prototype itself ......
iBrightDev
May 23rd, 2007, 10:48
well, ,if you decide to make the wifi thing work on other comps too, let me know. i would like to utilize its functionality.

also, i am up for testing your script. get on MSN to message me
Kwek
May 26th, 2007, 02:12
Your FWS gadget sounds cool. Too bad I don't have Vista, else I would use it for sure. ;)
DarkBlood
May 26th, 2007, 08:26
I'd love them, but I don't plan on getting Vista. You should try making some widgets for wxWidgets (Which is free for WinXP) as well krakjoe.
iBrightDev
May 26th, 2007, 19:22
i made a couple small gadgets just ot see how easy it was, and now my work, ITtoolbox. is going to have me make gadgets for them that will relay how many messages you have, new connection posts ect. i got the idea from the FWS gadget you made. thanks. :D
krakjoe
May 27th, 2007, 06:34
Good for you, they are fun to make.....

I don't know the wxwdigets library, and the bindings for php are unfinished ( as in not existing at all yet, I don't think, not even on svn ).....when the php library comes out I'll take a look, I can use my compiler ( it's not actually a compiler, and I'm fully aware of that ) to get them to work on windows once the binding is available......

@mct .....



var Ajax = {

name: 'Ajax',
version: '0.0.1',
description: 'Multi platform Ajax interaction',
progress: 'Ajax in Progress',

Create: function( )
{
var Socket = null ;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try { Socket = new ActiveXObject("Msxml2.XMLHTTP"); }
catch( error ) { try { Socket = new ActiveXObject("Microsoft.XMLHTTP"); } catch( error ) { Socket = false; } }
@end @*/
if ( !Socket && typeof XMLHttpRequest != 'undefined' )
{ try { Socket = new XMLHttpRequest(); } catch( error ) { Socket = false; } }
if ( !Socket && window.createRequest )
{ try { Socket = window.createRequest( ); } catch( error ) { Socket = false; } }
return Socket;
},
Request: function( url, config )
{
var Sock = Ajax.Create( );

if( !Sock ) { return false; }

if( !config.contain || !url )
{
alert( 'I require at least a url, method and container' );
return false;
}

if( !config.method )
config.method = 'GET';

if( !config.contain || !document.getElementById( config.contain ) )
return false;

if( config.errors && !document.getElementById( config.errors ) )
return false;

if( typeof config.loading == 'function' )
Ajax.Loading = config.loading;

if( typeof config.onComplete == 'function' )
Ajax.onComplete = config.onComplete;

if( typeof config.onSuccess == 'function' )
Ajax.onSuccess = config.onSuccess;

if( typeof config.onFailure == 'function' )
Ajax.onFailure = config.onFailure;

Sock.onreadystatechange = function( )
{
if( Sock.readyState == 4 )
{
Ajax.onComplete( Sock, config );
}
if( Sock.readyState < 4 && Sock.readyState > 0 )
{
Ajax.Loading( config );
}
}
Sock.open( config.method, url, true );

if( config.method && ( config.method == 'POST' ) && config.params )
{
Sock.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
Sock.setRequestHeader( "Content-length", config.params.length );
Sock.setRequestHeader( "Connection", "close" );
}
if( config.headers && typeof config.headers == 'object' )
{
for( var header in config.headers )
{
Sock.setRequestHeader( header, config.headers[ header ] );
}
}
if( config.poll == parseInt( config.poll ) )
{
Ajax.onSuccess = function( Sock, config )
{
if( document.getElementById( config.contain ) )
{
document.getElementById( config.contain ).innerHTML = Sock.responseText ;
}
window.setTimeout( function( )
{
new Ajax.Request( url, config );
}, 1000 * config.poll );
};
}
Sock.send( config.params );
},
onComplete: function( Sock, config )
{
if( Sock.status > 199 && Sock.status < 299 || Sock.status == "" )
Ajax.onSuccess( Sock, config );
else
Ajax.onFailure( Sock, config );
},
onSuccess: function( Sock, config )
{
if( config.contain && document.getElementById( config.contain ) )
{
document.getElementById( config.contain ).innerHTML = Sock.responseText ;
}
return false;
},
onFailure: function( Sock, config )
{
if( config.errors && document.getElementById( config.errors ) )
{
document.getElementById( config.errors ).innerHTML = 'Ajax request failed with error code ' + Sock.status ;
}
return false;
},
Loading: function( config )
{
var Element = null ;
if( config.contain && ( Element = document.getElementById( config.contain ) ) )
{
if( Element.innerHTML == '' )
{
Element.innerHTML = typeof config.loading == 'string' ? config.loading : Ajax.progress ;
}
}
return false;
}
};


thats the javascript library .....



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="codeabove.js"></script>
</head>

<body>
<script language="javascript">
window.onload=function( )
{
new Ajax.Request( 'http://krakjoe.com/post-ajax.php', {
contain: 'notice',
method: 'POST',
params: 'user=whatever&pass=whoever',
errors: 'errors'
});

}
</script>
<div id="notice"></div>
<div id="errors"></div>
</body>
</html>


Theres some primitive usage....

the prototype for the Ajax.Request object is as follows..

Ajax.Request( string url, hash config );

the config hash MUST have the following ....

contain: 'id of element for page content'

the config can optionally accept any of the following .....

method: 'POST'|'GET'|'HEAD'
errors: 'id of element to show errors in'
params: 'for post data'
poll: '3' // would repeat the request if it suceeds every 3 seconds after a sucessfull response
loading: function( config );|'loading message' // function is called when ajax is loading, config is this config hash, all of it, or alternatively just pass a string to display while the request is in progress, could be an image tag also
onComplete: function( Sock, config ) called when the request is complete to determine wether it was a success
onSuccess: function( Sock, config ) called when the request has a 2** or no response code inline with http1.* spex
onFailure: function( Sock, config ) called when the request failed

Sock is the xmlhttp request object with all its normal methods
config is the hash you passed to the object

please please please use it, else I wasted my time, lemme know how it goes......

I just found out that ajax won't let you spoof the referer, so making the gadget from only js won't be possible on a vb forum with the whitelist feature enabled......
iBrightDev
May 30th, 2007, 09:40
i will mess with it tonight. i an finally gong back to work today. i had a 4 day weekend. only supposed to be 3, but, i got sick. i think it was food poisoning. :S