Full bus

full-bus.markdown

Full bus

A Pen by Tristan WAGNER on CodePen.

License.

index.html

<div id="root"/>
</div>

script.babel

class Frame extends React.Component {
  
  renderHeaders = (byte, index) => {
    const { start, startBit, length, lsb, msb } = this.props
    let header = `Byte ${byte}`
    return <th className={'colgroup-header'} colSpan="8" scope="colgroup" key={byte}>{header}</th>
  }
  
  renderFrame = (byte, bit, index) => {
    const { start, startBit, length, lsb, msb } = this.props
    let className = ['byte'.concat(byte)]
    let _byte = byte + 1
    let _bit = bit + 1
    let cursor = byte === 0 ? _bit : byte * 8 + _bit
    
    if (msb && cursor - 1 === (start * 8 + startBit) || lsb && cursor === (start * 8 + startBit + length )){ 
      className.push(lsb ? 'start-lsb' : 'start-msb')
    }else{
      if (cursor > (start * 8 + startBit) && cursor <= (start * 8 + startBit + length)) {
        className.push('selected')
      } 
    }

    return <td className={className.join(' ')} key={cursor}></td>
  }

  render() {
    const { start, length, lsb, msb } = this.props
     
    const frame = [0, 1, 2, 3, 4, 5, 6, 7]

    return (
      <table>
        <caption><strong>CAN BUS</strong></caption>
        <colgroup span="8"></colgroup>
        <thead>
          <tr>
            { frame.map(this.renderHeaders) }
          </tr>
        </thead>
       <tbody>
          <tr>
          { frame.map((byte) => {
                return [0, 1, 2, 3, 4, 5, 6, 7].map((bit, index)=>this.renderFrame(byte, bit, index))             
             }) 
          }
          </tr>
        </tbody>
      </table>
    );
  }
}

class Wrapper extends React.Component {
  
  constructor(props) {
    super(props)
    
    this.state = {
      
    }
  }
  
  handleStartChange = (event) => {
    this.setState({ start: parseInt(event.target.value)})
  }
  
  handleStartBitChange = (event) => {
    this.setState({ startBit: parseInt(event.target.value)})
  }
  
  handleLengthChange = (event) => {
    this.setState({ length: parseInt(event.target.value)})
  }
  
  handleByteOrderChange = (event) => {
    this.setState({ byteOrder: parseInt(event.target.value) })
  }
  
  render() {
    
    const { byteOrder, start, startBit, length} = this.state
    return (
      <div>
        <Frame start={start} length={length} startBit={startBit} lsb={byteOrder === 2} msb={byteOrder === 1} />
        <label>Start Byte</label>
        <input type='number' onChange={this.handleStartChange} min={0} max={7} />
        <label>Start Bit</label>
        <input type='number' onChange={this.handleStartBitChange} />
        <label>Length</label>
        <input type='number' onChange={this.handleLengthChange} min={0} max={64} />
        <label>Byte order</label>
        <select onChange={this.handleByteOrderChange}>
          <option value={-1}></option>
          <option value={1}>MSB</option>
          <option value={2}>LSB</option>
        </select>
      </div>
    );
  }
}



ReactDOM.render(
  //<Frame start={0} length={5} lsb/>,
  <Wrapper/>,
  document.getElementById('root')
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.css

td {
  padding: 2px;
/*   padding: 10px; */
  border: 3px solid black;
}

.colgroup-header { 
  border-left: 1px solid black;
}

.colgroup-header:last-of-type {
  border-right: 1px solid black;
}

.start-msb {
  border: 3px solid green !important;
  background-color: green;
}

.start-lsb {
  border: 3px solid green !important;
  background-color: green;
}

.selected {
  border-color: red !important;
  background-color: red;
}

.byte7 {
  border-color: sienna;
}

.byte6 {
  border-color: purple;
}

.byte5 {
  border-color: darkblue;
}

.byte4 {
  border-color: royalblue;
}

.byte3 {
  border-color: mediumblue;
}

.byte2 {
  border-color: lightblue;
}

.byte1 {
  border-color: DarkGoldenRod;
}

.byte0 {
  border-color: orange;
}