doodlewind/react-ssd1306

📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

React SSD1306

A React Renderer for SSD1306 OLED chip on Raspberry Pi

For those who doesn't have the device, a canvas-based web emulator is also included!

Introduction

This project demonstrates how to:

• Use React together with QuickJS on Raspberry Pi.
• Develop basic C module for QuickJS.
• Build a custom "native & dynamic" renderer for React.

Checkout the Tutorial, or my Chinese blog post for details.

Getting Started

This project is originally designed to work on Raspberry Pi, but a web emulator is also available and works out of the box. Notice that no matter you run it on web or native, the whole React-related codebase is exactly the same.

Web Approach

You can try out the reconciler example, even if you don't have a Raspberry Pi. In this way only Node.js and ParcelJS are required:

cd react-ssd1306/app
parcel src/index.html

Then just open https://localhost:1234 to see the emulator.

Native Approach

Connect the chip, make sure you have QuickJS and Node.js installed on your Raspberry Pi, with I2C interface enabled. Few extra packages are also required:

sudo apt-get install i2c-tools libi2c-dev

Node.js is only required for JS module bundling and package management here.

Init the project:

cd react-ssd1306/app
npm install && cd ..
npm run build # build JS and C modules
npm start # start the compiled binary

Usage

Simply edit ./app/index.js as main entrance:

import './polyfill.js'
import React from 'react'
import { SSD1306Renderer, Text, Pixel } from './renderer.js'

class App extends React.Component {
  constructor () {
    super()
    this.state = { hello: 'Hello React!', p: 0 }
  }

  render () {
    const { hello, p } = this.state
    return (
      <React.Fragment>
        <Text row={0} col={0}>{hello}</Text>
        <Text row={1} col={0}>Hello QuickJS!</Text>
        <Pixel x={p} y={p} />
      </React.Fragment>
    )
  }

  componentDidMount () {
    // XXX: Emulate event driven update
    setTimeout(() => this.setState({ hello: 'Hello Pi!', p: 42 }), 2000)
    setTimeout(() => this.setState({ hello: '', p: -1 }), 4000)
  }
}

SSD1306Renderer.render(<App />)

License

MIT

react-ssd1306's Issues

Thanks!

Thanks for taking the time to thoroughly share this original & fun experiment! Love it!

Would love to try to port this to an esp32 microcontroller!

npm start got error

git head is commit #d1798fe7e1e47402be845342210d0d895bb0c02f

can't import react "ReferenceError: could not load module filename 'react'"

I download react.js from https://unpkg.com/react@16/umd/react.production.min.js

as your code:
import './polyfill.js'
import React from 'react'

const App = props => {
console.log(props.hello)
return null
}
console.log(<App hello={'QuickJS'} />)

qjs to run it said: "ReferenceError: could not load module filename 'react'"
so I changed import React from 'react' to import React from './react.js', this time
I got "SyntaxError: export 'default' in module './react.js' is ambiguous"

Could your help me to point where I made mistake.

Compiling QuickJS

If you have trouble compiling QuickJS on Raspberry Pi, just link the atomic lib as seem in this discussion, this following patch should work:

diff --git a/Makefile b/Makefile
index efd3a32..3150f80 100644
--- a/Makefile
+++ b/Makefile
@@ -33,6 +33,10 @@ CONFIG_LTO=y
 #CONFIG_WERROR=y
 # force 32 bit build for some utilities
 #CONFIG_M32=y
+# compilation on ARM Linux
+ifeq ($(shell uname -m),armv7l)
+CONFIG_ARMV7=y
+endif
 ifdef CONFIG_DARWIN
 # use clang instead of gcc

@@ -167,6 +171,9 @@ LIBS=-lm
 ifndef CONFIG_WIN32
 LIBS+=-ldl
 endif
+ifdef CONFIG_ARMV7
+LIBS+=-latomic
+endif
 $(OBJDIR):
 	mkdir -p $(OBJDIR) $(OBJDIR)/examples $(OBJDIR)/tests

You can also simply change LIBS=-lm to LIBS=-lm -latomic in makefile :D

抛一个问题：关于交互

前端侵入嵌入式领域是必然的。
这里想问的是，在物理层面交互的处理上，quickjs可以做桥梁吗？