/*
* Licensed to the OpenAirInterface (OAI) Software Alliance under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The OpenAirInterface Software Alliance licenses this file to You under
* the OAI Public License, Version 1.1 (the "License"); you may not use this file
* except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.openairinterface.org/?page_id=698
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*-------------------------------------------------------------------------------
* For more information about the OpenAirInterface (OAI) Software Alliance:
* contact@openairinterface.org
*/
/*! \file common/utils/websrv/frontend/src/app/components/scope/scope.component.ts
* \brief: implementation of web interface frontend for oai
* \scope component web interface implementation (works with scope.component.html)
* \author: Yacine El Mghazli, Francois TABURET
* \date 2022
* \version 0.1
* \company NOKIA BellLabs France
* \email: yacine.el_mghazli@nokia-bell-labs.com francois.taburet@nokia-bell-labs.com
* \note
* \warning
*/
import {Component, EventEmitter, OnDestroy, OnInit, Output, QueryList, ViewChildren} from "@angular/core";
import {Chart, ChartConfiguration} from "chart.js";
import {BaseChartDirective} from "ng2-charts";
import {Subscription} from "rxjs";
import {HelpApi} from "src/app/api/help.api";
import {IGraphDesc, IScopeDesc, IScopeGraphType, ISigDesc, ScopeApi} from "src/app/api/scope.api";
import {arraybuf_data_offset, Message, WebSocketService, webSockSrc} from "src/app/services/websocket.service";
export interface RxScopeMessage {
msgtype: number;
chartid: number;
dataid: number;
segnum: number;
update: boolean;
content: ArrayBuffer;
}
const deserialize = (fullbuff: ArrayBuffer):
RxScopeMessage => {
const header = new DataView(fullbuff, 0, arraybuf_data_offset);
return {
// source: src.getUint8(0), //header
msgtype : header.getUint8(1), // header
chartid : header.getUint8(3), // header
dataid : header.getUint8(4), // header
segnum : header.getUint8(2), // header
update : (header.getUint8(5) == 1) ? true : false, // header
content : fullbuff.slice(arraybuf_data_offset) // data
};
}
const serialize = (msg: TxScopeMessage):
ArrayBuffer => {
const byteArray = new TextEncoder().encode(msg.content);
let arr = new Uint8Array(byteArray.byteLength + arraybuf_data_offset);
arr.set(byteArray, arraybuf_data_offset) // data
let buffview = new DataView(arr.buffer);
buffview.setUint8(1, msg.msgtype); // header
return buffview.buffer;
}
export interface TxScopeMessage {
msgtype: number;
content: string;
}
/*------------------------------------*/
/* constants that must match backend (websrv.h or phy_scope.h) */
const SCOPEMSG_TYPE_TIME = 3;
const SCOPEMSG_TYPE_DATA = 10;
const SCOPEMSG_TYPE_DATAACK = 11;
const SCOPEMSG_TYPE_DATAFLOW = 12;
const SCOPEMSG_DATA_IQ = 1;
const SCOPEMSG_DATA_LLR = 2;
const SCOPEMSG_DATA_WF = 3;
const SCOPEMSG_DATA_TRESP = 4;
/*---------------------------------------*/
@Component({
selector : "app-scope",
templateUrl : "./scope.component.html",
styleUrls : [ "./scope.component.css" ],
})
export class ScopeComponent implements OnInit, OnDestroy {
// data for scope status area
scopetitle = "";
scopesubtitle = "";
scopetime = "";
scopestatus = "stopped";
skippedmsg = "0";
bufferedmsg = "0";
// data for scope control area
startstop = "start";
startstop_color = "warn";
rfrate = 2;
data_ACK = false;
// data for Time Response chart
TRespgraph: IGraphDesc = {title : "", type: IScopeGraphType.TRESP, id: -1, srvidx: -1};
enable_TResp = false;
// data for scope iq constellation area
iqgraph_list: IGraphDesc[] = [];
selected_channels = [ "" ];
iqmax = 32767;
iqmin = -32767;
iqxmin = this.iqmin;
iqymin = this.iqmin;
iqxmax = this.iqmax;
iqymax = this.iqmax;
// data for scope LLR area
llrgraph_list: IGraphDesc[] = [];
selected_llrchannels = [ "" ];
sig_list: ISigDesc[] = [
{target_id : 0, antenna_id: 0},
{target_id : 1, antenna_id: 0},
{target_id : 2, antenna_id: 0},
{target_id : 3, antenna_id: 0},
];
selected_sig: ISigDesc = {target_id : 0, antenna_id: 0};
llrythresh = 5;
llrmin = 0;
llrmax = 200000;
llrxmin = this.llrmin;
llrxmax = this.llrmax;
// data for scope WatterFall area
WFgraph_list: IGraphDesc[] = [];
selected_WF = "";
llrchart?: Chart;
iqcchart?: Chart;
wfchart?: Chart;
trespchart?: Chart;
nwf: number[] = [ 0, 0, 0, 0 ];
// websocket service object and related subscription for message reception
wsSubscription?: Subscription;
@Output() ScopeEnabled = new EventEmitter<boolean>();
@ViewChildren(BaseChartDirective) charts?: QueryList<BaseChartDirective>;
public TRespDatasets: ChartConfiguration<"line">[ "data" ]["datasets"] = [
{
data : [],
label: "",
pointRadius: 1,
showLine: true,
animation: false,
fill: false,
pointStyle: "circle",
backgroundColor: "rgba(255,0,0,0)",
borderColor: "red",
pointBorderColor: "red",
},
];
public IQDatasets: ChartConfiguration<"scatter">[ "data" ]["datasets"] = [
{
data : [],
label: "C1",
pointRadius: 0.5,
showLine: false,
animation: false,
fill: false,
pointStyle: "circle",
// pointBackgroundColor: 'yellow',
backgroundColor: "yellow",
borderWidth: 0,
pointBorderColor: "yellow",
// parsing: false,
},
{
data : [],
label: "C2",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "cyan",
backgroundColor: "cyan",
borderWidth: 0,
pointBorderColor: "cyan",
// parsing: false,
},
{
data : [],
label: "C3",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "red",
backgroundColor: "red",
borderWidth: 0,
pointBorderColor: "red",
// parsing: false,
}
];
public LLRDatasets: ChartConfiguration<"scatter">[ "data" ]["datasets"] = [
{
data : [],
label: "LLR1",
pointRadius: 0.5,
showLine: false,
animation: false,
fill: false,
pointStyle: "circle",
pointBackgroundColor: "yellow",
backgroundColor: "yellow",
borderWidth: 0,
pointBorderColor: "yellow",
// parsing: false,
},
{
data : [],
label: "LL2",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "cyan",
backgroundColor: "cyan",
borderWidth: 0,
pointBorderColor: "cyan",
parsing: false,
},
{
data : [],
label: "LLR3",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "red",
backgroundColor: "red",
borderWidth: 0,
pointBorderColor: "red",
parsing: false,
}
];
public WFDatasets: ChartConfiguration<"scatter">[ "data" ]["datasets"] = [
{
data : [],
label: "WFblue",
pointRadius: 0.5,
showLine: false,
animation: false,
fill: false,
pointStyle: "circle",
pointBackgroundColor: "blue",
backgroundColor: "blue",
borderWidth: 0,
pointBorderColor: "blue",
// parsing: false,
},
{
data : [],
label: "WFgreen",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "green",
backgroundColor: "green",
borderWidth: 0,
pointBorderColor: "green",
// parsing: false,
},
{
data : [],
label: "WFyellow",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "yellow",
backgroundColor: "yellow",
borderWidth: 0,
pointBorderColor: "yellow",
// parsing: false,
},
{
data : [],
label: "WFred",
pointRadius: 0.5,
showLine: false,
animation: false,
pointStyle: "circle",
pointBackgroundColor: "red",
backgroundColor: "red",
borderWidth: 0,
pointBorderColor: "red",
// parsing: false,
}
];
// help text from backend
help_ack: string = "";
public TRespOptions: ChartConfiguration<"line">[ "options" ] = {
responsive : true,
// aspectRatio: 2,
plugins: {
legend: {display: true, labels: {boxWidth: 10, boxHeight: 10}},
tooltip: {
enabled: false,
},
},
};
TRespLabels: number[] = [ 0 ];
public IQOptions: ChartConfiguration<"scatter">[ "options" ] = {
responsive : true,
aspectRatio: 1,
// scales: {
// xAxes: {
// min: -5,
// max:5,
// }
// },
plugins: {
legend: {display: true, labels: {boxWidth: 10, boxHeight: 10}},
tooltip: {
enabled: false,
},
},
};
public LLROptions: ChartConfiguration<"scatter">[ "options" ] = {
responsive : true,
aspectRatio: 3,
scales: {
xAxes: {
min: 0,
},
// yAxes: {
// min: -100,
// max: 100
// }
},
plugins: {
legend: {display: true, labels: {boxWidth: 10, boxHeight: 10}},
tooltip: {
enabled: false,
},
},
};
public WFOptions: ChartConfiguration<"scatter">[ "options" ] = {
responsive : true,
aspectRatio: 5,
scales: {
xAxes: {
min: 0,
// max:800,
},
yAxes: {
min: 0,
max: 80,
reverse: true,
}
},
plugins: {
legend: {display: true, labels: {boxWidth: 10, boxHeight: 10}},
tooltip: {
enabled: false,
},
},
}
constructor(private scopeApi: ScopeApi, private wsService: WebSocketService, public helpApi: HelpApi)
{
console.log("Scope constructor ");
}
ngOnInit()
{
console.log("Scope ngOnInit ");
this.scopeApi.getScopeInfos$().subscribe(resp => { this.configScope(resp); });
this.helpApi.getHelpText("scope", "control", "dataack").subscribe(resp => { this.help_ack = resp; }, err => { this.help_ack = ""; });
}
ngOnDestroy()
{
console.log("Scope ngOnDestroy ");
this.wsSubscription?.unsubscribe();
}
DecodScopeBinmsgToString(message: ArrayBuffer): string
{
const enc = new TextDecoder("utf-8");
return enc.decode(message);
}
private configScope(resp: IScopeDesc)
{
if (resp.title === "none") {
this.ScopeEnabled.emit(false);
} else {
this.ScopeEnabled.emit(true);
this.scopetitle = resp.title;
this.iqgraph_list.length = 0;
this.llrgraph_list.length = 0;
for (let graphIndex = 0; graphIndex < resp.graphs.length; graphIndex++) {
if (resp.graphs[graphIndex].type == IScopeGraphType.IQs) {
this.iqgraph_list.push(resp.graphs[graphIndex]);
this.IQDatasets[this.iqgraph_list.length - 1].label = resp.graphs[graphIndex].title;
}
if (resp.graphs[graphIndex].type == IScopeGraphType.LLR) {
this.llrgraph_list.push(resp.graphs[graphIndex]);
this.LLRDatasets[this.llrgraph_list.length - 1].label = resp.graphs[graphIndex].title;
}
if (resp.graphs[graphIndex].type == IScopeGraphType.WF) {
this.WFgraph_list.push(resp.graphs[graphIndex]);
}
if (resp.graphs[graphIndex].type == IScopeGraphType.TRESP) {
this.TRespgraph = resp.graphs[graphIndex];
this.TRespDatasets[0].label = resp.graphs[graphIndex].title;
}
}
this.charts?.forEach((child) => {child.chart?.update()});
}
}
private ProcessScopeMsg(message: RxScopeMessage)
{
if (this.scopestatus === "starting") {
this.scopestatus = "started";
this.startstop = "stop";
this.startstop_color = "started";
}
let d = 0;
let x = 0;
let y = 0;
switch (message.msgtype) {
case SCOPEMSG_TYPE_TIME:
this.scopetime = this.DecodScopeBinmsgToString(message.content);
break;
case SCOPEMSG_TYPE_DATAFLOW:
let infobuff = this.DecodScopeBinmsgToString(message.content).split("|");
if (infobuff.length >= 2) {
this.skippedmsg = infobuff[0]!;
this.bufferedmsg = infobuff[1]!;
}
break;
case SCOPEMSG_TYPE_DATA:
const bufferview = new DataView(message.content);
if (message.update) {
console.log("Starting scope update chart " + message.chartid.toString() + ", dataset " + message.dataid.toString() + " data length: " + bufferview.byteLength);
}
switch (message.chartid) {
case SCOPEMSG_DATA_TRESP:
d = 0;
for (let i = 0; i < bufferview.byteLength; i = i + 4) {
this.TRespDatasets[0].data[d] = {x : d, y : bufferview.getFloat32(i, true)};
this.TRespLabels[d] = d;
d++;
}
if (message.update) {
this.trespchart!.update();
console.log(" TRESP view update completed " + d.toString() + " points ");
}
break;
case SCOPEMSG_DATA_IQ:
this.IQDatasets[message.dataid].data.length = 0;
for (let i = 0; i < bufferview.byteLength; i = i + 4) {
this.IQDatasets[message.dataid].data[i / 4] = {x : bufferview.getInt16(i, true), y : bufferview.getInt16(i + 2, true)};
}
if (message.update) {
this.iqcchart!.update();
}
break;
case SCOPEMSG_DATA_LLR:
this.LLRDatasets[message.dataid].data.length = 0;
let xoffset = 0;
d = 0;
for (let i = 4; i < (bufferview.byteLength - 2); i = i + 4) {
xoffset = xoffset + bufferview.getInt16(i + 2, true);
this.LLRDatasets[message.dataid].data[d] = {x : xoffset, y : bufferview.getInt16(i, true)};
d++;
}
this.LLRDatasets[message.dataid].data[d] = {x : bufferview.getInt32(0, true), y : 0};
if (message.update) {
this.llrchart!.update();
}
break;
case SCOPEMSG_DATA_WF:
if (message.update) {
if (message.segnum == 0) {
for (let i = 0; i < this.WFDatasets.length; i++) {
this.nwf[i] = 0;
this.WFDatasets[i].data.length = 0;
}
}
}
for (let i = 2; i < bufferview.byteLength - 2; i = i + 4) { // first 16 bits in buffer contains the number of points in the message
x = bufferview.getInt16(i, true);
y = bufferview.getInt16(i + 2, true);
this.wfchart!.scales.xAxes.max = bufferview.getInt16(bufferview.byteLength - 4, true);
this.WFDatasets[message.dataid].data[this.nwf[message.dataid]] = {x : x, y : y};
this.nwf[message.dataid]++;
}
if (message.update) {
this.wfchart!.update();
console.log(" WF view update completed " + d.toString() + "points, ");
}
break;
default:
break;
}
this.sendMsg(SCOPEMSG_TYPE_DATAACK, "Chart " + message.chartid.toString() + ", dataset " + message.dataid.toString());
break;
default:
break;
}
}
private sendMsg(type: number, strmessage: string)
{
this.wsService.send({source : webSockSrc.softscope, fullbuff : serialize({msgtype : type, content : strmessage})});
console.log("Scope sent msg type " + type.toString() + " " + strmessage);
}
private SendScopeParams(name: string, value: string, graphid: number): number
{
let status = 0;
this.scopeApi.setScopeParams$({name : name, value : value, graphid : graphid})
.subscribe(response => { console.log(response.status); },
err => {
console.log("scope SendScopeParams: error received: " + err);
this.StopScope();
},
() => console.log("scope SendScopeParams OK"));
return status;
}
private StopScope()
{
if (this.wsSubscription)
this.wsSubscription.unsubscribe();
this.scopestatus = "stopped";
this.startstop = "start";
this.startstop_color = "warn";
this.skippedmsg = "0";
this.bufferedmsg = "0";
}
startorstop()
{
if (this.scopestatus === "stopped") {
let status = this.SendScopeParams("startstop", "start", 0);
if (status == 0) {
this.llrchart = Chart.getChart("llr");
this.iqcchart = Chart.getChart("iqc");
this.wfchart = Chart.getChart("wf");
this.trespchart = Chart.getChart("tresp");
this.IQDatasets.forEach((dataset) => {dataset.data.length = 0});
this.LLRDatasets.forEach((dataset) => {dataset.data.length = 0});
this.WFDatasets.forEach((dataset) => {dataset.data.length = 0});
this.TRespDatasets.forEach((dataset) => {dataset.data.length = 0});
this.charts?.forEach((child, index) => {child.chart?.update()});
this.scopestatus = "starting";
this.SigChanged(this.selected_sig.target_id);
this.OnRefrateChange();
this.OnIQxminChange();
this.OnIQxmaxChange();
this.OnIQyminChange();
this.OnIQymaxChange();
this.OnYthreshChange();
this.OnLLRxminChange();
this.OnLLRxmaxChange();
this.channelsChanged(this.selected_channels);
this.llrchannelsChanged(this.selected_llrchannels);
this.WFChanged(this.selected_WF);
this.onEnableTResp();
for (let i = 0; i < this.WFDatasets.length; i++) {
this.nwf[i] = 0;
this.WFDatasets[i].data.length = 0;
}
this.wsService = new (WebSocketService);
this.wsSubscription = this.wsService.subject$.subscribe(msg => this.ProcessScopeMsg(deserialize(msg.fullbuff)),
err => {
console.error("WebSocket Observer got an error: " + err);
this.StopScope()
},
() => { console.error("WebSocket Observer completed: "); })
}
} else {
this.SendScopeParams("startstop", "stop", 0);
this.StopScope();
}
}
OnRefrateChange()
{
this.SendScopeParams("refrate", (this.rfrate * 10).toString(), 0);
}
OnLLRxminChange()
{
this.SendScopeParams("llrxmin", (this.llrxmin).toString(), 0);
}
OnLLRxmaxChange()
{
this.SendScopeParams("llrxmax", (this.llrxmax).toString(), 0);
}
OnIQxminChange()
{
this.SendScopeParams("xmin", (this.iqxmin).toString(), 0);
}
OnIQxmaxChange()
{
this.SendScopeParams("xmax", (this.iqxmax).toString(), 0);
}
OnIQyminChange()
{
this.SendScopeParams("ymin", (this.iqymin).toString(), 0);
}
OnIQymaxChange()
{
this.SendScopeParams("ymax", (this.iqymax).toString(), 0);
}
channelsChanged(titles: string[])
{
this.selected_channels = titles;
this.iqgraph_list.forEach(graph => {
const [enabled] = titles.filter(value => graph.title === value);
this.SendScopeParams("enabled", enabled ? "true" : "false", graph.srvidx);
})
}
llrchannelsChanged(titles: string[])
{
this.selected_llrchannels = titles;
this.llrgraph_list.forEach(graph => {
const [enabled] = titles.filter(value => graph.title === value);
this.SendScopeParams("enabled", enabled ? "true" : "false", graph.srvidx);
})
}
SigChanged(value: number)
{
this.selected_sig.target_id = value;
if (this.scopetitle === "gNB")
this.scopesubtitle = " - sig from UE" + value.toString() + " antenna" + this.selected_sig.antenna_id;
else
this.scopesubtitle = " - sig from gNB" + value.toString() + " antenna" + this.selected_sig.antenna_id;
;
this.SendScopeParams("TargetSelect", value.toString(), 0);
}
WFChanged(value: string)
{
this.selected_WF = value;
for (let i = 0; i < this.WFgraph_list.length; i++) {
if (this.WFgraph_list[i].title === value) {
this.SendScopeParams("enabled", "true", this.WFgraph_list[i].srvidx);
this.WFDatasets[0].label = value;
this.WFDatasets[1].label = "(>avg*2)";
this.WFDatasets[2].label = "(>avg*10)";
this.WFDatasets[3].label = "(>avg*100)";
} else {
this.SendScopeParams("enabled", "false", this.WFgraph_list[i].srvidx);
}
}
for (let i = 0; i < this.WFDatasets.length; i++) {
this.nwf[i] = 0;
this.WFDatasets[i].data.length = 0;
}
}
onEnableTResp()
{
this.SendScopeParams("enabled", this.enable_TResp.toString(), this.TRespgraph.srvidx);
}
onDataACKchange()
{
this.SendScopeParams("DataAck", this.data_ACK.toString(), 0);
}
OnYthreshChange()
{
this.SendScopeParams("llrythresh", this.llrythresh.toString(), 0);
}
RefreshTResp()
{
this.TRespDatasets[0].data.length = 0;
this.trespchart!.update();
}
RefreshIQV()
{
this.IQDatasets.forEach((dataset) => {dataset.data.length = 0});
this.iqxmin = this.iqmin;
this.iqymin = this.iqmin;
this.iqxmax = this.iqmax;
this.iqymax = this.iqmax;
this.iqcchart!.update();
}
RefreshLLR()
{
this.LLRDatasets.forEach((dataset) => {dataset.data.length = 0});
this.llrxmin = this.llrmin;
this.llrxmax = this.llrmax;
this.llrchart!.update();
}
RefreshWF()
{
this.WFDatasets.forEach((dataset) => {dataset.data.length = 0});
this.nwf = [ 0, 0, 0, 0 ];
this.wfchart!.update();
}
}