edison-js / Edison

💡Edison can controll microcomputer with TypeScript and React💡
https://edison-js-document.vercel.app/
MIT License
45 stars 6 forks source link

Correspond with decralative UI #72

Closed AllenShintani closed 4 months ago

AllenShintani commented 4 months ago

・Servo motors and input and output modes work.

・I'm referring to the Ink library renderer. Let's cut out the unnecessary parts together.

・On the contrary, I turned it off because it's so complicated, and I turned off AutomaticConnect.

example:

import React from 'react'
import { useState } from 'react'
import { Board } from '../utils/Board'
import render from '../rendere/render'
import { Button } from '../components/input/Button'
import { Led } from '../components/output/Led'
import { Servo } from '../components/servo/Servo'

const App: React.FC = () => {
  const [angle, setAngle] = useState(0)
  const [isOn, setIsOn] = useState(false)

  const handlePress = () => {
    setAngle(angle + 10)
    setIsOn(true)
  }

  const handleRelease = () => {
    if (angle >= 150) {
      setAngle(0)
      setIsOn(false)
      return
    }
    setAngle(angle + 10)
    setIsOn(false)
  }
  return (
    <Board port={'/dev/ttyUSB0'}>
      <Button
        pin={8}
        onPress={handlePress}
        onRelease={handleRelease}
      >
        <Led
          pin={13}
          isOn={isOn}
        />
        <Servo
          pin={10}
          angle={angle}
        />
      </Button>
    </Board>
  )
}
render(<App />)