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
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
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.
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 [email protected]:phyunsj/iot-dashboard-design-with-love2d.git
2. $ cd iot-dashboard-design-with-love2d/dash_love2d
3. $ love .
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent