Current day of the week in an ellipse.

Hi, how do I make sure that the current day of the week is displayed in an ellipse? 

Has anyone handled something like this?

Thank you.

flowstate over 4 years ago in reply to 7643321

Thanks for posting the additional context. It's hard to help you if you just post a snippet of code with very little context. For example, I still don't know how colorDayOfWeek is set here (is it from settings)?

Either way, it'll be ignored after you make the following change:

     if (dayOfWeekNumber == 6 || dayOfWeekNumber == 7) {
          dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_TRANSPARENT);
    } else {
          dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
    }

7643321 over 4 years ago in reply to flowstate

It's your code and I'm trying to change it to a fixed value so that it's saturday = blue, sunday = red ...

 // Update the view
   function onUpdate(dc as Dc) as Void {
        
        //clear the screen
        
        dc.clear();
                
        //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());
    }
    
    function drawDay(dc, position, date){
        var name = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week.substring(0,2).toUpper();
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_BLACK);
        
        
        
        
        dc.setPenWidth(2);
        
        dc.drawText( position * xSpacing * dc.getWidth(), daysY * dc.getHeight(), fontSize, name, Graphics.TEXT_JUSTIFY_CENTER|Graphics.TEXT_JUSTIFY_VCENTER);
    }
    
    function highlightDay(dc, localDate){
        
        var dayOfWeekNumber = Time.Gregorian.info(localDate, Time.FORMAT_SHORT).day_of_week - 1; //week starts on Sunday, not Monday
        if (dayOfWeekNumber == 0) {
               dayOfWeekNumber = 7;
         
         
        
        
        var dayOfWeekName = Time.Gregorian.info(localDate, 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 = dayOfWeekNumber * xSpacing * dc.getHeight() - width/2;
        //and the right number of days down
        var yPosition = 69;
                
        //draw it
        dc.drawRoundedRectangle(xPosition+17, yPosition, width, height, 4); 
        dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
        //dc.setPenWidth(5); // test change drawLine
        //dc.drawLine(55,45,85,45); //

flowstate over 4 years ago in reply to 7643321

That's the thing, it's *not* my code.

It's example code that somebody else made for you, where I fixed a few bugs. But it belongs to you now and you have to take responsibility for it at some point, otherwise you may as well just ask someone to write the whole app for you. Like I said, the part of the code with "colorDayOfWeek" was new to me.

Does it not work when you make this change that I just suggested (with more context below)?

7643321 over 4 years ago in reply to flowstate

No, this method does not work, write it:

An undefined "dayOfWeekNumber" symbol was detected.

When I change it to "name", it also doesn't work.

flowstate over 4 years ago in reply to 7643321

Sorry, my bad. I based my code off your initial guess of "if(dayOfWeekNumber == ("6") || dayOfWeekNumber == ("7")) {" and didn't look closely enough.

Here you go:

    function drawDay(dc, position, date){
        var name = Time.Gregorian.utcInfo(date, Time.FORMAT_MEDIUM).day_of_week.substring(0,2).toUpper();
    if (position== 6 || position== 7) {
           dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_TRANSPARENT);
        } else {
           dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_TRANSPARENT);
        }

7643321 over 4 years ago in reply to flowstate

Well, but even this solution did not change the color of Saturday and Sunday.

flowstate over 4 years ago in reply to 7643321

It works for me.

Here's the full view class code I used.

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);
        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());
    }

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

        if (position == 6 || position == 7) {
            dc.setColor(Graphics.COLOR_BLUE, Graphics.COLOR_TRANSPARENT);
        } else {
            dc.setColor(Graphics.COLOR_RED, 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 {}

}

You may want to change the code so that the highlight rectangle is white or something.

7643321 over 4 years ago in reply to flowstate

So now I see we didn't understand each other.

I thought:

SA = blue color

SU = red color

Other days, for example, green...

flowstate over 4 years ago in reply to 7643321

Sorry, again I based my code on your initial guess:

if(dayOfWeekNumber == ("6") || dayOfWeekNumber == ("7")) {
                       name.setColor(Graphics.COLOR_BLUE);
                   } else {
                       name.setColor(Graphics.COLOR_RED);
                   }

and not what you said in your post. Again, my bad.

If you want the freedom to specify a different color for potentially every day of the week, try this:

    // 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); 
    }

7643321 over 4 years ago in reply to flowstate

That's exactly it, but I don't know where to put the code now?

function highlightDay(dc, localDate){
        
        var dayOfWeekNumber = Time.Gregorian.info(localDate, Time.FORMAT_SHORT).day_of_week - 1; //week starts on Sunday, not Monday
        if (dayOfWeekNumber == 0) {
               dayOfWeekNumber = 7;
         
        
        }