unicornpaint

A web-based painting app for raspberry PI and pimoroni Unicorn Hat HD
Log | Files | Refs | README

FrameControl.js (2032B)

      1 import React, { Component } from 'react'
      2 import { rgb, getPixel } from './Utils'
      3 
      4 class FramePreview extends Component {
      5     render() {
      6         let { pixels, selected, index, onClick } = this.props
      7         let width = pixels.length
      8         let height = pixels[0].length
      9 
     10         let cells = []
     11         for (var y=height-1; y>=0; y--) {
     12             for (var x=0; x<width; x++) {
     13                 let {r, g, b} = rgb(getPixel(x, y, pixels))
     14                 cells.push(<div
     15                     key={`FramePreview ${index} ${x} ${y}`}
     16                     className="framePreviewCell"
     17                     style={{
     18                         background: `rgb(${r},${g},${b})`,
     19                       }}/>)
     20             }
     21         } 
     22 
     23         let wrapperClassName = selected ? "framePreviewWrapper selected" : "framePreviewWrapper"
     24         return <div 
     25             className={wrapperClassName}
     26             onClick={onClick}>
     27             <span>Frame {index + 1}</span>
     28             <div className="framePreview">
     29             {cells}
     30             </div>
     31         </div>
     32     }
     33 }
     34 
     35 function animationPreview(props) {
     36     let { imageData } = props
     37     let imgUrl = `url(data:image/gif;base64,${imageData})`
     38     return <div className="animationPreviewWrapper">
     39         <span>Preview:</span>
     40         <div className="animationPreview" 
     41             style={{backgroundImage: imgUrl}}/>
     42     </div>
     43 }
     44 
     45 export default class FrameControl extends Component {
     46     render() {
     47         // A series of divs, 1 per frame, 
     48         let { frames, 
     49             selectedFrame,
     50             onFrameSelected,
     51             imageData } = this.props
     52 
     53         let framePreviews = frames.map((frame, ix) => 
     54             <FramePreview 
     55                 key={ix}
     56                 index={ix}
     57                 pixels={frame} 
     58                 selected={ix === selectedFrame}
     59                 onClick={() => onFrameSelected(ix)}/>)
     60 
     61         
     62 
     63         return <div className="frameControl">
     64             {animationPreview({imageData:imageData})}
     65             {framePreviews}
     66         </div>
     67     }
     68 }