Merge pull request #6 from gordominossi/feature/gui-pages

Feature/gui pages

Libraries/graphics/doubleBuffering.lua

@@ -458,8 +458,8 @@ end
 
 local function drawFrame(x, y, width, height, color)
     local stringUp, stringDown, x2 =
-        "┌" .. string.rep("─", width - 2) .. "┐",
+        "╭" .. string.rep("─", width - 2) .. "╮",
-        "└" .. string.rep("─", width - 2) .. "┘",
+        "╰" .. string.rep("─", width - 2) .. "╯",
         x + width - 1
 
     drawText(x, y, color, stringUp)

Programs/monitor-system/api/gui/constants.lua

@@ -0,0 +1,6 @@
+local constants = {}
+
+constants.baseWidth = 40
+constants.baseHeight = 10
+
+return constants

Programs/monitor-system/api/gui/page/glasses.lua

@@ -5,3 +5,7 @@
 |sto| w | w | w |
 |not| power |b|f|
 --]]
+
+return {
+    title = "Glasses"
+}

Programs/monitor-system/api/gui/page/help.lua

@@ -0,0 +1,11 @@
+--[[
+|gla|   help    |
+|wid|ev ti|ev ti|
+|ove|ev ti|ev ti|
+|sto|ev ti|ev ti|
+|not| power |b|f|
+--]]
+
+return {
+    title = "Help"
+}

Programs/monitor-system/api/gui/page/init.lua

@@ -1,54 +1,143 @@
 -- Import section
-local doubleBuffer = require("graphics.doubleBuffering")
+Computer = require("computer")
-Colors = require("graphics.colors")
 Unicode = require("unicode")
+Event = require("event")
+DoubleBuffer = require("graphics.doubleBuffering")
+Constants = require("api.gui.constants")
+Colors = require("graphics.colors")
+Widget = require("api.gui.widget")
 --
 
+-- GPU resolution should be 160 x 50.
+-- Screen should be 8 x 5 blocks.
+-- That way, each block should have a resolution of 20 x 10
+-- Organizing the page:
+---- Title on top of the page (title)
+---- Side panel on the left With a width of 40 pixels (panel)
+---- 2 buttons for page navigation (b, f)
+------- Each with a width of 20 pixels
+---- 1 Power widget on the bottom, with a width of 80 pixels (power)
+---- 9 Regular widgets on the right, in a 3 x 3 grid (w)
+------ Each one with a width of 40 pixels
+--[[
+| p |   title   |
+| a | w | w | w |
+| n | w | w | w |
+| e | w | w | w |
+| l | power |b|f|
+--]]
 local pages = {
-    overview = require("Overview"),
+    glasses = require("api.gui.page.glasses"),
-    notifications = require("notifications"),
+    widgets = require("api.gui.page.widgets"),
-    stock = require("stock"),
+    help = require("api.gui.page.help"),
-    help = require("help"),
+    stock = require("api.gui.page.stock"),
-    widgets = require("widgets"),
+    notifications = require("api.gui.page.notifications"),
-    glasses = require("glasses")
+    overview = require("api.gui.page.overview")
+}
+pages[1] = pages.glasses
+pages[2] = pages.widgets
+pages[3] = pages.help
+pages[4] = pages.stock
+pages[5] = pages.notifications
+pages[6] = pages.overview
+
+local page = {}
+
+local elements = {
+    machineWidgets = {},
+    powerWidgets = {},
+    panelSections = {},
+    navigationButtons = {}
 }
 
-function pages:draw(component, index)
+Event.listen(
-    if index < 10 then
+    "touch",
-        local x = 40 + 40 * ((index - 1) % 3)
+    function(_, _, x, y)
-        local y = 10 * math.ceil((index) / 3)
+        local xContribution = x / Constants.baseWidth
-        doubleBuffer.drawRectangle(x + 1, y + 1, 38, 8, Colors.machineBackground, Colors.machineBackground, "█")
+        local yContribution = 4 * math.floor(y / Constants.baseHeight)
-        doubleBuffer.drawFrame(x + 1, y + 1, 38, 8, Colors.labelColor)
+        local screenIndex = 1 + (math.floor(2 * (xContribution + yContribution))) / 2
-        doubleBuffer.drawLine(x + 4, y + 4, x + 16, y + 4, Colors.machineBackground, Colors.mainColor, "_")
+
-        doubleBuffer.drawText(x + 1, y + 1, Colors.labelColor, component.name)
+        local selected = elements[screenIndex] or elements[screenIndex - 0.5]
-        doubleBuffer.drawText(
+        selected:onClick()
-            x + 4,
-            y + 4,
-            component.working and Colors.workingColor or Colors.errorColor,
-            component.leftInfo
-        )
-        if component.middleInfo then
-            doubleBuffer.drawText(
-                x + 20 - Unicode.len(component.middleInfo),
-                y + 5,
-                Colors.accentB,
-                component.middleInfo
-            )
-        end
-        if component.rightInfo then
-            doubleBuffer.drawText(
-                x + 20 - Unicode.len(component.rightInfo) - 4,
-                y + 5,
-                Colors.accentA,
-                component.rightInfo
-            )
-        end
-    elseif index == 10 then
     end
-    return
+)
+
+local function drawTitle(title)
+    local x = Constants.baseWidth
+    local y = 0
+    local scale = 3
+    Widget.drawBaseWidget(x, y, scale, title)
 end
 
-function pages:render()
+local function drawPanelSection(index, title)
+    local x = 0
+    local y = (index - 1) * Constants.baseHeight
+    local scale = 1
+    Widget.drawBaseWidget(x, y, scale, title)
 end
 
-return pages
+function page.create(element)
+    drawTitle(element.title)
+
+    local panelIndex = 1
+    for _, pg in ipairs(pages) do
+        if pg ~= element then
+            elements.panelSections[panelIndex] = {
+                title = pg.title,
+                onClick = function()
+                    page.create(pg)
+                end
+            }
+            drawPanelSection(panelIndex, pg.title)
+            panelIndex = panelIndex + 1
+        end
+    end
+
+    elements[4.5] = {
+        onClick = function()
+            Computer.shutdown(true)
+        end
+    }
+
+    elements[6] = elements.machineWidgets[1]
+    elements[7] = elements.machineWidgets[2]
+    elements[8] = elements.machineWidgets[3]
+    elements[10] = elements.machineWidgets[4]
+    elements[11] = elements.machineWidgets[5]
+    elements[12] = elements.machineWidgets[6]
+    elements[14] = elements.machineWidgets[7]
+    elements[15] = elements.machineWidgets[8]
+    elements[16] = elements.machineWidgets[9]
+
+    elements[18] = elements.powerWidgets[1]
+    elements[19] = elements.powerWidgets[1]
+
+    elements[1] = elements.panelSections[1]
+    elements[5] = elements.panelSections[2]
+    elements[9] = elements.panelSections[3]
+    elements[13] = elements.panelSections[4]
+    elements[17] = elements.panelSections[5]
+
+    elements[20] = elements.navigationButtons[1]
+    elements[20.5] = elements.navigationButtons[2]
+end
+
+function page.fake()
+    elements.machineWidgets = Widget.fakeWidgets()
+    elements.powerWidgets = Widget.fakePowerWidget()
+    page.create(pages.overview)
+end
+
+function page.update()
+    for index, machineWidget in ipairs(elements.machineWidgets) do
+        machineWidget:update()
+        machineWidget:draw(index)
+    end
+    for index, powerWidget in ipairs(elements.powerWidgets) do
+        powerWidget:update()
+        powerWidget:draw(index)
+    end
+    DoubleBuffer.drawChanges()
+end
+
+return page

Programs/monitor-system/api/gui/page/notifications.lua

@@ -5,3 +5,7 @@
 |sto|ev ti|ev ti|
 |ove| power |b|f|
 --]]
+
+return {
+    title ="Notifications"
+}

Programs/monitor-system/api/gui/page/overview.lua

@@ -5,3 +5,7 @@
 |sto| w | w | w |
 |not| power |b|f|
 --]]
+
+return {
+    title = "Overview"
+}

Programs/monitor-system/api/gui/page/stock.lua

@@ -0,0 +1,11 @@
+--[[
+|gla|   stock   |
+|wid|ev ti|ev ti|
+|hel|ev ti|ev ti|
+|ove|ev ti|ev ti|
+|not| power |b|f|
+--]]
+
+return {
+    title = "Stock"
+}

Programs/monitor-system/api/gui/page/widgets.lua

@@ -5,3 +5,7 @@
 |sto| w | w | w |
 |not| power |b|f|
 --]]
+
+return {
+    title = "Widgets"
+}

Programs/monitor-system/api/gui/widget.lua

@@ -1,46 +1,212 @@
 Component = require("component")
-GPU = Component.gpu
+Unicode = require("unicode")
-Screen = Component.screen
+DoubleBuffer = require("graphics.doubleBuffering")
+Constants = require("api.gui.constants")
+Colors = require("graphics.colors")
 
