From 62af23cafcc5bd2e7f1cac0e4c0e4046895a1b58 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sat, 25 Jun 2022 11:36:53 +0200 Subject: [PATCH] Use RGBAColor for background. --- sandbox/background.png | Bin 0 -> 10501 bytes sandbox/embed_background.html | 76 ++++++++++++++++++++++ sandbox/embed_iframe_scroll.html | 20 ------ sandbox/embed_selfhost_calculate.html | 2 +- sandbox/embed_selfhost_code_file.html | 2 +- sandbox/embed_selfhost_code_url.html | 2 +- sandbox/embed_selfhost_multiple.html | 2 +- source/engine/main.js | 4 +- source/engine/model/color.js | 29 +++++++++ source/engine/parameters/parameterlist.js | 54 +++++++++++---- source/engine/viewer/embeddedviewer.js | 4 +- source/engine/viewer/viewer.js | 11 +++- source/website/cookiehandler.js | 22 +++++-- source/website/measuretool.js | 2 +- source/website/settings.js | 18 ++--- source/website/sidebarsettingspanel.js | 21 +++--- source/website/utils.js | 4 +- test/tests/parameterlist_test.js | 8 +-- website/embed.html | 7 ++ 19 files changed, 216 insertions(+), 72 deletions(-) create mode 100644 sandbox/background.png create mode 100644 sandbox/embed_background.html delete mode 100644 sandbox/embed_iframe_scroll.html diff --git a/sandbox/background.png b/sandbox/background.png new file mode 100644 index 0000000000000000000000000000000000000000..b2e2982b02b9032bf1c9d9a4140017f5381d73cc GIT binary patch literal 10501 zcmb_?RajeHv@KfPLvVKu1zOyKYjG*X3KW-O#ogVV;!>RA6o=yO?(XiCyZ`fY-_Fx{ zNb)6LcJ|6zbIdvB7&A;+Ng4x{7!?Kv218axLKS!&`0s%X2Ru{r^9=$ou#T$IP?*Xw z(nH`4f|;127z|8J4BCqkBJdu?UPi|e1_rbDzXxm*3nmE+3}d>igqXUk{%IDHVA3;1 zf0l8KHEOPeInksjCkv5cqfq@10$EAWq|M4x%3f0N9q33(GTHIUE%$T)HT7 zgfBgIH+2rm|Nm&F#yhm3p6 zVeaan44lPKQBeVd!Kwb(v{UmC{#0QvcM}uZJ7WYr%D`JJIXOA+x7T}E_;-fguvBq_ z-44wDoZ$z`4h3Tym(v5JnFrXu360i^SBKLKCtBD}q9#FvhQ*#8If1<#zw+=_%vDP<36kC~R0**xufrVba$2b{r*dlN(ZWChttAyKf>~*vn`<{!MT^ z4gG<&(66t}!5+TI5-qPbtZ2umXiKRTx{d$xqp0E}f+J(+Gnn|T(bKZ>x69vrM+WJN ztv=Yk8ZCx_C!C=L%Xcw|Mv^fay1K`}eK$8@HObK8WZ-ar?qod0-D~{4Js*zdezY4kE3@j`VzF=1}v%^wVs|EBcz9yG? zV~ZUcS<1V_=u`(7K;KEq$;(sq2Z|72WBXE^Fdk~P2 z@=wsU@ay>tZ%2I?U&I*aKR z&ElM-r*Yu>l#ce8q=osltMZGU__V0levKdk0<&-5-mS4PF@-Vh{0&NM2L*(xc}dJ|K2fRnN3&d;ijvZoIubLXPP>G^-e$SM zwp2|>Q=^K8S6kLA?fT%+#q;Yze&5#C77#t@si}f)R|t}XWWfZQ*48JHL|mOJl9H0S z$VgZQ=bFXluuek(GdIo++3J}s2tt;Dl{B23xSpFQi?v~$?|}a$y0@Xqk;!BGN@byFth!Gc^?ZL$LQKrh%gb@I;U0XWy&8LV0Q=O~dV zN`00Gd5F=HeI2bYLd%3QJTW=B(x8J}*jh#gxo7naorYCrEFnIgm6f$K$hYcAHH&ys z1XvS{(00!I1g8cMCPm$`zcCuEU%!6soC%0gkd-x}bbB9MeQ^Xb@o{yQ({9h_FI>p} zpX2$I6c~*}Lx#<$Cy!FxS8Ga&kk1gBFKVg)c8JjL_@}=Lp18yc;;(M%!1_tSy50 zNp506TVgU`$NgfCsFeIVSNL-|H?AY5XEw z$2Ff!m6-J};}a8aE-q4e?8sjUAuZ-LqAPEeO5d+A4pJA*=FUs=cmhpAtSarvOxwtK z(l^BB%XQ$hw#&4t4hjkn%#6A;U{VY%EFRB~68$&r;0w}n`6bbE%o3+KCSG6bwi4;= zk)Q*1|VSpp{ieJjzd8~5q?AW zI`Q@O^?n_Q#L4XiCMhx30p!xl^x7mX30z5G@0TW*)6ZO7wFD6T92tYD;%=Z`Wqhy# zd(KqOGNItN@=GrKA{VQ0wMaX#7D0Taai2jZc-$RMF>D31e@Tsx_g6Y5d6LnNJziX1 z7GJyH=z<63Y8IRPnq|7&EZ5D-Lo{sdoQ%jz>|nT}}3`Sr=!%ggJ4==ns2W>g5Q zJzzCo$;ZbxY2BqG@1$)eQxU-(cb{rzi;;e zOFOLT`@J1{q;5dTTAbJHus+bdd{L&St!-{>%;kJEb8%r0%EjTv0m~eb%>KGW4emgZ zW7+7jM={3`AZV;B!Xd0OqDQ+7*V5J|yotQt8yy}QDNsq7eeU+xUzwY`BbjA#&f}kj zh{hvyPw9Io%dNslit0Dou1?L)uGX4;^70Zwy`yeBtl4u+zY|I4!0M3guIZii`87-Jvmoh@AXR2eE#BT_UAwWX8p* z<@~dAE1~*zo|Tf2R2Uaq{Xz@*{t5v`J_qX0N^tEHELxSmtz$ohBE}v~-FIqGQBmva z>VUA=bOuTj@s%)r84b6(H?wTS(-+N9GPOVPDst1wXv1ZO{R(2HE)GE9NsrMnw{J^K zR98@ltmAHg>x4|u813%t_*PE@>J3=@az@y*EF9w8E_Ik*68M4A=|`$BHSCmn37v`I zK)P^4GtMr2%nF_d5*KATm3VN@+b!Bnx*I`kqA9V4Up#Qtx=05~8l@_}CpQy@xCI7{ zs&sQfMKcpbaN~CK0|gC5;|Ct67wn#%vAlr%8kK*m-&bc7P=B}3H0RagdvKu6s zJA=RPjogOu%fM>d41`Dav2WoP^Tundr$29?1Ba~W+tI(ynbl7Uvhb4W$E9nC&%qR{ z%JEn4C=@$?18gh(*ed7znUHKoJz{h?fc2AOP{d=+L~g=<&cJ=#d_AWKIIn&PG=+{mZ>k}gjTLM{H% z`{RYk&()qC^y$k|=j9bpje0?|DhS?gch?z)t>Fm=rj-T;-JiQH%h`u9uzcIG>|}r= za%ylJ<;A1RH(lzX5~6i+VR8;2DyF$T8M~B6m+A@*-zu;|${*(!y$UTxEQcvWE^DiA zez4KDT@YV+iXAv%PPStE6daY>4ErPoI^i=>V#kk|oiPxw!qb0WIV2k;+{kj;bvPHy z4>EF3HPB9Mm>XJ|xgWRF^p>%;v++X?lSrQ9{(XfyUn|5VYRSl7@dJmDvAFgY!4i4$ zdbMFM_+>!4DyDqc18-t(Dp1MzYw8zm4E*dXYH|XGc1xRHIg|<6!^P~3EgZ^ReoRU8 zkOzCkYTG9PF9h0M<$~r)=GAkB@d(USV7k@;x7Q6vzPbDFD9ACt z*M#@K{=RY|No>D`ofu?R)Z^b*9ZG$?bNwxQN;J+-yUrip!Lt{D5`=iDEqSLq@LYPu zPq7&%Gi4k#8WR+`ZjUg!b7IWvhS*mjWbXa)cjLR-=4g(g(aLqn^c^4M%I$nAsbrYAYU&Km-oIX9!u~tUqb_MRA$ZB)Xo)M! z%Ca#}&&|LM{1`Kcg&v&II8{?T z09oP{Jw!04ot8op=)Zc3*&1(9NdQ_9MgEO)gPicaRl@Ed2M~8AnCzf(*KE-9{7M5 zcsPpDs1I5^Absb58K_~P=^G=3)R{wg(oA1j9z@2)dm$F7caBb45kXd4Q~z;Jt-qd= zIC261Up`nP8OPCXH?=OrOqcNOk$r_@F}Lw$E(W6H85V?nqr&pYL^x&aC8=g3`H)Ql z*Kk14C;S(RF7x;&kWzYh;x)oDLf9}@>8Ymtd6=WR8USXn!q1*AaXs8rs0Cy^+{c7x zcTnki2x|~qbe{tOXeA8`Ugn}8p7#+3eM-Y4g z{tQ?ky8b&}at~O|ys}EE+2du7x^U)MzXGGJqd>a~hRMcdK+!&Aa-Zx^bVuwQcl>-t z7sJ2f2>J<>k&POd_jI>4Wh?4t<^5*E-0I1J6zewwa|M+2gpvnH2lWB>BdFhX)w8n0 zs7)}HzVFtE-+V*H(1hYhg~$dXRy$q}C~?o%3b0i1Bm@xX;x^HK*s57gG%VJ^KgU%m z@PRcZ_qLu6s9$=-@iXUz56dF!UX;_(fy1vNuU{f4+a&u%WJ6UxVMXOQRBqEX~eytkIawZ=y6PpdqfGU<)?tJQJn~SrwaXp`W zrMDwriEknLb|wEn1PRtbdW z?gTwQ+f79Y+RRT)4EG={>1M3238K3&ufCBAPe*7;sJgVK)df?1{+oShgknUMbF5-; zRM6awn2rI0g}mME#py-_7mEl+jAI?6OmObDwt9?930>8Bc^yiFc7UEkH5*-#URWp{ z-;m0PsyC^=PP3Usw{j1+v*_42*W1f!)mUIU?*SY1_@Prt$oc2>h_mooPy8ZZZxT1~ z7sCkbbdZwqz@1~GEL8&H^LOQ$(R2U@_LRfKTCu$u*=>xLjuMexEneYyTXyiNr+2DK z91HRC=j;KY`y?on_20OZ>T0WKBP;2{;tzjVvcd|-n(wWx#ma4jZ#d|GseeXFp|G^F zRcQ0M+LT&N^k9fBfFY;)zKAki_#sNCSIHUBKq64md_6u|Zuax|u(ODY9Tm9|2aDgBT}Q}snF6fZ$i|3DhSt2UZr&9N zAKdsJBZ;o+pEiEeXfx>2Fzv>tX`W^^u2xb~=ggmMkG8+5{SespM znd_=W^P$_b@KEJn2ECATdK4Nmaq)#QNte>DG(w&qJ0;TqPYBUyit^-HEgjVX1yuXZ zH^M+>(IIN?2!3m5;dcXNRi@TGg>5FG*VyH0MZRINDn({D(&{y`{6KUDJy&w!sd^)J z_tCqqF1d}CnUoW7B6%>i;s^Y&c|n>_i%_^w>Mt+;s+LdUT}rP<72;6?yU|2=UKuJ-&|AUWUgCs4^U+e^4 z0`$2kK+FrpR#rx>ZC*qQ+Orh3fZUcdpDiy!zb-hXtrv`$7M2{`()|#-$8Y@_da}>s zU?2ihkt-hTYZN%Ee96SK(!p`&<|x#_CF-GT^?j=BLWIXeh}U*u+tpN$^w?W4kybBB0Wiuf_7=`9OlwhN#mD{q-i|BDBWAQ7@du=XHFPc=^Er=6_pAvCV!K z@n_@9JrkDX0qPSjxG<|l;0w@Ts2?vKs+#tH;t?S)ZR^9^38FTj%H{WdiZc{?b`f zl~cwT9WoQ;5Ww`(V%R5^^&}wOdCE&&3;@k5re#Alkp84@6#47V`b>b|*YG38E4C7W zEQQ9J_Do^RGtC_rvHYY(I{tHlWH%4Ppn7%3)&j#p8MJ_g|`rXNM#Ek>{ zPo1RM1yl*&;`y2>;lKqz9s#JHaNt_-3ZR(@P|maXq@CGTzRT&&ppv_@j` zH5^4^04Oc_ToH5}?cX*4!-SaM)~Im5P7tpl6$fOYa)uP3X-h1U^czyCZp@uY+Sw0& zOe&DdnPR78K)59y3+W%qf7SK11VM*A!xj zC6+#?Q|h9Nw2+hPTdBeGS705`7u&obLo)t@9_K{#2mALm{&D`nCL=Fodh&m`5r2b? zQ*?tpJTFg6fH>fUZ!;b{XC4n12Y%7f=)?Rxh_2Pw>eaLgkoYD$7C##d`a%eW;Ev@H zOhJH_q5ad9&%BO2oBD+CZ4zC8VpFp=COeNgm$H+Oe43M6-C3z=(lP4xn!^nF&qd+NZ+q@|kbf={`RalA!h2Cmk^d7!AGn1A8xy?U8qff^+2*DtwC$h$10J#6_kk94 z?Qf@^z^-q{;$}`Xe(1B08aAe_{w&e)p1u;vdn>$Bcojy_0TZRlr)z=h0CBaP2)}V; z41GOWa!yOq))!_?t9|`3LOu_!_B8Jfs6UI{mODvhYij&E_dHadPQXvt^s#+OB$dkl z>UEBWCItQWpH!k1L~XxrUUgT^kI&9CNeZ+CXRvuQMY{*JV#f5j$Se4dc5u|67JVW; zU$P=Fi^b&8^#tpN9*h+ao{K2lP%!{tFhU_tJF-A7X0U$3^VwNaR>^cajp=1Md!Scq zld(fZn|heKIXH=3u9sYNU6h(M$-Uims+SblWRWPIB%#HXg-R~JxR%r$+juUX7NuVS zolTs6M@onML(7OvE}&quleg0RL)I~jZOxtjFpO74C#@h_0Y}#T7sBf>mdux;n#iVU z{ES%N*rf&bwsw@txyL#yxDSZE_;X4yFgQ3lHN^}mj#h++d`U}~s@JD3<&g4-3IQ7P zhofrj)oCDoy1$upYhbPXP2g*O7d_>7hhpO?VmN^vIs^W;9YvIuWeil|iA%B480s4= z&qK*eDxlZ;mDH+4`6*?(M#0AwtRE2;_P4heo#@K+U~GKKs{05vyJ_UWts#HU)_4MA zjHnHJc2$w2uao33zV5Xc0W33ZkOcDMi+0WKiI!01quA-pX8WjE-=GJPu zk{>Xn>O)}Xe<(h1j9!<+MKlHVSKJoNQ3>={aWWcKZ?T__zbqHG4b#?ogEc>YCPqHK zHnV;JH9@E0y;Us}CaLg5Evyuq_R<{gCFW`4q_rJ(P82QC$OcJgran3<#}gCP4WquL zdU|?NvTDp4tOu1!e{{Uq=(4o5ToCK8E(L1nBTh`UabF0Km1<1JBh~DJm43=QhtuM= z`ie&tDvcB{U!2zvWTsoTN7kvRs>UZL_hEX6k=JXBii`Ku822k>3uk4&6{Z5+BRqTC zgS|CGb}#4Q)av1fblXq261Fkf78eeo4N?;ZMrvkeOJn0&$9*MNKk5#tPeDO28qLkk zdabTC%|yq=e2?#d>`GQ^$gry6gv@VlWif<)6Wy^DEn-QNFbH_8cHfvWsU^I%vLgSQj`PVySZe5amrM!vpA{({xD*4AK*sJ z%+xjFKCXel6Eia)LPB#pyX>s2DC(Kh)uehrNMbC+Ec!`RhBYDqD19YdcW#@o4*^gr zDk?3ldB7UzK?5D)yX$Bp58$=6wqla;tA7s1=nKmHqW>d!&hm$mj_JG76i&RTS<}JB zH-&Z&QiFZ}loW!Sot+(8x*$cyb4hb*RtZf_a9yRau<%1ROh=)0jg;{vd$c#%Qm2D5 zKU<7;7 z$jQl>Lw0w4ZFTI~KFmVR_r$Y|Q~PlX4+h1X47HHspW6&k$W^(k=Uhr@DYMMb%uHfJ zLhv{nnEFXM02KDVPRnx-jk4&SkA22(3sg3 z9o{HO6>|&m?^Ue=`OdidW<9Th0@zAHy`kCJ><*OtxL{>nU5~wyG{76%%2&<(8$VqG z=eEgW|C@K>UZo$;fbXI?4_Pwjytb}R(0&8P#OHHv%+6WeyK$u`STd3Iv z5b+=YBBZTqwyw%M{0ipQ{}6PZKgPS$0dz(P_L%Z1?5C?LC~b&YsA!XOb9?*yNbOWK zH1IyzzzD$hJVmnVv>DF!thU}AAa(!(L5pyjPP=DwZS8fZ-vT?T6S5u}8m#v*;3IBO zUHpv8iqO)x>uYjGLIhOiK)zh%-~L{BUaMtSoYgYG{eJxTp{J+kehlm-Y+%s9@G#&> zHG99h8`Cso!!T5J4m9gZ>)P#uO4I8Y$Fh||)(XvAkcH8}U+smpK>Y?zqo^(Z_g;V-3&7=fVD7CSkTaFYA{r%=YKDXnBUL_lmC<>OS-t1JSqtsOG0gGZXO*S zr8+;Z{cnf1QP6aa6_1A$aMxt}!bZR}}e{#JKP;}TD%WlZdD+K)3kVOgWwGQCmB zmwLVIr=X{&_u^yDZ8TIjqFU?lIp5g8#>SqQ38dRJY~@boW64;aINkbaAfBtfTO^sa zoc2bKosyWC2wM21QKotOoRDS^ToZ%{7+}7azw7H2m6ZCRwDF-Y$VX5fywO7!Nh%3> zalLN*`y1bDJ!!gf-Nv!8u}X$x`U!Y+2&;snV{J?f*3PB@y$QfkiKVvZ$a+(1@>!PB zN!CUF;Oy6?w15neOgI;TJS*J2P&2|2kSPo7js}3`lio1Ahe#cEZ!yW~zs6c;`{087 zpEa~>oO8>EWhyAZq(Ngt!?%_8bCy&&ZR7*I`;$dHLc)cm@QSED8dji4-P_kDE&Swq zl?J9kwr)i@;l{V~ae)kxa}F>4x4%DxdIS~^70nlXyx9{1oT7z=!M7>dl4y!QQ_j_Q z>L*Qhe(jLew=dlqF~Q+qL1Ov1f33R1If{91=ba zeX3^f|3b|(mX(zO^92OkblhL( ziYBj5n|v&mTe9hNhyXwhb_Z(^EYa zKelnWcKt=qq$Pi{hco{FAh1^?mF;-K&n))&v-|zoDqsYgq%&}Jpi{A;H(~zz^$VCi z@bmL~P^D|lgP#TS`rbbcxjIM6*~{OHtgA<$#907qBeoYqu@_bSlr0RzFl)2pvW%#V z=Hkq0SNKMeMs6a$7)FAN>kmCGINA?3OLa|6y#F((hFnHcT2=-OjWJPE`&)!y*l5|> zp1A9No-R42B)!e z*T=%cL!gl43sWQW>LdQ&=- + + + + + + + Online 3D Viewer + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + diff --git a/sandbox/embed_iframe_scroll.html b/sandbox/embed_iframe_scroll.html deleted file mode 100644 index 89ac360..0000000 --- a/sandbox/embed_iframe_scroll.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Online 3D Viewer - - - -
- -
- - - diff --git a/sandbox/embed_selfhost_calculate.html b/sandbox/embed_selfhost_calculate.html index b302f00..b9b86d2 100644 --- a/sandbox/embed_selfhost_calculate.html +++ b/sandbox/embed_selfhost_calculate.html @@ -34,7 +34,7 @@ // initialize the viewer with the parent element and some parameters let viewer = new OV.EmbeddedViewer (parentDiv, { - backgroundColor : new OV.RGBColor (255, 255, 255), + backgroundColor : new OV.RGBAColor (255, 255, 255, 255), defaultColor : new OV.RGBColor (200, 200, 200), edgeSettings : { showEdges : false, diff --git a/sandbox/embed_selfhost_code_file.html b/sandbox/embed_selfhost_code_file.html index 3cf31ea..d21fb21 100644 --- a/sandbox/embed_selfhost_code_file.html +++ b/sandbox/embed_selfhost_code_file.html @@ -26,7 +26,7 @@ // initialize the viewer with the parent element and some parameters let viewer = new OV.EmbeddedViewer (parentDiv, { - backgroundColor : new OV.RGBColor (255, 255, 255), + backgroundColor : new OV.RGBAColor (255, 255, 255, 255), defaultColor : new OV.RGBColor (200, 200, 200), edgeSettings : { showEdges : false, diff --git a/sandbox/embed_selfhost_code_url.html b/sandbox/embed_selfhost_code_url.html index c329fe4..2c98cac 100644 --- a/sandbox/embed_selfhost_code_url.html +++ b/sandbox/embed_selfhost_code_url.html @@ -31,7 +31,7 @@ new OV.Coord3D (0.0, 0.0, 0.0), new OV.Coord3D (0.0, 1.0, 0.0) ), - backgroundColor : new OV.RGBColor (255, 255, 255), + backgroundColor : new OV.RGBAColor (255, 255, 255, 255), defaultColor : new OV.RGBColor (200, 200, 200), edgeSettings : { showEdges : false, diff --git a/sandbox/embed_selfhost_multiple.html b/sandbox/embed_selfhost_multiple.html index 510a125..a057ee7 100644 --- a/sandbox/embed_selfhost_multiple.html +++ b/sandbox/embed_selfhost_multiple.html @@ -12,7 +12,7 @@ diff --git a/source/engine/main.js b/source/engine/main.js index 56bf70c..a57f37a 100644 --- a/source/engine/main.js +++ b/source/engine/main.js @@ -43,7 +43,7 @@ import { ArrayBufferToUtf8String, ArrayBufferToAsciiString, AsciiStringToArrayBu import { SetExternalLibLocation, GetExternalLibPath, LoadExternalLibrary } from './io/externallibs.js'; import { GetFileName, GetFileExtension, RequestUrl, ReadFile, TransformFileHostUrls, IsUrl, FileSource, FileFormat } from './io/fileutils.js'; import { TextWriter } from './io/textwriter.js'; -import { RGBColor, ColorComponentFromFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, HexStringToRGBColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js'; +import { RGBColor, RGBAColor, ColorComponentFromFloat, ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, HexStringToRGBColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js'; import { GeneratorParams, Generator, GeneratorHelper, GenerateCuboid, GenerateCone, GenerateCylinder, GenerateSphere, GeneratePlatonicSolid } from './model/generator.js'; import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType } from './model/material.js'; import { Mesh } from './model/mesh.js'; @@ -200,7 +200,9 @@ export { FileFormat, TextWriter, RGBColor, + RGBAColor, ColorComponentFromFloat, + ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, diff --git a/source/engine/model/color.js b/source/engine/model/color.js index 7cbbe4b..df12495 100644 --- a/source/engine/model/color.js +++ b/source/engine/model/color.js @@ -20,11 +20,40 @@ export class RGBColor } } +export class RGBAColor +{ + constructor (r, g, b, a) + { + this.r = r; // 0 .. 255 + this.g = g; // 0 .. 255 + this.b = b; // 0 .. 255 + this.a = a; // 0 .. 255 + } + + Set (r, g, b, a) + { + this.r = r; + this.g = g; + this.b = b; + this.a = a; + } + + Clone () + { + return new RGBAColor (this.r, this.g, this.b, this.a); + } +} + export function ColorComponentFromFloat (component) { return parseInt (Math.round (component * 255.0), 10); } +export function ColorComponentToFloat (component) +{ + return component / 255.0; +} + export function RGBColorFromFloatComponents (r, g, b) { return new RGBColor ( diff --git a/source/engine/parameters/parameterlist.js b/source/engine/parameters/parameterlist.js index 39ba3e5..697f107 100644 --- a/source/engine/parameters/parameterlist.js +++ b/source/engine/parameters/parameterlist.js @@ -1,5 +1,5 @@ import { Coord3D } from '../geometry/coord3d.js'; -import { RGBColor } from '../model/color.js'; +import { RGBAColor, RGBColor } from '../model/color.js'; import { Camera } from '../viewer/camera.js'; export let ParameterConverter = @@ -71,20 +71,32 @@ export let ParameterConverter = return camera; }, - ColorToString : function (color) + RGBColorToString : function (color) { if (color === null) { return null; } - let colorParameters = [ + return [ this.IntegerToString (color.r), this.IntegerToString (color.g), this.IntegerToString (color.b) ].join (','); - return colorParameters; }, - StringToColor : function (str) + RGBAColorToString : function (color) + { + if (color === null) { + return null; + } + return [ + this.IntegerToString (color.r), + this.IntegerToString (color.g), + this.IntegerToString (color.b), + this.IntegerToString (color.a) + ].join (','); + }, + + StringToRGBColor : function (str) { if (str === null || str.length === 0) { return null; @@ -93,11 +105,31 @@ export let ParameterConverter = if (paramParts.length !== 3) { return null; } - let color = new RGBColor ( + return new RGBColor ( this.StringToInteger (paramParts[0]), this.StringToInteger (paramParts[1]), this.StringToInteger (paramParts[2]) ); + }, + + StringToRGBAColor : function (str) + { + if (str === null || str.length === 0) { + return null; + } + let paramParts = str.split (','); + if (paramParts.length !== 3 && paramParts.length !== 4) { + return null; + } + let color = new RGBAColor ( + this.StringToInteger (paramParts[0]), + this.StringToInteger (paramParts[1]), + this.StringToInteger (paramParts[2]), + 255 + ); + if (paramParts.length === 4) { + color.a = this.StringToInteger (paramParts[3]); + } return color; }, @@ -136,7 +168,7 @@ export let ParameterConverter = } let edgeSettingsParameters = [ edgeSettings.showEdges ? 'on' : 'off', - this.ColorToString (edgeSettings.edgeColor), + this.RGBColorToString (edgeSettings.edgeColor), this.IntegerToString (edgeSettings.edgeThreshold), ].join (','); return edgeSettingsParameters; @@ -192,13 +224,13 @@ export class ParameterListBuilder AddBackgroundColor (background) { - this.AddUrlPart ('backgroundcolor', ParameterConverter.ColorToString (background)); + this.AddUrlPart ('backgroundcolor', ParameterConverter.RGBAColorToString (background)); return this; } AddDefaultColor (color) { - this.AddUrlPart ('defaultcolor', ParameterConverter.ColorToString (color)); + this.AddUrlPart ('defaultcolor', ParameterConverter.RGBColorToString (color)); return this; } @@ -259,13 +291,13 @@ export class ParameterListParser GetBackgroundColor () { let backgroundParams = this.GetKeywordParams ('backgroundcolor'); - return ParameterConverter.StringToColor (backgroundParams); + return ParameterConverter.StringToRGBAColor (backgroundParams); } GetDefaultColor () { let colorParams = this.GetKeywordParams ('defaultcolor'); - return ParameterConverter.StringToColor (colorParams); + return ParameterConverter.StringToRGBColor (colorParams); } GetEdgeSettings () diff --git a/source/engine/viewer/embeddedviewer.js b/source/engine/viewer/embeddedviewer.js index 1d451ea..f0de5cb 100644 --- a/source/engine/viewer/embeddedviewer.js +++ b/source/engine/viewer/embeddedviewer.js @@ -171,13 +171,13 @@ export function Init3DViewerElements (onReady) let backgroundColor = null; let backgroundColorParams = element.getAttribute ('backgroundcolor'); if (backgroundColorParams) { - backgroundColor = ParameterConverter.StringToColor (backgroundColorParams); + backgroundColor = ParameterConverter.StringToRGBAColor (backgroundColorParams); } let defaultColor = null; let defaultColorParams = element.getAttribute ('defaultcolor'); if (defaultColorParams) { - defaultColor = ParameterConverter.StringToColor (defaultColorParams); + defaultColor = ParameterConverter.StringToRGBColor (defaultColorParams); } let edgeSettings = null; diff --git a/source/engine/viewer/viewer.js b/source/engine/viewer/viewer.js index f1bdbb2..b571392 100644 --- a/source/engine/viewer/viewer.js +++ b/source/engine/viewer/viewer.js @@ -1,6 +1,6 @@ import { Coord3D, CoordDistance3D, SubCoord3D } from '../geometry/coord3d.js'; import { Direction } from '../geometry/geometry.js'; -import { RGBColorToHexString } from '../model/color.js'; +import { ColorComponentToFloat } from '../model/color.js'; import { ShadingType } from '../threejs/threeutils.js'; import { Camera } from './camera.js'; import { GetDomElementInnerDimensions } from './domutils.js'; @@ -266,8 +266,13 @@ export class Viewer SetBackgroundColor (color) { - let hexColor = '#' + RGBColorToHexString (color); - this.renderer.setClearColor (hexColor, 1.0); + let bgColor = new THREE.Color ( + ColorComponentToFloat (color.r), + ColorComponentToFloat (color.g), + ColorComponentToFloat (color.b) + ); + let alpha = ColorComponentToFloat (color.a); + this.renderer.setClearColor (bgColor, alpha); this.Render (); } diff --git a/source/website/cookiehandler.js b/source/website/cookiehandler.js index ef2b01d..c12ca42 100644 --- a/source/website/cookiehandler.js +++ b/source/website/cookiehandler.js @@ -49,18 +49,32 @@ export function CookieSetIntVal (key, value) CookieSetStringVal (key, value.toString ()); } -export function CookieGetColorVal (key, defVal) +export function CookieGetRGBColorVal (key, defVal) { let stringVal = CookieGetStringVal (key, null); if (stringVal === null) { return defVal; } - return ParameterConverter.StringToColor (stringVal); + return ParameterConverter.StringToRGBColor (stringVal); } -export function CookieSetColorVal (key, value) +export function CookieGetRGBAColorVal (key, defVal) { - CookieSetStringVal (key, ParameterConverter.ColorToString (value)); + let stringVal = CookieGetStringVal (key, null); + if (stringVal === null) { + return defVal; + } + return ParameterConverter.StringToRGBAColor (stringVal); +} + +export function CookieSetRGBColorVal (key, value) +{ + CookieSetStringVal (key, ParameterConverter.RGBColorToString (value)); +} + +export function CookieSetRGBAColorVal (key, value) +{ + CookieSetStringVal (key, ParameterConverter.RGBAColorToString (value)); } export function CookieClearVal (key) diff --git a/source/website/measuretool.js b/source/website/measuretool.js index a599b07..36bbc97 100644 --- a/source/website/measuretool.js +++ b/source/website/measuretool.js @@ -201,7 +201,7 @@ export class MeasureTool } ClearDomElement (this.panel); - if (IsDarkTextNeededForColor (this.settings.backgroundColor)) { + if (IsDarkTextNeededForColor (this.settings.backgroundColor.r, this.settings.backgroundColor.g, this.settings.backgroundColor.b)) { this.panel.style.color = '#000000'; } else { this.panel.style.color = '#ffffff'; diff --git a/source/website/settings.js b/source/website/settings.js index cba85b4..ca6086f 100644 --- a/source/website/settings.js +++ b/source/website/settings.js @@ -1,5 +1,5 @@ -import { RGBColor } from '../engine/model/color.js'; -import { CookieGetBoolVal, CookieGetColorVal, CookieGetIntVal, CookieGetStringVal, CookieSetBoolVal, CookieSetColorVal, CookieSetIntVal, CookieSetStringVal } from './cookiehandler.js'; +import { RGBAColor, RGBColor } from '../engine/model/color.js'; +import { CookieGetBoolVal, CookieGetRGBColorVal, CookieGetIntVal, CookieGetStringVal, CookieSetBoolVal, CookieSetRGBColorVal, CookieSetIntVal, CookieSetStringVal, CookieSetRGBAColorVal, CookieGetRGBAColorVal } from './cookiehandler.js'; export const Theme = { @@ -13,7 +13,7 @@ export class Settings { this.environmentMapName = 'fishermans_bastion'; this.backgroundIsEnvMap = false; - this.backgroundColor = new RGBColor (255, 255, 255); + this.backgroundColor = new RGBAColor (255, 255, 255, 255); this.defaultColor = new RGBColor (200, 200, 200); this.showEdges = false; this.edgeColor = new RGBColor (0, 0, 0); @@ -25,10 +25,10 @@ export class Settings { this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion'); this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false); - this.backgroundColor = CookieGetColorVal ('ov_background_color', new RGBColor (255, 255, 255)); - this.defaultColor = CookieGetColorVal ('ov_default_color', new RGBColor (200, 200, 200)); + this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255)); + this.defaultColor = CookieGetRGBColorVal ('ov_default_color', new RGBColor (200, 200, 200)); this.showEdges = CookieGetBoolVal ('ov_show_edges', false); - this.edgeColor = CookieGetColorVal ('ov_edge_color', new RGBColor (0, 0, 0)); + this.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0)); this.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1); this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light); } @@ -37,10 +37,10 @@ export class Settings { CookieSetStringVal ('ov_environment_map', this.environmentMapName); CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap); - CookieSetColorVal ('ov_background_color', this.backgroundColor); - CookieSetColorVal ('ov_default_color', this.defaultColor); + CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor); + CookieSetRGBColorVal ('ov_default_color', this.defaultColor); CookieSetBoolVal ('ov_show_edges', this.showEdges); - CookieSetColorVal ('ov_edge_color', this.edgeColor); + CookieSetRGBColorVal ('ov_edge_color', this.edgeColor); CookieSetIntVal ('ov_edge_threshold', this.edgeThreshold); CookieSetIntVal ('ov_theme_id', this.themeId); } diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index 84e1aeb..212ba84 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -1,4 +1,4 @@ -import { RGBColor, RGBColorToHexString } from '../engine/model/color.js'; +import { RGBColor, RGBColorToHexString, RGBAColor } from '../engine/model/color.js'; import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from '../engine/viewer/domutils.js'; import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js'; import { CalculatePopupPositionToElementTopLeft } from './dialogs.js'; @@ -34,12 +34,11 @@ function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange) }); pickr.on ('change', (color, source, instance) => { let rgbaColor = color.toRGBA (); - let ovColor = new RGBColor ( + onChange ( parseInt (rgbaColor[0], 10), parseInt (rgbaColor[1], 10), parseInt (rgbaColor[2], 10) ); - onChange (ovColor); }); return pickr; } @@ -199,8 +198,8 @@ class SettingsModelDisplaySection extends SettingsSection let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker'); AddDiv (backgroundColorDiv, null, 'Background Color'); let predefinedBackgroundColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; - this.backgroundColorPicker = AddColorPicker (backgroundColorInput, settings.backgroundColor, predefinedBackgroundColors, (color) => { - settings.backgroundColor = color; + this.backgroundColorPicker = AddColorPicker (backgroundColorInput, settings.backgroundColor, predefinedBackgroundColors, (r, g, b) => { + settings.backgroundColor = new RGBAColor (r, g, b, 255); callbacks.onBackgroundColorChange (); }); @@ -247,8 +246,8 @@ class SettingsModelDisplaySection extends SettingsSection let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker'); - this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (color) => { - settings.edgeColor = color; + this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (r, g, b) => { + settings.edgeColor = new RGBColor (r, g, b); callbacks.onEdgeColorChange (); }); AddDiv (edgeColorRow, null, 'Edge Color'); @@ -353,8 +352,8 @@ class SettingsImportParametersSection extends SettingsSection let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker'); AddDiv (defaultColorDiv, null, 'Default Color'); let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8']; - this.defaultColorPicker = AddColorPicker (defaultColorInput, settings.defaultColor, predefinedDefaultColors, (color) => { - settings.defaultColor = color; + this.defaultColorPicker = AddColorPicker (defaultColorInput, settings.defaultColor, predefinedDefaultColors, (r, g, b) => { + settings.defaultColor = new RGBColor (r, g, b); callbacks.onDefaultColorChange (); }); } @@ -481,10 +480,10 @@ export class SidebarSettingsPanel extends SidebarPanel this.appearanceSection.Init (this.settings, { onThemeChange : () => { if (this.settings.themeId === Theme.Light) { - this.settings.backgroundColor = new RGBColor (255, 255, 255); + this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255); this.settings.defaultColor = new RGBColor (200, 200, 200); } else if (this.settings.themeId === Theme.Dark) { - this.settings.backgroundColor = new RGBColor (42, 43, 46); + this.settings.backgroundColor = new RGBAColor (42, 43, 46, 255); this.settings.defaultColor = new RGBColor (200, 200, 200); } this.modelDisplaySection.Update (this.settings); diff --git a/source/website/utils.js b/source/website/utils.js index c30675d..da8b1e7 100644 --- a/source/website/utils.js +++ b/source/website/utils.js @@ -156,9 +156,9 @@ export function CreateInlineColorCircle (color) return circleDiv; } -export function IsDarkTextNeededForColor (color) +export function IsDarkTextNeededForColor (r, g, b) { - let intensity = color.r * 0.299 + color.g * 0.587 + color.b * 0.114; + let intensity = r * 0.299 + g * 0.587 + b * 0.114; return intensity > 186.0; } diff --git a/test/tests/parameterlist_test.js b/test/tests/parameterlist_test.js index 94ff0d9..2b4a2a8 100644 --- a/test/tests/parameterlist_test.js +++ b/test/tests/parameterlist_test.js @@ -12,7 +12,7 @@ describe ('Parameter List', function () { new OV.Coord3D (0.0, 0.0, 0.0), new OV.Coord3D (0.0, 0.0, 1.0) ); - let background = new OV.RGBColor (4, 5, 6); + let background = new OV.RGBAColor (4, 5, 6, 7); let color = new OV.RGBColor (1, 2, 3); let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList (); let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).GetParameterList (); @@ -28,7 +28,7 @@ describe ('Parameter List', function () { assert.strictEqual (urlParams2, 'camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000'); assert.strictEqual (urlParams3, 'model=a.txt,b.txt$camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000'); assert.strictEqual (urlParams4, 'model=a.txt,b.txt$camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000$defaultcolor=1,2,3'); - assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000$backgroundcolor=4,5,6$defaultcolor=1,2,3'); + assert.strictEqual (urlParams5, 'model=a.txt,b.txt$camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000$backgroundcolor=4,5,6,7$defaultcolor=1,2,3'); assert.strictEqual (urlParams6, 'edgesettings=on,1,2,3,15'); }); @@ -39,14 +39,14 @@ describe ('Parameter List', function () { new OV.Coord3D (0.0, 0.0, 0.0), new OV.Coord3D (0.0, 0.0, 1.0) ); - let background = new OV.RGBColor (4, 5, 6); + let background = new OV.RGBAColor (4, 5, 6, 7); let color = new OV.RGBColor (1, 2, 3); let urlParamsLegacy = 'a.txt,b.txt'; let urlParams1 = 'model=a.txt,b.txt'; let urlParams2 = 'camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000'; let urlParams3 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000'; let urlParams4 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$defaultcolor=1,2,3'; - let urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$backgroundcolor=4,5,6$defaultcolor=1,2,3'; + let urlParams5 = 'model=a.txt,b.txt$camera=1.0000,1.0000,1.0000,0.0000,0.0000,0.0000,0.0000,0.0000,1.0000$backgroundcolor=4,5,6,7$defaultcolor=1,2,3'; let urlParams6 = 'edgesettings=on,1,2,3,15'; let parserLegacy = OV.CreateUrlParser (urlParamsLegacy); assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls); diff --git a/website/embed.html b/website/embed.html index 3d15391..23eda1a 100644 --- a/website/embed.html +++ b/website/embed.html @@ -43,6 +43,13 @@ OV.StartEmbed ('../libs'); + +