Interested in dizmo? Write us an email at firstname.lastname@example.org and we will send you the access data in order for you to being able to download dizmoViewer and install it.
Create your free dizmoID at https://openid.dizmo.com/account/register.html
You’ll need it later to login to dizmoViewer
Install node.js from nodejs.org (available for Windows, Linux and Mac)
Install Yeoman and dizmoGen with npm by following the instructions at https://www.npmjs.com/package/generator-dizmo
Clone (or download) the ToneAnalyzer Git Repo from https://github.com/dizmo/toneAnalyzer
Log in to your Bluemix Account
From the top-right Menu choose the Category “Watson” and add the Tone Analyzer Service
Leave the default settings and click on “create”
Under “Service Credentials” you’ll find the username and password to access the just created service
In the source code of the toneAnalyzer dizmo, in the file src/index.js, change the username and password on Line 9 and 10
Build and install the dizmo
Install the dependencies for the build tool by running the following command
Build the ToneAnalyzer dizmo by running the following command
npm run make
Start dizmoViewer and drag the file IbmToneAnalyzer-0.6.0.dzm from the build directory into the open dizmoViewer. This will install the dizmo and instantiate it.
Run the toneAnalyzer dizmo
Enter any text into the text area and press “Analyze” to have it analyzed by the ToneAnalyzer dizmo. The results will be shown in the three following tabs.
One of the stand-out features of dizmo is the ability of dizmos to interact and exchange data. In the case of the ToneAnalyzer dizmo, this means that it can not only take text entered in the text area of the dizmo itself, but also get text from another dizmo. This process is called docking and you can experience it by trying the following:
Open the Creator (press the + button on the bottom-left) and open an Instance of the dizmo Store dizmo. In there, search for and install the Sticky Notes dizmo. Once you have installed it, an instance will be automatically opened. Enter any text that you like to have analyzed into the Sticky Notes dizmo. Then, drag the ToneAnalyzer dizmo alongside to the Sticky Notes dizmo, its border will begin to flash yellow. Drop the ToneAnalyzer dizmo, it will dock and transfer the text and analyze it. Now imagine how you could combine other Watson services with dizmos e.g dock an ImageAnalyzer dizmo to any image inside dizmoViewer.
Lets take a quick look at the source code of the ToneAnalyzer dizmo:
The main function starts on Line 132 and is called getAnalysisFromText. It uses jQuery’s Ajax function to call the Tone Analyzer API with the provided text. The API response in JSON format is then parsed and visualized with the help of the drawProgress and textFromPercentage functions.
If you look at index.html, you see that a dizmo uses standard html elements like radiobuttons and buttons. They all have html5 data attributes called dizmo-radiobutton and dizmo-button. Those elements are converted to dizmo styled elements by a library called dizmoElements, you can read more about it here: https://www.dizmo.com/docs/complete-guide/dizmoelements-library/
Meet the Authors
Responsible for developer relations, Markus is passionate about technical communities and connecting like-minded digital folks. Beyond dizmo, his interests take a varied route from photography to 3d-printing.
With a worldwide GoToMarket experience across multiple techs, Luke is focused on business development across Europe. Unshakably addicted to English tea.