🍴 Programming

Decent .shot Visualizer

Miha Rekar
Miha Rekar
TL;DR: Go to Decent Visualizer and upload .shot file to see it visualized.


As a fresh owner of a Decent machine of course I want to play around with everything.

I'm not into DSx skin (yet), so I asked yesterday if there's any way to see shot history charts. I was pointed to this excellent python plotter, but I wanted something flashier 😅️

A couple of hours later here is v0.1 of Decent Visualizer. It's very much a Work In Progress, but it is open source: https://github.com/miharekar/decent-visualizer

So if we have any designers and/or JavaScript developers, I'm sure you can make this much prettier and more useful 😬️

But it works:
sample.png 478 KB View full-size Download

So go grab your .shot files and upload them to have them visualized in a chart. I find it to be the easiest to have FTP running on the tablet and I just connect to it via FTP app and have all the files right here on my computer. No cables, no fuss, instant.

I think that's pretty cool 🤩️



UPDATE 23.11.2020: There are 2 major new things:
  • DSx-like skin
  • saving your parsed shot in the DB
I still throw away the original file so all of the identifiable things and all data that can not be plotted is not saved. I take privacy seriously.

So say goodbye to static screenshots or poor quality phone camera shots of tablet, or some tiny image that comes out of a render tool, and say hello to interactive shot chart sharing. 🥳️🥳️🥳️

Here's an example of a recent shot I made: https://visualizer.coffee/shots/74210ce9-988f-403e-a33e-d3e94aba4dab

And here is that same shot in a DSx-like colors: https://visualizer.coffee/shots/74210ce9-988f-403e-a33e-d3e94aba4dab?skin=dsx

UPDATE 09.12.2020:
The visualizer is becoming quite popular so I upgraded its Heroku instance. This means it'll always be instant - no more random waiting around for the app to wake up from sleep.

This also means it’ll cost me $7/month. I also could not resist visualizer.coffee domain and that's another $35/year.

It's not much, and I can easily afford it, but if you find the tool useful and would like to support it, now you can.



UPDATE 12.12.2020:
  • user accounts
  • edit shot data
  • comment field
  • delete shots
You can now create a user account and all the shots you upload while logged in will go into your shots table that you can then easily open on any device:
Screen Shot 2020-12-12 at 18.19.05.png 432 KB View full-size Download


And since in the recent update I've extended the ability for extra info and now I know when you own the shot - so you can edit your own shots!

There's also an additional Comment field for anything that you want to put in there. Was the shot bright, fruity, strong, mild, heavy, sweet,… How does it compare to the previous shot? What did the change do? Literally anything you want.
Screen Shot 2020-12-12 at 20.52.30.png 206 KB View full-size Download

This means you can add data to old shots where you forgot to add it. Or where the data was not correct. Or whatever the case. And when you share the edited shot it'll show its new values proudly to anyone. In the case above, for example, I've edited enjoyment to 50 and added a comment and now anyone can see that reflected here:

https://visualizer.coffee/shots/73b44102-ab78-4fa0-9b14-2ca2f183720c



UPDATE 16.12.2020:

  • using actual TCL parser instead of regex
  • extracting and displaying espresso_notes (the right box of
    Enrique Bengoechea Enrique
    's DYE plugin)
  • general UI polish
    • spinner for uploading
    • better error handling
    • proper reset password email
    • improved caching for faster render of Your Shots page
    • display shot times in your timezone
    • suggestions for grinder and bean inputs on edit page based on your history shots
  • API endpoint

I made myself a Siri Shortcut just to test out the API: https://www.icloud.com/shortcuts/4b8f5487a3df44c486a67fec6c739647

Not sure if anyone will find it useful, but it's there 🤷‍♂️️If nothing else you can see how easy it was to build.

Here's the API description for anyone who wants to make their own script/extension/whatever.

The url for uploading is https://visualizer.coffee/api/shots/upload

The method for uploading is a multipart/form-data POST request.

The authorization is done via basic auth. Basically (no pun intended) you take your username (email) and password, and join them with a colon so you get `your_email:your_password` string. Then you base64 encode this string, and you set a http header `Authorization: Basic base64_encoded_string_here`.

Because this means that your auth is exposed like that I strongly recommend you POST over https so that the contents of the request are encrypted.

The app expects a `file` param with the .shot file.

In case all is well it'll return http status 200 Ok and a JSON response in a form of `{id: id_to_uploaded_shot}`.

In case there's an authorization error the app will return http status 401 Unauthorized.

In case authorization succeeded but processing the params did not the app will return http status 422 Unprocessable Entity.



Update 18.12.2020:
  • skin as as a user preference
  • public profiles
  • filter by roaster and/or coffee
  • meta chart images
I moved a lot of stuff around to simplify the code and improve the app. Most notable is that skin no longer comes via param, but you set it in your profile settings. This means that the profile will always be set to your preferred one. So when someone gives you a URL to their shot you'll always see it in your preferred way. 2 people can be looking at the same shot on the same URL but they'll both see it in the skin of their choosing.

This now enables me to use this setting elsewhere. So if you're a dark soul and select DSx that blackness now follows you around on all the Visualizer pages.
Screen Shot 2020-12-18 at 10.28.21.png 357 KB View full-size Download

I think it looks pretty damn awesome 🥳️

Another thing that you can set in your profile settings is to make yourself public. This will list you on the new page where you can see all public Decent People and then quickly see their shots. This is off by default. You, and you alone can decide whether you want to share your profile or not. But here you can see mine.

You can now also filter your shots by roaster and or coffee by simply clicking on the name of the roaster or the name of the coffee. If you first click on one, and then the other, you get combined filter of roaster and coffee.
Screen Shot 2020-12-18 at 14.26.21.png 155 KB View full-size Download

And a tiny improvement (that nonetheless took a lot of time to do) is that every shot page now comes with it's own og:image meta tag of the first chart. So if you paste a Visualizer URL to Slack, Twitter, Facebook, or any other tool that reads these tags you'll now see a nice chart preview.

This is from Slack for example:
Screen Shot 2020-12-17 at 15.00.02.png 190 KB View full-size Download

And since now I have this image I also make it available to you at the bottom of the chart on the right.
Screen Shot 2020-12-18 at 10.37.56.png 272 KB View full-size Download

So you don't need to take screenshots and deal with all that drama, but you can just use the already prepared image 😉️



Update 19.12.2020:
  • traffic light like system for espresso enjoyment
Alejandro Trambauer Alejandro
had a great idea for this so I made it.

This is how the edit looks like:
Screen Shot 2020-12-19 at 08.44.44.png 22.6 KB View full-size Download

And here you can see it in action:
Screen Shot 2020-12-19 at 08.46.42.png 187 KB View full-size Download
Or check my public profile.



Hope you like these updates and remember that you can support my work by sharing the burden of the hosting costs.