A Single-Code Multi-Terminal Adaptive Compilation Method and System Based on SCSS Preprocessing

Abstract

This invention relates to a single-code multi-terminal adaptive compilation method and system based on SCSS preprocessing, relating to the field of front-end development and cross-terminal adaptation technology. The method includes: S10: collecting display device size and screen usage; S11: obtaining the number of page split screens and the size of each split screen area based on screen usage and preset split screen specifications; S12: obtaining the page window size through the display device size, the number of page split screens, and the size of each split screen area; S13: obtaining the window type based on the page window size and preset window category breakpoints; S14: obtaining adaptation variables based on the window type; S15: combining the adaptation variables with a preset adaptation base library to obtain device adaptation code and uploading it. This application improves the efficiency and consistency of code adaptation.

Description

Technical Field

[0001] This invention relates to the field of front-end development and cross-terminal adaptation technology, and in particular to a single-code multi-terminal adaptive compilation method and system based on SCSS preprocessing. Background Technology

[0002] With the development of front-end technology and the diversification of terminal devices, various terminals such as large screens, PCs, and mobile devices are widely used in various web applications and visualization systems. Multi-terminal adaptation has become a core requirement for front-end development.

[0003] In traditional responsive development, developers are forced to create a "one-size-fits-all" layout for the limited desktop screen space required for multi-device adaptation. Once the page needs to display correctly on mobile phones, tablets, and laptops simultaneously, developers must repeatedly fine-tune the width values ​​of elements until the effect meets expectations, handle overflow, and fix misaligned floating elements.

[0004] In the process of responsive development, traditional responsive development is difficult to meet the differentiated adaptation needs of various terminals. Developers spend a lot of time debugging width values ​​and the debugging methods are complex and rely on the experience of the developers, which reduces the efficiency and consistency of code adaptation. Summary of the Invention

[0005] To improve the efficiency and consistency of code adaptation, this invention provides a single-code multi-terminal adaptive compilation method and system based on SCSS preprocessing.

[0006] In a first aspect, the present invention provides a single-code multi-terminal adaptive compilation method and system based on SCSS preprocessing, employing the following technical solution: A single-code multi-terminal adaptive compilation method based on SCSS preprocessing includes: S10: Collect data on display device size and screen usage; S11: Based on screen usage and preset split-screen specifications, obtain the number of page split screens and the size of the split-screen area; S12: The page window size is obtained by the display device size, the number of page splits, and the size of the split area; S13: Obtain the window type based on the page window size and the preset window category breakpoints; S14: Obtain the adaptation variables based on the window type; S15: Combine the adaptation variables with the preset adaptation base library to obtain the device adaptation code and upload it.

[0007] By adopting the above technical solution, the collected screen usage and screen splitting specifications are used to obtain the number of page splits and the size of the splitting area. This is then combined with the collected display device size to obtain the page window size. The window size is then classified according to window category breakpoints to obtain the window type. Finally, the device adaptation code is obtained by combining the adaptation variables and the adaptation base library. This enables a single codebase to adapt to multiple device terminals, shortens the debugging time for developers, and allows the requirement of different terminals to be met by debugging only a single piece of code, thereby improving the efficiency and consistency of code adaptation.

[0008] Optionally, methods after obtaining the device adaptation code include: S20: Generate movable detection points based on the page window size and move them within the page window size at a preset detection speed to obtain the movement trajectory; S21: Guide the robotic arm to perform a click action on a movable detection point based on the movement trajectory and collect the click parameters; S22: The click position is obtained by clicking parameters and the preset display coordinate system; S23: Obtain the actual page window based on the click location and the page window size; S24: Obtain the dynamic adaptation code based on the actual page window and upload it.

[0009] By adopting the above technical solution, a movable detection point generated based on the page window size moves within the page window size at a detection speed to obtain a movement trajectory. Based on the movement trajectory, the robot arm clicks on the movable detection point and collects the click parameters. The click parameters are combined with the display coordinate system to obtain the click position, and then the actual page window size is obtained by combining it with the page window size and updating the page window size. This enables the page window size to adapt when the display screen malfunctions, improving the efficiency of code adaptation.

[0010] Optionally, specific methods for obtaining the actual page window include: S30: Obtain the re-examination range based on the click location and the preset detection range; S31: The horizontal display is obtained based on the inspection range, movable detection points, preset inspection speed and preset horizontal inspection direction; S32: Update the click parameters based on the horizontal display status, and retrieve the horizontal vanishing point and horizontal appearing point from the click parameters; S33: The horizontal length of the defect is obtained based on the horizontal vanishing point, the horizontal appearing point, and the display coordinate system; S34: Select the longest transverse defect from the transverse lengths of the defects, and obtain the transverse edge length based on the transverse vanishing point and transverse appearing point corresponding to the longest transverse defect and the display device size, respectively. S35: Obtain the display type based on the window category breakpoint; S36: Obtain the actual window type based on the horizontal edge length and the window classification breakpoint; S37: Compare the actual window type with the display type to obtain the actual edge length by combining the horizontal edge length, and then update the actual page window with the actual edge length, or re-execute steps S31 to S34 according to the preset vertical review direction to obtain the vertical edge length. S38: Update the actual window type with the vertical edge length and re-execute the steps of S37. Based on the comparison results, update the actual page window or update the dynamic adaptation code with the longest horizontal defect.

[0011] By adopting the above technical solution, a detection range is defined for the clicked position to obtain the review range. Based on the review range, movable detection points, review speed and movement direction, the horizontal and vertical display situation is obtained. The actual page window or dynamic adaptation code is updated according to the display situation. When the display screen is abnormal, the window can automatically calculate the appropriate page opening position and size or rearrange the text when the display screen is damaged, thereby improving the adaptability and accuracy of the code to various terminals when encountering abnormal situations.

[0012] Optional methods for updating the dynamic adaptation code based on the longest lateral defect include: S40: The transverse critical line is obtained by combining the transverse occurrence point and transverse disappearance point corresponding to the longest transverse defect; S41: Based on S37, the longest longitudinal defect is obtained during the process of obtaining the longitudinal edge length. The longitudinal critical line is obtained by the longitudinal appearance point and the longitudinal disappearance point corresponding to the longest longitudinal defect. S42: The intersection point is obtained based on the adjacent transverse critical line and the longitudinal critical line; S43: Obtain the length of the text space and the abnormal vertical length based on the length of the intersection points of adjacent horizontal and vertical lines; S44: The number of abnormal text lines is obtained by comparing the abnormal vertical length with the text line height retrieved from the adapted font format; S45: Obtain the abnormal adaptation code by using the length of space in the text and the number of lines of abnormal text, and update the dynamic adaptation code.

[0013] By adopting the above technical solution, the horizontal appearance point or disappearance point corresponding to the longest horizontal defect is obtained as the horizontal critical line. The intersection point is obtained by combining the horizontal critical line with the vertical critical line obtained by repeating the steps. The length of the intersection point is used as the length of the text space and the abnormal vertical length. The dynamic adaptation code is updated accordingly, which reduces the situation where the page window cannot be displayed normally when the display screen has display abnormalities, and improves the efficiency and responsiveness of code adaptation.

[0014] Optional methods for obtaining the length of text spaces include: S50: Retrieve the detected character width and character spacing from the adapted font format; S51: The critical characters are obtained based on the character spacing, the detected character width, and the horizontal critical line; S52: The damage range is obtained based on the intersection point of the transverse critical line, the longitudinal critical line, and the critical line. S53: Determine if the critical text overlaps with the damaged area. If they overlap, update the text space length based on the critical text and the damaged area. S54: If the critical text does not coincide with the damaged area, then collect the text content of the page; S55: Update the text space length based on the page text content and the extent of damage.

[0015] By adopting the above technical solution, the detected character width and character spacing in the adapted font are retrieved and then combined with the horizontal critical line to obtain the critical character. Based on the intersection of the horizontal and vertical critical lines, the damage range is obtained. The overlap between the critical character and the damage range is judged. If they overlap, the character space length is updated. If they do not overlap, the page text content is collected and combined with the damage range to update the character space length, so as to achieve the complete presentation of the critical character and improve the accuracy of obtaining the character space length.

[0016] Optionally, the specific methods of S55 include: S60: Obtain the text edge outline based on the page text content and the adapted font style; S61: Obtain the cropped image based on the character edge contour, the extent of damage, and the detected character width; S62: Obtain similar characters based on the outline of the characters and the preset Chinese character library; S63: Combine similar characters with cropped images to obtain the similarity of Chinese characters; S64: Update the text space length when the similarity of Chinese characters exceeds a preset similarity threshold.

[0017] By adopting the above technical solution, the text edge outline is obtained by combining the page text content and the adapted font form. Then, the cropped image is obtained based on the text edge outline, the damaged range and the detected character width. Similar characters are obtained by comparing the text edge outline with the Chinese character library. The text space length is updated by comparing the similar characters with the cropped image to obtain the similarity and similarity threshold. This reduces the situation where the abnormal display page and text overlap, which may cause users to misjudge, and improves the accuracy of page display.

[0018] Optionally, methods to obtain the dynamically adapted code include: S70: Collect page close time and click dwell time; S71: Obtain the actual page content based on the page closing time and the preset unit detection time; S72: The actual clickable range is determined based on the actual page content and the page window size; S73: The final click location is obtained by combining the actual click range, click dwell time, and unit detection time; S74: Obtain the location of the browsed content based on the final click location and the actual page content; S75: Data collection history - Open device; S76: Re-detect the location by checking the historical device opening and browsing content locations; S77: The location upload will be re-detected to update the dynamic adaptation code.

[0019] By adopting the above technical solution, the actual page content is obtained by collecting the page closing time and the unit detection time. Based on the actual page content and the page window size, the actual click range is obtained. The final click position is obtained by combining the actual click range, the click dwell time and the unit detection range. The browsing content position is obtained by matching the final click position with the actual page content. The historical opening devices and browsing content positions are collected to obtain the re-detection position and upload and update the dynamic adaptation code, thereby reducing the fixedness of the dynamic adaptation code and improving the efficiency of code adaptation.

[0020] Optionally, methods for obtaining the re-detection location include: S80: Acquire images of the ocular surface to obtain the pupil's line of sight center and the length of the eye axis; S81: Use the center of the pupil's line of sight as the reference line for vertical eyeball detection; S82: The user's visual axis is obtained by combining the detection baseline and the axial length; S83: The browsing gaze position is obtained based on the user's visual axis, unit detection time, and click dwell time; S84: Determine whether the browsing line of sight is within the device display size; S85: If the browsing gaze position is within the device display size, then the browsing gaze position will be used as the re-detected position and uploaded; S86: If the browsing viewpoint is not within the device display size, select the center area of ​​the actual page content as the re-detection position and upload it.

[0021] By adopting the above technical solution, an ocular surface image is acquired, and a vertical eyeball detection baseline is drawn at the center of the pupil's line of sight. The detection baseline is combined with the axial length of the eye obtained from the ocular surface image to obtain the user's visual axis. Based on the user's visual axis, the unit detection time, and the click dwell time, the browsing gaze position is obtained, and it is determined whether it is within the device display size. If it is, the browsing gaze position is used as the re-detection position and uploaded. If it is not, the center range of content in the actual page content is selected as the re-detection position and uploaded. This reduces the situation where the system assumes the user is viewing the page due to a long click dwell time but no viewing of the page, thus improving the accuracy of obtaining the re-detection position.

[0022] Optionally, methods following the acquisition of ocular surface images include: S90: Collect mouse operation data and retrieve historical operation data; S91: Determine the browsing gaze position based on mouse operation and historical operation data; S92: Obtain the text that the user has read based on the user's viewing position and the actual page content; S93: Update and re-detect the position based on the user's read text, window type, and text layout style; S94: The location upload will be re-detected to update the dynamic adaptation code.

[0023] By adopting the above technical solution, historical operation data is retrieved from the collected mouse operation data. The browsing gaze position is obtained based on the historical operation data and the mouse operation data. The browsing gaze position is compared with the actual page content to obtain the user's read text. Then, the position is updated and re-detected based on the user's read text, window type, and text layout style, and uploaded to update the dynamic adaptation code. When the device cannot obtain the user's ocular surface image, the user's browsing position is determined based on the user's habits, which improves the accuracy of obtaining the re-detected position and thus improves the efficiency of code adaptation and user browsing.

[0024] Secondly, this application provides a single-code multi-terminal adaptive compilation system based on SCSS preprocessing, which adopts the following technical solution: A single-code multi-terminal adaptive compilation system based on SCSS preprocessing includes: The acquisition module is used to acquire information such as display device size, screen usage, page closing time, eye surface images, and mouse operation data. The memory is used to store a program of a single-code multi-terminal adaptive compilation method based on SCSS preprocessing; The processor is used to load and execute programs stored in memory.

[0025] In summary, this application includes at least one of the following beneficial technical effects: 1. The collected screen usage and split-screen specifications are used to obtain the number of page split screens and the size of the split-screen area. This is then combined with the collected display device size to obtain the page window size. The window size is classified according to window category breakpoints to obtain the window type. Combined with adaptation variables and adaptation base library, the device adaptation code is obtained. This enables a single code to adapt to multiple device terminals, shortens the debugging time for developers, and allows the code to meet the needs of different terminals with only one piece of code to be debugged, thus improving the efficiency and consistency of code adaptation. 2. Define a detection range for the clicked position to obtain the review range. Based on the review range, movable detection points, review speed and movement direction, obtain the horizontal and vertical display status. Update the actual page window or update the dynamic adaptation code according to the display status. When the display screen is abnormal, the window can automatically calculate the appropriate page opening position and size or rearrange the text when the display screen is damaged, improving the adaptability and accuracy of the code to adapt to multiple terminals when encountering abnormal situations. 3. Combine the text content on the page with the adapted font to obtain the text edge outline, and obtain the cropped image by comparing it with the damaged area and the detected character width. Based on the text edge outline, compare it with the Chinese character library to obtain similar characters. Update the text space length by comparing the similar characters with the cropped image to obtain the Chinese character similarity and similarity threshold. This reduces the situation where the abnormal display page and text overlap, which may cause users to misjudge, and improves the accuracy of page display. Attached Figure Description

[0026] Figure 1 This is a flowchart of a single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to an embodiment of the present invention; Figure 2 This is a flowchart of a page window adaptive method according to an embodiment of the present invention. Detailed Implementation

[0027] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments.

[0028] Reference Figure 1 This application discloses a single-code multi-terminal adaptive compilation method based on SCSS preprocessing, including the following steps: S10: Collect data on the size of the display device and screen usage.

[0029] Display device size refers to the screen size of the device used by the user when opening the design page. The display device size is retrieved directly from the device system.

[0030] Screen usage refers to the screen usage when a user opens a design page. For example, if another page is already occupying the screen when the user opens the page, the system will retrieve the open pages on the screen. If an open page exists on the screen, its location will be retrieved, and the distribution of that location will be used as the screen usage.

[0031] S11: Based on screen usage and preset split-screen specifications, obtain the number of page split screens and the size of the split-screen area.

[0032] Split-screen specifications are the types of screens (the styles of screen division) that are pre-defined by technicians for display devices, such as dual-screen, four-grid split-screen, etc.

[0033] The number of split-screen pages refers to the number of pages that can be opened when the display is in split-screen mode.

[0034] Split-screen area size refers to the area of ​​the display screen occupied by the opened pages when the screen is split.

[0035] Based on the screen usage information obtained in S10, when multiple pages are simultaneously displayed on the screen, it is determined whether the size of the pages conforms to the split-screen specification. If it does, it means that the display is in a split-screen state. The number of pages divided in the split-screen specification matched by the current screen usage is taken as the number of page splits, and the area after a single split is taken as the size of the split-screen area.

[0036] S12: The page window size is obtained by the display device size, the number of page splits, and the size of the split area.

[0037] The page window size refers to the size of the page that can be expanded when the design page is opened. It is calculated by summing the number of page splits and the size of their corresponding split areas. The area occupied by the opened page on the screen is then calculated by the difference between the display device size and the area occupied by the opened page. The continuity of the remaining area is then determined. If the remaining area is a vertical or horizontal split within the split-screen specification, the area of ​​all remaining splits is used as the page window size. If the remaining area is a diagonal split, one of these is selected as the page window size. Finally, the size of the continuous remaining area or one of the split areas is used as the page window size.

[0038] S13: Obtain the window type based on the page window size and the preset window category breakpoints.

[0039] Window classification breakpoints are pre-set values ​​by technicians to classify window sizes. For example, if the screen width is ≥1280px, the device is a large-screen terminal; if the screen width is 1024px ≤ 1280px, the device is a PC terminal; and if the screen width is 280px ≤ 1024px, the device is a mobile terminal.

[0040] Window type refers to the category to which a window belongs after being classified according to its size. That is, the window type is assigned to a specific type based on the size of the page window, that is, whether the window type belongs to a large screen terminal, a PC terminal, or a mobile terminal.

[0041] By matching the page window size with the segmentation of window category breakpoints, the category of the window matched based on the page window size is taken as the window type.

[0042] S14: Obtain the adaptation variables based on the window type.

[0043] Adaptation variables refer to variable parameters that are transformed into unique code that can be input into the system and adapted to the user's device.

[0044] The variable parameters are obtained by inputting the window type into the variable lookup table, and these parameters are used as the adaptation variables. The variable lookup table stores the variable parameters corresponding to different window types one-to-one. The parameters in the variable lookup table are preset by those skilled in the art according to the actual situation.

[0045] S15: Combine the adaptation variables with the preset adaptation base library to obtain the device adaptation code and upload it.

[0046] The adaptation base library is a code library that is pre-defined by technical personnel and contains code that can change parameters.

[0047] Device adaptation code refers to static adaptation code that is automatically generated based on variables for different device systems.

