cmer4

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  message: string = "Hi Sergey";

cmer4

// declared vars we need:
var exploding, mainSVG, layers, segment;

// wrote init function, which is triggered by window.onload (below):
function init() {
  // capture reference (cache) our main SVG element:
  mainSVG = document.getElementsByTagName("svg")[0];
  // cache SVG element children (hopefully shapes and paths and groups)
  layers = mainSVG.children;
  // define "segment", this is used to define how far away given our SVG's viewbox our layers should distribute themselves:

cmer4

<svg>

<path ... />
<path ... />

<g>
    <path ... />
    <path ... />
    <path ... />
</g>

cmer4

cmer4

loadImageFromDevice(event) {
      if (!event.target.files[0]) return;
      let file = event.target.files[0];
      //read as blob and create local object URL for it:
      let blobReader = new FileReader();
      blobReader.readAsArrayBuffer(file);
      blobReader.onload = () => {
        let blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
        let blobURL = URL.createObjectURL(blob);
      };

cmer4

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html'
})
export class HomePage {
  public colors: Array<string>;
  public currentColor: string;
  constructor(public alertController: AlertController) {}

cmer4

<ion-item>
  <ion-label>Hair Color</ion-label>
  <ion-select #mySelect [value]="currentColor" [selectedText]="currentColor" (ionChange)="selectChanged(mySelect.value)">
    <ion-select-option *ngFor="let color of colors" [selected]="color === currentColor">{{ color }}</ion-select-option>
  </ion-select>
</ion-item>

cmer4

<month-picker (monthRangeSelected)="logRange($event)"></month-picker>

cmer4

<ion-header class="ion-padding-top">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/canvas"></ion-back-button>
    </ion-buttons>
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>

cmer4

<ion-header>
  <ion-toolbar>
    <ion-title>
      Shape Generator
    </ion-title>
  </ion-toolbar>
</ion-header>


<svg width="100%" height="100%" viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg"