Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
8biticon picture generator. Create your own funny profile pics!
JavaScript Python CSS
branch: master

Merge pull request #2 from mgrach/master

link to android app
latest commit 57d945506a
@matveyco authored
Failed to load latest commit information.
8bit-client add link to android app
8bit-server/python-django/constructor add link to android app
LICENSE Update LICENSE
README.md Update README.md

README.md

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
});
Something went wrong with that request. Please try again.