Change fonts and colors of pitch animation

Author: sebromero

ScienceJournal/UI/PitchSensorAnimationView.swift

@@ -19,34 +19,21 @@ import UIKit
 
 import MaterialComponents.MaterialTypography
 
-fileprivateextensionMDCTypography{
-
-staticfunc boldFont(withSize size:CGFloat)->UIFont{
- // This font should load unless something is wrong with Material's fonts.
-returnMDCTypography.fontLoader().boldFont!(ofSize: size)
-}
+fileprivateextensionArduinoTypography{
 
 staticvarfontName:String{
  // Arbitrary size to get the font name.
-returnboldFont(withSize:10).fontName
+returnmonoBoldFont(forSize:10).fontName
 }
 
 }
 
-// swiftlint:disable type_body_length
 /// Animation view for the pitch sensor.
 classPitchSensorAnimationView:SensorAnimationView{
 
  // MARK: - Nested
 
 privateenumMetrics{
-staticletbackgroundColorValueBlueHigh:CGFloat=175
-staticletbackgroundColorValueBlueLow:CGFloat=248
-staticletbackgroundColorValueGreenHigh:CGFloat=97
-staticletbackgroundColorValueGreenLow:CGFloat=202
-staticletbackgroundColorValueRedHigh:CGFloat=13
-staticletbackgroundColorValueRedLow:CGFloat=113
-staticletbackgroundRadiusRatio:CGFloat=0.38
 staticletdotAngleTop=CGFloat(Double.pi /2)
 staticletdotEllipseRadiusRatio:CGFloat=0.44
 staticletdotRadiusRatio:CGFloat=0.05
@@ -55,21 +42,16 @@ class PitchSensorAnimationView: SensorAnimationView {
 staticletnoteFontSizeRatio:CGFloat=0.48
 staticletnoteRatioX:CGFloat=0.42
 staticletnoteRatioY:CGFloat=0.46
-staticletnoteLeftTextColor=
-UIColor(red:238/255, green:238/255, blue:238/255, alpha:1).cgColor
-staticletnoteRightTextColor=
-UIColor(red:220/255, green:220/255, blue:220/255, alpha:1).cgColor
+staticletnoteTextColor=UIColor.white.cgColor
 staticletnumberOfPianoKeys=88
 staticletoctaveFontSizeRatio:CGFloat=0.2
 staticletoctaveRatioX:CGFloat=0.67
 staticletoctaveRatioY:CGFloat=0.67
-staticletoctaveTextColor=
-UIColor(red:220/255, green:220/255, blue:220/255, alpha:1).cgColor
-staticletsignFontSizeRatio:CGFloat=0.25
-staticletsignRatioX:CGFloat=0.62
+staticletoctaveTextColor=UIColor.white.cgColor
+staticletsignFontSizeRatio:CGFloat=0.3
+staticletsignRatioX:CGFloat=0.68
 staticletsignRatioY:CGFloat=0.43
-staticletsignTextColor=
-UIColor(red:220/255, green:220/255, blue:220/255, alpha:1).cgColor
+staticletsignTextColor=UIColor.white.cgColor
 staticlettextShadowColor=UIColor(white:0, alpha:0.61).cgColor
 staticlettextShadowOffset=CGSize(width:1, height:2)
 staticlettextShadowRadius:CGFloat=4
@@ -91,8 +73,7 @@ class PitchSensorAnimationView: SensorAnimationView {
 
 privateletbackgroundShapeLayer=CAShapeLayer()
 privateletdotShapeLayer=CAShapeLayer()
-privateletnoteLeftTextLayer=CATextLayer()
-privateletnoteRightTextLayer=CATextLayer()
+privateletnoteTextLayer=CATextLayer()
 privateletsignTextLayer=CATextLayer()
 privateletoctaveTextLayer=CATextLayer()
 
@@ -201,14 +182,6 @@ class PitchSensorAnimationView: SensorAnimationView {
 overridefunc layoutSubviews(){
  super.layoutSubviews()
 
- // Background shape layer.
-letbackgroundShapeRadius= bounds.width * Metrics.backgroundRadiusRatio
-letbackgroundShapeRect=CGRect(x: bounds.midX - backgroundShapeRadius,
- y: bounds.midY - backgroundShapeRadius,
- width: backgroundShapeRadius *2,
- height: backgroundShapeRadius *2)
- backgroundShapeLayer.path =UIBezierPath(ovalIn: backgroundShapeRect).cgPath
-
  // Dot shape layer will be at a point on an invisible ellipse.
 letellipseRadius= bounds.width * Metrics.dotEllipseRadiusRatio
 letdotX= bounds.midX + ellipseRadius * cos(angleOfDot)
@@ -224,12 +197,11 @@ class PitchSensorAnimationView: SensorAnimationView {
 iflet musicalNote = musicalNote {
  // Letter
 letnoteFontSize=floor(bounds.height * Metrics.noteFontSizeRatio)
- noteLeftTextLayer.fontSize = noteFontSize
- noteRightTextLayer.fontSize = noteFontSize
+ noteTextLayer.fontSize = noteFontSize
 letnoteSize= musicalNote.letter.boundingRect(
  with:.zero,
  options:[],
-attributes:[NSAttributedString.Key.font:MDCTypography.boldFont(withSize: noteFontSize)],
+ attributes:[NSAttributedString.Key.font:ArduinoTypography.monoBoldFont(forSize: noteFontSize)],
  context:nil).size
 varnoteX:CGFloat
 varnoteY:CGFloat
@@ -242,18 +214,14 @@ class PitchSensorAnimationView: SensorAnimationView {
 }
 
  // The note layer on the left is half width.
-noteLeftTextLayer.frame =CGRect(x:floor(noteX),
+noteTextLayer.frame =CGRect(x:floor(noteX),
  y:floor(noteY),
- width:ceil(noteSize.width/2),
+ width:ceil(noteSize.width),
  height:ceil(noteSize.height))
- noteRightTextLayer.frame =CGRect(x:floor(noteX),
- y:floor(noteY),
- width:ceil(noteSize.width),
- height:ceil(noteSize.height))
-
+
  // Sign.
  signTextLayer.fontSize =floor(bounds.height * Metrics.signFontSizeRatio)
-letsignFont=MDCTypography.boldFont(withSize: signTextLayer.fontSize)
+letsignFont=ArduinoTypography.monoBoldFont(forSize: signTextLayer.fontSize)
 letsignSize= musicalNote.sign.boundingRect(
  with:.zero,
  options:[],
@@ -267,7 +235,7 @@ class PitchSensorAnimationView: SensorAnimationView {
 
  // Octave
  octaveTextLayer.fontSize =floor(bounds.height * Metrics.octaveFontSizeRatio)
-letoctaveFont=MDCTypography.boldFont(withSize: octaveTextLayer.fontSize)
+letoctaveFont=ArduinoTypography.monoBoldFont(forSize: octaveTextLayer.fontSize)
 letoctaveSize=
  musicalNote.octave.boundingRect(with:.zero,
  options:[],
@@ -287,17 +255,13 @@ class PitchSensorAnimationView: SensorAnimationView {
  // Store the level.
 self.level = level
 
- // Set the fill color of the background shape layer.
- backgroundShapeLayer.fillColor =backgroundColor(forLevel: level).cgColor
-
  // The the angle of the dot.
 letdifference=differenceBetween(pitch: value, andLevel: level)
  angleOfDot =CGFloat((1-2* difference)*(Double.pi /2))
 
  // Set the musical note letter, sign and octave.
 letmusicalNote=musicalNotes[level]
- noteLeftTextLayer.string = musicalNote.letter
- noteRightTextLayer.string = musicalNote.letter
+ noteTextLayer.string = musicalNote.letter
  signTextLayer.string = musicalNote.sign
  octaveTextLayer.string = musicalNote.octave
 
@@ -327,29 +291,6 @@ class PitchSensorAnimationView: SensorAnimationView {
 
  // MARK: - Private
 
-privatefunc backgroundColor(forLevel level:Int)->UIColor{
-if level ==0{
-returnUIColor(red:Metrics.backgroundColorValueRedLow /255,
- green:Metrics.backgroundColorValueGreenLow /255,
- blue:Metrics.backgroundColorValueBlueLow /255, alpha:1)
-}elseif level == noteFrequencies.endIndex -1{
-returnUIColor(red:Metrics.backgroundColorValueRedHigh /255,
- green:Metrics.backgroundColorValueGreenHigh /255,
- blue:Metrics.backgroundColorValueBlueHigh /255, alpha:1)
-}else{
-letred=round(Metrics.backgroundColorValueRedLow +
-(Metrics.backgroundColorValueRedHigh - Metrics.backgroundColorValueRedLow)*
- CGFloat(level)/ CGFloat(noteFrequencies.endIndex -1))
-letgreen=round(Metrics.backgroundColorValueGreenLow +
-(Metrics.backgroundColorValueGreenHigh - Metrics.backgroundColorValueGreenLow)*
- CGFloat(level)/ CGFloat(noteFrequencies.endIndex -1))
-letblue=round(Metrics.backgroundColorValueBlueLow +
-(Metrics.backgroundColorValueBlueHigh - Metrics.backgroundColorValueBlueLow)*
- CGFloat(level)/ CGFloat(noteFrequencies.endIndex -1))
-returnUIColor(red: red /255, green: green /255, blue: blue /255, alpha:1)
-}
-}
-
 privatefunc configureView(){
  isAccessibilityElement =true
 
@@ -359,31 +300,24 @@ class PitchSensorAnimationView: SensorAnimationView {
  imageView.frame = bounds
 addSubview(imageView)
 
- // Background shape layer.
- backgroundShapeLayer.fillColor =backgroundColor(forLevel:0).cgColor
- layer.addSublayer(backgroundShapeLayer)
-
  // Dot shape layer.
- dotShapeLayer.fillColor =UIColor.red.cgColor
+ dotShapeLayer.fillColor =ArduinoColorPalette.warningColor.cgColor
  layer.addSublayer(dotShapeLayer)
 
  // Text layer common configuration.
-[noteRightTextLayer, noteLeftTextLayer, signTextLayer, octaveTextLayer].forEach{
+[noteTextLayer, signTextLayer, octaveTextLayer].forEach{
  $0.alignmentMode =.center
  $0.contentsScale =UIScreen.main.scale
- $0.font =CGFont(MDCTypography.fontName asCFString)
+ $0.font =CGFont(ArduinoTypography.fontName asCFString)
  $0.shadowColor =Metrics.textShadowColor
  $0.shadowOffset =Metrics.textShadowOffset
  $0.shadowRadius =Metrics.textShadowRadius
  layer.addSublayer($0)
 }
 
- // Right note.
- noteRightTextLayer.foregroundColor =Metrics.noteRightTextColor
-
  // Left note.
-noteLeftTextLayer.foregroundColor =Metrics.noteLeftTextColor
-noteLeftTextLayer.masksToBounds =true
+noteTextLayer.foregroundColor =Metrics.noteTextColor
+noteTextLayer.masksToBounds =true
 
  // Sign.
  signTextLayer.foregroundColor =Metrics.signTextColor