很多朋友对于树莓派5即将问世：回顾我的树莓派234的闲置时光和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
最近，我家孩子对时钟和时间特别感兴趣，现在看时间都是看手机，有人问马斯克为什么不带手表，马斯克回答是因为我有手机啊。确实，我家里都没有带指针的时钟，所以我决定用树莓派做一个时钟。我的想法是用树莓派做web服务器，写一个时钟页面，然后用另一个吃灰神器 -- Kindle来访问这个页面，这样，我就可以把这个时钟摆在桌面上，让我女儿看时间的时候，不用看手机了。一下子拯救了两个闲置设备，真是一举两得啊。开干吧，先写一个时钟页面。
安装conda
安装conda可以方便的创建虚拟环境，安装和管理python的各种包，安装conda的命令如下所示:
wget https://repo.anaconda.com/archive/Anaconda3-2020.02-Linux-x86_64.shbash Anaconda3-2020.02-Linux-x86_64.sh
创建虚拟环境
创建虚拟环境的命令如下所示:
conda create -n clock python=3.7
其中，`clock`是虚拟环境的名称，`python=3.7`表示使用python3.7版本。
激活虚拟环境的命令如下所示:
conda activate clock
退出虚拟环境的命令如下所示:
conda deactivate
安装django
安装django的命令如下所示:
pip install django
创建django项目
创建django项目的命令如下所示:
django-admin startproject clock
其中，`clock`是项目的名称。
创建django应用
创建django应用的命令如下所示:
cd clockpython manage.py startapp my_clock_app
其中，`my_clock_app`是应用的名称。
集成bootstrap
首先，我们需要下载bootstrap的源码，bootstrap的源码从官网下载，下载地址为:https://getbootstrap.com/docs/4.5/getting-started/download/。下载完成后，我们将bootstrap的源码解压到clock/static目录下。然后，我们需要在clock/settings.py文件中添加以下代码:
STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"),]
最后，我们需要在clock/my_clock_app/templates/my_clock_app/index.html文件中添加以下代码:
{% load static %}
编写django应用
编辑my_clock_app/views.py
from django.shortcuts import render# Create your views here.def index(request): return render(request, 'index.html')
编辑my_clock_app/urls.py
from django.urls import pathfrom . import viewsurlpatterns = [ path('', views.index, name='index'),]
编辑clock/urls.py
from django.contrib import adminfrom django.urls import include, pathurlpatterns = [ path('my_clock_app/', include('my_clock_app.urls')), path('admin/', admin.site.urls),]
编辑clock/settings.py
INSTALLED_APPS = [# My apps'my_clock_app',# Django apps'django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles',]
运行django应用
运行django应用的命令如下所示:
python manage.py runserver
然后，我们就可以在浏览器中访问http://127.0.0.1:8000/my_clock_app/来查看django应用了。
编写时钟页面
在index.html中添加一个canvas标签，然后用js在canvas上绘制时钟。
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// 定义时钟的半径和中心点坐标 var radius = canvas.height / 2; var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制时钟的外框 function drawClock() { ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.stroke(); } // 绘制时钟圆心 function drawClockCenter() { ctx.beginPath(); ctx.arc(centerX, centerY, 15, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时钟的刻度 function drawClockScale() { for (var i = 0; i< 12; i++) { var angle = i * Math.PI / 6; var scaleLength = radius * 0.9; var scaleX = centerX + scaleLength * Math.sin(angle); var scaleY = centerY - scaleLength * Math.cos(angle); ctx.beginPath(); ctx.arc(scaleX, scaleY, 5, 0, 2 * Math.PI); ctx.fillStyle = "blue"; ctx.fill(); } } // 绘制时钟分钟刻度 function drawClockMinuteScale() { for (var i = 0; i< 60; i++) { if (i % 5 == 0) { continue; } var angle = i * Math.PI / 30; var scaleLength = radius * 0.9; var scaleX = centerX + scaleLength * Math.sin(angle); var scaleY = centerY - scaleLength * Math.cos(angle); ctx.beginPath(); ctx.arc(scaleX, scaleY, 2, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); } } // 绘制时钟的数字 function drawClockNumber() { for (var i = 1; i<= 12; i++) { var angle = i * Math.PI / 6; var numberLength = radius * 0.8; var numberX = centerX + numberLength * Math.sin(angle); var numberY = centerY - numberLength * Math.cos(angle); ctx.font = "20px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(i, numberX, numberY); } } // 绘制时针 function drawHour(hour, minute) { var hourAngle = (hour % 12) * Math.PI / 6 + minute * Math.PI / 360; var hourLength = radius * 0.5; var hourX = centerX + hourLength * Math.sin(hourAngle); var hourY = centerY - hourLength * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.lineWidth = 10; ctx.strokeStyle = "black"; ctx.stroke(); } // 绘制分针 function drawMinute(minute) { var minuteAngle = minute * Math.PI / 30; var minuteLength = radius * 0.7; var minuteX = centerX + minuteLength * Math.sin(minuteAngle); var minuteY = centerY - minuteLength * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.stroke(); } // 绘制秒针 function drawSecond(second) { var secondAngle = second * Math.PI / 30; var secondLength = radius * 0.9; var secondX = centerX + secondLength * Math.sin(secondAngle); var secondY = centerY - secondLength * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.stroke(); } // 更新时钟 function updateClock() { var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); drawClock(); drawClockCenter(); drawClockNumber(); drawClockScale(); drawClockMinuteScale(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); } // 每秒钟更新一次时钟 setInterval(updateClock, 500);
效果展示
总结
本次我们使用django创建了一个python的web app，用html和js做了一个时钟页面，页面以后再美化，这是算是一个好的开始。
下一步
下一步，我们将使用树莓派做一个web服务器，然后将这个时钟页面部署到树莓派上，最后用Kindle访问这个时钟页面。
