We Keep Coding

Can I set the font width of a font in Phaser 3?

I am using Phaser 3 to develop a browser game in a canvas with WebGL. I set the width of the canvas text from a custom loaded font, but I cannot set it's style (e.g., italic, semibold).
Here is the code that I use to create text:
this.add.text(100, 600, 'Test Text', {
font: '50px Poppins'
})
this.add.text(100, 600, 'Test Text', {
font: '50px Poppins semibold'
})
Here is the output:
The second image is using the default font, not Poppins. It seems that as soon as I try to set italic or any other style it will fallback to the default font.
I tried to set it with the properties as well (no luck). Has anyone faced the same issue (styling custom fonts), and how to properly load the styled custom fonts?

Issue:
semibold is not a valid font-weight. so it will be considered as font.
Solution:
this.add.text(100, 600, 'Test Text', {
font: '600 50px Poppins' // 600 equivalent to Semi Bold
})
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

The problem was related to the async loading of the fonts from google. With webfontloader from google I can wait with the active event till they are ready.
import WebFont = require('webfontloader')
export class BootScene extends Phaser.Scene {
private ready: boolean = false
constructor() {
super({
key: 'BootScene'
})
}
async preload(): Promise < any > {
WebFont.load({
google: {
families: ['Poppins:600i,600,400', 'Inconsolata']
},
active: () => {
// This is required for asnyc loading
this.ready = true
}
})
}
// Launch game when all assets are loaded
update(): void {
if (this.load.isReady() && this.ready) {
this.scene.start('MainMenuScene')
}
}
}

Title to the graph when saved as image in Echarts

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.

By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation

option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

How to add html label to cytoscape graph node

I use cytoscape.js for show relations between nodes.
I want to create different stylish labels for one node.
I want more complicate stylish labels, then in the cytoscape.org official example.
How can i do it?
Sample image of my problem:

I solved my problem with extention for create html labels for cytoscape.
Extention on github: cytoscape-node-html-label
Extention demo: demo
cy.nodeHtmlLabel(
[
{
query: 'node',
tpl: function(data){
return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
}
]
);
.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}

First, there must be an area to draw the graph. Add a tag to index.html, then within the body section, add a div element named "cy", like so: . This creates the body of the webpage, which in turn holds a div element named cy. Naming the element makes it easy to later access and modify this element for styling and passing to Cytoscape.js.
index.html should now look like this:
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src='cytoscape.js'></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Next, the style of the graph area must be slightly modified via CSS (putting a graph into a 0 area div element is rather uninteresting). To accomplish this, add the following CSS code between and :
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
How about making the graph look nicer? Cytoscape.js provides a multitude of styling options for changing graph appearance. The initialization of the graph may be modified to change default style options, as follows:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red'
}
}]
});
Next up is displaying labels in the graph so that nodes can be identified. Labels are added via the 'label’ property of style. Since labels are already provided (via the id property of data), we’ll use those. If other data properties are provided, such as firstname, those could be used instead.
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}]
The final common component of a graph in Cytoscape.js is the layout. Like style, elements, and containers, layout is also specified as a part of the object passed to cytoscape during construction. To the existing cy object, add (after elements):
layout: {
name: 'grid'
}
check this out, it will help you - http://blog.js.cytoscape.org/2016/05/24/getting-started/

Extjs change font size for displayfield

I've a displayfield, and i would like to increase the font size.
I've configured it as follow:
{
xtype:'displayfield',
cls:'biggertext',
fieldLabel:'label',
style:{
'font-size':'32px'
},
labelStyle:{
'font-size':'32px'
}
}
but the size of the font for the label and the value field has not changed.
I've also tried to do it via CSS:
.biggertext
{
font-size: 32px;
}
but I've no changes about the font size.
What is wrong?
Thank you all

you should use some other properties for this.
e.g labelcls.
Here is a demo
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10',
labelCls: 'biggertext',
fieldCls:'biggertext',
}

Try this.!important will overwrite the parent style
.biggertext
{
font-size: 32px!important;
}
Or
style:{
'font-size':'32px!important'
},
labelStyle:{
'font-size':'32px!important'
}

label:
labelStyle: "font-size:15px;font-weight:bold;width:60;padding:10px 0px 0px 10px;",
value:
style:"font-size:14px;padding:10px 0px 0 15px",

You've missed the ' on your cls biggertext in the ExtJS code. Also you do your styles like this:
style:{
'font-size: 32px;'
},
labelStyle:{
'font-size:32px;'
}
Also note that labelStyle used to work only if you are wrapping your label in a container with FormLayout.
It could also be that you need to add !important to your CSS. I once needed it, otherwise it would not be displayed correctly in the browser.

Cufon Hover & Change of font syntax

Could someone help me rewrite this syntax below to get it right.
I want the font to be replaced by my font whilst accepting the :hover so my button will change when i hover over it.
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
}
});

You could try to add button to hoverables list
Cufon('button', {
fontFamily: 'Disgrunged A',
hover: {
color: '#ed1c24'
},
hoverables: { button:true }
});
Ref: Cufon API
hoverables
Defines which elements
:hover is used with. Defaults to links
only as IE6 can’t handle anything
else.
example : { tag: true, .. }
default : { a: true }

i don't know cufon, but i think the syntax has to be like this:
Cufon.replace('button:hover', {
fontFamily: 'Disgrunged A'
});