Speech Input: General Implementation + Find Feature Completed

Source/Chronozoom.UI/Chronozoom.UI.csproj

@@ -250,6 +250,7 @@
     <Content Include="scripts\virtual-canvas.min.js.map">
       <DependentUpon>virtual-canvas.js</DependentUpon>
     </Content>
+    <Content Include="scripts\voice.js" />
     <Content Include="ui\auth-edit-collection-editors.min.js">
       <DependentUpon>auth-edit-collection-editors.js</DependentUpon>
     </Content>

Source/Chronozoom.UI/Web.config

@@ -46,6 +46,7 @@
     <add key="AirbrakeEnvironmentName" value="development"/>
     <add key="ProgressiveLoadEnabled" value="true"/>
     <add key="StorageTimeout" value="300"/>
+    <add key="SpeechInputEnabled" value="false" />
     <add key="SearchEngineIndexing" value="false"/>
     <add key="AzureMarketplaceAccountKey" value=""/>
     <add key="TwitterConsumerKey" value=""/>

Source/Chronozoom.UI/cz.html

@@ -52,6 +52,7 @@
     <script type="text/javascript" src="/scripts/external/audiojs/audiojs/audio.min.js"></script>
     <script type="text/javascript" src="/scripts/external/jquery.autonumeric-1.9.24.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
     <script type="text/javascript">
 
         function AddCSS(path)
@@ -115,6 +116,7 @@
             AddScript("/scripts/uiloader.js");
             AddScript("/scripts/dates.js");
             AddScript("/scripts/media.js");
+            AddScript("/scripts/voice.js");
             AddScript("/scripts/plugins/error-plugin.js");
             AddScript("/scripts/plugins/utility-plugins.js");
             AddScript("/scripts/extensions/extensions.js");

Source/Chronozoom.UI/default.ashx.cs

@@ -24,6 +24,7 @@ public class PageInformation
         public string AirbrakeProjectKey        { get; private set; }
         public string AirbrakeEnvironmentName   { get; private set; }
         public string OneDriveClientID          { get; private set; }
+        public bool   SpeechInputEnabled        { get; private set; }
         public string CSSFileVersion            { get; private set; }
         public string JSFileVersion             { get; private set; }
         public string SchemaVersion             { get; private set; }
@@ -46,6 +47,8 @@ public PageInformation()
             AirbrakeEnvironmentName = ConfigurationManager.AppSettings["AirbrakeEnvironmentName"];  if (AirbrakeEnvironmentName == "") AirbrakeEnvironmentName = "development";
             OneDriveClientID        = ConfigurationManager.AppSettings["OneDriveClientID"];
 
+            SpeechInputEnabled      = (("" + ConfigurationManager.AppSettings["SpeechInputEnabled"]).Trim().ToLower() == "true");
+
             CSSFileVersion = GetFileVersion("/css/cz.min.css");
             JSFileVersion  = GetFileVersion();
             SchemaVersion  = GetLastSchemaUpdate();
@@ -271,6 +274,7 @@ private static void ComposePage(XDocument pageRoot, XmlNamespaceManager xmlNames
                 "airbrakeProjectKey: \""        + pageInformation.AirbrakeProjectKey        + "\", " +
                 "airbrakeEnvironmentName: \""   + pageInformation.AirbrakeEnvironmentName   + "\", " +
                 "onedriveClientId: \""          + pageInformation.OneDriveClientID          + "\", " +
+                "speechInputEnabled: "          + pageInformation.SpeechInputEnabled.ToString().ToLower() + ", " +
                 "cssFileVersion: \""            + pageInformation.CSSFileVersion            + "\", " +
                 "jsFileVersion: \""             + pageInformation.JSFileVersion             + "\", " +
                 "schemaVersion: \""             + pageInformation.SchemaVersion             + "\", " +

Source/Chronozoom.UI/scripts/voice.js

@@ -0,0 +1,137 @@
+/*
+    Notes:
+    -----
+    Provides speech input processing. See https://github.com/TalAter/annyang and https://www.talater.com/annyang/.
+    Depends on  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>.
+    Requires an HTML5 browser that supports voice input, currently only Google Chrome but IE12 will also have this feature.
+*/
+var CZ;
+(function (CZ) {
+    (function (Voice) {
+
+        // wrapper functions for each speech input command
+
+        function Find(item)
+        {
+            if (typeof item !== 'string') return;
+
+            CZ.Service.getSearch(item).done(function (results)
+            {
+                if (results === null || results.d.length === 0)
+                {
+                    // tell user could not find
+                    alert('Could not find "' + item + '".');
+                }
+                else
+                {
+                    // close other panes and display timelines
+                    CZ.HomePageViewModel.closeAllForms();
+                    CZ.StartPage.hide();
+
+                    // navigate to first item found
+                    var result = results.d[0];
+
+                    var resultIdPrefixes =
+                    {
+                        0:  'e',
+                        1:  't',
+                        2:  ''
+                    };
+
+                    var resultTypes =
+                    {
+                        0:  'exhibit',
+                        1:  'timeline',
+                        2:  'contentItem'
+                    };
+
+                    CZ.Search.goToSearchResult
+                    (
+                        resultIdPrefixes[result.objectType]  + result.id,
+                        resultTypes[     result.objectType]
+                    );
+                }
+            });
+        }
+
+        function MoveTo(item)
+        {
+            if (typeof item !== 'string') return;
+
+            alert('show me ' + item);
+        }
+
+        function ShowHomePage()
+        {
+            alert('show home page');
+        }
+
+        function ShowTimelines()
+        {
+            alert('show timelines');
+        }
+
+        function SwitchCollection(item)
+        {
+            if (typeof item !== 'string') return;
+
+            alert('explore ' + item);
+        }
+
+        function TourLast()
+        {
+            alert('next item');
+        }
+
+        function TourNext()
+        {
+            alert('previous item');
+        }
+
+        function TourPause()
+        {
+            alert('pause tour');
+        }
+
+        function TourResume()
+        {
+            alert('resume tour');
+        }
+
+        // make each wrapper public so can be called later by speech engine
+        Voice.Find              = Find;
+        Voice.MoveTo            = MoveTo;
+        Voice.ShowHomePage      = ShowHomePage;
+        Voice.ShowTimelines     = ShowTimelines;
+        Voice.SwitchCollection  = SwitchCollection;
+        Voice.TourLast          = TourLast;
+        Voice.TourNext          = TourNext;
+        Voice.TourPause         = TourPause;
+        Voice.TourResume        = TourResume;
+
+        // if speech is enabled in both web config and browser
+        if (constants.speechInputEnabled && annyang)
+        {
+            // map speech commands to wrappers
+            var commands =
+            {
+                'explore *item':    CZ.Voice.SwitchCollection,
+                'pause tour':       CZ.Voice.TourPause,
+                'resume tour':      CZ.Voice.TourResume,
+                'previous item':    CZ.Voice.TourLast,
+                'next item':        CZ.Voice.TourNext,
+                'show timelines':   CZ.Voice.ShowTimelines,
+                'show home page':   CZ.Voice.ShowHomePage,
+                'show me *item':    CZ.Voice.MoveTo,
+                'find *item':       CZ.Voice.Find               // <-- currently this is the only item testing with
+            };
+
+            // initiate speech engine
+            annyang.setLanguage('en');
+            annyang.addCommands(commands);
+            annyang.start();
+        }
+
+    })(CZ.Voice || (CZ.Voice = {}));
+    var Voice = CZ.Voice;
+})(CZ || (CZ = {}));