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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签