개요

IoT 기기의 정보를 표시하는 경우 등으로, 「액체의 양」을 표현하고 싶은 경우가 있을까 생각합니다.
그냥 어딘가에.



그래서 얼마 전 입문한 Ionic Framework를 사용하여 이런 느낌의 앱을 구현해 보았으므로 소개합니다! ٩( 'ω' )و

만든 샘플의 리포지토리는 다음과 같습니다.
kemokemo/d3LiquidGaugeApp

사용환경

이 기사에서 사용한 환경은 다음과 같습니다.

cli packages: (C:\Users\KemoKemo\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

System:

    Node : v8.10.0
    npm  : 5.6.0
    OS   : Windows 10

Misc:

    backend : pro

사용 라이브러리

ngx-d3-liquid-fill-gauge

D3

둘 다 BSD 3-Clause 라이센스입니다.

구현 절차

구현 해설에는 다음과 같은 내용이 포함됩니다.

Ionic 앱에 Component를 추가하고 사용하는 경우 작성 방법

만든 Component에 외부에서 값을 Input하는 방법

이러한 내용이 전혀 처음이거나, 「음, 이마이치 모르니(ΦωΦ)」라고 하는 분은 꼭 먼저 Josh Morony씨의 조작 동영상을 봐 주세요. 매우 이해하기 쉽고 추천합니다.

Custom Components in Ionic 2

YouTube - Custom Components in Ionic

라이브러리 설치

그럼 실제의 순서에 들어갑시다.
먼저 D3를 설치합니다.

npm install d3

ngx-d3-liquid-fill-gauge 는 README의 순서를 실시해도 아래 그림과 같이 ngx-d3-liquid-fill-gauge が見つかりません。 라는 에러가 나와 빌드할 수 없었기 때문에, component로서 카피해 사용하기로 했습니다.



※실제로는 여기의 Rev. c23ff7f의 모듈군을, Ionic 프로젝트의 src/components/ngx-d3-liquid-fill-gauge에 카피했습니다.



게다가 이번 샘플에서는, liquid-gauge 라는 명칭의 컴퍼넌트로 ngx-d3-liquid-fill-gauge 를 랩 했습니다. 애니메이션 등의 설정은 미리 liquid-gauge 내에 정의한 것을 사용해, 부모 화면에서는 수치 등 빈번하게 변경이 있는 것 같은 값만 입력해 사용하는 구조로 하고 싶었기 때문입니다.
src/app/app.module.ts 또한 다음과 같이 다시 작성합니다.

 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';

 import { MyApp } from './app.component';
-import { LiquidGaugeComponent } from '../components/liquid-gauge/liquid-gauge';
 import { HomePage } from '../pages/home/home';
+import { NgxD3LiquidFillGaugeComponent } from '../components/ngx-d3-liquid-fill-gauge/ngx-d3-liquid-fill-gauge.component';
+import { LiquidGaugeComponent } from '../components/liquid-gauge/liquid-gauge';

 @NgModule({
   declarations: [
     MyApp,
-    LiquidGaugeComponent,
-    HomePage
+    HomePage,
+    NgxD3LiquidFillGaugeComponent,
+    LiquidGaugeComponent
   ],
   imports: [
     BrowserModule,

그리고는 template에 app-ngx-d3-liquid-fill-gauge를 추기하면 표시할 수 있습니다.

liquid-gauge.html

<b>Default Parameters</b>
<app-ngx-d3-liquid-fill-gauge></app-ngx-d3-liquid-fill-gauge>

값을 상위 화면에서 전달

src/components/liquid-gauge/liquid-gauge.ts에서 Input를 사용할 수 있습니다.

-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';

마찬가지로 liquid-gauge.ts에 다음을 추가합니다. name 및 value라는 이름으로 외부에서 입력할 수 있습니다.

 export class LiquidGaugeComponent {

-  text: string;
+  @Input('name') name;
+  @Input('value') value;

   constructor() {
     console.log('Hello LiquidGaugeComponent Component');
-    this.text = 'Hello World';
+  }

상위 화면인 src/pages/home/home.html 에는 다음과 같은 변경을 했습니다.[name]에서 LiquidGaugeComponent의 name를 지정하고 "name01" 등에서 src/pages/home/home.ts의 속성을 참조합니다. 이것은 부모 화면의 home에서 liquid-gauge로 name과 value를 전달합니다.

 <ion-content padding>
-  <liquid-gauge></liquid-gauge>
+  <liquid-gauge [name]="name01" [value]="value01" ></liquid-gauge>
+  <liquid-gauge [name]="name02" [value]="value02" ></liquid-gauge>
+  <liquid-gauge [name]="name03" [value]="value03" ></liquid-gauge>
 </ion-content>

src/pages/home/home.ts는 liquid-gauge에 전달할 매개 변수를 다음과 같이 정의했습니다.

export class HomePage {

+  name01: string = "Something 01";
+  value01: number = 0.0;
+
+  name02: string = "Something 02";
+  value02: number = 28.7;
+
+  name03: string = "Something 03";
+  value03: number = 65.1;
+
   constructor(public navCtrl: NavController) {

   }

ionic-lab 화면에서 확인

다음 명령을 실행하면 기본 브라우저가 시작되고 화면을 확인할 수 있습니다.
기본 URL은 http://localhost:8100입니다.

ionic serve

모처럼이므로 크로스 플랫폼감을 맛보고 싶다! ٩( 'ω' )و
그러면 브라우저에서 http://localhost:8100/ionic-lab를 열면 처음과 같은 화면을 볼 수 있습니다.

감사의 말

놀라운 라이브러리 D3 Liquid Fill Gauge를 공개해 주신 Curtis Bratton 씨, 그런 멋진 D3 Liquid Fill Gauge를 Angular Component로 TypeScript로 구현하고 ngx-d3-liquid-fill-gauge로 공개해 주셨습니다 adedayo 빌려 주셔서 감사합니다! m(_ _)m

그리고 나에게 멋진 Ionic Framework와의 만남을 주신 양서Ionic으로 만들기 모바일 앱 제작 입문의 저자인 사카키하라씨에게도 감사드립니다! m(_ _)m

Ionic으로 바삭 바삭한 앱을 만드는 것이 재미 있습니다