Skip to content

Instantly share code, notes, and snippets.

@tylerwatt12
Created January 8, 2024 17:56
Show Gist options
  • Save tylerwatt12/7a64f760a5c72b89a8a3f656ba81a71b to your computer and use it in GitHub Desktop.
Save tylerwatt12/7a64f760a5c72b89a8a3f656ba81a71b to your computer and use it in GitHub Desktop.
iView STB3200 HLS viewer for Nginx
apt install ffmpeg libnginx-mod-rtmp
#If you don't want to use RTMP just use
apt install ffmpeg nginx
gpu_mem=384
hdmi_blanking=1
user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /var/log/nginx/error.log;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
#this section is optional if you want to stream over RTMP
rtmp {
server {
listen 1935;
chunk_size 4096;
allow publish 127.0.0.1;
deny publish all;
application live {
live on;
record off;
}
}
}
If you get these:
DTS 122771437720, next:1016626 st:0 invalid dropping
PTS 122771437720, next:1016626 invalid dropping st:0
or 0fps from ffmpeg
Run this command to reset the device (clear the buffer), then run the full ffmpeg command again
ffmpeg -y -re -f v4l2 -input_format yuyv422 -i /dev/video0 -vcodec h264_v4l2m2m
#general working principal
https://www.youtube.com/watch?v=2OtrIoG60rY
#List Audio input devices (used for ffmpeg command)
arecord -L
#List video input devices
v4l2-ctl --all
#List video formats ffmpeg can read from the device
ffmpeg -f v4l2 -list_formats all -i /dev/video0
#This is example output
#[video4linux2,v4l2 @ 0x55aaeb50f0] Raw : yuyv422 : YUYV 4:2:2 : 1280x720
#[video4linux2,v4l2 @ 0x55aaeb50f0] Raw : nv12 : Y/UV 4:2:0 : 1280x720
#[video4linux2,v4l2 @ 0x55aaeb50f0] Raw : yuv420p : Planar YUV 4:2:0 : 1280x720
#Ideally you want a device that can do RAW, because MJPEG will increase CPU consumption.
#The resoltuions listed above change depending on the source format. Changing the iView's output resoltuion will change these.
Play to HDMI output:
ffplay -f v4l2 -input_format yuyv422 -video_size 1920x1080 -framerate 30 /dev/video0
View HLS Stream in VLC
http://[pi-ip]/stream.m3u8
View RTMP Stream in VLC
rtmp://[pi-ip]:1935/live/stream
https://i.imgur.com/sLojPPT.png
This is a DIY "Slingbox" using the following:
iView STB3200
S06 ir blaster
Raspberry Pi 4
Elgato CamLink 4K (1080 should also work)
The Pi 4 runs Nginx for three purposes:
Provide a front end so you can view the stream, and change channels using a virtual remote.
Provide the baking RTMP server (If you want to go that route instead of HLS)
About the virtual remote:
The virtual remote is a re-created iView STB3200 remote in SVG using Inkscape.
I used the XML editor to set the IDs for each remote button
https://inkscape.org/forums/questions/naming-the-ids-of-layers-for-svg-exporting/
Javascript is used to detect when a button on the remote is clicked.
Javascript sends a web request to the IP address of the S06 running tasmota.
The S06 IR Blaster will send the aproprate remote command to the TV Tuner box
Note: Need to redo the JS for the button, throws lots of errors in console due to CORS. Doesn't affect function though.
So the IR blaster needs to be physically next to the iView STB, and the Pi has the Elgato capture card plugged into its USB 3.0 port.
The Elgato has its HDMI end connected to the iView STB
Latency is 6 to 10 seconds, and i'm in the process of finding ways to reduce this.
If you want hardware acceleration, change libx264 to v4l2m2m
Doing this requires a custom built binary with a patch though (haven't tried re-compiling ffmpeg yet)
https://www.reddit.com/r/ffmpeg/comments/s00e5a/help_with_h264_encoding_with_h264_v4l2m2m_and_hls/
Without hw acceleration the pi4 can handle 720p60 video fine.
Note: Changing the resolution on the iview STB will kill the ffmpeg stream because the source input resolution changes for the elgato.
WebRTC would be the ideal solution to stream with low latency, this is being looked into.
This video helped me set up ffmpeg and nginx: https://www.youtube.com/watch?v=2OtrIoG60rY
Your FFMPEG command will be highly dependent on the capture stick you are using. If your resoltuions or color space isn't correct, FFMPEG will fail to run.
Before using ffmpeg to stream, you can test with VLC and RTMP, or ffplay. See ffmpeg commands section.
The ffmpeg command needs to be scripted, haven't gotten there yet. It also needs a watchdog timer if no frames are being decoded.
Obtain an S06 IR blaster (without temp/humidity sensor)
https://templates.blakadder.com/auvisio_S06.html
Buy a CP2102 USB TTL Module, connect TX to RX, RX to TX, 3v3 to 3v3, and GND to IO0 and GND
https://tasmota.github.io/docs/Getting-Started/
Use the web installer to flash Tasmota: https://tasmota.github.io/install/
Once your IR blaster is flashed with Tasmota, run this template
{"NAME":"S06 IR Blaster","GPIO":[0,0,0,0,288,1088,0,0,0,0,1056,0,0,0],"FLAG":0,"BASE":18}
DonEnable HTTP API so these commands can be sent
Other Options> HTTP API Enable
You can send remote commands using this URL: http://{tasmotaIP}/cm?cmnd=irsend {"Protocol":"NEC","Bits":32,"Data":"HexCodeHere"}
Hex codes for the iView STB3200 are located in index.html
If you aren't using an STB3200 and need remote codes for another device, you can get them by logging into the Tasmota device's web interface and simply point the remote at the IR blaster the hit any button.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video Player</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="flex-child"" id="player-container">
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="/stream.m3u8" type="application/x-mpegURL">
</video>
</div>
<div class="flex-container" id="remote-container">
<!-- Include your SVG file here -->
<div id="remote-svg-container">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="67.328392mm"
height="215.19914mm"
viewBox="0 0 67.328393 215.19914"
version="1.1"
id="svg1"
xml:space="preserve"
sodipodi:docname="remote.svg"
inkscape:version="1.3 (0e150ed, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="0.70710678"
inkscape:cx="113.13708"
inkscape:cy="486.48946"
inkscape:window-width="760"
inkscape:window-height="997"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" /><defs
id="defs1"><clipPath
id="_clipPath_3bMssuw1FBG8xl35NEIe15ujm9pfvhwa"><rect
width="300"
height="300"
id="rect1-6"
x="0"
y="0" /></clipPath></defs><g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-67.013771,-43.731993)"><path
id="rect8"
style="stroke-width:0.262292"
d="m 100.04873,43.731993 c 10.0729,0 34.29343,2.785315 34.29343,10.821796 V 253.05645 c 0,3.25458 -2.66608,5.87469 -5.97776,5.87469 H 72.991525 c -3.311676,0 -5.977754,-2.62011 -5.977754,-5.87469 V 54.553789 c 0,-8.36175 24.129759,-10.821796 33.034959,-10.821796 z"
sodipodi:nodetypes="zssssssz" /><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="goto"
cx="121.51104"
cy="193.4949"
r="4.7192793" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.319609"
id="tvradio"
width="12.921723"
height="8.3611145"
x="94.329285"
y="71.1446"
ry="1.4495672"
rx="1.4495672" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.319609"
id="hdmi"
width="12.921723"
height="8.3611145"
x="94.217102"
y="89.096779"
ry="1.4495672"
rx="1.4495672" /><g
id="power"><circle
style="fill:#ff0000;stroke-width:0.264583"
id="path1"
cx="81.405045"
cy="60.564091"
r="6.1350632" /><path
d="M 83.790468,58.340837 C 83.522893,58.06989 83.283676,57.854049 82.935834,57.683601 82.717276,57.57636 82.453526,57.66878 82.34787,57.88978 c -0.10636,0.221024 -0.01462,0.487013 0.203713,0.594255 0.259019,0.126842 0.433041,0.267121 0.632929,0.469475 0.981249,0.99227 0.981249,2.60665 0,3.598669 -0.475313,0.480949 -1.10779,0.745127 -1.779871,0.745127 -0.672283,0 -1.304558,-0.264404 -1.779897,-0.745127 -0.981223,-0.992019 -0.981223,-2.606399 0,-3.598669 0.200568,-0.20258 0.398871,-0.342406 0.645108,-0.469023 0.207966,-0.107467 0.294976,-0.37323 0.194051,-0.594481 -0.100976,-0.220773 -0.318176,-0.311633 -0.531299,-0.207311 -0.337953,0.165944 -0.645108,0.387195 -0.913337,0.658142 -1.315554,1.329946 -1.315554,3.493641 0,4.823814 0.65789,0.66486 1.521758,0.99763 2.385626,0.99763 0.864068,0 1.727936,-0.332543 2.3856,-0.99763 1.316006,-1.32972 1.316006,-3.493641 -2.5e-5,-4.823814 z m -2.385827,2.827146 c 0.248225,0 0.449673,-0.201474 0.449673,-0.449674 l 6.79e-4,-3.302736 c 0,-0.248199 -0.201448,-0.449673 -0.449673,-0.449673 -0.24825,0 -0.449698,0.201474 -0.449698,0.449673 v 1.34907 l -6.79e-4,1.953641 c 0,0.248452 0.201448,0.449699 0.449698,0.449699 z"
fill="#000000"
id="path1-50"
clip-path="url(#clipPath3)"
style="isolation:isolate;fill:#ffffff;stroke-width:0.0251622" /></g><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="repeat"
width="10.697034"
height="6.9216099"
x="74.082092"
y="203.71559"
ry="1.2"
rx="1.2" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="aspect"
width="10.697034"
height="6.9216099"
x="88.246994"
y="203.71559"
ry="1.2"
rx="1.2" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="audio"
width="10.697034"
height="6.9216099"
x="102.4119"
y="203.71559"
ry="1.2"
rx="1.2" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="return"
width="10.697034"
height="6.9216099"
x="116.5768"
y="203.71559"
ry="1.2"
rx="1.2" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="usb"
width="10.697034"
height="6.9216099"
x="74.082092"
y="215.72121"
ry="1.2"
rx="1.2" /><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="cc"
width="10.697034"
height="6.9216099"
x="88.246994"
y="215.72121"
ry="1.2"
rx="1.2" /><rect
style="fill:#ff0000;stroke-width:0.264583"
id="rec"
width="10.697034"
height="6.9216099"
x="74.082092"
y="227.72682"
ry="1.2"
rx="1.2" /><rect
style="fill:#008000;stroke-width:0.264583"
id="schd"
width="10.697034"
height="6.9216099"
x="88.246994"
y="227.72682"
ry="1.2"
rx="1.2" /><rect
style="fill:#dede00;fill-opacity:1;stroke-width:0.264583"
id="info"
width="10.697034"
height="6.9216099"
x="102.4119"
y="227.72682"
ry="1.2"
rx="1.2" /><rect
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.264583"
id="pvr"
width="10.697034"
height="6.9216099"
x="116.5768"
y="227.72682"
ry="1.2"
rx="1.2" /><circle
style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583"
id="fav"
cx="80.560173"
cy="147.63481"
r="4.4046607" /><circle
style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583"
id="epg"
cx="120.79575"
cy="147.63481"
r="4.4046607" /><circle
style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583"
id="menu"
cx="80.560173"
cy="107.84974"
r="4.4046607" /><circle
style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:0.264583"
id="exit"
cx="120.79575"
cy="107.84974"
r="4.4046607" /><path
d="m 91.170172,250.19556 c -0.488684,-0.20001 -0.809719,-0.61338 -1.555193,-2.0025 -1.28934,-2.40255 -1.230732,-2.33964 -2.179705,-2.33964 h -0.847065 l -0.04866,2.12118 -0.04866,2.12118 -0.736554,0.0513 -0.736554,0.0513 v -2.77903 -2.77904 h 2.230576 2.230576 l 0.672835,1.16982 c 0.37006,0.6434 0.867437,1.54027 1.105284,1.99303 0.237846,0.45277 0.485586,0.82321 0.550532,0.82321 0.06495,0 0.610997,-0.8959 1.213446,-1.99089 l 1.095361,-1.99089 0.823207,-0.002 c 0.527349,-0.001 0.823208,0.0728 0.823208,0.20648 0,0.11474 -0.59237,1.27216 -1.316377,2.57203 -1.551477,2.7855 -2.104798,3.25411 -3.276255,2.77464 z m 18.884428,-0.001 c -0.19395,-0.0786 -0.4485,-0.25845 -0.56567,-0.39963 -0.26519,-0.31954 -1.94126,-4.56386 -1.94126,-4.91587 0,-0.19907 0.1857,-0.24569 0.81609,-0.20489 l 0.8161,0.0528 0.69625,1.77639 c 0.38293,0.97702 0.77817,1.7764 0.8783,1.7764 0.10013,0 0.40631,-0.81888 0.6804,-1.81973 l 0.49834,-1.81972 h 1.01013 c 0.96006,0 1.01553,0.0236 1.1189,0.4766 0.0598,0.26212 0.30465,1.13526 0.54406,1.94031 0.51702,1.73849 0.5693,1.71053 1.42088,-0.76 l 0.57113,-1.65691 h 0.92639 0.92639 l -0.60651,1.68974 c -0.33359,0.92936 -0.73076,2.04069 -0.8826,2.46963 -0.35812,1.01161 -0.95147,1.55976 -1.68839,1.55976 -0.87581,0 -1.40769,-0.53819 -1.84316,-1.86503 -0.21081,-0.64231 -0.42255,-1.23622 -0.47054,-1.31978 -0.048,-0.0836 -0.27349,0.43874 -0.50111,1.16069 -0.55794,1.76965 -1.26881,2.3194 -2.40412,1.85921 z m -12.905341,-2.78131 v -2.77291 h 0.779881 0.77988 v 2.77291 2.77291 h -0.77988 -0.779881 z m 3.864881,2.43355 c -0.70047,-0.4271 -0.97854,-1.37296 -0.88585,-3.0133 0.0614,-1.087 0.11754,-1.23867 0.62663,-1.69354 l 0.55917,-0.49962 h 2.42026 2.42026 l 0.10688,0.42583 c 0.19806,0.78917 0.0922,0.83227 -1.96451,0.79954 -1.96434,-0.0313 -2.64174,0.1227 -2.64174,0.60045 0,0.20993 0.38992,0.25386 2.25298,0.25386 h 2.25299 v 0.70783 0.70782 l -2.17291,-0.0579 c -2.09023,-0.0557 -2.17102,-0.0447 -2.12301,0.28869 0.0465,0.32271 0.201,0.34995 2.24064,0.39498 l 2.19073,0.0484 0.0715,0.48716 c 0.12875,0.87726 0.0959,0.88926 -2.43105,0.88857 -2.04281,-5.6e-4 -2.44477,-0.0471 -2.92297,-0.33871 z m -10.185763,-5.50168 c -0.239723,-1.27784 -1.053213,-2.37714 -2.431114,-3.28527 -2.391146,-1.57594 -5.889225,-0.53898 -7.192656,2.13216 -0.285724,0.58554 -0.52498,1.20945 -0.531679,1.38646 -0.01118,0.29528 -0.02352,0.29324 -0.149652,-0.0248 -0.07561,-0.19064 -0.07993,-0.38561 -0.0096,-0.43327 0.07033,-0.0477 0.181547,-0.33411 0.247142,-0.63655 0.328495,-1.5146 2.091796,-3.11567 3.883648,-3.52634 2.903829,-0.6655 5.895838,1.35536 6.366743,4.30023 0.143663,0.89843 -0.01634,0.97487 -0.18284,0.0874 z m -5.810598,-0.83236 c 0,-0.60208 0.0044,-0.60549 0.779881,-0.60549 0.750996,0 0.779881,0.0193 0.779881,0.51992 0,0.41983 -0.07507,0.5224 -0.389941,0.5328 -0.214467,0.007 -0.565413,0.0456 -0.77988,0.0856 -0.343845,0.0641 -0.389941,0.001 -0.389941,-0.5328 z m 33.807411,0.15102 c -0.42923,-0.54568 -0.45133,-0.89446 -0.0894,-1.41117 0.57336,-0.81858 2.15651,-0.27932 2.15651,0.73457 0,1.03601 -1.41904,1.50049 -2.0671,0.6766 z m 1.38527,0.10393 c 0.22634,-0.12113 0.33522,-0.36319 0.33522,-0.74522 0,-0.68296 -0.26372,-0.98175 -0.86653,-0.98175 -0.24783,0 -0.54419,0.0936 -0.65857,0.20797 -0.29737,0.29737 -0.25665,1.01075 0.0789,1.38147 0.32544,0.3596 0.62646,0.39686 1.11103,0.13753 z m -1.03113,-0.73046 c -0.0178,-0.57506 0.0275,-0.6499 0.39349,-0.6499 0.33349,0 0.43022,0.1091 0.49938,0.56325 0.10127,0.66492 -0.005,0.85461 -0.24136,0.43182 -0.21616,-0.38626 -0.45099,-0.38565 -0.55215,0.001 -0.0436,0.16681 -0.0883,0.0108 -0.0994,-0.34662 z m 0.58647,-0.30328 c 0.0589,-0.0953 -0.0145,-0.17331 -0.16308,-0.17331 -0.1486,0 -0.27019,0.078 -0.27019,0.17331 0,0.0953 0.0734,0.1733 0.16308,0.1733 0.0897,0 0.21128,-0.078 0.27019,-0.1733 z"
style="fill:#f9f9f9"
id="path1-22" /><g
id="2"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-8"
cx="93.733612"
cy="163.55513"
r="4.7192793" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.807014"
y="165.89604"
id="text9-5"><tspan
sodipodi:role="line"
id="tspan9-4"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.807014"
y="165.89604">2</tspan></text></g><g
id="ok"><circle
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.295112"
id="path1-2"
cx="100.60049"
cy="127.81751"
r="6.8429551" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="100.6739"
y="130.15842"
id="text9-5-49"><tspan
sodipodi:role="line"
id="tspan9-4-5"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="100.6739"
y="130.15842">OK</tspan></text></g><g
id="3"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-6"
cx="107.62233"
cy="163.55513"
r="4.7192793" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="107.63346"
y="165.85469"
id="text9-5-1"><tspan
sodipodi:role="line"
id="tspan9-4-0"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="107.63346"
y="165.85469">3</tspan></text></g><g
id="4"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-3"
cx="121.51104"
cy="163.55513"
r="4.7192793" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="121.62713"
y="165.88651"
id="text9-5-0"><tspan
sodipodi:role="line"
id="tspan9-4-09"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="121.62713"
y="165.88651">4</tspan></text></g><g
id="5"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-2"
cx="79.844894"
cy="178.52502"
r="4.7192793" /><g
id="g1-6"
transform="translate(-13.917159,14.93755)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-3"><tspan
sodipodi:role="line"
id="tspan9-4-63"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">5</tspan></text></g></g><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="79.101524"
y="203.18059"
id="text9-5-3-5"><tspan
sodipodi:role="line"
id="tspan9-4-63-5"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="79.101524"
y="203.18059">REPEAT</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="94.13681"
y="203.21504"
id="text9-5-3-5-5"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-9"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="94.13681"
y="203.21504">ASPECT</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="108.09999"
y="203.21642"
id="text9-5-3-5-7"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-5"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="108.09999"
y="203.21642">AUDIO</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="122.00046"
y="203.18059"
id="text9-5-3-5-3"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="122.00046"
y="203.18059">RETURN</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="121.41275"
y="188.41914"
id="text9-5-3-5-3-4"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="121.41275"
y="188.41914">GOTO</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="100.72137"
y="153.1331"
id="text9-5-3-5-3-4-6"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-7"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="100.72137"
y="153.1331">CH</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="120.77232"
y="141.45561"
id="text9-5-3-5-3-4-2"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-0"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="120.77232"
y="141.45561">EPG</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="80.455444"
y="141.49007"
id="text9-5-3-5-3-4-2-8"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-0-9"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="80.455444"
y="141.49007">FAV</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="126.48117"
y="128.79144"
id="text9-5-3-5-3-4-7"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-5"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="126.48117"
y="128.79144">VOL</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="74.622826"
y="128.79144"
id="text9-5-3-5-3-4-5"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-6"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="74.622826"
y="128.79144">VOL</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="100.72137"
y="104.1852"
id="text9-5-3-5-3-4-1"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-4"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="100.72137"
y="104.1852">CH</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="80.569138"
y="102.33311"
id="text9-5-3-5-3-4-9"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-3"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="80.569138"
y="102.33311">MENU</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="120.71238"
y="102.36756"
id="text9-5-3-5-3-4-59"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-09"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="120.71238"
y="102.36756">EXIT</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="100.69175"
y="87.781036"
id="text9-5-3-5-3-4-57"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-50"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="100.69175"
y="87.781036">HDMI</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="100.70828"
y="69.78936"
id="text9-5-3-5-3-4-0"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-52-6-06"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="100.70828"
y="69.78936">TV/RADIO</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="78.87339"
y="215.14207"
id="text9-5-3-5-8"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-4"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="78.87339"
y="215.14207">USB</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.160889"
y="215.14207"
id="text9-5-3-5-87"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-7"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.160889"
y="215.14207">CC</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="78.741096"
y="227.31152"
id="text9-5-3-5-55"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-58"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="78.741096"
y="227.31152">REC</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.315224"
y="227.31152"
id="text9-5-3-5-74"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-8"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.315224"
y="227.31152">SCHD</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="108.10571"
y="227.3129"
id="text9-5-3-5-2"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-2"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="108.10571"
y="227.3129">INFO</tspan></text><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="121.86818"
y="227.27707"
id="text9-5-3-5-1"><tspan
sodipodi:role="line"
id="tspan9-4-63-5-521"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="121.86818"
y="227.27707">PVR</tspan></text><g
id="6"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-8-7"
cx="93.733612"
cy="178.52502"
r="4.7192793" /><g
id="g1-0"
transform="translate(0.00336478,14.978897)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-4"><tspan
sodipodi:role="line"
id="tspan9-4-64"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">6</tspan></text></g></g><g
id="7"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-6-1"
cx="107.62233"
cy="178.52502"
r="4.7192793" /><g
id="g1-8"
transform="translate(13.858686,14.978897)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-40"><tspan
sodipodi:role="line"
id="tspan9-4-093"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">7</tspan></text></g></g><g
id="8"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-3-5"
cx="121.51104"
cy="178.52502"
r="4.7192793" /><g
id="g1-2"
transform="translate(27.76489,14.978897)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-9"><tspan
sodipodi:role="line"
id="tspan9-4-7"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">8</tspan></text></g></g><g
id="9"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-87"
cx="79.844894"
cy="193.4949"
r="4.7192793" /><g
id="g1-3"
transform="translate(-13.904436,29.948787)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-04"><tspan
sodipodi:role="line"
id="tspan9-4-8"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">9</tspan></text></g></g><g
id="0"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-8-6"
cx="93.733612"
cy="193.4949"
r="4.7192793" /><g
id="g1-4"
transform="translate(-0.00299639,29.948787)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-21"><tspan
sodipodi:role="line"
id="tspan9-4-9"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">0</tspan></text></g></g><g
id="hyphen"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7-6-0"
cx="107.62233"
cy="193.4949"
r="4.7192793" /><g
id="g1-86"
transform="translate(13.863457,29.334934)"><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="93.757278"
y="165.84727"
id="text9-5-25"><tspan
sodipodi:role="line"
id="tspan9-4-1"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="93.757278"
y="165.84727">-</tspan></text></g></g><g
id="1"><circle
style="fill:#808080;fill-opacity:1;stroke-width:0.203525"
id="path1-7"
cx="79.844894"
cy="163.55513"
r="4.7192793" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="79.559036"
y="165.89604"
id="text9-5-2"><tspan
sodipodi:role="line"
id="tspan9-4-6"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.51384px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="79.559036"
y="165.89604">1</tspan></text></g><g
id="mute"><circle
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.264583"
id="path1-3"
cx="119.95087"
cy="60.160095"
r="6.1350632" /><text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88056px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;stroke-width:0.162846"
x="119.8834"
y="61.765671"
id="text9-5-06"><tspan
sodipodi:role="line"
id="tspan9-4-4"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.88056px;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.162846"
x="119.8834"
y="61.765671">MUTE</tspan></text></g><text
xml:space="preserve"
style="font-size:10.5833px;line-height:1.25;font-family:'ITC Blair';-inkscape-font-specification:'ITC Blair';stroke-width:0.264583"
x="76.729164"
y="207.16875"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
style="stroke-width:0.264583"
x="76.729164"
y="207.16875"></tspan></text><g
id="up"><path
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.19692"
d="m 100.43729,105.6814 c -0.847087,0.0148 -1.649937,0.31824 -2.254637,0.92295 l -5.459098,5.45909 a 2.8807268,2.8807268 0 0 0 -0.0021,0.002 l -0.09922,0.0997 a 2.8807268,2.8807268 0 0 0 -0.895037,2.07739 2.8807268,2.8807268 0 0 0 2.880961,2.88045 2.8807268,2.8807268 0 0 0 1.211297,-0.2682 11.876854,11.876854 0 0 1 4.858104,-1.07539 11.876854,11.876854 0 0 1 4.78679,1.03973 2.8905585,2.8905585 0 0 0 1.29811,0.31419 2.8905585,2.8905585 0 0 0 2.89078,-2.89026 2.8905585,2.8905585 0 0 0 -1.14774,-2.30529 l -4.90616,-4.90616 c -0.91051,-0.91051 -2.07296,-1.36878 -3.16208,-1.34979 z"
id="rect3" /><path
sodipodi:type="star"
style="fill:#ffffff;stroke-width:0.264583"
id="path2"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="98.22155"
sodipodi:cy="108.69852"
sodipodi:r1="2.928401"
sodipodi:r2="1.4642005"
sodipodi:arg1="0.46364761"
sodipodi:arg2="1.5108452"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 100.84079,110.00814 -2.531512,0.15195 -2.531514,0.15195 1.134165,-2.26833 1.134165,-2.26833 1.397349,2.11638 z"
inkscape:transform-center-x="-1.5532154e-05"
inkscape:transform-center-y="-0.5557028"
transform="matrix(0.99820414,0.04547111,-0.05990401,0.75770296,9.1130166,25.274031)" /></g><g
id="down"><path
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.19692"
d="m 106.77747,138.17757 a 2.8905585,2.8905585 0 0 0 -1.19527,0.25942 l -5.2e-4,-0.001 a 11.876854,11.876854 0 0 1 -4.90409,1.09658 11.876854,11.876854 0 0 1 -4.676716,-0.97462 l -0.0026,0.004 a 2.8807268,2.8807268 0 0 0 -1.373043,-0.34882 2.8807268,2.8807268 0 0 0 -2.880444,2.88096 2.8807268,2.8807268 0 0 0 1.02526,2.20039 l 4.985743,4.98574 c 1.618694,1.61869 4.03456,1.80952 5.41672,0.42736 l 5.32577,-5.32577 a 2.8905585,2.8905585 0 0 0 1.16944,-2.31304 2.8905585,2.8905585 0 0 0 -2.89027,-2.89078 z"
id="path19" /><path
sodipodi:type="star"
style="fill:#ffffff;stroke-width:0.264583"
id="path2-5"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="98.22155"
sodipodi:cy="108.69852"
sodipodi:r1="2.928401"
sodipodi:r2="1.4642005"
sodipodi:arg1="0.46364761"
sodipodi:arg2="1.5108452"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 100.84079,110.00814 -2.531512,0.15195 -2.531514,0.15195 1.134165,-2.26833 1.134165,-2.26833 1.397349,2.11638 z"
inkscape:transform-center-x="1.6560742e-05"
inkscape:transform-center-y="0.5557078"
transform="matrix(-0.99820414,-0.04547111,0.05990401,-0.75770296,192.18041,230.49277)" /></g><g
id="right"><path
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.19692"
d="m 114.09847,118.68836 a 2.8905585,2.8905585 0 0 0 -2.89026,2.89027 2.8905585,2.8905585 0 0 0 0.31781,1.30483 11.876854,11.876854 0 0 1 1.02836,4.77231 11.876854,11.876854 0 0 1 -1.00872,4.74028 l 0.017,0.0124 a 2.8708949,2.8708949 0 0 0 -0.31212,1.28829 2.8708949,2.8708949 0 0 0 2.87062,2.87114 2.8708949,2.8708949 0 0 0 2.01331,-0.83406 l 0.007,0.005 5.58778,-5.58777 c 1.38204,-1.38217 1.19184,-3.79803 -0.42685,-5.41672 l -4.89841,-4.89841 a 2.8905585,2.8905585 0 0 0 -2.30529,-1.14722 z"
id="path17" /><path
sodipodi:type="star"
style="fill:#ffffff;stroke-width:0.264583"
id="path2-2"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="98.22155"
sodipodi:cy="108.69852"
sodipodi:r1="2.928401"
sodipodi:r2="1.4642005"
sodipodi:arg1="0.46364761"
sodipodi:arg2="1.5108452"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 100.84079,110.00814 -2.531512,0.15195 -2.531514,0.15195 1.134165,-2.26833 1.134165,-2.26833 1.397349,2.11638 z"
inkscape:transform-center-x="-0.55569803"
inkscape:transform-center-y="1.5295114e-05"
transform="matrix(-0.04547111,0.99820414,-0.75770296,-0.05990401,203.56994,36.364854)" /></g><g
id="left"><path
style="fill:#00a9ff;fill-opacity:1;stroke-width:0.19692"
d="m 87.252054,118.72036 a 2.8807268,2.8807268 0 0 0 -2.044837,0.86196 l -0.001,-10e-4 -5.579504,5.57951 c -1.382154,1.38203 -1.191821,3.79803 0.426847,5.41672 l 4.935099,4.9351 a 2.8905585,2.8905585 0 0 0 2.247408,1.0821 2.8905585,2.8905585 0 0 0 2.89078,-2.89078 2.8905585,2.8905585 0 0 0 -0.248047,-1.16943 l 0.0036,-0.003 a 11.876854,11.876854 0 0 1 -1.081587,-4.87619 11.876854,11.876854 0 0 1 1.003556,-4.73046 l -10e-4,-0.001 a 2.8807268,2.8807268 0 0 0 0.329177,-1.32292 2.8807268,2.8807268 0 0 0 -2.880443,-2.88096 z"
id="path18" /><path
sodipodi:type="star"
style="fill:#ffffff;stroke-width:0.264583"
id="path2-8"
inkscape:flatsided="false"
sodipodi:sides="3"
sodipodi:cx="98.22155"
sodipodi:cy="108.69852"
sodipodi:r1="2.928401"
sodipodi:r2="1.4642005"
sodipodi:arg1="0.46364761"
sodipodi:arg2="1.5108452"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 100.84079,110.00814 -2.531512,0.15195 -2.531514,0.15195 1.134165,-2.26833 1.134165,-2.26833 1.397349,2.11638 z"
inkscape:transform-center-x="0.55570276"
inkscape:transform-center-y="-1.6297782e-05"
transform="matrix(0.04547111,-0.99820414,0.75770296,0.05990401,-1.6638851,219.43225)" /></g><g
id="stop"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.374435"
id="rect1-37-5-5"
width="12.921723"
height="11.47568"
x="75.723267"
y="85.982216"
ry="1.9895397"
rx="1.4495672" /><path
d="m 80.106597,91.720062 v -2.077551 h 2.07755 2.07755 l -0.0109,2.066666 -0.0109,2.066665 -2.06666,0.01088 -2.06667,0.01088 z"
style="fill:#ffffff;stroke-width:0.158599"
id="path1-4" /></g><g
id="playpause"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.374435"
id="rect1-37-5-3"
width="12.921723"
height="11.47568"
x="76.003548"
y="71.1446"
ry="1.9895397"
rx="1.4495672" /><g
id="g10"
transform="matrix(0.15859934,0,0,0.15859934,99.69012,79.804723)"
style="fill:#ffffff"><path
d="m -131.49793,-18.425573 v -14.161336 l 0.8599,0.52307 c 7.15286,4.351052 21.31799,13.145586 21.58649,13.402146 0.29108,0.27814 0.0101,0.54735 -1.5875,1.52113 -1.06765,0.65076 -6.19766,3.81415 -11.40003,7.02976 l -9.45886,5.846571 z"
style="fill:#ffffff"
id="path1-1"
sodipodi:nodetypes="ccsssscc" /><path
d="m -108.74376,-18.425568 v -13.758335 h 3.43958 3.43959 v 13.758335 13.7583305 h -3.43959 -3.43958 z m 15.875003,0 v -13.758335 h 3.57188 3.57187 v 13.758335 13.7583305 h -3.57187 -3.57188 z"
style="fill:#ffffff"
id="path1-9" /></g></g><g
id="rw"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.374435"
id="rect1-37-5"
width="12.921723"
height="11.47568"
x="112.65502"
y="71.1446"
ry="1.9895397"
rx="1.4495672" /><path
d="m 117.67032,77.617816 c -0.64622,-0.40108 -1.16738,-0.744474 -1.15811,-0.763096 0.0202,-0.04051 2.27728,-1.439522 2.32258,-1.439573 0.0173,-2e-5 0.0315,0.660877 0.0315,1.46866 0,0.807783 -0.005,1.46747 -0.0105,1.465971 -0.006,-0.0014 -0.53922,-0.330882 -1.18545,-0.731962 z m 2.81898,-0.01328 c -0.61905,-0.384865 -1.12419,-0.718641 -1.12254,-0.74172 0.003,-0.04392 2.24735,-1.447716 2.31443,-1.447716 0.0226,0 0.0385,0.596362 0.0385,1.447716 0,1.131857 -0.0115,1.447034 -0.0525,1.444598 -0.0289,-0.0017 -0.55895,-0.318009 -1.17798,-0.702878 z"
style="fill:#ffffff;stroke-width:0.158599"
id="path1-8" /></g><g
id="ff"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.374435"
id="rect1-37-5-6"
width="12.921723"
height="11.47568"
x="112.71093"
y="85.982216"
ry="1.9895397"
rx="1.4495672" /><path
d="m 116.58329,91.71422 c 0,-1.168707 0.0109,-1.466634 0.0531,-1.45045 0.086,0.033 2.31782,1.417531 2.31782,1.437878 0,0.01021 -0.53346,0.34816 -1.18545,0.750983 l -1.18545,0.732407 z m 2.85347,-0.01413 c 0,-0.796244 0.0142,-1.4465 0.0314,-1.445014 0.065,0.0056 2.28705,1.404781 2.29214,1.443349 0.005,0.03711 -2.221,1.442572 -2.29214,1.44729 -0.0173,0.0011 -0.0314,-0.649383 -0.0314,-1.445625 z"
style="fill:#ffffff;stroke-width:0.158599"
id="path1-71" /></g><g
id="prev"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="rect1-8-3"
width="10.697034"
height="6.9216099"
x="102.4119"
y="215.72121"
ry="1.2"
rx="1.2" /><g
id="g12"
transform="matrix(0.11531336,0,0,0.11531336,115.97783,215.68211)"
style="fill:#f9f9f9"><path
d="m -74.74481,36.76057 c -4.9477,-3.05754 -9.02012,-5.644089 -9.04981,-5.747889 -0.0494,-0.1728 17.16463,-10.875261 17.87034,-11.110501 0.23053,-0.0768 0.3076,2.72033 0.3076,11.16431 0,6.19676 -0.0298,11.26378 -0.0661,11.26005 -0.0364,-0.004 -4.11427,-2.50842 -9.06198,-5.56597 z M -92.86876,30.1625 V 18.25625 h 2.91041 2.91042 V 30.1625 42.06875 h -2.91042 -2.91041 z"
style="fill:#f9f9f9"
id="path1-5"
sodipodi:nodetypes="cccscccccccccccc" /><path
d="m -56.753142,35.938372 c -4.9477,-3.05754 -9.02012,-5.64409 -9.04981,-5.74789 -0.0494,-0.1728 17.16463,-10.87526 17.87034,-11.1105 0.23053,-0.0768 0.3076,2.72033 0.3076,11.16431 0,6.19676 -0.0298,11.26378 -0.0661,11.26005 -0.0364,-0.004 -4.11427,-2.50842 -9.06198,-5.56597 z"
style="fill:#f9f9f9"
id="path1-17" /></g></g><g
id="skip"><rect
style="fill:#808080;fill-opacity:1;stroke-width:0.264583"
id="rect1-85-9"
width="10.697034"
height="6.9216099"
x="116.5768"
y="215.72121"
ry="1.2"
rx="1.2" /><g
id="g11"
transform="matrix(0.11531336,0,0,0.11531336,113.347,224.21294)"
style="fill:#f9f9f9"><path
d="m 91.810405,-43.688098 v -11.90625 h 2.91042 2.910416 v 11.90625 11.90625 h -2.910416 -2.91042 z m -21.166675,-0.79375 c 0,-6.11187 0.0694,-11.1125 0.15427,-11.1125 0.31193,0 17.837405,10.91709 17.837405,11.1114 0,0.19245 -17.533005,11.1136 -17.841975,11.1136 -0.0823,0 -0.1497,-5.00062 -0.1497,-11.1125 z"
style="fill:#f9f9f9"
id="path1-10" /><path
d="m 60.986463,-49.335073 c 4.9477,3.05754 9.02012,5.64409 9.04981,5.74789 0.0494,0.1728 -17.16463,10.87526 -17.87034,11.1105 -0.23053,0.0768 -0.3076,-2.72033 -0.3076,-11.16431 0,-6.19676 0.0298,-11.26378 0.0661,-11.26005 0.0364,0.004 4.11427,2.50842 9.06198,5.56597 z"
style="fill:#f9f9f9"
id="path1-17-3" /></g></g></g>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var remoteSvgContainer = document.getElementById("remote-svg-container");
// Mapping of button IDs to corresponding codes
var buttonCodes = {
power: '0x807F9867',
mute: '0x807FA05F',
playpause: '0x807F7887',
stop: '0x807F10EF',
rw: '0x807F8A75',
ff: '0x807F52AD',
tvradio: '0x807FE01F',
hdmi: '0x807F20DF',
menu: '0x807FD827',
exit: '0x807FDA25',
fav: '0x807F22DD',
epg: '0x807F30CF',
up: '0x807F0AF5',
down: '0x807F48B7',
left: '0x807F6897',
right: '0x807FE817',
ok: '0x807FC837',
'1': '0x807F807F',
'2': '0x807F906F',
'3': '0x807FB04F',
'4': '0x807F40BF',
'5': '0x807F50AF',
'6': '0x807F708F',
'7': '0x807FC03F',
'8': '0x807FD02F',
'9': '0x807FF00F',
'0': '0x807F827D',
hyphen: '0x807F926D',
goto: '0x807F28D7',
repeat: '0x807F728D',
aspect: '0x807F08F7',
audio: '0x807F7A85',
return: '0x807FF20D',
usb: '0x807F629D',
cc: '0x807F6A95',
prev: '0x807F4AB5',
skip: '0x807FEA15',
rec: '0x807FC23D',
schd: '0x807F12ED',
info: '0x807F1AE5',
pvr: '0x807F8877',
};
// Add click event listener to the entire SVG container
remoteSvgContainer.addEventListener("click", function(event) {
// Check if the clicked element or its parent is a button
var buttonElement = findButtonElement(event.target);
if (buttonElement) {
// Get the button ID
var buttonId = buttonElement.id;
// Check if the button ID exists in the mapping
if (buttonCodes.hasOwnProperty(buttonId)) {
// Get the corresponding code for the button
var code = buttonCodes[buttonId];
// Make HTTP call to your server
var url = "http://192.168.64.115/cm?cmnd=irsend";
// Construct the payload
var payload = { Protocol: "NEC", Bits: 32, Data: code };
// Construct the full URL with the payload
var fullUrl = url + " " + JSON.stringify(payload);
// Make the HTTP request
fetch(fullUrl, { method: 'GET' })
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle the response if needed
console.log("HTTP request successful:", data);
})
.catch(error => {
// Handle errors
console.error('There was a problem with the fetch operation:', error);
});
} else {
console.warn("Button ID not found in mapping:", buttonId);
}
}
});
// Function to recursively find the closest parent button element
function findButtonElement(element) {
if (!element) {
return null;
}
// Check if the current element is a button (rect, g, circle)
if (element.id && buttonCodes.hasOwnProperty(element.id)) {
return element;
}
// If not, check the parent element
return findButtonElement(element.parentElement);
}
});
</script>
<script type="text/javascript">
var player = videojs('my_video_1');
player.ready(function () {
var hls = new Hls();
hls.loadSource('/stream.m3u8');
hls.attachMedia(player.tech_.el_);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment