Using Settings to Choose Color of Gadget

Hot Topic

using webservices in a gadget
How to add HDMI support in video miniport driver?
Posting to Web Service
iHDSim catastrophic failure
HTC files with gadgets?
Getting a VC-1 file ready for advanced content authoring
How can I access a local database (.mdb) in gadgets?
Bandwidth Monitor
WMEncoder TimeCode
prevent Setting UI from opening?

Audio and Video

backgroundImage parameters
Digital Signature
The 'priority' attribute is not declared.
Popup modal frame from web gadget
WMP Library Problems
How can we control the "Enhancements" page under device Properties page?
What's apiVersion for?
ihdsim crashes
Does iHD Simulator support the Network API?
Checking for an active title

Using Settings to Choose Color of Gadget

I have a simple gadget where I have 4 different color .png bachground colors. The default is red and I want a user to be able to enter settings and choose the background color. I think I'm close, but if someone could give some pointers, I would really appreciate it.

You see the bold else If I add and remove that by hand, I can change the color and then change the color back after I remove it. Any thoughts looking at the code I am a beginner, so any help is once again very moch appreciated.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Settings</title>
<script type='text/javascript' src="js\Settings.js"></script>
<script>
System.Gadget.onSettingsClosing = SettingsClosing
function SettingsClosing(event){
if (value="red")
System.Gadget.background = "url(/images/backgroundRed.png)"
else
if (value="Silver")
System.Gadget.background = "url(/images/backgroundSilver.png)"

if (value="Green")
System.Gadget.background = "url(/images/backgroundGreen.png)"

if (value="Blue")
System.Gadget.background = "url(/images/backgroundBlue.png)"
}

</script>

</head>
<body onload="init() " style="width:250;height:200;">
<span id="spanConfig" style="font-family: Segoe UI; font-size: 12pt;">
<strong>Choose a Color</strong>
<form method="post">
<input id="Red" type="checkbox" value="Red"> Red</form>
<form method="post">
<input id="Silver" type="checkbox" value="Silver"> Silver</form>
<form method="post">
<input id="Green" type="checkbox" value="Green"> Green</form>
<form method="post">
<input id="Blue" type="checkbox" value="Blue"> Blue</form>
</span>
</body>
</html>




Answer this question

Using Settings to Choose Color of Gadget

  • Michael Herman - Parallelspace

    Just looking at your original code snippet, your if statements are using assignment operators (=) rather than equality comparisons (==). Thus 'value = "red"' will always be true because you're assigning. Try switching to == and see if that helps.

  • Cest la vie

    You won't be able to change the Gadget background from within the settings. Instead you'll have to either pass it back or save it as a setting. Here's some code to do the latter.


    settings.html (drop the forms and use radio buttons)

    <html>
    <head>
    <script language="javascript" type="text/javascript" src="js\Settings.js"></script>
    </head>
    <body onload="init();" style="width:250px; height:200px;">
    <span id="spanConfig" style="font-family: Segoe UI; font-size: 12pt;">
    <strong>Choose a Color</strong>
    <input name="colour" type="radio" value="Red">&nbsp Red<BR>
    <input name="colour" type="radio" value="Silver">&nbsp Silver<BR>
    <input name="colour" type="radio" value="Green">&nbsp Green<BR>
    <input name="colour" type="radio" value="Blue">&nbsp Blue<BR>
    </span>
    </body>
    </html>


    In settings.js add the following:

    System.Gadget.onSettingsClosing = settingsClosing
    var colours = ["red", "silver", "green", "blue"];

    function settingsClosing(event){
    if (event.closeAction == event.Action.commit) {
    for(var i = 0; i < colour.length; i++) {
    if(colour[ i ].checked)
    System.Gadget.Settings.write("colour", colours[ i ]);
    }
    }
    event.cancel = false;
    }


    In your gadget.js file add the following:

    System.Gadget.onSettingsClosed = settingsClosed;

    function settingsClosed() {
    var colour = System.Gadget.Settings.readString("colour");
    if (colour != "")
    System.Gadget.background = "images/background" + colour + ".png";
    }

  • den2005

    Thanks for the input. However, that did not seem to do anything either. To help and ask for a little more help, I have made the gadget available by download the the following link.

    http://www.blogcastrepository.com/upload/tbrlinkshelp.zip

    If anyone sees the problem, just post which file and the possible fix. Thanks! I really appreciate it.

    Once I get the main background, I want to take what I have learned from that and have the flyout match. Please don't do that for me, I think if I can get the main part, I will be able to work out the flyout.



  • shevi2027

    I very much appreciate the reply, but that does not change the color. The default of red does not change.

    Maybe something (most likely) on my settings.js file.. Like I said, new to this, but trying to make some sense on my own before asking for help.

    Settings.js

    function init()
    {
    var id = System.Gadget.Settings.read(id="");
    if (sColorName != "")
    {
    ColorName.value = sColorName;
    }
    }
    function SettingsClosing(event)
    {
    if (event.closeAction == event.Action.commit)
    {
    System.Gadget.Settings.write("id", ColorName.value);
    }

    event.cancel = false;
    }



  • ComputerSue

    Thanks very much for the post. That did the job! Now I'm playing with the flyout. Thanks again!

  • Kalagaraz

    function SettingsClosing(event){
    if (value=="red")
    {System.Gadget.background = "url(/images/backgroundRed.png)"}
    if (value=="Silver")
    {System.Gadget.background = "url(/images/backgroundSilver.png)"}
    if (value=="Green")
    {System.Gadget.background = "url(/images/backgroundGreen.png)"}
    if (value=="Blue")
    {System.Gadget.background = "url(/images/backgroundBlue.png)"}
    }
  • Using Settings to Choose Color of Gadget
Answer this question