Dear Community User! We have started the migration process.
This community is now in READ ONLY mode.
Read more: Important information on the platform change.

cancel
Showing results for 
Search instead for 
Did you mean: 
SOLVED

Which JS Frameworks does CtrlX core use for it's UI?

Which JS Frameworks does CtrlX core use for it's UI?

cdutz
Long-established Member

Hi all,

I'm starting to work on building an App for usage on CtrlX Core devices. I would like it to integrate into the rest of the platform as seemlesly as possible. I know that there are many UI frameworks out there and many of them have problems behaving nicely if mixed on a single page. 

A quick look at the Developer-Tools of my browser didn't let any usual suspects grab my attention.

Chris

8 REPLIES 8

MauroRiboniMX
Contributor

Hello, 

Is over AngularJS but the template is shared just with boschrexroth app. You would like to integrate your app in the webserver? to serve it behind /myapp/ ? In which language are you creating the server?

cdutz
Long-established Member

Yeah ... so I'd love to have the UI integrate into the Web-UI of the CtrlX-core Web UI ... that you click on a button in the navigation bar on the left and then get the App content displayed in the content area underneath the top-bar.

Are there any guides on how to achieve this? I have been looking hard to find some information on how to do this, but so far couldn't find much.

cdutz
Long-established Member

Languages don't really matter for me as I sort of live with all of them ... Java, Go, JS, (Python, if I have to) ... just please no web-development in C or C++ 😉

Sgilk
Frequent Contributor

Yes, integration into the ctrlX Web UI is done via the snapcraft package-assets interface. Here is a guide on the topic as well as an example in Python.

Package Assets 

Python Webserver UI Integration 

cdutz
Long-established Member

Hi,

So I just built and installed that app and here a click on the "Python Webserver" opens a new Browser Tab with the content of the App.
I was looking for something more integrated.

Like if I click on PLC or EtherCat, I get the content of the app displayed in the main frame of the Web-Application and I still have my status bar and the navigation on the side.

Bildschirmfoto 2023-10-25 um 15.12.53.png

If the answer is simply: If you have your own App, it never gets this tightly integrated. Only Bosch internal central applications have this, then at least I can stop trying to do so 😉

Hello, 

As I stated, i know what you want to do. It is not possible. I doublecheck again with the devs but i don't think there will be the possibility!

Sgilk
Frequent Contributor

This is the last discussion I had seen on the topic and the answer was essentially "no, but we are working on it".

ctrlX WebUI Integration 

cdutz
Long-established Member

Ok ... that explains why I haven't been able to find any resources to such an integrated approach. Thanks for confirming this. Then I'll concentrate on an App with a separate UI and do a re-write once that's possible.

Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist