Skip to content
This repository has been archived by the owner on Nov 16, 2020. It is now read-only.

Latest commit

 

History

History
154 lines (119 loc) · 6.89 KB

README.md

File metadata and controls

154 lines (119 loc) · 6.89 KB
Raw

IoT Dashboard Design with LÖVE 2D Game Framework

📌 The intention of this excericse is to demonstrate 1. script-based (lua) 2. faster UI design (+ easy deployment) 3. Direct LCD display

macOS

1. $ brew install lua
2. Download love.app from https://love2d.org/
3. $ vi ~/.bash_profile   <- alias love="/Applications/love.app/Contents/MacOS/love"
4. $ love <game-directroy>

3.5" Screen Size (480 x 320 pixels). The data was simulated.

Look familiar? The basic layout & color scheme were borrowed from freeboard.io

iOS

The data was simulated.

From Getting Started->iOS.

1. Download iOS source from https://love2d.org.
2. Open the Xcode project found at love/platform/xcode/love.xcodeproj and select the "love-ios" target
3. Choose an iOS Simulator device 
4. Click the Build-and-Run ▶︎ button
5. Create <your-game>.love  <-  "zip -9 -r dash.love ."
6. Drag <your-game>.love onto LÖVE app.

Raspberry Pi3 Model B+ (w/ Fedberry-29.1)

Supposely plugged in with 3.5" HDMI LCD Display (480 x 320 pixels). The data was simulated.

Reference : Developing Games on the Raspberry Pi

Prepare microSD card for Pi3.
 
1. Download the Fedberry(Fedora) LXQT image from https://github.com/fedberry/fedberry/releases
2. Download and install the Etcher application from www.balena.io/etcher
3. In the Etcher window, select the Fedberry image file.(fedberry-xfce-29.1.raw.xz for this example)
4. Select the SD card as the destination.
5. Click the Flash button.

Install LÖVE & additional packages after boot

1. $ sudo dnf install lua
2. $ sudo dnf install git
3. Download LÖVE rpm (Last modified 2018-09-16) from klaatu.fedorapeople.org
4. $ sudo dnf install ~/Downloads/love-99f37ac-1.fc27.armv7hl.rpm

Run  LÖVE

1. $ git clone git@github.com:phyunsj/iot-dashboard-design-with-love2d.git
2. $ cd iot-dashboard-design-with-love2d/dash_love2d
3. $ love .

How-To LÖVE

LÖVE calls 3 functions in main.lua. It calls love.load() first then love.update() and love.draw() repeatedly. In other words, love.load-> love.update -> love.draw -> love.update -> love.draw -> love.update -> ... .

LÖVE Dashboard Components : Label (RED), Gauge (GREEN), Chart (BLUE)

The major task is to calculate x- and y-coordinates accordingly. For example, Chart:draw() in chart.lua:

    love.graphics.setColor(gray2Color)
    love.graphics.setNewFont(10)
    love.graphics.print("100", self.start_x+10, chart_y)
    love.graphics.print("75", self.start_x+10, chart_y + self.chart_height/4)
    love.graphics.print("50", self.start_x+10, chart_y + 2*self.chart_height/4)
    love.graphics.print("25", self.start_x+10, chart_y + 3*self.chart_height/4)
    love.graphics.line( chart_x, chart_y + self.chart_height/4, 
                        chart_x + self.chart_width, chart_y + self.chart_height/4) 
    love.graphics.line( chart_x, chart_y + 2*self.chart_height/4, 
                        chart_x + self.chart_width, chart_y + 2*self.chart_height/4) 
    love.graphics.line( chart_x, chart_y + 3*self.chart_height/4, 
                        chart_x + self.chart_width, chart_y + 3*self.chart_height/4) 


    local preX = 0
    local preY = 0
    local curX = 0
    local curY = 0
    love.graphics.setColor(self.displayColor)
    for key, value in ipairs(self.value)
    do 
        curX = (key * self.interval) + chart_x - self.interval
        curY = chart_y + self.chart_height - self.value[key]
        if key == 1 then  -- first element. Same as curX, curY
            preX = curX
            preY = curY
        else
            preX = (key-1) * self.interval + chart_x - self.interval
            preY = chart_y + self.chart_height - self.value[key-1]
        end
        love.graphics.circle("fill", curX, curY, 2)
        love.graphics.line( preX, preY, curX, curY)
    end


    love.graphics.setColor(whiteColor)
    love.graphics.line( chart_x, chart_y , chart_x, chart_y + self.chart_height) 
    love.graphics.line( chart_x, chart_y + self.chart_height, 
                        chart_x + self.chart_width, chart_y + self.chart_height)

Related Posts