Current day of the week in an ellipse.

It's not easy to collaborate like this because I'm working off an old version of code that you may have changed. I can just paste my complete file (as I did above), but then you risk losing any the changes you may have already made (such as dc.setPenWidth(2);), because I don't know what your complete file looks like.

That's why it's better if you could work to understand *how* to make changes (and why they work), as opposed to being handed the complete set of code every single time.

Here's the complete file:

import Toybox.Graphics;
import Toybox.Lang;
import Toybox.System;
import Toybox.WatchUi;
import Toybox.Time;
using Toybox.Time.Gregorian;

class ExampleDaysOfWeekView extends WatchUi.WatchFace {
    
    var fontSize = Graphics.FONT_XTINY;
    var paddingWidth=6; //padding around the text
    var paddingHeight=2; //padding around the text
    var daysX = 0.5; //middle of the screen
    var ySpacing = 0.1; //how much of the screen to leave vertically. The larger the number the greater the spacing
    
    var KNOWN_MONDAY = Gregorian.moment( {:year=> 2000, :month=> 1, :day=> 3});
    var DAY_LENGTH = 3600 * 24;
    
    function initialize() {
        WatchFace.initialize();
    }

    // Load your resources here
    function onLayout(dc as Dc) as Void {
       // setLayout(Rez.Layouts.WatchFace(dc));
    }

    // Called when this View is brought to the foreground. Restore
    // the state of this View and prepare it to be shown. This includes
    // loading resources into memory.
    function onShow() as Void {
    }

    // Update the view
    function onUpdate(dc as Dc) as Void {
        
        //clear the screen
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        dc.clear();
        dc.setPenWidth(2);
                
        //draw all the days of the week down the screen
        drawDay(dc, 1, KNOWN_MONDAY, Graphics.COLOR_GREEN); // Monday
        drawDay(dc, 2, KNOWN_MONDAY.add(new Time.Duration(1 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Tuesday
        drawDay(dc, 3, KNOWN_MONDAY.add(new Time.Duration(2 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Wednesday
        drawDay(dc, 4, KNOWN_MONDAY.add(new Time.Duration(3 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Thursday
        drawDay(dc, 5, KNOWN_MONDAY.add(new Time.Duration(4 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Friday
        drawDay(dc, 6, KNOWN_MONDAY.add(new Time.Duration(5 * DAY_LENGTH)), Graphics.COLOR_BLUE); // Saturday
        drawDay(dc, 7, KNOWN_MONDAY.add(new Time.Duration(6 * DAY_LENGTH)), Graphics.COLOR_RED); // Sunday

        // set color of highlight       
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
       
        //draw the ellipse around that day
        highlightDay(dc, Time.now());
    }
    
    function drawDay(dc, position, date, textColor){
        var name = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week;
        
        dc.setColor(textColor, Graphics.COLOR_TRANSPARENT);
                
        dc.setPenWidth(2);
        dc.drawText(daysX * dc.getWidth(), position * ySpacing * dc.getHeight(), fontSize, name, Graphics.TEXT_JUSTIFY_CENTER|Graphics.TEXT_JUSTIFY_VCENTER);
    }
    
    function highlightDay(dc, date){
        
        var dayOfWeekNumber = Time.Gregorian.utcInfo(date, Time.FORMAT_SHORT).day_of_week - 1; //week starts on Sunday, not Monday
        if (dayOfWeekNumber == 0) {
       		dayOfWeekNumber = 7;
       	}
        var dayOfWeekName = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week;
             
        //calculate the width of the ellipse for the length and height of the name eg. "SUN"
        var width = dc.getTextWidthInPixels(dayOfWeekName, fontSize) + paddingWidth;
        var height = dc.getFontHeight(fontSize)+paddingHeight;
        
        //position the elipse in the middle of the screen
        var xPosition = dc.getWidth()/2 - width/2;
        //and the right number of days down
        var yPosition = dayOfWeekNumber * ySpacing * dc.getHeight() - height/2;
                
        //draw it
        dc.drawRoundedRectangle(xPosition, yPosition, width, height, 3); 
    }

    // Called when this View is removed from the screen. Save the
    // state of this View here. This includes freeing resources from
    // memory.
    function onHide() as Void {
    }

    // The user has just looked at their watch. Timers and animations may be started here.
    function onExitSleep() as Void {
    }

    // Terminate any active timers and prepare for slow updates.
    function onEnterSleep() as Void {
    }

}

Here's what I changed.

Original code:

   function onUpdate(dc as Dc) as Void {

        //clear the screen
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        dc.clear();
        dc.setPenWidth(2);

        //draw all the days of the week down the screen
        drawDay(dc, 1, KNOWN_MONDAY);
        drawDay(dc, 2, KNOWN_MONDAY.add(new Time.Duration(1 * DAY_LENGTH)));
        drawDay(dc, 3, KNOWN_MONDAY.add(new Time.Duration(2 * DAY_LENGTH)));
        drawDay(dc, 4, KNOWN_MONDAY.add(new Time.Duration(3 * DAY_LENGTH)));
        drawDay(dc, 5, KNOWN_MONDAY.add(new Time.Duration(4 * DAY_LENGTH)));
        drawDay(dc, 6, KNOWN_MONDAY.add(new Time.Duration(5 * DAY_LENGTH)));
        drawDay(dc, 7, KNOWN_MONDAY.add(new Time.Duration(6 * DAY_LENGTH)));

        //draw the ellipse around that day
        highlightDay(dc, Time.now());
    }

New code (changes in bold)

    function onUpdate(dc as Dc) as Void {
        
        //clear the screen
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        dc.clear();
        dc.setPenWidth(2);
                
        //draw all the days of the week down the screen
        drawDay(dc, 1, KNOWN_MONDAY, Graphics.COLOR_GREEN); // Monday
        drawDay(dc, 2, KNOWN_MONDAY.add(new Time.Duration(1 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Tuesday
        drawDay(dc, 3, KNOWN_MONDAY.add(new Time.Duration(2 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Wednesday
        drawDay(dc, 4, KNOWN_MONDAY.add(new Time.Duration(3 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Thursday
        drawDay(dc, 5, KNOWN_MONDAY.add(new Time.Duration(4 * DAY_LENGTH)), Graphics.COLOR_GREEN); // Friday
        drawDay(dc, 6, KNOWN_MONDAY.add(new Time.Duration(5 * DAY_LENGTH)), Graphics.COLOR_BLUE); // Saturday
        drawDay(dc, 7, KNOWN_MONDAY.add(new Time.Duration(6 * DAY_LENGTH)), Graphics.COLOR_RED); // Sunday

        // set color of highlight       
        dc.setColor(Graphics.COLOR_WHITE, Graphics.COLOR_TRANSPARENT);
       
        //draw the ellipse around that day
        highlightDay(dc, Time.now());
    }
:

Original code:

  function drawDay(dc, position, date) {
        var name = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week;

        dc.setPenWidth(2);
        dc.drawText(daysX * dc.getWidth(), position * ySpacing * dc.getHeight(), fontSize, name, Graphics.TEXT_JUSTIFY_CENTER | Graphics.TEXT_JUSTIFY_VCENTER);
    }

New code:

    function drawDay(dc, position, date, textColor){
        var name = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week;
        
        dc.setColor(textColor, Graphics.COLOR_TRANSPARENT);
                
        dc.setPenWidth(2);
        dc.drawText(daysX * dc.getWidth(), position * ySpacing * dc.getHeight(), fontSize, name, Graphics.TEXT_JUSTIFY_CENTER|Graphics.TEXT_JUSTIFY_VCENTER);
    }