A wedding activity website implemented by a happy programmer couple ❤️.
git clone https://github.com/ueewbdy93/wedding-screen.git && cd wedding-screen
cp src/config/config.sample.json src/config/config.json && npm install && npm run build
npm run start
git clone https://github.com/ueewbdy93/wedding-screen.git && cd wedding-screen
docker build . -t wedding-screen
images
: put your images into itconfig
: put config.json
into it. See Configuration for detailed information.db
: empty folder which the db files will created indocker run -d -p 5566:5566 -v /PATH/TO/config:/usr/src/app/dist/config -v /PATH/TO/db:/usr/src/app/db -v /PATH/TO/images/:/usr/src/app/src/public/images wedding-screen
.
├── config.json # config must be named config.json
├── normal # folder to put normal images
| ├── image1.jpg # normal image
| └── ...
└── blur # folder to put blur images
├── image1.jpg # blurred image of normal/image1.jpg
└── ...
config.json
.DOWNLOAD_URL
field with the shared link that created in step 2.Deploy app
button. Then Heroku will automatically download configuration and images from the shared link and run deployment process.View
button to visit your own wedding web-app!NOTE: from Heroku document
Dynos are also restarted (cycled) at least once per day to help maintain the health of applications running on Heroku. Any changes to the local filesystem will be deleted.
Since the sqlite file is stored in local filesystem, all data will be cleared when Dynos restarting. You can download the sqlite file in admin page to preserve data.
A wedding activity web app implemented by a happy programmer couple dy93 and ueewbd ❤️.
There are two modes and an admin page
slideshow mode:
Users can see wedding pictures and leave bullet comments.
game mode:
This mode was inspired by Kahoot!. Since Kahoot does not show full description of options on users' phone and it's a requirement for us. We decided to implement this game service by ourselves.
admin page:
Admin can switch between modes and control the game state. Download sqlite file.
Clone the project from github.
git clone https://github.com/ueewbdy93/wedding-screen.git
cd into project folder.
cd wedding-screen
Install dependency.
npm install
Set up configurations.
cp src/config/config.sample.json src/config/config.json
Compile typescript to javascript.
npm run build
Start server.
npm run start
OK! Now you can visit http://localhost:5566 to watch slideshow or play game.
Visit http://localhost:5566/admin-index.html and login(default password:happy) to control the state.
Each slide contains two images. One is the original image, the other is the blurred one. The original one will be place in the center of the screen and scaled to match the screen height or width according to whether it's on mobile device or not. The blurred one is used as background to fill the blank that original image doesn't cover.
See our demo site for example.
Basically, the original images should be put under src/public/images/normal/
.
Put the blurred images under src/public/images/blur/
.
Also, the blur image's name should be the same with its respect normal image's.
We use GraphicsMagick Utilities to do that. Here is the example script:
src=PATH/TO/INPUT/IMAGES
for i in `ls $src`; do
gm convert -size 1280x1280 $src/$i -resize 1280x1280 images/normal/$i
gm convert images/normal/$i -blur 0x4 images/blur/$i
done
Edit src/config/config.json (If not exists, copy from src/config/config.sample.json)
Configuration options:
property | description |
---|---|
admin.password | Admin login password |
slide.intervalMs | Slideshow interval |
game.intervalMs | Answer time |
game.questions | List of question objects |
game.questions[].text | Question text |
game.questions[].options | List of option objects. Each question must have 4 options |
game.questions[].options[].text | Option text |
game.questions[].options[].isAnswer | (boolean) Indicate whether this option is correct. Allow multiple answers |
See config.sample.json for example.
Use sqlite.
DB file name is in the format of db/db-<timestamp>.sqlite
which is created on server starting.
To view the data, download the file and open it with any sqlite viewer.
If you encounter performance issues. The tips below could help.
npm run dev
To be completed