5. Temperature converter

This builds a simple temperature converter.

Working app at: https://pc-temperature-converter-1.anvil.app
../_images/Temperature_converter1_layout.png

5.1. Get started

  1. Go to: https://anvil.works/new-build

  2. Click: Blank App.

  3. Choose: Material Design

5.2. Settings

Enter the settings for the app.
../_images/Temperature_converter1_settings.png

  1. Click on the cog icon to show the settings tab.

  2. Enter an App name. Temperature converter

  3. Enter an App title. Temperature converter

  4. Enter an App description. Converts temperatures

  5. 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

  6. Click Change Image to upload an App logo.

  7. Close the settings tab.

../_images/Fahrenheit_Celsius_scales.png

5.3. Build the first part of the interface

Drag and drop a label component onto the Drop title here container.
In the properties panel: name section, set the name to title.
In the properties panel: text section, set the text to Temperature_converter.
In the properties panel: text section, set the font_size to 24.

5.3.1. Card panel

Drag and drop a card panel component onto the form.

5.3.2. Fahrenheit

Drag and drop a label component onto card_1.
In the properties panel: name section, set the name to label_F.
In the properties panel: text section, set the text to Fahrenheit.
In the properties panel: text section, set the font_size to 32.
In the properties panel: text section, set the text_align to right.
Drag and drop the textbox component onto card_1 to the right of the Fahrenheit label.
A vertical blue line will indicate that you are in the right place to drop it.
In the properties panel: name section, set the name to fahrenheit (lower case).
In the properties panel: text section, set the font_size to 32.
In the properties panel: properties section, set the type to number.
This restricts user input to numbers.
../_images/Temperature_converter_Add_textbox_to_right.png

5.3.3. Celcius

Drag and drop the label component onto card_1 below the Fahrenheit label.
A horizontal blue line will indicate that you are in the right place to drop it.
In the properties panel: name section, set the name to label_C.
In the properties panel: text section, set the text to Celcius.
In the properties panel: text section, set the font_size to 32.
In the properties panel: text section, set the text_align to right.
Drag and drop the textbox component onto card_1 to the right of the Celcius label.
A vertical blue line will indicate that you are in the right place to drop it.
In the properties panel: name section, set the name to celcius (lower case).
In the properties panel: text section, set the font_size to 32.
../_images/Temperature_converter_Add_label_below.png

5.3.4. Convert button

Drag and drop the button component onto card_1 above the Celcius label.
A horizontal blue line will indicate that you are in the right place to drop it.
In the properties panel: name section, set the name to convert.
In the properties panel: text section, set the text to Convert.
In the properties panel: text section, set the font_size to 32.
In the properties panel: appearance section, set the role to primary-color.
In the properties panel: Events section, click on the blue icon to the right of the click label.
This will add a default script, convert_click, to the code.

5.4. Code

See: https://reference.yourdictionary.com/resources/what-s-the-easiest-way-to-convert-fahrenheit-to-celsius.html
Edit the code, convert_click, to calculate the temperature in Celcius.
The formula to use is: celcius = (fahrenheit - 32) / 1.8
fahrenheit = self.fahrenheit.text can be used to get the Fahrenheit temperature.
if self.fahrenheit.text: evaluates to True if a number has been entered or False if the textbox is empty.
self.celcius.text = f'{celcius:.1f}' can be used to place the calculated value formatted to 1 decimal place.
Use a try-except block to catch any invalid numbers in the fahrenheit entry.
Form testing invalid entries, TypeErrors are produced, so except TypeError as error: is used to clear the celcius value via: self.celcius.text = None.
def convert_click(self, **event_args):
    try:
      fahrenheit = self.fahrenheit.text
      celcius = (fahrenheit - 32) / 1.8
      self.celcius.text = f'{celcius:.1f}'
    except TypeError as error:
      self.celcius.text = None

5.5. Final Code

The full code is below.
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 convert_click(self, **event_args):
        try:
            fahrenheit = self.fahrenheit.text
            celcius = (fahrenheit - 32) / 1.8
            self.celcius.text = f'{celcius:.1f}'
        except TypeError as er:
            self.celcius.text = None

Tasks

  1. Limit the fahrenheit input to a minimum of -459.67 (absolute zero).

  2. Limit the fahrenheit input to a maximum of 7.2 trillion degrees (Large Hadron Collider).

Limit the fahrenheit input to a minimum of -459.67 (absolute zero).

def fahrenheit_change(self, **event_args):
    if self.fahrenheit.text:
        self.fahrenheit.text = max(-459.67, self.fahrenheit.text)

Limit the fahrenheit input to a maximum of 7.2 trillion degrees (Large Hadron Collider).

def fahrenheit_change(self, **event_args):
    if self.fahrenheit.text:
        self.fahrenheit.text = min(7200000000, self.fahrenheit.text)

Tasks

  1. Add error checking with feedback. While the input filed has been restricted to numbers, typing a double negative sign is still possible. So make sure that en error message is shown if this is attempted.

  2. Try making a distance converter such as miles to km or inches to cm.

  3. Try making a mass converter such as lbs to kg.

  4. Try making a volume converter such as gallons to litres.