watch app v1.0 now working

* Next steps: implement the api usage

src/directions_draw.c

@@ -0,0 +1,120 @@
+#include "directions_draw.h"
+
+
+#define SQUARE_CELL_HEIGHT_SUMMARY 64
+#define SQUARE_CELL_HEIGHT_STEP 122
+
+// Work out the height of each cell
+int16_t directions_get_cell_height(int16_t window_height, int16_t cell_index) {
+  // Round watches paginate!
+  #ifdef PBL_ROUND
+    return window_height;
+  #endif
+  // Square watches scroll!
+  switch (cell_index) {
+    case 0:
+      return SQUARE_CELL_HEIGHT_SUMMARY;
+      break;
+    default:
+      return SQUARE_CELL_HEIGHT_STEP;
+  }
+}
+
+// Draw the title card
+void directions_draw_summary(GContext *ctx, GRect bounds, GColor color, int distance, int time) {
+  // Get the strings
+  char string_distance[10];
+  char string_time[10];
+  snprintf(string_distance, sizeof(string_distance), "%i m", distance);
+  snprintf(string_time, sizeof(string_time), "%i min", time);
+  // Get the colors
+  #ifdef PBL_COLOR
+    GColor color_secondary = GColorDarkGray;
+  #else
+    GColor color_secondary = GColorWhite;
+    color = GColorBlack;
+  #endif
+  // Draw the background
+  graphics_context_set_fill_color(ctx, color);
+  graphics_fill_rect(ctx, bounds, 0, GCornerNone);
+
+  #ifdef PBL_ROUND
+    // ************
+    // * Round UI *
+    // ************
+    // Outside ring
+    graphics_context_set_fill_color(ctx, GColorWhite);
+    graphics_fill_radial(ctx, bounds, GOvalScaleModeFitCircle, 30, 0, TRIG_MAX_ANGLE);
+    // Time
+    GRect time_box = GRect(4, (bounds.size.h - 46) / 2, bounds.size.w - 8, 28);
+    graphics_context_set_text_color(ctx, GColorWhite);
+    graphics_draw_text(ctx, string_time, fonts_get_system_font(FONT_KEY_GOTHIC_28_BOLD), time_box, GTextOverflowModeWordWrap, GTextAlignmentCenter, NULL);
+    // Distance
+    GRect distance_box = GRect(4, (bounds.size.h - 46) / 2 + time_box.size.h, bounds.size.w - 8, 18);
+    graphics_context_set_text_color(ctx, color_secondary);
+    graphics_draw_text(ctx, string_distance, fonts_get_system_font(FONT_KEY_GOTHIC_18_BOLD), distance_box, GTextOverflowModeWordWrap, GTextAlignmentCenter, NULL);
+  #else
+    // *************
+    // * Square UI *
+    // *************
+    // Time
+    GRect time_box = GRect(7, 5, bounds.size.w - 14, 28);
+    graphics_context_set_text_color(ctx, GColorWhite);
+    graphics_draw_text(ctx, string_time, fonts_get_system_font(FONT_KEY_GOTHIC_28_BOLD), time_box, GTextOverflowModeWordWrap, GTextAlignmentLeft, NULL);
+    // Distance
+    GRect distance_box = GRect(7, time_box.size.h + 5, bounds.size.w - 14, 18);
+    graphics_context_set_text_color(ctx, color_secondary);
+    graphics_draw_text(ctx, string_distance, fonts_get_system_font(FONT_KEY_GOTHIC_18_BOLD), distance_box, GTextOverflowModeWordWrap, GTextAlignmentLeft, NULL);
+  #endif
+}
+
+// Draw a step
+void directions_draw_step(GContext *ctx, GRect bounds, GColor color, char *text, int16_t data_index, int16_t data_count) {
+  // Get the colors
+  #ifdef PBL_COLOR
+    GColor color_text = GColorDarkGray;
+  #else
+    GColor color_text = GColorBlack;
+    color = GColorBlack;
+  #endif
+  // Draw the background
+  graphics_context_set_fill_color(ctx, GColorWhite);
+  graphics_fill_rect(ctx, bounds, 0, GCornerNone);
+
+  #ifdef PBL_ROUND
+    // ************
+    // * Round UI *
+    // ************
+    // Draw text
+    GRect text_box = GRect(5, (bounds.size.w - 96) / 2, bounds.size.w - 10, 96);
+    GTextAttributes *text_attributes = graphics_text_attributes_create();
+    graphics_text_attributes_enable_screen_text_flow(text_attributes, 5);
+    graphics_context_set_text_color(ctx, color_text);
+    graphics_draw_text(ctx, text, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD), text_box, GTextOverflowModeTrailingEllipsis, GTextAlignmentCenter, text_attributes);
+    graphics_text_attributes_destroy(text_attributes);
+    // Draw more indicators
+    graphics_context_set_fill_color(ctx, color);
+    if (data_index < data_count - 1) {
+      // Bottom
+      graphics_fill_circle(ctx, GPoint(bounds.size.w / 2, bounds.size.h), 8);
+    }
+    if (data_index > 0) {
+      // Top
+      graphics_fill_circle(ctx, GPoint(bounds.size.w / 2, 0), 8);
+    }
+  #else
+    // *************
+    // * Square UI *
+    // *************
+    // Draw text
+    GRect text_box = GRect(7, 3, bounds.size.w - 14, bounds.size.h - 6);
+    graphics_context_set_text_color(ctx, color_text);
+    graphics_draw_text(ctx, text, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD), text_box, GTextOverflowModeTrailingEllipsis, GTextAlignmentLeft, NULL);
+    // Draw block-end indicator (if not last block)
+    if (data_index < data_count - 1) {
+      GRect line_box = GRect(7, text_box.size.h + 1, 40, 4);
+      graphics_context_set_fill_color(ctx, color);
+      graphics_fill_rect(ctx, line_box, 2, GCornersAll);
+    }
+  #endif
+}

