cemolcay / miditimetableview

Customisable and editable time table grid for showing midi or audio related data with a measure.

MIDITimeTableView

Customisable and editable time table grid for showing midi or audio related data with a measure.

Demo

Requirements

• Swift 5.0+
• iOS 9.0+

Install

pod 'MIDITimeTableView'

Features

• Easy to implement, Delegate/DataSource API similar to UITableView and UICollectionView.
• Unlimited rows and cells.
• Cells and Row Headers are fully customisable. You can show any UIView inside them.
• Shows bar measure (optional).
• Shows editable playhead that shows current time (optional).
• Pinch to zoom in/out. (optional).
• Edit single cell or multiple cells.
• Drag them around to change row or position.
• Drag them from right edge to change duration.
• Long press any cell to show customisable menu.
• Holds history with a customisable limit and make undo/redo (optional).
• Customise grid and show bar, beat and subbeat lines with any style (optional).

Usage

Create a MIDITimeTableView either programmatically or from storyboard and implement its MIDITimeTableViewDataSource and MIDITimeTableViewDelegate methods.

You need a data object to store each row and its cells data.

var rowData: [MIDITimeTableRowData] = [
  MIDITimeTableRowData(
    cells: [
      MIDITimeTableCellData(data: "C7", position: 0, duration: 4),
      MIDITimeTableCellData(data: "Dm7", position: 4, duration: 4),
      MIDITimeTableCellData(data: "G7b5", position: 8, duration: 4),
      MIDITimeTableCellData(data: "C7", position: 12, duration: 4),
    ],
    headerCellView: HeaderCellView(title: "Chords"),
    cellView: { cellData in
      let title = cellData.data as? String ?? ""
      return CellView(title: title)
    }),
]

MIDITimeTableViewDataSource is very likely to UITableViewDataSource or UICollectionViewDataSource API. Just feed the row data, number of rows, time signature and you are ready to go.

func numberOfRows(in midiTimeTableView: MIDITimeTableView) -> Int {
  return rowData.count
}

func timeSignature(of midiTimeTableView: MIDITimeTableView) -> MIDITimeTableTimeSignature {
  return MIDITimeTableTimeSignature(beats: 4, noteValue: .quarter)
}

func midiTimeTableView(_ midiTimeTableView: MIDITimeTableView, rowAt index: Int) -> MIDITimeTableRowData {
  let row = rowData[index]
  return row
}

You can customise the measure bar, the grid, each header and data cell. Check out the example project.

MIDITimeTableCellView's are editable, you can move around them on the grid, resize their duration or long press to open a delete menu. Also, you need to subclass yourself to present your own data on it.

You can set the minMeasureWidth and maxMeasureWidth to set zoom levels of the time table.

Documentation

Full documentation are here.

AppStore

This library used in my app ChordBud, check it out!

miditimetableview's Issues

Add history and add undo/redo functionality

• Hold a snapshot of dataSource on each update (add a limit variable).
• Add snapshots to history array.
• Make undo/redo through the history .
• Add undo/redo public functions.

Possible to make the timeline bar stick to its place while scrolling?

Hey Cem, once again thank you for the great library 😄
I would like to know if it is possible to make the timeline bar stick to where it is while scrolling?

Reason: Say, first we scroll in vertical direction and then when we try to scroll in horizontal direction (considering there are no empty spaces but only fully occupied cells) most of the time the cells are being moved instead of scrolling in horizontal direction. So at those times it will come in handy to scroll using the timeline-bar at the top.

Please let know if we can make the timeline bar to stick to its position all the time 🙏

Stratagies for moving playhead in time with AKSequencer?

Hi Cemoclay,

Really loving this library!! So Far i'm able to populate with custom cells and everything is going well. I have a AKSequencer hooked up as well, but for the life of me I can't figure out how to get the playhead to play back smoothly like you have in ChordBud. ANY guidance would be so appreciative!

Make edit multiple cells

• Add a draggable multiple selection rect.
• Make cells selectable.
• Make move, resize and delete multiple selected cells.