https://github.com/willowtreeapps/rocute
beautiful ui components for roku development
https://github.com/willowtreeapps/rocute
Last synced: about 1 year ago
JSON representation
beautiful ui components for roku development
- Host: GitHub
- URL: https://github.com/willowtreeapps/rocute
- Owner: willowtreeapps
- License: apache-2.0
- Created: 2019-11-11T19:47:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-02T21:00:00.000Z (about 5 years ago)
- Last Synced: 2024-11-16T09:33:57.483Z (over 1 year ago)
- Language: Brightscript
- Size: 4.75 MB
- Stars: 38
- Watchers: 17
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-roku - rocute - Beautiful UI Components for Roku Development (Libraries / Community)
README
# rocute
beautiful ui components for roku development
## About
rocute is an open source component library to aid developers in creating beautiful roku apps in a
timely manner. Our library includes styled components, animations, and screensavers ready for easy
out of the box implementation.
## Example and Setup
### Example
```xml
```
### Setup
#### To utilize a component:
- Navigate to `./src/main/components` in the rocute directory.
- Dependent on if you want a general styled component, or an animation, or a video-overlay, select either the `styled-components`, or `animations`, or `video-overlays` directory.
- Copy the directory of the component you want into an appropriate place in your codebase.
- For component specific documentation, refer to the ThatComponent.md file in the component's example directory.
#### For access to all components:
- Copy the components directory out of `./src/main` into your project structure in an appropriate place.
- Import any and all components into your project.
- For component specific documentation, refer to the ThatComponent.md file in the component's example directory.
#### To run our app:
- Install ukor: `npm install -g @willowtreeapps/ukor`.
- Install [vscode.](https://code.visualstudio.com/)
- Install [vscode brightscript.](https://marketplace.visualstudio.com/items?itemName=celsoaf.brightscript)
- Open the root directory of our repo in vscode.
- Modify `.vscode/launch.json` so the inputs resemble `"default": "0.0.0.0",` to your roku ip address, and `"default": "password",` to your roku password.
- Click the debug tab in vscode.
- Press the dropdown button next to the play button and select `Brightscript Debug: Launch`.
- Press the play button next to the dropdown.
## Components
**ArchInterpolator -**
A type of Vector2DInterpolator which can be used to animate a smooth arc through three points.
**BounceEffect -**
A customizable bounce which can be applied to any image.
**CardRotator -**
A card rotary which moves on the y axis.
**CardZoomDiagonal -**
An overlapping card rotator where cards slide from the top left to front center, and the cards
that will be shown sooner overlap the ones that will be shown later.
**CardZoomRotary -**
An overlapping card rotator where cards are visually pulled from the back to the front center.
**CircularImageClip -**
A circular border to be placed on images, which will stretch to oval bounds
if proper heights and widths are provided.
**Clock -**
A Clock component similar to the clock inside of the Overhang component.
**DatePicker -**
A Date Picker component comprised of three LabelLists. Includes localization options.
**DisappearingLogo -**
An image overlay for a video which appears in a corner (or anywhere) and fades away after a certain amount of time.
**DisappearingNav -**
A Horizontal Nav Bar which fades up (or down) and away when it loses focus.
**HorizontalCardRotator -**
A card rotary which moves on the x axis.
**LiveIcon -**
A video overlay displayed on Live video steams but not on prerecorded content.
**NavBar -**
A Horizontal Nav Bar component.
**Next -**
The 'Next' component is an stubbed out component for development. If you are interested in
contributing, this component is here to help. Instructions can be found in the NextExample
directory.
**RandomColoredFontList -**
RandomColoredFontList is a LabelList component that will randomly change the font color of the
selected element.
**RandomColoredList -**
RandomColoredList is a LabelList component that will randomly change the color of the
selected element.
**RatingIcon -**
A video overlay which displays the rating of the video if given, and then fades out after a certain amount of time.
**ResizeList -**
ResizeList is a LabelList component that will resize so the currently selected element
takes up more space.
**Ticker -**
A news ticker component which scrolls text from right to left across the screen.
**TiledBackground -**
A rectangle with an image tiled to fill its area.
**TriangularCornerClip -**
TriangularCornerClip is a way to clip an image to fit into the bounds of a right triangle.
**TriangularImageClip -**
TriangularImageClip is a way to clip an image to fit in a triangle. As opposed to
TriangularCornerClip, this triangular clip component will stretch to your image and remain
centric on the middle of the image.
## Screensavers
**BouncingLogoScreensaver -**
A screensaver channel where a provided logo will bounce around the edges of the screen.
**ExpandingLogoScreensaver -**
A screensaver channel where a provided logo will expand and contract in the center of the screen.
## Questions
Join us in the #tooling channel on the [Roku Developers Slack](https://rokudevelopers.slack.com).
## Contributing
Contributions and suggestions are more than welcome. Please see our [Code of Conduct](/CODE_OF_CONDUCT.md)
as well as our [Contributing Guidelines ](/CONTRIBUTING.md) for more information.