8biticon picture generator. Create your own funny profile pics!
CSS HTML JavaScript Python
Switch branches/tags
Nothing to show
Latest commit 46ab48d Dec 21, 2016 @ikonduktor ikonduktor cosmetics things
Permalink
Failed to load latest commit information.
bin ready node version Dec 5, 2016
node_modules ready node version Dec 5, 2016
old_python ready node version Dec 5, 2016
public cosmetics things Dec 21, 2016
routes cosmetics things Dec 21, 2016
views cosmetics things Dec 21, 2016
Dockerfile fix imagemagic error 2 Dec 13, 2016
README.md new design desktop Dec 9, 2016
app.js ready node version Dec 5, 2016
output.txt cosmetics things Dec 21, 2016
package.json ready node version Dec 5, 2016

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-client/img/', /// path to folder containing group folders with images
	json: '8bit-client/js/8settings.json' // path to 8settings.json file
});

##Python version You can get old Python version inside the folder old_python.