Help

vCortex Help

23 Dec

 

vCortex Online Documentaion

  Introduction: The vCortex module is collection of perspective components to fill the gap of missing functionality in Perspective application. The module will not be limited to current number of components and will be grow based on community requests. All components unified by global styling in the module to make all of them look and feel same way. Current Components list:

  • Rich Text Editor
  • Color Picker
  • Date Time Range Picker
  • Time Picker
  • ECharts
  • Range Slider
  • Odometer
  • Cascader

Future Planned Components:

  • Node Based Editor (Flow diagram)
  • Timeline
  • Excel Editor
  • Circular Slider

Prerequisites:

  • Ignition v8.1.20 Upward
  • Perspective Module

  Setup and Usage: After installing the module, all components will be available to use under i4Corex section in the Perspective Components Panel. For more complex components we add some variants to help user start quickly. We try to expose most of the styles of components in props section so there will be no need for debugging to find out related style classes. You can also access this help file from the Designer toolbar by clicking on “i4Cortex Help Center” icon. Trial mode: After installing the module, it can be used infinitely with all its functionality only for testing and development during 2-hour Ignition Trial Mode. Also, the i4Cortex logo overlay on top the component. When the 2-hour trial mode is finish, then it will need to be reset.   Components:

  • Color Picker:

This component is based on Ant Design 5.0 UI framework. As its name implies, by clicking on color icon, any color from a graphical popup color picker can be selected. The 3 famous color formats are with alpha channel is supported: HEX, RGBA, HSBA. Properties:

  • value: Selected color pick by user. Also, can pass color in hex format to the component as initial value. The CSS variables and color names like “red” does not supported but you can pass color in #xxxxx, rgba(), hsl() and hsv() format.
  • enabled: Whether the components disable or enable. False is disable.
  • size: Specify the color icon size. The support value is small, middle, large.
  • showText: Whether the selected color code will appear next to color icon.
  • theme: An object of styling properties which is generated from https://ant.design/theme-editor. You can copy and paste your desired style into this property or simply manipulated available options or adding them one by one. The traditional CSS styling does not work for this component, but you can use var() CSS color to make your theme dynamic base on selected Perspective Theme.

Events:

  • onActionPerformed: Triggered when user selects a color.

          event.hex: selected color code in hex string format           event.hsb: selected color code in hsb string format.

          event.rgb: selected color code in rgb string format.

