SlideShare a Scribd company logo
Build Your own RasPiTV
DerekHaddadDonaldDerek
Build your own RasPiTV with Node.js & Socket.io
The idea.
= + +
RaspberryPi Chromium NodeJS + Socket.ioRasPiTV
The Implementation.
RasPiTv with its special remote controller
The Stack
• Raspbian
• NodeJs
– Express
– Socket.io
– Omxcontrol
• Shell Commands
– Chromium in Kiosk mode
– Youtube-dl
– Omxplayer
WARNING:
Diving into Code
Socket.io: Client Side
Client Side Implementation (remote.html)
Socket.io: Server Side
Server Side Implementation (app.js)
Moustache.js – Template
Engine
The template
Creating the JSON object and filling in the template
The Remote
Minimal remote – Buttons are replaced with Swipe Gestures
Quo.js – Handling Swipe
Gestures
The $$ is to differentiate jQuery from Quo
The TV
Swipe right on the remote to move the border from Watch to Listen
https://github.com/DonaldDerek/RaspberryPiTV
Fork me on github
Check the full tutorial on: blog.donaldderek.com
DerekHaddadDonaldDerek
May the Force be with you
DerekHaddadDonaldDerek
Ad

Recommended

Node
Node
Timothy Strimple
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Vlad Filippov
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
Hengki Sihombing
 
Scripting with NodeJS
Scripting with NodeJS
Ben Pearson
 
MongoDB on CloudFoundry
MongoDB on CloudFoundry
Yohei Sasaki
 
Introduction to Express and Grunt
Introduction to Express and Grunt
Peter deHaan
 
WebUSB
WebUSB
Suz Hinton
 
Jaap : node, npm & grunt
Jaap : node, npm & grunt
Bertrand Chevrier
 
Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Masaki Muranaka
 
npm + browserify
npm + browserify
maxgfeller
 
Welcome to ClojureScript
Welcome to ClojureScript
Ikuru Kanuma
 
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Ladies Who Code
 
Hello npm
Hello npm
Muyuu Fujita
 
Gashuku Presen
Gashuku Presen
guest3f1f27
 
Building a REST API with Node.js and MongoDB
Building a REST API with Node.js and MongoDB
VivochaLabs
 
Future of NodeJS
Future of NodeJS
Sébastien Pertus
 
Modernizing Your WordPress Workflow with Grunt & Bower
Modernizing Your WordPress Workflow with Grunt & Bower
Alan Crissey
 
Nodejs web,db,hosting
Nodejs web,db,hosting
Kenu, GwangNam Heo
 
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
 
JavaScript Engine and WebAssembly
JavaScript Engine and WebAssembly
Changhwan Yi
 
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Ricardo Castelhano
 
Webconf nodejs-production-architecture
Webconf nodejs-production-architecture
Ben Lin
 
Clojure web dev history
Clojure web dev history
Ikuru Kanuma
 
CloudFoundry@home
CloudFoundry@home
Yohei Sasaki
 
Herramientas front
Herramientas front
borya09
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme development
James Bundey
 
GruntJS + Wordpress
GruntJS + Wordpress
Leonardo Balter
 
Build the internet of things with Raspberry Pi!
Build the internet of things with Raspberry Pi!
Donald Derek Haddad
 
Getting Started with Google Cloud Technology
Getting Started with Google Cloud Technology
Donald Derek Haddad
 
Js revolution donald_derek
Js revolution donald_derek
Donald Derek Haddad
 

More Related Content

What's hot (19)

Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Masaki Muranaka
 
npm + browserify
npm + browserify
maxgfeller
 
Welcome to ClojureScript
Welcome to ClojureScript
Ikuru Kanuma
 
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Ladies Who Code
 
Hello npm
Hello npm
Muyuu Fujita
 
Gashuku Presen
Gashuku Presen
guest3f1f27
 
Building a REST API with Node.js and MongoDB
Building a REST API with Node.js and MongoDB
VivochaLabs
 
Future of NodeJS
Future of NodeJS
Sébastien Pertus
 
Modernizing Your WordPress Workflow with Grunt & Bower
Modernizing Your WordPress Workflow with Grunt & Bower
Alan Crissey
 
Nodejs web,db,hosting
Nodejs web,db,hosting
Kenu, GwangNam Heo
 
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
 
JavaScript Engine and WebAssembly
JavaScript Engine and WebAssembly
Changhwan Yi
 
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Ricardo Castelhano
 
Webconf nodejs-production-architecture
Webconf nodejs-production-architecture
Ben Lin
 
Clojure web dev history
Clojure web dev history
Ikuru Kanuma
 
CloudFoundry@home
CloudFoundry@home
Yohei Sasaki
 
Herramientas front
Herramientas front
borya09
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme development
James Bundey
 
GruntJS + Wordpress
GruntJS + Wordpress
Leonardo Balter
 
Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Mocloudos - Feather-weight Cloud OS developed within
14 man-days
Masaki Muranaka
 
npm + browserify
npm + browserify
maxgfeller
 
Welcome to ClojureScript
Welcome to ClojureScript
Ikuru Kanuma
 
Front End Development Automation with Grunt
Front End Development Automation with Grunt
Ladies Who Code
 
Building a REST API with Node.js and MongoDB
Building a REST API with Node.js and MongoDB
VivochaLabs
 
Modernizing Your WordPress Workflow with Grunt & Bower
Modernizing Your WordPress Workflow with Grunt & Bower
Alan Crissey
 
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
 
JavaScript Engine and WebAssembly
JavaScript Engine and WebAssembly
Changhwan Yi
 
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Ricardo Castelhano
 
Webconf nodejs-production-architecture
Webconf nodejs-production-architecture
Ben Lin
 
Clojure web dev history
Clojure web dev history
Ikuru Kanuma
 
Herramientas front
Herramientas front
borya09
 
Introduction to using Grunt & Bower with WordPress theme development
Introduction to using Grunt & Bower with WordPress theme development
James Bundey
 

More from Donald Derek Haddad (6)

Build the internet of things with Raspberry Pi!
Build the internet of things with Raspberry Pi!
Donald Derek Haddad
 
Getting Started with Google Cloud Technology
Getting Started with Google Cloud Technology
Donald Derek Haddad
 
Js revolution donald_derek
Js revolution donald_derek
Donald Derek Haddad
 
The Dark Side of the Pi
The Dark Side of the Pi
Donald Derek Haddad
 
Google IO Extended - Build Your Own Google TV
Google IO Extended - Build Your Own Google TV
Donald Derek Haddad
 
The Javascript Revolution
The Javascript Revolution
Donald Derek Haddad
 
Build the internet of things with Raspberry Pi!
Build the internet of things with Raspberry Pi!
Donald Derek Haddad
 
Getting Started with Google Cloud Technology
Getting Started with Google Cloud Technology
Donald Derek Haddad
 
Google IO Extended - Build Your Own Google TV
Google IO Extended - Build Your Own Google TV
Donald Derek Haddad
 
Ad

Recently uploaded (20)

EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Daily Lesson Log MATATAG ICT TEchnology 8
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
WebdriverIO & JavaScript: The Perfect Duo for Web Automation
digitaljignect
 
Quantum AI: Where Impossible Becomes Probable
Quantum AI: Where Impossible Becomes Probable
Saikat Basu
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
The Future of Product Management in AI ERA.pdf
The Future of Product Management in AI ERA.pdf
Alyona Owens
 
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
Daily Lesson Log MATATAG ICT TEchnology 8
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Safe Software
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdf
Priyanka Aash
 
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
" How to survive with 1 billion vectors and not sell a kidney: our low-cost c...
Fwdays
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
Mastering AI Workflows with FME by Mark Döring
Mastering AI Workflows with FME by Mark Döring
Safe Software
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Ad

Build your own RasPiTV with Node.js & Socket.io