Customizing The Web Interface

[Greg_Paterson]

I rearranged some of the php code in the /var/www/beer-panel.php file to make room for my own brewery’s logo. I had to move the currently fermenting title line down into the beer-chart row, and resize the chart slightly. The logo size that I used was 300 x 75 pixels, but it can accomodate larger.

Here is my changes to the code:

<div id="top-bar" class="ui-widget ui-widget-header ui-corner-all">
    <div id="lcd" class="lcddisplay"><span class="lcd-text">
            <span class="lcd-line" id="lcd-line-0">Live LCD waiting</span>
            <span class="lcd-line" id="lcd-line-1">for update from</span>
            <span class="lcd-line" id="lcd-line-2">script...</span>
            <span class="lcd-line" id="lcd-line-3"></span>
    </div>
    <div id="logo-container">
            <img src="brewpi_logo.png">
    </div>
    <button class="script-status ui-state-error"></button>
    <button id="maintenance" class="ui-state-default">Maintenance panel</button>
</div>
<div class="beer-name-area">
            <div id=beer-name-container align="center">
                    <span>Fermenting: </span><a href='#' id="beer-name"><?php echo     urldecode($beerName);?></a>
                    <span class="data-logging-state"></span>
            </div>
</div>
<div class="chart-container">
<div id="curr-beer-chart-label" class="beer-chart-label"></div>
<div id="curr-beer-chart" class="beer-chart" style="width:815px; height:375px"></div>

[JoeJr]

I wanted to hit on this post for a minute due to the nature of the title which is discussing the web interface. I know with the new code being developed for MASH/BOIL/etc, I am wondering what the web interface is going to look like. I see a lot of talk on the code being developed but nothing in the web interface. I don’t like to compare controllers due to how each one provides its strengths and weaknesses, but I would like to talk about how the BrewTrollers web interface looks. After reading on some forms and information from the person that took over BrewTroller, the web interface seams to be spot on in how it functions and it provides the user with the easy to use GUI such as gauges that show temps. I had put in a post that the brewPi is a “little box that packs a big punch” and I am looking forward to when it is fully complete but @Elco can you give some details on how the web interface is going to look and what changes can we see to come if any?

[Ron_K]

I followed your example, but I have an overlap between the chart and the mode window. I don’t see how to eliminate this overlap. Any Ideas?

[Greg_Paterson]

Hi Ron,

Looks like your beer-chart and beer-chart-controls are both too tall for the beer-panel. This I assume is due to the size of your brewery logo. Note that I tuned mine to fit in the current space. Also as a note it looks like you added your logo, while I replaced the pre-existing logo.png file in /var/www/

Find your way to /var/www/css/style.css and change the height of beer-panel until is looks good on your web interface.

If you are as new as me to Linux, I’d be happy to walk you through how to do that.

Let me know if it works.

[Ron_K]

Since the last post I’ve been tweaking it. I reduced the image size, and adjusted the chart height to 325 px. It looks pretty good now.

I also replaced the existing logo.png I wanted to keep the original brewpi logo along with mine. So I combined them in GIMP, then replaced the old logo with it.
Now if I can figure out why my annotations are repeating that would be great.

[JoeJr]

@Ron_K, You need to take the default logo out. This is one of the reason why it looks like that. Just replace it with your logo file name. Also make sure that your logo size is not too big due to this happing. You will have to play around with it but once its done it will look good. I will post a pic of mine soon so you can see what I mean.

[charliwest]

Just tried this as well, for now just moving the currently fermenting as I like that lay out better anyway, but I am getting this

Any ideas?

[charliwest]

Forget, worked it out, I had the chart-container in twice and messed stuff up.