Your creative, cross-platform and magnificent greeting card.
Be tired of paper greeting card? Get no originality about birthday gift? This project may come to your assistance. To make sure you'll immediately fall in love with it, please enjoy two screenshots below.
You may want to write some warm words to your best friends, parents or lover. Plain text may bore them. Greeting Card provides a magnificent animation to show the message brick by brick. Receivers just need to tap the screen until they make sense of what you want to express (maybe it's your gratitude or your love). Two demo are listed below:
Being compatible with many popular platforms including main-stream web browsers, QQ and Wechat, your receivers can open and view your greeting card everywhere regardless they are using smart phones or computers. (Lag phenomenon may occur on certain devices, because particle animations are fairly performance hungry.)
Greeting Card provides a shortcut to get your works without coding effort. Follow the instructions below to get started with Greeting Card.
Step1: Setup of Greeting Card
.zip package and unzip it to your computer. Then, you will get a directory like this:
+ greeting_card/ | `---- src/ | `---- index.html | `---- config.js | `---- config_default.js
index.html in your web browser which must support HTML5 and then you'll see the default demo. Tap the demo page until there is no unemitted particle. Now, you have got your first impression of this project.
config.js directly because of its poor readability. The best way to get your own greeting card is to generate a configuration file via Greeting Card Creator (See Step2).
If it is in your need to create more than one configuration file, you don't have to download and unzip the compressed package again. Just new a
.js file with the different name from
myconfig.js) in the
greeting_card/ directory. To apply the new configuration file to the
index.html, you need to add a query string to the url in your browser for specifying which configuration file should be used. For example, if you want to apply the
config2.js file to your greeting card, change the url from
path/to/greeting_card/index.html?config_file=config2.js in your browser.
Step2: Customization via Greeting Card Creator
Greeting Card Creator is an attached online tool to generate configuration files for simplifying the customization of Greeting Card. Open this tool in your web browser and start your creation in an easy way.
This tool is quite easy and convenient to use since you just need to fill out a form (or use the default value) and design your pattern by simple point-and-click operations.
After loading the creator in your web browser, you will get a welcome page. Now there are two choices laid in front of you:
- Click the 'Create' button to create a grid using the settings from the sidebar's form. Before this operation, you may need to change some settings on the sidebar. Also note, after your click at the 'Create' button, settings on
colwill be locked (i.e. you CANNOT modify them anymore).
- Open an existing configuration file suffixed with
config.js), if any.
No matter which one you choose, you will get a grid on the left side. Do some clicks on the grid and you'll see that the color of the block which you click at turns darkgray. If you click it again, it will turn back to lightgray. One darkgray block indicates there is one paritcle. Lightgray area indicates there is no particle. The 'Undo', 'Inverse' and 'Reset' button will come to your assitance if you want to cancel the previous opertions, inverse area's color and discard the creation, respectively.
(Basic user interface of Greeting Card Creator)
When you finish your creation, you can click the 'Export' button to get the content of the configuration file. Then, copy and save the text from the 'Export Result' textbox to a vacant
.js file. Next time, you can improve your previous work by opening this configuration file.
Step3: Publish Your Works
If you have your own server, you can publish your greeting cards like publishing other webpages.
Nevertheless, if you get nowhere to upload your works but you really need to share them, don't hesitate and drop me an email with your configuration files. I will send back the urls which direct to the works to you. I'm willing to help you out. Note: I am NOT sure that I will upload your works in time. So please send to me as early as possible.
If you are interested in this project and want to get involved, this developer guide is worth reading for you.
First, clone this project:
git clone https://github.com/yuehaowang/greeting_card.git
src/ implement the web user interface of Greeting Card. Therefore, if you want to enhance the user interface, you need to review the code in
src/ so that you can add your own code at a right place.
config_default.js are two files for customization (the latter one is used for providing default value for those options where the former one doesn't give a value). Hence if you want to add some options, you need to modify both
config.js file and
config_default.js file. Correspondingly, you need to modify a constant named
creator/src/Sidebar.js to make the creator adapt to your modification.
Greeting Card Creator is powered by React and built with create-react-app and NodeJs. You probably need to learn about all of them before you try to edit the source code. Simply put, to run the creator locally, type this command:
To build the creator, type this command:
npm run build
If you want to contribute to this project after finishing your improvements, you can submit a pull request to this repo. I will merge it and be grateful to you if I find your commits helpful.
If you come across any problems, please let me know ~
Alternatively, you can submit an issue to describe your problems.
Suggestions and comments are welcomed as well.