SOLVED Scripting Sidebar Gadgets.

Elmer BeFuddled · Mar 11, 2011

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

).

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="https://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 · Mar 11, 2011

I think I can figure something out.

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

Elmer BeFuddled · Mar 11, 2011

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 · Mar 11, 2011

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

clifford_cooley · Mar 13, 2011

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 · Mar 13, 2011

'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 · Mar 13, 2011

Fire cat said:
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 · Mar 14, 2011

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;
    }
[COLOR=DarkGreen]//this.CPUUsagePercentage = Math.min(Math.max(0, usageTotal / this.CPUCount), 99 was 100)[/COLOR]
    this.CPUUsagePercentage = Math.min(Math.max(0, usageTotal / this.CPUCount),[COLOR=DarkGreen][B] 99[/B][/COLOR]);
    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 · Mar 14, 2011

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 · Mar 20, 2011

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)
    {
[COLOR=Red]Original cpuBackground.left = centerPercent(percent, [34,58], [SIZE=4][B][3,3][/B][/SIZE]);[/COLOR]
        cpuBackground.left = centerPercent(percent, [34,59], [SIZE=4][B][6,7][/B][/SIZE]);
        cpuBackground.value = percent;
        cpuMeterLabel.innerHTML = L_PROCESSOR_TEXT + " " +percent;
    }
    else if (dialType == 1)
    {
[COLOR=Red]Original  memoryBackground.left = centerPercent(percent, [89,133], [SIZE=4][B][3,5][/B][/SIZE]);[/COLOR]
        memoryBackground.left = centerPercent(percent, [88,133], [SIZE=4][B][4,6][/B][/SIZE]);
        memoryBackground.value = percent;
        memoryMeterLabel.innerHTML = L_MEMORY_TEXT + " " +percent;
    }

So thats it. Job done.

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

Ian · Mar 21, 2011

Very nice work indeed!

Nibiru2012 · Mar 21, 2011

Looks good! Not bad for a wabbit hunter!

Scripting Help requested ...	1	Jun 24, 2012
Scripting Homepage change in .cmd	2	Apr 19, 2012
cross scripting/java error hs_err_pid#	0	Oct 17, 2011
cross scripting errors/ie9	0	Aug 30, 2011
ActiveX component... error - scripting	0	May 19, 2011
Google W7 Sidebar	13	Apr 9, 2011
Help with Windows scripting or batch file	5	Aug 30, 2010
How to stop sidebar.exe from autorunning?	20	Jan 22, 2010

SOLVED Scripting Sidebar Gadgets.

Elmer BeFuddled

Resident eejit

clifford_cooley

Elmer BeFuddled

Resident eejit

Attachments

Elmer BeFuddled

Resident eejit

clifford_cooley

Fire cat

Established Member

clifford_cooley

Elmer BeFuddled

Resident eejit

Elmer BeFuddled

Resident eejit

Elmer BeFuddled

Resident eejit

Ian

Nibiru2012

Quick Scotty, beam me up!

Ask a Question

Similar Threads