Brukergrensesnitt

Brukergrensesnitt#

De fleste moderne programmer og apper har et dynamisk grafisk brukergrensesnitt (GUI: Graphical User Interface) hvor man kan trykke på knapper og swipe med fingeren. Med mindre du er helt linux-nørd eller en gammel fis så er det nok dette du er vant med.

I dette delkapittelet skal vi lære å lage brukergrensesnitt i Python med pakken streamlit fordi det er enkelt, kult og sexy. Det finnes også andre pakker for brukergrensesnitt, men disse er ofte knotete å skrive (tkinter), eller ser ut som en Windows XP Install Wizard (… også tkinter).

Installasjon og starte programmer#

Vi installerer streamlit ved å kjøre pip install streamlit i terminalvinduet.

For å kjøre programmet vårt skriver vi streamlit run <programmet vårt>.py. Da åpnes grensesnittet vårt i browseren.

Til eksamen kan det være lurt å skrive dette som en kommentar i begynnelsen av programmet slik at sensor forstår hvordan man kjører programmet.

Eksempel: Enkel kalkulator 🧮#

Her er et eksempel på en enkel kalkulator.

import streamlit as st
from math import sqrt

st.title("Enkel kalkulator")

a = st.number_input("Velg et tall a")
b = st.number_input("Velg et tall b")
svar = None

if st.button("a+b"):
    svar = a + b
if st.button("a-b"):
    svar = a - b
if st.button("a*b"):
    svar = a * b
if st.button("a**b"):
    svar = a ** b

if svar:
    st.write(f"Svar: {svar}")

Eksempel: Avansert kalkulator#

Denne kalkulatoren har en dropdown som lar oss velge hvilken type kalkulator vi skal ha. I tillegg er knappene satt horisontalt med st.columns().

import streamlit as st
from math import sqrt

st.title("Kalkulator")

kalkulator_type = st.selectbox("Velg en type", ["Ett tall", "To tall"])

st.divider()

if kalkulator_type == "Ett tall":
    x = st.number_input("Velg et tall x", step = 1)
    svar = None

    cols = st.columns(3)

    with cols[0]:
        if st.button("1/x"):
            svar = 1/x
    
    with cols[1]:
        if st.button("x**2"):
            svar = x**2
    
    with cols[2]:
        if st.button("sqrt(x)"):
            svar = sqrt(x)

    st.write(f"Svar: {svar}")

elif kalkulator_type == "To tall":
    a = st.number_input("Velg et tall a", step=1)
    b = st.number_input("Velg et tall b", step=1)
    svar = None

    cols = st.columns(5)

    with cols[0]:
        if st.button("a + b"):
            svar = a + b
    
    with cols[1]:
        if st.button("a - b"):
            svar = a - b
    
    with cols[2]:
        if st.button("a * b"):
            svar = a * b

    with cols[3]:
        if st.button("a / b"):
            svar = a / b

    with cols[4]:
        if st.button("a ** b"):
            svar = a ** b

    st.write(f"Svar: {svar}")

Eksempel: Visualisering av data 📈#

Vi kan også lese og visualisere data med pandas og streamlit.

Her tar jeg utgangspunkt i datafilen boligpriser.csv med tall fra SSB.

import streamlit as st
import pandas as pd

st.title("Visualisering av data")

st.write("Her er en oversikt over boligpriser i Oslo/Bærum for brukte boliger.")

with open("boligpriser.csv") as file:
    df = pd.read_csv("boligpriser.csv", delimiter=";")

st.dataframe(df, use_container_width=True)

st.line_chart(df, x="År", y="Prisindeks for brukte boliger")

Dokumentasjonen#

Du kan finne de forskjellige streamlit-objektene i dokumentasjonen.

Jeg overlater dette til leseren 👽

Oppgaver#

Her er noen oppgaver til inspirasjon, men det beste er å finne på noe du har lyst til å lage selv.

Oppgave 1 📈

Ta utgangspunkt i datafilen konsumprisindeks.csv.

  1. Lag en app som visualiserer utviklingen av konsumprisindeks både med en tabell og med et linjediagram.

  2. Utvid appen med en kalkulator som lar deg velge et år \(x\) i fortiden og en viss sum med penger. Skriv så ut hvor mye penger dette ville tilsvart i \(2023\).

Test kalkulatoren din opp mot den fra SSB (nettside).

Oppgave 2 🏋️

Lag en treningsapp. Brukeren skal kunne legge inn informasjon om en treningsøkt, som skal lagres til en datafil.

Det skal også være mulig å analysere tidligere treningsøkter i appen.

Oppgave 3 (utfordring) 🎈

I denne oppgaven vil du du trenge å se på st.session_state()

Lag et program med grensesnitt som trener brukeren på gangetabellen.

Bruk gjerne st.balloons() eller st.success() når brukeren får riktig og st.error() når brukeren har feil.

Løsningsforslag

Dette er en overraskende vanskelig oppgave på grunn av hvordan streamlit fungerer.

Siden hele siden refresher ved hver eneste input i felter eller tastetrykk er vi nødt til å lagre ting i st.session_state()-ordboke, som ligger lagret selv om man refresher.

import streamlit as st
from random import randint

# Setter svarene i session_state-ordboken
if "a" not in st.session_state:
    st.session_state["a"] = randint(1, 9)
    st.session_state["b"] = randint(1, 9)

# Skriver spørsmålet
st.write(f"Hva er {st.session_state["a"]} ganger {st.session_state["b"]}?")

# Input-felt
c = st.number_input("Skriv inn svaret:", step=1)

# Svar-knapp
if st.button("Svar"):
    if st.session_state["a"] * st.session_state["b"] == c:
        st.success("riktig :)")
        st.balloons()
    else:
        st.error("feil ")

# Ny-oppgave-knapp
if st.button("Ny oppgave"):
    st.session_state["a"] = randint(1, 9)
    st.session_state["b"] = randint(1, 9)
    st.rerun()
Contents