[SOLVED] Scripting Sidebar Gadgets.

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

I'm trying to finish of a sidebar gadget (again!) that I started playing with ages ago. 2009 in fact.
It's a CPU/RAM meter, a.k.a An unashamed rip off of windows own sidebar gadget.
I'm quite happy with the artwork but there's a couple of things, as much as I've tried, I can't figure out.
First off text alignment in the digital windows. It's left aligned and I'd like it right aligned. I can move it about but can't figure out how to switch the anchor from left to right or centre (center :P).

The Photoshopped images will explain it better.

How it is:

How I want it:

The Complete picture:

Secondly font choice.
If I change "Calibri" in this entry:

Code:

cpuBackground = background.addTextObject("00%", "Calibri", 10, "Color(0, 200, 255, 255)", 37, 76);

to Arial or Tahoma or Segoe UI, not a problem. but as soon as I specify "Digitype-7" or "Digitype-7 Mono" as in the photoshopped images above, Nada. Nothing. Zilch. I just end up with a blank "LCD" screen.

If anyone can help me with changing the font to the afore mentioned I would be in bunny heaven.

Here's the (modified) windows sidebar cpu.js file I'm working with:

Code:

////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2006 Microsoft Corporation.  All rights reversed.
//
////////////////////////////////////////////////////////////////////////////////
var dialOffset = -125;

var intCPUDialPos = dialOffset;
var intMEMDialPos = dialOffset;

var intCPUCurrent = dialOffset;
var intMEMCurrent = dialOffset;

var intRotateStep = 5;
var intNoAnimThresh = 4;

var isDocked;
var isVisible = true;

var cpuBackground;
var memoryBackground;

var gadgetTimeout;
var dialTimeout;

var L_PROCESSOR_TEXT = "CPU usage";
var L_MEMORY_TEXT    = "RAM (Memory) usage";
////////////////////////////////////////////////////////////////////////////////
//
// GADGET FUNCTIONS
//
////////////////////////////////////////////////////////////////////////////////
function loadMain()
{
    System.Gadget.visibilityChanged = checkVisibility;
    System.Gadget.onUndock = checkState;
    System.Gadget.onDock = checkState;
    
    cpuBackground = background.addTextObject("00%", "Calibri", 10, "Color(0, 200, 255, 255)", 37, 76);
    memoryBackground = background.addTextObject("00%", "Calibri", 10, "Color(0, 200, 255, 255)", 90, 43);
    cpuMeter.addShadow("grey", 2, 40, 2, 2);
    memMeter.addShadow("grey", 2, 40, 2, 2);
    checkState();
    animateGadget();
}
////////////////////////////////////////////////////////////////////////////////
//
// start gadget animation
//
////////////////////////////////////////////////////////////////////////////////
function animateGadget()
{
    clearTimeout(dialTimeout);
    
    var cpuUpdated = false;
    var memoryUpdated = false;
    var cpuDiff = 0;
    var memDiff = 0;

    var oMachine = new machineStatus();
    
    if (Math.round(intCPUCurrent) != Math.round(oMachine.CPUUsagePercentage))
    {
        cpuDiff = Math.abs(intCPUCurrent - oMachine.CPUUsagePercentage);
        intCPUCurrent = oMachine.CPUUsagePercentage;
        writeMeter(0, numberFormat(oMachine.CPUUsagePercentage));
        
        cpuUpdated = true;
    }
    
    if (Math.round(intMEMCurrent) != Math.round(oMachine.memoryPercentage))
    {
        memDiff = Math.abs(intMEMCurrent - oMachine.memoryPercentage);
        intMEMCurrent = oMachine.memoryPercentage;
        writeMeter(1, numberFormat(oMachine.memoryPercentage));
        
        memoryUpdated = true;
    }
    
    if (cpuUpdated || memoryUpdated)
    {
        // something changed...
        if ((cpuDiff < intNoAnimThresh) && (memDiff < intNoAnimThresh))
        {
            // too small - don't animate
            moveDial(cpuUpdated, (oMachine.CPUUsagePercentage - intCPUDialPos), memoryUpdated, (oMachine.memoryPercentage - intMEMDialPos), intRotateStep);
        }
        else
        {
            // animate as usual
            moveDial(cpuUpdated, ((oMachine.CPUUsagePercentage - intCPUDialPos) / intRotateStep), memoryUpdated, ((oMachine.memoryPercentage - intMEMDialPos) / intRotateStep), 0);
        }
    }
    
    gadgetTimeout = setTimeout("animateGadget()", 750);
}
////////////////////////////////////////////////////////////////////////////////
//
// update machine status statistics
//
////////////////////////////////////////////////////////////////////////////////
function machineStatus()
{
    this.CPUCount = System.Machine.CPUs.count;

    var usageTotal = 0;
    
    for (var i = 0; i < this.CPUCount; i++)
    {
        usageTotal += System.Machine.CPUs.item(i).usagePercentage;
    }

    this.CPUUsagePercentage = Math.min(Math.max(0, usageTotal / this.CPUCount), 100);
    this.totalMemory = System.Machine.totalMemory;
    this.availableMemory = System.Machine.availableMemory;
    
    if((this.totalMemory > 0) && (this.totalMemory > this.availableMemory))
    {
        this.memoryPercentage = Math.min(100 - (this.availableMemory / this.totalMemory * 100), 100);
    }
    else
    {
        this.memoryPercentage = 0;
    }
}
////////////////////////////////////////////////////////////////////////////////
//
// write meter reading
//
// E.G. cpuBackground.left = centerPercent(percent, [34,56], [3,3]);
// 34,56 = normal & large position
//
////////////////////////////////////////////////////////////////////////////////
function writeMeter(dialType, percent)
{
    if (dialType == 0)
    {
        cpuBackground.left = centerPercent(percent, [34,56], [3,3]);
        cpuBackground.value = percent;
        cpuMeterLabel.innerHTML = L_PROCESSOR_TEXT + " " +percent;
    }
    else if (dialType == 1)
    {
        memoryBackground.left = centerPercent(percent, [90,135], [3,5]);
        memoryBackground.value = percent;
        memoryMeterLabel.innerHTML = L_MEMORY_TEXT + " " +percent;
    }        
}
////////////////////////////////////////////////////////////////////////////////
//
// move the cpu dial
//
////////////////////////////////////////////////////////////////////////////////
function moveDial(cpuDial, cpuInc, memoryDial, memoryInc, dialStep)
{
    if (cpuDial)
    {
        intCPUDialPos += cpuInc;
        
        if (cpuInc > 0)
        {
            intCPUDialPos = Math.min(Math.max(0, intCPUDialPos), intCPUCurrent);
        }
        else
        {
            intCPUDialPos = Math.max(Math.max(0, intCPUCurrent), intCPUDialPos);
        }
        
        if (dialStep < intRotateStep - 1)
        {
            cpuMeter.Rotation = (intCPUDialPos * 2.5) + dialOffset;
        }
    }
    
    if (memoryDial)
    {
        intMEMDialPos += memoryInc;

        if (memoryInc > 0)
        {
            intMEMDialPos = Math.min(Math.max(0, intMEMDialPos), intMEMCurrent);
        }
        else
        {
            intMEMDialPos = Math.max(Math.max(0, intMEMCurrent), intMEMDialPos);
        }
        
        if (dialStep < intRotateStep - 1)
        {
            memMeter.Rotation = (intMEMDialPos * 2.5) + dialOffset;
        }
    }
    
    if (dialStep < intRotateStep)
    {
        dialTimeout = setTimeout("moveDial(" + cpuDial + "," + cpuInc+ "," + memoryDial+ "," + memoryInc + "," + (++dialStep) + ")", Math.floor((1000 - (1000 / intRotateStep)) / intRotateStep));
    }
    else
    {
        if (cpuDial)
        {
            cpuMeter.Rotation = (intCPUCurrent * 2.5) + dialOffset;
        }
        
        if (memoryDial)
        {
            memMeter.Rotation = (intMEMCurrent * 2.5) + dialOffset;
        }
    }
}
////////////////////////////////////////////////////////////////////////////////
//
//
////////////////////////////////////////////////////////////////////////////////
function centerPercent(percent, leftPx, adjPx)
{
    var index = 0;
    
    if (!isDocked)
    {
        index = 1;
    }

    var left = leftPx[index];

    if (percent.length > 3)
    {
        left -= adjPx[index];
    }
    
    return left;
}
////////////////////////////////////////////////////////////////////////////////
//
//  Digital display figures
//
////////////////////////////////////////////////////////////////////////////////
function numberFormat(numberIn)
{
    if (numberIn == null || numberIn < 0.5)
    {
        return "00";
    }
    
    numberIn = Math.round(numberIn);    
    
    if (numberIn != null && numberIn < 10)
    {
        return "0" + numberIn;
    }
    else if (numberIn != null && numberIn > 100)
    {
        return "100";
    }
    else
    {
        return numberIn;
    }
}
////////////////////////////////////////////////////////////////////////////////
//
// styles for gadget when UNDOCKED (LARGE)
// Pointer centres
//
////////////////////////////////////////////////////////////////////////////////
function undockedState()
{
    with (document.body.style)
    {
        width = "198px";
        height = "159px";
    }
    background.style.width = "198px";
    background.style.height = "159px";
    background.src = "url(images/Back_2.png)";
    
    with (cpuMeter.style)
    {
        left = "63px";
        top = "34px";
        width = "10px";
        height = "98px";
    }
    cpuMeter.src = "images/Hand_lrg.png";
    
    with (memMeter.style)
    {
        left = "137px";
        top = "16px";
        width = "10px";
        height = "70px";
    }
    memMeter.src = "images/Hand_lrg_ram.png";
    
    with (dialDot.style)
    {
        width = "198px";
        height = "159px";
    }
    dialDot.src = "images/Hub_lrg.png";
        
    cpuBackground.left = 56;
    cpuBackground.top = 106;
    cpuBackground.fontSize = 14;
  
    memoryBackground.left = 133;
    memoryBackground.top = 64;
    memoryBackground.fontSize = 12;
    
    glassMap.src = "images/glass_lrg.png";
    glassMap.useMap = "#back_lrg_Map";
    memoryLargeMap.alt = L_MEMORY_TEXT;
    processorLargeMap.alt = L_PROCESSOR_TEXT;

    isDocked = false;
}
////////////////////////////////////////////////////////////////////////////////
//
// styles for gadget when DOCKED (NORMAL)
// Pointer centres
//
////////////////////////////////////////////////////////////////////////////////
function dockedState()
{
    with (document.body.style)
    {
        width = "130px";
        height = "103px";
    }
    background.style.width = "130px";
    background.style.height = "103px";
    background.src = "url(images/Back_1.png)";
    
    with (cpuMeter.style)
    {
        left = "38px";
        top = "22px";
        width = "8px";
        height = "72px";
    }
    cpuMeter.src = "images/Hand.png";
    
    with (memMeter.style)
    {
        left = "92px";
        top = "8px";
        width = "8px";
        height = "50px";
    }
    memMeter.src = "images/Hand_ram.png";

    with (dialDot.style)
    {
        width = "130px";
        height = "103px";
    }
    dialDot.src = "images/Hub.png";
    
    cpuBackground.left = 33;
    cpuBackground.top = 71;
    cpuBackground.fontSize = 10;

    memoryBackground.left = 90;
    memoryBackground.top = 41;
    memoryBackground.fontSize = 9;    
    
    glassMap.src = "images/glass.png";
    glassMap.useMap = "#back_Map";
    memoryMap.alt = L_MEMORY_TEXT;
    processorMap.alt = L_PROCESSOR_TEXT;
    
    isDocked = true;
}
////////////////////////////////////////////////////////////////////////////////
//
// determine if gadget is in sidebar - docked or on the desktop - undocked
//
////////////////////////////////////////////////////////////////////////////////
function checkState()
{
    if (!System.Gadget.docked)
    {
        undockedState();
    }
    else
    {
        dockedState();
    }
    
    writeMeter(0, numberFormat(intCPUCurrent));
    writeMeter(1, numberFormat(intMEMCurrent));
}
////////////////////////////////////////////////////////////////////////////////
//
// determine if gadget is visible
//
////////////////////////////////////////////////////////////////////////////////
function checkVisibility()
{
    isVisible = System.Gadget.visible;
    clearTimeout(gadgetTimeout);
    
    if (isVisible)
    {
        gadgetTimeout = setTimeout("animateGadget()", 750);
    }
}

