Advanced: Creating a custom HMTL resource

chemistry
resource
tutorial

#1

In this tutorial I’ll show you how to create a custom HTML resource that adds a molarity calculator to the Resources menu in Findings.

We will start with this online calculator: https://www.omnicalculator.com/chemistry/Molarity

The page includes a convenient ‘Embed’ option, with the code to use to embed that calculator into any web page. Let’s simply create a text file with all the html needed for a simple embed. You can use any text editor, including TextEdit (you will need to save as Plain Text, which you can do via the Format menu). Here is the html code, which is mostly pasted from the initial website:

<!DOCTYPE html>
<html>
<body>
<div class="omni-calculator" data-calculator="chemistry/Molarity" data-width="300" data-config='{}' data-currency="EUR" data-show-row-controls="false">
  <div class="omni-calculator-header">Molarity Calculator</div>
  <div class="omni-calculator-footer">
    <a href="https://www.omnicalculator.com/chemistry/Molarity">Molarity Calculator</a> by <a class="omni-calculator-img-link" href="https://www.omnicalculator.com">Omni</a>
  </div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
</body>
</html>

Save the file with the name ‘index.html’. Then create a folder called ‘Molarity Calculator’, and place the ‘index.html’ file inside it.

Finally, we can add a file called ‘info.json’ in that same folder to let Findings know what we would like the window size to be by default, as well as the background color. Note that this file is optional, and we could simply have created a file called ‘Molarity Calculator.html’ to put in the Resources folder. But by creating a folder, we can have other dependencies just like for a “real” web site (images, css, javascript, etc.), and we can have the special ‘info.json’ file as well. Findings will recognize a folder with a file ‘index.html’ file as being a web page to load from that root page.

Here is the ‘info.json’ file content:

{
	"width": 350,
	"height": 500,
	"backgroundColor": "#ffffff"
}

Now you just need to put the folder ‘Molecular Calculator’ in your Resources folder. To locate the folder in the Finder, simply do the following:

  • Select the menu Resources > Customize…
  • Click the button ‘Show Resources Folder’
  • Move or copy the ‘Molecular Calculator’ folder in the ‘Resources’ folder

Now, back in Findings, you should see a new menu item under the ‘Resources’ menu, called ‘Molecular Calculator’. Select the item and Findings will open a window and load the web page. Note that because we use the embed code from a 3rd party, you will need an internet connection for it to load from their servers.

Here is a link to a zip file with the final resource to check out if you don’t want to build it all yourself (you’ll need to unzip the file to get the folder):

http://downloads.findingsapp.com/resources/molarity_calculator.zip

Let me know if you have questions, and do not hesitate to share custom resources on this forum by starting a new topic in the ‘Share’ category

Charles


New features in Findings 2, compared to Findings 1
#2

Hi Charles,

I’m Matt, the founder of Omni Calculator. Just stopping by to say I’m happy to see you use our tool :-). We’d love to be more useful to the scientific community… if you have any needs/ideas for calculators, I’d love to hear about them! A chemistry PhD student just joined our team, she’s building a “to do” list right now :-).

Good luck with Findings App, I love the idea!

peace,
Matt, matt@omnicalculator.com


#3

Hi Matt!

Thanks for the nice words! I build the example with your calculator, as it had a nice and simple UI, and was easy to embed. You guys did a great job, and it looks like you have things quite well-covered. Nothing like a PhD student who knows what scientists need to come up with more improvements :wink:

Charles


Feature Request: Calculators!