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

Yifeng Wang

Last update: Jan 3, 2023

Overview

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

Comments

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.

opened by Chingliu 2
chore(deps): bump acorn from 5.7.3 to 5.7.4 in /app
Bumps acorn from 5.7.3 to 5.7.4.

Commits

6370e90 Mark version 5.7.4

fbc15b1 More rigorously check surrogate pairs in regexp validator

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
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!

opened by mgcrea 0
chore(deps): bump path-parse from 1.0.6 to 1.0.7 in /app
Bumps path-parse from 1.0.6 to 1.0.7.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

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

opened by doodlewind 0