Algorithm method for color change of automotive trim atmosphere lamp

Abstract

The invention belongs to the technical field of automotive trim atmosphere lamps, and discloses an automotive trim atmosphere lamp color change algorithm method, which comprises the following steps of: 1, preparing five pictures in advance, marking the five pictures as No.1, No.2, No.3, No.4 and No.5, and respectively performing colors of red, purple, blue, yellow and green; according to the scheme, based on the color mixing principle, only four color pictures are used, the transparency of the pictures is adjusted, the different transparent pictures are overlapped to generate different color pictures relative to the overlapped pictures, and the difference between different colors is transited by using the sliding block, so that the effect of generating multiple different color pictures by using a small number of pictures is achieved; according to the technical scheme, the code development amount and the picture loading amount are reduced, the page performance slowing caused by excessive picture loading is reduced, the website loading speed is increased, the load of a server is reduced, the visual effect is enriched, meanwhile, the scheme is simple and not prone to making mistakes, and the stability of color change of the automobile atmosphere lamp is guaranteed.

Description

Technical Field

[0001] The invention belongs to the technical field of automobile interior atmosphere lights, and in particular to an algorithm method for color change of automobile interior atmosphere lights. Background Art

[0002] The color change of car interior ambient lights refers to the technical solution implemented on car websites to display different colors of car interior ambient lights. In order to show the changes of different ambient lights, it is necessary to put the ambient light pictures of all colors in the page content, and then display the ambient lights of different colors according to different selections. Currently, most of the methods on the market to achieve this effect are to switch pictures of different colors to achieve the color change effect of the ambient lights.

[0003] The existing algorithm for changing the color of car ambient lights mainly relies on Javascript to achieve the effect of switching pictures. The implementation method is to use Javascript to first record the currently displayed color picture, and then change the picture reference address of the corresponding color when switching to the corresponding color, and then obtain the corresponding color picture address when switching to the next color. Using Javascript to modify the picture address means that the browser needs to load the contents of all pictures in advance. In order to achieve switching between different colors, all pictures need to be arranged according to color, so as to find the corresponding picture address when switching colors. Only in this way can it be guaranteed that all the colors of the ambient lights can be displayed. Such an algorithm for changing the color of the ambient lights not only needs to load and arrange the contents of all pictures, but also the method is complicated, so it needs to be improved. Summary of the invention

[0004] The purpose of the present invention is to provide an algorithm method for color change of automobile interior atmosphere lights to solve the problems raised in the above background technology.

[0005] To achieve the above object, the present invention provides the following technical solution: an algorithm method for color change of automotive interior atmosphere lights, comprising the following steps:

[0006] Step 1: Prepare 5 pictures in advance, labeled 1, 2, 3, 4, and 5, with colors of red, purple, blue, yellow, and green respectively;

[0007] Step 2: Set the HTML structure as follows:

[0008] <input type＝range min＝0max＝100step＝0.1>

[0009] <img src＝red.jpg>

[0010] <img src＝purple.jpg>

[0011] <img src＝blue.jpg>

[0012] <img src＝yellow.jpg>

[0013] <img src＝green.jpg>

[0014] Use CSS to set the style attribute of each image to position: absolute, so that image 2 covers image 1, image 3 covers image 2, image 4 covers image 3, and image 5 covers image 4. Then set the transparency of red image 1 to opacity: 1, and the transparency of the remaining images to opacity: 0.

[0015] The code is as follows:

[0016] <img src＝red.jpg style＝"position:absolute；opacity:1”>

[0017] <img src＝purple.jpg style＝"position:absolute；opacity:0”>

[0018] <img src＝blue.jpg style＝"position:absolute；opacity:0”>

[0019] <img src＝yellow.jpg style＝"position:absolute；opacity:0”>

[0020] <img src＝green.jpg style＝"position:absolute；opacity:0”>

[0021] Step 3: Set up an array and record the initial transparency of all images in the order of [1,0,0,0,0]. At this time, only the red image content at the bottom can be seen;

[0022] Step 4: Set the slider sliding range to every 25 as a unit, and set four sliding ranges respectively, 0-25, 25-50, 50-75, 75-100;

[0023] Step 5: Record the sliding progress while sliding the slider. Set the transparency of purple picture No. 2 to increase from 0% to 4% for each sliding unit until the transparency reaches 100% when sliding to 25. The picture gradually changes from red to dark red, and then to purple. The value of the array changes from [1,0,0,0,0] to [1,0.5,0,0,0] to [1,1,0,0,0]. At this time, picture No. 2 gradually covers picture No. 1, and the color of the interior ambient light changes from red to dark red, and finally to purple.

[0024] Step 6: Continue sliding the slider. When the sliding range is between 25-50, change the transparency of picture 3. Set the transparency of picture 3 to increase by 4% for every 1 unit of sliding. When sliding to 50, the transparency of picture 3 is 100%. The array value changes from [1,1,0,0,0] to [1,1,0.5,0,0] to [1,1,1,0,0]. At this time, the color of the interior ambient light changes from purple to cyan and finally to blue.

[0025] Step 7: Continue sliding the slider. When the sliding range is between 50-75, change the transparency of picture 4. Set the transparency of picture 4 to increase by 4% for every 1 unit of sliding. When sliding to 75, the transparency of picture 4 is 100%. The array value changes from [1,1,1,0,0] to [1,1,1,0.5,0] to [1,1,1,1,0]. At this time, the color of the interior ambient light changes from blue to mung bean color and finally to yellow.

[0026] Step 8: Continue sliding the slider. When the sliding range is between 75-100, gradually change the transparency of Picture No. 5. Set the transparency of Picture No. 5 to increase by 4% for every 1 unit of sliding. When it slides to 100, the transparency of Picture No. 5 is 100%. The value of the array changes from [1,1,1,1,0] to [1,1,1,1,0.5] to [1,1,1,1,1]. At this time, the color of the interior atmosphere light on the page changes from yellow to light green, and finally to green.

[0027] Preferably, the five pictures in step one are of the same size and have different colors.

[0028] Preferably, the HTML structure described in step 2 includes two parts: a header area and a body area, and the HTML structure is mainly organized by three tags.

[0029] Preferably, the CSS described in step 2 consists of three main parts: a selector, a property, and a value, and the property is the control core of the CSS style.

[0030] Preferably, the array described in step three is a composite data type, and the array consists of a series of elements of the same type.

[0031] Preferably, the slider described in step 4 is a common interface element that appears on the car screen, allowing the driver or passenger to intuitively adjust the color and brightness of the ambient light.

[0032] Preferably, the sliding ranges described in step 4 are four, and the four sliding ranges are respectively provided with four different prompt sounds.

[0033] Preferably, the sliding progress described in step five is provided with scale lines, and the distance between the scale lines corresponds to one unit.

[0034] Preferably, the position: absolute in step 2 means that the image will be displayed in an absolutely positioned manner.

[0035] Compared with the prior art, the present invention has the following beneficial effects:

[0036] This solution is based on the principle of color mixing and only uses 4 color pictures. By adjusting the transparency of the pictures, different transparent pictures are superimposed on each other to produce pictures of different colors relative to the superimposed pictures. By using a slider to transition the differences between different colors, the effect of using a small number of pictures to produce a variety of different color pictures is achieved, which reduces the amount of code development and picture loading, reduces the slow page performance caused by excessive picture loading, improves the website loading speed, reduces the server load, and enriches the visual effects. At the same time, the solution is simple and not prone to errors, ensuring the stability of the color changes of the car atmosphere lights. DETAILED DESCRIPTION

[0037] Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in the field without making any creative work shall fall within the scope of protection of the present invention.

[0038] An embodiment of the present invention provides an algorithm method for changing the color of an automobile interior atmosphere light, comprising the following steps:

[0039] Step 1: Prepare 5 pictures in advance, labeled 1, 2, 3, 4, and 5, with colors of red, purple, blue, yellow, and green respectively;

[0040] Step 2: Set the HTML structure as follows:

[0041] <input type＝range min＝0max＝100step＝0.1>

[0042] <img src＝red.jpg>

[0043] <img src＝purple.jpg>

[0044] <img src＝blue.jpg>

[0045] <img src＝yellow.jpg>

[0046] <img src＝green.jpg>

[0047] Use CSS to set the style attribute of each image to position: absolute, so that image 2 covers image 1, image 3 covers image 2, image 4 covers image 3, and image 5 covers image 4. Then set the transparency of red image 1 to opacity: 1, and the transparency of the remaining images to opacity: 0.

[0048] The code is as follows:

[0049] <img src＝red.jpg style＝"position:absolute；opacity:1”>

[0050] <img src＝purple.jpg style＝"position:absolute；opacity:0”>

[0051] <img src＝blue.jpg style＝"position:absolute；opacity:0”>

[0052] <img src＝yellow.jpg style＝"position:absolute；opacity:0”>

[0053] <img src＝green.jpg style＝"position:absolute；opacity:0”>

[0054] Step 3: Set up an array and record the initial transparency of all images in the order of [1,0,0,0,0]. At this time, only the red image content at the bottom can be seen;

[0055] Step 4: Set the slider sliding range to every 25 as a unit, and set four sliding ranges respectively, 0-25, 25-50, 50-75, 75-100;

[0056] Step 5: Record the sliding progress while sliding the slider. Set the transparency of purple picture No. 2 to increase from 0% to 4% for each sliding unit until the transparency reaches 100% when sliding to 25. The picture gradually changes from red to dark red, and then to purple. The value of the array changes from [1,0,0,0,0] to [1,0.5,0,0,0] to [1,1,0,0,0]. At this time, picture No. 2 gradually covers picture No. 1, and the color of the interior ambient light changes from red to dark red, and finally to purple.

[0057] Step 6: Continue sliding the slider. When the sliding range is between 25-50, change the transparency of picture 3. Set the transparency of picture 3 to increase by 4% for every 1 unit of sliding. When sliding to 50, the transparency of picture 3 is 100%. The array value changes from [1,1,0,0,0] to [1,1,0.5,0,0] to [1,1,1,0,0]. At this time, the color of the interior ambient light changes from purple to cyan and finally to blue.

[0058] Step 7: Continue sliding the slider. When the sliding range is between 50-75, change the transparency of picture 4. Set the transparency of picture 4 to increase by 4% for every 1 unit of sliding. When sliding to 75, the transparency of picture 4 is 100%. The array value changes from [1,1,1,0,0] to [1,1,1,0.5,0] to [1,1,1,1,0]. At this time, the color of the interior ambient light changes from blue to mung bean color and finally to yellow.

[0059] Step 8: Continue sliding the slider. When the sliding range is between 75-100, gradually change the transparency of Picture No. 5. Set the transparency of Picture No. 5 to increase by 4% for every 1 unit of sliding. When it slides to 100, the transparency of Picture No. 5 is 100%. The value of the array changes from [1,1,1,1,0] to [1,1,1,1,0.5] to [1,1,1,1,1]. At this time, the color of the interior atmosphere light on the page changes from yellow to light green, and finally to green.

[0060] Due to the principle of color mixing, 4 color pictures are superimposed on each other by adjusting the transparency of the pictures to produce color pictures with different colors relative to the superimposed pictures. By using the slider to transition the differences between different colors, the effect of using a small number of pictures to produce multiple different color pictures is achieved.

[0061] Among them, the 5 pictures in step 1 have the same size, and the colors of the 5 pictures are different.

[0062] This design allows the five pictures to be perfectly covered one after another.

[0063] The HTML structure of step 2 includes two parts: the header area and the body area. The HTML structure is mainly organized by three tags.

[0064] This structure ensures the organization and readability of HTML documents, and also enables browsers to correctly parse and display web page content.

[0065] Among them, the CSS in step 2 consists of three main parts: selector, property and value. Property is the control core of CSS style.

[0066] By using CSS, the overall style and layout of the website can be uniformly controlled, so that each page of the website is visually consistent. At the same time, by reusing the same CSS style, the web design process can be simplified and efficiency can be improved.

[0067] Among them, the array in step three is a composite data type, and the array consists of a series of elements of the same type.

[0068] The design of an array can organize several elements of the same type together in an ordered form.

[0069] Among them, the slider in step four is a common interface element that appears on the car screen, allowing the driver or passenger to intuitively adjust the color and brightness of the ambient light.

[0070] When the driver moves the slider on the car screen, this action will be captured and interpreted by the on-board electronic system, and then converted into a corresponding command signal and sent to the ambient light light source controller, thereby achieving the effect of changing the color of the ambient light.

[0071] Among them, there are four sliding ranges in step four, and four different prompt sounds are set for each of the four sliding ranges.

[0072] This design makes it easier for the driver to distinguish the differences between the four sliding ranges.

[0073] Among them, the sliding progress of step five is set with scale lines, and the distance between the scale lines corresponds to one unit.

[0074] Such a design can enable the driver to understand the percentage of image transparency more clearly.

[0075] Among them, position: absolute in step 2 means that the image will be displayed in an absolutely positioned manner.

[0076] This positioning method allows the image to be placed anywhere on the page without affecting the layout of other images in the document flow.

[0077] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0078] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. The algorithm method for changing the color of the car interior atmosphere light is characterized by: The following steps are involved: Step 1: Prepare 5 pictures in advance, labeled 1, 2, 3, 4, and 5, with colors of red, purple, blue, yellow, and green respectively; Step 2: Set the HTML structure as follows: <input type＝range min＝0max＝100step＝0.1> <img src＝red.jpg> <img src＝purple.jpg> <img src＝blue.jpg> <img src＝yellow.jpg> <img src＝green.jpg> Use CSS to set the style attribute of each image to position: absolute, so that image 2 covers image 1, image 3 covers image 2, image 4 covers image 3, and image 5 covers image 4. Then set the transparency of red image 1 to opacity: 1, and the transparency of the remaining images to opacity:

0. The code is as follows: <img src＝red.jpg style＝"position:absolute；opacity:1”> <img src＝purple.jpg style＝"position:absolute；opacity:0”> <img src＝blue.jpg style＝"position:absolute；opacity:0”> <img src＝yellow.jpg style＝"position:absolute；opacity:0”> <img src＝green.jpg style＝"position:absolute；opacity:0”> Step 3: Set up an array and record the initial transparency of all images in the order of [1,0,0,0,0]. At this time, only the red image content at the bottom can be seen; Step 4: Set the slider sliding range to every 25 as a unit, and set four sliding ranges respectively, 0-25, 25-50, 50-75, 75-100; Step 5: Record the sliding progress while sliding the slider. Set the transparency of purple picture No. 2 to increase from 0% to 4% for each sliding unit until the transparency reaches 100% when sliding to 25. The picture gradually changes from red to dark red, and then to purple. The value of the array changes from [1,0,0,0,0] to [1,0.5,0,0,0] to [1,1,0,0,0]. At this time, picture No. 2 gradually covers picture No. 1, and the color of the interior ambient light changes from red to dark red, and finally to purple. Step 6: Continue sliding the slider. When the sliding range is between 25-50, change the transparency of picture 3. Set the transparency of picture 3 to increase by 4% for every 1 unit of sliding. When sliding to 50, the transparency of picture 3 is 100%. The array value changes from [1,1,0,0,0] to [1,1,0.5,0,0] to [1,1,1,0,0]. At this time, the color of the interior ambient light changes from purple to cyan and finally to blue. Step 7: Continue sliding the slider. When the sliding range is between 50-75, change the transparency of picture 4. Set the transparency of picture 4 to increase by 4% for every 1 unit of sliding. When sliding to 75, the transparency of picture 4 is 100%. The array value changes from [1,1,1,0,0] to [1,1,1,0.5,0] to [1,1,1,1,0]. At this time, the color of the interior ambient light changes from blue to mung bean color and finally to yellow. Step 8: Continue sliding the slider. When the sliding range is between 75-100, gradually change the transparency of Picture No.

5. Set the transparency of Picture No. 5 to increase by 4% for every 1 unit of sliding. When it slides to 100, the transparency of Picture No. 5 is 100%. The value of the array changes from [1,1,1,1,0] to [1,1,1,1,0.5] to [1,1,1,1,1]. At this time, the color of the interior atmosphere light on the page changes from yellow to light green, and finally to green.

2. The method for color change of automotive interior atmosphere lamp according to claim 1, characterized in that: The five pictures described in step 1 are of the same size, and the five pictures have different colors.

3. The method for color change of automotive interior atmosphere lamp according to claim 1, characterized in that: The HTML structure described in step 2 includes two parts: a header area and a body area. The HTML structure is mainly organized by three tags.

4. The method for color change of automotive interior ambient light according to claim 1, characterized in that: The CSS described in step 2 consists of three main parts: selector, property and value. The property is the control core of the CSS style.

5. The method for color change of automotive interior ambient light according to claim 1, characterized in that: The array described in step three is a composite data type, and the array consists of a series of elements of the same type.

6. The method for color change of automotive interior ambient light according to claim 1, characterized in that: The slider described in step 4 is a common interface element that appears on a car screen, allowing the driver or passenger to intuitively adjust the color and brightness of the ambient light.

7. The method for color change of automotive interior ambient light according to claim 1, characterized in that: There are four sliding ranges in step 4, and four different prompt sounds are respectively set for the four sliding ranges.

8. The method for color change of automotive interior ambient light according to claim 1, characterized in that: The sliding progress described in step five is provided with scale lines, and the distance between the scale lines corresponds to one unit.

9. The method for color change of automotive interior ambient light according to claim 1, characterized in that: The position: absolute in step 2 means that the image will be displayed in an absolutely positioned manner.