Doni/ModelHandle
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use RGBAColor for background.

Browse Source
This commit is contained in:
kovacsv 2022-06-25 11:36:53 +02:00
parent c168f944f6
commit 62af23cafc
19 changed files with 216 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sandbox/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

76
sandbox/embed_background.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
<script type="text/javascript" src="../build/o3dv.min-dev.js"></script>
<script type='text/javascript'>
OV.Init3DViewerElements ();
</script>
<style>
html, body
{
background: url('background.png');
}
iframe, div.online_3d_viewer
{
float: left;
border: 1px solid #eeeeee;
margin: 0px 4px 4px 0px;
}
</style>
</head>
<body>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$backgroundcolor=255,0,0"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$backgroundcolor=255,0,0,128"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$backgroundcolor=255,0,0,128$envsettings=fishermans_bastion,on"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<iframe
src="../../website/embed.html#model=../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl$backgroundcolor=255,0,0,0"
width=360 height=240
style="border:1px solid #eeeeee;">
</iframe>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
backgroundcolor="255,0,0">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
backgroundcolor="255,0,0,128">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
backgroundcolor="255,0,0,128"
environmentmap="../../website/assets/envmaps/fishermans_bastion/posx.jpg,../../website/assets/envmaps/fishermans_bastion/negx.jpg,../../website/assets/envmaps/fishermans_bastion/posy.jpg,../../website/assets/envmaps/fishermans_bastion/negy.jpg,../../website/assets/envmaps/fishermans_bastion/posz.jpg,../../website/assets/envmaps/fishermans_bastion/negz.jpg"
environmentmapbg="true">
</div>
<div class="online_3d_viewer"
style="width: 360px; height: 240px;"
model="../../website/assets/models/solids.obj,../../website/assets/models/solids.mtl"
backgroundcolor="255,0,0,0">
</div>
</body>
</html>

20
sandbox/embed_iframe_scroll.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Online 3D Viewer</title>
</head>
<body>
<div style="background:#cccccc;width:800px;height:600px;"></div>
<iframe
src="../../website/embed.html#model=../test/testfiles/obj/hundred_cubes.obj,../test/testfiles/obj/hundred_cubes.mtl$camera=1,1,1,0,0,0,0,0,1"
width=800 height=600
style="border:1px solid #eeeeee;">
</iframe>
<div style="background:#cccccc;width:800px;height:2000px;"></div>
</body>
</html>

2
sandbox/embed_selfhost_calculate.html
View File

@ -34,7 +34,7 @@
// initialize the viewer with the parent element and some parameters // initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, { 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), defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : { edgeSettings : {
showEdges : false, showEdges : false,

2
sandbox/embed_selfhost_code_file.html
View File

@ -26,7 +26,7 @@
// initialize the viewer with the parent element and some parameters // initialize the viewer with the parent element and some parameters
let viewer = new OV.EmbeddedViewer (parentDiv, { 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), defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : { edgeSettings : {
showEdges : false, showEdges : false,

2
sandbox/embed_selfhost_code_url.html
View File

@ -31,7 +31,7 @@
new OV.Coord3D (0.0, 0.0, 0.0), new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 1.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), defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : { edgeSettings : {
showEdges : false, showEdges : false,

2
sandbox/embed_selfhost_multiple.html
View File

@ -12,7 +12,7 @@
<script type='text/javascript'> <script type='text/javascript'>
OV.Init3DViewerElements (function (viewers) { OV.Init3DViewerElements (function (viewers) {
let firstViewer = viewers[0].viewer; let firstViewer = viewers[0].viewer;
firstViewer.SetBackgroundColor (new OV.RGBColor (34, 34, 34)); firstViewer.SetBackgroundColor (new OV.RGBAColor (34, 34, 34, 255));
}); });
</script> </script>

4
source/engine/main.js
View File

@ -43,7 +43,7 @@ import { ArrayBufferToUtf8String, ArrayBufferToAsciiString, AsciiStringToArrayBu
import { SetExternalLibLocation, GetExternalLibPath, LoadExternalLibrary } from './io/externallibs.js'; import { SetExternalLibLocation, GetExternalLibPath, LoadExternalLibrary } from './io/externallibs.js';
import { GetFileName, GetFileExtension, RequestUrl, ReadFile, TransformFileHostUrls, IsUrl, FileSource, FileFormat } from './io/fileutils.js'; import { GetFileName, GetFileExtension, RequestUrl, ReadFile, TransformFileHostUrls, IsUrl, FileSource, FileFormat } from './io/fileutils.js';
import { TextWriter } from './io/textwriter.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 { 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 { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType } from './model/material.js';
import { Mesh } from './model/mesh.js'; import { Mesh } from './model/mesh.js';
@ -200,7 +200,9 @@ export {
FileFormat, FileFormat,
TextWriter, TextWriter,
RGBColor, RGBColor,
RGBAColor,
ColorComponentFromFloat, ColorComponentFromFloat,
ColorComponentToFloat,
RGBColorFromFloatComponents, RGBColorFromFloatComponents,
SRGBToLinear, SRGBToLinear,
LinearToSRGB, LinearToSRGB,

29
source/engine/model/color.js
View File

@ -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) export function ColorComponentFromFloat (component)
{ {
return parseInt (Math.round (component * 255.0), 10); return parseInt (Math.round (component * 255.0), 10);
} }
export function ColorComponentToFloat (component)
{
return component / 255.0;
}
export function RGBColorFromFloatComponents (r, g, b) export function RGBColorFromFloatComponents (r, g, b)
{ {
return new RGBColor ( return new RGBColor (

54
source/engine/parameters/parameterlist.js
View File

@ -1,5 +1,5 @@
import { Coord3D } from '../geometry/coord3d.js'; 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'; import { Camera } from '../viewer/camera.js';
export let ParameterConverter = export let ParameterConverter =
@ -71,20 +71,32 @@ export let ParameterConverter =
return camera; return camera;
}, },
ColorToString : function (color) RGBColorToString : function (color)
{ {
if (color === null) { if (color === null) {
return null; return null;
} }
let colorParameters = [ return [
this.IntegerToString (color.r), this.IntegerToString (color.r),
this.IntegerToString (color.g), this.IntegerToString (color.g),
this.IntegerToString (color.b) this.IntegerToString (color.b)
].join (','); ].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) { if (str === null || str.length === 0) {
return null; return null;
@ -93,11 +105,31 @@ export let ParameterConverter =
if (paramParts.length !== 3) { if (paramParts.length !== 3) {
return null; return null;
} }
let color = new RGBColor ( return new RGBColor (
this.StringToInteger (paramParts[0]), this.StringToInteger (paramParts[0]),
this.StringToInteger (paramParts[1]), this.StringToInteger (paramParts[1]),
this.StringToInteger (paramParts[2]) 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; return color;
}, },
@ -136,7 +168,7 @@ export let ParameterConverter =
} }
let edgeSettingsParameters = [ let edgeSettingsParameters = [
edgeSettings.showEdges ? 'on' : 'off', edgeSettings.showEdges ? 'on' : 'off',
this.ColorToString (edgeSettings.edgeColor), this.RGBColorToString (edgeSettings.edgeColor),
this.IntegerToString (edgeSettings.edgeThreshold), this.IntegerToString (edgeSettings.edgeThreshold),
].join (','); ].join (',');
return edgeSettingsParameters; return edgeSettingsParameters;
@ -192,13 +224,13 @@ export class ParameterListBuilder
AddBackgroundColor (background) AddBackgroundColor (background)
{ {
this.AddUrlPart ('backgroundcolor', ParameterConverter.ColorToString (background)); this.AddUrlPart ('backgroundcolor', ParameterConverter.RGBAColorToString (background));
return this; return this;
} }
AddDefaultColor (color) AddDefaultColor (color)
{ {
this.AddUrlPart ('defaultcolor', ParameterConverter.ColorToString (color)); this.AddUrlPart ('defaultcolor', ParameterConverter.RGBColorToString (color));
return this; return this;
} }
@ -259,13 +291,13 @@ export class ParameterListParser
GetBackgroundColor () GetBackgroundColor ()
{ {
let backgroundParams = this.GetKeywordParams ('backgroundcolor'); let backgroundParams = this.GetKeywordParams ('backgroundcolor');
return ParameterConverter.StringToColor (backgroundParams); return ParameterConverter.StringToRGBAColor (backgroundParams);
} }
GetDefaultColor () GetDefaultColor ()
{ {
let colorParams = this.GetKeywordParams ('defaultcolor'); let colorParams = this.GetKeywordParams ('defaultcolor');
return ParameterConverter.StringToColor (colorParams); return ParameterConverter.StringToRGBColor (colorParams);
} }
GetEdgeSettings () GetEdgeSettings ()

4
source/engine/viewer/embeddedviewer.js
View File

@ -171,13 +171,13 @@ export function Init3DViewerElements (onReady)
let backgroundColor = null; let backgroundColor = null;
let backgroundColorParams = element.getAttribute ('backgroundcolor'); let backgroundColorParams = element.getAttribute ('backgroundcolor');
if (backgroundColorParams) { if (backgroundColorParams) {
backgroundColor = ParameterConverter.StringToColor (backgroundColorParams); backgroundColor = ParameterConverter.StringToRGBAColor (backgroundColorParams);
} }
let defaultColor = null; let defaultColor = null;
let defaultColorParams = element.getAttribute ('defaultcolor'); let defaultColorParams = element.getAttribute ('defaultcolor');
if (defaultColorParams) { if (defaultColorParams) {
defaultColor = ParameterConverter.StringToColor (defaultColorParams); defaultColor = ParameterConverter.StringToRGBColor (defaultColorParams);
} }
let edgeSettings = null; let edgeSettings = null;

11
source/engine/viewer/viewer.js
View File

@ -1,6 +1,6 @@
import { Coord3D, CoordDistance3D, SubCoord3D } from '../geometry/coord3d.js'; import { Coord3D, CoordDistance3D, SubCoord3D } from '../geometry/coord3d.js';
import { Direction } from '../geometry/geometry.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 { ShadingType } from '../threejs/threeutils.js';
import { Camera } from './camera.js'; import { Camera } from './camera.js';
import { GetDomElementInnerDimensions } from './domutils.js'; import { GetDomElementInnerDimensions } from './domutils.js';
@ -266,8 +266,13 @@ export class Viewer
SetBackgroundColor (color) SetBackgroundColor (color)
{ {
let hexColor = '#' + RGBColorToHexString (color); let bgColor = new THREE.Color (
this.renderer.setClearColor (hexColor, 1.0); ColorComponentToFloat (color.r),
ColorComponentToFloat (color.g),
ColorComponentToFloat (color.b)
);
let alpha = ColorComponentToFloat (color.a);
this.renderer.setClearColor (bgColor, alpha);
this.Render (); this.Render ();
} }

22
source/website/cookiehandler.js
View File

@ -49,18 +49,32 @@ export function CookieSetIntVal (key, value)
CookieSetStringVal (key, value.toString ()); CookieSetStringVal (key, value.toString ());
} }
export function CookieGetColorVal (key, defVal) export function CookieGetRGBColorVal (key, defVal)
{ {
let stringVal = CookieGetStringVal (key, null); let stringVal = CookieGetStringVal (key, null);
if (stringVal === null) { if (stringVal === null) {
return defVal; 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) export function CookieClearVal (key)

2
source/website/measuretool.js
View File

@ -201,7 +201,7 @@ export class MeasureTool
} }
ClearDomElement (this.panel); 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'; this.panel.style.color = '#000000';
} else { } else {
this.panel.style.color = '#ffffff'; this.panel.style.color = '#ffffff';

18
source/website/settings.js
View File

@ -1,5 +1,5 @@
import { RGBColor } from '../engine/model/color.js'; import { RGBAColor, RGBColor } from '../engine/model/color.js';
import { CookieGetBoolVal, CookieGetColorVal, CookieGetIntVal, CookieGetStringVal, CookieSetBoolVal, CookieSetColorVal, CookieSetIntVal, CookieSetStringVal } from './cookiehandler.js'; import { CookieGetBoolVal, CookieGetRGBColorVal, CookieGetIntVal, CookieGetStringVal, CookieSetBoolVal, CookieSetRGBColorVal, CookieSetIntVal, CookieSetStringVal, CookieSetRGBAColorVal, CookieGetRGBAColorVal } from './cookiehandler.js';
export const Theme = export const Theme =
{ {
@ -13,7 +13,7 @@ export class Settings
{ {
this.environmentMapName = 'fishermans_bastion'; this.environmentMapName = 'fishermans_bastion';
this.backgroundIsEnvMap = false; 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.defaultColor = new RGBColor (200, 200, 200);
this.showEdges = false; this.showEdges = false;
this.edgeColor = new RGBColor (0, 0, 0); this.edgeColor = new RGBColor (0, 0, 0);
@ -25,10 +25,10 @@ export class Settings
{ {
this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion'); this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion');
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false); this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
this.backgroundColor = CookieGetColorVal ('ov_background_color', new RGBColor (255, 255, 255)); this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255));
this.defaultColor = CookieGetColorVal ('ov_default_color', new RGBColor (200, 200, 200)); this.defaultColor = CookieGetRGBColorVal ('ov_default_color', new RGBColor (200, 200, 200));
this.showEdges = CookieGetBoolVal ('ov_show_edges', false); 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.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light); this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
} }
@ -37,10 +37,10 @@ export class Settings
{ {
CookieSetStringVal ('ov_environment_map', this.environmentMapName); CookieSetStringVal ('ov_environment_map', this.environmentMapName);
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap); CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
CookieSetColorVal ('ov_background_color', this.backgroundColor); CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
CookieSetColorVal ('ov_default_color', this.defaultColor); CookieSetRGBColorVal ('ov_default_color', this.defaultColor);
CookieSetBoolVal ('ov_show_edges', this.showEdges); 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_edge_threshold', this.edgeThreshold);
CookieSetIntVal ('ov_theme_id', this.themeId); CookieSetIntVal ('ov_theme_id', this.themeId);
} }

21
source/website/sidebarsettingspanel.js
View File

@ -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 { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from '../engine/viewer/domutils.js';
import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js'; import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js';
import { CalculatePopupPositionToElementTopLeft } from './dialogs.js'; import { CalculatePopupPositionToElementTopLeft } from './dialogs.js';
@ -34,12 +34,11 @@ function AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange)
}); });
pickr.on ('change', (color, source, instance) => { pickr.on ('change', (color, source, instance) => {
let rgbaColor = color.toRGBA (); let rgbaColor = color.toRGBA ();
let ovColor = new RGBColor ( onChange (
parseInt (rgbaColor[0], 10), parseInt (rgbaColor[0], 10),
parseInt (rgbaColor[1], 10), parseInt (rgbaColor[1], 10),
parseInt (rgbaColor[2], 10) parseInt (rgbaColor[2], 10)
); );
onChange (ovColor);
}); });
return pickr; return pickr;
} }
@ -199,8 +198,8 @@ class SettingsModelDisplaySection extends SettingsSection
let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker'); let backgroundColorInput = AddDiv (backgroundColorDiv, 'ov_color_picker');
AddDiv (backgroundColorDiv, null, 'Background Color'); AddDiv (backgroundColorDiv, null, 'Background Color');
let predefinedBackgroundColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; let predefinedBackgroundColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
this.backgroundColorPicker = AddColorPicker (backgroundColorInput, settings.backgroundColor, predefinedBackgroundColors, (color) => { this.backgroundColorPicker = AddColorPicker (backgroundColorInput, settings.backgroundColor, predefinedBackgroundColors, (r, g, b) => {
settings.backgroundColor = color; settings.backgroundColor = new RGBAColor (r, g, b, 255);
callbacks.onBackgroundColorChange (); callbacks.onBackgroundColorChange ();
}); });
@ -247,8 +246,8 @@ class SettingsModelDisplaySection extends SettingsSection
let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker'); let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker');
this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (color) => { this.edgeColorPicker = AddColorPicker (edgeColorInput, settings.edgeColor, predefinedEdgeColors, (r, g, b) => {
settings.edgeColor = color; settings.edgeColor = new RGBColor (r, g, b);
callbacks.onEdgeColorChange (); callbacks.onEdgeColorChange ();
}); });
AddDiv (edgeColorRow, null, 'Edge Color'); AddDiv (edgeColorRow, null, 'Edge Color');
@ -353,8 +352,8 @@ class SettingsImportParametersSection extends SettingsSection
let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker'); let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker');
AddDiv (defaultColorDiv, null, 'Default Color'); AddDiv (defaultColorDiv, null, 'Default Color');
let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8']; let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'];
this.defaultColorPicker = AddColorPicker (defaultColorInput, settings.defaultColor, predefinedDefaultColors, (color) => { this.defaultColorPicker = AddColorPicker (defaultColorInput, settings.defaultColor, predefinedDefaultColors, (r, g, b) => {
settings.defaultColor = color; settings.defaultColor = new RGBColor (r, g, b);
callbacks.onDefaultColorChange (); callbacks.onDefaultColorChange ();
}); });
} }
@ -481,10 +480,10 @@ export class SidebarSettingsPanel extends SidebarPanel
this.appearanceSection.Init (this.settings, { this.appearanceSection.Init (this.settings, {
onThemeChange : () => { onThemeChange : () => {
if (this.settings.themeId === Theme.Light) { 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); this.settings.defaultColor = new RGBColor (200, 200, 200);
} else if (this.settings.themeId === Theme.Dark) { } 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.settings.defaultColor = new RGBColor (200, 200, 200);
} }
this.modelDisplaySection.Update (this.settings); this.modelDisplaySection.Update (this.settings);

4
source/website/utils.js
View File

@ -156,9 +156,9 @@ export function CreateInlineColorCircle (color)
return circleDiv; 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; return intensity > 186.0;
} }

8
test/tests/parameterlist_test.js
View File

@ -12,7 +12,7 @@ describe ('Parameter List', function () {
new OV.Coord3D (0.0, 0.0, 0.0), new OV.Coord3D (0.0, 0.0, 0.0),
new OV.Coord3D (0.0, 0.0, 1.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 color = new OV.RGBColor (1, 2, 3);
let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList (); let urlParams1 = OV.CreateUrlBuilder ().AddModelUrls (modelUrls).GetParameterList ();
let urlParams2 = OV.CreateUrlBuilder ().AddCamera (camera).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 (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 (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 (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'); 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, 0.0),
new OV.Coord3D (0.0, 0.0, 1.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 color = new OV.RGBColor (1, 2, 3);
let urlParamsLegacy = 'a.txt,b.txt'; let urlParamsLegacy = 'a.txt,b.txt';
let urlParams1 = 'model=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 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 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 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 urlParams6 = 'edgesettings=on,1,2,3,15';
let parserLegacy = OV.CreateUrlParser (urlParamsLegacy); let parserLegacy = OV.CreateUrlParser (urlParamsLegacy);
assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls); assert.deepStrictEqual (parserLegacy.GetModelUrls (), modelUrls);

7
website/embed.html
View File

@ -43,6 +43,13 @@
OV.StartEmbed ('../libs'); OV.StartEmbed ('../libs');
</script> </script>
<!-- embed init end --> <!-- embed init end -->
<style>
html, body
{
background: transparent;
}
</style>
</head> </head>
<body> <body>