Event return Example: { “hex”: “#2167c800”, “hsb”: “hsba(215, 83%, 78%, 0)”, “rgb”: “rgba(33,103,200,0)” } Future upgrades:

  • Adding color pallet
  • Gradient color
  • Cascader:
  • This component is based on Ant Design 5.0 UI framework. The main function of this component is when you need to select from a set of associated data set or when selecting from a large data set, with multi-stage classifications separated for easy selection. Such as province/city/district, company level, things classification. The component can also selection multiple items from different levels. The search option is also available at any time to filter the tree and fast selection.

Properties:

  • value: An array of selected items from the tree. Each element is another array which represents the sequence of selection in order. This prop is not bidirectional and cannot accept any initial value for the moment.
  • selectedOptions: An array of selected items which is rendered like items props.
  • multiple: If True user can select multiple items from different levels by clicking on the check box next to the item.
  • items: An array of object, each representing an item in the tree. Each item object has following properties:
    • label: Text display for this item.
    • value: Extra field use has id or data for the item. It can be string or number. For the moment, the object or array does not support.
    • children: An array of children of the current item in the tree, each representing an item in the tree.
    • disableCheckbox: If True the item can not be selected by the user.
  • placeholder: Prompt Text to display when no items are selected.
  • enabled: Whether the components disable or enable. False is disable.
  • size: Specify the color icon size. The support value is small, middle, large.
  • theme: An object of styling properties which is generated from https://ant.design/theme-editor. You can copy and paste your desired style into this property or simply manipulated available options or adding them one by one. The traditional CSS styling does not work for this component but you can use var() CSS color to make your theme dynamic base on selected Perspective Theme.

Events:

  • onActionPerformed: Triggered when an item is selected by user.

           event.value: An object of selected items from the tree. Event return example for multiple selection: [ [ “light” ], [ “bamboo”, “little”, “cards” ] ] Future upgrades:

  • Make value prop bidirectional.
  • Object type support for value property in item object.
  • Add placement option in props for specify the position of the popup.
  • Support inline view case.

   

  • Date Time Range Picker:

This component is based on Ant Design 5.0 UI framework. User can select a date range from a colander popup in one-shot. The Today date is highlighted in colander and user can select Today Date. Properties:

  • value: An object which returns user selected start and end range in JAVA date format. Also, can pass date range to update the component for initial values.
  • size: Specify the date range picker size. The support value is small, middle, large.
  • minDate: Minimum Date/time as a date object. If null, the option is disable.
  • maxDate: Maximum Date/time as a date object. If null, the option is disable.
  • format: Template for formatting date display in UI and formattedValue property. E.g: ‘YYYY/MM/DD’
  • formattedValue: An object which returns user selected start and end range in formatted string supplied by format property.
  • placeholder: Prompt Text to display when no range dates are selected.
  • locale: Code for localization of language and formatting.
  • enabled: Whether the components disable or enable. False is disable.
  • showTime: True make Date Range picker also selected time as well. In this mode user needs to select date and time for start and click OK and then select end date and time.
  • placement: The position where the selection box pops up.
  • picker: Specify the picker mode. Options are date, time, decade, month, year
  • theme: An object of styling properties which is generated from https://ant.design/theme-editor. You can copy and paste your desired style into this property or simply manipulated available options. The traditional CSS styling does not work for this component but you can use var() CSS color to make your theme dynamic base on selected Perspective Theme.

Events:

  • onActionPerformed: Triggered when a date range is selected by user.

           event.start: selected start date in string, formatted by format property.            

event.end: selected end date in string, formatted by format property. Event return Example: { “end”: “2025-01-03 06:05”, “start”: “2024-12-19 03:04” }   Future upgrades:

  • Support locale for Arabic Regions.

   

  • Time Picker:

This component is based on Ant Design 5.0 UI framework. User can select a time from a popup or select current time. For the time range selection use Date Time Range Picker Component. Properties:

  • value: returns user selected time in string, formatted by format property. Also, can pass time to update the component for initial value.
  • size: Specify the time picker size. The support value is small, middle, large.
  • format: Template for formatting time display in UI. E.g: ‘HH:mm:ss’
  • enabled: Whether the components disable or enable. False is disable.
  • placement: The position where the selection box pops up.
  • theme: An object of styling properties which is generated from https://ant.design/theme-editor. You can copy and paste your desired style into this property or simply manipulated available options. The traditional CSS styling does not work for this component but you can use var() CSS color to make your theme dynamic base on selected Perspective Theme.

Events:

  • onActionPerformed: Triggered when user selects a time.

           event.value: selected time in string formatted by format property. Event return Example: { “value”: “1:03:30” } Future upgrades:

  • Add Clear icon on UI to reset component value
  • Range Slider:

This component makes it possible to select multiple range for users in slider fashion. There are a lot of variants of this component for quick start or you can easily style it as you want. Properties:

  • values: An array of values which return the user selected values Also, can pass value to update the component for initial values.
  • step: Intervals along track at which value may be set by slider.
  • mode: define the interaction mode. Value of 1 allow handles to cross each other. Value of 2 will keep the slider from crossing. Value of 3 make the handles push able and keep them a step apart.
  • range: define the start and end range of the slider.
  • count: number of ticks on slider.
  • reversed: reversed the slider direction.
  • enabled: Whether the components disable or enable. False is disable.
  • styles: a collection of available styles for the component. Use CSS code to style each part. you can use var() CSS color to make your theme dynamic base on selected Perspective Theme.

Events:

  • onActionPerformed: Triggered when a range is selected by user.

           event.value: selected range in array format. Index 0: start range value, index 1: end range value. Event return Example: { “value”: [78, 272 ] }

  • Odometer:

Odometer make transition numbers with ease and smoothly by applying animation. When the value is changed the number starts to count up or down to reach the target value. Properties:

  • value: input target value. Component start transition numbers from previous value to the new value.
  • duration: Specify the total transition animation rate in second.
  • format: Allows to configure how the digit groups are formatted, and how many digits are shown after the decimal point.

     Format    –  Example (,ddd).dd –  12,345,678.09 ( ddd),dd –  12 345 678,09 d         –  12345678

  • type: style templates to choose from drop box list. There are 6 different styles which also can be modified by user in Perspective stylesheet.

Events: None Tips and Tricks:

  • To change the odometer size, you can simply apply font-size in the style section.
  • For changing digit width, apply text-indent in the style section.
  • As the wrapper of component is a flexbox you can apply flexbox CSS code to align the component.
  • Rich Text Editor:

This component is based on quil.js library. The component gives users an interface for editing rich text within web browsers, which presents the user with a “what-you-see-is-what-you-get” (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly in markdown component. The component also supports read only mode which is perfect for MES application to show users, the instructions or similar documents. Following format is supported: Inline

  • Background Color – background
  • Bold – bold
  • Color – color
  • Font – font
  • Inline Code – code
  • Italic – italic
  • Link – link
  • Size – size
  • Strikethrough – strike
  • Superscript/Subscript – script
  • Underline – underline

Block

  • Blockquote – blockquote
  • Header – header
  • Indent – indent
  • List – list
  • Text Alignment – align
  • Text Direction – direction
  • Code Block – code-block

Embeds

  • Formula – formula (requires KaTeX)
  • Image – image
  • Video – video

Properties:

  • editorState: Return user document content in markup encoding format. It is bidirectional so you can update the content as well. (like database)

You can copy and paste this value directly into Perspective Markdown source property with escapeHtml set to False to show it as well or copy text from word or website and paste them here.

  • placeholder: Prompt Text to display when there is no content.
  • readOnly: If True, hide the toolbar and disable editing mode.
  • editorStyle: style the editor section by adding your CSS code here
  • toolbarStyle: style the toolbar section by adding your CSS code here
  • toolbarButtonStyle: style only buttons in toolbar by adding your CSS code here
  • toolbarIconStyle: style only icons in toolbar by adding your CSS code here

Events: None   Future upgrades:

  • Add tooltip for toolbar buttons.
  • Add support for table.
  • Add support for checkbox.

   

  • Calendar:

This component is based on react-big-calendar library. The component makes possible for users to select events, resize, move, delete and add events on the calendar. Properties:

  • events: An array of event objects which display on the calendar and automatically create new event if addEventByClick is True. In this case the event object created by id: null to indicate that this new event is not save yet in database. After saving it into the database you can update the return id.

You can pass your events from database by adding a simple query binding on this property. Events Object items:

  • id: Usually use for database primary Key value. When new events are created, the value is null, so you can loop through all events and if id is equal to null, you need to insert it into the database and update the value with new given id from database.
  • title: Label or title for events that display on the Calendar.
  • allDay: A boolean value that if set to “true” will have the event ignore any time portion of the “start” and “end” properties.
  • start: A Java format date for starting of the event.
  • end: A Java format date for ending of the event.
  • style: Use for styling the event object on the Calendar. You can define the default style in the styles.newEvent property for addEventByClick: True. If you create the event by python code (like Perspective button) and leave the style empty the component will use the style definition on styles.event.
  • currentDate: The current date displayed by Calendar. It is bidirectional property so you can pass date to update the Calendar date as well. Also when user click on event this value update to the start date of the selected event.
  • addEventByClick: A Boolean value that if set to “true” will generate new event in events property each time user clicks or drag on Calendar.
  • locale: Passing a language code will change the header/footer title, grid view headers and list item headers to the selected language and date format.
  • toolbarLabel: Using to setup label for each button at the toolbar. We do not support Perspective translation for the moment so for multi-language applications, you can simply bind your label to an expression like this: translate(“Today”, {session.props.locale})
  • view: A dropdown list for selecting the Calendar view mode.
  • resizable: If True, allows for resizing of events on the Calendar. The user action will also update the related event in the events list.
  • draggable: If True, allows for dragging of events on the Calendar. The user action will also update the related event in the events list.
  • styles: Collection of all available styles for the component. You can define your own custom style for each part of the component. You can also benefit from defined CSS variables by passing them by var() function.

Events:

  • moveEvent: Triggered when an event is moved by user.
  • resizeEvent: Triggered when an event is resize by user.
  • newEvent: Triggered when an event is created by user in calendar by clicking and dragging.
  • onSelectEvent: Triggered when an event is click by user.
  • onDoubleClickEvent: Triggered when an event is double click by user.

event.value: updated/created/resize Event object plus related index in the event list. 

Event return Example: 

{   “index”: 0, “event”: {     “allDay”: false,     “end”: “2024-12-14 00:00:00”,   “id”: 1,     “start”: “2024-12-12 00:00:00”,     “style”: {       “classes”: “” },     “title”: “Rework” } }    

  • ECharts:

This component is based on Apache ECharts library. The module adds support for Apache ECharts charting library as a Perspective component. The single Perspective component provides full support for leveraging all Apache ECharts library through a simple flexible property model. For quick start we add more than 20+ variants for different type of charting system. The component also supports 3D charting as well. Due to the data source complexity for some of the charting system, you provide some ready to use JSON template for different charting in our site, so you can just copy and paste them to get quick start. Properties:

  • setOptions: The ECharts option and configuration. You can check out following link to get familiar with available option.

    https://echarts.apache.org/en/option.html Here we only review some of them which is critical for correct rendering.

  • theme: Accept Perspective dark and light theming. You must bind session.props.theme property with Persistent is set to True. This makes whenever user change Perspective Theme the chart update its color to match with the UI.

This prop also can accept Echart custom theme object. The easiest way to for configuring is go to Echart theme maker tools and after making your own theme simply export the JSON configuration and pasting it into this property. https://echarts.apache.org/en/theme-builder.html Note: For the moment Echarts doesn’t update itself when changing theme with using CSS variables colors var(). Events: click: Triggered when user clicks the data elements on chart. dblClick: Triggered when user double clicks the data elements on chart. mouseMove: Triggered when user move mouse over the data elements on chart. click: Triggered when user clicks the data elements on chart. click: Triggered when user clicks the data elements on chart.

 Event return Example:

 {   “componentType”: “series”,   “seriesType”: “bar”,   “seriesIndex”: 1, “seriesName”: “Income”, “name”: “Nov 2”,   “dataIndex”: 1,   “data”: 345,   “value”: 345,   “color”: “#37A2DA” } legendSelectChanged: Triggered when user click on the chart legend. Event return Example: { “name”: “Income” }       

Future upgrades:

  • Support auto detect of Perspective changing theme so there will be no need to bind session.props.theme to the theme property.
  • Support CSS variables var().
  • Support JavaScript code for the formatter.

  Support:

Back to list
Older Nightingale Chart

Leave a Reply

Your email address will not be published. Required fields are marked *