SOLVED Scripting Sidebar Gadgets.

Elmer BeFuddled

Resident eejit
Joined
Jun 12, 2010
Messages
1,048
Reaction score
251
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="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!
 

Elmer BeFuddled

Resident eejit
Joined
Jun 12, 2010
Messages
1,048
Reaction score
251
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 !!
 

Attachments

Joined
Mar 8, 2009
Messages
5,063
Reaction score
1,185
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

Established Member
Joined
Mar 7, 2010
Messages
1,157
Reaction score
191
'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.
 
Joined
Mar 8, 2009
Messages
5,063
Reaction score
1,185
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

Resident eejit
Joined
Jun 12, 2010
Messages
1,048
Reaction score
251
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?
 
Last edited:

Elmer BeFuddled

Resident eejit
Joined
Jun 12, 2010
Messages
1,048
Reaction score
251
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

Resident eejit
Joined
Jun 12, 2010
Messages
1,048
Reaction score
251
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.

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........
 
  • Like
Reactions: Ian

Nibiru2012

Quick Scotty, beam me up!
Joined
Oct 27, 2009
Messages
4,955
Reaction score
1,302
Looks good! Not bad for a wabbit hunter!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top