Blog

Blog

PHODAL

Raspberry Pi & Arduino build Valentine's Day gift

It is time to fight back

As a Geek, a gift should include some handwork, except code. Unless yours understand:

while(propose.times < 99) {
    huahua.listen(phodal.ask("will")("you")("marry")("me"));
    huahua.reply.propose ();
}
huahua.propose("Yes");
var ever = phodal.love(huahua) && huahua.love(phodal);
for(ever){;;;};

We need to build a romantic enviorment, and a gift, so we need:

  • Handworkd
  • Romantic Enviorment
  • Gift

Attention: Please replace Programmer Valentine's Day Gift with xx Language.

Learning 《Programmer Valentine's Day Gift

Website Demo: http://valentine.phodal.com/

Our gift looks like a slide with some words, so prepare:

  • some words
  • beautiful picture of her/him

But, if you want to use picture like this, it will be...

她动人美丽的画
她动人美丽的画

《Programmer Valentine's Day Gift》

Display

In thinking about this movement in its heyday, and then the computer would be better. If do mobile applications, then the phone can be combined to better hardware.

To find all of my mobile devices, as shown in Figure:

程序员情人节礼物设备
程序员情人节礼物设备

As a Nokia fans, I don't like Microsoft。

  • Nokia N72
  • Nokia E66
  • Nokia Lumia 920
  • Nokia Lumia 1020(ps: take picture)
  • Kindle

Because I don't use Android Phone, iPhone, I don't have Windows 8 + Visual Studio, It means I couldn't do a mobile app.

But, we can we do a web application.

Hardware

I looking some hardware to help me:

程序员情人节礼物材料
程序员情人节礼物材料

without some old chip:

  • 51: it can be deliver on time?
  • STM32: no support good with Mac OS.
  • PcDuino: not enough stable。

Finally, we use Raspberry Pi + Arduino.

  • Raspberry Pi as a server
  • Arduino control others

Controlled Devices

We find this Star Projector, also others(ps:it's secret)。

程序员情人节礼物控制设备
程序员情人节礼物控制设备

But we alos need:

  • IR Remote(ps:it's secret)
  • Relay(ps: control Relay。)

Beautiful《Programmer Valentine's Day Gift》

Framework

On the backend,in the first I think about JavaScriptPython,Raspberry Pi is good with Python,use Javascript will be more easy。Also Raspberry Pi with Nodejs is easy,but let's use Python.

Compare some Python Framework,I choice flask

On the Frontend,before this I would like to use jQuery + BackBone + Mustache to build a mobile website (ps: see Github https://github.com/phodal/moqi.mobi),it will cost a lot of data。And then, I create a framework——Lettuce,feel a bit too far。But,it's enough,as a ~6kb framework,include:

  • Router
  • Promise
  • Event
  • Template
  • Effect

(small ads: If you are Interesting join https://github.com/phodal/lettuce)

Also we need to use PySerial.

Finally, we use Flask + Lettuce + PySerial

思路

Process:

  • website will show pictures and word with auto jump
  • when will to run something in Arduino, with post some cmd
  • Raspberry Pi will transfer to Arduino
  • Arduino Handler cmd

《Programmer Valentine's Day Gift》CookBook

What you really need is a serious concern this part.

程序员情人节礼物Special
程序员情人节礼物Special

《Programmer Valentine's Day Gift》in Action

Server

It's simple, so we list all code in here:

import json
import time

from flask import Flask, request
from flask_restful import Resource, Api
import serial
ser = serial.Serial("/dev/ttyACM0", 9600)

app = Flask(__name__, static_url_path='')
app.secret_key = 'why would I tell you my secret key?'
api = Api(app)
tasks = {}


@app.route('/')
def root():
    return app.send_static_file('index.html')


class Task(Resource):
    @staticmethod
    def post(task_id):
        tasks[task_id] = request.data
        ser.write(request.data)
        time.sleep(6)
        return tasks[task_id], 201, {'Access-Control-Allow-Origin': '*'}

api.add_resource(Task, '/<string:task_id>')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

something different will be this:

ser = serial.Serial("/dev/ttyACM0", 9600)

In different platforms,/dev/ttyACM0 is different

Arduino

Code is also simple:

#include <IRremote.h>

int starPort = 12;
IRsend irsend;
int fullStar = 1;
int irRemote = 2;

void setup() {
  Serial.begin(9600);
  pinMode(starPort, OUTPUT);
}

int serialData;
void loop() {
  String inString = "";
  while (Serial.available()> 0)
  {
    int inChar = Serial.read();
    if (isDigit(inChar)) {
      inString += (char)inChar;
    }
    serialData=inString.toInt();
    Serial.print(serialData);
  }
  if(serialData == fullStar){
    digitalWrite(starPort, HIGH);
  } else
  if( serialData == irRemote){
    irsend.sendNEC(0xFF906F,32); 
    delay(1000);
  }
}

If recv 1, will be show star. If recv 2, will be do other things.

Front-End

See the all code in: https://github.com/phodal/valentine/blob/master/static/js/app.js

A sample example page:

var L = new lettuce();

var data = {
    rise: "一起看日出",
    down: "一起看日落",
    yours: "有一天,你出现了",
    together: "然后",
    rose: "IOU"
};

var rise = function () {
    var html = '<div class="rise"><h3>{%=o.rise%}</h3></div>';
    var result = L.Template.tmpl(html, data);
    document.getElementById("results").innerHTML = result;
};

rise();

a post request:

var L = new lettuce(),
    irRemote = "2",
    fullStar = "1";

lettuce.post("/serial", fullStar);

a event:

L.Event.on("showLove", showLove);
L.Event.trigger("showLove");

Promise with SetTimeout come true jump:

function show(func, n){
    var p = new L.Promise();
    var code = function () {
        if (func !== undefined) {
            func();
            L.FX.fadeIn(document.getElementById('results'), {
                duration: 3000, complete: function () {
                }
            });
        }
        p.done(null, n);
    };
    setTimeout(code, n);
    return p;
}

show(undefined, 3000).then(
    function() {
        return show(rise, 0)
    }
).then(
    function() {
        return show(down, 3000)
    }
)

Hardware

look like this:

程序员的情人节礼物硬件连接
程序员的情人节礼物硬件连接

Others

Web Page Demo: http://valentine.phodal.com/

Github: https://github.com/phodal/valentine

Video:http://www.tudou.com/programs/view/ymr5BpHkHYc/

Issue: https://github.com/phodal/valentine/issues

Weibo: http://www.weibo.com/phodal/

待我代码编成,娶你为妻可好

(end)


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签