0.3.5 Cross-Platform Support

This release takes all of the functional parts of the dev branch and
skips all the parts that are still a work in progress. The major news
from this release is our support for Ubuntu and OSX. Along with a newer
CLI build of flif.

.gitignore

@@ -33,3 +33,4 @@ node_modules
 
 .idea/
 NW.lnk
+!*.exe

README.md

@@ -28,7 +28,14 @@ The first version was made in about half an hour using the [UGUI](http://ugui.io
 
 ##Contributing
 
-1. Download NW.js
+###If you have Node and NPM installed
+1. Fork and Clone the repo
+2. run `npm install` to download dependencies
+3. run `npm start` to load the application
+4. Checkout the `dev` branch for latest code, or branch off of Master to add your own changes.
+
+###If you don't have Node or NPM installed
+1. Download [NW.js](http://nwjs.io)
 2. Fork and Clone the repo
 3. Run NW.js pointing it at the repo
  * [This video explains how to do it on Windows](http://ugui.io/tutorials/getting-started.htm) (2:15)
@@ -39,14 +46,14 @@ The first version was made in about half an hour using the [UGUI](http://ugui.io
 
 ###Road map
 
-New features we'd like to see added in the future:
-
-1. Cross platform support.
- * Currently only Windows is supported, but with a small amount of effort we could create an OSX or Ubuntu version identical to the windows version.
-2. Allow arbitrary image format conversion.
- * Currently you can encode .PNG, .PNM, .PPM, .PGM, .PBM, .PAM to .FLIF and decode .FLIF to .PNG, .PNM, and .PAM. In the future we'd like to support conversion to and from formats like GIF, JPG, BMP, and more by detecting these types and running them through convert.exe first before passing them to flif.exe or converting from .FLIF to .PNG/PNM/PAM and then from that to the desired output (such as GIF or JPG).
-3. Better support for advanced arguments supplied by the flif.exe, such as repeats and interlacing.
-4. The ability to automatically convert an input file to both interlaced and non-interlaced and return whichever is smaller to the user (if desired).
-5. Repeats have an interesting affect on filesize. We could add in a FLIF-Crush option that would try every combination (0-100) and return whichever highest tree value had the smallest filesize. Interlacing may play a part too.
-6. Implement Poly-FLIF.js to preview FLIF files in a quicker fashion.
-7. Multi-file input!
+New features we'd like to see added in the future. No particular order:
+
+* **~~Cross-Platform Support~~** - We now support OSX, Windows, and Ubuntu.
+* **Cross-Platform Release** - Only Windows has had an official release. After we finish adding new features and doing bug fixes, the next release will be cross-platform.
+* **Automated Release Builds** - We need to investigate into existing methods to build for cross platform that are reliable.
+* **Full CLI Support** - Better support for advanced arguments supplied by the flif.exe, such as repeats and interlacing.
+* **Arbitrary Format Conversion** - Currently you can encode .PNG, .PNM, .PPM, .PGM, .PBM, .PAM to .FLIF and decode .FLIF to .PNG, .PNM, and .PAM. We need to detect non-supported images, convert them to somthing supported using `convert.exe` then toss it's output into flif.exe. Also the reverse, allow for converting .flif to any image format `convert.exe` supports.
+* **Simple Compression** - The ability to automatically convert an input file to both interlaced and non-interlaced and return whichever is smaller to the user (if desired).
+* **Maximum Compression** - Repeats have an interesting affect on filesize. We could add in a FLIF-Crush option that would try every combination (0-1000) and return whichever highest tree value had the smallest filesize. Interlacing may play a part too. 
+* **FLIF Preview** - Implement Poly-FLIF.js to preview FLIF files in a quicker fashion.
+* **Multi-file Input** - The [SVGO-GUI](https://github.com/svg/svgo-gui) project is a simple app that allows for multi-file import both in the GUI and as command line arguments that can be passed in by dragging a group of files or a folder on to the .exe itself. This would be a good project to reference.

_markup/ugui-about.htm

@@ -1,6 +1,6 @@
 <div class="panel panel-info">
   <div class="panel-heading">
-    <span class="pull-right versionUGUI" title="Version">V1.1.1</span>
+    <span class="pull-right versionUGUI" title="Version">V1.1.2</span>
     <h3 class="panel-title">About Universal GUI</h3>
   </div>
   <div class="panel-body">

_markup/ugui-devtools.htm

@@ -13,41 +13,28 @@
     <span data-nav="uguiAbout">About</span>
     <span data-nav="uguiSwapper">Style Swapper</span>
     <span data-nav="uguiShortcuts">Shortcuts</span>
-    <span data-nav="uguiCommand">CMD Output</span>
-    <span data-nav="uguiExecutable">Executable Info</span>
+    <!-- <span data-nav="uguiCommand">CMD Output</span> -->
+    <!-- <span data-nav="uguiExecutable">Executable Info</span> -->
   </nav>
 
 
 
   <section class="uguiAbout">
-<!--
-    <object>
-      <param name="allowfullscreen" value="true" />
-      <param name="allowscriptaccess" value="always" />
-      <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=87110435&show_title=0&show_byline=0&show_portrait=0&force_embed=vimeo.com&fullscreen=1" />
-      <embed src="http://vimeo.com/moogaloop.swf?clip_id=87110435&show_title=0&show_byline=0&show_portrait=0&force_embed=vimeo.com&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"></embed>
-    </object>
-    <iframe src="http://player.vimeo.com/video/87110435" webkitallowfullscreen allowfullscreen></iframe>
--->
-
-    <video controls airplay="allow" x-webkit-airplay="allow" poster="_media/placeholder.png">
-      <source src="_media/placeholder.mkv" type="video/mp4" />
-    </video>
-
+    <a href="http://ugui.io/tutorials/getting-started.htm" class="external-link"><img src="_img/ugui.png" alt="UGUI Logo" title="Watch the Getting Started video."></a>
     <h3>UGUI Developer Tools</h3>
-    <p>Watch <a href="http://ugui.io/tutorials/getting-started.htm" class="external-link">the UGUI Introduction video</a> in fullscreen.</p>
-    <p>To hide the UGUI Developer Tools change the <code>&lt;body role="document" class="dev"&gt;</code> to <code>&lt;body role="document" class="prod"&gt;</code>.</p>
-    <p>You are using version <span class="versionUGUI">1.1.1</span> of UGUI.</p>
+    <p>Watch <a href="http://ugui.io/tutorials/getting-started.htm" class="external-link">the UGUI Introduction video</a>.</p>
+    <p><strong>To hide the UGUI Developer Toolbar</strong> change the class of <code>&lt;body&gt;</code> from <code>dev</code> to <code>prod</code>.</p>
+    <p>You are using version <span class="versionUGUI">1.1.2</span> of UGUI.</p>
   </section>
 
 
-
+<!--
   <section class="uguiCommand">
     <span>Select an executable to preview its output.</span>
     <select class="executableName"></select>
     <pre id="commandLine"></pre>
   </section>
-
+-->
 
 
   <section class="uguiShortcuts">
@@ -70,7 +57,7 @@ <h3>UGUI Developer Tools</h3>
   </section>
 
 
-
+<!--
   <section class="uguiExecutable">
     <div class="helpIntro">Get information from your executable.
       <select class="executableName"></select>
@@ -92,7 +79,7 @@ <h3>UGUI Developer Tools</h3>
     </div>
     <pre class="executableHelp"></pre>
   </section>
-
+-->
 
 
 </div>

_sass/_app.sass

@@ -27,12 +27,6 @@ body
 
 /* Navigation */
 
-.dragon
-    -webkit-app-region: drag
-
-.dragoff
-    -webkit-app-region: no-drag
-
 .navIcons
     float: right
     margin-right: 17px
@@ -45,6 +39,10 @@ body
         &:hover
             color: #375A7F
 
+.navbar-inverse .navbar-nav>li>a
+    padding: 12px 17px 12px 17px
+    margin-top: -1px
+
 
 
 /* Basic App Styles */
@@ -67,8 +65,24 @@ body
     overflow: auto
 
 
+
+/* Settings */
+
+#settingsModal .modal-body
+    overflow: auto
+
+#repeats,
+#repeatsSlider
+    width: 95%
+    height: 36px
+
+#repeats
+    margin-left: 4%
+
+
+
 /* Media Queries */
 
 @media (min-width: 768px)
     .navIcons
-        display: none
+        display: none

_sass/_header.sass

@@ -1,9 +1,19 @@
 
 // Put any custom Sass here for the header, navigation, and breadcrumbs
 
+.navbar-header,
+.navbar-brand
+    min-width: 50%
+
 .navbar-brand
     cursor: default
     img
         max-width: 32px
         max-height: 32px
         margin: 0px 7px 0px 0px
+
+.drag-enable
+    -webkit-app-region: drag
+
+.drag-disable
+    -webkit-app-region: no-drag

_sass/_mediaqueries.sass

@@ -6,9 +6,15 @@
 
 // Small devices (tablets)
 @media (min-width: 768px)
+    #settingsModal .modal-dialog
+        width: 750px
 
 // Medium devices (desktops)
 @media (min-width: 992px)
+    #settingsModal .modal-dialog
+        width: 970px
 
 // Large devices (large desktops)
 @media (min-width: 1200px)
+    #settingsModal .modal-dialog
+        width: 1170px

_sass/_ugui.sass

@@ -9,10 +9,10 @@ cmd arg
     opacity: 0
     color: transparent
 
-body #argsForm
-    margin-bottom: 50px
-
 .modal
+    background-color: rgba(0,0,0,0.6)
+    .glyphicon-remove
+        cursor: pointer
     .versionApp,
     .versionUGUI
         position: relative
@@ -33,13 +33,10 @@ body.dev .devNav
     display: block !important
 
 #aboutModal
-    background-color: rgba(0,0,0,0.6)
     z-index: 1080
     .modal-body
         overflow: auto
         min-height: 115px
-    .glyphicon-remove
-        cursor: pointer
     .versionUGUI:before
         content: "V"
 

_sass/_ven.bootstrap-slider.scss

@@ -27,7 +27,7 @@ $baseBorderRadius: 4px;
     vertical-align: middle;
     position: relative;
     &.slider-horizontal {
-        width: 210px;
+        width: 100%;
         height: $baseLineHeight;
         .slider-track {
             height: $baseLineHeight/2;

_sass/ugui-devtools.sass

@@ -8,23 +8,24 @@ body.dev
 
 #uguiDevTools
     display: none
-    background-color: #E0E0E0
-    color: $uguiTextColor
-    padding: 0px 10px 0px 10px
-    border-width: 3px 3px 0px 3px
-    border-style: solid
-    border-color: #777
-    border-radius: 25px 25px 0px 0px
     width: 80%
-    position: fixed
     bottom: 0px
     left: 10%
-    letter-spacing: 0px
-    text-rendering: optimizeSpeed !important
-    -webkit-font-smoothing: antialiased
+    background-color: #FAFAFA
+    border-width: 3px 3px 0px 3px
+    border-style: solid
+    border-color: #008CBA
+    border-radius: 3px 3px 0px 0px
+    margin-bottom: 7px
+    padding: 0px 10px 0px 10px
+    position: fixed
+    color: $uguiTextColor
     font-family: sans-serif
     font-size: 14px
     line-height: 20px
+    letter-spacing: 0px
+    text-rendering: optimizeSpeed !important
+    -webkit-font-smoothing: antialiased
     transition: $quick
     z-index: 9999
     a
@@ -33,7 +34,7 @@ body.dev
         &:focus
             color: #2A6496
     nav
-        margin: 0px 0px 9px 9px
+        margin: 0px 0px 2px 2px
         span
             +user-select-none
             font-size: 10px
@@ -53,43 +54,38 @@ body.dev
     select
         background-color: #F5F5F5
         border: 1px solid #CCC
+        margin: 0px 0px 3px 0px
         padding: 2px
         font-size: 13px
         font-family: sans-serif
-        margin: 0px 0px 3px 0px
     section
-        padding: 1px
-        margin: 0px 0px 10px 0px
         display: block
         height: auto
-    video,
-    object,
-    embed,
-    iframe
+        margin: 0px 0px 10px 0px
+        padding: 1px
+    img
         display: block
         width: 320px
         height: 180px
-        float: left
         border: 0px
         margin: 0px 7px 10px 0px
         padding: 0px
+        float: left
     h3
         +bmp0
-        border: 0px
-        margin: 18px 0px 0px 0px
-        padding: 0px
+        margin-top: 18px
+        color: $uguiTextColor
         font-family: sans-serif
         font-size: 18px
         font-weight: bold
-        color: $uguiTextColor
         text-shadow: inherit
     p
         border: 0px
-        padding: 0px
         margin: 8px 0px
+        padding: 0px
+        color: $uguiTextColor
         font-size: 14px
         line-height: 1.4
-        color: $uguiTextColor
     code
         +bmp0
         color: $uguiTextColor
@@ -102,12 +98,11 @@ body.dev
         font-size: 14px
         line-height: 1.4
     li
-        line-height: 1.4
+        +bmp0
+        margin-left: 23px
         color: $uguiTextColor
+        line-height: 1.4
         font-size: 14px
-        border: 0px
-        padding: 0px
-        margin: 0px 0px 0px 23px
     &.slideHide
         bottom: -7px !important
         transition: $quick
@@ -116,8 +111,8 @@ body.dev
     .uguiSwapper p,
     .uguiCommand span,
     .helpIntro
-        font-size: 12px
         color: #444
+        font-size: 12px
 
 .shrink
     height: 0px !important
@@ -127,10 +122,6 @@ body.dev
     font-size: 0px !important
     line-height: 0px !important
     opacity: 0 !important
-    video
-        width: 0px !important
-        height: 0px !important
-        display: none !important
 
 #commandLine
     background-color: #F5F5F5