I copied and pasted a uiskin.json file to use for Scene2D UI, but for some reason my code is still crashing. Here is the uiskin.json file that's giving me the error: JSON standard does not allow identifiers. This is stored in my asset folder along with the default.fnt, uiskin.atlas, and uiskin.png
{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
green: { a: 1, b: 0, g: 1, r: 0 },
white: { a: 1, b: 1, g: 1, r: 1 },
red: { a: 1, b: 0, g: 0, r: 1 },
black: { a: 1, b: 0, g: 0, r: 0 },
},
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } },
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
default: { down: default-round-down, up: default-round },
toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, vScrollKnob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
default: {
font: default-font, fontColor: white, background: default-select,
scrollStyle: default,
listStyle: { font: default-font, selection: default-select-selection }
}
},
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
default-vertical: { handle: default-splitpane-vertical },
default-horizontal: { handle: default-splitpane }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
default: { titleFont: default-font, background: default-window, titleFontColor: white },
dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},
com.badlogic.gdx.scenes.scene2d.ui.ProgressBar$ProgressBarStyle: {
default-horizontal: { background: default-slider, knob: default-slider-knob },
default-vertical: { background: default-slider, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
default-horizontal: { background: default-slider, knob: default-slider-knob },
default-vertical: { background: default-slider, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
default: { font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
default: { fontColorUnselected: white, selection: selection, fontColorSelected: white, font: default-font }
},
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
default: { background: default-pane, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }
},
com.badlogic.gdx.scenes.scene2d.ui.Tooltip$TooltipStyle: {
default: {
label: { font: default-font, fontColor: white },
background: default-pane
}
},
}
Also, this is the Java code that I have so far. Just a simple add button for reference if anyone need.
public class MyGdxGame extends ApplicationAdapter {
private Skin skin;
private TextField username, password;
private Stage stage;
#Override
public void create () {
skin = new Skin(Gdx.files.internal("uiskin.json"));
stage = new Stage(new ScreenViewport());
final TextButton button = new TextButton("Click Me", skin, "default");
button.setWidth(200);
button.setHeight(50);
stage.addActor(button);
Gdx.input.setInputProcessor(stage);
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
}
Tooltip is a new feature from libgdx it only exists on the nightly build so you don't have it you probably copied that from the github from libgdx and you can check here that it was added 9 days ago. I checked in my recently installed libgdx and tooltip isn't there, if you try to import it.
Basically remove:
com.badlogic.gdx.scenes.scene2d.ui.Tooltip$TooltipStyle: {
default: {
label: { font: default-font, fontColor: white },
background: default-pane
}
},
Had the same error, not with uiskin.json copied from the wiki. (the real example). Did some googling, ended up on a different question (different topic) and I saw the json had double quotes (") around the names and attributes.
So instead of:
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
do:
"com.badlogic.gdx.graphics.g2d.BitmapFont": { "default-font": { "file": "default.fnt" } },
Adding double quotes around all the names removed the Json standard does not allow identifiers error. No clue if it works without double quotes at runtime, as it causes an error in the json file.
Related
I am implementing a customized dropdown becuase of the requirements we have, using Vue 2 and typescript (jquery is not an option).
It is working fine, when you click on the main box, it opens the options list downwards.
An improvement I am looking for is that, when at the end of the screen, the options list adds to the page height and thus causing the scrollbar to appear or increase scroll height.
What I am looking for is that, when popping up the div, if there's not enough space at the bottom of the screen, open it upwards instead. How do I achieve this?
(classes are using bootstrat 5)
Opened dropdown &
Closed dropdown
My code:
import Vue, {
PropType
} from 'vue';
import {
Validation
} from 'vuelidate';
let uidc = 0;
export default Vue.extend({
name: 'BaseDropdown',
props: {
value: {
type: [Number, String, Object],
default: () => ''
as string,
},
target: {
type: String,
default: '',
},
label: {
type: String,
default: '',
},
valueIsNumber: {
type: Boolean,
default: false,
},
options: {
type: Array,
default: null,
},
placeholder: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
validations: {
type: Object as PropType < Validation > ,
default: () => ({
$error: false,
$touch: () => undefined,
$params: {},
}) as Validation,
},
error: {
type: Boolean,
default: false,
},
trackEvent: {
type: String,
default: '',
},
trackField: {
type: String,
default: '',
},
trackPublic: {
type: Boolean,
default: false,
},
padLeft: {
type: Boolean,
default: false,
},
enforceBlackColour: {
type: Boolean,
default: false,
},
customStyled: {
type: Boolean,
default: false,
},
borderBottomWarning: {
type: Boolean,
default: false,
},
},
data(): {
selectedItem: any | null;
menuOpen: boolean;
searchText: string | null;
} {
return {
selectedItem: null,
menuOpen: false,
searchText: null,
};
},
mounted() {
const appElement = document.getElementById('app_home');
(appElement as any).addEventListener('click', this.handleDropdownClickOutside);
this.$nextTick(() => {
if (this.value) {
if (this.valueIsNumber) {
this.selectedItem = this.options.find((x: any) => x.value === Number(this.value)) || null;
} else {
this.selectedItem = this.options.find((x: any) => x.value.toString().toLowerCase() === this.value.toString().toLowerCase()) || null;
}
}
});
},
computed: {
v(): Validation | {} {
return this.validations;
},
errorMessage(): string {
// Validation must be cast to any to access validators
return Object.entries((this.v as Validation).$params).find(([k]) => !(this.v as any)[k]) ? .[1].message;
},
optgroups(): any {
return this.options.reduce((acc: any, o: any) => ({ ...acc,
[o.optgroup]: [...(acc[o.optgroup] || []), o]
}), {});
},
isRequired(): boolean {
return this.required !== false;
},
getSelectedItemText(): string | null {
return this.selectedItem ? this.selectedItem.text : this.placeholder || 'Please select an item';
},
filteredItems(): any[] {
const list: any[] = [];
for (let c = 0; c < 10; c += 1) {
list.push({
text: c,
value: c
});
}
// return this.searchText && this.searchText.length > 0 ? this.options.filter((x: any) => x.text.toLowerCase().indexOf(this.searchText!.toLowerCase()) > -1) : this.options;
return list;
},
},
methods: {
openMenu() {
this.menuOpen = !this.menuOpen;
if (this.menuOpen) {
this.searchText = null;
}
},
selectItem(item: any) {
this.selectedItem = item;
this.$emit('input', item.value);
this.menuOpen = false;
},
setSuppliedSelectedItem() {
this.$nextTick(() => {
if (this.value) {
this.selectedItem = this.options.find((x: any) => x.value === this.value) || null;
}
});
},
handleDropdownClickOutside(event: any): void {
const parent = document.getElementById(`select-${(this as any).uid}`);
const isParent = parent !== event.target && parent ? .contains(event.target);
if (!isParent) {
this.menuOpen = false;
// this.closeOpenendMenu();
// this.searchText = '';
}
},
},
beforeCreate() {
// eslint-disable-next-line no-plusplus
(this as any).uid = uidc++;
},
});
.dropdown {
font-size: 0.7rem;
img {
// float: right;
// padding-right: 10px;
// padding-top: 5px;
position: absolute;
top: 40%;
right: 10px;
}
.fade {
opacity: 0.5;
}
.search-box {
.form-control {
font-size: 12px !important;
height: 30px !important;
margin: 0 10px 5px 10px !important;
width: 95% !important;
}
}
.selected-item {
border-radius: 3px;
border: 1px solid #ced4da;
padding: 10px;
.selected-item-text {
text-overflow: ellipsis;
overflow: hidden;
width: 93%;
/* height: 1.2em; */
white-space: nowrap;
}
}
.items {
border: 1px solid rgb(236, 236, 236);
width: 100%;
z-index: 15;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
background-color: white;
}
.item {
padding: 10px;
background-color: rgb(240, 240, 240);
cursor: pointer;
&:hover {
background-color: rgb(216, 216, 216);
}
}
}
.hidden {
opacity: 0.2;
}
.disabled {
background-color: #e9ecef;
opacity: 1;
pointer-events: none;
}
<template>
<div class="mt-2" :id="`select-${uid}`">
<label v-show="label" class="mb-2 label-grey" :class="{ 'required': isRequired }" :for="`select-${uid}`">{{ label }}</label>
<div class="dropdown noselect position-relative" :class="{'disabled': disabled}">
<div class="selected-item cursor-pointer" #click="openMenu">
<div class="selected-item-text" :class="{'fade': !selectedItem}">{{getSelectedItemText}}</div>
<img v-if="menuOpen" :src="constants.icons.arrowTop" />
<img v-else :src="constants.icons.arrowDown" />
</div>
<div class="items position-absolute" v-show="menuOpen">
<div v-if="filteredItems && filteredItems.length > 5 || searchText" class="search-box">
<input :size="'sm'" v-model="searchText" />
</div>
<div v-for="item in filteredItems" :key="item.value" #click="selectItem(item)">
<div class="item">
{{item.text}}
</div>
</div>
</div>
</div>
<span v-if="v.$error" class="text-error text-xs font-light">{{ errorMessage }}</span>
</div>
</template>
Suggest to use Floating-ui (well known as Poper)
Floating UI is a low-level library for positioning "floating" elements...intelligently keeping them in view
It's been using widely and cover a lot of edge cases you might encounter when try to create dropdown yourself
You can try with references here
creating-vue-component-dropdown-with-popper-js
floating-vue/dropdown
i have a angular web application with a line graph (using echarts) with multiple series.
the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?
my code:
thisInstance._paidUnpaidSplitGraphOptions = {
title: {
text: 'Paid/Unpaid Claims'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Unpaid Claims', 'Paid Claims']
},
grid: {
left: '5%',
right: '6%',
bottom: '5%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
title: "Download Image of Chart"
},
dataZoom: {
yAxisIndex: false,
title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
},
brush: {
type: ['lineX', 'clear'],
title: {
"lineX": "LineX", "clear": "Clear" }
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Paid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
position: 'TopLeft',
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
color: '#151515'
}
},
areaStyle: { normal: {} },
data: paidAmounts
},
{
name: 'Unpaid Claims',
type: 'line',
stack: 'WWWWWWWW',
label: {
normal: {
show: true,
formatter: function (data) {
return thisInstance.GetFormattedValue(data);
},
position: 'BottomRight',
color: '#151515'
}
},
areaStyle: { normal: {} },
data: unPaidAmounts
}
]
}
html code:
<div class="clr-row">
<div class="clr-col-2">
</div>
<div class="clr-col-8">
<div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
</div>
<div class="clr-col-2">
<button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
<button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
</div>
</div>
What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.
below is a screenshot of what it looks like
To move text slightly you can use offset: [0,-15], reference.
However you might want to use the label formatter to mask the labels that are under a certain value.
Example
var data = [
[820, 932, 901, 934, 1290, 330, 320],
[0, 0, 0, 0, 0, 900, 1320]
];
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
itemStyle: {
},
series: [{
data: data[0],
type: "line",
stack: "stack",
color: 'blue',
areaStyle: {
color: 'blue',
opacity: 0.3
},
label: {
position: "top",
offset: [0, -15],
show: true,
}
},
{
data: data[1],
type: "line",
stack: "stack",
areaStyle: {
color: 'red',
opacity: 0.3
},
label: {
position: "top",
show: true,
formatter: function (params) {
return (params.value === 0) ? "" : params.value;
}
}
}
]
}
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object")
myChart.setOption(option, true);
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 90%"></div>
</body>
</html>
Stacked line graph with masked labels
You should try avoidLabelOverlap = true
I am using Highcharts to plot the graph of temperature vs time. I am having a JSON file wherein data from the backend keep updates the JSON file. I want to call ajax function such that the graphs automatically generates with respect to time. How to do that? I am new to high charts, please help me.
You can use Series.addPoint method.
http://api.highcharts.com/highcharts/Series.addPoint
Here is a example of using Highcharts with live data with GET HTTP requests.
const options = {
chart: {
type: 'spline'
},
title: {
text: 'Live Bitcoin Price'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price (USD)'
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Live Bitcoint Price [USD]',
data: []
}]
}
const chart = Highcharts.chart('container', options)
// Data
const getData = () => {
setInterval(() => {
window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => {
return response.json()
}).then((data) => {
chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) })
})
}, 3000)
}
getData()
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
fill: #222;
}
.highcharts-title,
.highcharts-axis-title {
fill: #DDD;
}
.highcharts-credits,
.highcharts-credits:hover {
fill: #222;
}
body {
background-color: #222;
margin 0 !important;
}
#container {
margin: 0;
padding: 0;
border: 0;
background-color: #222;
min-height: 400px;
height:95%;
width:95%;
position:absolute;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Live example:
https://jsfiddle.net/xpfkx91w/
I use a uiskin.json as my game skin. But I always get an error that there is No Drawable, NinePatch, TextureRegion, Texture, or Sprite registered with name: white. I searched across the web and SO but did not fond a proper solution. Maybe there is something wrong with my file?
{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
green: { a: 1, b: 0, g: 1, r: 0 },
white: { a: 1, b: 1, g: 1, r: 1 },
red: { a: 1, b: 0, g: 0, r: 1 },
black: { a: 1, b: 0, g: 0, r: 0 }
},
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } }
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
default: { down: default-round-down, up: default-round },
toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white,
downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, vScrollKnob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
default: {
font: default-font, fontColor: white, background: default-select,
scrollStyle: default,
listStyle: { font: default-font, selection: default-select-selection }
}
},
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
default-vertical: { handle: default-splitpane-vertical },
default-horizontal: { handle: default-splitpane }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
default: { titleFont: default-font, background: default-window, titleFontColor: white },
dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
default-horizontal: { background: default-slider, knob: default-slider-knob }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
default: { font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
default: { fontColorUnselected: white, selection: default-rect-pad, fontColorSelected: white, font: default-font }
},
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
default: { background: default-pane, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }
}
}
I am using the skin like this (if that matters in any way):
Skin skin = new Skin(Gdx.files.internal("skins/uiskin.json"));
eh been forcing the error that leaves you, and get it by editing the uisking.atlas
look at that, white is present in the file or download the file again
uisking.atlas
..//
selection
rotate: false
xy: 170, 44
size: 1, 1
orig: 1, 1
offset: 0, 0
index: -1
white
rotate: false
xy: 174, 48
size: 1, 1
orig: 1, 1
offset: 0, 0
index: -1
you probably do not have defined white in your Atlas file
This is my skin file:
{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
green: { a: 1, b: 0, g: 1, r: 0 },
white: { a: 1, b: 1, g: 1, r: 1 },
red: { a: 1, b: 0, g: 0, r: 1 },
black: { a: 1, b: 0, g: 0, r: 0 }
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
default: { down: Button-Pressed, up: Button },
toggle: { down: Button-Pressed, checked: Button-Pressed, up: Button }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
default: { down: Button-Pressed, up: Button, font: default-font, fontColor: white },
toggle: { down: Button-Pressed, up: Button, checked: Button-Pressed, font: default-font, fontColor: white, downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
default: { titleFont: default-font, background: window, titleFontColor: white },
dialog: { titleFont: default-font, background: window, titleFontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
default: { font: default-font, fontColor: white }
},
}
I changed the default-font using this code:
texture = new Texture(Gdx.files.internal("default.png"), true);
bitmapFontShader = new BitmapFontShader(Gdx.files.internal("default.fnt"), new TextureRegion(texture), false, 1 / 5f);
skin = new Skin(Gdx.files.internal("myskin.json"));
skin.remove("default-font", BitmapFont.class);
skin.add("default-font", bitmapFontShader, BitmapFont.class);
Now I try to scale it: skin.getFont("default-font").scale(0.5f); and it doesn't work.
some one can tell me what could be the reason? what is wrong with my code?
Please try deleting following line from your skin file:
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
Then use following code to load:
Skin skin=new Skin();
skin.add("default-font", bitmapFontShader);
skin.addRegions(new TextureAtlas(Gdx.files.internal("myskin.atlas")));
skin.load(Gdx.files.internal("myskin.json"));