Copyright©2025 Yonyou Group All rights reserved.Without the written permission of Yonyou Group, no part or whole of the content of this user manual may be copied, reproduced, translated, or reduced for any purpose. The content of this user manual may change without notice, please be aware.Please note: The content of this user manual does not represent the commitments made by Yonyou.Operation GuideWhat is IoT Magic CubeThe IoT Cube is a data visualization development tool that uses a canvas layout and drag-and-drop construction. The development results are WYSIWYG (What You See Is What You Get), suitable for configuration monitoring dashboards, production progress dashboards, remote device monitoring, and other business scenarios.Functional FeaturesNo-Code Development: Drag-and-drop development, seamlessly integrated with the device access capabilities of the IoT platform. Device data display and reverse control can be achieved through component configuration.Multiple publishing methods: various ways to publish including app building, page sharing, third-party integration, etc.Multi-end display: Supports data display on mobile and PC, allowing users to monitor devices anytime and anywhere.Personalized Extension: Provide component extension specifications to support the ecosystem in rapidly developing custom components to meet project personalization needs.Rich Templates: Based on best practices for multi-industry configuration monitoring, a wealth of page templates has been accumulated.Function ListData Source Management1. Device Data Source (Time Series Data, Device Model, Device Alarms, Tag Dimensions, Archive Information, IoT Basics); 2. Relational Database Data Source: MySQL; 3. Supports configuration of third-party data sources, supports JDBC and ODBC data connections, supports domestic databases like Dameng;Component Library1. Supports drag-and-drop creation of components; 2. Supports line charts, bar charts, ranking charts, tables, and other statistical analysis components; 3. Supports basic graphic elements like wireframe components and text; 4. Supports tabs and WEB containers;Component Interaction1. Supports component linkage and page navigation; 2. Supports data-driven component animations; 3. Supports hide/show functionality;Graphic Element Management1. Pre-set over 500 basic device graphic element components; 2. Supports building custom graphic element components based on basic and industry graphic elements, and supports component sharing within tenants;Sharing and Integration1. Supports page sharing; 2. Supports third-party page integration, supports single sign-on configuration;App Publishing1. Custom menus, supports multi-level menu configuration; 2. Supports permission control on menu nodes, achieving personalized access;Component Extension1. Supports extension development for data conversion, filtering, and restructuring of chart components; 2. Supports extension of styles and animations for chart components, supports Echart extension components;Application ScenarioTypical application scenarios of the IoT Cube include:Process Monitoring: Based on the characteristics of the production process, configure events at key process control points to automatically obtain comprehensive production data through event-driven mechanisms. Establish a production process benchmark model based on real-time massive production big data, combined with practical production experience. This allows for the real-time perception of process parameters and anomalies, enabling the timely detection and handling of management anomalies and production process anomalies during production.When the monitored key parameters or key indicators exhibit anomalies or reach alert conditions, the system can quickly switch to the corresponding data analysis page for key parameters or abnormal indicators, providing management with detailed data analysis and drill-down display services. At the same time, it can retrieve information such as the location of on-site equipment as needed, quickly pinpointing the source of the problem, and promptly driving the resolution of issues through the abnormal handling workflow and timely feedback.Production Management: By integrating the basic information of work orders, accurately binding work orders with equipment production, and collecting production information data such as output data, material consumption data, and production rhythm generated by the equipment, it provides data support for intelligent scheduling, work order reporting, and material management in the MES system. At the same time, work orders are dispatched to the on-site equipment management end based on the production plan, forming a data closed-loop application of project planning - work order dispatch - work order reporting. This helps enterprises achieve dynamic control and optimization improvement in the production execution process.Product AdvantagesRich Templates: After years of project practice and accumulation by Yonyou, we provide best practices for equipment abnormal event management, process monitoring, and other business scenarios in the intelligent manufacturing industry, along with pre-configured general workflows and data reporting systems.Real-time display: Using real-time data push technology, the server actively sends data to the client instead of the client periodically requesting (polling). Real-time data push technology ensures that the client receives the latest data updates in a timely manner, which is crucial for applications that require quick responses, such as process monitoring, equipment alarms, etc.High security: Access data transmission using secure agreements such as TLS/SSL to enhance the security of data transmission.Stable and Reliable: Supports an automatic reconnection mechanism, ensuring data continuity even in unstable network conditions.Fast Page Rendering: By utilizing server-side rendering, browser cache policies, CDN, and other technologies, it greatly reduces user wait times and provides a smoother and more intuitive interaction experience.Basic ConceptsVisual ApplicationThe dashboard generated based on data is the visual application.Data SourceThe source of original data, supporting various types of data sources: Supports built-in data sources: IoT Basics: A time-series database organized by devices; Archive Information: Basic archive information with device lists, gateway lists, and channel lists; Tag Dimension: An analytical data source categorized by labels such as device status, device faults, device maintenance, and process quality, allowing for online analysis aggregation at the organizational dimension; Device Model: A data source constructed from the same type of device model, allowing for online analysis aggregation at the organizational dimension. Analysis Dimension: Analysis constructed within the device model, stored in the relational database as a data source. Real-time Alarm: Supports real-time alarms for devices, determining whether there are relevant alarm messages on the device; External Data Source: When building visual applications, device context data and business static data can be obtained through data source configuration. For example: basic archive data of devices, device operation and maintenance data, spare parts management data, etc. Supports the following data sources: MySQL: Oracle:Application DesignerThe application designer is used to publish the user's data portal. It supports defining the application's menu directory, menu permissions, and login page.Large Screen DesignerThe large screen designer is a tool for developing large screens, with main functions including canvas editing, component library, toolbar, and component configuration. 1. Canvas editing is a WYSIWYG (What You See Is What You Get) open method, which is the primary visual functional area. The canvas allows for page layout and arrangement of the size and position of various charts. 2. Component library includes a complete list of all charts for building visual pages, including custom components and system preset components. By selecting the corresponding component, it can be added to the canvas. 3. Toolbar provides commonly used tools such as quick alignment, formatting brush, and preview save function.Graphic ElementQuick StartBuild a Large Screen Using a Blank PageBefore creating the dashboard, you need to create workspaces for different business segments by creating a new App. Within the workspace, you can manage the dashboard pages.Click on New, select to use a blank analysis, and enter the large screen Designer. After entering the Designer,1.Page SettingsIn the page settings, you can set the size of the canvas. If you can determine the physical screen size of the projection venue, it is recommended that you first understand the physical screen size of the display site before starting the design, and build the large screen according to the screen size on site. You can also construct the large screen according to the common 1920*1080 size and choose a resolution adaptation scheme. The system will scale and stretch the size of the chart elements and the relative positions of the elements in the screen according to the resolution ratio based on the actual screen size after projection and the width of the design canvas.2.Visual ContextThe background image is particularly important in visual presentations, as it can greatly enhance the visual effect of the interface. You can choose from the system's preset layout backgrounds or upload a project-specific image background on the page.Use the system's preset layout components. In the Component Library, select a layout component that aligns with your business context and design style, and drag it onto the canvas. Double-click to modify the title text. In project practice, to prevent misoperations that may reduce chart development efficiency, it is recommended to add layout components only after the page drawing is complete.You can also upload a background image that better fits the customer's business context in the page configuration. Click on the background image to upload a picture.3.Page RenderingPage drawing is done in a WYSIWYG manner on the canvas for large screen development. You need to select appropriate graphic components and data components from the Component Library based on the large screen design draft or industrial configuration design page to build the large screen.5.1 Data component data, text components are the most commonly used components for displaying point data. Select the conditional text from the Component Library and drag the component onto the page.5.2 In the Data Source, select the devices to be displayed, and drag the device field into the data configuration area.5.3 Adjust the data display accuracy according to project requirements.5.4 Adjust the style of the component. In the image below, to better display the data on a dark background, the font color is adjusted to white.5.5 According to the above method, add point descriptions to the data by selecting the regular text component from the top.5.6 Fill in the component description in the content area of the component style configuration and adjust the component color. The default color of the component on the canvas is dark, and after dragging it onto the canvas, it may be difficult to select the component due to the background color being the same as the component color. You can switch to layer management, select the component by its name, and then configure the component.5.7 Select the device graphic, drag the graphic component onto the canvas, and you need to adjust the size and location of the graphic compon...
