基于物联网操作系统的低代码开发主题色自动切换方法与流程

1.本发明涉及一种主题色自动切换方法，更具体的说是涉及一种基于物联网操作系统的低代码开发主题色自动切换方法。


背景技术：

2.在低代码平台中，平台需要提供很多组件以方便快速搭建应用。通过组件化的方式，可以量产诸多页面，但由于组件的样式都是封装在组件内部的，因此容易使搭建出来的页面千篇一律，无法满足各种业务需求。如果通过改造组件，内置不同的主题色供用户选择，可以满足部分更改主题的需求，但这会大幅增加每个组件的开发成本。


技术实现要素：

3.针对现有技术存在的不足，本发明的目的在于提供一种代码量更少的基于物联网操作系统的低代码开发主题色自动切换方法。
4.为实现上述目的，本发明提供了如下技术方案：一种基于物联网操作系统的低代码开发主题色自动切换方法，包括如下步骤：
5.步骤一，将主题色颜色值从rgb格式转换为hsb格式；
6.步骤二，定义取更深颜色的算法shade；
7.步骤三，定义取更浅颜色的算法tint；
8.步骤四，定义深色模式中不同色阶的转换算法；
9.步骤五，定义色弱模式的算法；
10.步骤六，将主题色颜色值从hsb格式转换为rgb格式；
11.步骤七，将步骤一至步骤六所形成的算法应用于组件内。
12.作为本发明的进一步改进，所述步骤一中rgb格式转换为hsb格式的具体步骤如下：
13.步骤一一，设置如下定义：
14.sr:r/255；
15.sg:g/255；
16.sb:b/255；
17.max
srgb
:max(sr,sg,sb)；
18.min
srgb
:min(sr,sg,sb)；
19.δsrgb：maxsrgb-minsrgb；
20.步骤一二，计算hsb格式中h的值：
21.当max
srgb
＝min
srgb
，取0
°
；
22.当max
srgb
＝sr且sg《sb，取((s
g-sg)/δ
srgb
6)*360
°
；
23.当max
srgb
＝sr且sg≥sb，取((s
g-sg)/δ
srgb
)*360
°
；
24.当max
srgb
＝sg，取((s
b-sr)/δ
srgb
2)*360
°
；
25.当max
srgb
＝sb，取((s
r-sg)/δ
srgb
4)*360
°
；
26.步骤一三，计算hsb格式中s的值：
27.当maxs
rgb
＝0，取0％；
28.当maxs
rgb
≠0，取(maxs
rgb-mins
rgb
)/maxs
rgb
；
29.步骤一四，确定maxs
rgb
即为hsb格式中b的值。
30.作为本发明的进一步改进，所述步骤二中取更深颜色的算法shade的具体步骤如下：
31.步骤二一，输入参数为amount，范围为0-0.4，表示变化的幅度；
32.步骤二二，计算改变值δh、δs和δb：
33.δh:当60
°
《h《240
°
时,取2
°
，否则取-2
°
34.δs：当amount《0.1时，取5％；当amount≥0.1时，取(100％-s)/4
35.δb：当amount《0.1时，取15％；当amount≥0.1时，取(b
–
30％)/4；
36.步骤二三，根据步骤二二计算出的δh、δs和δb计算结果颜色的值h’,s’和b’：
37.h’：(h δh*amount 360deg)mod360；
38.s’：(s δs*amount*10)mod100；
39.b’：(b-δb*amount*10 100％)mod100；
40.取颜色hsb(h’,s’,b’)为结果颜色。
41.作为本发明的进一步改进，所述步骤三中取更浅颜色的算法tint具体步骤如下：
42.步骤三一，输入参数为amount，范围为0-0.4，表示变化的幅度；
43.步骤三二，计算改变值δh、δs和δb：
44.δh:当60
°
《h《240
°
时,取2
°
，否则取-2
°
；
45.δs：当amount《0.1时，取15％；当amount≥0.1时，取(s
–
10％)/4；
46.δb：当amount《0.1时，取5％；当amount≥0.1时，取(100％-b)/4；
47.步骤三三，根据步骤三二计算出的δh、δs和δb计算结果颜色的值h’,s’和b’：
48.h’:(h-δh*amount 360deg)mod360
49.s’:(s-δs*amount*10 100％)mod100
50.b’:(b δb*amount*10)mod100；
51.取颜色hsb(h’,s’,b’)为结果颜色。
52.作为本发明的进一步改进，所述步骤四中深色模式的色阶转换算法如下：
53.新h＝360
°‑
原h；
54.新s＝100％-原s；
55.新b＝100％-原b。
56.作为本发明的进一步改进，所述步骤五中色弱模式的算法具体如下：
57.新h＝当h大于60
°
小于120
°
：h/2；当h大于等于120
°
小于180
°
：h (h-120
°
)*2。
58.作为本发明的进一步改进，所述步骤六中从hsb格式转换为rgb格式的具体步骤如下：
59.步骤六一，设置临时变量i、f、p、q、t并计算：
60.i:floor(h/60)；
61.f:h/60
–
i；
62.p:b*(1-s)；
63.q:b*(1-f*s)；
64.t:b*(1-(1-f)*s)；
65.步骤六二，对于imod6，
66.如果为0，取sr＝b,sg＝t,sb＝p；
67.如果为1，取sr＝q,sg＝b,sb＝p；
68.如果为2，取sr＝p,sg＝b,sb＝t；
69.如果为3，取sr＝p,sg＝q,sb＝b；
70.如果为4，取sr＝t,sg＝p,sb＝b；
71.如果为5，取sr＝b,sg＝p,sb＝q；
72.取rgb(sr*255,sg*255,sb*255)为最终的颜色值。
73.作为本发明的进一步改进，所述步骤七中应用于组件的具体步骤如下：
74.步骤七一，将所有组件按色彩分为3类：
75.1，需要强调、突出的组件相关颜色，比如链接文字颜色，主按钮的背景色，设置为用户所选的主色调；
76.2，需要突出区块、层次感的组件相关颜色，比如区块面板的背景色，设置为tint(40％)所计算出的颜色；
77.3，其它常规、中性的色彩，比如文字颜色，取白色或黑色中和主色调对比度更高的颜色；
78.步骤七二，对于第1类组件：
79.当鼠标悬停时，设置为tint(10％)所计算出的颜色；
80.当鼠标按下时，设置为shade(10％)所计算出的颜色；
81.对于第2类组件：
82.当鼠标悬停时，设置为tint(37.5％)所计算出的颜色；
83.当鼠标按下时，设置为shade(32.5％)所计算出的颜色；
84.对于第3类组件：
85.当鼠标悬停时，设置为tint(0％)所计算出的颜色；
86.当鼠标按下时，设置为shade(10％)所计算出的颜色。
87.本发明的有益效果，通过步骤一的设置，便可想主题色颜色格式转换为比较方便编辑格式，然而通过步骤二至步骤六的设置便可有效的定义在用户选择了什么模式的情况下，通过算法进行自动计算，最后通过步骤七的设置，便可实现将算法按计算出来的颜色值应用到组件内了，可以大幅减少低代码平台组件开发的成本，又可以为用户提供丰富的主题定制能力，是低代码平台产品与其它竞品产品差异的核心优势之一。
具体实施方式
88.下面将所给出的实施例对本发明做进一步的详述。
89.本实施例的一种基于物联网操作系统的低代码开发主题色自动切换方法，包括如下步骤：
90.步骤一，将主题色颜色值从rgb格式转换为hsb格式；
91.步骤二，定义取更深颜色的算法shade；
92.步骤三，定义取更浅颜色的算法tint；
93.步骤四，定义深色模式中不同色阶的转换算法；
94.步骤五，定义色弱模式的算法；
95.步骤六，将主题色颜色值从hsb格式转换为rgb格式；
96.步骤七，将步骤一至步骤六所形成的算法应用于组件内，在使用本实施例的方法的过程中，首先在低代码搭建平台，用户可以随意选择一个颜色作为搭建应用的主色调，之后执行步骤一至步骤七，便可根据用户所选择颜色自动化的计算出与之相关的颜色，然后再应用到低代码所搭建的平台内，如此可以大幅减少低代码平台组件开发的成本，又可以为用户提供丰富的主题定制能力，是低代码平台产品与其它竞品产品差异的核心优势之一。
97.作为改进的一种具体实施方式，所述步骤一中rgb格式转换为hsb格式的具体步骤如下：
98.步骤一一，设置如下定义：
99.sr:r/255；
100.sg:g/255；
101.sb:b/255；
102.max
srgb
:max(sr,sg,sb)；
103.min
srgb
:min(sr,sg,sb)；
104.δsrgb：maxsrgb-minsrgb；
105.步骤一二，计算hsb格式中h的值：
106.当max
srgb
＝min
srgb
，取0
°
；
107.当max
srgb
＝sr且sg《sb，取((s
g-sg)/δ
srgb
6)*360
°
；
108.当max
srgb
＝sr且sg≥sb，取((s
g-sg)/δ
srgb
)*360
°
；
109.当max
srgb
＝sg，取((s
b-sr)/δ
srgb
2)*360
°
；
110.当max
srgb
＝sb，取((s
r-sg)/δ
srgb
4)*360
°
；
111.步骤一三，计算hsb格式中s的值：
112.当maxs
rgb
＝0，取0％；
113.当maxs
rgb
≠0，取(maxs
rgb-mins
rgb
)/maxs
rgb
；
114.步骤一四，确定maxs
rgb
即为hsb格式中b的值，通过上述步骤的设置，便可简单有效的将rgb格式转换为hsb格式，且整体代码量较少。
115.作为改进的一种具体实施方式，所述步骤二中取更深颜色的算法shade的具体步骤如下：
116.步骤二一，输入参数为amount，范围为0-0.4，表示变化的幅度；
117.步骤二二，计算改变值δh、δs和δb：
118.δh:当60
°
《h《240
°
时,取2
°
，否则取-2
°
119.δs：当amount《0.1时，取5％；当amount≥0.1时，取(100％-s)/4
120.δb：当amount《0.1时，取15％；当amount≥0.1时，取(b
–
30％)/4；
121.步骤二三，根据步骤二二计算出的δh、δs和δb计算结果颜色的值h’,s’和b’：
122.h’：(h δh*amount 360deg)mod360；
123.s’：(s δs*amount*10)mod100；
124.b’：(b-δb*amount*10 100％)mod100；
125.取颜色hsb(h’,s’,b’)为结果颜色，通过上述步骤的设置，可实现依据参数来计算出相应的改变值，然后通过根据改变值计算出更深颜色的值。
126.作为改进的一种具体实施方式，所述步骤三中取更浅颜色的算法tint具体步骤如下：
127.步骤三一，输入参数为amount，范围为0-0.4，表示变化的幅度；
128.步骤三二，计算改变值δh、δs和δb：
129.δh:当60
°
《h《240
°
时,取2
°
，否则取-2
°
；
130.δs：当amount《0.1时，取15％；当amount≥0.1时，取(s
–
10％)/4；
131.δb：当amount《0.1时，取5％；当amount≥0.1时，取(100％-b)/4；
132.步骤三三，根据步骤三二计算出的δh、δs和δb计算结果颜色的值h’,s’和b’：
133.h’:(h-δh*amount 360deg)mod360
134.s’:(s-δs*amount*10 100％)mod100
135.b’:(b δb*amount*10)mod100；
136.取颜色hsb(h’,s’,b’)为结果颜色，同上述更深颜色的步骤，通过与上述步骤相反的计算方式便可简单有效的计算出更浅的颜色数值。
137.作为改进的一种具体实施方式，所述步骤四中深色模式的色阶转换算法如下：
138.新h＝360
°‑
原h；
139.新s＝100％-原s；
140.新b＝100％-原b，通过上述方式可在进入了深色模式以后，还可对色阶进行简单有效的转换。
141.作为改进的一种具体实施方式，所述步骤五中色弱模式的算法具体如下：
142.新h＝当h大于60
°
小于120
°
：h/2；当h大于等于120
°
小于180
°
：h (h-120
°
)*2，通过上述方式可依据h的值来进行不同方式的计算，使得最后h的值更加的合理可靠。
143.作为改进的一种具体实施方式，所述步骤六中从hsb格式转换为rgb格式的具体步骤如下：
144.步骤六一，设置临时变量i、f、p、q、t并计算：
145.i:floor(h/60)；
146.f:h/60
–
i；
147.p:b*(1-s)；
148.q:b*(1-f*s)；
149.t:b*(1-(1-f)*s)；
150.步骤六二，对于imod6，
151.如果为0，取sr＝b,sg＝t,sb＝p；
152.如果为1，取sr＝q,sg＝b,sb＝p；
153.如果为2，取sr＝p,sg＝b,sb＝t；
154.如果为3，取sr＝p,sg＝q,sb＝b；
155.如果为4，取sr＝t,sg＝p,sb＝b；
156.如果为5，取sr＝b,sg＝p,sb＝q；
157.取rgb(sr*255,sg*255,sb*255)为最终的颜色值，通过上述步骤便可简单准确的实现格式的转换，进而完成对于相关颜色的计算。
158.作为改进的一种具体实施方式，所述步骤七中应用于组件的具体步骤如下：
159.步骤七一，将所有组件按色彩分为3类：
160.1，需要强调、突出的组件相关颜色，比如链接文字颜色，主按钮的背景色，设置为用户所选的主色调；
161.2，需要突出区块、层次感的组件相关颜色，比如区块面板的背景色，设置为tint(40％)所计算出的颜色；
162.3，其它常规、中性的色彩，比如文字颜色，取白色或黑色中和主色调对比度更高的颜色；
163.步骤七二，对于第1类组件：
164.当鼠标悬停时，设置为tint(10％)所计算出的颜色；
165.当鼠标按下时，设置为shade(10％)所计算出的颜色；
166.对于第2类组件：
167.当鼠标悬停时，设置为tint(37.5％)所计算出的颜色；
168.当鼠标按下时，设置为shade(32.5％)所计算出的颜色；
169.对于第3类组件：
170.当鼠标悬停时，设置为tint(0％)所计算出的颜色；
171.当鼠标按下时，设置为shade(10％)所计算出的颜色，通过上述步骤的设置，可根据组件的类型来针对应用整体的方法，使之能够更好的应用于各类组件，如此在组件上所呈现的效果也就更好了。
172.综上所述，本实施例的切换方法，通过步骤一至步骤七的设置，便可有效的实现依据一个主题色然后自动计算出相关的颜色的效果。
173.以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。