Skip to content
GitLab
Commit 43137159 authored by Koukofikis's avatar Koukofikis
Browse files

Update colorbrewer2.html

parent 7a527878
Hide whitespace changes
Inline Side-by-side
Showing
with 133 additions and 133 deletions
+133 -133
public/X3DOMTutorial/colorbrewer2.html
+ 133
- 133
View file @ 43137159
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Material brewer</title> <title>Material brewer</title>
<!-- source Colorpicker slider: http://jqueryui.com/slider/#colorpicker --> <!-- source Colorpicker slider: http://jqueryui.com/slider/#colorpicker -->
<link rel="stylesheet" type="text/css" href="x3dom.css"> <link rel="stylesheet" type="text/css" href="x3dom.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</link> </link>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</link> </link>
<style> <style>
#red, #red,
#green, #green,
#blue { #blue {
float: left; float: left;
clear: left; clear: left;
width: 300px; width: 300px;
margin: 15px; margin: 15px;
} }
#red .ui-slider-range { #red .ui-slider-range {
background: #ef2929; background: #ef2929;
} }
#red .ui-slider-handle { #red .ui-slider-handle {
border-color: #ef2929; border-color: #ef2929;
} }
#green .ui-slider-range { #green .ui-slider-range {
background: #8ae234; background: #8ae234;
} }
#green .ui-slider-handle { #green .ui-slider-handle {
border-color: #8ae234; border-color: #8ae234;
} }
#blue .ui-slider-range { #blue .ui-slider-range {
background: #729fcf; background: #729fcf;
} }
#blue .ui-slider-handle { #blue .ui-slider-handle {
border-color: #729fcf; border-color: #729fcf;
} }
</style> </style>
</head> </head>
<body class="ui-widget-content" style="border:0;"> <body class="ui-widget-content" style="border:0;">
<table width="100%" height="85%" border="0"> <table width="100%" height="85%" border="0">
<tr> <tr>
<td width="50%" align="center" valign="top" scope="col"> <td width="50%" align="center" valign="top" scope="col">
<X3D id="shapedata" width="600px" height="600px" style="float:left"> <X3D id="shapedata" width="600px" height="600px" style="float:left">
<Scene> <Scene>
<Shape> <Shape>
<Appearance> <Appearance>
<Material id="material" diffuseColor="0.980, 0.502, 0.447"> </Material> <Material id="material" diffuseColor="0.980, 0.502, 0.447"> </Material>
</Appearance> </Appearance>
<Sphere radius="2.0"> </Sphere> <Sphere radius="2.0"> </Sphere>
</Shape> </Shape>
</Scene> </Scene>
</X3D> </X3D>
</td> </td>
<td width="50%" align="left" valign="top" scope="col"> <td width="50%" align="left" valign="top" scope="col">
<p>The following example will show you haw to interactively modify the 3D scene.</p> <p>The following example will show you haw to interactively modify the 3D scene.</p>
<div id="red"></div> <div id="red"></div>
<div id="green"></div> <div id="green"></div>
<div id="blue"></div> <div id="blue"></div>
<p> <p>
<br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>
The diffuse color of a material will be interactively changed. The diffuse color of a material will be interactively changed.
A JavaScript <a href="http://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used A JavaScript <a href="https://jqueryui.com/slider/#colorpicker target=" _blank"> RGB color picker </a> is used
and modified. and modified.
If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to If the RGB color value is changed, the diffuse material of the sphere shall be changed as well. So we need to
get the Material node first. get the Material node first.
This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id. This is done by the getElementById function in X3DOM. Of course, the Material node needs to have an unique id.
<pre> <pre>
&lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt; &lt;X3D id="shapedata" width="600px" height="600px" style="float:left"&gt;
&lt;Scene&gt; &lt;Scene&gt;
&lt;Shape&gt; &lt;Shape&gt;
&lt;Appearance&gt; &lt;Appearance&gt;
&lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt; &lt;Material id="material" diffuseColor="0.980, 0.502, 0.447"&gt; &lt;/Material&gt;
&lt;/Appearance&gt; &lt;/Appearance&gt;
&lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt; &lt;Sphere radius="2.0"&gt; &lt;/Sphere&gt;
&lt;/Shape&gt; &lt;/Shape&gt;
&lt;/Scene&gt; &lt;/Scene&gt;
&lt;/X3D&gt; &lt;/X3D&gt;
</pre> </pre>
<br> <br>
For example, if the diffuse color should be set to red, the Material node is referenced by its id and the For example, if the diffuse color should be set to red, the Material node is referenced by its id and the
attribute diffuseColor is set to attribute diffuseColor is set to
"1.0 0.0 0.0". The attribute value is always a string. "1.0 0.0 0.0". The attribute value is always a string.
<pre> <pre>
var mat = document.getElementById("material"); var mat = document.getElementById("material");
mat.setAttribute("diffuseColor", "1.0 0.0 0.0"); mat.setAttribute("diffuseColor", "1.0 0.0 0.0");
</pre> </pre>
In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255, In the example, the RGB value is fetched from the slider. As the slider gives the RGB values between 0 and 255,
they have to be transformed to they have to be transformed to
arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string. arithmetic values between 0.0 and 1.0. After that, the RBG value has to be formatted as string.
<pre> <pre>
var mat = document.getElementById("material"); var mat = document.getElementById("material");
rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255; rgbstring = " "+ red/255 + " " + green/255 + " " + blue/255;
mat.setAttribute("diffuseColor", rgbstring); mat.setAttribute("diffuseColor", rgbstring);
</pre> </pre>
</p> </p>
</td> </td>
<script type="text/javascript" src="x3dom.js"></script> <script type="text/javascript" src="x3dom.js"></script>
<script> <script>
function refreshDiffuseMaterial() { function refreshDiffuseMaterial() {
var red = $("#red").slider("value"), var red = $("#red").slider("value"),
green = $("#green").slider("value"), green = $("#green").slider("value"),
blue = $("#blue").slider("value"); blue = $("#blue").slider("value");
var mat = document.getElementById("material"); var mat = document.getElementById("material");
rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255; rgbstring = " " + red / 255 + " " + green / 255 + " " + blue / 255;
mat.setAttribute("diffuseColor", rgbstring); mat.setAttribute("diffuseColor", rgbstring);
} }
$(function () { $(function () {
$("#red, #green, #blue").slider({ $("#red, #green, #blue").slider({
orientation: "horizontal", orientation: "horizontal",
range: "min", range: "min",
max: 255, max: 255,
value: 127, value: 127,
slide: refreshDiffuseMaterial, slide: refreshDiffuseMaterial,
change: refreshDiffuseMaterial change: refreshDiffuseMaterial
}); });
$("#red").slider("value", 255); $("#red").slider("value", 255);
$("#green").slider("value", 140); $("#green").slider("value", 140);
$("#blue").slider("value", 60); $("#blue").slider("value", 60);
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal