node-red-google-notify.html

<style>
  .group {
    border: 1px solid blue;
    border-radius: 5px;
    box-shadow: 5px 5px 5px;
    padding: 10px;
    margin-top: 30px;
  }

  .groupLabel {
    transform: translateY(-20px);
    background-color: white;
    text-align: center;
    width: 150px;
  }

  .overridableInstruction {
    padding-left: 15px;
    font-size: smaller;
  }
</style>

<script type="text/javascript">
  RED.nodes.registerType('google-notify-config', {
    category: 'config',
    defaults: {
      ipaddress: {
        value: "",
        required: true
      },
      name: {
        value: ""
      },
      language: {
        value: "en"
      },
      playVolumeLevel: {
        value: "20",
        validate: RED.validators.regex(/^([0-9]|[1-9][0-9]|100)$/)
      },
      speakSlow: {
        value: "true"
      },
      mediaServerUrl: {
        value: ""
      },
      mediaServerPort: {
        value: "8098",
        validate: RED.validators.regex(/^\d+$/)
      },
      cacheFolder: {
        value: "/tmp",
        validate: RED.validators.regex(/^.+$/)
      }
    },
    label: function () {
      return this.name || this.ipaddress;
    },
    oneditprepare: function () {
      // var node = this;
      // var options = $("#node-config-input-language");
      // //Calling the API built by NodeJS code
      // $.getJSON('/gn-languages', function (languages) {
      //   $.each(languages, function (l, language) {
      //     options.append($("<option />").val(language.key).text(language.value));
      //     options.val(node.language);
      //   });
      // });

      try {
        $("#node-config-input-ipaddress").autocomplete("destroy");
      } catch (err) { }
      $("#node-config-lookup-ipaddress").click(function () {
        $("#node-config-lookup-ipaddress-icon").removeClass('fa-search');
        $("#node-config-lookup-ipaddress-icon").addClass('spinner');
        $("#node-config-lookup-ipaddress").addClass('disabled');
        $.getJSON('gn-ipaddresses', function (data) {
          $("#node-config-lookup-ipaddress-icon").addClass('fa-search');
          $("#node-config-lookup-ipaddress-icon").removeClass('spinner');
          $("#node-config-lookup-ipaddress").removeClass('disabled');
          var ipaddresses = [];
          $.each(data, function (i, ip) {
            ipaddresses.push(ip);
          });
          $("#node-config-input-ipaddress").autocomplete({
            source: ipaddresses,
            minLength: 0,
            close: function (event, ui) {
              $("#node-config-input-ipaddress").autocomplete("destroy");
              const selectedDevice = ipaddresses.find(device => device.value == $("#node-config-input-ipaddress").val());
              if (selectedDevice) {
                $("#node-config-input-name").val(selectedDevice.device);
              }

            }
          }).autocomplete("search", "");
        });
      });

    },
    oneditsave: function () {
      this.language = $("#node-config-input-language").val();
    }
  });
</script>

<script type="text/x-red" data-template-name="google-notify-config">
  <div class="form-row">
    <label for="node-config-input-ipaddress"><i class="icon-bookmark"></i> IP Adress</label>
    <input type="text" id="node-config-input-ipaddress" style="width:60%;" placeholder="192.168.xxx.xxx"/>
    <a id="node-config-lookup-ipaddress" class="btn"><i id="node-config-lookup-ipaddress-icon" class="fa fa-search"></i></a>
  </div>
  <div class="form-row">
    <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-config-input-name" style="width:60%;" placeholder="cast device name"/>
  </div>
  <div class="form-row">
    <label for="node-config-input-language"><i class="fa fa-globe"></i>  Language</label>
    <select id="node-config-input-language" style="width:60%;">
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="am">Amharic</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bs">Bosnian</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="ceb">Cebuano</option>
        <option value="ny">Chichewa</option>
        <'option value="zh-cn"</option>Chinese Simplified</option>
        <'option value="zh-tw"</option>Chinese Traditional</option>
        <option value="co">Corsican</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="fy">Frisian</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="ha">Hausa</option>
        <option value="haw">Hawaiian</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hmn">Hmong</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="ig">Igbo</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="jw">Javanese</option>
        <option value="kn">Kannada</option>
        <option value="kk">Kazakh</option>
        <option value="km">Khmer</option>
        <option value="ko">Korean</option>
        <option value="ku">Kurdish (Kurmanji)</option>
        <option value="ky">Kyrgyz</option>
        <option value="lo">Lao</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="lb">Luxembourgish</option>
        <option value="mk">Macedonian</option>
        <option value="mg">Malagasy</option>
        <option value="ms">Malay</option>
        <option value="ml">Malayalam</option>
        <option value="mt">Maltese</option>
        <option value="mi">Maori</option>
        <option value="mr">Marathi</option>
        <option value="mn">Mongolian</option>
        <option value="my">Myanmar (Burmese)</option>
        <option value="ne">Nepali</option>
        <option value="no">Norwegian</option>
        <option value="ps">Pashto</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ma">Punjabi</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sm">Samoan</option>
        <option value="gd">Scots Gaelic</option>
        <option value="sr">Serbian</option>
        <option value="st">Sesotho</option>
        <option value="sn">Shona</option>
        <option value="sd">Sindhi</option>
        <option value="si">Sinhala</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="so">Somali</option>
        <option value="es">Spanish</option>
        <option value="su">Sundanese</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="tg">Tajik</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="uz">Uzbek</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="xh">Xhosa</option>
        <option value="yi">Yiddish</option>
        <option value="yo">Yoruba</option>
        <option value="zu">Zulu</option> 
      </select>
  </div>
  <div class="form-row">
    <label for="node-config-input-playVolumeLevel" style="white-space: nowrap;width:160px;"><i class="fa fa-volume-up" ></i> Play volume level (%)</label>
    <input type="text" id="node-config-input-playVolumeLevel" style="width:50px;" placeholder="20"/>
  </div>
  <div class="form-row">
    <label for="node-config-input-speakSlow" style="white-space: nowrap;width:100px;"><i class="fa fa-volume-up" ></i> Speak slow</label>
    <input type="checkbox" id="node-config-input-speakSlow" style="width:50px;" />
  </div>
  <div class="form-row">
    <label style="width:40%;"><i class="fa fa-server" ></i> Media server</label>
    <li>
      <label for="node-config-input-mediaServerUrl" >url</label>
      <input type="text" id="node-config-input-mediaServerUrl" placeholder="http://[ip/domain]"/>
    </li>
    <li>
      <label for="node-config-input-mediaServerPort" >listening port</label>
      <input type="text" id="node-config-input-mediaServerPort" style="width:75px;" placeholder="8098"/>
    </li>
    <li>
      <label for="node-config-input-cacheFolder" > cache folder</label>
      <input type="text" id="node-config-input-cacheFolder" placeholder="/tmp"/>
    </li>
  </div>

</script>


<!-- ###############################################################################################################-->

<script type="text/javascript">
  RED.nodes.registerType('google-notify', {
    category: 'media',
    color: '#6699ff',
    defaults: {
      server: {
        value: "",
        type: "google-notify-config"
      },
      label: {
        value: ""
      },
      playVolumeLevel: {
        value: "",
        validate: RED.validators.regex(/^(\s*|[0-9]|[1-9][0-9]|100)$/)
      },
      playMessage: {
        value: ""
      },
      language: {
        value: "config"
      },
      speakSlow: {
        value: "config"
      },
      mediaUrl: {
        value: ""
      },
      mediaType: {
        value: "mp3"
      },

    },
    inputs: 1,
    outputs: 1,
    icon: "font-awesome/fa-comments",
    label: function () {
      return this.label || this.mediaUrl || this.playMessage || this.configname || "Google notify";
    },
    oneditprepare: function () {
      var node = this;
      // var options = $("#node-input-language");
      // //Calling the API built by NodeJS code
      // options.append($("<option />").val('config').text('use config'));
      // $.getJSON('/gn-languages', function (languages) {
      //   console.log('loaded languages:', languages);
      //   $.each(languages, function (l, language) {
      //     options.append($("<option />").val(l).text(language));
      //     options.val(node.language);
      //   });
      // });

      // var optionsMediaTypes = $("#node-input-mediaType");
      // //Calling the API built by NodeJS code
      // $.getJSON('/gn-contentTypes', function (mediaTypes) {
      //   console.log('debugger')
      //   $.each(mediaTypes, function (value, mediaType) {
      //     optionsMediaTypes.append($("<option />").val(value).text(mediaType));
      //     optionsMediaTypes.val(node.mediaType);
      //   });
      // });
    },
    oneditsave: function () {
      this.language = $("#node-input-language").val();
    }
  });
</script>

<script type="text/x-red" data-template-name="google-notify">
  <div class="form-row">
    <label for="node-input-server">Cast Device</label>
    <input type="text" id="node-input-server">
  </div>

  <div class="form-row">
    <label for="node-input-label"><i class="icon-tag"></i> Label</label>
    <input type="text" id="node-input-label" style="width: 70%;">
  </div>

  <div class="form-row">
    <label for="node-input-playVolumeLevel" style="white-space: nowrap;width:160px;"><i class="fa fa-volume-up" ></i> Play volume level (%)</label>
    <input type="text" id="node-input-playVolumeLevel" style="width:80px;text-align:center;" placeholder="use config"/>
    <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.playVolumeLevel</b> [0-100]</i></p>
  </div>

  <div class="group">
    <div class="groupLabel">Play voice Message</div>
    <div class="form-row">
      <label for="node-input-playMessage"><i class="fa fa-comment" ></i></i> Text</label>
      <input type="text" id="node-input-playMessage" placeholder="voice message" style="width: 70%;">
      <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.playMessage</b> </i></p>
    </div>

    <div class="form-row">
      <label for="node-input-language"><i class="fa fa-globe"></i>  Language</label>
      <select id="node-input-language" style="width:60%;">
        <option value="config">Use config</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="am">Amharic</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bs">Bosnian</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="ceb">Cebuano</option>
        <option value="ny">Chichewa</option>
        <'option value="zh-cn"</option>Chinese Simplified</option>
        <'option value="zh-tw"</option>Chinese Traditional</option>
        <option value="co">Corsican</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="fy">Frisian</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="ha">Hausa</option>
        <option value="haw">Hawaiian</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hmn">Hmong</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="ig">Igbo</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="jw">Javanese</option>
        <option value="kn">Kannada</option>
        <option value="kk">Kazakh</option>
        <option value="km">Khmer</option>
        <option value="ko">Korean</option>
        <option value="ku">Kurdish (Kurmanji)</option>
        <option value="ky">Kyrgyz</option>
        <option value="lo">Lao</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="lb">Luxembourgish</option>
        <option value="mk">Macedonian</option>
        <option value="mg">Malagasy</option>
        <option value="ms">Malay</option>
        <option value="ml">Malayalam</option>
        <option value="mt">Maltese</option>
        <option value="mi">Maori</option>
        <option value="mr">Marathi</option>
        <option value="mn">Mongolian</option>
        <option value="my">Myanmar (Burmese)</option>
        <option value="ne">Nepali</option>
        <option value="no">Norwegian</option>
        <option value="ps">Pashto</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ma">Punjabi</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sm">Samoan</option>
        <option value="gd">Scots Gaelic</option>
        <option value="sr">Serbian</option>
        <option value="st">Sesotho</option>
        <option value="sn">Shona</option>
        <option value="sd">Sindhi</option>
        <option value="si">Sinhala</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="so">Somali</option>
        <option value="es">Spanish</option>
        <option value="su">Sundanese</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="tg">Tajik</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="uz">Uzbek</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="xh">Xhosa</option>
        <option value="yi">Yiddish</option>
        <option value="yo">Yoruba</option>
        <option value="zu">Zulu</option> 
      </select>
      <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.language</b> [en|fr|de|...]</i></p>
    </div>

    <div class="form-row">
      <label for="node-input-speakSlow" style="white-space: nowrap;"><i class="fa fa-volume-up" ></i> Speak slow</label>
      <select id="node-input-speakSlow" style="width:100px;">
        <option value="config">use config</option>
        <option value="true"> YES</option>
        <option value="false"> NO</option>
      </select>
      <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.speakSlow</b> [true|false]</i></p>
    </div>
  </div>
  <div class="group">
    <div class="groupLabel">Play media</div>
    <div class="form-row">
      <label for="node-input-mediaUrl"><i class="icon-tag"></i>Media to play</label>
      <input type="text" id="node-input-mediaUrl" placeholder="url to media to play" style="width: 70%;">
      <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.mediaUrl</b> </i></p>

    </div>

    <!-- <div class="form-row">
      <label for="node-input-mediaType" style="white-space: nowrap;"><i class="fa fa-film" ></i> Media Type</label>
      <select id="node-input-mediaType" style="width:70%;">
      </select>
      <p class="overridableInstruction"><i class="fa fa-arrow-circle-right"></i> <i>overridable with <b>msg.mediaType</b> </i></p>
    </div> -->

  </div>


</script>

<script type="text/html" data-help-name="google-notify">
  <p>With this node you can cast text notification to any google cast device (e.g. google home, chrome cast ...) </p>
  
  <h3>Inputs</h3>
      <dl class="message-properties">
          <dt>playMessage <span class="property-type">string</span></dt>
          <dd> the voice message to play </dd>
          <dt>mediaUrl <span class="property-type">string</span></dt>
          <dd> url to a media file on an external media server</dd>
          <dt>command <span class="property-type">string</span></dt>
          <dd> [stop] => stop currently played message and empty the queue with pending messages </dd>
          <dt>playVolumeLevel <span class="property-type">number</span></dt>
          <dd> [0-100] the volume level to be set while playing the voice message. This value overrides the value set in the node </dd>
          <dt>speakSlow <span class="property-type">boolean</span></dt>
          <dd> should the voice message played at slow speed </dd>
          <dt>important <span class="property-type">boolean</span></dt>
          <dd> stop currently playing voice message and play this voice message </dd>
          <dt>clearPending <span class="property-type">boolean</span></dt>
          <dd> will remove all the pending notifications from the queue </dd>

      </dl>
  
   <!-- <h3>Outputs</h3>
       <ol class="node-ports">
           <li>Standard output
               <dl class="message-properties">
                   <dt>payload <span class="property-type">string</span></dt>
                   <dd>the standard output of the command.</dd>
               </dl>
           </li>
           <li>Standard error
               <dl class="message-properties">
                   <dt>payload <span class="property-type">string</span></dt>
                   <dd>the standard error of the command.</dd>
               </dl>
           </li>
       </ol> -->
  
  <h3>Details</h3>

      <p>
      With this node you can cast text notification to any google cast device (e.g. google home, chrome cast ...) The text of the <code>msg.playMessage</code> is converted to mp3 audio and stored in the cache folder. Each cast device can have it's own local media server or the same media server can be shared over all the cast devices. Thus the google cast device plays the mp3 notification from your device hosting node-red. If the notification has to be played from an url then use <code>msg.mediaUrl</code>. The mediaUrl has priority over <code>msg.playMessage</code>.

      A played notification message is available to anyone by calling the url. 
      </p><p>
      If you play the notifiation <b> this is a test</b> then you will find a file in the cache folder named like <b>THIS_IS_A_TEST-en-slow.mp3</b>
      </p> 
      <ul>
        <li>THIS_IS_A_TEST -> notification text (msg.payload)</li>
        <li>en -> english language</li>
        <li>slow -> speak speed can be slow/normal</li>
        <li>This mp3 audio notification is then available at http://[ip]:[port]/THIS_IS_A_TEST-en-slow.mp3</li>
      </ul>
      <p>
      While playing a notificaiton new arriving notifications are queued for processing.
      </p><p>
      Important notifications are played immediatly and the current played notification is stopped and queued.
      </p>

  
  <h3>References</h3>
      <ul>
          <li><a href="https://www.npmjs.com/package/node-red-google-notify">NPM</a> repository for the node</li>
          <li><a href="https://github.com/orcema/node-red-google-notify">GitHub</a> repository for the node</li>
      </ul>
  </script>