--- GPU resolution should be 160 x 50.
+local widget = {}
--- Screen should be 16 blocks by 10 blocks. (Could also be 8 x 5).
--- That way, each block should have a resolution of 10 x 10
--- Organizing the page:
----- Title on top of the page (title)
----- Side panel on the left With a width of 20 pixels (panel)
----- Two buttons for page navigation (b, f)
-------- Each with a width of 10 pixels
----- 1 Power widget on the bottom, with a width of 40 pixels (power)
----- 9 Regular widgets on the right, in a 3 x 3 grid (w)
------- Each one with a width of 20 pixels
---[[
-| p |   title   |
-| a | w | w | w |
-| n | w | w | w |
-| e | w | w | w |
-| l | power |b|f|
---]]
 
-
+local states = {
-local page = {
+    {name = "ON", color = Colors.workingColor},
-    title = {},
+    {name = "IDLE", color = Colors.idleColor},
-    panel = {},
+    {name = "OFF", color = Colors.offColor},
-    back = {},
+    {name = "BROKEN", color = Colors.errorColor}
-    forwards = {}
 }
 
-local widget = {
+local function drawProgress(x, y, width, height, progress, maxProgress, color)
-    name = "",
+    progress = math.floor(progress * (width + height - 2) / (maxProgress ~= 0 and maxProgress or 1))
-    leftString = "",
-    middleString = "",
-    rightString = "",
-    height = 10,
-    width = 20,
-}
 
-function widget.create(name, leftString, middleString, rightString, screenIndex)
+    local lengths = {
-    widget.name = name or "Unused"
+        first = progress > 5 and 5 or progress,
-    widget.leftString = leftString or ""
+        second = progress > height - 2 + 5 and height - 2 or progress - (5),
-    widget.middleString = middleString or ""
+        third = progress > width - 7 + height - 2 + 5 and width - 7 or progress - (height - 2 + 5)
-    widget.rightString = rightString or ""
+    }
+    DoubleBuffer.drawRectangle(x + 6, y / 2 + 1, 2, 1, Colors.machineBackground, Colors.machineBackground, "█")
+    DoubleBuffer.drawSemiPixelRectangle(x + 6 - lengths.first, y + 1, lengths.first, 1, color)
+    DoubleBuffer.drawSemiPixelRectangle(x + 1, y + 2, 1, lengths.second, color)
+    DoubleBuffer.drawSemiPixelRectangle(x + 1, y + height, lengths.third, 1, color)
+    DoubleBuffer.drawRectangle(x + width - 6, (y + height) / 2, 2, 1, Colors.machineBackground, Colors.machineBackground, "█")
+    DoubleBuffer.drawSemiPixelRectangle(x + width - 4, y + height, lengths.first, 1, color)
+    DoubleBuffer.drawSemiPixelRectangle(x + width, y + height - lengths.second, 1, lengths.second, color)
+    DoubleBuffer.drawSemiPixelRectangle(x + 1 + width - lengths.third, y + 1, lengths.third, 1, color)
 end
+
+function widget.drawBaseWidget(x, y, scale, title)
+    local width = Constants.baseWidth * scale
+    local height = Constants.baseHeight
+    DoubleBuffer.drawRectangle(
+        x + 1,
+        y + 1,
+        width - 1,
+        height - 1,
+        Colors.machineBackground,
+        Colors.machineBackground,
+        "█"
+    )
+    DoubleBuffer.drawFrame(x + 1, y + 1, width - 1, height - 1, Colors.labelColor)
+    DoubleBuffer.drawLine(x + 3, y + 5, x + width - 3, y + 5, Colors.machineBackground, Colors.textColor, "─")
+    DoubleBuffer.drawText(x + math.floor((width - Unicode.len(title)) / 2), y + 3, Colors.labelColor, title)
+end
+
+local function draw(self, index)
+    if self.type == "power" then
+        index = 10
+    end
+    local scale = self.scale or 1
+    local width = Constants.baseWidth * scale
+    local height = Constants.baseHeight
+    local x = Constants.baseWidth + Constants.baseWidth * ((index - 1) % 3)
+    local y = height * math.ceil((index) / 3)
+
+    widget.drawBaseWidget(x, y, scale, self.name)
+
+    drawProgress(x, 2 * y, width - 1, 2 * (height - 1), 1, 1, Colors.progressBackground)
+    drawProgress(x, 2 * y, width - 1, 2 * (height - 1), self.progress, self.maxProgress, Colors.barColor)
+    DoubleBuffer.drawText(x + 4, y + 7, self.state.color, self.state.name)
+    if self.state == states[4] then
+        drawProgress(x, 2 * y, width - 1, 2 * (height - 1), 1, 1, Colors.errorColor)
+    else
+        local middleInfo = self:getMiddleString()
+        if middleInfo then
+            DoubleBuffer.drawText(x + 3 + 3 + Unicode.len("IDLE"), y + height - 3, Colors.textColor, middleInfo)
+        end
+        DoubleBuffer.drawText(
+            x + width - Unicode.len(self.progress .. "/" .. self.maxProgress .. " s") - 3,
+            y + height - 3,
+            Colors.accentA,
+            self.progress .. "/" .. self.maxProgress .. " s"
+        )
+    end
+end
+
+local fake = {}
+
+fake.names = {
+    "Cleanroom",
+    "Electric Blast Furnace",
+    "Miner",
+    "Vacuum Freezer",
+    "Multi Smelter",
+    "Sifter",
+    "Large Chemical Reactor",
+    "Distillery",
+    "Oil Cracking Unit",
+    "Implosion Compressor"
+}
+
+fake.machineWidget = {}
+
+function fake.machineWidget:update()
+    local breakWidget = math.random(10000) > 9999
+    if breakWidget and self.state ~= states[3] then
+        self.state = states[4]
+    end
+    if self.state == states[1] then
+        self.progress = self.progress + 1
+        if self.progress >= self.maxProgress then
+            self.progress = 0
+            self.maxProgress = 0
+            self.state = states[2]
+        end
+    elseif self.state == states[2] then
+        if math.random(1000) > 999 then
+            self.state = states[1]
+            self.maxProgress = math.random(500)
+        end
+    elseif self.state == states[3] then
+        self.progress = self.progress + 1
+        if self.progress >= self.maxProgress then
+            self.progress = 0
+            self.maxProgress = 0
+        end
+    end
+end
+
+function fake.machineWidget:onClick()
+    if self.state == states[1] or self.state == states[2] then
+        self.state = states[3]
+    elseif self.state == states[3] then
+        if self.progress < self.maxProgress then
+            self.state = states[1]
+        else
+            self.progress = 0
+            self.maxProgress = 0
+            self.state = states[2]
+        end
+    elseif self.state == states[4] then
+        self.progress = 0
+        self.maxProgress = 0
+        self.state = states[2]
+    end
+end
+
+function fake.machineWidget:getMiddleString()
+end
+
+function fake.machineWidget.create()
+    local state = states[math.random(4)]
+    return {
+        name = fake.names[math.random(10)] .. " " .. math.floor(math.random(3)),
+        state = state,
+        progress = 0,
+        maxProgress = state ~= states[3] and state ~= states[4] and math.random(500) or 0,
+        type = "machine",
+        update = fake.machineWidget.update,
+        onClick = fake.machineWidget.onClick,
+        getMiddleString = fake.machineWidget.getMiddleString,
+        draw = draw
+    }
+end
+
+fake.powerWidget = {}
+
+function fake.powerWidget:update()
+    self.progress = self.progress + self.dProgress
+end
+
+function fake.powerWidget:onClick()
+    self.dProgress = -self.dProgress
+end
+
+function fake.powerWidget:getMiddleString()
+    local remaining = self.dProgress > 0 and self.maxProgress - self.progress or -self.progress
+    return (self.dProgress > 0 and "+" or "") ..
+        self.dProgress .. "EU/s. " .. (self.dProgress > 0 and "Full in: " or "Empty in: ") .. remaining / self.dProgress
+end
+
+function fake.powerWidget.create()
+    return {
+        name = "Power",
+        state = states[1],
+        progress = math.random(16000000),
+        maxProgress = 16000000,
+        scale = 2,
+        type = "power",
+        dProgress = 1,
+        update = fake.powerWidget.update,
+        onClick = fake.powerWidget.onClick,
+        getMiddleString = fake.powerWidget.getMiddleString,
+        draw = draw
+    }
+end
+
+function widget.fakeWidgets()
+    local fakeWidgets = {}
+
+    for _ = 1, 9 do
+        table.insert(fakeWidgets, fake.machineWidget.create())
+    end
+
+    return fakeWidgets
+end
+
+function widget.fakePowerWidget()
+    local fakePowerWidgets = {}
+
+    table.insert(fakePowerWidgets, fake.powerWidget.create())
+    fakePowerWidgets[11] = fakePowerWidgets[10]
+
+    return fakePowerWidgets
+end
+
+return widget

Programs/monitor-system/init.lua

@@ -1,8 +1,8 @@
 -- Import section
-Colors = require("graphics.colors")
+-- Event = require("event")
-Unicode = require("unicode")
+-- Colors = require("graphics.colors")
-DoubleBuffer = require("graphics.doubleBuffering")
+-- Widget = require("api.gui.widget")
-Event = require("event")
+Page = require("api.gui.page")
 -- Graphics = require("graphics.graphics")
 -- MultiBlock = require("data.datasource.multi-block")
 -- SingleBlock = require("data.datasource.single-block")
@@ -64,228 +64,14 @@ end
 
 require("api.sound.zelda-secret")()
 --]]
