dominic-braeunlein / party-picture-stream Goto Github PK
View Code? Open in Web Editor NEWUpload your pictures during a party and get them displayed live on a projector
Upload your pictures during a party and get them displayed live on a projector
Assuming that the projectors are no bigger than Full-HD it would make sense to downsample the image before uploading to save some bandwidth.
Just a suggestion: When using CSS (setting background-image
in JS) for displaying the images, you can let the browser do the correct scaling.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Something like this should do the job:
div.image {
background-position: center;
background-size: cover; /* or contain */
background-repeat: no-repeat;
}
In the current code, all 5 seconds the last image is requested from the server. If two images get uploaded during this period of time, the first image will never be displayed.
Suggestion:
Save on the server side, what images have been uploaded to the server since the last request. On a new request, send all images in this list to the client. The client still displays one image every 5 seconds and polls the server, when he is out of images.
When multiple display clients are connected to the server, then the server can behave in two possible ways:
There is no rational default value, since it is application specific, therefor it should be configurable.
The configuration should be easy to change and all in one place.
However, client and server-side have both configurable options.
nconf (https://github.com/flatiron/nconf) provides a way to configurate the server site. Maybe there is something for both?
Multiple users will upload files. There is a chance, that the file name will not be unique. In this case, an old image will be overwritten.
Suggestions:
Implement a global counter and append it's value to the name of the uploaded image.
It is thinkable, that more than one image every 5 seconds is uploaded. The delay between the image upload and the image actually appearing at the screen should be as short as possible to increase the fun factor (party party).
Suggestion:
If issue 1 is solved as suggested, then the viewer pulls a bunch of images on every request. It is possible to compute the time needed to display all images. (number of images * 5 seconds).
Specify a threshold max-time e.g. 1 minute.
If the the time needed to display all images polled from the server is greater than max-time, then there are two possible ways to solve this problem:
Lower the time until the next image is displayed. Here a minimum should be specified. (e.g. 2 seconds)
Display 2 or even 4 images next to each other.
If the threshold cant be reached by lowering the time between two images displayed, then the viewer should automatically switch to displaying more images at once.
After every poll, the delay and the layout are computed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.