threejs-viewer-36

constructor(viewer) {
    this.viewer = viewer;
    this.features = null;
    this.onMqttMessageArrived = this.onMqttMessageArrived.bind(this);

    this.setUp();
}

async setUp() {
    this.features = await this.fetch('/Iot/features');

    const worker = new MqttWorker(this);
    worker.start();

    worker.addEventListener(
        MqttWorker.MQTT_MESSAGE_ARRIVED_EVENT,
        this.onMqttMessageArrived
    );

    this.mqttWorker = worker;
    this.topicPrefix = this.features.mqtt.topic;

    console.log(`MQTT Topic prefix: ${this.topicPrefix}`);
}


//!>>>>>>>>>>>>>>> Find and replace the original function -- Start
drawSensorMarkup(data) {
    if (!data || !data.objectId) return;

    const markup = document.createElement('label');
    let guid = data.code || this.guid();
    data.code = guid;
    data.mqttTopic = `${this.topicPrefix}/${data.code}`;
    data.label = 'Nan';

    console.log('Markup created:', data);

    this.mqttWorker.subscribe(data.mqttTopic);

    markup.id = `sensor-markup-${guid}`;
    markup.classList.add('markup', 'update');
    markup.setAttribute('data-code', guid);
    markup.setAttribute('data-dbId', data.id);
    markup.setAttribute('data-objectId', data.objectId);
    markup.style.display = 'block';

    this.viewer.container.appendChild(markup);

    const markupContent = document.createElement('span');
    markupContent.classList.add('temperatureBorder', 'temperatureOk', 'fas', 'fa-thermometer-empty');
    markupContent.innerHTML = data.label;//'450°C';

    markup.appendChild(markupContent);
}

onMqttMessageArrived(event) {
    const data = event.data;
    if (!data) return;

    const code = data.code;
    const val = (!isNaN(data.value)) ? data.value.toFixed(2) : 0;
    const markupContent = document.querySelector(`label.markup[data-code="${code}"] span`);

    if (!markupContent) return;

    if (val > 25) {
        markupContent.classList.remove('temperatureOk', 'fa-thermometer-empty');
        markupContent.classList.add('temperatureHigh', 'fa-thermometer-full');
    } else {
        if (markupContent.classList.contains('temperatureHigh')) {
            markupContent.classList.add('temperatureOk', 'fa-thermometer-empty');
            markupContent.classList.remove('temperatureHigh', 'fa-thermometer-full');
        }
    }

    markupContent.innerHTML = `${val}°C`;
}
//!<<<<<<<<<<<<<<< Find and replace the original function -- End