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 group

Navigation 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
});

vdone215 / 8biticon