[Feeler] Any Interest in Digital Tap Lists?

Homebrew Talk - Beer, Wine, Mead, & Cider Brewing Discussion Forum

Help Support Homebrew Talk - Beer, Wine, Mead, & Cider Brewing Discussion Forum:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.
Already subscribed but I just wanted to formally express my interest in this project. I have visions of a LCD mounted right on a refrigerator door with like 6 taps....would love to make this happen!!! Im already a proud owner of the required RPi and SD card and such. Can't wait to see this evolve.

Sent from my Galaxy Nexus using Home Brew mobile app
 
I have one rpi set up as an xbmc media center and have been looking for a project for my other rpi. Thanks for being willing to guide us through all the steps. I probably won't be bothering with flow meters or weight sensors (or whatever to monitor keg contents), but I really like the look of everything else.
 
This is really cool. I wish I could contribute to the build, but I'm an accountant with limited IT experience. I hope in the end I will be able to throw one of these on the wall at my place. Thanks for your time and effort putting this together!!!
 
I noticed the ebay seller lists those flow meters as “These swiss flow meters are like new. We went out of business before we could deploy most of them.”. Is he sending you new ones, and if not, what were they used for?
 
RocketBrewer said:
I noticed the ebay seller lists those flow meters as “These swiss flow meters are like new. We went out of business before we could deploy most of them.”. Is he sending you new ones, and if not, what were they used for?
Click to expand...

The seller listed as "New other (see details)". If they had been used, even a moment, he'd have to list as "Used" per eBay rules.

Here's the description for "New other (see details)" in the Business & Industrial category (where these are listed):

eBay said:
New other (see details)
A new, unused item with absolutely no signs of wear. The item may be missing the original packaging, or in the original packaging but not sealed. The item may be a factory second or a new, unused item with defects. See the seller's listing for full details and description of any imperfections.
Click to expand...

And for giggles, the description of "Used":

eBay said:
Used
An item that has been used previously. The item may have some signs of cosmetic wear, but is fully operational and functions as intended. This item may be a floor model or store return that has been used. See the seller's listing for full details and description of any imperfections.
Click to expand...
 
Making my edits on the live website. If you see weird things, that's me cleaning up, experimenting with new code, and trying out different things.

Ironed out a bunch of CSS/PHP validation issues as pointed out by W3C's tools. All CSS IDs have been migrated to Classes.

Right now, you may see some weird layout issues while I re-structure the existing divs and divide existing rows into additional divs. The goal is to have each item (number readout or infographic) have its own div class. This should allow for much more flexibility in the future.

The CSS will also contain odd temporary entries while I transition things around.
 
USPS just dropped off my flow meters. I don't have the GPIO extender parts yet, nor resistors to condition one to 3.3V, so I can't test them yet.

They look new and unused. Some have a couple dirty fingerprints. I unspooled the cable and it's closer to 10'. It's also pre-terminated for us.
 
You basically have two images, one on top of the other. the beauty of using background images is that they don't change size if you give the div a height/width. So the top image (which is the full one) will get cut off and then show the full height empty one. As long as the images line up, it looks seamless. I made an example here:

http://codepen.io/JayUnt/pen/vJcbk ( this is the first time i used codepen, so let me know if you cant get to it). All you have to do is change the height of .pint .full which is at the bottom of the css, to see how it looks at the different percents.

I've never used css masks before, but the idea would be the same. You would probably put the mask image inside the .full div and give it the background color of the beer you want. and then only make the height the percent that you want it full.

It might be easier to just go with an empty glass, and then a couple different versions of the full beer glass image and let the users choose from your preset list. This would be the same idea for the keg. When you get to below 25% full, you can just give it an additional class that will give it a different background image to be the red version. But everything else would be the same.

Let me know if that make sense.
 
JayUnt said:
You basically have two images, one on top of the other. the beauty of using background images is that they don't change size if you give the div a height/width. So the top image (which is the full one) will get cut off and then show the full height empty one. As long as the images line up, it looks seamless. I made an example here:

http://codepen.io/JayUnt/pen/vJcbk ( this is the first time i used codepen, so let me know if you cant get to it). All you have to do is change the height of .pint .full which is at the bottom of the css, to see how it looks at the different percents.

I've never used css masks before, but the idea would be the same. You would probably put the mask image inside the .full div and give it the background color of the beer you want. and then only make the height the percent that you want it full.

