From 15d79284396267cae0c9212add5560f5f4bf656a Mon Sep 17 00:00:00 2001 From: Gundersen Date: Tue, 1 Mar 2022 10:16:58 -0600 Subject: [PATCH] camera and sign components, submit code --- src/app/app.module.ts | 4 +++ src/app/camera.component.ts | 58 ++++++++++++++++++++++++++++++ src/app/form.component.ts | 36 ++++++++++++++++--- src/app/sign.component.ts | 72 +++++++++++++++++++++++++++++++++++++ src/app/step.component.ts | 14 ++++++++ src/assets/forms.ts | 30 +++++++++++++--- src/styles.css | 17 +++++++-- 7 files changed, 220 insertions(+), 11 deletions(-) create mode 100644 src/app/camera.component.ts create mode 100644 src/app/sign.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b79eb98..8c3f74e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,8 @@ import { FormComponent } from './form.component'; import { TextComponent } from './text.component'; import { RadioComponent } from './radio.component'; import { StepComponent } from './step.component'; +import { CameraComponent } from './camera.component'; +import { SignComponent } from './sign.component'; @NgModule({ declarations: [ @@ -15,6 +17,8 @@ import { StepComponent } from './step.component'; TextComponent, RadioComponent, StepComponent, + CameraComponent, + SignComponent, ], imports: [ BrowserModule, diff --git a/src/app/camera.component.ts b/src/app/camera.component.ts new file mode 100644 index 0000000..975a293 --- /dev/null +++ b/src/app/camera.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-camera', + template: ` +
+ + + + + + + +
+ ` +}) +export class CameraComponent implements OnInit { + + @Input() field: Field; + @Output() update: EventEmitter = new EventEmitter(); + + video: HTMLVideoElement; + + ngOnInit() { console.log("Smile!"); } + + ngAfterViewInit() { + + this.video = document.getElementById("video") as HTMLVideoElement; + + navigator.mediaDevices.getUserMedia({video: true, audio: false}) + + .then((stream) => { + this.video.srcObject = stream; + this.video.play(); + + }); + + } + + capture() { + + const canvas = document.createElement("canvas") as HTMLCanvasElement; + + canvas.width = this.video.videoWidth; + canvas.height = this.video.videoHeight; + + canvas + .getContext("2d") + .drawImage(this.video, 0, 0, canvas.width, canvas.height); + + this.field.ok = true; + this.field.value = canvas.toDataURL(); + + this.update.emit(); + + } + +} diff --git a/src/app/form.component.ts b/src/app/form.component.ts index 699009d..715719e 100644 --- a/src/app/form.component.ts +++ b/src/app/form.component.ts @@ -15,6 +15,7 @@ import { Component, OnInit, Input } from '@angular/core'; > + + + ` +}) +export class SignComponent implements OnInit { + + @Input() field: Field; + @Output() update: EventEmitter = new EventEmitter(); + + pad: HTMLCanvasElement; + + ngOnInit() { console.log("Sign your name!"); } + + ngAfterViewInit() { + + this.pad = document.getElementById("pad") as HTMLCanvasElement; + + const ctx = this.pad.getContext('2d'); + + this.pad.width = 300; + this.pad.height = 100; + + ctx.lineWidth = 3; + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + + let active, cursor; + + this.pad.onmousedown = (e) => { + active = true; + cursor = { x: e.offsetX, y: e.offsetY }; + } + + this.pad.onmousemove = (e) => { + if (active) { + ctx.beginPath(); + ctx.moveTo(cursor.x, cursor.y); + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + cursor = { x: e.offsetX, y: e.offsetY }; + } + } + + this.pad.onmouseup = (_e) => { + active = false; + this.field.value = this.pad.toDataURL(); + this.field.ok = true; + this.update.emit(); + }; + + } + + clear() { + + this.pad.getContext('2d').clearRect(0, 0, this.pad.width, this.pad.height); + this.field.value = null; + this.field.ok = false; + this.update.emit(); + + }; + +} diff --git a/src/app/step.component.ts b/src/app/step.component.ts index 1cdaa91..8e16b4a 100644 --- a/src/app/step.component.ts +++ b/src/app/step.component.ts @@ -23,6 +23,20 @@ import { Component, OnInit, Input } from '@angular/core'; > + + + + diff --git a/src/assets/forms.ts b/src/assets/forms.ts index 0dbe1b1..0c957c4 100644 --- a/src/assets/forms.ts +++ b/src/assets/forms.ts @@ -35,6 +35,28 @@ export const checkout: Form = { options: { choices: ["mouse", "keyboard", "monitor", "chair"] } }] }, + { + ok: false, + prompt: "Take a photo.", + fields: [{ + ok: false, + type: "camera", + id: "photo", + value: null, + options: null + }] + }, + { + ok: false, + prompt: "Sign your name.", + fields: [{ + ok: false, + type: "sign", + id: "signiture", + value: null, + options: null + }] + }, { ok: false, prompt: "Would you like a confirmation email?", @@ -81,13 +103,13 @@ export const checkin: Form = { }, { ok: false, - prompt: "Would you like a confirmation email?", + prompt: "Sign your name.", fields: [{ ok: false, - type: "radio", - id: "confirmation", + type: "sign", + id: "signiture", value: null, - options: { choices: ["yes", "no"] } + options: null }] }] diff --git a/src/styles.css b/src/styles.css index 9f41362..51cf013 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,5 +1,18 @@ +.bar { + pointer-events: none; +} + .active { pointer-events: auto; - color: blue; border-color: blue; -} \ No newline at end of file + color: blue; +} + +video, img { + width: 100px; +} + +#pad { + background-color: white; + border: 2px solid black; +}