src/directions_draw.h

@@ -0,0 +1,8 @@
+#pragma once
+#include <pebble.h>
+
+// Return the height of a cell (this groupes layout functions in one file)
+int16_t directions_get_cell_height(int16_t window_height, int16_t cell_index);
+// Draw cells
+void directions_draw_summary(GContext *ctx, GRect bounds, GColor color, int distance, int time);
+void directions_draw_step(GContext *ctx, GRect bounds, GColor color, char *text, int16_t data_index, int16_t data_count);

src/directions_window.c

@@ -1,9 +1,5 @@
-#include <pebble.h>
-#include "colors.h"
-#include "select_window.h"
 #include "directions_window.h"
-#include "error_window.h"
-#include "progress_layer.h"
+
 
 #define MAX_STEP_COUNT 20
 #define MAX_STEP_CHARS 128
@@ -57,47 +53,23 @@ static uint16_t get_num_rows_callback(struct MenuLayer *menu_layer, uint16_t sec
 }
 
 static int16_t get_cell_height_callback(struct MenuLayer *menu_layer, MenuIndex *cell_index, void *context) {
-  // This part is for round watches only
-  #ifdef PBL_ROUND
-    // Round
-    return window_height;
-  #endif
-  // Square fallback
-  return window_height / 2;
+  return directions_get_cell_height(window_height, cell_index->row);
 }
 
-// Draw menu cell callback TODO: use a custom ui
+// Draw menu cell callback
 static void draw_row_callback(GContext *ctx, const Layer *cell_layer, MenuIndex *cell_index, void *context) {
   // Determine what row to draw TODO: implement nicer UI
   switch (cell_index->row) {
     // Summary
     case 0:
-      // Store the display text
-
-      menu_cell_basic_draw(ctx, cell_layer, "11 min", "600 m", NULL);
+      directions_draw_summary(ctx, layer_get_bounds(cell_layer), selected_type_color, route_data->distance, route_data->time);
       break;
     // Step description
     default:
-      menu_cell_basic_draw(ctx, cell_layer, route_data->steps[cell_index->row - 1], "sub title", NULL);
+      directions_draw_step(ctx, layer_get_bounds(cell_layer), selected_type_color, route_data->steps[cell_index->row - 1], cell_index->row - 1, (int16_t)route_data->count);
   }
 }
 
-// FIXME: Will probably not be necessary later!
-static void selection_will_change_callback(struct MenuLayer *menu_layer, MenuIndex *new_index, MenuIndex old_index, void *context) {
-  // Change the highlight color
-  #ifdef PBL_COLOR
-    switch (new_index->row) {
-      // Initial summary
-      case 0:
-        menu_layer_set_highlight_colors(directions_list, selected_type_color, GColorWhite);
-        break;
-      // All other cells
-      default:
-        menu_layer_set_highlight_colors(directions_list, GColorWhite, selected_type_color);
-    }
-  #endif
-}
-
 
 // ***********************
 // * DICTATION API STUFF *
@@ -352,17 +324,13 @@ static void window_load() {
   directions_list = menu_layer_create(bounds);
   // Set the click event handles to the correct window
   menu_layer_set_click_config_onto_window(directions_list, window);
-  // If color, set the starting highlighted color
-  #ifdef PBL_COLOR
-    menu_layer_set_highlight_colors(directions_list, selected_type_color, GColorWhite);
-  #endif
+  menu_layer_set_highlight_colors(directions_list, GColorWhite, GColorBlack);
 
   // Define menu callbacks
   menu_layer_set_callbacks(directions_list, NULL, (MenuLayerCallbacks) {
     .get_num_rows = get_num_rows_callback,
     .get_cell_height = get_cell_height_callback,
     .draw_row = draw_row_callback,
-    .selection_will_change = selection_will_change_callback,
   });
 
   // Add the menu layer to the window

src/directions_window.h

@@ -1,6 +1,14 @@
 #pragma once
 #include <pebble.h>
 
+// Required functions
+#include "colors.h"
+#include "progress_layer.h"
+#include "directions_draw.h"
+// Required window interaction
+#include "select_window.h"
+#include "error_window.h"
+
 enum SelectedType {
   Car = 0,
   Bike = 1,

src/error_window.c

@@ -1,7 +1,6 @@
-#include <pebble.h>
-#include "colors.h"
 #include "error_window.h"
 
+
 // The main window
 static Window *window;
 static BitmapLayer *error_icon_layer;

src/error_window.h

@@ -1,6 +1,9 @@
 #pragma once
 #include <pebble.h>
 
+// Required functions
+#include "colors.h"
+
 enum ErrorType {
   // Problem connection to phone
   Network = 0,

src/js/app.js

@@ -81,11 +81,7 @@ function sendRoute(success, distance, time, stepList) {
     // Transmit
     Pebble.sendAppMessage(dict, function() {
       // Success!
-      setTimeout(function() {
-        // Some dummy loading time
       sendStepItem(stepList, 0);
-      }, 3000);
-      //sendStepItem(stepList, 0);
     }, function() {
       // Error
       console.log('Transmission failed at [OVERVIEW]');
@@ -104,8 +100,8 @@ function fetchAndSendRoute(routeType, destination) {
   /* dummy data: */
   setTimeout(function() {
     // Some dummy loading time
-    sendRoute(true, 560, 16, ['This is the first step', 'This is the second step', 'This is the third step', 'This is the final step', destination]);
-  }, 3000);
+    sendRoute(true, 560, 16, ['Head north on Morgan St toward W Cermak Rd', 'Head east on W Cermak Rd toward Brockhofweg', destination]);
+  }, 2000);
 }
 
 // Accept data from the pebble watch

src/progress_layer.c

@@ -1,6 +1,6 @@
-#include <pebble.h>
 #include "progress_layer.h"
 
+
 // Local state (used to ransfer the progress to the update proc)
 int16_t l_progress = 0;
 

src/select_window.c

@@ -1,7 +1,5 @@
-#include <pebble.h>
-#include "colors.h"
 #include "select_window.h"
-#include "directions_window.h"
+
 
 #define COLOR_FIRST COLOR_CAR
 

src/select_window.h

@@ -1,6 +1,11 @@
 #pragma once
 #include <pebble.h>
 
+// Required functions
+#include "colors.h"
+// Required window interactions
+#include "directions_window.h"
+
 #define NUM_TRANSIT_METHODS 4
 
 void select_window_push();