diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index d657a39a57..10240e3278 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -224,7 +224,7 @@ function scrollParents(node: Node): Node[] { function hashCode(str) { let hash = 0; let i, char; - if (str.length == 0) return hash; + if (str.length === 0) return hash; for (i = 0; i < str.length; i++) { char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index c940fc7a05..ec9a66e2f8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -294,6 +294,9 @@ export default abstract class LeafletMap { } } + setImageAlias(alias:Observable){ + } + // Polyline updatePolylines(polyData: FormattedData[][]) { @@ -323,7 +326,7 @@ export default abstract class LeafletMap { updatePolyline(key: string, data: FormattedData[], dataSources: FormattedData[], settings: PolylineSettings) { this.ready$.subscribe(() => { - this.polylines.get(key).updatePolyline(settings, data, dataSources); + this.polylines.get(key).updatePolyline(settings, data.map(el => this.convertPosition(el)), dataSources); }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 931f70f658..15b76e34a0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -23,6 +23,7 @@ export type MapSettings = { polygonKeyName: any; draggableMarker: boolean; initCallback?: () => any; + posFunction: (rigXPos, origYPos) => { x, y }; defaultZoomLevel?: number; disableScrollZooming?: boolean; minZoomLevel?: number; @@ -31,6 +32,8 @@ export type MapSettings = { lngKeyName?: string; xPosKeyName?: string; yPosKeyName?: string; + imageEntityAlias: string; + imageUrlAttribute: string; mapProvider: MapProviders; mapProviderHere: string; mapUrl?: string; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index 2eecda8136..73c53978ca 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -33,12 +33,12 @@ import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.inter import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; import { parseFunction, parseArray, parseData, safeExecute, parseWithTranslation } from '@core/utils'; import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils'; -import { forkJoin } from 'rxjs'; +import { forkJoin, of, Observable } from 'rxjs'; import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { getDefCenterPosition } from './maps-utils'; -import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models'; +import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models'; import { EntityId } from '@shared/models/id/entity-id'; -import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; +import { AttributeScope, DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { AttributeService } from '@core/http/attribute.service'; import { Type } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; @@ -48,7 +48,7 @@ import { UtilsService } from '@core/services/utils.service'; export class MapWidgetController implements MapWidgetInterface { constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) { - console.log("MapWidgetController -> constructor -> ctx", ctx) + console.log('MapWidgetController -> constructor -> ctx', ctx) if (this.map) { this.map.map.remove(); delete this.map; @@ -70,6 +70,7 @@ export class MapWidgetController implements MapWidgetInterface { } parseWithTranslation.setTranslate(this.translate); this.map = new MapClass($element, this.settings); + this.map.setImageAlias(this.subscribeForImageAttribute()); this.map.saveMarkerLocation = this.setMarkerLocation; } @@ -84,7 +85,7 @@ export class MapWidgetController implements MapWidgetInterface { } public static getProvidersSchema(mapProvider: MapProviders) { - console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider) + console.log('MapWidgetController -> getProvidersSchema -> mapProvider', mapProvider) mapProviderSchema.schema.properties.provider.default = mapProvider; return mergeSchemes([mapProviderSchema, ...Object.keys(providerSets)?.map( @@ -227,6 +228,44 @@ export class MapWidgetController implements MapWidgetInterface { this.map.onResize(); } + subscribeForImageAttribute() { + const imageEntityAlias = this.settings.imageEntityAlias; + const imageUrlAttribute = this.settings.imageUrlAttribute; + if (!imageEntityAlias || !imageUrlAttribute) { + return of(false); + } + const entityAliasId = this.ctx.aliasController.getEntityAliasId(imageEntityAlias); + if (!entityAliasId) { + return of(false); + } + const datasources = [ + { + type: DatasourceType.entity, + name: imageEntityAlias, + aliasName: imageEntityAlias, + entityAliasId, + dataKeys: [ + { + type: DataKeyType.attribute, + name: imageUrlAttribute, + label: imageUrlAttribute, + settings: {}, + _hash: Math.random() + } + ] + } + ]; + const imageUrlSubscriptionOptions = { + datasources, + useDashboardTimewindow: false, + type: widgetType.latest, + callbacks: { + onDataUpdated: (subscription, apply) => { } + } + }; + return this.ctx.subscriptionApi.createSubscription(imageUrlSubscriptionOptions, true); + } + onDestroy() { } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 94c58b6520..eee708c782 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -17,7 +17,9 @@ import L, { LatLngLiteral } from 'leaflet'; import LeafletMap from '../leaflet-map'; import { MapSettings, UnitedMapSettings } from '../map-models'; -import { aspectCache } from '@app/core/utils'; +import { aspectCache, parseFunction } from '@app/core/utils'; +import { Observable } from 'rxjs'; +import { skipLast, map, filter, switchMap } from 'rxjs/operators'; const maxZoom = 4;// ? @@ -30,6 +32,7 @@ export class ImageMap extends LeafletMap { constructor($container: HTMLElement, options: UnitedMapSettings) { super($container, options); + options.posFunction = parseFunction(options.posFunction, ['origXPos', 'origYPos']) as ((rigXPos, origYPos) => { x, y }); aspectCache(options.mapUrl).subscribe(aspect => { this.aspect = aspect; this.onResize(); @@ -38,6 +41,14 @@ export class ImageMap extends LeafletMap { }); } + setImageAlias(alias: Observable) { + alias.pipe(filter(result => result), + map(subscription => subscription.data[1])).subscribe(res => { + console.log("ImageMap -> setImageAlias -> res", res) + + }) + } + updateBounds(updateImage?, lastCenterPos?) { const w = this.width; const h = this.height; @@ -116,6 +127,7 @@ export class ImageMap extends LeafletMap { } convertPosition(expression): L.LatLng { + console.log("ImageMap -> expression", expression) return this.pointToLatLng( expression[this.options.xPosKeyName] * this.width, expression[this.options.yPosKeyName] * this.height); @@ -129,10 +141,10 @@ export class ImageMap extends LeafletMap { return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); } - /* convertToCustomFormat(position: L.LatLng): object { + convertToCustomFormat(position: L.LatLng): object { return { [this.options.xPosKeyName]: (position.lng + 180) / 360, [this.options.yPosKeyName]: (position.lat + 180) / 360 } - }*/ + } } \ No newline at end of file