Skip to content

Commit

Permalink
Merge pull request #295 from charlielee/issue-183
Browse files Browse the repository at this point in the history 
UI tidy up and sidebar enhancements
  • Loading branch information
@charlielee
charlielee committed Apr 8, 2021
2 parents 71b60bb + 13bc09f commit daf3651
Show file tree
Hide file tree
Showing 21 changed files with 708 additions and 291 deletions.
150 changes: 93 additions & 57 deletions src/animator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>Boats Animator</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/_variables.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/animator.css">
</head>
Expand Down Expand Up @@ -44,44 +45,44 @@ <h2>Select a camera source to begin!</h2>
<div id="frame-mod-panel" class="flex">
<section id="left-controls">
<div id="frameControlsCaptureMode" class="visible-capture">
<div id="btn-delete-last-frame" title="Undo last frame" class="button">
<div id="btn-delete-last-frame" title="Undo Last Frame" class="frame-mod-button">
<i class="fa fa-undo"></i>
</div>
<div id="btn-short-play" title="Short Play" class="button">
<div id="btn-short-play" title="Short Play" class="frame-mod-button">
<i class="fa fa-play-circle"></i>
</div>
</div>
<div id="frameControlsPlaybackMode" class="visible-playback">
<div id="btn-delete-frame" title="Delete frame" class="button">
<div id="btn-delete-frame" title="Delete Frame" class="frame-mod-button">
<i class="fa fa-trash"></i>
</div>
</div>
</section>
<section id="capture-control">
<div id="btn-capture-frame" title="Capture Frame" class="button">
<div id="btn-capture-frame" title="Capture Frame" class="frame-mod-button">
<i class="fa fa-camera"></i>
</div>
</section>
<section id="playback-controls">
<div id="btn-frame-first" title="First frame" class="button">
<div id="btn-frame-first" title="First Frame" class="frame-mod-button">
<i class="fa fa-fast-backward"></i>
</div>
<div id="btn-frame-previous" title="Previous frame" class="button">
<div id="btn-frame-previous" title="Previous Frame" class="frame-mod-button">
<i class="fa fa-step-backward"></i>
</div>
<div id="btn-play-pause" title="Playback Frames" class="button">
<div id="btn-play-pause" title="Playback Frames" class="frame-mod-button">
<i class="fa fa-play"></i>
</div>
<div id="btn-stop" title="Stop Playback" class="button">
<div id="btn-stop" title="Stop Playback" class="frame-mod-button">
<i class="fa fa-stop"></i>
</div>
<div id="btn-frame-next" title="Next frame" class="button">
<div id="btn-frame-next" title="Next Frame" class="frame-mod-button">
<i class="fa fa-step-forward"></i>
</div>
<div id="btn-frame-last" title="Last frame" class="button">
<div id="btn-frame-last" title="Last Frame" class="frame-mod-button">
<i class="fa fa-fast-forward"></i>
</div>
<div id="btn-loop" title="Loop Playback" class="button">
<div id="btn-loop" title="Loop Playback" class="frame-mod-button">
<i class="fa fa-refresh"></i>
</div>
</section>
Expand Down Expand Up @@ -110,66 +111,101 @@ <h2>Select a camera source to begin!</h2>
<!--This area will contain features like grid and aspect ratio mask toggle-->
</section>
<section id="onion-skin-opacity-options">
<input id="input-onion-skin-opacity" type="range" name="onionSkinAmount" min="-100" max="100" value="0" title="0%" step="2">
<div id="onionSkinOpacityRangeContainer" class="range-container">
<input id="input-onion-skin-opacity" type="range" name="onionSkinAmount" min="-100" max="100" value="0" title="Onion Skin 0%" step="2">
</div>
<div id="slider-background-middle"></div>
</section>
<section id="frame-rate-options">
<input id="input-fr-change" type="number" value="15" min="1" max="60" title="Framerate">
<input id="input-fr-change" type="number" value="15" min="1" max="60" title="Frame Rate">
<label for="input-fr-change"> FPS</label>
</section>
</div>
</section>

