Changing parameters of shapes defined in XML

The following drawable-list definition...

<drawable-list id="Smiley" background="Gfx.COLOR_YELLOW">
<shape type="ellipse" x="79" y="90" width="20" height="30" color="Gfx.COLOR_BLACK" />
<shape type="ellipse" x="139" y="90" width="20" height="30" color="Gfx.COLOR_BLACK" />
</drawable-list>


Is compiled into a class that looks like this...

module Rez {
module Drawables {

class Smiley extends Toybox.WatchUi.Drawable {

function initialize(params) {
Drawable.initialize({});
}

function draw(dc) {
varpX=0;
varpY=0;
varpWidth=dc.getWidth();
varpHeight=dc.getHeight();
drawComplex(dc,pX,pY,pWidth,pHeight);
}

function drawComplex(dc, pX, pY, pWidth, pHeight) {
dc.setColor(Gfx.COLOR_YELLOW,Gfx.COLOR_TRANSPARENT);
dc.fillRectangle((pX+0),(pY+0),(pWidth-0),(pHeight-0));
dc.setColor(Gfx.COLOR_TRANSPARENT,Gfx.COLOR_YELLOW);
dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_TRANSPARENT);
dc.fillEllipse(((pX+0)+79),((pY+0)+90),20-(0),30-(0));
dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_TRANSPARENT);
dc.fillEllipse(((pX+0)+139),((pY+0)+90),20-(0),30-(0));
}
}
}
}


As you can see, the colors are hard-coded into the definition of the class. You cannot modify them directly. That said, you can define variables to hold the color you want...

<drawable-list id="Smiley" background="Gfx.COLOR_YELLOW">
<shape type="ellipse" x="79" y="90" width="20" height="30" color="EyeColor" />
<shape type="ellipse" x="139" y="90" width="20" height="30" color="EyeColor" />
</drawable-list>


Now the generated class will refer to those variables for its color (or height, or width, or position). Then you just need to define those variables in your source, and then modify them as necessary...

var EyeColor = Gfx.COLOR_BLACK;

class WidgetDelegate extends Ui.BehaviorDelegate
{
function initialize() {
BehaviorDelegate.initialize();
}

const colors = [
Gfx.COLOR_BLACK,
Gfx.COLOR_BLUE,
Gfx.COLOR_GREEN,
Gfx.COLOR_RED
];

function onSelect() {

EyeColor = colors[ Math.rand() % colors.size() ];
Ui.requestUpdate();

return false;
}

function onBack() {
return false;
}
}


You can use this along with the Ui.animate() function to do simple animation. If you wanted to make the smiley blink when the screen is tapped or enter is pressed...

using Toybox.Application as App;
using Toybox.Graphics as Gfx;
using Toybox.WatchUi as Ui;
using Toybox.Math as Math;

var EyeColor = Gfx.COLOR_BLACK;
var EyeHeight = 30;

class WidgetView extends Ui.View
{
function initialize() {
View.initialize();
}

hidden var smiley;

function onLayout(dc) {
smiley = new Rez.Drawables.Smiley();
}

function onUpdate(dc) {
smiley.draw(dc);
}

function blink() {
closeEyes();
}

function closeEyes() {
Ui.animate(smiley, :EyeHeight, Ui.ANIM_TYPE_EASE_IN_OUT, EyeHeight, 0, 0.5, self.method(:openEyes));
}

hidden const colors = [
Gfx.COLOR_BLACK,
Gfx.COLOR_BLUE,
Gfx.COLOR_GREEN,
Gfx.COLOR_RED
];

function openEyes() {
Ui.animate(smiley, :EyeHeight, Ui.ANIM_TYPE_EASE_IN_OUT, 0, 30, 0.5, null);
EyeColor = colors[ Math.rand() % colors.size() ];
}
}

class WidgetDelegate extends Ui.BehaviorDelegate
{
hidden var mView;

function initialize(view) {
BehaviorDelegate.initialize();
mView = view;
}

function onSelect() {
mView.blink();
return false;
}

function onBack() {
return false;
}
}

class WidgetApp extends App.AppBase {

function initialize() {
AppBase.initialize();
}

function getInitialView() {
var view = new WidgetView();
return [ view, new WidgetDelegate(view) ];
}
}