A simple digital Taplist solution

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.
Excellent!
Screen Shot 2020-10-09 at 14.05.39.png
 
Very cool! Thanks.

Had another idea for you if you're looking for a new challenge and it doesn't involve an iPad app. There are several holes in the Brewfather app that I believe could be filled with plug ins. Most would benefit commercial brewers more than amateurs so would lend themselves to being paid add ons. Let me know if you're bored enough to consider them.
Why not? As long as it's possible with my limited skill set.
 
Well, first and foremost, one of the most requested features on the Brewfather site is tap list integration. This has actually been done by the guys at TapitGood (they charge $10/year for 4 taps with unlimited beers and $20/year for unlimited taps so there's income potential there if the API is not a big deal to figure out).​
The other big features I see folks asking for regularly are a brew calendar with fermenter management, and yeast repitching tracking. I can definitely see the calendar being something you could charge for based on the number of fermenters since that's something that is challenging for the brewery where I work. Anything that will allow us to get maximum use out of our equipment would be welcome. Especially if you eventually were to add barrel tracking as well.​
 
I have to say thank you this is great. I use your original link and it works fine. As in post 36, 37 or so I tried to figure out why when I save the page it is white (see below). I can't figure it out. I'm using Firefox.
#root, body, html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-image: url(../media/background.65fd672c.jpg);
background-color: #fff;
color: #e6e6e6;
background-size: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
background-color: rgb(255, 255, 255);
background-image: url("file:///C:/Users/Kevin/Desktop/Taplist_files/media/background.65fd672c.jpg");
background-size: 100%;
color: rgb(230, 230, 230);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
height: 428px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
user-select: none;
width: 1706.67px
1602292261209.png
 
Keep in mind I know nothing and am lucky based on previous post that I found that.
 
Well, first and foremost, one of the most requested features on the Brewfather site is tap list integration. This has actually been done by the guys at TapitGood (they charge $10/year for 4 taps with unlimited beers and $20/year for unlimited taps so there's income potential there if the API is not a big deal to figure out).​
The other big features I see folks asking for regularly are a brew calendar with fermenter management, and yeast repitching tracking. I can definitely see the calendar being something you could charge for based on the number of fermenters since that's something that is challenging for the brewery where I work. Anything that will allow us to get maximum use out of our equipment would be welcome. Especially if you eventually were to add barrel tracking as well.​
I'm not exactly sure how TapitGood or Brewfather works, never used them.
Had a quick look and seems like they are using API-key and username from Brewfather to import all the batches and using that info to create a beer list. Seems simple, only if I can get my hands on a valid API-key, I can play with it further. Would be a nice project...
 
I have to say thank you this is great. I use your original link and it works fine. As in post 36, 37 or so I tried to figure out why when I save the page it is white (see below). I can't figure it out. I'm using Firefox.
#root, body, html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-image: url(../media/background.65fd672c.jpg);
background-color: #fff;
color: #e6e6e6;
background-size: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
background-color: rgb(255, 255, 255);
background-image: url("file:///C:/Users/Kevin/Desktop/Taplist_files/media/background.65fd672c.jpg");
background-size: 100%;
color: rgb(230, 230, 230);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
height: 428px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
user-select: none;
width: 1706.67px
View attachment 701853
I saved the page from the browser myself just to check why the background image is not appearing and noticed that the image and font files are missing, somehow the browser doesn't download them.

I'll suggest you use the static version from google drive
https://drive.google.com/file/d/1Z8UgAqgOmWayHgh30ZNdlJePMRYFC6eM/view?usp=sharing
 
I saved the page from the browser myself just to check why the background image is not appearing and noticed that the image and font files are missing, somehow the browser doesn't download them.

I'll suggest you use the static version from google drive
https://drive.google.com/file/d/1Z8UgAqgOmWayHgh30ZNdlJePMRYFC6eM/view?usp=sharing
I tried that. It doesn't save changes and is still white. Oh well, I can just leave the laptop running all the time. Love the idea. I was thinking of trying the rasp pints till I saw this. Thanks.
 
I tried that. It doesn't save changes and is still white. Oh well, I can just leave the laptop running all the time. Love the idea. I was thinking of trying the rasp pints till I saw this. Thanks.

FYI, turns out it works fine with MS Edge but not Firefox, go figure. Absolutely love this, thank you so much.
 
I'm not exactly sure how TapitGood or Brewfather works, never used them.
Had a quick look and seems like they are using API-key and username from Brewfather to import all the batches and using that info to create a beer list. Seems simple, only if I can get my hands on a valid API-key, I can play with it further. Would be a nice project...

Exactly that. Because TapitGood exists and the integration is pretty good (though not perfect), I would suggest focusing on the fermenter/calendar aspect. I know it would be a whole different animal, but it would be worth it. In re getting your hands on an API key, reach out to Thomas. He's actually on here but it's probably more efficient to get to him through the chat feature on the documentation website: Contact
 
If you did decide to focus on the tap list aspect, here are a few spots where I feel TapitGood falls short:
1. When you import your batches it does not import the images into the TapitGood system.
2. The import does not indicate the batch number from BrewFather which makes it annoying to keep track when a core beer is switching from one batch to another. This is especially true for core beers that are bottle conditioned as we frequently have two batches of the same beer fermenting and bottle conditioning at the same time.
3. This is a major failure in my opinion: it will not allow you to set the system to automatically add a beer to the "tap list" (a misnomer since it also includes bottled beers) when it is marked as completed in Brewfather.

Advantage:
TapitGood uses WordPress as its "backend" which is a big advantage in that I can set it up on one machine and provide customers with a link while also displaying it on any number of TVs around the tasting room. This also means that the design elements are a little easier to manage although the integrated options are a little basic. While this is currently an advantage, this is another possible area in which you could supersede what they've done in that if you could create a Wordpress plugin so that breweries (or homebrewers with a beer blog) could add a page to their existing Wordpress driven website, that would be gold.
 
Perfect APP, I like it very much, very easy to approximately measure left beer in keg.
Is it possible to adapt it for European users, please mind this changes:
- Oz -ml
- Gravity (OG) - Brix (for example 14P)


And 2 suggestions:
- Please make Option to remove BU:GU, Kcal if they are not needed, just like Serving Glasses and Poured and Remaining.
- Please Round numbers on Poured and Remaining to second number , for example 1.3663322333 to 1.37

And 2 questions -
- It's based on browser which I'm using? How it knows my settings sand beers?
- Is it possible to Download the website/app and use it without Internet?
 
If you did decide to focus on the tap list aspect, here are a few spots where I feel TapitGood falls short:
1. When you import your batches it does not import the images into the TapitGood system.
2. The import does not indicate the batch number from BrewFather which makes it annoying to keep track when a core beer is switching from one batch to another. This is especially true for core beers that are bottle conditioned as we frequently have two batches of the same beer fermenting and bottle conditioning at the same time.
3. This is a major failure in my opinion: it will not allow you to set the system to automatically add a beer to the "tap list" (a misnomer since it also includes bottled beers) when it is marked as completed in Brewfather.

Advantage:
TapitGood uses WordPress as its "backend" which is a big advantage in that I can set it up on one machine and provide customers with a link while also displaying it on any number of TVs around the tasting room. This also means that the design elements are a little easier to manage although the integrated options are a little basic. While this is currently an advantage, this is another possible area in which you could supersede what they've done in that if you could create a Wordpress plugin so that breweries (or homebrewers with a beer blog) could add a page to their existing Wordpress driven website, that would be gold.

Apologies for the delayed response, got busy with my work. The pressure at work comes in phases for me, it gets easy for few month and then gets extremely busy when a product release is planned, I'm currently in this phase :-(

I'll rather play with Node/JavaScript/HTML rather than WordPress to create a new User Interface. To me, WordPress is very limited. Anyhow, I'm planning to have integration with Brewfather/Brewer's Friend/Plaato Keg in the next version. But it would take some time.
Thank you SSR, love this.
Would it be possible to at a 8oz pour as well? I keep a wine on tap for my wife and those are typically 8oz.
Thanks, Kevin
View attachment 702525
Great, can't tell how good it feels, knowing something you have created is being useful to others.
Not sure why I didn't make the "small" and "large" pour customizable, ideally this is where you can define your serving size. I'll try to fix that.
Perfect APP, I like it very much, very easy to approximately measure left beer in keg.
Is it possible to adapt it for European users, please mind this changes:
- Oz -ml
- Gravity (OG) - Brix (for example 14P)


And 2 suggestions:
- Please make Option to remove BU:GU, Kcal if they are not needed, just like Serving Glasses and Poured and Remaining.
- Please Round numbers on Poured and Remaining to second number , for example 1.3663322333 to 1.37

And 2 questions -
- It's based on browser which I'm using? How it knows my settings sand beers?
- Is it possible to Download the website/app and use it without Internet?
Thanks for the feedback. I'll keep this version simple for now, but would try to integrate all the options you have suggested in the next version. I'll still round the numbers to 2 decimal point in this version, didn't expect anyone to use ml/liters.

Regarding your questions:
-When you run the app from a browser, it saves the data to local storage that is specific to the browser you are using. Each browser has its own storage, if you run this from different browsers, each of them will have their own version. A small price to pay if you want to keep it simple :)
-Yes, you can download the static files I have uploaded on google drive, simply open the index.html in a browser, you don't need the internet. Should work fine on Chrome/Firefox/Brave, not tested on other browsers. Link to the latest version is on post#89.
 
Apologies for the delayed response, got busy with my work. The pressure at work comes in phases for me, it gets easy for few month and then gets extremely busy when a product release is planned, I'm currently in this phase :-(

I'll rather play with Node/JavaScript/HTML rather than WordPress to create a new User Interface. To me, WordPress is very limited. Anyhow, I'm planning to have integration with Brewfather/Brewer's Friend/Plaato Keg in the next version. But it would take some time.

Wait … you don't make a living creating free software and posting it to people who then ask for more free stuff? How is that possible? </sarcasm>
Brewfather integration would be spectacular for me personally. I only mentioned the Wordpress integration as it would make it easier for professional operations (I work in a brewery) to integrate it into their existing websites with their existing branding and since they would be more likely to be willing to pay (I know we would) for something that is easier to integrate, I thought it might be helpful.

Thanks again!!
 
If you did decide to focus on the tap list aspect, here are a few spots where I feel TapitGood falls short:
1. When you import your batches it does not import the images into the TapitGood system.
2. The import does not indicate the batch number from BrewFather which makes it annoying to keep track when a core beer is switching from one batch to another. This is especially true for core beers that are bottle conditioned as we frequently have two batches of the same beer fermenting and bottle conditioning at the same time.
3. This is a major failure in my opinion: it will not allow you to set the system to automatically add a beer to the "tap list" (a misnomer since it also includes bottled beers) when it is marked as completed in Brewfather.

Advantage:
TapitGood uses WordPress as its "backend" which is a big advantage in that I can set it up on one machine and provide customers with a link while also displaying it on any number of TVs around the tasting room. This also means that the design elements are a little easier to manage although the integrated options are a little basic. While this is currently an advantage, this is another possible area in which you could supersede what they've done in that if you could create a Wordpress plugin so that breweries (or homebrewers with a beer blog) could add a page to their existing Wordpress driven website, that would be gold.

I haven't been on here for a while so have missed most of this discussion.
I believe you might have already posted these issues on the feature requests or the forum at TapitGood - they are on the list of things to fix up.
Tapitgood was admittedly a little rushed on it's release and I didn't expect the response that it got, so I'm kinda playing catch up with some features!

Tapitgood is already a WordPress plugin, although not available to the public :)
I've built a heap of WordPress plugins either as open source or as commercial plugins, but I never would think that this would be viable as a plugin for the public to use - could be wrong though.
 
I haven't been on here for a while so have missed most of this discussion.
I believe you might have already posted these issues on the feature requests or the forum at TapitGood - they are on the list of things to fix up.
Tapitgood was admittedly a little rushed on it's release and I didn't expect the response that it got, so I'm kinda playing catch up with some features!

Tapitgood is already a WordPress plugin, although not available to the public :)
I've built a heap of WordPress plugins either as open source or as commercial plugins, but I never would think that this would be viable as a plugin for the public to use - could be wrong though.

I did report those issues, I try to help where I can … I also paid the license (if that's what we're calling it these days) fee.
 
Just wanted to say thanks to SSR for making this :)
Also, for fellow europeans, if you are able to use notepad and the search function, it's possible to change from oz to dl if you should want to do so, and don't mind fiddling a bit with the numbers. In my setup, the amount poured is more or less the same, so I opted to just count in glasses poured and glasses left. Do note that if you use dl, numbers will potentially rounded with a lot of numbers after the decimal point. I'm sure someone (maybe SSR) who actually knows java could chime in on how to avoid this. Keezer.jpg
 
Made a few changes to the app, some for our European friends.

1. Added the option to hide the Calories/Alcohol column.
2. Option to change the measuring unit. The available options are now -> "fl oz", "ml", "dl", "glass".
3. Option to the change gravity unit. Choose between "OG" or "Brix".
4. Fixed the number to 2 decimal points.
5. If you don't provide any value for a metric, it will also not display the unit for it. For example: if no value is proved for IBU, it will not display the text IBU as well.

Though I have changed the units, the onus of changing the values are up to you, the default values will remain the same. If you want to use "ml" instead of default "oz", you should also change the values for each beer.

Please let me know if you come across any bugs.

My apologies to everyone who likes the app to be simple. I can't stop myself from adding new features. But if you don't want to use new features, you should just keep using the app as it is, no changes required.

Taplist.png


Perfect APP, I like it very much, very easy to approximately measure left beer in keg.
Is it possible to adapt it for European users, please mind this changes:
- Oz -ml
- Gravity (OG) - Brix (for example 14P)


And 2 suggestions:
- Please make Option to remove BU:GU, Kcal if they are not needed, just like Serving Glasses and Poured and Remaining.
- Please Round numbers on Poured and Remaining to second number , for example 1.3663322333 to 1.37
Hope the changes will increase usability for you.

Just wanted to say thanks to SSR for making this :)
Also, for fellow europeans, if you are able to use notepad and the search function, it's possible to change from oz to dl if you should want to do so, and don't mind fiddling a bit with the numbers. In my setup, the amount poured is more or less the same, so I opted to just count in glasses poured and glasses left. Do note that if you use dl, numbers will potentially rounded with a lot of numbers after the decimal point. I'm sure someone (maybe SSR) who actually knows java could chime in on how to avoid this. View attachment 704721

Though I have fixed the decimal point issue in the new build if you want it to fix in the old static build you have, simply change these lines ->
{item.poured} fl oz poured
to
Math.round(item.poured*100)/100} fl oz poured

&&

{item.quantity} fl oz remaining
to
Math.round(item.quantity*100)/100} fl oz remaining

Link to latest static files
https://drive.google.com/file/d/14pv_ZlMXBihYTr-WzvKMu6c5NXfr6S5z/view?usp=sharing
 
Has anyone tried this on a Firestick? I downloaded the Firefox app and was able to get into the site but the edges were cut off and I wasn't able to scroll in the settings.

What's a cheap option to have this taplist on a TV in my basement?
 
@SSR now I think the app is perfect. Thanks for the quick reactions.
One more advise about the option for poured glasses - I have tried the app on small tablet 7" and I think the glasses are too small, maybe you should make them large and responsive. I tried to change the CSS and it changes the size but it's not responsive. This is just an advice.

CSS:
  /* the size of the 3 sizes glasses - small, medium and big */

.container .balance-bitterness .glasses svg, .container .beer-details .glasses svg, .container .calories-alcohol .glasses svg, .container .gravity-color .glasses svg, .container .poured-remaining .glasses svg, .container .tap-no .glasses svg {
  width: 90px;
  cursor: pointer
      /* for all, default is 30px */
}

.container .balance-bitterness .glasses div:first-child svg, .container .beer-details .glasses div:first-child svg, .container .calories-alcohol .glasses div:first-child svg, .container .gravity-color .glasses div:first-child svg, .container .poured-remaining .glasses div:first-child svg, .container .tap-no .glasses div:first-child svg {
  height: 80px
    /* small glass , default is 25px */
}

.container .balance-bitterness .glasses div:nth-child(2) svg, .container .beer-details .glasses div:nth-child(2) svg, .container .calories-alcohol .glasses div:nth-child(2) svg, .container .gravity-color .glasses div:nth-child(2) svg, .container .poured-remaining .glasses div:nth-child(2) svg, .container .tap-no .glasses div:nth-child(2) svg {
  height: 110px
    /* medium glass, default is 35px  */
}

.container .balance-bitterness .glasses div:nth-child(3) svg, .container .beer-details .glasses div:nth-child(3) svg, .container .calories-alcohol .glasses div:nth-child(3) svg, .container .gravity-color .glasses div:nth-child(3) svg, .container .poured-remaining .glasses div:nth-child(3) svg, .container .tap-no .glasses div:nth-child(3) svg {
  height: 150px
      /* big glass , default is 45px */
}
 

Attachments

  • 111.png
    111.png
    2 MB · Views: 32
Just scanning the thread via Google there's a least a couple of Firestick-driven monitors extant...

Cheers!

As in the Firestick is used as a mini "computer"? I looked through this thread and didn't find anything Firestick related
 
Firestick has a web browser so it should be able to do it.

I downloaded Firefox and was able to open the site/app but the edges are really cut off and I couldn't scroll down in the settings. Not sure if that is because of my TV or the app being used on a Firestick. I should try on my monitor.
 
I got it to work on Firefox. It doesn't look as nice as it does on my PC but it isn't a big deal. The lines breaking up the columns in the header row doesn't line up with the columns breaking up the tap list. I had to adjust the screen position on the TV to get the right and left edges but the bottom is still slightly cut off. Nothing I care about though, just the word SRM. All in all, I'm happy with it since I already had everything to do it.
 
THIS IS FABULOUS!
SSR you are amazing for putting this together, thank you!

I only have one ask, how can I make the data persistent?
I spun up IIS, opened up the local ports and I'm able to get this on various tablets to test which display will work best to attach to the keezer. But since the storage is per browser, I have to re-enter all the data everywhere it is viewed.

Is there a static file that can be copied from one browser storage to another? Could the data be stored in a flat file or other basic data storage?

Thanks again, you rock!
If you're ever in southern california I'd love to buy you a beer or pour you one of mine!
 
I only have one ask, how can I make the data persistent?

I'm sorry, there is no way currently to persist data across devices. I was supposed to work on a v2, that should have a user login along with an option to access your data across devices, but that never happened. Let me see if I can spin something quick to add the save option to the current app.

By the time you can copy data from the local storage of one browser to the other so that at least you don't have to re-enter it.

Taplist.jpg


This is how you do it Chrome, other browsers might be a little different.
From the menu go to View -> Developer -> Developer Tools
Go to the Application tab.
On the left in the Storage section, select Local Storage.
On the right section double click on the Value field and copy it.

Transfer this text to the other device any way you want. (Send yourself an email and access it from the other device).
Now in the new browser open the app and using the steps above simply replace the data in the Value field.

I know this is not optimal, but at least you would not have to re-enter the values in each browser. Hope it helps!
 
This is perfect, thanks so much! You deserve a beer or three for this!
So I rendered the page on multiple devices, iOS safari, ios chrome, windows chrome, windows edge, android chrome, and it works well on just about all but IE, except that the images don't scale smaller on the smaller devices like iOS and android displays. I have an older iPad Pro i'll test it with and probably mount to the kegerator on an arm mount.

I can tinker with the code, I used to be a LAMP stack developer back in the day, where would I look in the code to identify those images and maybe sub in some scalable PNGs?

Again, you have made something absolutely awesome, THANK YOU!
 
I can tinker with the code, I used to be a LAMP stack developer back in the day, where would I look in the code to identify those images and maybe sub in some scalable PNGs?
Actually, there is just one image file in this app and that is the background image, the rest all are SVG's.
Send me a PM with the screenshot of the issue, let me see if I can fix it.
 
Thanks, attached is how it looks on an iPad. The images stay large and overlap on either safari or chrome.
20210329_230254.jpg


As always, appreciate your efforts!
 
Thanks, attached is how it looks on an iPad. The images stay large and overlap on either safari or chrome.
View attachment 723993

As always, appreciate your efforts!
Try refreshing your page now.
Actually I don't have a tablet, I was testing it on a browser simulator, which was rendering it properly. Could only replicate the issue when I checked it on the Xcode simulator. Hopefully, it would work for you now.
 
this is exactly what im looking for... i saw that Plaato Keg integration was mentioned. Is that integrated or still in the works
 
Try refreshing your page now.
Actually I don't have a tablet, I was testing it on a browser simulator, which was rendering it properly. Could only replicate the issue when I checked it on the Xcode simulator. Hopefully, it would work for you now.
Hmm, same results. I'll just need to pipe a monitor off a system as it looks like there just isn't enough real estate on the smaller tablet form factor.

Thanks for looking into it!
 
Tested on iPad 5th generation, iPad Pro 3rd generation, and a few more, working fine on all of them. All simulators of course.

iPad__5th_generation__—_12_2_and_iPad_Pro__12_9-inch___3rd_generation__—_12_2_and_Applications.png
 
I have Raspberry Pints and I have to tell you, this is awesome! I really like the simplicity. I'm going to try to set it up on an iPad in the beer room and see how it works out.
 
Back
Top