It might be easier to just go with an empty glass, and then a couple different versions of the full beer glass image and let the users choose from your preset list. This would be the same idea for the keg. When you get to below 25% full, you can just give it an additional class that will give it a different background image to be the red version. But everything else would be the same.

Let me know if that make sense.
Click to expand...

JayUnt said:
And here is a good tutorial on css masks if you want to go that route. http://thenittygritty.co/css-masking. But I would suggest just doing the couple of images to make it easier.
Click to expand...

Ah. Very nice. That's quite a bit easier than I expected. I figured it was going to be something like a masked-off top image and a background cell that would be filled appropriately using a solid color or gradient. I didn't think CSS could display partial images.

In your example, you hard coded the fill % into the external CSS (50%). Right now I'm using PHP to read the CSV, parse the data, then plug it into the img src URL.

My only question is this. AFAIK, PHP can't affect CSS because it's processed prior to the CSS. So how could the keg's fill level in a CSV file (or even SQL db) tell the CSS how far to fill?

Found this while I was searching last night. And it looked way too complex:

http://css-tricks.com/css3-progress-bars/
 
I'm assuming you have the php loop through the different beers and output the html. So instead of having the height in the stylesheet you can put it right on the .full div. So it would look like this: <div class="full" style="height: 50%;"></div>. So each beer you are trying to show shares the same exact css, with the height directly on that specific beer.

I updated the codepen to show it working.

Using a css mask would probably be a lot more complex, at least creating the mask image. It would allow you to me more flexible with coloring, but like i said before, i would just go with the regular image route like in the codepen.
 
JayUnt said:
I'm assuming you have the php loop through the different beers and output the html. So instead of having the height in the stylesheet you can put it right on the .full div. So it would look like this: <div class="full" style="height: 50%;"></div>.

I updated the codepen to show it working.

Using a css mask would probably be a lot more complex, at least creating the mask image. It would allow you to me more flexible with coloring, but like i said before, i would just go with the regular image route like in the codepen.
Click to expand...

D'oh! Right. Inline styles override external as long as you call them after the external link (which is always in the <head> anyway).

In this case, it would look something like:

Code: 
<div class="KegImage">
	<?php
	if ($keglvl['Beer1'] < 0)
		echo "<img src=\"/img/keg/empty.png\" height=\"100\" alt=\"\"><br>";
	elseif ($keglvl['Beer1'] > 100)
		echo "<img src=\"/img/keg/full.png\" height=\"100\" alt=\"\"><br>";
	else
		echo "<img src=\"/img/keg/full.png\" style=\"", $keglvl['Beer1'], "\% alt=\"\"><br>";
	?>
</div>

Unfortunately, it doesn't loop through (yet). It's hard coded for 10 beers at the moment. Though in the future I need to re-code it as a massive for loop.
 
Thinking about it more. You could get rid of the .empty div and just put the empty background image on the .pint div. That would make it a bit cleaner. I'm not home now, but I can update it again when I am home if you want.

Sent from my SCH-I535 using Home Brew mobile app
 
Github project created. Would like to have a couple experienced people look over what I have so far before going farther. Easier to nip these things in the bud.

Sent out a couple PMs to individuals who expressed interest and experience. If you're experienced with PHP/CSS/CSV and want a link, shoot me a PM.

Still building away. Not nearly ready for primetime yet. Stay patient.
 
This sounds a lot like the sexy French woman in the movies...but I don't speak French! I just keep waiting for the part where she takes off her clothes. Haha.

Keep up the good work, guys/gals!
 
I sometimes make my keezer pull double duty and act as my temp controlled fermentation chamber. Would it be possible, down the road, to add a temperature reading on the display?
 
LabRatBrewer said:
I sometimes make my keezer pull double duty and act as my temp controlled fermentation chamber. Would it be possible, down the road, to add a temperature reading on the display?
Click to expand...

I've seen others do it. So its certainly possible.

It's not at the top of my priorities list, but it looks like we may have a few contributors coming on board. :)
 
Thadius, shot you back a PM but not sure it went through. To answer your question tho, same as on here. I'll do what I can. Most of my experience is in C++ but I'm a quick learner.
 
boombrewer said:
Hmmm... I'm on a Mac. That won't work from what I just read. I'll work on finding something else. Anyone else program of this type on a Mac?
Click to expand...

I write all of it by hand. Notepad++ is just a spruced up version of Notepad.

It really just detects the language and highlights the code for ease of reading/troubleshooting, and has some decent find/replace functionality and tabbing.

Found this: http://www.digitaltutors.com/forum/showthread.php?22665-Edit-Plus-alternatives-for-mac
 
I use fraise as my notepad alternative for the mac. It has basic syntax highlighting for the common languages.

You may want to make the switch to using a database sooner vs later. You'll need to set up a service to listen for the flow meter events as they come in and update the keg levels. If you switch to a db now, you'll have less rework later. Updating a db is a lot easier than updating a flat file.

Let me know if you want me to focus on a particular task, too. I don't want to step on your toes.
 
AgentHubcap said:
I use fraise as my notepad alternative for the mac. It has basic syntax highlighting for the common languages.

You may want to make the switch to using a database sooner vs later. You'll need to set up a service to listen for the flow meter events as they come in and update the keg levels. If you switch to a db now, you'll have less rework later. Updating a db is a lot easier than updating a flat file.

Let me know if you want me to focus on a particular task, too. I don't want to step on your toes.
Click to expand...

I'm expecting that the flow meters will need to be monitored by Python, then inputted into SQL.

A SQL port is in the works. I would have had it by now, but I was getting pissed off with myPhpAdmin and the mySQL frontend I was using.

I may re-attack tomorrow.
 
I use notepad++ as well. I made a small update to the code, so the number of taps is not hard coded, but instead just uses whatever comes from the csv.

I agree with agenthubcap about stepping on toes. As of now there is only one front end page, and it's pretty small. If there are going to be more then one developer working, then we might want to figure out more of a development plan. So each work on a the different section. Or we could just go with one dev.

I would say it's up to thadius, since it's his project. I just don't want 5 guys working on the same thing and people getting pissed at each other.

Sent from my SCH-I535 using Home Brew mobile app
 
JayUnt said:
I use notepad++ as well. I made a small update to the code, so the number of taps is not hard coded, but instead just uses whatever comes from the csv.

I agree with agenthubcap about stepping on toes. As of now there is only one front end page, and it's pretty small. If there are going to be more then one developer working, then we might want to figure out more of a development plan. So each work on a the different section. Or we could just go with one dev.

I would say it's up to thadius, since it's his project. I just don't want 5 guys working on the same thing and people getting pissed at each other.

Sent from my SCH-I535 using Home Brew mobile app
Click to expand...

Agreed I was just working on the update you were as well. We should collaborate (all of us) and come up with a plan of attack

Sent from my SCH-I535 using Home Brew mobile app
 
The first thing I'm going to do is start playing with the flow meters after they get here.

Sent from my Nexus 5 using Home Brew mobile app
 
I'm trying to get a grasp on how Github works, really.

I see they have lots of controls for development collaboration and version control, but I have no idea how to use them yet. I'm a UNIX sysad by trade, right now dabbling in IS security. I'm trying to get through the text, but my eyes keep closing when I start reading. And I thought NIST pubs were boring!

For right now, lets just focus on getting a tight, basic set of code for an initial release. Review what's been written, try to find any situations where the logic breaks, cleanup and streamline any bulky nonsense you see, etc.

I see these milestones as necessary to get an initial release out:

- Make the length of the taplist scale to what in the CSV. --Completed
- Vertically center within the DIVs.
- Replace static graphs with the CSS-fill graphs mentioned earlier.
- Remove all use of absolute positioning using manual webkit margins and padding.
- Develop method for easily sizing columns widths that a basic user could understand.
- Develop an installation method (assuming dependencies are in-place) that an unskilled user could install with. Preferably no longer than 3 lines of code. Maybe something along the lines wget a zip, unzip to /var/www? Plan with upgrades-in-place in mind.
 

Similar threads

Hop
Ongoing Review: BrewHardware Premium Recirculating BIAB Package
Replies
4
Views
881
Bobby_M
Bobby_M
CallMeKiupid
Kiupid's Mead Guide for Beginners (like me)
Replies
3
Views
1K
Barzahl
B
J
Feeler for 20 gallon brew boss system
Replies
3
Views
628
cnash
cnash
K
Selling everything (leaving the hobby)
Replies
33
Views
6K
Moose_MI
Moose_MI
Carmine Moleti
AxHTherm Fermentation and Mashing
Replies
4
Views
1K
JohnSand
JohnSand

Latest posts

Back
Top