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

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')
}
}
}

Related

Azure Map Controls override the CSS style

Is it possible to somehow override the default color scheme that is used for the Azure Map Controls? I cant find anything in MS Docs other than setting between 'light' & 'dark', however neither of their colour choices look very nice and I want some uniformity with the color scheme of my own dark mode on my UI.
In addition, setting light/dark for the style only works for the drawing toolbar, but not for other the map controls, hence the screenshot below:
Sample code:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
position: 'top-right',
style: theme,
buttons: [
"draw-line",
"draw-polygon",
"draw-circle",
"draw-rectangle",
"edit-geometry",
"erase-geometry"]
})
});
map.controls.add([
new atlas.control.StyleControl({
layout: 'list',
mapStyles: [
'blank', // Blank
'grayscale_dark', // Greyscale (Night)
'grayscale_light', // Greyscale (Light)
'high_contrast_dark', // High Contrast (Dark)
'high_contrast_light', // High Contrast (Light)
'night', // Night
'road_shaded_relief', // terra
'satellite', // Satellite
'satellite_road_labels'] // Hybrid
}),
new atlas.control.ZoomControl(),
new atlas.control.CompassControl(),
new atlas.control.PitchControl(),
], {
position: "top-right",
style: theme, // theme == 'light' or 'dark'
});
});
I should learn to use the inspect element more often in the browser debug and I would have found the required css much quicker!
Update to the code sample that corrects the issue with the drawing toolbar not showing the dark mode.
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
position: 'top-right',
style: theme,
buttons: [
"draw-line",
"draw-polygon",
"draw-circle",
"draw-rectangle",
"edit-geometry",
"erase-geometry"]
})
});
map.controls.add([
new atlas.control.StyleControl({
style: theme, // theme == 'light' or 'dark'
layout: 'list',
mapStyles: [
'blank', // Blank
'grayscale_dark', // Greyscale (Night)
'grayscale_light', // Greyscale (Light)
'high_contrast_dark', // High Contrast (Dark)
'high_contrast_light', // High Contrast (Light)
'night', // Night
'road_shaded_relief', // Terra
'satellite', // Satellite
'satellite_road_labels'] // Hybrid
}),
new atlas.control.ZoomControl({
style: theme, // theme == 'light' or 'dark'
}),
new atlas.control.CompassControl({
style: theme, // theme == 'light' or 'dark'
}),
new atlas.control.PitchControl({
style: theme, // theme == 'light' or 'dark'
}),
], {
position: "top-right",
});
});
Then for the CSS overrides to change the colors:
.azure-maps-control-button {
background-color: #22262A !important;
color: white !important;
}
.azure-maps-control-container.dark > .style-options.list button {
background-color: #22262A !important;
}
.azure-maps-control-container.dark > .style-options.list button:hover {
background-color: #343A40 !important;
color: white !important;
}
.dark .azure-maps-drawtoolbar-button {
background-color: #22262A !important;
color: white !important;
}
.dark .azure-maps-drawtoolbar-button:hover {
background-color: #343A40 !important;
color: white !important;
}

Gnome Shell Stylesheet

So I'm making a gnome shell extension, and I can't figure out how to make one part of my extension normal font weight. Here is my extension.js file:
'use strict';
const { St, Clutter } = imports.gi;
const Main = imports.ui.main;
let _myText;
class Extension {
enable() {
_myText = new St.Label({ text: 'This should be normal font weight.', y_align: Clutter.ActorAlign.CENTER, style_class: 'panel-button', track_hover: false, reactive: false});
Main.panel._leftBox.insert_child_at_index(_myText, 10)
}
disable() {
_myText.destroy();
}
}
function init() {
return new Extension();
}
And here is my stylesheet.css file:
StLabel._myText {
font-weight: normal;
}
What am I doing wrong?
You can't just use arbitrary JavaScript variables in CSS; you need to tell a widget what CSS name and class it's supposed to use:
.my-class {
font-weight: normal;
}
const myLabel = new St.Label({
text: 'My Label',
style_class: 'panel-button my-class',
});
See also:
Anatomy of an Extension at gjs.guide
St Documentation at gjs-docs.gnome.org

Difference between script filed and life cycle methods in Grapesjs?

