在圖形LCD Phidg??et(LCD1100)上顯示天氣

描述

?

在這個(gè)項(xiàng)目中，我們將使用在線天氣服務(wù)在圖形 LCD Phidg??et (LCD1100) 上顯示當(dāng)?shù)靥鞖夂蜁r(shí)間。此項(xiàng)目的 C# 和 Python 代碼可用。

補(bǔ)給品

使用以下硬件：

• VINT 集線器 Phidg??et (HUB0000_0)
• 圖形 LCD Phidg??et (LCD1100_0)

第 1 步：設(shè)置

通過(guò)任何端口將您的圖形 LCD Phidg??et 連接到您的 VINT 集線器。

第 2 步：概述

?

?

如上所示，這個(gè)項(xiàng)目有兩個(gè)主要部分：

• 訪問(wèn)天氣數(shù)據(jù)
• 顯示天氣數(shù)據(jù)

讓我們先來(lái)看看訪問(wèn)數(shù)據(jù)。

第 3 步：訪問(wèn)天氣數(shù)據(jù)

?

?

我們將使用OpenWeather訪問(wèn)我們當(dāng)?shù)氐奶鞖忸A(yù)報(bào)。他們提供免費(fèi)訪問(wèn)超過(guò) 200,000 個(gè)城市的天氣預(yù)報(bào)。支持以下格式：

• JSON
• XML
• HTML

對(duì)于這個(gè)項(xiàng)目，我們將使用 XML 格式。

為了訪問(wèn)天氣數(shù)據(jù)，您必須創(chuàng)建一個(gè)免費(fèi)帳戶并獲取 API 密鑰。

第 4 步：創(chuàng)建您的帳戶

?

?

按照此鏈接創(chuàng)建免費(fèi)帳戶并獲取 API 密鑰。獲取 API 密鑰后，您可以通過(guò)以下 URL 訪問(wèn)數(shù)據(jù)：

api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

將 {city name} 替換為您的城市，將 {API key} 替換為您的 API 密鑰。例如，這就是我們的樣子：

http://api.openweathermap.org/data/2.5/weather?q=Calgary&APPID=fakeid111111111111111111111111111&units=metric&mode=xml

嘗試在任何網(wǎng)絡(luò)瀏覽器中輸入您的 URL。您將看到 XML 格式的天氣數(shù)據(jù)，如上所示。下一步是創(chuàng)建一個(gè)可以解析數(shù)據(jù)以便顯示的程序。

第 5 步：讀取/解析天氣數(shù)據(jù) - C#

對(duì)于 C#，您可以使用XMLTextReader類來(lái)快速解析 XML 數(shù)據(jù)：

static string readXML(string arg1, string arg2)
{
String URLString = "http://api.openweathermap.org/data/2.5/weather?q=Calgary&APPID=fakeid111111111111111111111111111&units=metric&mode=xml";
XmlTextReader reader = new XmlTextReader(URLString);
reader.ReadToFollowing(arg1);
reader.MoveToAttribute(arg2);
return reader.Value;
}

您可以像這樣使用上面的函數(shù)：

static void updateWeather(LCD lcd) {
string city = readXML("city", "name");
string temperature = readXML("temperature", "value");
string humidity = readXML("humidity", "value");
string windspeed = readXML("speed", "value");
string descript = readXML("weather", "value");
string iconID = readXML("weather", "icon");
}

還有其他可用的值（日出時(shí)間、日落時(shí)間、壓力等），但對(duì)于這個(gè)項(xiàng)目，我們將只顯示值的子集。

第 6 步：讀取/解析天氣數(shù)據(jù) - Python

對(duì)于 Python，您可以使用 ElementTree XML API 快速解析數(shù)據(jù)：

import xml.etree.ElementTree as ET
from urllib.request import urlopen
url = urlopen('http://api.openweathermap.org/data/2.5/weather?q=Calgary&APPID=fakeid111111111111111111111111111&units=metric&mode=xml')
tree = ET.parse(url)
root = tree.getroot()
def readXML(arg1, arg2):
for item in root.iter(arg1):
return item.get(arg2)
print(readXML('city','name'))
print(readXML('temperature','value'))
print(readXML('humidity','value'))
print(readXML('speed','value'))
print(readXML('weather','value'))
print(readXML('weather','icon'))

還有其他可用的值（日出時(shí)間、日落時(shí)間、壓力等），但對(duì)于這個(gè)項(xiàng)目，我們將只顯示值的子集。

第 7 步：OpenWeather 圖標(biāo)

您可能已經(jīng)注意到我們?cè)谏厦娲鎯?chǔ)了iconID 。此值表示描述當(dāng)前天氣的圖像。您可以在此處查看圖標(biāo)。Graphic LCD Phidg??et 能夠顯示位圖，我們可以在我們的程序中輕松實(shí)現(xiàn)這些圖標(biāo)。如果您還沒(méi)有探索過(guò)圖形 LCD Phidg??et 上的位圖，請(qǐng)查看這個(gè)項(xiàng)目。

網(wǎng)上有很多像素藝術(shù)程序，我們使用了 Piskel。由于簡(jiǎn)單的“導(dǎo)出到 C 文件”選項(xiàng)，重新創(chuàng)建 OpenWeatherMap 圖標(biāo)很容易。位圖的結(jié)果在下面的 github 存儲(chǔ)庫(kù)中提供。

第 8 步：顯示數(shù)據(jù) - C#

現(xiàn)在我們已經(jīng)收集了天氣數(shù)據(jù)，最后一步是將其顯示在圖形 LCD Phidg??et 上：

static void updateWeather(LCD lcd)
{
string city = readXML("city", "name");
string temperature = readXML("temperature", "value");
string humidity = readXML("humidity", "value");
string windspeed = readXML("speed", "value");
string descript = readXML("weather", "value");
string iconID = readXML("weather", "icon");
if (temperature.Length > 5)
{
temperature = temperature.Remove(5);
}
//Temperature box
int x = (44 - ((temperature.Length * 6) + 12)) / 2;
lcd.WriteText(LCDFont.Dimensions_6x12, x, 15, temperature);
lcd.WriteText(LCDFont.User1, x + temperature.Length * 6, 15, "0");
lcd.WriteText(LCDFont.Dimensions_6x12, x + temperature.Length * 6 + 6, 15, "C");
//Weather image + descript box
byte[] temp;
if (iconID == "01d")
temp = _01d;
else if (iconID == "02d")
temp = _02d;
else if (iconID == "03d")
temp = _03d;
else if (iconID == "04d")
temp = _04d;
else if (iconID == "09d")
temp = _09d;
else if (iconID == "10d")
temp = _10d;
else if (iconID == "11d")
temp = _11d;
else if (iconID == "13d")
temp = _13d;
else if (iconID == "50d")
temp = _50d;
else if (iconID == "01n")
temp = _01n;
else if (iconID == "02n")
temp = _02n;
else if (iconID == "10n")
temp = _10n;
else
temp = unknown;
lcd.WriteBitmap(2, 31, 32, 32, temp);
lcd.WriteText(LCDFont.Dimensions_5x8, 40, 42, descript);
//Extra info box
lcd.WriteText(LCDFont.Dimensions_5x8, 50, 11, "Humidity: " + humidity + "%");
lcd.WriteText(LCDFont.Dimensions_5x8, 50, 20, "Wind: " + windspeed + "km/h");
}
static void redraw(LCD lcd)
{
lcd.Clear();
//draw borders around outside
lcd.DrawLine(0, 0, 127, 0);
lcd.DrawLine(0, 0, 0, 63);
lcd.DrawLine(127, 0, 127, 63);
lcd.DrawLine(0, 63, 127, 63);
//draw borders inside
lcd.DrawLine(0, 10, 128, 10);
lcd.DrawLine(43, 10, 43, 30);
lcd.DrawLine(1, 30, 127, 30);
lcd.WriteText(LCDFont.Dimensions_5x8, 1, 1, DateTime.Now.ToString(" ddd, MMM d hh:mm:ss tt"));
updateWeather(lcd);
lcd.Flush();
}

下面是對(duì)上面代碼的快速回顧：

重繪

此函數(shù)在圖形 LCD 上繪制主要邊框。它還打印當(dāng)前時(shí)間并調(diào)用 updateWeather 程序。

更新天氣

此功能將來(lái)自 OpenWeather 服務(wù)的數(shù)據(jù)排列到圖形 LCD 上。

第 9 步：顯示數(shù)據(jù) - Python

現(xiàn)在我們已經(jīng)收集了天氣數(shù)據(jù)，最后一步是將其顯示在圖形 LCD Phidg??et 上：

def updateWeather():
city = readXML('city', 'name')
temperature = readXML('temperature', 'value')
humidity = readXML('humidity', 'value')
windspeed = readXML('speed', 'value')
descript = readXML('weather', 'value')
iconID = readXML('weather', 'icon')
if(len(temperature) > 5):
temperature = temperature[:-1:] #remove last char so it fits
#temperature box
x = (44 - ((len(temperature) * 6) + 12)) / 2
x = int(x) #force to int
lcd.writeText(LCDFont.FONT_6x12, x, 15, temperature)
lcd.writeText(LCDFont.FONT_User1, x + len(temperature) * 6, 15, "0")
lcd.writeText(LCDFont.FONT_6x12, x + len(temperature) * 6 + 6, 15, "C")
#Weather icon + descript box
temp = []
if(iconID == "01d"):
temp = _01d
elif(iconID == "02d"):
temp = _02d
elif (iconID == "03d"):
temp = _03d
elif (iconID == "04d"):
temp = _04d
elif (iconID == "09d"):
temp = _09d
elif (iconID == "10d"):
temp = _10d
elif (iconID == "11d"):
temp = _11d
elif (iconID == "13d"):
temp = _13d
elif (iconID == "50d"):
temp = _50d
elif (iconID == "01n"):
temp = _01n
elif (iconID == "02n"):
temp = _02n
elif (iconID == "10n"):
temp = _10n
else:
temp = unknown
lcd.writeBitmap(2, 31, 32, 32, temp)
lcd.writeText(LCDFont.FONT_5x8, 40, 42, descript)
#Extra info box
lcd.writeText(LCDFont.FONT_5x8, 50, 11, "Humidity: " + humidity + "%")
lcd.writeText(LCDFont.FONT_5x8, 50, 20, "Wind: " + windspeed + "km/h")
def redraw():
lcd.clear()
#Draw borders around outside
lcd.drawLine(0, 0, 127, 0)
lcd.drawLine(0, 0, 0, 63)
lcd.drawLine(127, 0, 127, 63)
lcd.drawLine(0, 63, 127, 63)
#draw borders inside
lcd.drawLine(0, 10, 128, 10)
lcd.drawLine(43, 10, 43, 30)
lcd.drawLine(1, 30, 127, 30)
timeStr = datetime.now().strftime("%a, %b %d %I:%M:%S %p")
lcd.writeText(LCDFont.FONT_5x8, 1, 1, timeStr)
updateWeather()
lcd.flush()

下面是對(duì)上面代碼的快速回顧：redraw

此函數(shù)在圖形 LCD 上繪制主要邊框。它還打印當(dāng)前時(shí)間并調(diào)用 updateWeather 程序。

更新天氣

此功能將來(lái)自 OpenWeather 服務(wù)的數(shù)據(jù)排列到圖形 LCD 上。

第 10 步：主循環(huán)

最后要做的是創(chuàng)建一個(gè)主循環(huán)，按設(shè)定的時(shí)間表更新 LCD。以下是我們的推薦：

• 每秒：更新液晶顯示屏上的時(shí)間
• 每 15 分鐘：更新 LCD 上的天氣狀態(tài)

創(chuàng)建一個(gè)每秒循環(huán)的無(wú)限循環(huán)。創(chuàng)建一個(gè)計(jì)數(shù)器來(lái)跟蹤循環(huán)，當(dāng)計(jì)數(shù)器達(dá)到 900（900 秒是 15 分鐘）時(shí)更新天氣。

第 11 步：繼續(xù)前進(jìn)

該項(xiàng)目的完整代碼可在此處獲得：https ://github.com/phidgeteer/LCDWeather.git

如果您有任何疑問(wèn)，請(qǐng)?jiān)谙旅姘l(fā)表評(píng)論！