Servus … I can add a 3⃣️rd example.
A few days ago someone asked in the community, if there is a “read-aloud feature” in mapp View. Well, there is not, but using the WDTC, you can achieve that actually very easily.
Text to speech functionality is meanwhile part of every modern browser, so there is no need to bring 3rd party libraries into a widget. All you need is a “empty” widget, something like this:
'use strict';
define(['brease'], function ({
core: { BaseWidget: SuperClass },
controller: { uiController },
events: { BreaseEvent }
}) {
/**
* @class widgets.tutorial.ReadAloud
*
* @extends brease.core.BaseWidget
*
* @iatMeta category:Category
* Numeric
* @iatMeta description:de
* Read aloud a text
* @iatMeta description:en
* Read aloud a text
*/
const defaultSettings = {
value: ""
};
const WidgetClass = SuperClass.extend(function CustomWidget() {
SuperClass.apply(this, arguments);
}, defaultSettings);
const p = WidgetClass.prototype;
p.init = function () {
SuperClass.prototype.init.apply(this, arguments);
};
return WidgetClass;
});
To this widget you add a “value” property of type string, together with a setter and a “show” function. Could look like this:
/**
* @cfg {String} value=0
* @iatStudioExposed
* @bindable
* @iatCategory Data
* Represents the value in the widget
*/
/**
* @method setValue
* @iatStudioExposed
* @param {String} value
*/
p.setValue = function (value) {
this.settings.value = value;
this._showValue();
};
p._showValue = function () {
const text = this.getValue();
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
// Optionale Einstellungen
utterance.lang = 'en-US';
utterance.pitch = 2;
utterance.rate = 1;
utterance.volume = 1;
window.speechSynthesis.speak(utterance);
} else {
console.log("Browser does not support text to speech ...");
}
}
If you bind a string value to the value property of this widgets, the “_showValue” function is triggered, which will start the speech synthesis and “read-aloud” the bound string.
Using the setter, it would also be possible to trigger the function directly by invoking the setter action. The speech synthesis code you can get from the generative AI of your choice!
This widget is of course rather minimalistic, it does not even have a graphical representation. But if you just want a read-aloud function, it might be a simple and quick solution!
CHH