Siebel Open UI Enhancement ,Part 3: Text to Speech API, Enhanced

Hello All,

In the previous article of the series i explained text to speech functionality on button click.

http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-text-to.html

One of reader advised me if we could extend this for multiple fields,

• There should not be a button that reads just one field 
• Different fields could be read by Siebel 

So, i tried to implement this with the approach 

• find a event to trigger speech , for this i used double click 
• on the event call Speak() method 
• Pass value of field in Speak()

Sample PR File

The code is similar as explained in previous post. The working sample looks like 

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg

In my next post i will be sharing Speech to Text conversion functionality in Siebel.

<<<<<<<<Next in the Series >>>>>>>>>

Siebel Open UI Enhancement ,Part 2: Speech to Text Enhancement

Hello All,

In my previous post (http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-text-to.html) i tried to implement Text to speech conversion i.e. read out Siebel fields on a button click. So this time i tried to implement something similar on that ground.

If you are an iPhone user you might have explored SIRI functionaly which allows you to control your phone with your voice commands, i tried something similar to that but on a very basic level.

Siebel Speech to Text :

• This functionality listens users voice as input and sets the spoken text as value in a field. 
• No 3rd party API or plugin has been used for this 
• Its default feature of HTML5
• Its very lightweight, responsive and accurate detection is possible with this  

See below video for basic functionality, will share exact code and advanced functionality in upcoming post on this series..

For exact code please inbox me, i will be happy to share.
Downloadable link to PR(TextConvertor.js) file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg

In my next posts i will be sharing some advanced voice control functionality in Siebel.

Siebel will be able to Create ,Delete, Update records on your voice commands same as the features offered by SIRI, i am calling this plugin as SIBI excited ??, stay tuned will demonstrate this in my next post.

<<<<<<<< Previous in the Series >>>>>>>>>   

<<<<<<<< Next in this Series >>>>>>>>>

Your suggestions are most welcome..

Siebel Open UI Enhancement ,Part 1: Text to Speech API

Hello all,

After a long break from writing any useful post i am writing this post after one of my application user demanded a feature to readout Siebel Fields, so i thought to give it a try and achieved it as below.

The concept is very simple we need to call a 3rd party plugin or API and pass field value to it, that we want system to speak. There are various API's available to achieve it to name a few

• https://responsivevoice.org/ 
• http://www.jqueryscript.net/other/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js.html
• http://www.masswerk.at/mespeak/
• http://www.jtalkplugin.com/

I used method from https://responsivevoice.org/, the API is free to use and supports many options.

Base function is responsiveVoice.speak("Text to Speak"), here speak() take in input the text to speak. Additional parameters that can be passes are,

• Changes default voice to "UK English Male", responsiveVoice.speak("hello world", "UK English Male");
• Sets Pitch of voice, responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
• Sets volume of vocie, responsiveVoice.speak("hello world", "UK English Male", {volume: 1});

for further documentation please refer, https://responsivevoice.org/api/

Tasks to do to make it work in Siebel,

1. Download responsivevoice.js from http://code.responsivevoice.org/responsivevoice.js or Include the script directly in your code , <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
2. Add the file under Manifest Files if downloaded else directly refer this is PR file
3. Write a PR file with this JS file under define section , define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] 
4. Associate PR file with a Applet 
5. In PR file write code to get value of certain field and call speak() method on some event say Button click.

Sample PR File

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg


Explanation of Code :

1. Define and Include 3rd party files

define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] ,

all the JS files that code refer need to be defined here. Since we are using speak() method that is defined in file responsivevoice.js so we need to include this. Also either we can directly call file by refering its web location ["siebel/phyrenderer","//code.responsivevoice.org/responsivevoice.js"] or by locally saving file under siebel/custom folder.

2. Creation of button that will call method speak

 var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-ActivateMember-btn';

//Custom Button that will trigger speech API

var Speak = "<button " +
"id= '" + id1 + "' " +
"class= 'siebui-ctrl-btn appletButton' " +
"aria-label=Speak " +
"type=\"button\" " +
"data-display=\"Speak\" " +
"title=Speak " + ">" + "Speak" + "</button>";

$("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".AppletMenu").append(Speak);


3. Function that gets value of a selected field and calls speak method 

$('button[data-display="Speak"]').click(function(){

var controls = pm.Get( "GetControls" );
                         var cntrl = controls[ "Abstract" ];
var Status = pm.ExecuteMethod( "GetFieldValue", cntrl );
//alert(Status);
responsiveVoice.speak( Status );
});

Working Demonstration of this is shown in below video.

any suggestions are always welcome...

In my next post i will be sharing Speech to Text conversion functionality in Siebel..

<<<<<<<<Next in the Series >>>>>>>>>