(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["310262e4"],{"2edc":function(t,i,e){"use strict";var n=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("canvas",{ref:"mainCanvas",staticStyle:{"touch-action":"none"},attrs:{"touch-action":"none",id:"mainCanvas"}})},s=[],a=(e("6c7b"),{name:"EelCanvas",props:{active:Boolean},data:function(){return{recordedPoints:[]}},mounted:function(){this.canvas=this.$refs.mainCanvas,this.context=this.canvas.getContext("2d"),this.styleCanvas(),this.configureCanvas(),this.clear()},methods:{record:function(){this.recordedPoints=[],this.isRecording=!0},getRecording:function(){return this.isRecording=!1,{dimensions:{heightMM:this.heightInMM,heightPixels:this.canvas.height,widthPixels:this.canvas.width,upperGuidePixels:this.upperLineY,middleGuidePixels:this.middleLineY,lowerGuidePixels:this.lowerLineY,lowestGuidePixels:this.lowestLineY},path:this.recordedPoints}},styleCanvas:function(){this.heightInMM=85;var t=1;this.canvas.style.width="300px",this.canvas.style.height="".concat(this.heightInMM,"mm"),this.canvas.style.height="".concat(7*this.canvas.clientHeight/5,"px"),this.canvas.width=this.canvas.clientWidth*t,this.canvas.height=this.canvas.clientHeight*t;var i=5/this.heightInMM,e=25/this.heightInMM,n=25/this.heightInMM,s=25/this.heightInMM;this.upperLineY=i*this.canvas.height,this.middleLineY=this.upperLineY+e*this.canvas.height,this.lowerLineY=this.middleLineY+n*this.canvas.height,this.lowestLineY=this.lowerLineY+s*this.canvas.height,this.canvas.style.background="linear-gradient(180deg, #f7feff, #FFFFFF, #f7feff)",this.canvas.style.border="1px solid #E0F7FA"},configureCanvas:function(){var t=this;this.canvas.addEventListener("mousedown",(function(i){return t.handleMouseDown(i)}),!1),this.canvas.addEventListener("mousemove",(function(i){return t.handleMouseMove(i)}),!1),this.canvas.addEventListener("mouseup",(function(i){return t.handleMouseUp(i)}),!1),this.canvas.addEventListener("mouseleave",(function(i){return t.handleMouseLeave(i)}),!1),this.canvas.addEventListener("touchstart",(function(i){return t.handleTouchDown(i)}),!1),this.canvas.addEventListener("touchmove",(function(i){return t.handleTouchMove(i)}),!0),this.canvas.addEventListener("touchend",(function(i){return t.handleTouchUp(i)}),!1),this.canvas.addEventListener("touchcancel",(function(i){return t.handleTouchLeave(i)}),!1)},getMousePoint:function(t){var i=this.canvas.getBoundingClientRect();return{x:t.clientX-i.left,y:t.clientY-i.top}},getTouchPoint:function(t){var i=this.canvas.getBoundingClientRect();return{x:t.targetTouches[0].clientX-i.left,y:t.targetTouches[0].clientY-i.top}},handleMouseDown:function(t){!this.isAnimating&&this.active&&this.startDraw(this.getMousePoint(t))},handleTouchDown:function(t){t.preventDefault(),!this.isAnimating&&this.active&&this.startDraw(this.getTouchPoint(t))},startDraw:function(t){this.setStrokeStyle("USER"),this.drawing=!0,t.type="start",this.prevPoint=t,this.segmentDraw(t)},handleMouseMove:function(t){this.drawing&&this.segmentDraw(this.getMousePoint(t))},handleTouchMove:function(t){this.drawing&&this.segmentDraw(this.getTouchPoint(t))},segmentDraw:function(t){this.paintLine(this.prevPoint,t),this.isRecording&&this.recordedPoints.push(t),this.prevPoint=t},handleMouseUp:function(t){this.endDraw(this.prevPoint)},handleTouchUp:function(t){this.endDraw(this.prevPoint)},endDraw:function(t){t.type="end",this.segmentDraw(t),this.drawing=!1},handleMouseLeave:function(t){this.drawing=!1},handleTouchLeave:function(t){this.drawing=!1},setStrokeStyle:function(t){this.context.lineCap="round",this.context.setLineDash([]),"START_CIRCLE"===t?(this.context.strokeStyle="#003300",this.context.fillStyle="green",this.context.lineWidth=2):"END_CIRCLE"===t?(this.context.strokeStyle="#900000",this.context.fillStyle="red",this.context.lineWidth=2):"USER"===t?(this.context.strokeStyle="#006064",this.context.lineWidth=15):"EEL"===t?(this.context.strokeStyle="#FFD54F",this.context.lineWidth=8):"PRIMARY_GUIDE"===t?(this.context.strokeStyle="#3D4849",this.context.lineWidth=6):"DOTTED_GUIDE"===t?(this.context.strokeStyle="#3D4849",this.context.lineWidth=3,this.context.setLineDash([.04*this.canvas.width,.02875*this.canvas.width])):"MINIMAL_GUIDE"===t&&(this.context.strokeStyle="#667b7d",this.context.lineWidth=4)},paintLine:function(t,i){this.context.beginPath(),this.context.moveTo(t.x,t.y),this.context.lineTo(i.x,i.y),this.context.stroke()},paintCircle:function(t,i){this.context.beginPath(),this.context.arc(t.x,t.y,i,0,2*Math.PI,!1),this.context.fill(),this.context.stroke()},clear:function(){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("USER")},draw:function(t,i){if(t&&!(t.length<0)){this.animationSegment=0,this.animationPoints=t,this.animationPaintPath=i;var e=3e3;this.timePerPoint=e/this.animationPoints.length,this.then=Date.now(),this.now=Date.now(),this.isAnimating=!0,this.animate()}},animate:function(){this.isAnimating&&window.requestAnimationFrame(this.animate),this.now=Date.now();var t=this.now-this.then;if(t>this.timePerPoint){if(this.then=this.now,this.animationSegment>=this.animationPoints.length)this.setStrokeStyle("USER"),this.isAnimating=!1,this.$emit("animationcomplete");else if("start"===this.animationPoints[this.animationSegment].type)this.setStrokeStyle("START_CIRCLE"),this.paintCircle(this.animationPoints[this.animationSegment],13);else if("end"===this.animationPoints[this.animationSegment].type)this.setStrokeStyle("END_CIRCLE"),this.paintCircle(this.animationPoints[this.animationSegment],13);else if(this.animationPaintPath){this.setStrokeStyle("EEL");var i=this.animationPoints[this.animationSegment+1]||this.animationPoints[this.animationSegment];this.paintLine(this.animationPoints[this.animationSegment],i)}this.animationSegment++}}}}),o=a,h=e("2877"),r=Object(h["a"])(o,n,s,!1,null,null,null);i["a"]=r.exports},"2f36":function(t,i,e){"use strict";e.r(i);var n=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",[e("q-page",{attrs:{padding:""}},[e("div",[e("div",{staticClass:"row justify-center"},[e("div",{staticClass:"text-center"},[e("q-card",{staticClass:"my-card"},[e("q-card-section",{staticClass:"bg-accent text-white"},[e("div",{staticClass:"text-h6"},[t._v(t._s(t.instructions))]),e("div",{staticClass:"text-subtitle2"},[t._v(t._s(t.subtext))])]),e("q-card-actions",{attrs:{align:"around"}},["start"===t.step?e("q-btn",{attrs:{color:"accent",flat:"",label:"Record"},on:{click:function(i){return t.record()}}}):t._e(),"record"===t.step?e("q-btn",{attrs:{color:"negative",flat:"",label:"Stop"},on:{click:function(i){return t.stop()}}}):t._e(),"save"===t.step?e("q-btn",{attrs:{color:"info",flat:"",label:"Replay"},on:{click:function(i){return t.replay()}}}):t._e(),"save"===t.step?e("q-btn",{attrs:{color:"positive",flat:"",label:"Save"},on:{click:function(i){return t.save()}}}):t._e(),"save"===t.step?e("q-btn",{attrs:{color:"info",flat:"",label:"Restart"},on:{click:function(i){return t.restart()}}}):t._e()],1)],1),e("q-card",{staticClass:"my-card"},[e("q-card-section",[e("EelCanvas",{ref:"whiteboard",attrs:{active:t.isCanvasActive}})],1)],1)],1)])])]),e("q-dialog",{model:{value:t.showDialog,callback:function(i){t.showDialog=i},expression:"showDialog"}},[e("q-card",[e("q-card-section",[e("q-select",{attrs:{outlined:"",options:t.letterOptions,label:"Letter"},model:{value:t.letter,callback:function(i){t.letter=i},expression:"letter"}}),e("q-select",{attrs:{outlined:"",options:t.qualityOptions,label:"Quality"},model:{value:t.quality,callback:function(i){t.quality=i},expression:"quality"}}),e("q-btn",{attrs:{color:"positive",glossy:"",label:"Upload"},on:{click:function(i){return t.upload()}}})],1)],1)],1)],1)},s=[],a=e("2edc"),o={name:"PageTraining",components:{EelCanvas:a["a"]},data:function(){return{step:"start",instructions:"Welcome",subtext:"Click record when you are ready to begin.",isCanvasActive:!1,recording:{},letter:"a",quality:"Excellent",showDialog:!1,letterOptions:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],qualityOptions:["Excellent","Good","Okay","Poor","Egregious"]}},methods:{record:function(){this.$refs.whiteboard.record(),this.isCanvasActive=!0,this.instructions="Draw a letter",this.subtext="The slower your pace, the more data will be collected.",this.step="record"},stop:function(){this.recording=this.$refs.whiteboard.getRecording(),this.isCanvasActive=!1,this.instructions="Review your recording",this.subtext="Press replay to see how this will show to students.",this.step="save"},replay:function(){var t=this;this.$refs.whiteboard.clear(),this.instructions="Replaying...",this.subtext="...",this.$refs.whiteboard.draw(this.recording.path,!0),setTimeout((function(){t.instructions="Save your recording",t.subtext="Press save to upload your recording to the database."}),3e3)},save:function(){this.showDialog=!0},restart:function(){this.$refs.whiteboard.clear(),this.instructions="Begin when ready",this.subtext="Click record when you are ready to begin.",this.step="start"},upload:function(){var t={letter:this.letter,quality:this.quality,dimensions:this.recording.dimensions,path:this.recording.path};this.$store.dispatch("common/uploadPattern",t),this.instructions="Saved",this.subtext="Press restart to begin again.",this.showDialog=!1}}},h=o,r=e("2877"),c=e("fe09"),l=Object(r["a"])(h,n,s,!1,null,null,null);i["default"]=l.exports;l.options.components=Object.assign({QPage:c["p"],QCard:c["b"],QCardSection:c["d"],QCardActions:c["c"],QBtn:c["a"],QDialog:c["f"],QSelect:c["s"]},l.options.components||{})}}]);