-local baseWidth = 40
-local baseHeight = 10
 
-local states = {
+Page.fake()
-    {name = "ON", color = Colors.workingColor},
-    {name = "IDLE", color = Colors.idleColor},
-    {name = "OFF", color = Colors.offColor},
-    {name = "BROKEN", color = Colors.errorColor}
-}
 
-local fakeNames = {
-    "Cleanroom",
-    "Electric Blast Furnace",
-    "Miner",
-    "Vacuum Freezer",
-    "Multi Smelter",
-    "Sifter",
-    "Large Chemical Reactor",
-    "Distillery",
-    "Oil Cracking Unit",
-    "Implosion Compressor"
-}
-
-local machineWidget = {}
-
-function machineWidget:update()
-    local breakWidget = math.random(10000) > 9999
-    if breakWidget and self.state ~= states[3] then
-        self.state = states[4]
-    end
-    if self.state == states[1] then
-        self.progress = self.progress + 1
-        if self.progress >= self.maxProgress then
-            self.progress = 0
-            self.maxProgress = 0
-            self.state = states[2]
-        end
-    elseif self.state == states[2] then
-        if math.random(1000) > 999 then
-            self.state = states[1]
-            self.maxProgress = math.random(500)
-        end
-    elseif self.state == states[3] then
-        self.progress = self.progress + 1
-        if self.progress >= self.maxProgress then
-            self.progress = 0
-            self.maxProgress = 0
-        end
-    end
-end
-
-function machineWidget:onClick()
-    if self.state == states[1] or self.state == states[2] then
-        self.state = states[3]
-    elseif self.state == states[3] then
-        if self.progress < self.maxProgress then
-            self.state = states[1]
-        else
-            self.progress = 0
-            self.maxProgress = 0
-            self.state = states[2]
-        end
-    elseif self.state == states[4] then
-        self.progress = 0
-        self.maxProgress = 0
-        self.state = states[2]
-    end
-end
-
-function machineWidget:getMiddleString()
-end
-
-function machineWidget.fake()
-    local state = states[math.random(4)]
-    return {
-        name = fakeNames[math.random(10)] .. " " .. math.floor(math.random(3)),
-        state = state,
-        progress = 0,
-        maxProgress = state ~= states[3] and state ~= states[4] and math.random(500) or 0,
-        type = "machine",
-        update = machineWidget.update,
-        onClick = machineWidget.onClick,
-        getMiddleString = machineWidget.getMiddleString
-    }
-end
-
-local powerWidget = {}
-
-function powerWidget:update()
-    self.progress = self.progress + self.dProgress
-end
-
-function powerWidget:onClick()
-    self.dProgress = -self.dProgress
-end
-
-function powerWidget:getMiddleString()
-    local remaining = self.dProgress > 0 and self.maxProgress - self.progress or -self.progress
-    return (self.dProgress > 0 and "+" or "") ..
-        self.dProgress .. "EU/s. " .. (self.dProgress > 0 and "Full in: " or "Empty in: ") .. remaining / self.dProgress
-end
-
-function powerWidget.fake()
-    return {
-        name = "Power",
-        state = states[1],
-        progress = math.random(16000000),
-        maxProgress = 16000000,
-        scale = 2,
-        type = "power",
-        dProgress = 1,
-        update = powerWidget.update,
-        onClick = powerWidget.onClick,
-        getMiddleString = powerWidget.getMiddleString
-    }
-end
-
-local widgets = {}
-
-for i = 1, 9 do
-    table.insert(widgets, machineWidget.fake())
-end
-table.insert(widgets, powerWidget.fake())
-widgets[11] = widgets[10]
-
-Event.listen(
-    "touch",
-    function(_, _, x, y)
-        local index =
-            1 + (math.floor(2 * ((x - baseWidth) / baseWidth + 3 * math.floor((y - baseHeight) / baseHeight)))) / 2
-        local widget = widgets[index] or widgets[index - 0.5]
-
-        widget:onClick()
-    end
-)
-
-local function drawTitle(title)
-    local x = baseWidth
-    local y = 0
-    local scale = 3
-    local width = baseWidth * scale
-    local height = baseHeight
-    DoubleBuffer.drawRectangle(
-        x + 1,
-        y + 1,
-        width - 1,
-        height - 1,
-        Colors.machineBackground,
-        Colors.machineBackground,
-        "█"
-    )
-    DoubleBuffer.drawFrame(x + 1, y + 1, width - 1, height - 1, Colors.labelColor)
-    DoubleBuffer.drawLine(x + 3, y + 6, x + width - 3, y + 6, Colors.machineBackground, Colors.textColor, "─")
-    DoubleBuffer.drawText(x + (width - Unicode.len(title)) / 2, y + 5, Colors.mainColor, title)
-end
-
-local function drawProgress(x, y, width, height, progress, maxProgress, color)
-    progress = math.floor(progress * (width + height - 2) / (maxProgress ~= 0 and maxProgress or 1))
-
-    local lengths = {
-        first = progress > 5 and 5 or progress,
-        second = progress > height - 2 + 5 and height - 2 or progress - (5),
-        third = progress > width - 7 + height - 2 + 5 and width - 7 or progress - (height - 2 + 5)
-    }
-    DoubleBuffer.drawSemiPixelRectangle(x + 6 - lengths.first, y + 1, lengths.first, 1, color)
-    DoubleBuffer.drawSemiPixelRectangle(x + 1, y + 2, 1, lengths.second, color)
-    DoubleBuffer.drawSemiPixelRectangle(x + 1, y + height, lengths.third, 1, color)
-    DoubleBuffer.drawSemiPixelRectangle(x + width - 4, y + height, lengths.first, 1, color)
-    DoubleBuffer.drawSemiPixelRectangle(x + width, y + height - lengths.second, 1, lengths.second, color)
-    DoubleBuffer.drawSemiPixelRectangle(x + 1 + width - lengths.third, y + 1, lengths.third, 1, color)
-end
-
-local function drawWidget(index, widget)
-    if index > 10 then
-        return
-    end
-    local scale = widget.scale or 1
-    local x = baseWidth + baseWidth * ((index - 1) % 3)
-    local width = baseWidth * scale
-    local height = baseHeight
-    local y = height * math.ceil((index) / 3)
-    DoubleBuffer.drawRectangle(
-        x + 1,
-        y + 1,
-        width - 1,
-        height - 1,
-        Colors.machineBackground,
-        Colors.machineBackground,
-        "█"
-    )
-
-    drawProgress(x, 2 * y, width - 1, 2 * (height - 1), 1, 1, Colors.progressBackground)
-    drawProgress(x, 2 * y, width - 1, 2 * (height - 1), widget.progress, widget.maxProgress, Colors.barColor)
-
-    DoubleBuffer.drawLine(x + 3, y + 5, x + width - 3, y + 5, Colors.machineBackground, Colors.textColor, "─")
-    DoubleBuffer.drawText(x + 3, y + 3, Colors.labelColor, widget.name)
-    DoubleBuffer.drawText(x + 3, y + 7, widget.state.color, widget.state.name)
-    if widget.state == states[4] then
-        drawProgress(x, 2 * y, width - 1, 2 * (height - 1), 1, 1, Colors.errorColor)
-    else
-        local middleInfo = widget:getMiddleString()
-        if middleInfo then
-            DoubleBuffer.drawText(x + 3 + 3 + Unicode.len("IDLE"), y + height - 3, Colors.textColor, middleInfo)
-        end
-        DoubleBuffer.drawText(
-            x + width - Unicode.len(widget.progress .. "/" .. widget.maxProgress .. " s") - 3,
-            y + height - 3,
-            Colors.accentA,
-            widget.progress .. "/" .. widget.maxProgress .. " s"
-        )
-    end
-end
-
-drawTitle("Overview")
 while true do
-    for index, widget in ipairs(widgets) do
+    Page.update()
-        widget:update()
-        drawWidget(index, widget)
-    end
-    DoubleBuffer.drawChanges()
     os.sleep(0)
 end
+
 --[[
 Page = require("api.gui.page")
 Notifications = {}