| # Pipic | |||||
| Pipic is software for making slideshows. The idea is that you have one server, | |||||
| running a pipic server, and have as many clients as necessary which just | |||||
| display the website hosted by the pipic server. | |||||
| ## Usage | |||||
| 1. Copy `conf.json.example` to `conf.json`, and change the desired preferences. | |||||
| You may for example want to change `slides` to something other than | |||||
| 'exampleSlides'. | |||||
| 2. Run `node server.js`. | |||||
| 3. Point your clients to the site hosted by the pipic server. | |||||
| ## Automatic fullscreen | |||||
| There are multiple ways for a client to automatically display the website in | |||||
| fullscreen. | |||||
| ### Firefox | |||||
| The easiest way for Firefox is to go to about:config and change | |||||
| `full-screen-api.allow-trusted-requests-only` to false, and the website will | |||||
| automatically fullscreen itself. You could also change | |||||
| `full-screen-api.warning.timeout` to 0 to disable the warning telling you the | |||||
| website is fullscreen. | |||||
| ### Chrome/Chromium | |||||
| You could start Chrome/Chromium with the `--start-fullscreen` flag, and the | |||||
| browser will automatically start in fullscreen mode. For some reason, Chrome | |||||
| seems to have issues when started from a plain X session without a window | |||||
| manager though, so I would advise using Firefox. |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script> | <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script> | ||||
| <script> | <script> | ||||
| (function fullscreen() { | |||||
| var elem = document.body; | |||||
| var rFS = elem.requestFullScreen || | |||||
| elem.msRequestFullScreen || | |||||
| elem.mozRequestFullScreen || | |||||
| elem.webkitRequestFullScreen; | |||||
| if (rFS) | |||||
| rFS.call(elem); | |||||
| })(); | |||||
| var overlay = () => document.querySelector("#_overlay"); | var overlay = () => document.querySelector("#_overlay"); | ||||
| var main = () => document.querySelector("#_main"); | var main = () => document.querySelector("#_main"); | ||||
| function await() { | function await() { | ||||
| // Wait for the next slide change, then update again | // Wait for the next slide change, then update again | ||||
| console.log("fetching"); | console.log("fetching"); | ||||
| fetch("/await") | |||||
| fetch("/await", { method: "POST" }) | |||||
| .then(response => response.json()) | .then(response => response.json()) | ||||
| .then(obj => { | .then(obj => { | ||||
| console.log("fetched", JSON.stringify(obj)); | console.log("fetched", JSON.stringify(obj)); |