added logo, readme.txt, and top-right.html

Basically all the files you'll need.
zhivotnoya · Jan 24, 2019 · 278420c · 278420c
1 parent 70ce327
commit 278420c
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 0 deletions.
diff --git a/XION-logo.png b/XION-logo.png
diff --git a/readme.txt b/readme.txt
@@ -0,0 +1,13 @@
+How to use:
+
+1) create a directory for the script to reside
+2) put files (including this one) into that directory
+3) open top-right.html, goto line 81, and change the info for "player", "agency", "callsign" making sure to preserve the
+   formatting and any quotes.  If you need a quote or other punctuation mark in your name/agency/callsign please refer to
+   this: https://www.toptal.com/designers/htmlarrows/punctuation/   and utilize the code labelled as "HTML ENTITY".
+4) load into OBS (or other software) as a "BROWSER SOURCE" the file with the .html extension
+5) activate the layer and profit!
+
+Version History:
+v2: this one
+v1: initially was 3 separate files.
diff --git a/top-right.html b/top-right.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<!-- goto line 81 and be sure to edit your information -->
+<html>
+    <head>
+        <script src="https://code.jquery.com/jquery.min.js"></script>
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+        <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+        <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&effect=outline" rel="stylesheet" type="text/css"> 
+
+        <style>
+            body { 
+                background-color: rgba(0, 0, 0, 0); 
+                margin: 0px auto; 
+                overflow: hidden; 
+                font-family: 'Share Tech Mono', monospace;
+                font-size: 13px;
+                color: #AFAFAF;
+            }
+
+            .Blink {
+                animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
+            }
+
+            @keyframes blinker {  
+                from { opacity: 1; }
+                to { opacity: 0; }
+            }
+
+            .top-right{
+                float: right;
+                width: auto;
+                text-align: right;
+            }
+
+            .top-right-container{
+                float: right;
+                width: auto;
+                text-align: right;
+                background-color: rgba(0,0,0,0.5);
+                padding: 5px;
+                margin: 10px;
+                -moz-border-radius: 10px;
+                -webkit-border-radius:10px;
+                border-radius:10px;
+            }
+
+            .container{
+                width: 100wh;
+                height: 100vh;
+            }
+        </style>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>XION Bodycam Overlay</title>
+    </head>
+
+    <body>
+        <div class="top-right-container">
+            <div class="top-right">
+                <img src="XION-logo.png" width="64" height="64" border="0">
+            </div>
+            <div class="top-right">
+                REC&nbsp;<i class="fa fa-circle text-danger Blink"></i>&nbsp;&nbsp;XION CHASE-CAM&trade;&nbsp;&nbsp;<br />
+                <span id="player">XXX</span>
+                <span id="callsign">[000]</span>&nbsp;&nbsp;<br />
+                <span id="agency">XXX</span>&nbsp;&nbsp;<br />                
+                <span style="padding:0px;margin:0px;" id="day">00</span>
+                <span style="padding:0px;margin:0px;" id="month">XXX</span>
+                <span style="padding:0px;margin:0px;" id="year">0000</span>&nbsp;
+                <span style="padding:0px;margin:0px;" id="hr">00</span>
+                <span style="padding:0px;margin:0px;">:</span>
+                <span style="padding:0px;margin:0px;" id="min">00</span>
+                <span style="padding:0px;margin:0px;">:</span>
+                <span style="padding:0px;margin:0px;" id="sec">00</span>
+                <span style="padding:0px;margin:0px;" id="tz">XX</span>&nbsp;&nbsp;
+            </div>
+        </div>
+    </body>
+
+    <script>
+        //***edit this only for your information***
+        const player = "M. HIGHTOWER";
+        const agency = "LOS SANTOS POLICE DEPARTMENT";
+        const callsign = "[272]";
+        //***        end edit this only         ***
+
+        var d,h,m,s,animate;
+        const monthNames = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
+
+        function init(){
+            d=new Date();
+            h=d.getHours();
+            m=d.getMinutes();
+            s=d.getSeconds();
+            t=d.toLocaleString('en', {timeZoneName:'short'}).split(' ').pop();
+            clock();
+            day=d.getDate();
+            month=d.getMonth();
+            year=d.getFullYear();
+
+        };
+
+        function clock(){
+            s++;
+            if(s==60){
+                s=0;
+                m++;
+                if(m==60){
+                    m=0;
+                    h++;
+                    if(h==24){
+                        h=0;
+                    }
+                }
+            }
+            $('sec', s);
+            $('min', m);
+            $('hr', h);
+            $('tz', t);
+            $('day', day);
+            $('year', year);
+            $('month', monthNames[month]);
+            $('player', player);
+            $('agency', agency);
+            $('callsign', callsign);
+            animate=setTimeout(clock,1000);
+        };
+
+        function $(id,val){
+            if(val<10){
+                val='0'+val;
+            }
+            document.getElementById(id).innerHTML=val;
+        };
+
+        window.onload=init;
+    </script>
+
+</html>