8x8-Animator/index.html at master · laboiteproject/8x8-Animator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html ng-app="app">
<head>
    <title>Frame Animator</title>
    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/app.css" rel="stylesheet" type="text/css" />
<body ng-controller="AppController" ng-cloak ng-mouseover="stopDrawing()">
<div class="app">
    <div class="editor">
        <div class="frame frame-editor">
            <div class="onion-skin" ng-hide="isAnimating">
                <div class="row" ng-repeat="row in frames[getPreviousFrameIndex()] track by $index">
                    <div class="pixel" ng-class="{selected:frames[getPreviousFrameIndex()][$parent.$index][$index]==true}" ng-repeat="pixel in frames[currentFrameIndex][$index] track by $index"></div>
                </div>
            </div>
            <div class="normal-frame">
                <div class="row" ng-repeat="row in frames[currentFrameIndex] track by $index">
                    <div class="pixel" ng-mousedown="startDrawing($parent.$index,$index,$event)" ng-mouseup="stopDrawing()" ng-mouseover="checkDraw($parent.$index,$index,$event)" ng-class="{selected:frames[currentFrameIndex][$parent.$index][$index]==true}" ng-repeat="pixel in frames[currentFrameIndex][$index] track by $index"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="controls">
        <div class="button timing first" ng-class="{inactive:isShowingCode||isShowingInput}"><div class="underline"></div><input type="text" ng-model="timings[currentFrameIndex]" maxlength="3"></div>
        <div class="button shift" ng-class="{inactive:isShowingCode||isShowingInput}">
            <div class="up" ng-click="shift('up')" title="Shift Up"><i class="fa fa-arrow-up"></i></div>
            <div class="right" ng-click="shift('right')" title="Shift Right"><i class="fa fa-arrow-right"></i></div>
            <div class="down" ng-click="shift('down')" title="Shift Down"><i class="fa fa-arrow-down"></i></div>
            <div class="left" ng-click="shift('left')" title="Shift Left"><i class="fa fa-arrow-left"></i></div>
        </div>
        <div class="button" ng-class="{inactive:isShowingCode||isShowingInput}" ng-click="copyFrame()" title="Copy Current Frame"><i class="fa fa-copy"></i></div>
        <div class="button" ng-class="{inactive:isShowingCode||isShowingInput}" ng-click="addFrame()" title="Add/Insert Frame"><i class="fa fa-plus"></i></div>
        <div class="button" ng-class="{inactive:isShowingCode||isShowingInput}" ng-click="removeFrame()" title="Delete Current Frame"><i class="fa fa-minus"></i></div>
        <div class="button" ng-class="{inactive:isShowingCode||isShowingInput}" ng-click="toggleAnimation()" ng-show="!isAnimating" title="Play Animation"><i class="fa fa-play"></i></div>
        <div class="button anim-pause-button" ng-class="{inactive:isShowingCode||isShowingInput}" ng-click="toggleAnimation()" ng-show="isAnimating" title="Pause Animation"><i class="fa fa-pause"></i></div>
        <div class="button" ng-class="{inactive:isShowingInput}" ng-click="toggleCodeOverlay()" title="Show Code"><i class="fa fa-file-code-o"></i></div>
        <div class="button" ng-class="{inactive:isShowingCode}" ng-click="toggleInputOverlay()" title="Import Code"><i class="fa fa-upload"></i></div>
    </div>
    <div class="frame-scroll-container" ng-show="!isShowingCode">
        <div class="frames" ng-style="{'width':(100*frames.length)+'px'}">
            <div class="frame" ng-repeat="frame in frames track by $index" ng-click="selectFrame($index)" ng-class="{current:$index==currentFrameIndex}">
                <div>
                    <div class="row" ng-repeat="row in frames[$index] track by $index">
                        <div class="pixel" ng-class="{selected:frames[$parent.$parent.$index][$parent.$index][$index]==true}" ng-repeat="pixel in frames[$parent.$index][$index] track by $index"></div>
                    </div>
                </div>
                <div class="fps">{{timings[$index]}}</div>
            </div>
        </div>
    </div>

    <div class="code-overlay" ng-show="isShowingCode">
        <div>
            <textarea>{{outputCode}}</textarea>
        </div>
    </div>

    <div class="code-overlay" ng-show="isShowingInput">
        <div>
            <textarea ng-model="inputCode"></textarea>
        </div>
    </div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>