And this is the cpu.HTML file:

Code:

<!--
////////////////////////////////////////////////////////////////////////////////
//
//  Scripting:-
//  Copyright (c) 2006 Microsoft Corporation.  All rights reversed.
//
////////////////////////////////////////////////////////////////////////////////
-->
<html>
    <head>
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        <title>CPU</title>
        <link href="css/cpu.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="js/cpu.js" type="text/javascript"></script>
    </head>
    <body dir="ltr" unselectable="on" scroll="no" onload="loadMain()">
        <g:background id="background" style="position:absolute;z-index:-1"></g:background>
        <g:image id="dialDot" style="position:absolute;z-index:2" alt=""></g:image>
        <g:image id="cpuMeter" style="position:absolute;z-index:1"></g:image>
        <g:image id="memMeter" style="position:absolute;z-index:1"></g:image>
        <img id="glassMap" src="http://www.w7forums.com/images/glass.png" style="position:absolute;z-index:3;cursor:default;" border="0" />
        <map name="back_Map">
            <area shape="poly" id="memoryMap" coords="71,31, 72,27, 74,21, 78,15, 87,10, 94,9, 101,9, 106,11, 111,15, 114,18, 117,23, 119,28, 120,34, 120,40, 118,46, 116,49, 111,54, 105,58, 98,60, 93,60, 86,58, 81,55, 80,48, 78,41, 73,34">
            <area shape="circle" id="processorMap" coords="41,58,37">
        </map>
        <map name="back_lrg_Map">
            <area shape="poly" id="memoryLargeMap" coords="122,79, 127,82, 137,85, 144,85, 155,82, 163,78, 169,72, 175,61, 177,52, 176,41, 172,32, 166,25, 159,19, 149,15, 137,15, 130,17, 121,22, 115,28, 111,35, 109,42, 108,47, 110,49, 113,53, 114,56, 115,59, 116,62">
            <area shape="circle" id="processorLargeMap" coords="68,82,50">
        </map>  
        <textarea readonly id="cpuMeterLabel" style="position:relative;z-index:-2;"></textarea>
        <textarea readonly id="memoryMeterLabel" style="position:relative;z-index:-2;"></textarea>
    <br /><div style="z-index:3" class="smallfont" align="center">SEO by vBSEO 3.3.2 &copy;2009, Crawlability, Inc.</div>
</body>
</html>

I've added and removed different text align commands in different places, same with the font change, but 99.9% of the time I get a cocked up display or no display or an "illegal gadget" (?) warning.

Help!! I've been pottering about with this, one and off for the best part of 18 months now and I'm still no better at script compiling!

BTW Everytime I touch the html file is a guranteed way to kill the gadget!

**clifford_cooley** · clifford_cooley's Computer Specs

I think I can figure something out.

Can you give me a link to the gadget you are working on?

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

It's actually the windows 7 default (ugly!!) cpu meter gadget underneath the hood. I've just re-skinned it.
Attached in a zip with fonts. Cheers Cliffy !!

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

Looking about Cliff, I think this was the main influence style and script wise. Black Glass CPU Meter

**clifford_cooley** · clifford_cooley's Computer Specs

Elmer I have shifted the CPU usage value to the right by adding spaces to the left by editing this code. However during the short time I worked with it was unable to change the font to the digital-7 font you seem to want.

Code:

////////////////////////////////////////////////////////////////////////////////
function writeMeter(dialType, percent)
{
    if (dialType == 0)
    {
        cpuBackground.left = centerPercent(percent, [34,56], [3,3]);

        if(percent < 10){cpuBackground.value = "    "+percent};
        if(percent > 9 && percent < 100){cpuBackground.value = "  "+percent};
        if(percent == 100){cpuBackground.value = percent};

        cpuMeterLabel.innerHTML = L_PROCESSOR_TEXT + " " +percent;
    }
    else if (dialType == 1)
    {
        memoryBackground.left = centerPercent(percent, [90,135], [3,5]);
        memoryBackground.value = percent;
        memoryMeterLabel.innerHTML = L_MEMORY_TEXT + " " +percent;
    }        
}
////////////////////////////////////////////////////////////////////////////////

Fire cat · Fire cat's Computer Specs

'this HTML? Looks like it.
Clifford, you shouldn't be adding spaces. When you want to align an element to the the side, you either use text-align or float.

Code:

float:right

That will "float" or position the element to the right of it's parent.

**clifford_cooley** · clifford_cooley's Computer Specs

Quote:

Originally Posted by Fire cat

Clifford, you shouldn't be adding spaces. When you want to align an element to the the side, you either use text-align or float.

Code:

float:right

That will "float" or position the element to the right of it's parent.

Unless the parent is wide enough for the text to move and not too wide for the text to move too far that will work. I know I shouldn't be adding spaces but unfortunately that was the quickest way without controlling the parent dimensions.

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

Thanks for your help so far clifford. I changed the space to move and added a zero to the front. Now it's permanent 3 digit. Except "100" reads "0100" I got round that by changing this bit:

Code:

function machineStatus()
{
    this.CPUCount = System.Machine.CPUs.count;

    var usageTotal = 0;
    
    for (var i = 0; i < this.CPUCount; i++)
    {
        usageTotal += System.Machine.CPUs.item(i).usagePercentage;
    }
//this.CPUUsagePercentage = Math.min(Math.max(0, usageTotal / this.CPUCount), 99 was 100)
    this.CPUUsagePercentage = Math.min(Math.max(0, usageTotal / this.CPUCount), 99);
    this.totalMemory = System.Machine.totalMemory;
    this.availableMemory = System.Machine.availableMemory;
    
    if((this.totalMemory > 0) && (this.totalMemory > this.availableMemory))
    {
        this.memoryPercentage = Math.min(100 - (this.availableMemory / this.totalMemory * 100), 100);
    }
    else
    {
        this.memoryPercentage = 0;
    }

So now it maxes out at 99 but theoretically I shouldn't ever see that. Well, unless I start up Prime 95!!

@Firecat. How would I put / where would I put that? How about changing the font?

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

OK I managed to change the font, all down to a typo in the font name. After all that the "Digi-7" fonts look crap so I'm using Tahoma instead!

I'll mark this thread as solved but if anyone can come up with the answer to right aligned text.....

Elmer BeFuddled · Elmer BeFuddled's Computer Specs

Well I finally got this old project finished!
After much faffing about I discovered what I needed to change to "right align" the 3 digit set up (when it hit 100 it was reading 0100, or moving across one digit to read (space)100). The bits changed below, I'd originally been reducing the figures, then by mistake (I typed 11 instead of 1) I discovered I should be increasing them.

Code:

function writeMeter(dialType, percent)
{
    if (dialType == 0)
    {
Original cpuBackground.left = centerPercent(percent, [34,58], [3,3]);
        cpuBackground.left = centerPercent(percent, [34,59], [6,7]);
        cpuBackground.value = percent;
        cpuMeterLabel.innerHTML = L_PROCESSOR_TEXT + " " +percent;
    }
    else if (dialType == 1)
    {
Original  memoryBackground.left = centerPercent(percent, [89,133], [3,5]);
        memoryBackground.left = centerPercent(percent, [88,133], [4,6]);
        memoryBackground.value = percent;
        memoryMeterLabel.innerHTML = L_MEMORY_TEXT + " " +percent;
    }

So thats it. Job done.

Scripting Sidebar Gadgets.-classic-cpu.jpg

Uploaded the finished articles to deviantArt. Must admit I gave up on combining the 3 skins into one gadget. Maybe next year........

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Best USB Gadgets	spearace	Off-Topic Discussion	23	05-28-2011 06:13 AM
Gadgets on the screen, How to get rid of ....?	Springflower10	Windows 7 Support	3	12-18-2010 09:51 AM
Disable Windows 7 Gadgets - Discussion	Ian	Article Discussion	0	01-08-2010 04:48 PM
Disable Windows 7 Gadgets	Ian	System Administration	0	01-08-2010 04:48 PM
Unable to download gadgets	tulsa40	Windows 7 Support	1	10-29-2009 02:55 PM