I am new to Grapesjs, and i find the intro in Grapesjs doc website:
so if we have code like this:
editor.BlockManager.add('test-block', {
label: 'Test block',
attributes: {class: 'fa fa-text'},
content: {
script: "alert('Hi'); console.log('the element', this)",
// Add some style just to make the component visible
style: {
width: '100px',
height: '100px',
'background-color': 'red',
}
}
});
On the doc website it says:
If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:
<div id="c764"></div>
<script>
var items = document.querySelectorAll('#c764');
for (var i = 0, len = items.length; i < len; i++) {
(function(){
// START component code
alert('Hi');
console.log('the element', this)
// END component code
}.bind(items[i]))();
}
</script>
It looks like all the stuff defined in script tag will be executed after the component mount, on the other way, considering Grapesjs provide view.init() and view.onRender() such life cycle methods, I was thinking we can probably achieve exactly the same effect using such life cycle methods.
So my question would be: what's difference between the script and component own life cycle methods?
BTW, I use React before, and i did most state initialization and data fetching in componentDidMount() such life cycle, so i personally could not get what could be the scenario for script in Grapesjs(Especially when i comparing those two libs.)?
As you should know Grapes uses backbone.js, which is pretty different to react.
Now, talking about how it works for grapesjs.
Lifecycle hooks will allow you to interact with model and editor instance during website building process.
Script will contain javascript your component needs to be useful in and outside the editor (Obviously, having limited (read-only) access to model properties).
Here you can see a very basic, and probably dummy example of both cases.
Setting listener on init: You'll probably won't need to alert changes in component attributes in resulting page...
Add animation class: script will run when render in editor, but also will run at published page, so you can see the animation out of grapes' editor.
const editor = grapesjs.init({
height: "100%",
container: "#gjs",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
storageManager: false,
canvas: {
styles: [
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
]
}
});
editor.DomComponents.addType("MagicBox", {
model: {
defaults: {
tagName: "div",
attributes: {
alert: ""
},
traits: ["alert"]
},
init() {
this.listenTo(this, "change:attributes:alert", this.handleChange);
},
handleChange(a) {
alert(this.get("attributes").alert);
}
}
});
const blockManager = editor.BlockManager;
blockManager.add("magic-box", {
label: "MagicBox",
content: {
type: "MagicBox",
tagName: "div",
style: {
width: "100px",
height: "100px",
background: "blue"
},
script: 'this.className+="animate__animated animate__bounce"'
},
category: "Basic",
attributes: {
title: "Magic Box"
}
});

Cropper.js at angular 2: cropper displays the previos image

I build ionic2 application - based on angular 2.
In my app I use Cropper.js library for let user edit the images he loaded.
Now I have a problem.
When user load new picture, I show it at the main container and open the crop-box for this image.
But the crop-box show the previous image which was at the container.
The only solution that worked for me is to open the crop by setTimeout, but it is not good solution, as we know.
Any idea else?
Here is my code:
HTML - the container element:
<div class="selected-image">
<img *ngIf="currentImage.src != null" #selectedPhoto [src]="currentImage.src"/>
</div>
Now, after user click a button to add picture from the camera (by cordova plugin), and I get the image url, I push the picture to pictures array and then set currentImage variable to hold the new image.
Here is my typeScript code, it also have viewChild to hold the container.
Notice to the setTimeout block, now its is work but if I unwrap the code from setTimeout wrapper - it open the crop-box with the previous picture.
I also tried to change it to NgZone.run wrapper, but it didn't help.
export class myClass {
#ViewChild('selectedPhoto') input: ElementRef;
pictures: PictureData[] = new Array();
mainImage: PictureData = new PictureData();
private cropper: Cropper;
constructor(public _zone: NgZone) {}
function addPicture(){
var self = this;
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
quality: 95,
targetHeight: 400,
targetWidth:400
}).then((imageURI) => {
var picture = {src:imageURI};
self._zone.run(() => {
self.pictures.push(picture);
self.currentImage = picture;
setTimeout(() => {
if (this.cropper && this.cropper['canvas']) {
this.cropper.destroy();
}
if (!this.cropper || !this.cropper['canvas']) {
this.cropper = new Cropper(this.input.nativeElement, {
aspectRatio: 1 / 1,
dragMode: 'crop',
modal: true,
guides: false,
center: true,
highlight: false,
background: false,
autoCrop: true,
autoCropArea: 0.9,
responsive: true,
checkCrossOrigin: false,
crop: (e: Cropper.CropperCustomEvent) => {
}
});
}
}, 2000);
});
});
}
}
P.S. If you are user with more then 1500 reputation, please, think about create new tag for 'cropper.js'.

How to set different dimensions in a codemirror editor?

I need each codemirror editor with different dimensions in a php page.
Like below we can create an instances of codemirror editor but it should have same dimensions.Is there any way to create different dimensions?
function editor(id)
{
CodeMirror.fromTextArea(id, {
height: "350px",
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1');
editor('code2');
Yes, add your dimensions in additional parameters in your editor function.
For example :
function editor(id, h)
{
CodeMirror.fromTextArea(id, {
height: h,
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
lineNumbers: true
});
}
editor('code1', '350px');
editor('code2', '450px');

Categories