It took me a few weeks to master the Blender to json skinning export process, but the final result was working great prior three.js exporter v70.
I had to rebuild my dev machine and I installed Blender three.js exporter v70.
Today, I am doing a simple update to a blender file with skinning animations that was working fine prior the update and I am not able to get multiple animations to export as before.
I have tested Blender exporter with a simple object and animations and I get the same results.
Exporter output:
{
"metadata": {
"bones": 3,
"faces": 10,
"vertices": 12,
"generator": "io_three",
"normals": 12,
"type": "Geometry",
"version": 3
},
"name": "CubeGeometry.3",
"bones": [{
"pos": [0.0,0.0,-0.0],
"name": "center",
"rotq": [0,0,0,1],
"parent": -1
},{
"pos": [0.0,1.0,-0.0],
"name": "right",
"rotq": [0,0,0,1],
"parent": 0
},{
"pos": [0.0,1.0,-0.0],
"name": "left",
"rotq": [0,0,0,1],
"parent": 0
}],
"animation": {
"name": "right",
"length": 4.125,
"hierarchy": [{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 0.0
},{
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,0.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 4.125
}],
"parent": -1
},{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 0.0
},{
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,0.33748486638069153,0.9413309693336487],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [0.0,0.0,-0.0,1.0],
"time": 4.125
}],
"parent": 0
},{
"keys": [{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 0.0
},{
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 2.0416666666666665
},{
"scl": [1,1,1],
"pos": [0.0,1.0,-0.0],
"rot": [-6.0461669172803476e-15,1.149220128782158e-11,0.00026304941275157034,0.9999613761901855],
"time": 4.125
}],
"parent": 1
}],
"fps": 24
},
"faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,6,7,11,10,6,5,8,9,33,4,0,3,7,4,0,3,5,33,8,10,11,9,10,9,8,11,33,7,3,9,11,5,3,11,8,33,2,6,10,8,2,6,9,10,33,3,2,8,9,3,2,10,11],
"vertices": [1.8709198236465454,-0.05566583573818207,-0.9999999403953552,1.8709198236465454,-0.055665746331214905,0.9999999403953552,-0.12908029556274414,-0.055665746331214905,0.9999998211860657,-0.12907981872558594,-0.05566583573818207,-1.0000003576278687,1.8709203004837036,1.9443342685699463,-0.9999995231628418,1.8709192276000977,1.9443342685699463,1.0000004768371582,-0.12908053398132324,1.9443342685699463,0.9999995827674866,-0.12908011674880981,1.9443342685699463,-1.0000001192092896,-1.9279574155807495,-0.055665984749794006,0.9999994039535522,-1.9279569387435913,-0.05566607415676117,-1.0000007152557373,-1.9279578924179077,1.9443340301513672,0.9999991655349731,-1.9279574155807495,1.9443340301513672,-1.0000004768371582],
"influencesPerVertex": 2,
"skinWeights": [1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0,1.0,0],
"normals": [0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.5773491859436035,0.0,-0.7070833444595337,0.7070833444595337,0.0,-0.7070833444595337,-0.7070833444595337,0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.0,0.7070833444595337,-0.7070833444595337,0.0,0.7070833444595337,0.7070833444595337,0.5773491859436035,0.5773491859436035,0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,0.5773491859436035,-0.5773491859436035,-0.5773491859436035,-0.5773491859436035],
"skinIndices": [2,0,2,0,0,0,0,0,2,0,2,0,0,0,0,0,1,0,1,0,1,0,1,0]
}
Any idea what should I be doing to get multiple skinning animations working again?
Cordially,
j3zusla
Until r71 is released it is advised to use the dev version. Multiple animations have been restored plus numerous optimizations, features, and bug fixes have been addressed (specifically to animation exports).
Related
I came across this pie chart vega lite visualization:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4},
{"category": "b", "value": 6},
{"category": "c", "value": 10},
{"category": "d", "value": 3},
{"category": "e", "value": 7},
{"category": "f", "value": 8}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "category", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
It renders as follows:
My data contains color key:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
{"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
{"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
{"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
{"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
{"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "color", "type": "nominal", "legend": null}
},
"layer": [{
"mark": {"type": "arc", "outerRadius": 80}
}, {
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "category", "type": "nominal"}
}
}]
}
I want to use the rgb() color value specified in this color key's value to color individual pie. I tried specifying this field in color channel: "field": "color".
"color": {"field": "color", "type": "nominal", "legend": null}
However, no use. It still renders the same as above. How can use color value specified in field's value as actual color?
PS: Link to above visualization.
The documentation says:
To directly encode the data value, the scale property can be set to null.
So you need to set the scale to null.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"data": {
"values": [
{"category": "a", "value": 4, "color": "rgb(121, 199, 227)"},
{"category": "b", "value": 6, "color": "rgb(140, 129, 22)"},
{"category": "c", "value": 10, "color": "rgb(96, 43, 199)"},
{"category": "d", "value": 3, "color": "rgb(196, 143, 99)"},
{"category": "e", "value": 7, "color": "rgb(12, 103, 19)"},
{"category": "f", "value": 8, "color": "rgb(196, 243, 129)"}
]
},
"encoding": {
"theta": {"field": "value", "type": "quantitative", "stack": true},
"color": {"field": "color", "type": "nominal", "legend": null, "scale":null}
},
"layer": [
{"mark": {"type": "arc", "outerRadius": 80}},
{
"mark": {"type": "text", "radius": 90},
"encoding": {"text": {"field": "category", "type": "nominal"}}
}
]
}
This outputs:
I'm quite new on ThreeJS and I read the documentation and followed a lot of tutorials.
I now know how to interact with objects (transform, mouseover, rotation, computation on positions and scales, etc.), but I struggle handling the light. For the moment my scene has 4 elements I added thanks to the "Add > cube" menu. When I play the scene, everything is animated correctly, but the color remains the same: everything is in the #XXXXXX color I set.
What I would like is to have an effect of light and shadow like this: https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
I think I have put every option like in this page. What did I do wrong? Here is my scene:
{
"metadata": {
"version": 4.5,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"type": "BoxBufferGeometry",
"width": 1.8,
"height": 1.8,
"depth": 1.8,
"widthSegments": 1,
"heightSegments": 1,
"depthSegments": 1
},
{
"uuid": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"type": "SphereBufferGeometry",
"radius": 1,
"widthSegments": 8,
"heightSegments": 6,
"phiStart": 0,
"phiLength": 6.283185,
"thetaStart": 0,
"thetaLength": 3.141593
},
{
"uuid": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"type": "DodecahedronBufferGeometry",
"radius": 1.2,
"detail": 0
},
{
"uuid": "F0338DDF-165A-47ED-A094-2537432A503B",
"type": "IcosahedronBufferGeometry",
"radius": 1.5,
"detail": 0
}],
"materials": [
{
"uuid": "388DEE89-D57C-4853-A22D-01554B78FF5B",
"type": "MeshPhongMaterial",
"color": 16777215,
"emissive": 0,
"specular": 1118481,
"shininess": 30,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "C9CA005B-89BC-4CD7-A13E-6F18610A2907",
"type": "MeshStandardMaterial",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 14869218,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680
},
{
"uuid": "B5419D03-751E-421C-980E-3B004191B7A9",
"type": "MeshStandardMaterial",
"name": "poly2",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 10658466,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
},
{
"uuid": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE",
"type": "MeshStandardMaterial",
"name": "poly3",
"color": 16777215,
"roughness": 1,
"metalness": 0,
"emissive": 7829367,
"depthFunc": 3,
"depthTest": true,
"depthWrite": true,
"stencilWrite": false,
"stencilWriteMask": 255,
"stencilFunc": 519,
"stencilRef": 0,
"stencilFuncMask": 255,
"stencilFail": 7680,
"stencilZFail": 7680,
"stencilZPass": 7680,
"skinning": true
}],
"object": {
"uuid": "70493730-BD58-409F-8879-037628764C76",
"type": "Scene",
"name": "Scene",
"userData": {
"souris": [],
"formes": [
"Box",
"Icosahedron",
"Dodecahedron",
"Sphere"]
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.04,-5.06,0,1],
"children": [
{
"uuid": "AE0F3376-E0B4-47A2-8EE4-821522A4E7E2",
"type": "Mesh",
"name": "Box",
"userData": {
"position": {
"x": 0,
"y": 7.6,
"z": 0
},
"couleurs": [
"FFFFFF",
"095256"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,-0.003758,7.6,0.001485,1],
"geometry": "4346FD85-69A5-4085-B397-3CDEA12FBCA1",
"material": "388DEE89-D57C-4853-A22D-01554B78FF5B"
},
{
"uuid": "68FBB0DB-A517-45DD-AE8D-E414E2B5730B",
"type": "Mesh",
"name": "Sphere",
"userData": {
"position": {
"x": 0,
"y": 1,
"z": 0
},
"couleurs": [
"FFFFFF",
"86A873"],
"decalage": 0.2
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,1],
"geometry": "BCF75EF3-3759-4B20-96E1-720C509A3637",
"material": "C9CA005B-89BC-4CD7-A13E-6F18610A2907"
},
{
"uuid": "816269B9-8C50-4C7D-80B0-D688F0FFF6D2",
"type": "Mesh",
"name": "Dodecahedron",
"userData": {
"position": {
"x": 0,
"y": 3,
"z": 0
},
"couleurs": [
"FFFFFF",
"5AAA95"],
"decalage": 0.3
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,3,0,1],
"geometry": "44E67ACB-39CB-4562-9BDE-4DB448366ED0",
"material": "B5419D03-751E-421C-980E-3B004191B7A9"
},
{
"uuid": "8A74081A-5E4F-46A5-9F9E-75537641605F",
"type": "Mesh",
"name": "Icosahedron",
"userData": {
"position": {
"x": 0,
"y": 5.4,
"z": 0
},
"couleurs": [
"FFFFFF",
"087F8C"],
"decalage": 0.5
},
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,5.4,0,1],
"geometry": "F0338DDF-165A-47ED-A094-2537432A503B",
"material": "44FC5BB3-405E-4DF1-9018-087E6BCE1DAE"
},
{
"uuid": "8666758A-A261-4E55-91DE-6B0B57C2A104",
"type": "AmbientLight",
"name": "AmbientLight",
"layers": 1,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,4.700659,1],
"color": 13355979,
"intensity": 0.5
}]
}
}
The problem is that you're using AmbientLight, which doesn't have light or dark sides. It illuminates every face evenly, as if the light is coming from every direction, giving all your geometries a flat appearance. Try using something more exciting, like DirectionalLight, Spotlight, or HemisphereLight to get some shading variation. You could spend some time playing with different lights and reading the docs to see how each light behaves differently. See here to read about AmbientLight.
The second issue is that you're modifying the .emissive property of the material. Adding an emissive color means it will ignore lights, and will just glow on its own. That's why you're getting such flat gray colors. Try instead changing its .color property, which will interact more naturally with the light.
See below, I added a DirectionalLight, removed .emissive, and added different .colors to each shape:
I am new to threejs and I wanted to know if I can add a random jpg picture as my texture. I figured out how to add materials to my model, but I cant really figure out how to add texture. This is a spinet of my json model and my code for changing texture:
"textures": [],
"animations": [{
"fps": 29,
"tracks": [{
"type": "vector3",
"keys": [{
"value": [0.000392,0.249157,-0.004437],
"time": 0
},{
"value": [0.000392,0.249157,-0.004437],
"time": 120
},{
"value": [0.000392,0.249157,-0.004437],
"time": 240
},{
"value": [0.000392,0.249157,-0.004437],
"time": 360
}],
"name": "CameraPreset.position"
},{
"type": "vector3",
"keys": [{
"value": [1,1,1],
"time": 0
},{
"value": [1,1,1],
"time": 120
},{
"value": [1,1,1],
"time": 240
},{
"value": [1,1,1],
"time": 360
}],
"name": "CameraPreset.scale"
},{
"type": "quaternion",
"keys": [{
"value": [0,0.707107,0.707107,0],
"time": 0
},{
"value": [-0.612372,-0.353553,-0.353553,0.612372],
"time": 120
},{
"value": [-0.612372,0.353553,0.353553,0.612372],
"time": 240
},{
"value": [-0,0.707107,0.707107,0],
"time": 360
}],
"name": "CameraPreset.quaternion"
}],
"name": "default"
}],
"materials": [{
"uuid": "36DB0D58-F5EE-366F-9C7F-307076036ACA",
"side": 2,
"blending": "NormalBlending",
"name": "lambert1",
"specular": 1508356,
"shininess": 50,
"emissive": 0,
"ambient": 12531511,
"depthTest": true,
"color": 12531511,
"vertexColors": false,
"depthWrite": true,
"type": "MeshPhongMaterial"
}],
"images": [],
"metadata": {
"generator": "io_three",
"type": "Object",
"version": 4.4
}
This is where I loaded my Json model:
var mesheto;
var loader = new THREE.ObjectLoader();
loader.load(
'models/shirt.json',
function (object) {
globalObject = object;
object.name = 'shirt';
mesheto = object;
scene.add(object);
GameLoop();
}
);
This is the onclick function that changes the texture:
function loadimg(string) {
globalObject.traverse( function ( child ) {
console.log("clicked");
if (child instanceof THREE.Mesh) {
console.log(child instanceof THREE.Mesh);
child.material.map = THREE.TextureLoader('../img/models/check.jpg');
child.material.needsUpdate = true;
}
});
// polo_model.material.map = THREE.TextureLoader('models/check.jpg');
}
You have to add a .load to your new THREE.TextureLoader().load("name of your texture.jpg").
I want to set a hidden ID for each segment in an am-charts gantt chart. So when the user double clicks a segment i want to retrieve data using that ID and show in a popup window.
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2018-01-01",
"end": "2018-01-10",
"color": "#f00",
"task": "Task #1",
"key": "1000"
}, {
"start": "2018-01-12",
"end": "2018-01-20",
"color": "#00f",
"task": "Task #2",
"key": "1001"
}, {
"start": "2018-01-25",
"end": "2018-02-10",
"color": "33800F",
"task": "Task #3",
"key": "1002"
} ]
} ]
I am able to get the Category value but don't know how to get Segments values.
Any example would be a great help
If you're using clickGraphItem for your double-click functionality, you can access the segment information through the graph's segmentData property in the event object:
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert(e.graph.segmentData.key)
}
}]
Demo below:
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "hh",
"dataDateFormat": "YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date",
"minimum": 7,
"maximum": 31
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [{
"category": "John",
"segments": [{
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1",
"key": "1001"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1002"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3",
"key": "1003"
}]
}, {
"category": "Smith",
"segments": [{
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1004"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3",
"key": "1005"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1",
"key": "1006"
}]
}, {
"category": "Ben",
"segments": [{
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2",
"key": "1007"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4",
"key": "1008"
}]
}],
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
alert("key: " + e.graph.segmentData.key)
}
}]
});
body,
html {
width: 100%;
height: 100%;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv"></div>
I would like to configure the locale for a visualization in Vega. I need a German number format, which means that I need a comma (,) as decimal separator. Without any configuration in Vega, a decimal point (.) is used as separator.
Here is a complete working example which shows a simple bar chart. As you can see in the image below, I want to format the numbers on the y-Axis and the values inside the bars with two decimal places.
How can I set a specific locale (e.g. German) either globally for the whole visualization or for each number format separately? (I would prefer a global setting.)
(Note: You can use the Vega Editor to paste and try out my bar chart example.)
{
"width": 600,
"height": 300,
"padding": {"top": 10, "left": 35, "bottom": 30, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x": 1, "y": 0.5},
{"x": 2, "y": 0.8},
{"x": 3, "y": 0.3},
{"x": 4, "y": 0.6}
]
}
],
"scales": [
{
"name": "x",
"type": "ordinal",
"range": "width",
"domain": {"data": "table", "field": "x"},
"padding": 0.1
},
{
"name": "y",
"type": "linear",
"range": "height",
"domain": {"data": "table", "field": "y"}
}
],
"axes": [
{"type": "x", "scale": "x"},
{"type": "y", "scale": "y", "format": ".2f"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"properties": {
"enter": {
"x": {"scale": "x", "field": "x"},
"width": {"scale": "x", "band": true, "offset": -1},
"y": {"scale": "y", "field": "y"},
"y2": {"scale": "y", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
}
}
},
{
"type": "text",
"from": {"mark": "bars"},
"properties": {
"enter": {
"y": {"field": "y", "offset": 10},
"x": {"field": "x"},
"dx": {"field": "width", "mult": 0.6},
"fill": {"value": "white"},
"align": {"value": "right"},
"baseline": {"value": "middle"},
"text": {"template": "{{datum.datum.y | number:'.2f'}}"}
}
}
}
]
}
I found a pull request in the Vega GitHub repository which allows to set the number and time locale. Also runtime changes are supported.
Example for changing the number format to German:
vg.util.format.numberLocale({
decimal: ",",
thousands: ".",
grouping: [3],
currency: ["", "\xa0€"]
});
Example for changing the time format to German:
vg.util.format.timeLocale({
dateTime: "%A, der %e. %B %Y, %X",
date: "%d.%m.%Y",
time: "%H:%M:%S",
periods: ["AM", "PM"], // unused
days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
shortDays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});