Tutorial: Motivation Quotes Gadget for Win7
Spec: simple gadget with motivation quotes.
Also displays author and author image.
Quotes changes every 10 seconds.
Steps Overview:
1. Create Gadget Folder Structure
2. Create gadget.xml - mandatory descriptor file
3. Create index.html - view of gadget
4. Create app.css
5. Create app.js - quote update logic
6. Create quotes.js - storage of quotes/author/image name
7. Add some images
8. How to install and run gadget
Steps Details:
1. Create Gadget Folder Structure:
- Create folder
"Motivation.Gadget" on desktop
- Create subfolder
"images" in "Motivation.Gadget"
- Create subfolder
"js" in "Motivation.Gadget"
- Create subfolder
"css" in "Motivation.Gadget"
Result:
2. Create
gadget.xml - mandatory descriptor file in folder "Motivation.Gadget"
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Motivation</name>
<version>1.0.0.1</version>
<author name="Samurai Kit">
<info url="codingtrabla.blogspot.com" />
</author>
<description>Go! Go! Go!</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="index.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
3. Create
index.html in folder "Motivation.Gadget" - view of gadget
<html>
<head>
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Never Give Up!!!</title>
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="js/quotes.js" language="javascript" type="text/javascript"></script>
<script src="js/app.js" language="javascript" type="text/javascript"></script>
</head>
<body onload="initUI()">
<table style="width:100%" >
<tr>
<td width="75%" align="center" >
<span id id="quote"> </span>
<span id="author"> </span>
</td>
<td width="25%" align="right">
<div id="image"> </div>
</td>
</tr>
</table>
</body>
</html>
4. Create
app.css in folder "Motivation.Gadget/css"
body
{
background-color: white;
background-image:url(../images/background.png);
width: 550px;
height: 160px;
}
#author{
width:100%;
font-size: medium;
text-align: right;
color:white;
font-family:Courier New;
}
#quote{
color:white;
font-style: italic;
font-size: large;
}
5. Create
app.js - quote update logic in folder "Motivation.Gadget/js"
var REFRESH_INTERVAL = 10000;
var updateInterval;
var quote;
var author;
var image;
var currentQuote = 0;
var quotesQty = 0;
var space = ' ';
var lquote = '“';
var rquote = '”';
var mdash = '—';
function initUI(){
quote = document.getElementById("quote");
author = document.getElementById("author");
image = document.getElementById("image");
quotesQty = window.quotes.length;
updateQuote();
updateInterval = setInterval(updateQuote, REFRESH_INTERVAL);
}
function updateQuote(){
quote.innerHTML = lquote + space + window.quotes[currentQuote].quote + space + rquote;
author.innerHTML = mdash + space + window.quotes[currentQuote].author + space ;
image.innerHTML = '<img width="120" height="120" src="/images/'+window.quotes[currentQuote].image+'">';
if( currentQuote == quotesQty - 1 ){
currentQuote = 0;
}else{
currentQuote = currentQuote + 1;
}
}
6. Create
quotes.js in folder "Motivation.Gadget/js" - storage of quotes/author/image name
window.quotes = [
{
"quote":"Never, never, never give up.",
"author":"Winston Churchill",
"image":"churchill1.png"
},
{
"quote":"Just Do It!",
"author":"Nike",
"image":"nike.png"
},
{
"quote":"Go! Go! Go!",
"author":"Counter Strike",
"image":"cs.png"
},
{
"quote":"Uuuuuuuuur Ahhhhrrrrrr Uhrrrr Ahhhhrrrrrr Aaaarhg...",
"author":"Chewbacca",
"image":"chewbacca.png"
},
{
"quote":"Why don't you try again? A little harder",
"author":"Shifu",
"image":"shifu.png"
},
{
"quote":"Success consists of going from failure to failure without loss of enthusiasm.",
"author":"Winston Churchill",
"image":"churchill2.png"
},
{
"quote":"To make something special, you just have to believe it's special.",
"author":"Mr. Ping",
"image":"mrping.png"
},
{
"quote":"Your mind is like this water my friend, when it is agitated it becomes difficult to see. But if you allow it to settle, the answer becomes clear.",
"author":"Oogway",
"image":"oogway.png"
}
];
7. Add some
images (use correct names ) into "Motivation.Gadget/images" folder
background.png
chewbacca.png
churchill.png
churchill2.png
cs.png
mrping.png
nike.png
oogway.png
shifu.png
8. How to install and run gadget
- Copy folder "Motivation.Gadget"
to
C:\Users\<YOUR_USER_FOLDER>\AppData\Local\Microsoft\Windows Sidebar
e.g. C:\Users\samuraikit\AppData\Local\Microsoft\Windows Sidebar
- Right mouse click on desktop - > Gadgets - "Motivation"
Have a fun :)
Sources on GitHub:
https://github.com/samuraikit/win-7-motivation-gadget
