Skip to content

Instantly share code, notes, and snippets.

@m4r10k

m4r10k/MagnumPIChronosportView.mc

Created August 25, 2021 11:36
Show Gist options
  • Save m4r10k/0f919ee72b971ba52cd5c487233220a6 to your computer and use it in GitHub Desktop.
Save m4r10k/0f919ee72b971ba52cd5c487233220a6 to your computer and use it in GitHub Desktop.
Download ZIP
MagnumPI Chronosport Sea Quartz 30 Garmin Vivoactive
Raw
MagnumPIChronosportView.mc
import Toybox.Application;
import Toybox.Graphics;
import Toybox.Lang;
import Toybox.System;
import Toybox.WatchUi;
using Toybox.Graphics as Gfx;
using Toybox.Lang as Lang;
using Toybox.Math as Math;
using Toybox.System as Sys;
using Toybox.Time as Time;
using Toybox.Time.Gregorian as Calendar;
using Toybox.WatchUi as Ui;
using Toybox.ActivityMonitor as Act;
class MagnumPIChronosportView extends WatchUi.WatchFace {
var center_y;
var center_x;
var height;
var width;
//load custom font globally
var icon_font = Ui.loadResource( Rez.Fonts.icon_font);
function initialize() {
WatchFace.initialize();
}
// Load your resources here
function onLayout(dc){
width = dc.getWidth();
height = dc.getHeight();
center_x = dc.getWidth() / 2;
center_y = dc.getHeight() / 2;
}
// 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) {
dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_WHITE);
dc.fillRectangle(0, 0, dc.getWidth(), dc.getHeight());
drawHashMarks(dc);
drawDisplays(dc);
//drawHands(dc);
drawChronoHands(dc);
}
// Called when this View is removed from the screen. Save the
// state of this View here. This includes freeing resources from
// memory.
function onHide(){
}
// The user has just looked at their watch. Timers and animations may be started here.
function onExitSleep(){
}
// Terminate any active timers and prepare for slow updates.
function onEnterSleep(){
}
// Draw the hash mark symbols on the watch-------------------------------------------------------
function drawHashMarks(dc) {
var n;
var alpha, r1, r2;
// every minute
dc.setPenWidth(3);
dc.setColor(Gfx.COLOR_DK_GREEN, Gfx.COLOR_TRANSPARENT);
r1 = width/2 - 10; //inside
r2 = width/2 ; //outside
for (alpha = Math.PI / 6; alpha <= 13 * Math.PI / 6; alpha += (Math.PI / 30)) { //jede Minute
dc.drawLine(center_x+r1*Math.sin(alpha),center_y-r1*Math.cos(alpha), center_x+r2*Math.sin(alpha),center_y-r2*Math.cos(alpha));
}
// ever 5 minutes bright green marks
dc.setPenWidth(3);
dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
r1 = width/2 - 10;
r2 = width/2 ; //outside
//for (var alpha = Math.PI / 6; alpha <= 13 * Math.PI / 6; alpha += (Math.PI / 30)) { //jede Minute
for (alpha = Math.PI / 6; alpha <= 11 * Math.PI / 6; alpha += (Math.PI / 3)) { //jede 5. Minute
dc.drawLine(center_x+r1*Math.sin(alpha),center_y-r1*Math.cos(alpha), center_x+r2*Math.sin(alpha),center_y-r2*Math.cos(alpha));
alpha += Math.PI / 6;
dc.drawLine(center_x+r1*Math.sin(alpha),center_y-r1*Math.cos(alpha), center_x+r2*Math.sin(alpha),center_y-r2*Math.cos(alpha));
}
// ever 5 minutes draw special inner marks
dc.setPenWidth(3);
dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
r1 = width/2 - 40; // inside
r2 = width/2 - 15; //outside
for (alpha = Math.PI / 6; alpha <= 11 * Math.PI / 6; alpha += (Math.PI / 3)) { //jede 5. Minute
var alpha_correction = (Math.PI / 180) * 4;
dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
var arrow = [ [center_x+r1*Math.sin(alpha - alpha_correction), center_y-r1*Math.cos(alpha - alpha_correction)],
[center_x+r1*Math.sin(alpha + alpha_correction), center_y-r1*Math.cos(alpha + alpha_correction)],
[center_x+r2*Math.sin(alpha + alpha_correction), center_y-r2*Math.cos(alpha + alpha_correction)],
[center_x+r2*Math.sin(alpha - alpha_correction), center_y-r2*Math.cos(alpha - alpha_correction)]
];
dc.fillPolygon(arrow);
alpha += Math.PI / 6;
arrow = [ [center_x+r1*Math.sin(alpha - alpha_correction), center_y-r1*Math.cos(alpha - alpha_correction)],
[center_x+r1*Math.sin(alpha + alpha_correction), center_y-r1*Math.cos(alpha + alpha_correction)],
[center_x+r2*Math.sin(alpha + alpha_correction), center_y-r2*Math.cos(alpha + alpha_correction)],
[center_x+r2*Math.sin(alpha - alpha_correction), center_y-r2*Math.cos(alpha - alpha_correction)]
];
dc.fillPolygon(arrow);
}
}
function drawDisplays(dc) {
dc.setPenWidth(1);
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
// draw the date rectangle
dc.drawRectangle(center_x + 30, center_y - 13, 70, 26);
// draw the date as text
var today = Calendar.info(Time.now(), Time.FORMAT_MEDIUM);
// Sys.println(today.day_of_week);
dc.drawText(center_x + 30 + 3, center_y - 13, Gfx.FONT_XTINY, today.day_of_week.toUpper(), Gfx.TEXT_JUSTIFY_LEFT);
dc.drawText(center_x + 100 - 3, center_y - 13, Gfx.FONT_XTINY, today.day, Gfx.TEXT_JUSTIFY_RIGHT);
// draw the logo
var chronosport_logo = Application.loadResource( Rez.Drawables.ChronosportIcon2 ) as BitmapResource;
dc.drawBitmap(center_x - 54, center_y - 75, chronosport_logo );
// draw twelve
var twelve = Application.loadResource( Rez.Drawables.Twelve ) as BitmapResource;
dc.drawBitmap(center_x - 16, center_y - width/2 + 15, twelve );
// draw nine
var nine = Application.loadResource( Rez.Drawables.Nine ) as BitmapResource;
dc.drawBitmap(center_x - width/2 + 15, center_y - 12, nine );
// draw six
var six = Application.loadResource( Rez.Drawables.Six ) as BitmapResource;
dc.drawBitmap(center_x - 12, center_y + width/2 - 15 - 25, six );
// draw BT indicator
if (Sys.getDeviceSettings().phoneConnected) {
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
//dc.drawText(center_x - 30, center_y - 65, icon_font, "8", Gfx.TEXT_JUSTIFY_CENTER);
} else {
dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT);
//dc.drawText(center_x - 30, center_y - 65, icon_font, "8", Gfx.TEXT_JUSTIFY_CENTER);
// dc.drawText(center_x - 15, center_y - 75, icon_font, "e", Gfx.TEXT_JUSTIFY_CENTER);
}
dc.fillCircle(center_x - 70, center_y - 70, 5);
// draw MESSAGE indicator
var notification_cnt = Sys.getDeviceSettings().notificationCount;
if (notification_cnt > 0) {
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawText(center_x + 65, center_y - 80, Gfx.FONT_XTINY, notification_cnt, Gfx.TEXT_JUSTIFY_CENTER);
//dc.drawText(center_x + 30, center_y - 60, icon_font, "5", Gfx.TEXT_JUSTIFY_CENTER);
} else {
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawText(center_x + 65, center_y - 80, Gfx.FONT_XTINY, "0", Gfx.TEXT_JUSTIFY_CENTER);
//dc.drawText(center_x + 30, center_y - 60, icon_font, "5", Gfx.TEXT_JUSTIFY_CENTER);
}
// draw step count
// get ActivityMonitor info
var info = ActivityMonitor.getInfo();
var steps = info.steps;
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawText(center_x, center_y + 35, Gfx.FONT_XTINY, steps, Gfx.TEXT_JUSTIFY_CENTER);
// draw battery status
var myStats = System.getSystemStats();
var charge = myStats.battery.toNumber() + "%";
if (myStats.charging){
charge = charge + "+";
}
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawText(center_x - 75, center_y - 13, Gfx.FONT_XTINY, charge, Gfx.TEXT_JUSTIFY_LEFT);
}
function drawChronoHands(dc) {
var clockTime = Sys.getClockTime();
var minute_rad = 2 * Math.PI / 60 * clockTime.min;
var minute_radius = 7/8.0 * center_x;
var hour_rad = 2 * Math.PI / 12 * clockTime.hour;
// correct the rad for the ratio of an hour
hour_rad = hour_rad + Math.PI / 6 / 60 * clockTime.min;
var hour_radius = 4/8.0 * center_x;
Sys.println("Minute Rad: " + minute_rad);
Sys.println("Hour Rad: " + hour_rad);
// draw a hour line
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.drawLine(center_x, center_y, center_x + hour_radius * Math.sin(hour_rad), center_y - hour_radius * Math.cos(hour_rad));
// hour handle filled
var hour_handle = [
[center_x + 30 * Math.sin(hour_rad + 0.15), center_y - 30 * Math.cos(hour_rad + 0.15)],
[center_x + (minute_radius - 30) * Math.sin(hour_rad + 0.05), center_y - (minute_radius - 30) * Math.cos(hour_rad + 0.05)],
[center_x + (minute_radius - 30) * Math.sin(hour_rad - 0.05), center_y - (minute_radius - 30) * Math.cos(hour_rad - 0.05)],
[center_x + 30 * Math.sin(hour_rad - 0.15), center_y - 30 * Math.cos(hour_rad - 0.15)]
];
dc.fillPolygon(hour_handle);
// hour handle inlay
dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
var hour_handle_inlay = [
[center_x + 35 * Math.sin(hour_rad + 0.07), center_y - 35 * Math.cos(hour_rad + 0.07)],
[center_x + (minute_radius - 35) * Math.sin(hour_rad + 0.02), center_y - (minute_radius - 35) * Math.cos(hour_rad + 0.02)],
[center_x + (minute_radius - 35) * Math.sin(hour_rad - 0.02), center_y - (minute_radius - 35) * Math.cos(hour_rad - 0.02)],
[center_x + 35 * Math.sin(hour_rad - 0.07), center_y - 35 * Math.cos(hour_rad - 0.07)]
];
dc.fillPolygon(hour_handle_inlay);
// --------------------------------------------------------------
// draw a minute line
dc.setColor(Gfx.COLOR_DK_RED, Gfx.COLOR_TRANSPARENT);
dc.drawLine(center_x, center_y, center_x + minute_radius * Math.sin(minute_rad), center_y - minute_radius * Math.cos(minute_rad));
//////dc.drawLine(center_x - 20 * Math.sin(minute_rad - 0.2), center_y + 20 * Math.cos(minute_rad - 0.2), center_x + minute_radius * Math.sin(minute_rad + 0.05), center_y - minute_radius * Math.cos(minute_rad + 0.05));
dc.drawLine(center_x - 20 * Math.sin(minute_rad - 0.22), center_y + 20 * Math.cos(minute_rad - 0.22), center_x + (minute_radius - 5) * Math.sin(minute_rad + 0.05), center_y - (minute_radius - 5) * Math.cos(minute_rad + 0.05));
dc.drawLine(center_x - 20 * Math.sin(minute_rad + 0.22), center_y + 20 * Math.cos(minute_rad + 0.22), center_x + (minute_radius - 5) * Math.sin(minute_rad - 0.05), center_y - (minute_radius - 5) * Math.cos(minute_rad - 0.05));
// minute handle filled
var minute_handle = [
[center_x - 20 * Math.sin(minute_rad - 0.22), center_y + 20 * Math.cos(minute_rad - 0.22)],
[center_x + (minute_radius - 5) * Math.sin(minute_rad + 0.05), center_y - (minute_radius - 5) * Math.cos(minute_rad + 0.05)],
[center_x + minute_radius * Math.sin(minute_rad), center_y - minute_radius * Math.cos(minute_rad)],
[center_x + (minute_radius - 5) * Math.sin(minute_rad - 0.05), center_y - (minute_radius - 5) * Math.cos(minute_rad - 0.05)],
[center_x - 20 * Math.sin(minute_rad + 0.22), center_y + 20 * Math.cos(minute_rad + 0.22)]
];
dc.fillPolygon(minute_handle);
// minute handle inlay
dc.setColor(Gfx.COLOR_GREEN, Gfx.COLOR_TRANSPARENT);
var minute_handle_inlay = [
[center_x + 10 * Math.sin(minute_rad + 0.22), center_y - 10 * Math.cos(minute_rad + 0.22)],
[center_x + (minute_radius - 5) * Math.sin(minute_rad + 0.02), center_y - (minute_radius - 5) * Math.cos(minute_rad + 0.02)],
[center_x + (minute_radius - 5) * Math.sin(minute_rad - 0.02), center_y - (minute_radius - 5) * Math.cos(minute_rad - 0.02)],
[center_x + 10 * Math.sin(minute_rad - 0.22), center_y - 10 * Math.cos(minute_rad - 0.22)]
];
dc.fillPolygon(minute_handle_inlay);
// dc.drawLine(center_x + 5, center_y - 5, center_x + minute_radius * Math.sin(minute_rad - 0.05), center_y - minute_radius * Math.cos(minute_rad - 0.05));
// draw the center point
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.fillCircle(center_x, center_y, 7);
}
function drawHands(dc) {
var center_x;
var center_y;
var width = dc.getWidth();
var height = dc.getHeight();
center_x = dc.getWidth() / 2;
center_y = dc.getHeight() / 2;
var clockTime;
var screenShape = 1;
// the length of the minute hand
var minute_radius = 0;
// the length of the hour hand
var hour_radius;
// the minute hand to be 7/8 the length of the radius
screenShape = Sys.getDeviceSettings().screenShape;
if (screenShape == 1) { // round
minute_radius = 7/8.0 * center_x;
}
if (screenShape == 2) { // semi round
minute_radius = 7/8.0 * center_x -5;
}
// the hour hand to be 2/3 the length of the minute hand
hour_radius = 3/4.0 * minute_radius;
var x, n;
var maxRad;
var alpha, alpha2;
var r0, r1, r2, r3, r4, r5, r6, r7, hand, hand1;
var deflec1, deflec2, deflec3;
clockTime = Sys.getClockTime();
alpha = Math.PI/6*(1.0*clockTime.hour+clockTime.min/60.0);
alpha2 = Math.PI/6*(1.0*clockTime.hour-3+clockTime.min/60.0);
maxRad = hour_radius;
deflec1 = 0.2;
deflec2 = 0.05; //Tip
for (x=0; x<2; x++) {
hand = [[center_x-20*Math.sin(alpha-deflec1),center_y+20*Math.cos(alpha-deflec1)],
[center_x-20*Math.sin(alpha+deflec1),center_y+20*Math.cos(alpha+deflec1)],
[center_x+maxRad*Math.sin(alpha-deflec2),center_y-maxRad*Math.cos(alpha-deflec2)],
[center_x+maxRad*Math.sin(alpha+deflec2),center_y-maxRad*Math.cos(alpha+deflec2)]];
dc.setColor(Gfx.COLOR_DK_RED, Gfx.COLOR_TRANSPARENT);
dc.fillPolygon(hand);
dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_TRANSPARENT);
dc.setPenWidth(2);
for (n=0; n<3; n++) {
dc.drawLine(hand[n][0], hand[n][1], hand[n+1][0], hand[n+1][1]);
}
dc.drawLine(hand[n][0], hand[n][1], hand[0][0], hand[0][1]);
//! minutes--------------
alpha = Math.PI/30.0*clockTime.min;
alpha2 = Math.PI/30.0*(clockTime.min-15);
maxRad = minute_radius;
deflec1 = 0.2;
deflec2 = 0.04; //Tip
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment