First part of UI refactoring (with proper quick refresh).

display/firmware/src/display.rs

@@ -1,34 +1,23 @@
-use core::fmt::Write;
-
 use embedded_hal::blocking::delay::DelayUs;
 use embedded_hal::digital::v2::OutputPin;
 use epd_waveshare::epd4in2::EPD4in2;
-use epd_waveshare::prelude::{Color, DisplayStream, RefreshLUT, WaveshareDisplay};
+use epd_waveshare::prelude::{Color, DisplayStream, QuickRefresh, RefreshLUT, WaveshareDisplay};
 use mkl25z4_hal::time::CopyableMonoTimer;
-use tinygfx::color::BlackWhite::{self, Black, White};
-use tinygfx::image::{MonoBitmapImage, MonoImageData};
-use tinygfx::{Clip, Frame, MonoImage, Rectangle, Renderer, Text, TextAlignment};
+use tinygfx::color::BlackWhite;
+use tinygfx::{Frame, Renderer};
 
-use super::assets::*;
-use super::information::{Information, TemperatureHumidity};
 use super::pins::{
     DisplayBmeSpi, DisplayBusy, DisplayCs, DisplayDc, DisplayPins, DisplayPwr, DisplayRst,
 };
+use super::ui::Ui;
 
 const FULL_REFRESH_INTERVAL: usize = 5;
 
-pub struct DisplayState {}
-
-impl DisplayState {
-    pub fn new() -> DisplayState {
-        DisplayState {}
-    }
-}
-
 pub struct Display {
     pwr: DisplayPwr,
     epd: EPD4in2<DisplayBmeSpi, DisplayCs, DisplayBusy, DisplayDc, DisplayRst>,
     refresh_counter: usize,
+    current_ui: Option<Ui>,
 }
 
 impl Display {
@@ -51,16 +40,11 @@ impl Display {
             pwr: pins.pwr,
             epd,
             refresh_counter: 0,
+            current_ui: None,
         }
     }
 
