3. Tape them on your TV. You have two options. Begin your input stripe in one of the corners, or let it begin anywhere. You can set it later in the settings of hyperion.
4. Use your soldering iron and powercables to connect the corners. You also have to connect (!!ONLY!!) GND and V+ with the end and the beginning of your stripe, to prevent powerloss over a long ledstripe.
You can also use some edge connectors (like: https://www.amazon.de/dp/B08C2M18XF), but in this case they are a way to small and you have to cut them a bit (Trust me you would not do this.. took me 4 hours to get this sh\*\* working).
5. Get your datacable or another powercables ready. Connect them to CLK(CK) and SI(DI) on your input stripe. They have to be as long, as your way to your Pi is. After that you can use the jumpercables to solder one end with the ledstripe cable and use the other end as GPIO connector. I got flickering issues (caused by the powernet) so I decided to wiggle the data cables with aluminum foil. Flickering disappeard. You can avoid this if you buy the datacable right at first.
#### Power source preparing
--MAKE SURE YOU KNOW WHAT YOU ARE DOING! IF NOT ASK AN ELECTRICAN! THIS EXAMPLE IS FOR GERMANY!! --
1. Get your power source, the Wagos, a cutted old powercode and connect it together:
2. Get your power source, the Wagos, the powercables and connect them together:
#### Led+Pi connection
1. Connect GND(Black) and V+(Red) with your LED-Stripe
2. Connect GND(Black) also with a GND Pin of the Pi (eg. Pin 9 | **Pi 3/4**) You can find a plan here: https://www.elektronik-kompendium.de/sites/raspberry-pi/fotos/raspberry-pi-15b.jpg (Pi 3 and 4 are the same. **Pi 2 is different!**)
3. Connect CLK(CK) of your input stripe with Pin 23
4. Connect SI(DI) of your input stripe with Pin 19
Here is a very nice picture, how to look after all: https://digitalewelt.at/wp-content/uploads/2018/02/Ambilight-Projekt-Verkabelung-LED-Netzteil.jpg
## Software
- Add **dtparam=spi=on** to the end of your /boot/config.txt and reboot
- Installation and usage guide: https://docs.hyperion-project.org/en/user/Installation.html#requirements
- After installation you have to setup the WS2801s. Therefore in Hyperion go to Configuration -> Led-Hardware -> Controller type: **WS2801**, SPI path: **/dev/spidev0.0**, , Baudrate: **1000000**. Change RGB byte order if you experience wrong colors. Mine are on **RGB**
- Count your LEDs and pass them to the LED-Layout tab.
## Credits
Build it myself using this guide: https://digitalewelt.at/ambilight-mit-dem-raspberry-pi-3-4k-schritt-fuer-schritt-anleitung/
================================================
FILE: frontend/appinfo.json
================================================
{
"id": "org.webosbrew.piccap",
"version": "0.5.2",
"vendor": "Homebrew",
"type": "web",
"main": "index.html",
"title": "PicCap",
"appDescription": "Hyperion Sender App - Ambilight for WebOS",
"icon": "assets/logo_small.png",
"largeIcon": "assets/logo_big.png",
"splashBackground": "assets/splash_1080p.png",
"bgImage": "assets/splash_1080p.png",
"iconColor": "#000000",
"supportGIP": true
}
================================================
FILE: frontend/css/basicui.css
================================================
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
::selection{
background: #fff;
color: #000;
}
.menu .logo p{
display: inline;
}
nav{
position: fixed;
width: 100%;
z-index: 12;
}
.menu{
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 100px 10px;
transition: all 0.3s ease;
}
.menu .logo p{
text-decoration: none;
font-size: 35px;
font-weight: 600;
}
.menu ul{
display: inline-flex;
}
.menu ul li{
list-style: none;
margin-left: 7px;
}
.menu ul li:first-child{
margin-left: 0;
}
.menu ul li button{
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
transition: all 0.3s ease;
}
.background{
position: absolute;
height: 100%;
width: 100%;
transition: all 0.3s ease;
}
.main{
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 20px;
text-align: center;
}
.main .title{
font-size: 55px;
font-weight: 600;
}
.main .title p{
display: inline;
}
.main .sub_title{
font-size: 32px;
font-weight: 600;
}
.main .btns{
margin-top: 20px;
}
.main .btns button{
height: 55px;
width: 170px;
margin: 0 10px;
font-size: 20px;
font-weight: 500;
padding: 0 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.service {
display: block;
}
.settings {
display: none;
}
.logs {
display: none;
}
.about {
display: none;
}
.status {
position: fixed;
bottom: 0;
width: 100%;
padding: 10px 10px;
transition: all 0.3s ease;
}
.status .lightMode{
display: inline-table;
}
.status .info {
display: inline-table;
float: right;
margin-top: 4px;
}
.status .info p {
text-decoration: none;
display: inline;
text-align: right;
font-size: 17px;
}
.lightMode button {
display: inline-block;
padding: 1px 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
margin: 0 1px;
transition: all 0.3s ease;
}
.lightMode img {
width: 20px;
height: 20px;
margin: 0px 0px -3px 0px;
}
#txtPicCapVersion {
color: #fff;
font-size: 11px;
font-weight: 600;
}
#txtServiceVersion {
color: #fff;
font-size: 11px;
font-weight: 600;
}
.settings {
margin-left: 15%;
margin-right: 15%;
}
.advSettingitems {
display: none;
}
.settingItemsAdv {
display: none;
}
.settingItemsNormal {
display: block;
}
.settingItems {
text-align: center;
}
.settingItems p{
font-size: 20px;
font-weight: 500;
margin-bottom: 2px;
}
.settingItems ul{
display: inline-flex;
margin-bottom: 20px;
}
.settingItems ul li{
text-align: left;
list-style: none;
margin-left: 10px;
margin-right: 10px;
}
.settingItems input[type="text"]{
border-style: none;
border-radius: 5px;
height: 30px;
min-width: 150px;
padding: 0 20px;
font-size: 15px;
}
.checkboxes{
text-align: right;
margin-left: 20px;
}
.checklabel label{
font-size: 19px;
font-weight: 500;
}
.settingItems input[type="checkbox"]{
height: 25px;
width: 25px;
padding: 0 20px;
vertical-align: middle;
margin-left: 7px;
margin-bottom: 4px;
}
.settingItems select{
height: 30px;
min-width: 230px;
padding: 0 20px;
font-size: 15px;
}
.manualres {
display: none;
}
.settingsocket {
display: none
}
.manualsocket {
display: none
}
.settingaddressport {
display: flex
}
.avatars img{
width: 30px;
height: 30px;
border-radius: 100%;
margin-right: 10px;
}
.avatars p{
display: flex;
align-items:center;
}
.aboutItems {
text-align: center;
}
.aboutItems p{
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
text-align: center;
}
.aboutItems ul{
display: inline-flex;
margin-right: 20px;
}
.aboutItems ul li{
text-align: left;
list-style: none;
margin-right: 10px;
}
.upperTab p{
font-size: 20px;
font-weight: 500;
color: #fff;
margin-bottom: 15px;
text-align: center;
}
.logsBtns {
display: block;
}
.upperTab .btns button{
width: 200px;
margin-bottom: 10px;
}
.logBox textarea{
resize: none;
width: 95%;
height: 500px;
}
.consoleLog {
display: block;
height: 95%;
}
.hyperionLog {
display: none;
}
================================================
FILE: frontend/css/blackui.css
================================================
.menu.blackMode {
background: black;
border-bottom: 2px solid grey;
}
.menu .logo.blackMode p{
color: #fff;
}
.menu.blackMode ul li button{
color: #fff;
border-radius: 5px;
border-style: none;
background: none;
}
.menu.blackMode ul li button:hover{
background: #fff;
color: black;
}
.background.blackMode{
background: black;
}
.main .title.blackMode{
color: #fff;
}
.main .sub_title.blackMode{
color: #fff;
}
.main .btns.blackMode button{
border-radius: 5px;
border: 2px solid white;
outline: none;
background: none;
color: #fff;
}
.btns.blackMode button:hover{
background: white;
color: black;
}
.status.blackMode {
background: black;
border-top: 2px solid grey;
}
.status .info.blackMode p {
color: #fff;
}
.lightMode.blackMode button {
outline: none;
border: 2px solid white;
border-radius: 5px;
background-color: #0d0d0d;
}
.lightMode.blackMode button:hover{
background-color: white;
color: black;
}
.lightMode.blackMode button:focus {
background-color: white;
color: black;
border: 2px solid black;
outline: 1px solid white;
}
.menu.blackMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid black;
outline: 1px solid white;
}
.main.blackMode button:focus {
background: white;
color: black;
border: 2px solid black;
outline: 1px solid white;
}
.main.blackMode button:active {
background: lightgray;
}
.settingItems.blackMode p{
color: #fff;
}
.checklabel.blackMode label{
color: #fff;
}
.settingItems.blackMode input[type="checkbox"]{
border-style: none;
border-radius: 5px;
}
.settingItems.blackMode select{
border-style: none;
border-radius: 5px;
background-color: white;
}
.settingItems.blackMode :focus{
border-style: solid;
border: 2px solid black;
outline: 1px solid white;
}
.settingItems.blackMode button:active{
background: lightgray;
}
.settingItems.blackMode input:focus{
border-style: solid;
border-radius: 2px;
border: 2px solid black;
outline: 1px solid white;
}
.checkboxes.blackMode input[type="checkbox"]:focus{
outline: 2px solid black;
outline: 1px solid white;
}
.aboutItems.blackMode p{
color: #fff;
}
.aboutItems.blackMode a{
color: white;
}
.aboutItems.blackMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid white;
}
.upperTab.blackMode p{
color: #fff;
}
.logBox.blackMode textarea{
color: white;
background-color: black;
border: 1px solid white;
}
.logBox.blackMode textarea:focus{
background-color: black;
border: 2px solid white;
outline: 1px solid white;
}
================================================
FILE: frontend/css/blueui.css
================================================
.menu.blueMode {
background: #0d47a1;
}
.menu .logo.blueMode p{
color: #fff;
}
.menu.blueMode ul li button{
color: #fff;
border-radius: 5px;
border-style: none;
background: none;
}
.menu.blueMode ul li button:hover{
background: #fff;
color: black;
}
.background.blueMode{
background: #1e88e5;
}
.main .title.blueMode{
color: #fff;
}
.main .sub_title.blueMode{
color: #fff;
}
.main .btns.blueMode button{
border-radius: 5px;
border: 2px solid white;
outline: none;
background: none;
color: #fff;
}
.btns.blueMode button:hover{
background: white;
color: black;
}
.status.blueMode {
background: #1565c0;
}
.status .info.blueMode p {
color: #fff;
}
.lightMode.blueMode button {
outline: none;
border: 2px solid white;
border-radius: 5px;
background-color: transparent;
}
.lightMode.blueMode button:hover{
background-color: white;
color: black;
}
.lightMode.blueMode button:focus {
background-color: white;
color: black;
border: 2px solid black;
}
.menu.blueMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid black;
}
.main.blueMode button:focus {
background: white;
color: black;
border: 2px solid black;
}
.main.blueMode button:active {
background: lightgray;
}
.settingItems.blueMode p{
color: #fff;
}
.checklabel.blueMode label{
color: #fff;
}
.settingItems.blueMode input[type="checkbox"]{
border-style: none;
border-radius: 5px;
}
.settingItems.blueMode select{
border-style: none;
border-radius: 5px;
background-color: white;
}
.settingItems.blueMode :focus{
border-style: solid;
border-radius: 2px;
border: 2px solid black;
}
.settingItems.blueMode button:active{
background: lightgray;
}
.settingItems.blueMode input:focus{
border-style: solid;
border-radius: 2px;
border: 2px solid black;
}
.checkboxes.blueMode input[type="checkbox"]:focus{
outline: 2px solid black;
}
.aboutItems.blueMode p{
color: #fff;
}
.aboutItems.blueMode a{
color: white;
}
.aboutItems.blueMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid white;
}
.upperTab.blueMode p{
color: #fff;
}
.logBox.blueMode textarea{
color: white;
background-color: #1e88e5;
border: 1px solid white;
}
.logBox.blueMode textarea:focus{
background-color: #1e88e5;
border: 2px solid white;
outline: 1px solid white;
}
================================================
FILE: frontend/css/darkui.css
================================================
.menu.darkMode {
background: #303030;
}
.menu .logo.darkMode p{
color: #fff;
}
.menu.darkMode ul li button{
color: #fff;
border-radius: 5px;
border-style: none;
background: none;
}
.menu.darkMode ul li button:hover{
background: #fff;
color: black;
}
.background.darkMode{
background: #424242;
}
.main .title.darkMode{
color: #fff;
}
.main .sub_title.darkMode{
color: #fff;
}
.main .btns.darkMode button{
border-radius: 5px;
border: 2px solid white;
outline: none;
background: none;
color: #fff;
}
.btns.darkMode button:hover{
background: white;
color: black;
}
.status.darkMode {
background: #212121;
}
.status .info.darkMode p {
color: #fff;
}
.lightMode.darkMode button {
outline: none;
border: 2px solid white;
border-radius: 5px;
background-color: transparent;
}
.lightMode.darkMode button:hover{
background-color: white;
color: black;
}
.lightMode.darkMode button:focus {
background-color: white;
color: black;
border: 2px solid black;
}
.menu.darkMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid black;
}
.main.darkMode button:focus {
background: white;
color: black;
border: 2px solid black;
}
.main.darkMode button:active {
background: lightgray;
}
.settingItems.darkMode p{
color: #fff;
}
.checklabel.darkMode label{
color: #fff;
}
.settingItems.darkMode input[type="checkbox"]{
border-style: none;
border-radius: 5px;
}
.settingItems.darkMode select{
border-style: none;
border-radius: 5px;
background-color: white;
}
.settingItems.darkMode :focus{
border-style: solid;
border-radius: 2px;
border: 2px solid black;
}
.settingItems.darkMode button:active{
background: lightgray;
}
.settingItems.darkMode input:focus{
border-style: solid;
border-radius: 2px;
border: 2px solid black;
}
.checkboxes.darkMode input[type="checkbox"]:focus{
outline: 2px solid black;
}
.aboutItems.darkMode p{
color: #fff;
}
.aboutItems.darkMode a{
color: white;
}
.aboutItems.darkMode :focus {
border-style: solid;
border-radius: 3px;
border: 3px solid white;
}
.upperTab.darkMode p{
color: #fff;
}
.logBox.darkMode textarea{
color: white;
background-color: #424242;
border: 1px solid white;
}
.logBox.darkMode textarea:focus{
background-color: #424242;
border: 2px solid white;
outline: 1px solid white;
}
================================================
FILE: frontend/index.html
================================================
hyperion-webos
loading..
Service settings
-
-
Socket
-
Socket path
-
Address
-
Port
-
Hyperion priority
-
Resolution
-
Width
-
Height
-
Maximal FPS
_______________________________________________
-
Video capture backend
-
Graphical capture backend
-
Service advanced settings
_______________________________________________
_______________________________________________
Some very simple experimental feature to collect logs. Setup logging is needed after a reboot.
Will be reworked in newer versions. Press the load button to get last 200 log entries.
Some info about this project
-
PicCap is the frontend app, which you have installed on your TV and you can see here, to make things as easy as possible. It ships and controls the seperated hyperion-webos background service, which controls the capture interfaces on your TV based on reverse engineering, proccesses the output and sends the resulting low quality image data to a receiver like Hyperion's flatbuffer server.
On newer TVs there is no official way for capturing DRM-protected content like Netflix or Amazon. This restriction doesn't take place for content comming from an HDMI input.
So currently as a workaround you can play your media using your PC, FireTV-Stick or Chromecast and still enjoy your LEDs.
This app requires to be run as root and tries to do this at the first start using the Homebrew Channel.
_______________________________________________
-
Feel free to raise an issue or pull request, or come to the OpenLG-Discord, if you have some questions.
GitHub-Links: github.com/webosbrew/hyperion-webos | github.com/TBSniller/piccap
OpenLG-Discord: discord.gg/9sqAgHVRhP
_______________________________________________
Some love to everyone who was, or still is involved into this project and of course the OpenLG-/Hyperion-Community! ♥
-
hyperion-webos
-
PicCap