6. Temperature converter2
This enhances the temperature converter.
Working app at: https://pc-temperature-converter-2.anvil.app
6.1. References
Python f-strings: https://docs.python.org/3/tutorial/inputoutput.html#tut-f-strings
Python f-string number formatting: https://docs.python.org/3/library/string.html#formatspec
6.2. Key components
Name the input textboxes: fahrenheit and celsius.
Name the convert buttons that use arrows: FtoC and CtoF.
Set the icon for FtoC to fa:arrow-down.
Set the icon for FtoC to fa:arrow-up.
6.3. Add image to left
Get a thermometer icon to upload such as: https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Fahrenheit_Celsius_scales.svg/240px-Fahrenheit_Celsius_scales.svg.png
Drag and drop the image component onto the left of card_1.
A vertical blue line will indicate that you are in the right place to drop it.
In the properties panel: text section, set the display_mode to shrink_to_fit and set the height to 500.
6.4. Vertically Centre the temperature fields
Drag and drop the spacer component onto card_1 above the Fahrenheit label.
At first, a full length blue line appears. Drag down to move the blue line down as in the image below.
A vertical blue line will indicate that you are in the right place to drop it.
In the properties panel: set the height to 150.
6.5. Change Convert button to an icon button
Use an icon instead of text for the convert button and reposition it.
Click on the Convert button.
Name the convert buttons to: FtoC
In the properties panel: icon section, click the i select an icon button.
Search for arrow. Scroll and choose a down arrow.
So the icon for button FtoC is now fa:arrow-down.
In the properties panel: icon section, set the icon_align to left_edge.
Click and drag this convert button (now a down arrow) to the right of the fahrenheit temperature.
Hover over the vertical dividing lines between the fahrenheit temperature and the convert button and resize them to fit nicely. Control click and drag for finer control.
6.7. Refactor code to calculate F to C
Modify the code from Temperature Converter 1 to use calculateFtoC to do the conversion.
Then call this when the FtoC button is clicked.
def calculateFtoC(self):
try:
fahrenheit = self.fahrenheit.text
fahrenheit = float(fahrenheit)
celcius = (fahrenheit - 32) / 1.8
self.celcius.text = f'{celcius:.1f}'
except TypeError as error:
self.celcius.text = None
def FtoC_click(self, **event_args):
self.calculateFtoC()
6.8. Add Code for Fahrenheit enter key
Click the Fahrenheit text box.
In the properties panel: events section, click the blue icon for the pressed_enter event.
This adds starter code for pressing the enter key after typing in a Fahrenheit temperature.
Add code to convert F to C.
def fahrenheit_pressed_enter(self, **event_args):
self.calculateFtoC()
6.9. Create code to calculate C to F
Copy the function, calculateFtoC, and paste it in again and rename it: calculateCtoF.
Swap fahrenheit and celcius.
Change the formula based on: F = (C * 1.8) + 32
def calculateCtoF(self):
try:
celcius = self.celcius.text
celcius = float(celcius)
fahrenheit = (celcius * 1.8) + 32
self.fahrenheit.text = f'{fahrenheit:.1f}'
except TypeError as error:
self.fahrenheit.text = None
def CtoF_click(self, **event_args):
self.calculateCtoF()
6.10. Add Code for Celcius enter key
This opens up the opportunity to do the reverse calculation form C to F using the enter key.
Click the Celcius text box.
In the properties panel: events section, click the blue icon for the pressed_enter event.
This adds starter code for pressing the enter key after typing in a Celcius temperature.
def celcius_pressed_enter(self, **event_args):
self.calculateCtoF()
6.11. Final code
from ._anvil_designer import Form1Template
from anvil import *
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
class Form1(Form1Template):
def __init__(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
def calculateFtoC(self):
try:
fahrenheit = self.fahrenheit.text
fahrenheit = float(fahrenheit)
celcius = (fahrenheit - 32) / 1.8
self.celcius.text = f'{celcius:.1f}'
except TypeError as error:
self.celcius.text = None
def calculateCtoF(self):
try:
celcius = self.celcius.text
celcius = float(celcius)
fahrenheit = (celcius * 1.8) + 32
self.fahrenheit.text = f'{fahrenheit:.1f}'
except TypeError as error:
self.fahrenheit.text = None
def FtoC_click(self, **event_args):
self.calculateFtoC()
def fahrenheit_pressed_enter(self, **event_args):
self.calculateFtoC()
def CtoF_click(self, **event_args):
self.calculateCtoF()
def celcius_pressed_enter(self, **event_args):
self.calculateCtoF()
Tasks
Add code to restrict temperature entries so that they cannot be below absolute zero.
Replace Fahrenheit with Kelvin and adjust the display and the code to work.