Custom calculator widget

I’m playing around with the new release and updating some of my dashboards. Fun stuff!

One suggestion I’d make for a new widget is a custom calculator widget. Allow the user to create a simple little custom widget to accomplish something. For example, I use a refractometer that only has a Brix scale, and I’m constantly using a web-based Brix/SG converter to convert my readings. I’d love to have a little widget where I can input either a brix or sg value and see the conversion immediately. Another example is a dilution/boil-off calculator. How about a strike temperature calculator?

The point is that there are many simple tools that we rely on that have pretty straightforward equations, and it would be cool to have the ability to build a custom tool and have it on the dashboard.

1 Like

This could actually be really useful. Esp if it could remember values like the wort correction factor for the refractometer

spreadsheet on google drive.

iframe pointing to the spreadsheet.

All the custom formulae on your dashboard.

Edit: option 2: the node-red bit for dynamic calculations.

That’ll also work.

We prototyped a system for custom widgets, but ran into technical and practical difficulties.

We can’t isolate widgets as well as we can services, and you’d have to deal with the code for adding things like the widget header.
With the UI being transpiled code, the runtime html/js looks nothing like the source code. This makes integration of runtime plugins harder.

That said, we could look into having a formula widget with access to the unit conversion library.

I tried the iframe pointing to google drive spreadsheet. It worked on the PC, but not on mobile. It wouldn’t let me edit cells. Another thing I thought to do is make the calculator on Calconic.com, and try to embed it somewhere. I tried using google sites and point a webframe widget to that, but as the release notes already explained, google can’t be embedded in a webframe. Strange that google sheets can, but google sites can’t. Can anyone suggest another place where I could embed an html calculator on a webpage for free, and then point a web frame widget to that?

The “does not work in iframes” is an explicit flag set by a webserver. I have no clue why Google allows or disallows it on specific pages, but suspect ad revenue is involved somehow.

If you’re fine with writing your own html, I can easily set up a small webserver you can run in docker to host your files.

I figured out something that didn’t involve me developing a custom calculator myself. I built out a couple calculators using Calconic, which has a free account for up to 5 calculators. They provide an iframe link, and as a bonus, I was able to match the color palette to the Brewblox UI. Unfortunately, it looks like there may be a bug with the webframe widget on small screens. On the iphone, it only displays a small widget that can’t be resized, whereas on the PC, I can resize the webframe to any desired size on the dashboard.


Nice solution. Seems like there is a lot of unexplored potential in iframes on dashboards.

Widgets on mobile pages don’t use the grid layout, but are adjusted to content height. I’ll set a more sensible minimum height for the webframe, make it adjustable, or let it use grid height - whatever yields the smoothest result.

It seems like in this case, the widget doesn’t recognize the iframe content as “content”. Probably the grid height would be best if it’s possible, because then the user can scale the widget to the iframe content.