iOS Swift Development – OhmMeter

iOS Swift

I’ve been very busy learning Swift for the last few months. I’ve always wanted to get involved in the mobile apps world, but could never quite find the time to dedicate to this project.

My source of information has been a Udemy course. Link: Complete iOS Swift Developer Course

As part of the course, I learned how to create multiple apps: weather reports, web page loaders, multi view handlers, etc. I learned good practices when it comes to coding the app as well as its layout in the View Controller. I learned advanced concepts and built apps around user administration including log-in, sign-up and log-out functionalities.

Although I am not finished with the course, I decided to make a quick app I always wanted to put out. The app is a simple resistance outputer.

OhmMeter – by Vlad

The OhmMeter is a simple app which allows the user to select the four band colors of their resistor and outputs the corresponding resistance on the screen. The target audience is some one who is often involved with resistors and doesn’t have the chart memorized yet. It saves the individual a good amount of time by not having to look up the chart.

iOS Swift app Vladimir Romanov Ohm Meter

Code Breakdown

Full Project (Open Source) can be found here: https://github.com/VRomanov89/OhmMeter

1. The code below is used to relay the components of the app. I’m using four image views which are the bands on top of the resistor, one UILabel which is the output text and a UIPickerView which is the band selector.
@IBOutlet weak var band1: UIImageView!
@IBOutlet weak var band2: UIImageView!
@IBOutlet weak var band3: UIImageView!
@IBOutlet weak var band4: UIImageView!
@IBOutlet weak var resistance: UILabel!
@IBOutlet weak var picker: UIPickerView!

2. The next section is used for the picker. It pragmatically populates the four ares I will be using below. I also initialize several parameters which are used to hold the initial state and string of the output.
var pickerDataSource0 = ["Band 1", "Brown", "Red", "Orange", "Yellow", "Green", "Blue", "Violet", "Gray", "White"];
var pickerDataSource1 = ["Band 2", "Black", "Brown", "Red", "Orange", "Yellow", "Green", "Blue", "Violet", "Gray", "White"];
var pickerDataSource2 = ["Band 3", "Silver", "Gold", "Black", "Brown", "Red", "Orange", "Yellow", "Green", "Blue", "Violet"];
var pickerDataSource3 = ["Band 4", "Silver", "Gold", "Brown", "Red", "Green", "Blue", "Violet"];
var pickerDataSource0row:Int = 0
var pickerDataSource1row:Int = 0
var pickerDataSource2row:Int = 0
var pickerDataSource3row:Int = 0
var res1:Int = 0
var res2:String = ""
var tolerance:String = "???"

3. In the ViewDidLoad method, I initialize the picker as well as the initial color of the bands.
override func viewDidLoad() {
super.viewDidLoad()
band1.backgroundColor = UIColor.blueColor()
picker.delegate = self
picker.dataSource = self
resistance.numberOfLines = 2;
band1.backgroundColor = UIColor.lightGrayColor()
band2.backgroundColor = UIColor.lightGrayColor()
band3.backgroundColor = UIColor.lightGrayColor()
band4.backgroundColor = UIColor.lightGrayColor()
}

4. I use the pickerView function to initialize the number of rows as well as their content. In my case, I have 4 columns to populate which is done through a simple if/else/else if routine and the “component” variable.
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
if component == 0 {
return pickerDataSource0[row]
} else if component == 1 {
return pickerDataSource1[row]
} else if component == 2 {
return pickerDataSource2[row]
} else if component == 3 {
return pickerDataSource3[row]
} else {
return ""
}
}
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
if component == 0 {
return pickerDataSource0.count
} else if component == 1 {
return pickerDataSource1.count
} else if component == 2 {
return pickerDataSource2.count
} else if component == 3 {
return pickerDataSource3.count
} else {
return 1
}
}

5. The number of columns is initialized to a fixed number: 4
func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
return 4
}

6. The following function will determine which row of which column has been changed and set the band to the appropriate color. I’ve made this possible through a series of switch statements referencing the row variable for each column of the picker. Finally, the last piece of the code is used to update the text field in which the program calculates (in real time) the resistance of the bands you have selected.
func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
if component == 0 {
pickerDataSource0row = row
switch row {
case 1:
band1.backgroundColor = UIColor.brownColor()
break
case 2:
band1.backgroundColor = UIColor.redColor()
break
case 3:
band1.backgroundColor = UIColor.orangeColor()
break
case 4:
band1.backgroundColor = UIColor.yellowColor()
break
case 5:
band1.backgroundColor = UIColor.greenColor()
break
case 6:
band1.backgroundColor = UIColor.blueColor()
break
case 7:
band1.backgroundColor = UIColor.purpleColor()
break
case 8:
band1.backgroundColor = UIColor.grayColor()
break
case 9:
band1.backgroundColor = UIColor.whiteColor()
break
default:
break
}
} else if component == 1 {
pickerDataSource1row = row
switch row {
case 1:
band2.backgroundColor = UIColor.blackColor()
break
case 2:
band2.backgroundColor = UIColor.brownColor()
break
case 3:
band2.backgroundColor = UIColor.redColor()
break
case 4:
band2.backgroundColor = UIColor.orangeColor()
break
case 5:
band2.backgroundColor = UIColor.yellowColor()
break
case 6:
band2.backgroundColor = UIColor.greenColor()
break
case 7:
band2.backgroundColor = UIColor.blueColor()
break
case 8:
band2.backgroundColor = UIColor.purpleColor()
break
case 9:
band2.backgroundColor = UIColor.grayColor()
break
case 10:
band2.backgroundColor = UIColor.whiteColor()
break
default:
break
}
} else if component == 2 {
pickerDataSource2row = row
switch row {
case 1:
band3.backgroundColor = UIColor.lightGrayColor()
break
case 2:
band3.backgroundColor = UIColor(red: 252.0/255.0, green: 194.0/255.0, blue: 0, alpha: 1.0)
break
case 3:
band3.backgroundColor = UIColor.blackColor()
break
case 4:
band3.backgroundColor = UIColor.brownColor()
break
case 5:
band3.backgroundColor = UIColor.redColor()
break
case 6:
band3.backgroundColor = UIColor.orangeColor()
break
case 7:
band3.backgroundColor = UIColor.yellowColor()
break
case 8:
band3.backgroundColor = UIColor.greenColor()
break
case 9:
band3.backgroundColor = UIColor.blueColor()
break
case 10:
band3.backgroundColor = UIColor.purpleColor()
break
default:
break
}
} else if component == 3 {
pickerDataSource3row = row
switch row {
case 0:
tolerance = "???"
break
case 1:
band4.backgroundColor = UIColor.lightGrayColor()
tolerance = "10%"
break
case 2:
band4.backgroundColor = UIColor(red: 252.0/255.0, green: 194.0/255.0, blue: 0, alpha: 1.0)
tolerance = "5%"
break
case 3:
band4.backgroundColor = UIColor.brownColor()
tolerance = "1%"
break
case 4:
band4.backgroundColor = UIColor.redColor()
tolerance = "2%"
break
case 5:
band4.backgroundColor = UIColor.greenColor()
tolerance = "0.5%"
break
case 6:
band4.backgroundColor = UIColor.blueColor()
tolerance = "0.25%"
break
case 7:
band4.backgroundColor = UIColor.purpleColor()
tolerance = "0.1%"
break
default:
break
}
}
if (pickerDataSource0row != 0 && pickerDataSource1row != 0 && pickerDataSource2row != 0) {
let res1 = Double(((pickerDataSource1row-1) + (pickerDataSource0row) * 10)) * pow(Double(10),Double(pickerDataSource2row - 3))
resistance.text = String(res1) + " Ohms\n Tolerance: " + tolerance
}
}

7. The last piece of code included in my program is allowing me to make some of my bands “non standard” colors. This is done through a hex selector instead by using the following function:
func UIColorFromRGB(rgbValue: UInt) -> UIColor {
return UIColor(
red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
alpha: CGFloat(1.0)
)
}

Vladimir Romanov Software Engineer

Conclusion

The OhmMeter has yet to make it to the app store, but it has already proven itself to be very useful. I’m very happy with the fact that the bands are switching colors and that the layout works in both portrait and landscape modes. The biggest challenge of this project was to make the app rotate and position elements correctly.

– Vlad