17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016-2017 Dani Rodríguez
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # HTML5 Testcard
2 |
3 | **[See demo](https://makigas.github.io/testcard)**
4 |
5 | Just a webpage that renders a testcard with a clock pattern. I use it on my
6 | livestreams while I'm setting up before starting. You can give it a try using
7 | the public website.
8 |
9 | 
10 |
11 | ## Usage
12 |
13 | The most basic form is just accessing the index.html file. However, by using the
14 | `banner` param in the URL querystring a fixed text can be displayed on the top
15 | half of the screen. Example:
16 |
17 | 
18 |
19 | ## Using with OBS
20 |
21 | You can attach webpages as sources in OBS livestreams by installing the
22 | Browsersource plugin. Please, download the plugin for your platform first:
23 |
24 | * [CLR Browsersource for OBS for Windows][bswin].
25 | * [Browser Plugin for OBS Multiplatform][bsobs].
26 |
27 | Add the public page as the website to display. Make sure the testcard fills
28 | the entire screen. Set the URL to the testcard one, change the `banner` param
29 | if you want; now you are ready to rock.
30 |
31 | ## License
32 |
33 | The theme is available as open source under the terms of the
34 | [MIT License](http://opensource.org/licenses/MIT). See LICENSE.txt for the
35 | full contents of the license.
36 |
37 | [bswin]: https://obsproject.com/forum/resources/clr-browser-source-plugin.22/
38 | [bsobs]: https://obsproject.com/forum/resources/browser-plugin.115/
--------------------------------------------------------------------------------
/assets/testcard.css:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is part of the makigas testcard - www.github.com/makigas/testcard
3 | * Copyright (C) 2016-2017 Dani Rodríguez
4 | *
5 | * Permission is hereby granted, free of charge, to any person obtaining a copy
6 | * of this software and associated documentation files (the "Software"), to deal
7 | * in the Software without restriction, including without limitation the rights
8 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | * copies of the Software, and to permit persons to whom the Software is
10 | * furnished to do so, subject to the following conditions:
11 | *
12 | * The above copyright notice and this permission notice shall be included in
13 | * all copies or substantial portions of the Software.
14 | *
15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | * SOFTWARE.
22 | */
23 |
24 | @font-face {
25 | font-family: 'VCR';
26 | src: url(vcr.ttf);
27 | }
28 |
29 | body {
30 | background: black;
31 | margin: 0;
32 | padding: 0;
33 | font-family: 'VCR', monospace;
34 | font-size: 8vh;
35 | }
36 |
37 | @media all and (max-width: 640px) {
38 | body { font-size: 6vh; }
39 | }
40 |
41 | @media all and (orientation: portrait) {
42 | body { font-size: 4vh; }
43 | }
44 |
45 | div.testcard {
46 | background: url('bars.png');
47 | background-size: cover;
48 |
49 | /* Landscape. */
50 | width: 100vw;
51 | height: 56.24vw;
52 |
53 | /* Portrait. */
54 | max-width: 177.778vh;
55 | max-height: 100vh;
56 |
57 | /* Positioning. */
58 | margin: auto;
59 | position: absolute;
60 | top: 0;
61 | left: 0;
62 | right: 0;
63 | bottom: 0;
64 | }
65 |
66 | div.inner {
67 | width: 100%;
68 | height: 100%;
69 | margin: 0;
70 | padding: 0;
71 | position: relative;
72 | }
73 |
74 | p {
75 | background: black;
76 | color: white;
77 | padding: 2vh 4vh;
78 | display: inline-block;
79 | cursor: default;
80 | }
81 |
82 | #banner {
83 | position: absolute;
84 | top: 10%;
85 | left: 50%;
86 | transform: translateX(-50%);
87 | }
88 |
89 | #date {
90 | position: absolute;
91 | bottom: 5%;
92 | left: 5%;
93 | }
94 |
95 | #time {
96 | position: absolute;
97 | bottom: 5%;
98 | right: 5%;
99 | }
--------------------------------------------------------------------------------
/assets/testcard.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is part of the makigas testcard - www.github.com/makigas/testcard
3 | * Copyright (C) 2016-2017 Dani Rodríguez
4 | *
5 | * Permission is hereby granted, free of charge, to any person obtaining a copy
6 | * of this software and associated documentation files (the "Software"), to deal
7 | * in the Software without restriction, including without limitation the rights
8 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | * copies of the Software, and to permit persons to whom the Software is
10 | * furnished to do so, subject to the following conditions:
11 | *
12 | * The above copyright notice and this permission notice shall be included in
13 | * all copies or substantial portions of the Software.
14 | *
15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | * SOFTWARE.
22 | */
23 |
24 | (function(window, document) {
25 | var decode = function(t) {
26 | var ta = document.createElement("textarea");
27 | ta.innerHTML = t;
28 | return ta.value;
29 | };
30 |
31 | var queryString = function() {
32 | var qs = window.location.search.substring(1).split('&');
33 | var params = { };
34 | qs.forEach(function(q) {
35 | params[q.split('=')[0]] = q.split('=')[1]
36 | });
37 | return params;
38 | };
39 |
40 | var recall = function() {
41 | var date = new Date();
42 | var hours = date.getHours();
43 | var minutes = date.getMinutes();
44 | var seconds = date.getSeconds();
45 | var day = date.getDate();
46 | var month = date.getMonth() + 1;
47 | var year = date.getYear() % 100;
48 |
49 | var hh = (hours < 10) ? '0' + hours : hours;
50 | var mm = (minutes < 10) ? '0' + minutes : minutes;
51 | var ss = (seconds < 10) ? '0' + seconds : seconds;
52 | var dd = (day < 10) ? '0' + day : day;
53 | var ii = (month < 10) ? '0' + month : month;
54 | var yy = (year < 10) ? '0' + year : year;
55 |
56 | var day = dd + '/' + ii + '/' + yy;
57 | var hour = hh + ':' + mm + ':' + ss;
58 | document.getElementById('time').innerHTML = hour;
59 | document.getElementById('date').innerHTML = day;
60 | };
61 |
62 | if (queryString().banner) {
63 | document.getElementById('banner').innerHTML = decodeURI(queryString().banner);
64 | } else {
65 | document.getElementById('banner').remove();
66 | }
67 |
68 | recall();
69 | window.setInterval(recall, 250);
70 | })(window, document);
--------------------------------------------------------------------------------
/pm5644/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Testcard
5 |
6 |
7 |
8 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------