Solved

Learn Interactive engineering diagrams


Userlevel 2
Badge +3

https://docs.cognite.com/cdf/integration/guides/contextualization/interactive_diagrams

 

How to create engineering diagram, and How get label name in diagram “23-LAHH-96138” through JavaScript.

icon

Best answer by Lars Moastuen 12 January 2023, 18:47

View original

20 replies

Userlevel 2

Please see https://docs.cognite.com/api/v1/#tag/Engineering-diagrams for details on the API for engineering diagrams. The JavaScript SDK doesn’t have dedicated endpoints for this API as its rarely used with Javascript, but it can be accessed using generic REST API functionality in CogniteClient, e.g. https://cognitedata.github.io/cognite-sdk-js/classes/cogniteclient.html#post.

Note that we do not have a dedicated file viewer component in place at this time, so you will need to write a custom document viewer on your own.

Userlevel 2
Badge +3

How to preview file in javascript

Userlevel 2

Hi Karthik. As mentioned above, we do not currently have a dedicated file viewer component. You can use https://docs.cognite.com/api/v1/#tag/Engineering-diagrams/operation/diagramConvertResults to generate an image (PNG or SVG) with annotations, but any interactions must be handled manually.

Userlevel 2
Badge +3

ok thanks

 

Userlevel 2
Badge +3

 

I need exact job id, please tell how to find job id ?

Badge +2

Hi Karthik. You are referring to the wrong job id. The job id in the file metadata is not relevant here.

/api/v1/projects/{{project}}/context/diagram/convert/:jobId 

The above endpoint will get you the results for converting an engineering diagram to an image. In order to use the above endpoint you should have already submitted a convert job via the below endpoint which will in return give you a jobId which you will be able to use with the above endpoint.  

/api/v1/projects/{{project}}/context/diagram/convert

 


​​​For more information on the endpoints you can always refer to our documentation.

Userlevel 2
Badge +3

ok, Thank

Hi Karthik. You are referring to the wrong job id. The job id in the file metadata is not relevant here.

/api/v1/projects/{{project}}/context/diagram/convert/:jobId 

The above endpoint will get you the results for converting an engineering diagram to an image. In order to use the above endpoint you should have already submitted a convert job via the below endpoint which will in return give you a jobId which you will be able to use with the above endpoint.  

/api/v1/projects/{{project}}/context/diagram/convert

 


​​​For more information on the endpoints you can always refer to our documentation.

ok, thank you so much

Userlevel 2
Badge +3
I call above API, I get this error, How to call right way?
Userlevel 4
Badge +2

Hi @Karthik Kaliyaperumal,

According to the code, some of the required parameters are missing. Could you please add those parameters? (fileId, annotation)

Best regards,
Dilini

 

Userlevel 2
Badge +3

ok, thanks

 

Userlevel 2
Badge +3

 

How do we draw a rectangle to select assets on top of P&ID diagram 

Userlevel 3

Hi Karthik, 

Have you checked out our documentation regarding P&IDs and interactive engineering diagrams? 
https://docs.cognite.com/cdf/integration/guides/contextualization/interactive_diagrams/

I think you’ll be able to find some information there.

 

Best,

Carin

Userlevel 2
Badge +3

ok thanks.

Userlevel 2
Badge +3

I am use correct job id but I facing above issue  

Userlevel 3

Hi @Karthik Kaliyaperumal, according to the error, the job ID is not a diagram detect job ID. Can you double-check that you are using a diagram detect job ID for this API call?

Userlevel 2
Badge +3

How to access this API?

Userlevel 3

Hi @Karthik Kaliyaperumal

As mentioned in the error, you are missing capabilities to use this API. Please assign them to yourself or have someone assign them to you. That should solve the issue. 

Best,

Carin

Userlevel 2
Badge +3

Is available dedicated file viewer component? 

Interaction must be handled manually → How to manually, if any NPM packages or JS code library and share reference website.

Userlevel 2
Badge +3

Is available dedicated file viewer ?  like image view or pdf file view. How preview all files?

 

Userlevel 3

Hi @Karthik Kaliyaperumal,

Unfortunately, we don’t have a dedicated file viewer component. But we are considering this work as part of H1 2024 roadmap.

 

Thanks,

Andreea. 

 

 

 

Reply