<!--Sidebar content-->
<aside>
<!--Capture Options-->
<div class="sidebar-item" id="capture-header">
<div class="sidebar-header">
<h2><i class="fa fa-camera fa-fw"></i> Capture</h2>
<div class="tabs-container">
<div class="tabs">
<a href="#captureTab" class="active" data-toggle="tab">Capture</a>
<a href="#guidesTab" data-toggle="tab">Guides</a>
<a href="#exportTab" data-toggle="tab">Export</a>
</div>
<ul id="capture-options">
<!-- Camera selection -->
<li id="camera-select-td">
<label>Camera source:</label>
<select>
</select>
</li>
<!-- Resolution selection -->
<li id="resolution-select-td">
<label>Image resolution:</label>
<select id="form-resolution-select"></select>
</li>
</ul>
</div>

<!--Export Options-->
<div class="sidebar-item" id="export-header">
<div class="sidebar-header">
<h2>
<i class="fa fa-download fa-fw"></i> Export</h2>
</div>
<ul>
<li>Captured frames will be exported to:
<p id="currentDirectoryName" class="italics">No directory selected</p>
</li>
<li class="sidebar-opt">
<i class="fa fa-sort-asc fa-rotate-90 sidebar-link-dot"></i>
<span id="btn-dir-change">Change directory</span>
</li>
<li id="exportVideoSidebarOption" class="sidebar-opt">
<i class="fa fa-sort-asc fa-rotate-90 sidebar-link-dot"></i>
<span id="btn-export-video">Export video</span>
</li>
</ul>
</div>
<div class="tabs-content">
<!--Capture Options-->
<div id="captureTab" class="tab-pane active">
<h2 class="sidebar-header">
<i class="fa fa-camera fa-fw"></i>
Capture
</h2>

<!--Preview Overlay-->
<div class="sidebar-item" id="overlay-header">
<div class="sidebar-header">
<h2>
<i class="fa fa-th fa-fw"></i> Overlays</h2>
<div class="sidebar-item">
<ul id="capture-options">
<!-- Camera selection -->
<li>
<label for="camera-source-select">Camera Source</label>
<select id="camera-source-select">
</select>
</li>
<!-- Resolution selection -->
<li>
<label for="camera-resolution-select">Image Resolution</label>
<select id="camera-resolution-select"></select>
</li>
</ul>
</div>
</div>

<!--Guides-->
<div id="guidesTab" class="tab-pane">
<h2 class="sidebar-header">
<i class="fa fa-th fa-fw"></i>
Guides
</h2>

<div class="sidebar-item">
<ul id="overlay-list"></ul>
</div>
</div>

<!--Export Options-->
<div id="exportTab" class="tab-pane">
<h2 class="sidebar-header">
<i class="fa fa-download fa-fw"></i>
Export
</h2>

<div class="sidebar-item">
<ul>
<li>
Captured frames will be exported to:
<div id="currentDirectoryName">No directory selected</div>
</li>
<li class="sidebar-opt">
<button id="btn-dir-change" class="btn">Browse…</button>
</li>
</ul>
</div>

<div class="sidebar-item">
<ul>
<li>
Render current take as a video file:
</li>
<li class="sidebar-opt">
<button id="btn-export-video" class="btn">Export Video…</button>
</li>
<li>
Rename frame files to be sequential:
</li>
<li class="sidebar-opt">
<button id="btn-confirm-take" class="btn">Confirm Take</button>
</li>
</ul>
</div>
</div>
</div>
<ul id="overlay-list"></ul>
</div>

<!--AutoCapture-->
Expand Down
31 changes: 31 additions & 0 deletions src/css/_variables.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
:root {
--ba-border: #423e3e;
--ba-border-hover: #5c5858;
--ba-border-active: #827e7e;

--ba-dark: #171717;
--ba-dark-hover: var(--ba-dark-mid);
--ba-dark-active: #313131;
--ba-dark-20: rgba(23,23,23,0.2);
--ba-dark-50: rgba(23,23,23,0.5);
--ba-dark-80: rgba(23,23,23,0.8);
--ba-dark-mid: #2b2b2b;

--ba-light: #d3d3d3;
--ba-light-hover: #e9e9e9;
--ba-light-active: #f5f5f5;
--ba-light-mid: #adadad;

--ba-lightred: #c54c4c;
--ba-lightred-hover: #cd6666;
--ba-lightred-active: #bd3232;

--ba-black: #000;
--ba-blue: #5ab7d4;
--ba-green: #2d9e2d;
--ba-lightyellow: #f6f2cb;
--ba-red: #bd3232;
--ba-white: #fff;
--ba-yellow: #f9ff23;
--ba-yellow-hover: #f3f76e;
}

0 comments on commit daf3651

Please sign in to comment.