[0048] The SCSS source code is obtained by extracting adaptation variable parameters and inputting them into the adaptation base library. Then, the SCSS preprocessor converts the SCSS source code into a CSS file specific to the current terminal. This file is then used as device adaptation code and uploaded to the system to run, implementing the process of adapting the page window when the page is opened. CSS stands for Cascading Style Sheets, a style language used to control the appearance and formatting of web page content (such as text, layout, color, font, etc.). SCSS is a CSS preprocessor that extends programming features such as variables, nesting, and functions. It needs to be compiled into regular CSS to run in a browser. The SCSS preprocessor is a compilation tool that compiles the SCSS source code into CSS code that the browser can recognize.

[0049] Reference Figure 2 The methods after obtaining the device adaptation code include: S20: Generate movable detection points based on the page window size and move them within the page window size at a preset detection speed to obtain the movement trajectory.

[0050] Test code refers to a piece of code triggered when a display malfunctions and the image is unclear, but the user still wants to view the page content. The trigger condition for this code is that the user actively presses the test button. The test code contains parameter settings for various controllable test points, including: movement speed, movement direction, and movement method.

[0051] A movable detection point is a black dot generated by the test code. It has a fixed size and can change its speed according to the actual situation. For example, when roughly determining whether there is a position that cannot be displayed on the screen, the movable detection point will move faster. When it is necessary to determine the outline or exact position of the position that cannot be displayed, the movable detection point will move slower to facilitate the user's next action, such as clicking.

[0052] The movement trajectory refers to the path that the dot moves on the display screen.

[0053] The movable detection point generated by the test code moves at a detection speed within the size of the page window, and the camera on the robotic arm captures the movement of the movable detection point and uses the movement of the movable detection point as the movement trajectory.

[0054] S21: Guide the robotic arm to perform a click action on a movable detection point based on the movement trajectory and collect the click parameters.

[0055] Click parameters refer to the position on the display screen that the robotic arm clicks based on the movement of the dot.

[0056] A robotic arm is a device equipped with a camera that can capture the entire display screen and allow users to click on the screen.

[0057] The movement of movable detection points is driven by code, allowing a robotic arm to capture the movement process of these points using its camera. The robotic arm is controlled to click on the display screen when the movable detection points are incomplete, broken, flickering, or disappearing. The click location is where the movable detection points cannot be displayed correctly on the screen. After the robotic arm clicks the display screen based on the movable detection points, the capacitance and resistance of the display surface are measured. The touch chip detects the touch location based on the capacitance and resistance of the display surface and uses this detected touch location as the click parameter.

[0058] S22: The click position is obtained by clicking parameters and the preset display coordinate system.

[0059] Display coordinate system refers to the coordinate system established by the system to obtain the various positions of the display screen on the device, which can convert the positions on the display screen into coordinate parameters that can be input into CSS code.

[0060] Click location refers to the coordinates of the click obtained by the system after the user clicks on a location on the display screen.

[0061] By matching the collected click parameters with the display coordinate system, the click position is converted into the corresponding coordinate position in the system, and this coordinate position is used as the click position.

[0062] S23: Obtain the actual page window based on the click location and the page window size.

[0063] The actual page window refers to the window size of the design page that can be opened normally after removing the faulty areas of the display screen. The area not clicked is defined as the fault range of the display screen by clicking on the location. This fault range is then removed from the page window size, and the remaining window size used to expand the design page is taken as the actual page window. Specific analysis steps are in S30 to S38. This step enables the code to, when a problem occurs with the display screen, instruct the robotic arm to click on any point within the disappearing area of ​​the captured movable detection points based on the detected physical defects. In this embodiment, the robotic arm's clicking behavior only begins when the user's display screen malfunctions and they actively want the page text to adapt.

[0064] S24: Obtain the dynamic adaptation code based on the actual page window and upload it.

[0065] Dynamic adaptation code is generated in real time by JavaScript. It can change the window's fit in real time based on the user's behavior. It can generate code in real time to adjust the layout of page content to avoid areas that cannot be displayed properly on the screen.

[0066] The actual page size obtained in S23 is used as the new page window size. Based on the new page window size, code is obtained to adapt to the page. This code is then used as dynamic adaptation code and uploaded to the system to achieve page re-adaptation.

[0067] The specific methods to obtain the actual page window include: S30: Obtain the re-examination range based on the click location and the preset detection range.

[0068] The detection range is the size of the area selected on the display screen by the technicians in advance.

[0069] The scope of the review refers to the range of display screens that require further monitoring.

[0070] By selecting a range on the display screen centered on the click location, a range containing the click location and matching the size of the detection range is obtained, and this range is used as the re-examination range.

[0071] S31: The horizontal display is obtained based on the re-inspection range, movable detection points, preset re-inspection speed, and preset horizontal re-inspection direction.

[0072] The re-inspection speed is a speed preset by technicians to facilitate the robot arm to accurately locate the defect when the movable inspection point moves within the re-inspection range. This speed is added to the test code in advance by technicians. The defect location is the position where the display screen cannot display content normally or the location of the movable inspection point.

[0073] The lateral inspection direction is the direction of movement of the movable detection point, which is preset by the technicians. The movable detection point moves horizontally in an S-shaped motion.

[0074] The horizontal display status refers to the display status of the movable detection point when it moves horizontally. That is, whether the movable detection point is always visible when it moves horizontally, or whether it disappears for a period of time and then reappears. This status is determined by the system after the robot clicks, based on the two clicks, and the position of the two clicks is taken as the position where the movable detection point disappears or reappears.

[0075] The test code allows the movable detection point to move within the review range at the review speed and in the horizontal review direction. The display of the movable detection point during this movement is then used as the horizontal display.

[0076] S32: Update the click parameters based on the horizontal display status, and retrieve the horizontal vanishing point and horizontal appearing point from the click parameters.

[0077] The vanishing point is the point where the detection point disappears when it enters the display area where there is an abnormality.

[0078] A horizontally appearing point refers to a point that changes from being invisible to appearing when the detection point leaves the display area where the display is malfunctioning.

[0079] Based on the display of the movable detection point as it moves, the robot arm clicks on the position where the movable detection point disappears and reappears, and the position clicked by the robot arm is used as the new click parameter.

[0080] S33: The horizontal length of the defect is obtained based on the horizontal vanishing point, the horizontal appearing point, and the display coordinate system.

[0081] The defect lateral length refers to the length value corresponding to when the movable detection point disappears from the display screen.

[0082] The retrieved vanishing and emerging points are placed into the display coordinate system to obtain the corresponding coordinate positions of the two points. The distance between them on the x-axis is obtained based on the absolute value of the difference between the coordinate positions on the x-axis, and the distance is used as the transverse length of the defect.

[0083] S34: Select the longest transverse defect from the transverse lengths of the defects, and obtain the transverse edge length based on the transverse vanishing point and transverse appearing point corresponding to the longest transverse defect and the display device size.

[0084] The longest transverse defect refers to the longest transverse length of a defect.

[0085] The horizontal edge length refers to the distance between the horizontal vanishing point and the horizontal emerging point from the display screen border or split screen boundary.

[0086] The longest horizontal defect is selected from the longest horizontal defects. The distance from the horizontal vanishing point and the horizontal appearing point of the longest horizontal defect to the device edge or split-screen boundary is then used as the horizontal edge length. Using the y-axis values ​​of the coordinates corresponding to the horizontal vanishing and appearing points as a condition, coordinates on the device border or split-screen boundary line with the same y-axis value are found. The absolute value of the difference between the x-axis value of this coordinate and the x-axis values ​​of the horizontal vanishing and appearing points is then used as the horizontal edge length.

[0087] S35: Obtain the display type based on the window category breakpoint.

[0088] Display type refers to the window classification breakpoint that categorizes different window sizes into different types. There are three specific types: large-screen terminal, PC terminal, and mobile terminal. Refer to S13 for specific differentiation methods.

[0089] S36: Obtain the actual window type based on the horizontal edge length and the window classification breakpoint.

[0090] The actual window type refers to the window size that can be opened to display the design page even after the display screen malfunctions. It is then categorized based on the size of the openable window. The horizontal edge length is used as the window width, and this width is compared with window classification breakpoints to determine the window size's type. This type is then designated as the actual window type.

[0091] S37: Compare the actual window type with the display type to obtain the actual edge length by combining the horizontal edge length, and then update the actual page window with the actual edge length, or re-execute steps S31 to S34 according to the preset vertical review direction to obtain the vertical edge length.

[0092] The actual edge length refers to the longest horizontal edge length selected from the horizontal edge lengths.

[0093] The longitudinal edge length refers to the length between the two points and the edge corresponding to the longest disappearance length when the movable detection point moves in the vertical direction.

[0094] By comparing the actual window type with the display type, if the actual window type is within the display type (the actual window type matches one of the display types), the longer horizontal edge length is used as the actual edge length, and then the actual edge length is used as the page width to update the actual page window. If the actual window type is not within the display type, the movement direction of the movable detection point is changed so that it moves in the vertical re-inspection direction, and the series of steps S31 to S34 are re-executed to obtain a series of parameters including the vertical display status, vertical vanishing point, vertical appearance point, defect vertical length, longest vertical defect, and vertical edge length.

[0095] S38: Update the actual window type with the vertical edge length and re-execute the steps of S37. Based on the comparison results, update the actual page window or update the dynamic adaptation code with the longest horizontal defect.

[0096] The window type is obtained by using the vertical edge length as the window width of the page window size. The obtained window type is compared with the display type. If the window type belongs to the display type, the longer vertical edge length is used as the window width to update the actual page window. If the window type does not belong to the display type, the dynamic adaptation code is updated with the longest horizontal defect. The specific update method is described in S40 to S45.

[0097] Specific methods for updating dynamic adaptation code based on the longest lateral defect include: S40: The transverse critical line is obtained by combining the transverse occurrence point and transverse vanishing point corresponding to the longest transverse defect.

[0098] The transverse critical lines are two perpendicular lines passing through the transverse appearance point and the transverse disappearance point. The transverse critical lines are formed by drawing two vertical lines through the two endpoints of the longest transverse defect, namely the transverse appearance point and the transverse disappearance point.

[0099] S41: Based on S37, the longest longitudinal defect is obtained during the process of obtaining the longitudinal edge length. The longitudinal critical line is obtained by using the longitudinal appearance point and the longitudinal disappearance point corresponding to the longest longitudinal defect.

[0100] The longest longitudinal defect refers to the path length that takes the longest to disappear when a movable detection point moves in the vertical direction.

[0101] The longitudinal critical line refers to two horizontal lines passing through the longitudinal emergence point and the longitudinal vanishing point.

[0102] By drawing two horizontal lines through the two endpoints of the longest longitudinal defect, namely the longitudinal appearance point and the longitudinal disappearance point, these two horizontal lines are taken as the longitudinal critical lines.

[0103] S42: The intersection point is obtained based on the adjacent transverse critical line and the longitudinal critical line.

[0104] An intersection point is the point where two straight lines intersect. The intersection point is defined as the point where the four straight lines obtained from S40 and S41 intersect and overlap.

[0105] S43: The length of the text space and the abnormal vertical length are obtained by taking the length of the intersection point of adjacent horizontal and vertical lines.

[0106] The text space length refers to the spacing required for text to display correctly when the screen cannot display the content properly.

[0107] Abnormal vertical length refers to the vertical length by which text cannot be displayed correctly when the display screen cannot display content properly.

[0108] The length of the text space is taken from the intersection of the two vertical critical lines, and the length of the abnormal vertical length is taken from the intersection of the two horizontal critical lines.

[0109] S44: The number of abnormal text lines is obtained by comparing the abnormal vertical length with the text line height retrieved from the adapted font format.

[0110] Text line height refers to the vertical height of the text. Abnormal text line count refers to the number of text lines that need to be adjusted when a display error occurs. This is calculated by dividing the abnormal vertical length by the retrieved text line height, and the integer part of the quotient is selected as the abnormal text line count.

[0111] S45: Obtain the abnormal adaptation code by using the length of space in the text and the number of lines of abnormal text, and update the dynamic adaptation code.

[0112] Anomaly adaptation code refers to additional code added based on specific parameters when a special display condition occurs. This allows the text to be displayed correctly even when the screen is in an abnormal position, as the window type is not within the display's allowed range, even if the screen is small enough that the text is displayed correctly. A special case occurs when there is a defect on the screen, and the window type corresponding to the area on the left, right, top, and bottom of that defect, which corresponds to a window type outside the allowed range for normal page expansion, is not within the display's allowed range.

[0113] When the system detects the length of spaces in text and the number of abnormal text lines, it treats them as specific variables. The specific variables are then input into the added code to obtain the abnormal adaptation code. The abnormal adaptation code is then added to the dynamic adaptation code to update the dynamic adaptation code.

[0114] Methods for obtaining the length of text spaces include: S50: Retrieve the detected character width and character spacing from the adapted font format.

[0115] The measured character width refers to the width of a single font on the actual page.

[0116] Character spacing refers to the distance between each character.

[0117] By retrieving the width of the font within the design page from the adapted font format, the font width is used as the font width, and the spacing between the characters is retrieved and used as the character spacing.

[0118] S51: The critical characters are obtained based on the character spacing, the detected character width, and the horizontal critical line.

[0119] Critical text refers to text that coincides with the horizontal critical line. When the page window size is fixed, the character spacing and detected character width in the adapted font style will be fixed, thus selecting the text that is on the horizontal critical line and using it as critical text.

[0120] S52: The damage range is obtained based on the intersection of the transverse critical line, the longitudinal critical line and the point of intersection.

[0121] The damaged area refers to the region where the display screen cannot display normally. It is defined as the rectangular area enclosed by the horizontal critical line, the vertical critical line, and the intersection of the two lines.

[0122] S53: Determine if the critical text overlaps with the damaged area. If they overlap, update the text space length based on the critical text and the damaged area.

[0123] Determine the overlap between the critical text and the damaged area. If the critical text overlaps with the damaged area, remove the critical text that overlaps with the horizontal critical line. Use the sum of the detected character width and the character spacing of the removed Chinese characters to expand the character space length to update the character space length.

[0124] S54: If the critical text does not overlap with the damaged area, then collect the text content of the page.

[0125] Page text content refers to all the text within the designed page. If the critical text does not overlap with the damaged area, the layout of each text on the page in the data collection system, the position of each text when the page is fixed, and the structural lines of the text are integrated into the page text content.

[0126] S55: Update the text space length based on the page text content and the extent of damage.

[0127] The specific implementation method for updating the length of text spaces based on the text content and the extent of damage is shown in S60 to S64.

[0128] The specific methods of S55 include: S60: Obtain the text edge outline based on the page text content and the appropriate font style.

[0129] The text edge outline refers to the edge outline of text near its horizontal emergence point or vanishing point. By analyzing the text content on the page, the text closest to the horizontal emergence point or vanishing point is identified as the broken connecting text. The edge outline of the broken connecting text is then obtained by comparing its size and type with the font in the appropriate font format. This edge outline is then used as the text edge outline.

[0130] S61: Obtain the cropped image based on the character edge contour, the extent of damage, and the detected character width.

[0131] Image capture refers to acquiring images captured by the camera on the robotic arm. By capturing the content of the display screen page through the camera, the captured content is cropped within the detected character width range, and this cropped content is used as the captured image. The cropped image contains the positional relationship between the character edge outlines and the damaged area, which is used in S52 to determine the similarity of Chinese characters.

[0132] S62: Obtain similar characters based on the outline of the characters and the preset Chinese character library.

[0133] A Chinese character library is a database pre-set by technicians to store the various characters within a design page.

[0134] Similar characters are those whose edges and outlines are similar to those of other characters.

[0135] Similar characters are selected by comparing their outlines with Chinese characters in a character set.

[0136] S63: Combine similar characters with cropped images to obtain the similarity of Chinese characters.

[0137] Chinese character similarity refers to the degree of similarity between similar characters and characters in a captured image that are close to their horizontal appearance and disappearance points. The similarity is determined by referring to a similarity lookup table between the similar characters and the captured image, and this similarity is used as the Chinese character similarity score. The similarity lookup table stores a one-to-one similarity value between similar characters and characters in the captured image. The parameters in the similarity lookup table are preset by those skilled in the art based on the actual situation.

[0138] S64: Update the text space length when the similarity of Chinese characters exceeds a preset similarity threshold.

[0139] The similarity threshold is a pre-set limit set by technicians to determine whether the similarity of Chinese characters will cause users to make incorrect recognition. By comparing the similarity with the similarity threshold, if the similarity is higher than the similarity threshold, broken connecting characters in S60 are removed. The detection width and character spacing of the removed broken connecting characters are then used to expand the character space length to update the character space length.

[0140] After obtaining the dynamic adaptation code, the methods include: S70: Collect the time it takes for the page to close and the time it stays on click.

[0141] Page close time refers to the exact moment when a user closes the page. This is determined by retrieving the page close time from the system's page execution code.

[0142] Click-and-dwell time refers to the length of time a user's mouse cursor or finger remains on a page while browsing it. Click-and-dwell time is obtained by measuring the results of dynamically adapted code.

[0143] S71: Obtain the actual page content based on the page closing time and the preset unit detection time.

[0144] The unit testing time is the length of time that needs to be analyzed, which is preset by the technicians.

[0145] Actual page content refers to the text content of the page as it appears when the design page is opened.

[0146] By detecting the page status within a time period by moving backward from the page closing time as the node, the status of the corresponding page is taken as the actual page content.

[0147] S72: The actual clickable range is obtained based on the actual page content and the page window size.

[0148] The actual click area refers to the position of the mouse cursor within the actual page content when the user is browsing the page. It is defined as the location of the mouse cursor or finger touching the actual page content within the page window size.

[0149] S73: The final click position is obtained by combining the actual click range, click dwell time, and unit detection time.

[0150] The final click location refers to the position of the mouse cursor or finger touch on the last page viewed by the user when closing the page. It is determined by comparing the duration of each click location within the actual click range obtained in S72 within a unit detection time, and selecting the page location with the longest click dwell time as the final click location.

[0151] S74: The location of the viewed content is obtained based on the final click location and the actual page content.

[0152] The browsed content location refers to the position of the text content corresponding to the final click location. It is determined by matching the final click location with the corresponding text content within the actual page content.

[0153] S75: Open the device to collect history.

[0154] Historical access devices refer to all devices a user has used to access the page. The device a user last used to access the page is collected from their account information as historical access devices.

[0155] S76: The location is re-detected by checking the location of the device opened and the content browsed in the past.

[0156] Re-detection location refers to the position of the text content that a user should be redirected to when opening the page on another device. This is achieved by obtaining the window type from the historical device access history, thus determining the page layout style and compatible font. Based on this, the specific text content and position are determined within the browsing content area, and this text content and position are then used as the re-detection location.

[0157] S77: The location upload will be re-detected to update the dynamic adaptation code.

[0158] By inputting the re-detected position as a variable into the system to update the dynamic adaptation code, the code, upon receiving the variable, will change the initial page content of the opened page to the text content at the re-detected position.

[0159] Methods for obtaining the re-detection location include: S80: Acquire images of the ocular surface to obtain the pupil's line of sight center and the length of the eye axis.

[0160] An ocular surface image refers to an image captured by a device with a built-in camera that shows the pupil and axial length of the eye.

[0161] The pupil's visual center refers to the central position of the pupil.

[0162] Axial length refers to the horizontal length of the eye from the inner corner to the outer corner.

[0163] The model inputs the position and size of the pupil from the acquired ocular surface image into the visual field center model and outputs the visual field center corresponding to that pupil, which is then used as the pupil's visual field center. The visual field center model is a model that, when inputted by someone skilled in the art, allows them to input the pupil's position and size and output the coordinates of the visual field center.

[0164] S81: Use the center of the pupil's line of sight as the baseline for testing the vertical eyeball.

[0165] The detection baseline refers to the ray projected from the center of the pupil's line of sight. A ray perpendicular to the eyeball, originating from the center of the pupil's line of sight, is used as the detection baseline.

[0166] S82: The user's visual axis is obtained by combining the detection baseline and the axial length.

[0167] The user's visual axis refers to the actual axis along which the user looks at the display screen. The angle between the detection baseline and the user's visual axis is obtained by referring to an angle correction table based on the eye axis length. This table stores correction angles that correspond one-to-one with the eye axis length, and the parameters in the table are preset by those skilled in the art based on actual conditions. The correction angle obtained from the table is added to the angle between the detection baseline and the horizontal direction to obtain a new ray corresponding to this angle. This ray is then used as the user's visual axis.

[0168] S83: The browsing gaze position is obtained based on the user's visual axis, unit detection time, and click dwell time.

[0169] The browsing gaze position refers to the location of the content the user is looking at before closing the page. It is determined by the intersection of the user's visual axis and the display screen within a unit of detection time, and by the intersection point where the click dwell time is longer.

[0170] S84: Determine whether the viewer's line of sight is within the device's display size.

[0171] By determining whether the browsing gaze position is within the device display size, the content of S85 and S86 is obtained based on the determination result.

[0172] S85: If the browsing gaze position is within the device display size, then the browsing gaze position will be used as the re-detection position and uploaded.

[0173] When the browsing gaze position is within the device display size, the browsing gaze position is used as the re-detected position and uploaded to the system to update the dynamic adaptation code.

[0174] S86: If the browsing viewpoint is not within the device display size, select the center area of ​​the actual page content as the re-detection position and upload it.

[0175] When the user's line of sight is outside the device's display size, the position corresponding to the center of the actual page content is used as the re-detected position and uploaded to the system to update the dynamic adaptation code. In this example, a pop-up window will appear before steps S80 to S86 are implemented, and image acquisition will only proceed after the user's consent is obtained.

[0176] Methods following the acquisition of ocular surface images include: S90: Collect mouse operation data and retrieve historical operation data.

[0177] Mouse operation refers to how the user uses the mouse, such as clicking the browsing location sequentially while browsing, or pressing and holding the mouse and dragging the cursor selection bar until the content of the paragraph or sentence is finished before releasing the mouse.

[0178] Historical operation data refers to a user's browsing habits when reading a page, whether they prefer click-based or drag-and-drop reading.

[0179] By retrieving users' habitual reading and browsing habits from their account information and using these habits as historical operation data, and by collecting users' actual reading habits from the design page and using these habits as mouse operation data, we can identify these historical operation patterns.

[0180] S91: The browsing gaze position is obtained based on mouse operation and historical operation.

[0181] The actual browsing position refers to the user's actual browsing position before closing the page. This is determined by comparing mouse actions with historical actions; if they match, the position of the text content dragged or clicked by the user is taken as the actual browsing position.

[0182] S92: Obtain the text that the user has read based on the user's viewing position and the actual page content.

[0183] The text that a user has read refers to the text content corresponding to the locations where the user's gaze has been dragged or clicked. The process involves matching the user's visual focus with the actual text position on the page to obtain the corresponding content, which is then recorded as the user's read text.

[0184] S93: Update and re-detect the position based on the text the user has read, window type, and text layout style.

[0185] Based on the text the user has already read, the window type when the user opens the page again, and the corresponding text layout style, the position of the text content that has not been read but needs to be displayed is used as the new re-detection position to update the re-detection position.

[0186] S94: The location upload will be re-detected to update the dynamic adaptation code.

[0187] The updated re-detected location is uploaded to the system to update the dynamic adaptation code again.

[0188] Based on the same inventive concept, embodiments of the present invention provide a single-code multi-terminal adaptive compilation system based on SCSS preprocessing, comprising: The acquisition module is used to acquire information such as display device size, screen usage, page closing time, eye surface images, and mouse operation data. The memory is used to store a program of a single-code multi-terminal adaptive compilation method based on SCSS preprocessing; The processor is used to load and execute programs stored in memory.

[0189] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0190] The above description is merely a preferred embodiment of the present invention. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be noted that for those skilled in the art, any improvements and modifications made without departing from the principles of the present invention should also be considered within the scope of protection of the present invention.

Claims

1. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing, characterized in that, include: S10: Collect data on display device size and screen usage; S11: Based on screen usage and preset split-screen specifications, obtain the number of page split screens and the size of the split-screen area; S12: The page window size is obtained by the display device size, the number of page splits, and the size of the split area; S13: Obtain the window type based on the page window size and the preset window category breakpoints; S14: Obtain the adaptation variables based on the window type; S15: Combine the adaptation variables with the preset adaptation base library to obtain the device adaptation code and upload it.

2. The single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 1, characterized in that, After obtaining the device adaptation code, the methods include: S20: Generate movable detection points based on the page window size and move them within the page window size at a preset detection speed to obtain the movement trajectory; S21: Guide the robotic arm to perform a click action on a movable detection point based on the movement trajectory and collect the click parameters; S22: The click position is obtained by clicking parameters and the preset display coordinate system; S23: Obtain the actual page window based on the click location and the page window size; S24: Obtain the dynamic adaptation code based on the actual page window and upload it.

3. The single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 2, characterized in that, The specific methods to obtain the actual page window include: S30: Obtain the re-examination range based on the click location and the preset detection range; S31: The horizontal display is obtained based on the inspection range, movable detection points, preset inspection speed and preset horizontal inspection direction; S32: Update the click parameters based on the horizontal display status, and retrieve the horizontal vanishing point and horizontal appearing point from the click parameters; S33: The horizontal length of the defect is obtained based on the horizontal vanishing point, the horizontal appearing point, and the display coordinate system; S34: Select the longest transverse defect from the transverse lengths of the defects, and obtain the transverse edge length based on the transverse vanishing point and transverse appearing point corresponding to the longest transverse defect and the display device size, respectively. S35: Obtain the display type based on the window category breakpoint; S36: Obtain the actual window type based on the horizontal edge length and the window classification breakpoint; S37: Compare the actual window type with the display type to obtain the actual edge length by combining the horizontal edge length, and then update the actual page window with the actual edge length, or re-execute steps S31 to S34 according to the preset vertical review direction to obtain the vertical edge length. S38: Update the actual window type with the vertical edge length and re-execute the steps of S37. Based on the comparison results, update the actual page window or update the dynamic adaptation code with the longest horizontal defect.

4. The single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 3, characterized in that, Specific methods for updating dynamic adaptation code based on the longest lateral defect include: S40: The transverse critical line is obtained by combining the transverse occurrence point and transverse disappearance point corresponding to the longest transverse defect; S41: Based on S37, the longest longitudinal defect is obtained during the process of obtaining the longitudinal edge length. The longitudinal critical line is obtained by the longitudinal appearance point and the longitudinal disappearance point corresponding to the longest longitudinal defect. S42: The intersection point is obtained based on the adjacent transverse critical line and the longitudinal critical line; S43: Obtain the length of the text space and the abnormal vertical length based on the length of the intersection points of adjacent horizontal and vertical lines; S44: The number of abnormal text lines is obtained by comparing the abnormal vertical length with the text line height retrieved from the adapted font format; S45: Obtain the abnormal adaptation code by using the length of space in the text and the number of lines of abnormal text, and update the dynamic adaptation code.

5. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 4, characterized in that, Methods for obtaining the length of text spaces include: S50: Retrieve the detected character width and character spacing from the adapted font format; S51: The critical characters are obtained based on the character spacing, the detected character width, and the horizontal critical line; S52: The damage range is obtained based on the intersection point of the transverse critical line, the longitudinal critical line, and the critical line. S53: Determine if the critical text overlaps with the damaged area. If the critical text overlaps with the damaged area, update the text space length based on the critical text and the damaged area. S54: If the critical text does not coincide with the damaged area, then collect the text content of the page; S55: Update the text space length based on the page text content and the extent of damage.

6. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 5, characterized in that, The specific methods of S55 include: S60: Obtain the text edge outline based on the page text content and the adapted font style; S61: Obtain the cropped image based on the character edge contour, the extent of damage, and the detected character width; S62: Obtain similar characters based on the outline of the characters and the preset Chinese character library; S63: Combine similar characters with cropped images to obtain the similarity of Chinese characters; S64: Update the text space length when the similarity of Chinese characters exceeds a preset similarity threshold.

7. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 1, characterized in that, After obtaining the dynamic adaptation code, the methods include: S70: Collect page close time and click dwell time; S71: Obtain the actual page content based on the page closing time and the preset unit detection time; S72: The actual clickable range is determined based on the actual page content and the page window size; S73: The final click location is obtained by combining the actual click range, click dwell time, and unit detection time; S74: Obtain the location of the browsed content based on the final click location and the actual page content; S75: Data collection history - device access; S76: Re-detect the location by checking the historical device opening and browsing content locations; S77: The location upload will be re-detected to update the dynamic adaptation code.

8. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 7, characterized in that, Methods for obtaining the re-detection location include: S80: Acquire images of the ocular surface to obtain the pupil's line of sight center and the length of the eye axis; S81: Use the center of the pupil's line of sight as the reference line for vertical eyeball detection; S82: The user's visual axis is obtained by combining the detection baseline and the axial length; S83: The browsing gaze position is obtained based on the user's visual axis, unit detection time, and click dwell time; S84: Determine whether the browsing line of sight is within the device display size; S85: If the browsing gaze position is within the device display size, then the browsing gaze position will be used as the re-detection position and uploaded; S86: If the browsing position is not within the device display size, select the center area of ​​the actual page content as the re-detection position and upload it.

9. A single-code multi-terminal adaptive compilation method based on SCSS preprocessing according to claim 8, characterized in that, Methods following the acquisition of ocular surface images include: S90: Collect mouse operation data and retrieve historical operation data; S91: Determine the browsing gaze position based on mouse operation and historical operation data; S92: Obtain the text that the user has read based on the user's viewing position and the actual page content; S93: Update and re-detect the position based on the user's read text, window type, and text layout style; S94: The location upload will be re-detected to update the dynamic adaptation code.

10. A single-code multi-terminal adaptive compilation system based on SCSS preprocessing, characterized in that, include: The acquisition module is used to acquire information such as display device size, screen usage, page closing time, eye surface images, and mouse operation data. A memory for storing a program that implements a single-code multi-terminal adaptive compilation method based on SCSS preprocessing as described in any one of claims 1 to 9; The processor is used to load and execute programs stored in memory.

Images