I show the 3D object in ArFragment. So I put .obj file and .mtl file at sampledata folder. And I right click on obj file, and select Import Sceneform Asset to add .sfa / .sfb file.
So I can show the 3d object when I mark the image, but the object is too big.
This is my .sfa file detail
{
bound_relative_root: {
x: 0.5,
y: 0,
z: 0.5,
},
materials: [
{
name: "Material.001",
parameters: [
{
baseColor: null,
},
{
baseColorTint: [
0.80000000000000004,
0.80000000000000004,
0.80000000000000004,
1,
],
},
{
metallic: 1,
},
{
roughness: 0.120695,
},
{
opacity: null,
},
],
source: "build/sceneform_sdk/default_materials/obj_material.sfm",
},
],
model: {
attributes: [
"Position",
"TexCoord",
"Orientation",
],
collision: {},
file: "sampledata/dongbaek.obj",
name: "dongbaek",
recenter: "root",
scale: 0.200000
},
version: "0.52:1",
}
I think it can resize by scale part, but I change the value, it dosen't change. same size
So How I can resize 3d object?
Is there any problem at add 3d object file to make .sfa / .sfb file?(Import Sceneform Asset)
If you know about it, please help me.
Object scaling is changed by the Scale Controller. By setting minScale and maxScale value. Before setting parent - anchor node. See example below.
// Create the Anchor.
Anchor anchor = hitResult.createAnchor();
AnchorNode anchorNode = new AnchorNode(anchor);
anchorNode.setParent(arFragment.getArSceneView().getScene());
// Create the transformable andy and add it to the anchor.
TransformableNode node = new TransformableNode(arFragment.getTransformationSystem());
// Maxscale must be greater than minscale
node.getScaleController().setMaxScale(0.02f);
node.getScaleController().setMinScale(0.01f);
node.setParent(anchorNode);
node.setRenderable(renderable);
node.select();
Different approaches depending on your project:
Change the scale value, regenerate your sfb files
Put your node into a TransformableNode and let ScaleController scale your model
Directly use setLocalScale or setWorldScale
Scale your .obj file, and then generate the .sfa and .sfb files
Use the following code to resize your model in ARCore:
TransformationSystem transSys;
transSys = MainActivity.getArFragment().getTransformationSystem();
TransformableNode myNode = new TransformableNode(transSys);
myNode.setLocalScale(new Vector3(0.25f, 0.25f, 0.25f));
myNode.setParent(anchorNode);
//myNode.setParent(sceneView.getScene());
myNode.setRenderable(myModelRenderable);
sceneView.getScene().addChild(node);
myNode.select();
Related
I have the following problem with com.byteowls.vaadin.chartjs ChartJs - I do not know how to remove gridLines conditionally without removing the labels. Here is the following code I have for creating the ChartJs :
`
BarChartOptions options = barChartConfig.options();
options.title().text(title).display(true);
options.legend().position(Position.RIGHT);
options.tooltips().mode(InteractionMode.X);
options.legend().labels().boxWidth(10).fontSize(10);
options.tooltips().position(Tooltips.PositionMode.NEAREST);
LinearScale yScale = new LinearScale();
yScale.stacked(true);
yScale.ticks().beginAtZero(true);
options.scales().add(Axis.Y, yScale);
DefaultScale xScale = new DefaultScale();
xScale.stacked(true);
xScale.ticks().autoSkip(false).callback("function(value,index,values){\n" +
"if(index % 2 !== 0){\n" +
" return undefined;\n" +
"\n" +
"} \n" +
"return value;\n" +
"\n" +
"}");
xScale.gridLines().lineWidth(1).color("rgb(0,0,0)");
options.scales().add(Axis.X, xScale);
ChartJs horizontalStackedChart = new ChartJs(barChartConfig);
horizontalStackedChart.setHeight(70, Sizeable.Unit.PERCENTAGE);
horizontalStackedChart.setWidthFull();
return horizontalStackedChart;`
and here is the Image: Chart Image 1
And there is the image I want to happen but with the labels from the previous chart: Chart Image 2
After i found on internet that there is a callback functions for the ticks are tried many ways but no one helps. I want to show gridLines after two datasets how it looks like in 'Chart Image 2' but the labels are gone. And I do not understand why this is happening. Is it possible actually?
Thanks in advance for the help!
You can set the lineColor of your xAxis gridLines to a function where you set the desired lines that you want to remove to a fully opague collor.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red'
}]
},
options: {
scales: {
x: {
grid: {
color: (ctx) => (ctx.index % 2 === 0 ? 'rgba(0,0,0,0)' : 'red')
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
I am having trouble finding the documentation on updating format with the API in Java. My goal is to modify row heights and cell background colors. Does anyone know how this is accomplished or could link me to the documentation, please?
I am using Google Sheet API v4.
EDIT:
As I review, I realize now that the Google API docs are actually easy to read. Thanks to all who helped me with this.
Adjusting column width or row height
You can use spreadsheets.batchUpdate to modify row height using updateDimensionProperties request
Setting cell background color
You can use spreadsheets.batchUpdate to modify background color using updateCells request
Background color can be configured in rows -> values -> userEnteredFormat -> backgroundColor
Color values to be used for red, blue and green ranges from 0 - 1.
range determines the range of cells where the new cell properties will be applied
Example on how to set color to blue:
blue = 255/255 = 1
red = 0/255 = 0
green = 0/255 = 0
Sample Request Body:
{
"requests": [
{
"updateCells": {
"rows": [
{
"values": [
{
"userEnteredFormat": {
"backgroundColor": {
"blue": 1,
"red": 0,
"green": 0
}
}
}
]
}
],
"range": {
"endColumnIndex": 1,
"endRowIndex": 1,
"sheetId": 0,
"startColumnIndex": 0,
"startRowIndex": 0
},
"fields": "userEnteredFormat"
}
},
{
"updateDimensionProperties": {
"range": {
"sheetId": 0,
"dimension": "ROWS",
"startIndex": 0,
"endIndex": 2
},
"properties": {
"pixelSize": 160
},
"fields": "pixelSize"
}
}
]
}
Sample Output:
Additional References:
Java Quickstart - How to use Sheets API
Basic Formatting - How to change appearance of sheets and cells
Sheets API -Samples
Sheets API - REST Resources
I'm wondering if it's possible to label the radial axis' for each category differently which appear only when hovering over a value. Probably easiest to explain with an example. So in this picture, the "English" marks have a range of 50 -100 which pops up when I hover over one of the values on that axis
Radar chart axis 1
What I then want to happen is when i hover over the "Behaviour" category for example is the radial axis labels for that category to show up which are labelled differently.
Radar chart Axis 2
I know this might be difficult (or impossible) to do but is there a creative way in ChartJS or HighCharts where this might be possible?
Thanks!
This is possible with Highcharts. You need to only find a common scale, use multiple y-axis and mock labels and tooltip values, for example:
var yLabels = [
[60, 70, 80, 90, 100],
['Average', 'Satisfactory', 'Good', 'Excellent', 'Outstanding']
];
Highcharts.chart('container', {
yAxis: [...],
xAxis: {
lineWidth: 0,
tickmarkPlacement: 'on',
categories: ['English', 'Behaviour', 'Physics', 'Chemistry', 'Biology', 'History']
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points,
returnStr = this.x;
points.forEach(function(point) {
returnStr += (
'<br />' + point.series.name + ': ' + yLabels[point.point.x][point.y - 1]
);
});
return returnStr;
}
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: true
}
});
},
mouseOut: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: false
}
}, false);
}
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/82dyogrp/
API Reference:
https://api.highcharts.com/highcharts/pane
https://api.highcharts.com/highcharts/yAxis
https://api.highcharts.com/highcharts/tooltip.formatter
I'm making a game and I want to change the texture on a model depending on associated data but no matter what I as soon as the texture should change the model becomes invisible the model is in g3dj format here is the materials portion
"materials":[
{
"id":"default",
"diffuse": [0.640000, 0.640000, 0.640000],
},
{
"id":"plant fibre",
"textures":[
{
"id": "Texture.001",
"filename": "graphics/plant fibre.png",
"type": "DIFFUSE"
}
]
},
{
"id":"logs",
"textures":[
{
"id": "Texture.001",
"filename": "graphics/logs.png",
"type": "DIFFUSE"
}
]
}
],
And here is my latest attempt
self.getMaterial("default").clear();
self.getMaterial("default").set(self.getMaterial(extra.getString("item")).get(TextureAttribute.Diffuse));
I have already tried everything I found by searching online and it all had the same problem
Turns out unused materials aren't passed to the modelInstance I just had to modify the model then create and render the modelInstance
Ps: this always happens I get so fed up with something that I post a question here and then solve the problem within 24 hours
// trees
val loader: ObjLoader = ObjLoader()
tree = loader.loadModel(Gdx.files.internal("data/tree2.obj"))
treeInstance = ModelInstance(tree)
for (m in treeInstance!!.materials) {
println("material id: ${m.id}")
m.remove(ColorAttribute.Emissive)
if (m.id == "Leafs" || m.id == "Leafs2") {
m.set(ColorAttribute.createDiffuse(Color.FOREST))
} else {
m.set(ColorAttribute.createDiffuse(Color.BROWN))
}
}
I am creating a small program that will make an SVG file based on options I select. The problem I am having is that JSVGCanvas (from Batik) will not seem to render gradients that are made (using the DOM api). The weird part is, if I export the file and open it in Inkscape or with the test class here, it (the gradient) renders! Here is all the info I think may be important:
Batik Version: 1.7
Gradient Build Code:
public Element parse(Document doc, String id) { //This is inside a gradient object.
Element defs = doc.createElementNS(Main.svgNS, "defs"); //Since multiple defs work in an SVG (or at least Inkscape), I add a defs tag per set of gradients.
defs.setAttribute("id", id); //Sets the id of the defs tag.
for (JsonElement je : json.getAsJsonArray("Linears")) { //I use GSON to store data, I am iterating through all objects in the Linears array.
if (je.isJsonObject()) { //Just a type check.
JsonObject jo = je.getAsJsonObject();
Element lin = doc.createElementNS(Main.svgNS, "linearGradient"); //Creates the linearGradient element.
for (Entry<String, JsonElement> entry : jo.entrySet()) { //For all elements other than Stops (it is an array) we want to set the attribute.
if (!entry.getKey().equals("Stops")) {
lin.setAttribute(entry.getKey(), entry.getValue().getAsJsonPrimitive().getAsString());
}
}
for (JsonElement stop : jo.getAsJsonArray("Stops")) { //For all objects in stops we want to add a stop.
Element el = doc.createElementNS(Main.svgNS, "stop"); //Creates a stop element.
for (Entry<String, JsonElement> entry : stop.getAsJsonObject().entrySet()) {
if (entry.getValue().isJsonObject()) {
el.setAttribute(entry.getKey(), parseObject(entry.getValue().getAsJsonObject())); //The parseObject method makes a string based on the JsonObject (this is used to get "variables" such as colors).
} else {
el.setAttribute(entry.getKey(), entry.getValue().getAsString());
}
}
lin.appendChild(el); //Add stop to the linear gradient.
}
defs.appendChild(lin); //Add the linear gradient to defs.
}
}
for (JsonElement je : json.getAsJsonArray("Radials")) { //Loops through all the radial gradients.
if (je.isJsonObject()) { //Type check.
JsonObject jo = je.getAsJsonObject();
Element rad = doc.createElementNS(Main.svgNS, "radialGradient"); //Creates the radialGradient element.
for (Entry<String, JsonElement> entry : jo.entrySet()) {
if (entry.getValue().isJsonPrimitive()) {
rad.setAttribute(entry.getKey(), entry.getValue().getAsJsonPrimitive().getAsString());
} else {
rad.setAttribute(entry.getKey(), parseObject(entry.getValue().getAsJsonObject()));
}
}
defs.appendChild(rad); //Adds the radial gradient to defs.
}
}
cache = defs;
return cache; //We return the defs to be added in the main build code.
}
Document Creation:
Constructor:
impl = SVGDOMImplementation.getDOMImplementation();
Build Method:
doc = (SVGDocument) impl.createDocument(svgNS, "svg", null);
JSVGCanvas Creation:
preview = new JSVGCanvas();
preview.setEnableImageZoomInteractor(true);
preview.setEnablePanInteractor(true);
Here is what the gradients part of my template files looks like (JSON):
"Gradients": {
"Radials": [
{
"gradientTransform": "matrix(0.96774313,-1.5022501e-7,3.5488612e-7,1.483871,-201.69415,-217.84922)",
"inkscape:collect": "always",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"id": "radialGradient5607",
"gradientUnits": "userSpaceOnUse",
"xlink:show": "other",
"xlink:type": "simple",
"r": "15.5",
"cx":{
pre:"",
var:"X",
add:327,
post:""
},
"fx":{
pre:"",
var:"Y",
add:327,
post:""
},
"cy": {
pre:"",
var:"X",
add:209,
post:""
},
"fy": {
pre:"",
var:"Y",
add:209,
post:""
},
"xlink:href": "#linearGradient4114",
"xlink:actuate": "onLoad"
}
],
"Linears": [
{
"xlink:actuate": "onLoad",
"xlink:type": "simple",
"id": "linearGradient4114",
"xlink:show": "other",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"Stops": [
{
"offset": "0",
"style": {
"pre": "stop-color:",
"var": "Eye",
"post": ";stop-opacity:1;"
},
"id": "stop4116"
},
{
"style": {
"pre": "stop-color:",
"var": "Eye2",
"post": ";stop-opacity:1;"
},
"offset": "0.5",
"id": "stop4122"
},
{
"offset": "1",
"style": {
"pre": "stop-color:",
"var": "Eye3",
"post": ";stop-opacity:1;"
},
"id": "stop4118"
}
]
}
]
}
That part of the config file then gets turned into:
<defs id="defs0">
<linearGradient
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"
xlink:actuate="onLoad"
id="linearGradient4114"
xlink:show="other">
<stop
style="stop-color:#d80a00;stop-opacity:1;"
offset="0"
id="stop4116"/>
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0.5"
id="stop4122"/>
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="1"
id="stop4118"/>
</linearGradient>
<radialGradient
gradientTransform="matrix(0.96774313,-1.5022501e-7,3.5488612e-7,1.483871,-201.69415,-217.84922)"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:type="simple"
xlink:href="#linearGradient4114"
id="radialGradient5607"
xlink:show="other"
gradientUnits="userSpaceOnUse"
r="15.5"
xlink:actuate="onLoad"
cx="392.0"
fx="427.0"
cy="274.0"
fy="309.0"
inkscape:collect="always"/>
I assume this is a namespace thing (I don't quite get XML/SVG). I assume this because I have had an error like this before, where it wouldn't work in the preview but it would work after export (and loading the svg file). Note that this is a quick home application, so the code isn't the finest (nor the design), but it works for what I am doing. Also note that I do not type these config files by hand (that would be insane), I have a converter that converts an svg file to these configs (yes it sounds like going back and forth but I am combining multiple of these configs to make an image).
I figured it out after messing around yesterday and today. The xlink:href attribute requires that you set its namespace to be xlink's. For my project that meant just doing this:
if (entry.getKey().equals("xlink:href")) {
rad.setAttributeNS(XMLConstants.XLINK_NAMESPACE_URI, "xlink:href", entry.getValue().getAsJsonPrimitive().getAsString());
}
After adding that in, my gradients worked successfully.