Skip to content

Commit

Permalink
first commit of new app build!
Browse files Browse the repository at this point in the history
  • Loading branch information
ericyanush committed Jan 8, 2012
1 parent a2e1799 commit ed88ef6
Show file tree
Hide file tree
Showing 15 changed files with 145,532 additions and 60 deletions.
Binary file modified .DS_Store
Binary file not shown.
18 changes: 18 additions & 0 deletions .project
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>BTUI</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
<nature>com.aptana.ruby.core.rubynature</nature>
</natures>
</projectDescription>
5 changes: 5 additions & 0 deletions CSS/BTUI.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import url("NavBar.css");
@import url("Body.css");
@import url("Panels.css");
@import url("Valves.css");

5 changes: 5 additions & 0 deletions CSS/Body.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* Body */
body {
background-image: url('../images/texture1.jpg');
background-repeat: repeat;
}
109 changes: 109 additions & 0 deletions CSS/NavBar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#navWrapper { width:640px; margin:10px auto; }

/* CONTENT */
#navContent { margin-top:0px; }
#navContent p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#navContent p a { color:#0088CC; text-decoration:none; }
#navContent p a:hover { text-decoration:underline; }

/* APPLE STYLE NAVIGATION MENU */
#navBar { margin:10px 0; list-style:none;

/* Lucinda Grande is the font used on the website from Apple. */
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

/* Apply a subtle text-shadow to the text */
text-shadow: 0 -1px 3px #787878;/*202020*/

/* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
width:640px; height:34px;

-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
}

#navBar li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

/* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #333333)/*787878*/, color-stop(0.5, #000000), color-stop(0.51, #1E1E1E),/*707070*/ color-stop(1, #4C4C4C))/*838383*/;
background-image: -moz-linear-gradient(center bottom, #333333 0%, #000000 50%, #1E1E1E 51%, #4C4C4C 100%);
background-color:#5f5f5f; /* Fallback */
-moz-transition: all .3s;
-webkit-transition: all .3s;
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#navBar li:hover {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838; /* Fallback */

/* We use the inset of the box shadow to create a subtle inner glow when hovering */
-moz-box-shadow: inset 0 0 5px 5px #535353;
-webkit-box-shadow: inset 0 0 5px 5px #535353;
box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#navBar li:active {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
background-color:#383838; /* Fallback */

-moz-box-shadow: inset 0 1px 2px 2px #000;
-webkit-box-shadow: inset 0 1px 2px 2px #000;
box-shadow: inset 0 1px 2px 2px #000;
}

#navBar li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }


/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
#navBar li:first-child {
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px 0 0 4px;
border-radius:4px 0 0 4px;

border-left:none;
}

#navBar li:last-child {
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
border-radius:0 4px 4px 0;

border-right:none;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
from { opacity: 0; top:-40px; }
to { opacity: 1; }
}
@-moz-keyframes showMenu {
from { opacity: 0; margin-top:-40px; }
to { opacity: 1;}
}

#navBar {
-webkit-animation: showMenu 1s; position:relative;
-moz-animation: showMenu 1s; position:relative;
}
164 changes: 164 additions & 0 deletions CSS/Panels.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
/*Define Custom Font*/
@font-face {
font-family: DataIdent; src:url("../Resources/chintzy.ttf");
}
@font-face {
font-family: LCDBold; src:url("../Resources/LCD2B.ttf");
}


#HLTWrapper {
position: absolute;
left: 110px;
top: 100px;
}

#MLTWrapper {
position: absolute;
left: 485px;
top: 100px;
}

#KETWrapper {
position: absolute;
left: 860px;
top: 100px;
}

.VesselWrapper {
width: 350px;
height: 400px;
background-color: rgba(121, 121, 121, .67);
box-shadow: 2px 3px 7px 3px #000;
border-style: solid;
border-width: 2px;
border-color: rgba(5, 5, 70, 0.80);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-webkit-transition: all .25s;
-moz-transition: all .25s;
}

.VesselWrapper:hover {
box-shadow: 8px 12px 20px 3px #000;
}

.vesselTitle {
text-align: center;
width: 100%;
height: 30px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ 0,10,210*/
background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
border-radius: 20px;
}

.VesselWrapper h1{
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:25px;
-webkit-text-stroke: 1px, #0000FF;
color: #FFFFFF;
}

.vesselItem h2{
font-family: DataIdent, Helvetica, Arial, sans-serif;
font-size: 40px;
letter-spacing: 3px;
word-spacing: 0px;
}

.vesselItem h3{
font-family: DataIdent, Helvetica, Arial, sans-serif;
font-size: 25px;
letter-spacing: 2px;
word-spacing: 0%;
}

.buttonWrapper {
height: 75px;
width: 75px;
}

.tempset {
height: 50px;
width: 20px;
position: relative;
left: 275px;
top: -50px;
}

.settings {
position: relative;
top: 65px;
left: 5px;
}

.update {
height: 50px;
width: 50px;
position: relative;
top: 60px;
left: 205px;
}

.vesselButton {
fill-opacity: 0.5;
-moz-transition: all 1s;
}

.vesselButton:hover {
fill-opacity: 1.0;
stroke: #FFFFFF;
stroke-width: 0.6;
stroke-opacity: 0.8;
}
.temp {
position: relative;
left: 50px;
top: 20px;
text-shadow: 2px 3px 1px #FFFFFF;
}

.tempTarget {
position: relative;
left: 60px;
top: 20px;
text-shadow: 2px 3px 1px #FFFFFF;
}

.heat {
position: relative;
left: 90px;
top: 20px;
text-shadow: 2px 3px 1px #FFFFFF;
}

.volume {
position: relative;
top: 30px;
left: 15px;
text-shadow: 2px 3px 1px #FFFFFF;
}

.volTarget {
position: relative;
left: 60px;
top: 30px;
text-shadow: 2px 3px 1px #FFFFFF;
}

.data {
position: relative;
left: 35px;
font-family: LCDBold, Helvetica, Arial, sans-serif;
word-spacing: 0px;
}

.seperator {
height: 2px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0,0,0, 0.75) 25%, rgba(0, 0, 0, 1) 50%, rgba(0,0,0, 0.75) 75%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}

div.VesselWrapper div:nth-child(6) {
position: relative;
top: 0px;
}
Empty file added CSS/Valves.css
Empty file.
49 changes: 9 additions & 40 deletions README
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,24 @@
// www.BrewTroller.com
//

NOTE: This is the feature update that will be made to this app, as it will be transitioning to a full handwritten HTML5/JS/CSS3 application. This is because it has become very difficult to use ExtJS to generate the markup using its predefined classes. It seems that events fire at different points in different browsers, making it very difficult to capture the events we need to finish setting up the interface and Custom JS classes that handle BrewTroller functionality. ExtJS will still provide the charting and store plugins for Vessel displays. However, in its current state, this app is functional for monitoring, with simple option changing (Temperature Set Points).


App is in ALPHA Stage!

You must set the IP of the BTNic module in the settings window

The BTUI.tmproj file is a project file for the TextMate text editor for Mac,
which I believe is also compatible with the 'E' editor for Windows

Known Issues:

Changing the minimum value in Vessel config window causes the gauge needle to respond to the new minimum, but the original axis labels remain. Changing the maximum works as expected.
Latest Changes:

Switched to new app build with no ExtJS(yet?). Built by hand using HTML5/CSS3/JS
Currently has no JS implementation, so no functionality just an interface.

Currently Implemented:

Vessel Volume and Temperature retrieval from BrewTroller
Vessel Temperature Set point Setting
Manual Vessel Updates
Auto Updates with configurable interval
BrewTroller Auto Updates (Currently just valve profile status)

To DO For Initial Release (In order of Priority):

Build new BT settings window
Re-implement app functionality
Build new valve panel
Re-implement valve functionality
Implement full settings from BrewTroller Menus
Fully comment and Document Code...
Add CSS code to build a theme, and make the appearance pretty :) (this includes skinning the temperature and volume charts) / Resolution independent scaling

Fully comment and Document Code...


To DOs for Long Term (In order of Priority):
Expand All @@ -41,22 +30,7 @@ To DOs for Long Term (In order of Priority):
Persistent settings - Import / Export Settings for portability, Save in LocalStorage DB (Does not transfer browser to browser, prone to
loss (cookie clean-up/browsing data delete)) Another option would be to store the settings on an SD card on the BTNic board
Vessel Customizations - Support for Steam, BIAB, Non-Standard Two Vessel, etc.
Recipes - Import / Export in BeerXML format




Latest Changes:

Removed UGLY navPanel buttons (Ext.Button) in favour of pure CSS buttons, as a result:
Card changing functionality is now defined in the success callback in the navPanel loader
Settings functionality has also been moved from the Views controller to the BrewTroller Class
Added Update BT button, which updates only BT parameters (valve profile statuses, program statuses, etc)
Added Update All button, which updates the above states BT parameters as well as the calling the manualUpdate() method for each Vessel
Added Vessels object array to BrewTroller Class, when BrewTroller.InitSetup() is called it is filled with references to the Vessel class instances
Added display object to Vessel Class instances, which is a reference to its corresponding display panel, to make calls between the two easier and quicker by avoiding the use of Ext.ComponentQuery.query()d


Recipes - Import / Export in BeerXML format


WishList for BTNic Architecture:
Expand All @@ -66,11 +40,6 @@ WishList for BTNic Architecture:
WebSockets capable Server ( would decrease loads on network, as BT could "push" new data to the connected clients )(maybe hard to implement, would only be beneficial for WebKit browsers and FireFox)


App is based on the ExtJS 4 library, available at http://sencha.com

Currently All communication with the BrewTroller is done using JavaScript and XHR GET requests instead of using the Flash based transfers in the YUI library (Matt's initial Demo used it). This provided maximum compatibility with devices, but because JavaScript is Single threaded it can quickly slow down or crash the browser if the Auto Update frequency is set too high. The next version of the BTNic module firmware providing batch commands will help this problem considerably. **Asynchronous XHR has also helped considerably, although it still seems
possible to overload the Embedded Module, to the point it stops responding**

Credits:

Credit where credit is due, the very elegant navigation bar (a la Apple.com) is based heavily on the work done here: http://www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only_css3.html (still need to request permission for use!!)
Expand Down
Binary file added Resources/LCD2B.TTF
Binary file not shown.
Binary file added Resources/chintzy.ttf
Binary file not shown.
Loading

0 comments on commit ed88ef6

Please sign in to comment.