Merge pull request #39 from jim-hill-r/Release-1-1

Release 1 1

frontend/src/client/quasar.conf.js

@@ -102,9 +102,8 @@ module.exports = function (ctx) {
  short_name: 'Blue Eel',
  description: 'Learn to read',
  display: 'standalone',
- orientation: 'portrait',
- background_color: '#81d4fa',
- theme_color: '#b3e5fc',
+ background_color: '#178CA4',
+ theme_color: '#178CA4',
  icons: [
  {
  'src': 'statics/icons/icon-128x128.png',

frontend/src/client/src/components/EelCanvas.vue

@@ -1,8 +1,21 @@
 <template>
- <canvas style="touch-action:none;" touch-action="none" id="mainCanvas" ref="mainCanvas"></canvas>
+ <canvas
+ style="touch-action:none;"
+ touch-action="none"
+ id="mainCanvas"
+ ref="mainCanvas">
+ <!-- <q-resize-observer @resize="onResize" debounce="1200" /> -->
+ </canvas>
 </template>
 
 <script>
+import { dimensions, scale, move } from '../logic/path.js'
+
+const ASCENDER_RATIO = (5) / 85
+const CAPLINE_RATIO = (5) / 85
+const MEANLINE_RATIO = (5 + 25) / 85
+const BASELINE_RATIO = (5 + 25 + 25) / 85
+const BEARDLINE_RATIO = (5 + 25 + 25 + 25) / 85
 
 export default {
  name: 'EelCanvas',
@@ -17,50 +30,54 @@ export default {
  mounted: function () {
  this.canvas = this.$refs.mainCanvas
  this.context = this.canvas.getContext('2d')
- this.styleCanvas()
- this.configureCanvas()
+ this.configureListeners()
  this.clear()
  },
  methods: {
+ onResize () {
+ if (this.canvas) {
+ // this.configureSize()
+ }
+ },
  record () {
  this.recordedPoints = []
  this.isRecording = true
  },
  getRecording () {
  this.isRecording = false
  return {
- dimensions: {
- heightMM: this.heightInMM,
- heightPixels: this.canvas.height,
- widthPixels: this.canvas.width,
- upperGuidePixels: this.upperLineY,
- middleGuidePixels: this.middleLineY,
- lowerGuidePixels: this.lowerLineY,
- lowestGuidePixels: this.lowestLineY
- },
+ boundary: this.boundary,
  path: this.recordedPoints
  }
  },
- styleCanvas () {
- this.heightInMM = 85
+ configureSize () {
  const pixelRatio = 1 // window.devicePixelRatio || 1
- this.canvas.style.width = '300px'
- this.canvas.style.height = `${this.heightInMM}mm`
- this.canvas.style.height = `${this.canvas.clientHeight * 7 / 5}px`
+ this.canvas.style.width = '100%'
+ this.canvas.style.height = '98%'
+ if (this.aspectRatio !== null && this.aspectRatio !== 0) {
+ let allowableAspectRatio = this.canvas.clientWidth / this.canvas.clientHeight
+ if (allowableAspectRatio < this.aspectRatio) {
+ const wordHeight = this.canvas.clientWidth * 0.92 / this.aspectRatio
+ let totalHeight = wordHeight / (BASELINE_RATIO - CAPLINE_RATIO)
+ this.canvas.style.height = `${totalHeight}px`
+ }
+ }
  this.canvas.width = this.canvas.clientWidth * pixelRatio
  this.canvas.height = this.canvas.clientHeight * pixelRatio
- const canvasTopMarginRatio = 5 / this.heightInMM
- const canvasTopWritingAreaRatio = 25 / this.heightInMM
- const canvasWritingAreaRatio = 25 / this.heightInMM
- const canvasBottomWritingAreaRatio = 25 / this.heightInMM
- this.upperLineY = canvasTopMarginRatio * this.canvas.height
- this.middleLineY = this.upperLineY + canvasTopWritingAreaRatio * this.canvas.height
- this.lowerLineY = this.middleLineY + canvasWritingAreaRatio * this.canvas.height
- this.lowestLineY = this.lowerLineY + canvasBottomWritingAreaRatio * this.canvas.height
- this.canvas.style.background = 'linear-gradient(180deg, #f7feff, #FFFFFF, #f7feff)'
- this.canvas.style.border = '1px solid #E0F7FA'
- },
- configureCanvas () {
+ this.configureGuidelines()
+ },
+ configureGuidelines () {
+ this.boundary = {
+ top: 0,
+ ascenderLine: this.canvas.height * ASCENDER_RATIO,
+ capLine: this.canvas.height * CAPLINE_RATIO,
+ meanLine: this.canvas.height * MEANLINE_RATIO,
+ baseLine: this.canvas.height * BASELINE_RATIO,
+ beardLine: this.canvas.height * BEARDLINE_RATIO,
+ bottom: this.canvas.height
+ }
+ },
+ configureListeners () {
  this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e), false)
  this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e), false)
  this.canvas.addEventListener('mouseup', (e) => this.handleMouseUp(e), false)
@@ -124,8 +141,10 @@ export default {
  this.endDraw(this.prevPoint)
  },
  endDraw (point) {
- point.type = 'end'
- this.segmentDraw(point)
+ if (point) {
+ point.type = 'end'
+ this.segmentDraw(point)
+ }
  this.drawing = false
  },
  handleMouseLeave (event) {
@@ -136,31 +155,29 @@ export default {
  },
  setStrokeStyle (style) {
  this.context.lineCap = 'round'
+ this.context.strokeStyle = '#072A40'
  this.context.setLineDash([])
- if (style === 'START_CIRCLE') {
- this.context.strokeStyle = '#003300'
- this.context.fillStyle = 'green'
- this.context.lineWidth = 2
- } else if (style === 'END_CIRCLE') {
- this.context.strokeStyle = '#900000'
- this.context.fillStyle = 'red'
- this.context.lineWidth = 2
- } else if (style === 'USER') {
- this.context.strokeStyle = '#006064'
+ if (style === 'USER') {
+ this.context.strokeStyle = '#178CA4'
  this.context.lineWidth = 15
  } else if (style === 'EEL') {
- this.context.strokeStyle = '#FFD54F'
+ this.context.strokeStyle = '#18B7BE'
  this.context.lineWidth = 8
- } else if (style === 'PRIMARY_GUIDE') {
- this.context.strokeStyle = '#3D4849'
+ } else if (style === 'START_CIRCLE') {
+ this.context.strokeStyle = 'white'
+ this.context.fillStyle = '#5A8100'
+ this.context.lineWidth = 2
+ } else if (style === 'END_CIRCLE') {
+ this.context.strokeStyle = 'white'
+ this.context.fillStyle = '#B74803'
+ this.context.lineWidth = 2
+ } else if (style === 'CAP_LINE' || style === 'BASE_LINE') {
  this.context.lineWidth = 6
- } else if (style === 'DOTTED_GUIDE') {
- this.context.strokeStyle = '#3D4849'
+ } else if (style === 'MEAN_LINE') {
  this.context.lineWidth = 3
  this.context.setLineDash([this.canvas.width * 0.04, this.canvas.width * 0.02875])
- } else if (style === 'MINIMAL_GUIDE') {
- this.context.strokeStyle = '#667b7d'
- this.context.lineWidth = 4
+ } else if (style === 'BEARD_LINE') {
+ this.context.lineWidth = 3
  }
  },
  paintLine (from, to) {
@@ -176,25 +193,51 @@ export default {
  this.context.stroke()
  },
  clear () {
+ this.configureSize()
+ this.canvas.style.background = '#F9F7F0'
  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
- this.setStrokeStyle('PRIMARY_GUIDE')
- this.paintLine({ x: 0, y: this.lowerLineY }, { x: this.canvas.width, y: this.lowerLineY })
- this.paintLine({ x: 0, y: this.upperLineY }, { x: this.canvas.width, y: this.upperLineY })
- this.setStrokeStyle('MINIMAL_GUIDE')
- this.paintLine({ x: 0, y: this.lowestLineY }, { x: this.canvas.width, y: this.lowestLineY })
- this.setStrokeStyle('DOTTED_GUIDE')
- this.paintLine({ x: 0, y: this.middleLineY }, { x: this.canvas.width, y: this.middleLineY })
+ this.setStrokeStyle('CAP_LINE')
+ this.paintLine({ x: 0, y: this.boundary.capLine }, { x: this.canvas.width, y: this.boundary.capLine })
+ this.setStrokeStyle('BASE_LINE')
+ this.paintLine({ x: 0, y: this.boundary.baseLine }, { x: this.canvas.width, y: this.boundary.baseLine })
+ this.setStrokeStyle('BEARD_LINE')
+ this.paintLine({ x: 0, y: this.boundary.beardLine }, { x: this.canvas.width, y: this.boundary.beardLine })
+ this.setStrokeStyle('MEAN_LINE')
+ this.paintLine({ x: 0, y: this.boundary.meanLine }, { x: this.canvas.width, y: this.boundary.meanLine })
  this.setStrokeStyle('USER')
  },
- draw (points, includePath) {
- if (!points || points.length < 0) {
- return
+ setAspectRatio (pattern) {
+ this.aspectRatio = dimensions(pattern.path).ar
+ },
+ fit (pattern) {
+ let patternHeight = pattern.boundary.baseLine - pattern.boundary.capLine
+ let canvasHeight = this.boundary.baseLine - this.boundary.capLine
+ let scaledPath = scale(pattern.path, canvasHeight / patternHeight)
+ let dims = dimensions(scaledPath)
+ scaledPath = move(scaledPath, { x: 0.5 * this.canvas.width - dims.c.x, y: 0 })
+ return scaledPath
+ },
+ draw (pattern, technique) {
+ this.setAspectRatio(pattern)
+ this.clear()
+ let points = this.fit(pattern)
+ if (!points || points.length < 0 || technique === 'Freeform') {
+ setTimeout(() => {
+ this.$emit('animationcomplete')
+ }, 1200)
  }
+
  this.animationSegment = 0
  this.animationPoints = points
- this.animationPaintPath = includePath
+
  let drawTime = 3000 // milliseconds
  this.timePerPoint = drawTime / this.animationPoints.length
+
+ if (technique === 'Pattern') {
+ this.animationPoints = points.filter(point => point.type === 'start' || point.type === 'end')
+ this.timePerPoint = 400 // milliseconds
+ }
+
  this.then = Date.now()
  this.now = Date.now()
  this.isAnimating = true
@@ -218,7 +261,7 @@ export default {
  } else if (this.animationPoints[this.animationSegment].type === 'end') {
  this.setStrokeStyle('END_CIRCLE')
  this.paintCircle(this.animationPoints[this.animationSegment], 13)
- } else if (this.animationPaintPath) {
+ } else {
  this.setStrokeStyle('EEL')
  let endPoint = this.animationPoints[this.animationSegment + 1] || this.animationPoints[this.animationSegment]
  this.paintLine(this.animationPoints[this.animationSegment], endPoint)