Development - mike-denton/GBC-Navigation-Application GitHub Wiki

Running the Project

Required Packages

  • npm install -g @angular/cli

ANGULAR PACKAGE - IMPORTANT NOTE:

Other versions with Angular provided issues with building and running during development. To prevent this, copy and paste the following into your package.json:

  • "@angular-devkit/architect": "~0.801.2"
  • "@angular-devkit/build-angular": "^0.801.2"
  • npm install -g ionic
  • npm install -g native-run
  • npm install -g cordova

To Build and Run on Mobile Devices

  • ionic cordova run android
  • ionic cordova run ios

ANDROID and IOS - IMPORTANT NOTE:

Requirements to work with Android Devices:

Requirements to work with IOS Devices:

To check if IOS and Android requirements are met:

  • ionic cordova requirements android
  • ionic cordova requirements ios

Developing on the web

  • ionic serve

HTML Canvas

Angular was used to create the prototype, later Ionic was integrated for cross-platform mobile development

Code Overview

<!-- example taken from the c-building-floor2.page.html-->

<!-- place image within canvas -->
<img
   id="floor"
   #image
   class="img"
   draggable="false"
   src="assets/images/cBuildingFloor2.png"
   alt="C Building Second Floor"
   usemap="#cBuildingFloor2-map"
  (load)="handleMouseMove();handleMapResize()"
/>

<!-- portion of the map -->
<map name="cBuildingFloor2-map" id="map_id" #areaMap>

<!-- to display the map -->
<canvas id="mapCanvas" #canvasEl width="839" height="651"></canvas>

Every HTML page has this similar portions of this code, this must be consistent with others to prevent other issues.

Every .ts file has the following code, copy/paste these if needed and end of the file and remove when updating the app

// builds a co-ordinate list and display on screen ** debugging
public handleMouseMove() {
   var img = document.getElementById("floor");
   var coords = document.getElementById("coords");
   img.addEventListener("mousemove", function(event) {
     console.log("mouse move");
     coords.innerHTML = "x: " + event.offsetX + " y: " + event.offsetY;
   });
}

This code displays the X,Y coordinates on top of the header to easily draw the paths.

  // onload, scales the map area cor-ordinates based on screen width
  public handleMapResize() {
    var ImageMap = function(map) {
        console.log("scaling area maps..");
        var n,
          areas = map.getElementsByTagName("area"),
          len = areas.length,
          coords = [],
            previousWidth = window.innerWidth // image original width replace with window.innerWidth when working on desktop
        for (n = 0; n < len; n++) {
          coords[n] = areas[n].coords.split(",");
        }
        this.resize = function() {
          var n,
            m,
            clen,
            x = document.body.clientWidth / previousWidth;
          for (n = 0; n < len; n++) {
            clen = coords[n].length;
            for (m = 0; m < clen; m++) {
              coords[n][m] *= x;
            }
            areas[n].coords = coords[n].join(",");
          }
          previousWidth = document.body.clientWidth;
          return true;
        };
        window.onresize = this.resize;
      },
      imageMap = new ImageMap(document.getElementById("map_id"));
    imageMap.resize();
  }

Resizes the image based on the canvas size, avoid modifying.

previousWidth = 839 // image original width replace with window.innerWidth when working on desktop

It is important to note that whether working on Desktop or Mobile to replace otherwise screen interaction will not properly work

Programmatically Styling

NOTE: Debug through browser console to determine element id, tag-name, etc

Issues with styling Ionic picker elements without its HTML counterpart will be required programmatically styled elements by retrieving its tag name and indices depending on the case

// code from home.page.ts 
// within function async dBuildingFloorsPicker()

   let picker = await this.pickerCtrl.create(floors);
   picker.present();
   setTimeout(function () {
     document.getElementsByTagName("button")[3].disabled = true;
     document.getElementsByTagName("button")[5].disabled = true;
     document.getElementsByTagName("button")[3].style.color = "grey";
     document.getElementsByTagName("button")[5].style.color = "grey";
   }, 0);

A setTimeout function enables the styling before/after loading the Ionic element

Emulators

Compiling the final Product

⚠️ **GitHub.com Fallback** ⚠️