-    pub fn update(
-        &mut self,
-        _display_state: &DisplayState,
-        info: &Information,
-        spi: &mut DisplayBmeSpi,
-        mut time: CopyableMonoTimer,
-    ) {
+    pub fn update(&mut self, ui: Ui, spi: &mut DisplayBmeSpi, mut time: CopyableMonoTimer) {
         // Enable power.
         self.pwr.set_low().ok();
         // Wait a bit for power to stabilize.
@@ -69,87 +53,45 @@ impl Display {
         // TODO: Error handling.
         self.epd.wake_up(spi, &mut time).ok();
 
-        // TODO: Insert values.
-        let date = Text::new(8, 8, "Samstag, 25.04.2020", &ROBOTO_22, Black);
-        let mut time = Text::new(392, 8, "12:34", &ROBOTO_22, Black);
-        time.align(TextAlignment::Right);
-        let top_bar = Rectangle::new(0, 34, 400, 1, Black);
-
-        let tile_width = 400 / 2 - 1;
-        let tile_height = (300 - 35) / 2 - 1;
-
-        let outside_strings = info.outside.map(|x| TempHumStrings::new(x));
-        let inside_strings = info.inside.map(|x| TempHumStrings::new(x));
-        let bathroom_strings = info.bathroom.map(|x| TempHumStrings::new(x));
-        let pressure_string = info.pressure.map(|x| PressureString::new(x));
-
-        let inside_tile = TempHumTile::new(
-            "Innen",
-            inside_strings.as_ref(),
-            0,
-            35,
-            tile_width,
-            tile_height,
-        );
-        let outside_tile = TempHumTile::new(
-            "Außen",
-            outside_strings.as_ref(),
-            200,
-            35,
-            tile_width,
-            tile_height,
-        );
-        let bathroom_tile = TempHumTile::new(
-            "Badezimmer",
-            bathroom_strings.as_ref(),
-            0,
-            35 + tile_height + 1,
-            tile_width,
-            tile_height,
-        );
-        let pressure_tile = PressureTile::new(
-            pressure_string.as_ref(),
-            200,
-            35 + tile_height + 1,
-            tile_width,
-            tile_height,
-        );
-
-        let vert_separator = Rectangle::new(8, 35 + tile_height, 392, 1, Black);
-        let hor_separator = Rectangle::new(tile_width, 35 + 8, 1, 300 - 35 - 16, Black);
-
-        let mut frame = Frame::new(400, 300, |mut renderer| {
-            let clip = renderer.full_frame();
-            renderer.clear(White);
-
-            top_bar.draw(clip, &mut renderer);
-            date.draw(clip, &mut renderer);
-            time.draw(clip, &mut renderer);
-
-            vert_separator.draw(clip, &mut renderer);
-            hor_separator.draw(clip, &mut renderer);
-
-            inside_tile.draw(clip, &mut renderer);
-            outside_tile.draw(clip, &mut renderer);
-            bathroom_tile.draw(clip, &mut renderer);
-            pressure_tile.draw(clip, &mut renderer);
-        });
-        frame.mirror_x(true);
-        frame.mirror_y(true);
-        let checkerboard = TinyGfxStream::new(frame);
-
-        // We perform a full update every FULL_REFRESH_INTERVAL frames.
-        // TODO: Proper background.
-        self.epd.set_background_color(Color::White);
-        if self.refresh_counter == 0 {
+        // We perform a full refresh every X images or if we do not know the state of the display.
+        let current_ui = self.current_ui.as_ref();
+        if self.refresh_counter == 0 || current_ui.is_none() {
             self.refresh_counter = FULL_REFRESH_INTERVAL - 1;
+
+            self.epd.set_background_color(Color::White);
             self.epd.set_lut(spi, Some(RefreshLUT::FULL)).unwrap();
+
+            // Just draw the new UI.
+            let mut frame = Frame::new(400, 300, |mut renderer| {
+                ui.draw(&mut renderer);
+            });
+            frame.mirror_x(true);
+            frame.mirror_y(true);
+            let stream = TinyGfxStream::new(frame);
+            self.epd.update_frame_stream(spi, stream).unwrap();
         } else {
             self.refresh_counter -= 1;
             self.epd.set_lut(spi, Some(RefreshLUT::QUICK)).unwrap();
+
+            // Draw both old and new frames.
+            let mut frame = Frame::new(400, 300, |mut renderer| {
+                current_ui.unwrap().draw(&mut renderer);
+            });
+            frame.mirror_x(true);
+            frame.mirror_y(true);
+            let stream = TinyGfxStream::new(frame);
+            self.epd.stream_old_frame(spi, stream).unwrap();
+
+            let mut frame = Frame::new(400, 300, |mut renderer| {
+                ui.draw(&mut renderer);
+            });
+            frame.mirror_x(true);
+            frame.mirror_y(true);
+            let stream = TinyGfxStream::new(frame);
+            self.epd.stream_new_frame(spi, stream).unwrap();
         }
+        self.current_ui = Some(ui);
 
-        self.epd.update_frame_stream(spi, checkerboard).unwrap();
         self.epd.display_frame(spi).unwrap();
 
         // Disable power again.
@@ -157,233 +99,6 @@ impl Display {
     }
 }
 
-struct WriteBuffer<T> {
-    buffer: T,
-    length: usize,
-}
-
-impl<T> Write for WriteBuffer<T>
-where
-    T: AsMut<[u8]>,
-{
-    fn write_str(&mut self, s: &str) -> core::fmt::Result {
-        let bytes = s.as_bytes();
-        if bytes.len() <= self.buffer.as_mut().len() - self.length {
-            self.buffer.as_mut()[self.length..bytes.len() + self.length].copy_from_slice(bytes);
-            self.length += bytes.len();
-            Ok(())
-        } else {
-            Err(core::fmt::Error)
-        }
-    }
-}
-
-impl<T> WriteBuffer<T>
-where
-    T: AsRef<[u8]>,
-{
-    fn to_str<'a>(&'a self) -> &'a str {
-        unsafe {
-            // Safe, we did not use any non-UTF characters above.
-            core::str::from_utf8_unchecked(&self.buffer.as_ref()[0..self.length])
-        }
-    }
-}
-
-struct TempHumStrings {
-    temp: WriteBuffer<[u8; 12]>,
-    hum: WriteBuffer<[u8; 12]>,
-}
-
-impl TempHumStrings {
-    fn new(data: TemperatureHumidity) -> TempHumStrings {
-        let mut strings = TempHumStrings {
-            temp: WriteBuffer {
-                buffer: [0u8; 12],
-                length: 0,
-            },
-            hum: WriteBuffer {
-                buffer: [0u8; 12],
-                length: 0,
-            },
-        };
-        write!(
-            strings.temp,
-            "{},{}°C",
-            data.temperature / 10,
-            (data.temperature % 10).abs()
-        )
-        .ok();
-        let humidity = (data.humidity + 5) / 10;
-        write!(strings.hum, "{},{}%", humidity / 10, humidity % 10).ok();
-        strings
-    }
-
-    fn temperature<'a>(&'a self) -> &'a str {
-        self.temp.to_str()
-    }
-
-    fn humidity<'a>(&'a self) -> &'a str {
-        self.hum.to_str()
-    }
-}
-
-struct TempHumTile<'a> {
-    title: Text<'a, BlackWhite>,
-    data: Option<(
-        MonoImage<'static, MonoBitmapImage, BlackWhite>,
-        Text<'a, BlackWhite>,
-        MonoImage<'static, MonoBitmapImage, BlackWhite>,
-        Text<'a, BlackWhite>,
-    )>,
-    error: Option<MonoImage<'static, MonoBitmapImage, BlackWhite>>,
-}
-
-impl<'a> TempHumTile<'a> {
-    fn new(
-        title: &'a str,
-        data: Option<&'a TempHumStrings>,
-        left: i32,
-        top: i32,
-        width: i32,
-        height: i32,
-    ) -> Self {
-        let center = left + width / 2;
-
-        let mut title = Text::new(center, top + 10, title, &ROBOTO_30, Black);
-        title.align(TextAlignment::Center);
-
-        let mut tile = Self {
-            title,
-            data: None,
-            error: None,
-        };
-
-        if let Some(data) = data {
-            let temp_width =
-                ROBOTO_30.get_text_size(data.temperature()).0 + 1 + THERMOMETER_36.width();
-            let temp_icon = MonoImage::new(
-                center - (temp_width / 2) as i32,
-                top + 48,
-                &THERMOMETER_36,
-                Black,
-            );
-            let mut temperature = Text::new(
-                center + (temp_width - temp_width / 2) as i32,
-                top + 48,
-                data.temperature(),
-                &ROBOTO_30,
-                Black,
-            );
-            temperature.align(TextAlignment::Right);
-            let hum_width = ROBOTO_30.get_text_size(data.humidity()).0 + 1 + THERMOMETER_36.width();
-            let hum_icon = MonoImage::new(
-                center - (hum_width / 2) as i32,
-                top + 82,
-                &WATER_PERCENT_36,
-                Black,
-            );
-            let mut humidity = Text::new(
-                center + (hum_width - hum_width / 2) as i32,
-                top + 82,
-                data.humidity(),
-                &ROBOTO_30,
-                Black,
-            );
-            humidity.align(TextAlignment::Right);
-
-            tile.data = Some((temp_icon, temperature, hum_icon, humidity));
-        } else {
-            tile.error = Some(MonoImage::new(
-                center - (WIFI_STRENGTH_ALERT_36.width() / 2) as i32,
-                top + height / 2 - (WIFI_STRENGTH_ALERT_36.height() / 2) as i32,
-                &WIFI_STRENGTH_ALERT_36,
-                Black,
-            ));
-        }
-
-        tile
-    }
-
-    fn draw(&self, clip: Clip, renderer: &mut Renderer<BlackWhite>) {
-        self.title.draw(clip, renderer);
-        if let Some(data) = self.data.as_ref() {
-            data.0.draw(clip, renderer);
-            data.1.draw(clip, renderer);
-            data.2.draw(clip, renderer);
-            data.3.draw(clip, renderer);
-        }
-        if let Some(error) = self.error.as_ref() {
-            error.draw(clip, renderer);
-        }
-    }
-}
-
-struct PressureString(WriteBuffer<[u8; 12]>);
-
-impl PressureString {
-    fn new(pressure: u32) -> PressureString {
-        let pressure = (pressure + 5) / 10;
-        let mut buffer = WriteBuffer {
-            buffer: [0u8; 12],
-            length: 0,
-        };
-        write!(buffer, "{},{}hPa", pressure / 10, pressure % 10).ok();
-        PressureString(buffer)
-    }
-
-    fn to_str<'a>(&'a self) -> &'a str {
-        self.0.to_str()
-    }
-}
-
-struct PressureTile<'a> {
-    title: Text<'a, BlackWhite>,
-    data: Option<Text<'a, BlackWhite>>,
-    error: Option<MonoImage<'static, MonoBitmapImage, BlackWhite>>,
-}
-
-impl<'a> PressureTile<'a> {
-    fn new(data: Option<&'a PressureString>, left: i32, top: i32, width: i32, height: i32) -> Self {
-        let center = left + width / 2;
-
-        let mut title = Text::new(center, top + 10, "Luftdruck", &ROBOTO_30, Black);
-        title.align(TextAlignment::Center);
-
-        let mut tile = Self {
-            title,
-            data: None,
-            error: None,
-        };
-
-        if let Some(data) = data {
-            let mut pressure = Text::new(center, top + 48, data.to_str(), &ROBOTO_30, Black);
-            pressure.align(TextAlignment::Center);
-
-            tile.data = Some(pressure);
-        } else {
-            tile.error = Some(MonoImage::new(
-                center - (WIFI_STRENGTH_ALERT_36.width() / 2) as i32,
-                top + height / 2 - (WIFI_STRENGTH_ALERT_36.height() / 2) as i32,
-                &WIFI_STRENGTH_ALERT_36,
-                Black,
-            ));
-        }
-
-        tile
-    }
-
-    fn draw(&self, clip: Clip, renderer: &mut Renderer<BlackWhite>) {
-        self.title.draw(clip, renderer);
-        if let Some(data) = self.data.as_ref() {
-            data.draw(clip, renderer);
-        }
-        if let Some(error) = self.error.as_ref() {
-            error.draw(clip, renderer);
-        }
-    }
-}
-
 struct TinyGfxStream<Draw> {
     frame: Frame<Draw, BlackWhite>,
     buffer: [u8; 400 / 8],

display/firmware/src/information.rs

@@ -2,6 +2,7 @@
 
 use super::sensors::BME280Data;
 
+#[derive(Clone)]
 pub struct Information {
     pub time: u32,
     pub valid: bool,

display/firmware/src/main.rs

@@ -6,6 +6,7 @@ mod information;
 mod pins;
 mod radio;
 mod sensors;
+mod ui;
 
 // TODO: Enable warnings again.
 #[allow(unused)]
@@ -23,16 +24,17 @@ use mkl25z4_hal::timer::TimerInterrupt;
 use panic_semihosting as _;
 use protocol::{Location, ValueType};
 
-use display::{Display, DisplayState};
+use display::Display;
 use information::{Information, TemperatureHumidity};
 use pins::{BME280Pins, DisplayBmeSpi};
 use radio::Radio;
+use ui::tiles::TileView;
+use ui::{Ui, View};
 
 #[rtfm::app(device = mkl25z4_hal::mkl25z4, peripherals = true)]
 const APP: () = {
     struct Resources {
         info: Information,
-        display_state: DisplayState,
         display: Display,
         display_bme_spi: Option<DisplayBmeSpi>,
         bme_pins: Option<BME280Pins>,
@@ -87,7 +89,6 @@ const APP: () = {
                 pressure: None,
                 local: None,
             },
-            display_state: DisplayState::new(),
             display,
             display_bme_spi: Some(pins.display_bme_spi),
             bme_pins: Some(pins.bme),
@@ -162,11 +163,11 @@ const APP: () = {
         ctx.spawn.update_display().ok();
     }
 
-    #[task(priority = 2, resources = [info, display_state, display, display_bme_spi, &time])]
+    #[task(priority = 2, resources = [info, display, display_bme_spi, &time])]
     fn update_display(ctx: update_display::Context) {
+        let ui = Ui::view(View::Tiles(TileView::new(ctx.resources.info.clone())));
         ctx.resources.display.update(
-            &ctx.resources.display_state,
-            &ctx.resources.info,
+            ui,
             ctx.resources.display_bme_spi.as_mut().unwrap(),
             ctx.resources.time.clone(),
         );

display/firmware/src/ui/clock.rs

@@ -0,0 +1,17 @@
+use tinygfx::color::BlackWhite;
+use tinygfx::Renderer;
+
+pub struct ClockView {
+    // TODO
+}
+
+impl ClockView {
+    pub fn new() -> ClockView {
+        // TODO
+        ClockView {}
+    }
+
+    pub fn draw(&self, _renderer: &mut Renderer<BlackWhite>) {
+        // TODO
+    }
+}

display/firmware/src/ui/mod.rs

@@ -0,0 +1,37 @@
+use tinygfx::color::BlackWhite;
+use tinygfx::Renderer;
+
+pub mod clock;
+pub mod tiles;
+
+use clock::ClockView;
+use tiles::TileView;
+
+pub struct Ui {
+    view: View,
+}
+
+impl Ui {
+    pub fn view(view: View) -> Ui {
+        Ui { view }
+    }
+
+    // TODO: Black/white/red frames or greyscale frames?
+    pub fn draw(&self, renderer: &mut Renderer<BlackWhite>) {
+        self.view.draw(renderer);
+    }
+}
+
+pub enum View {
+    Tiles(TileView),
+    Clock(ClockView),
+}
+
+impl View {
+    fn draw(&self, renderer: &mut Renderer<BlackWhite>) {
+        match self {
+            View::Tiles(view) => view.draw(renderer),
+            View::Clock(view) => view.draw(renderer),
+        }
+    }
+}

display/firmware/src/ui/tiles.rs

@@ -0,0 +1,313 @@
+use core::fmt::Write;
+
+use tinygfx::color::BlackWhite::{self, Black, White};
+use tinygfx::image::{MonoBitmapImage, MonoImageData};
+use tinygfx::{Clip, MonoImage, Rectangle, Renderer, Text, TextAlignment};
+
+use super::super::assets::*;
+use super::super::information::{Information, TemperatureHumidity};
+
+pub struct TileView {
+    info: Information,
+}
+
+impl TileView {
+    pub fn new(info: Information) -> TileView {
+        // TODO: Optimization, prepare more values here.
+        TileView { info }
+    }
+
+    pub fn draw(&self, renderer: &mut Renderer<BlackWhite>) {
+        // TODO: Insert values.
+        let date = Text::new(8, 8, "Samstag, 25.04.2020", &ROBOTO_22, Black);
+        let mut time = Text::new(392, 8, "12:34", &ROBOTO_22, Black);
+        time.align(TextAlignment::Right);
+        let top_bar = Rectangle::new(0, 34, 400, 1, Black);
+
+        let tile_width = 400 / 2 - 1;
+        let tile_height = (300 - 35) / 2 - 1;
+
+        let outside_strings = self.info.outside.map(|x| TempHumStrings::new(x));
+        let inside_strings = self.info.inside.map(|x| TempHumStrings::new(x));
+        let bathroom_strings = self.info.bathroom.map(|x| TempHumStrings::new(x));
+        let pressure_string = self.info.pressure.map(|x| PressureString::new(x));
+
+        let inside_tile = TempHumTile::new(
+            "Innen",
+            inside_strings.as_ref(),
+            0,
+            35,
+            tile_width,
+            tile_height,
+        );
+        let outside_tile = TempHumTile::new(
+            "Außen",
+            outside_strings.as_ref(),
+            200,
+            35,
+            tile_width,
+            tile_height,
+        );
+        let bathroom_tile = TempHumTile::new(
+            "Badezimmer",
+            bathroom_strings.as_ref(),
+            0,
+            35 + tile_height + 1,
+            tile_width,
+            tile_height,
+        );
+        let pressure_tile = PressureTile::new(
+            pressure_string.as_ref(),
+            200,
+            35 + tile_height + 1,
+            tile_width,
+            tile_height,
+        );
+
+        let vert_separator = Rectangle::new(8, 35 + tile_height, 392, 1, Black);
+        let hor_separator = Rectangle::new(tile_width, 35 + 8, 1, 300 - 35 - 16, Black);
+
+        // Draw everything.
+        let clip = renderer.full_frame();
+        renderer.clear(White);
+
+        top_bar.draw(clip, renderer);
+        date.draw(clip, renderer);
+        time.draw(clip, renderer);
+
+        vert_separator.draw(clip, renderer);
+        hor_separator.draw(clip, renderer);
+
+        inside_tile.draw(clip, renderer);
+        outside_tile.draw(clip, renderer);
+        bathroom_tile.draw(clip, renderer);
+        pressure_tile.draw(clip, renderer);
+    }
+}
+
+struct WriteBuffer<T> {
+    buffer: T,
+    length: usize,
+}
+
+impl<T> Write for WriteBuffer<T>
+where
+    T: AsMut<[u8]>,
+{
+    fn write_str(&mut self, s: &str) -> core::fmt::Result {
+        let bytes = s.as_bytes();
+        if bytes.len() <= self.buffer.as_mut().len() - self.length {
+            self.buffer.as_mut()[self.length..bytes.len() + self.length].copy_from_slice(bytes);
+            self.length += bytes.len();
+            Ok(())
+        } else {
+            Err(core::fmt::Error)
+        }
+    }
+}
+
+impl<T> WriteBuffer<T>
+where
+    T: AsRef<[u8]>,
+{
+    fn to_str<'a>(&'a self) -> &'a str {
+        unsafe {
+            // Safe, we did not use any non-UTF characters above.
+            core::str::from_utf8_unchecked(&self.buffer.as_ref()[0..self.length])
+        }
+    }
+}
+
+struct TempHumStrings {
+    temp: WriteBuffer<[u8; 12]>,
+    hum: WriteBuffer<[u8; 12]>,
+}
+
+impl TempHumStrings {
+    fn new(data: TemperatureHumidity) -> TempHumStrings {
+        let mut strings = TempHumStrings {
+            temp: WriteBuffer {
+                buffer: [0u8; 12],
+                length: 0,
+            },
+            hum: WriteBuffer {
+                buffer: [0u8; 12],
+                length: 0,
+            },
+        };
+        write!(
+            strings.temp,
+            "{},{}°C",
+            data.temperature / 10,
+            (data.temperature % 10).abs()
+        )
+        .ok();
+        let humidity = (data.humidity + 5) / 10;
+        write!(strings.hum, "{},{}%", humidity / 10, humidity % 10).ok();
+        strings
+    }
+
+    fn temperature<'a>(&'a self) -> &'a str {
+        self.temp.to_str()
+    }
+
+    fn humidity<'a>(&'a self) -> &'a str {
+        self.hum.to_str()
+    }
+}
+
+struct TempHumTile<'a> {
+    title: Text<'a, BlackWhite>,
+    data: Option<(
+        MonoImage<'static, MonoBitmapImage, BlackWhite>,
+        Text<'a, BlackWhite>,
+        MonoImage<'static, MonoBitmapImage, BlackWhite>,
+        Text<'a, BlackWhite>,
+    )>,
+    error: Option<MonoImage<'static, MonoBitmapImage, BlackWhite>>,
+}
+
+impl<'a> TempHumTile<'a> {
+    fn new(
+        title: &'a str,
+        data: Option<&'a TempHumStrings>,
+        left: i32,
+        top: i32,
+        width: i32,
+        height: i32,
+    ) -> Self {
+        let center = left + width / 2;
+
+        let mut title = Text::new(center, top + 10, title, &ROBOTO_30, Black);
+        title.align(TextAlignment::Center);
+
+        let mut tile = Self {
+            title,
+            data: None,
+            error: None,
+        };
+
+        if let Some(data) = data {
+            let temp_width =
+                ROBOTO_30.get_text_size(data.temperature()).0 + 1 + THERMOMETER_36.width();
+            let temp_icon = MonoImage::new(
+                center - (temp_width / 2) as i32,
+                top + 48,
+                &THERMOMETER_36,
+                Black,
+            );
+            let mut temperature = Text::new(
+                center + (temp_width - temp_width / 2) as i32,
+                top + 48,
+                data.temperature(),
+                &ROBOTO_30,
+                Black,
+            );
+            temperature.align(TextAlignment::Right);
+            let hum_width = ROBOTO_30.get_text_size(data.humidity()).0 + 1 + THERMOMETER_36.width();
+            let hum_icon = MonoImage::new(
+                center - (hum_width / 2) as i32,
+                top + 82,
+                &WATER_PERCENT_36,
+                Black,
+            );
+            let mut humidity = Text::new(
+                center + (hum_width - hum_width / 2) as i32,
+                top + 82,
+                data.humidity(),
+                &ROBOTO_30,
+                Black,
+            );
+            humidity.align(TextAlignment::Right);
+
+            tile.data = Some((temp_icon, temperature, hum_icon, humidity));
+        } else {
+            tile.error = Some(MonoImage::new(
+                center - (WIFI_STRENGTH_ALERT_36.width() / 2) as i32,
+                top + height / 2 - (WIFI_STRENGTH_ALERT_36.height() / 2) as i32,
+                &WIFI_STRENGTH_ALERT_36,
+                Black,
+            ));
+        }
+
+        tile
+    }
+
+    fn draw(&self, clip: Clip, renderer: &mut Renderer<BlackWhite>) {
+        self.title.draw(clip, renderer);
+        if let Some(data) = self.data.as_ref() {
+            data.0.draw(clip, renderer);
+            data.1.draw(clip, renderer);
+            data.2.draw(clip, renderer);
+            data.3.draw(clip, renderer);
+        }
+        if let Some(error) = self.error.as_ref() {
+            error.draw(clip, renderer);
+        }
+    }
+}
+
+struct PressureString(WriteBuffer<[u8; 12]>);
+
+impl PressureString {
+    fn new(pressure: u32) -> PressureString {
+        let pressure = (pressure + 5) / 10;
+        let mut buffer = WriteBuffer {
+            buffer: [0u8; 12],
+            length: 0,
+        };
+        write!(buffer, "{},{}hPa", pressure / 10, pressure % 10).ok();
+        PressureString(buffer)
+    }
+
+    fn to_str<'a>(&'a self) -> &'a str {
+        self.0.to_str()
+    }
+}
+
+struct PressureTile<'a> {
+    title: Text<'a, BlackWhite>,
+    data: Option<Text<'a, BlackWhite>>,
+    error: Option<MonoImage<'static, MonoBitmapImage, BlackWhite>>,
+}
+
+impl<'a> PressureTile<'a> {
+    fn new(data: Option<&'a PressureString>, left: i32, top: i32, width: i32, height: i32) -> Self {
+        let center = left + width / 2;
+
+        let mut title = Text::new(center, top + 10, "Luftdruck", &ROBOTO_30, Black);
+        title.align(TextAlignment::Center);
+
+        let mut tile = Self {
+            title,
+            data: None,
+            error: None,
+        };
+
+        if let Some(data) = data {
+            let mut pressure = Text::new(center, top + 48, data.to_str(), &ROBOTO_30, Black);
+            pressure.align(TextAlignment::Center);
+
+            tile.data = Some(pressure);
+        } else {
+            tile.error = Some(MonoImage::new(
+                center - (WIFI_STRENGTH_ALERT_36.width() / 2) as i32,
+                top + height / 2 - (WIFI_STRENGTH_ALERT_36.height() / 2) as i32,
+                &WIFI_STRENGTH_ALERT_36,
+                Black,
+            ));
+        }
+
+        tile
+    }
+
+    fn draw(&self, clip: Clip, renderer: &mut Renderer<BlackWhite>) {
+        self.title.draw(clip, renderer);
+        if let Some(data) = self.data.as_ref() {
+            data.draw(clip, renderer);
+        }
+        if let Some(error) = self.error.as_ref() {
+            error.draw(clip, renderer);
+        }
+    }
+}