8biticon
Pixel art picture generator. Create your own funny profile pics!
#How to use?
jQuery and Twitter Bootstrap are required.
However, from bootstrap you can attach only things related to Carousel and Transition plugins (these files can be found along with others in 8bit-client folder).
Attention
You will need patched version of bootsrap-carousel.js. You can find patched version in 8bit-client/external/bootstrap/ or use 8bit-client/external/bootstrap/bootstrap-carousel.patch file to create your own.
<!-- jQuery -->
<script src="8bit-client/external/jquery-1.8.3.min.js"></script>
<!-- 8biticon uses waitForImages script by Alex Dickson -->
<script src="8bit-client/external/waitForImages.js"></script>
<!-- twitter bootstrap related -->
<link href="8bit-client/external/bootstrap/bootstrap-carousel.css" type="text/css" rel="stylesheet" />
<script src="8bit-client/external/bootstrap/bootstrap-carousel.patched.js"></script>
<script src="8bit-client/external/bootstrap/bootstrap-transition.js"></script><!-- 8biticon mandatory css and js files -->
<link href="8bit-client/css/8biticon.css" type="text/css" rel="stylesheet" />
<script src="8bit-client/js/8biticon.js"></script>Now you must prepare your html.
##What can be used in constructor? You must create an element with .pixel class. For instance,
<div id="my_8biticon" class="pixel"></div>You can fill it with the following constructions:
Tabs
You can use element with .tabs class and .tab child to get autogenerated list of .tab elements which represent all the layers of the current group.
<div class="tabs"> <!-- .tabs will contain the list of generated .tab elements -->
<div class="tab"> <!-- this element gets cloned for every layer in the group -->
<span class="tab-text"></span> <!-- .tab-text may be ommited, in that case layer name will be written directly to .tab -->
</div>
</div>Avatar viewport
Represents result image for preview with all selected items of the every layer of the current group.
<div class="carousel slide">
<div class="carousel-inner"> <!-- this element gets cloned for every layer in the group -->
<div class="item"></div> <!-- this element gets cloned for every item in the layer; note, that img element is appended to this element -->
</div>
</div>Layer items list
Represents pickable list of layer items. User can emmit "click" event on .item element for it to appear in viewport.
<div class="layers">
<div class="layer"> <!-- this element gets cloned for every layer in the group -->
<div class="item"></div> <!-- this element gets cloned for every item in the layer; note, that img element is appended to this element -->
</div>
</div>Groups (Optional)
To change the group user must emmit "click" event on one of .group-control elements. No generations for group lists is supported now. Note, this is optional if you have only one group or you want to be able to change group only within your scripts.
<a href="javascript://" class="group-control" data-group="myGroup">Group Name</a> <!-- [data-group] contains the name of any groupNavigation links (Optional)
This elements move current layer cursor to another layer (next or previous).
<!-- [data-direction] contains either "prev" or "next" -->
<a href="javascript://" class="layer-control" data-direction="prev">Go back</a>
<a href="javascript://" class="layer-control" data-direction="next">Go ahead</a>Generate random picture link (Optional)
Regeneration will pick random item from the every layer of the current group.
<a href="javascript://" class="layers-regenerate">Generate random picture</a>##After that After that you should add your stylesheet with some styles for your constructor. Example can be found in 8bit-client/example/css/ folder.
##Final step Add some javascript for everything to work.
$("#my_8biticon").pixel({
images: '8bit-clent/img/', /// path to folder containing group folders with images
json: '8bit-client/js/8settings.json' // path to 8settings.json file
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent