# 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)); |