Phaser 3 BitmapText Tint suddenly not working - phaser-framework

My code was working just fine one minute and the next it is not.
The issue relates to BitmapText tint.
I am using the CDN for Phaser 3.54.0.
Is there any reason why tint does show? I didn't touch the code relating to BitmapText variables.
This is the code...
export default class CardBase extends Phaser.GameObjects.Container {
constructor(data) {
let { scene, x, y, name, card, image, depth, black, green, purple, red, yellow, products, counter } = data
let spriteCard = new Phaser.GameObjects.Sprite(scene, 0, 0, card)
let spriteImage = new Phaser.GameObjects.Sprite(scene, 0, 20, image)
let textBlack = new Phaser.GameObjects.BitmapText(scene, 80, -120, 'pressstart', black, 20)
let textGreen = new Phaser.GameObjects.BitmapText(scene, 60, -50, 'pressstart', green, 20)
let textPurple = new Phaser.GameObjects.BitmapText(scene, 60, 0, 'pressstart', purple, 20)
let textRed = new Phaser.GameObjects.BitmapText(scene, 60, 50, 'pressstart', red, 20)
let textYellow = new Phaser.GameObjects.BitmapText(scene, 60, 120, 'pressstart', yellow, 20)
let textProducts = new Phaser.GameObjects.BitmapText(scene, 60, -120, 'pressstart', products, 24)
let textCounter = new Phaser.GameObjects.BitmapText(scene, 0, -120, 'pressstart', counter, 36)
textBlack.tint = 0
textGreen.tint = 0
textPurple.tint = 0
textRed.tint = 0
textYellow.tint = 0
textProducts.tint = 0
textCounter.tint = 0
let textName = new Phaser.GameObjects.BitmapText(scene, 0, 0, 'pressstart', name, 16, Phaser.GameObjects.BitmapText.ALIGN_CENTER)
super(scene, x, y, [spriteCard, spriteImage, textName, textBlack, textGreen, textPurple, textRed, textYellow, textProducts, textCounter])
this.spriteCard = spriteCard
this.spriteImage = spriteImage
this.textName = textName
this.cardname = name
this.depth = depth
this.scene = scene
this.textBlack = textBlack
this.textGreen = textGreen
this.textPurple = textPurple
this.textRed = textRed
this.textYellow = textYellow
this.textProducts = textProducts
this.textCounter = textCounter
this.black = black
this.green = green
this.purple = purple
this.red = red
this.yellow = yellow
this.products = products
this.counter = counter
this.scene.add.existing(this)
}
set black(newBlack) {
this._black = newBlack
this.textBlack.text = this._black
}
get black() {
return this._black
}
}

I suspect (I could be wrong) my problem is related to my browser. I had updates due on Chrome. It turned out that Phaser.AUTO was defaulting to Canvas instead of WebGL. It seemed that WebGL was not available somehow.
Since BitmapText Tint only works on WebGL, it was affected when WebGL became unavailable. It couldn't work.
After I restarted my computer and the updates on Chrome took effect, everything went back to normal and Tint worked again.

Related

How to get real Landsat image conrers

How I can get actual coordinates of Landsat image corners (see image to understand) ?
From metadata file (..._MTL.txt) I can get coordinates of red corners, but I need to get coordinates of green corners.
I work with GeoTIFF files using GDAL.
I need to get correct latitude and longitude of green points.
Can I do it using python3?
Thanks for help
Metadata file
GROUP = L1_METADATA_FILE
GROUP = METADATA_FILE_INFO
ORIGIN = "Image courtesy of the U.S. Geological Survey"
REQUEST_ID = "9991103150002_00325"
PRODUCT_CREATION_TIME = 2011-03-16T20:14:24Z
STATION_ID = "EDC"
LANDSAT5_XBAND = "1"
GROUND_STATION = "IKR"
LPS_PROCESSOR_NUMBER = 0
DATEHOUR_CONTACT_PERIOD = "1016604"
SUBINTERVAL_NUMBER = "01"
END_GROUP = METADATA_FILE_INFO
GROUP = PRODUCT_METADATA
PRODUCT_TYPE = "L1T"
ELEVATION_SOURCE = "GLS2000"
PROCESSING_SOFTWARE = "LPGS_11.3.0"
EPHEMERIS_TYPE = "DEFINITIVE"
SPACECRAFT_ID = "Landsat5"
SENSOR_ID = "TM"
SENSOR_MODE = "BUMPER"
ACQUISITION_DATE = 2010-06-15
SCENE_CENTER_SCAN_TIME = 04:57:44.2830500Z
WRS_PATH = 145
STARTING_ROW = 26
ENDING_ROW = 26
BAND_COMBINATION = "1234567"
PRODUCT_UL_CORNER_LAT = 49.8314223
PRODUCT_UL_CORNER_LON = 84.0018859
PRODUCT_UR_CORNER_LAT = 49.8694055
PRODUCT_UR_CORNER_LON = 87.4313889
PRODUCT_LL_CORNER_LAT = 47.8261840
PRODUCT_LL_CORNER_LON = 84.1192898
PRODUCT_LR_CORNER_LAT = 47.8615913
PRODUCT_LR_CORNER_LON = 87.4144676
PRODUCT_UL_CORNER_MAPX = 284400.000
PRODUCT_UL_CORNER_MAPY = 5524200.000
PRODUCT_UR_CORNER_MAPX = 531000.000
PRODUCT_UR_CORNER_MAPY = 5524200.000
PRODUCT_LL_CORNER_MAPX = 284400.000
PRODUCT_LL_CORNER_MAPY = 5301000.000
PRODUCT_LR_CORNER_MAPX = 531000.000
PRODUCT_LR_CORNER_MAPY = 5301000.000
PRODUCT_SAMPLES_REF = 8221
PRODUCT_LINES_REF = 7441
PRODUCT_SAMPLES_THM = 4111
PRODUCT_LINES_THM = 3721
BAND1_FILE_NAME = "L5145026_02620100615_B10.TIF"
BAND2_FILE_NAME = "L5145026_02620100615_B20.TIF"
BAND3_FILE_NAME = "L5145026_02620100615_B30.TIF"
BAND4_FILE_NAME = "L5145026_02620100615_B40.TIF"
BAND5_FILE_NAME = "L5145026_02620100615_B50.TIF"
BAND6_FILE_NAME = "L5145026_02620100615_B60.TIF"
BAND7_FILE_NAME = "L5145026_02620100615_B70.TIF"
GCP_FILE_NAME = "L5145026_02620100615_GCP.txt"
METADATA_L1_FILE_NAME = "L5145026_02620100615_MTL.txt"
CPF_FILE_NAME = "L5CPF20100401_20100630_09"
END_GROUP = PRODUCT_METADATA
GROUP = MIN_MAX_RADIANCE
LMAX_BAND1 = 193.000
LMIN_BAND1 = -1.520
LMAX_BAND2 = 365.000
LMIN_BAND2 = -2.840
LMAX_BAND3 = 264.000
LMIN_BAND3 = -1.170
LMAX_BAND4 = 221.000
LMIN_BAND4 = -1.510
LMAX_BAND5 = 30.200
LMIN_BAND5 = -0.370
LMAX_BAND6 = 15.303
LMIN_BAND6 = 1.238
LMAX_BAND7 = 16.500
LMIN_BAND7 = -0.150
END_GROUP = MIN_MAX_RADIANCE
GROUP = MIN_MAX_PIXEL_VALUE
QCALMAX_BAND1 = 255.0
QCALMIN_BAND1 = 1.0
QCALMAX_BAND2 = 255.0
QCALMIN_BAND2 = 1.0
QCALMAX_BAND3 = 255.0
QCALMIN_BAND3 = 1.0
QCALMAX_BAND4 = 255.0
QCALMIN_BAND4 = 1.0
QCALMAX_BAND5 = 255.0
QCALMIN_BAND5 = 1.0
QCALMAX_BAND6 = 255.0
QCALMIN_BAND6 = 1.0
QCALMAX_BAND7 = 255.0
QCALMIN_BAND7 = 1.0
END_GROUP = MIN_MAX_PIXEL_VALUE
GROUP = PRODUCT_PARAMETERS
CORRECTION_METHOD_GAIN_BAND1 = "CPF"
CORRECTION_METHOD_GAIN_BAND2 = "CPF"
CORRECTION_METHOD_GAIN_BAND3 = "CPF"
CORRECTION_METHOD_GAIN_BAND4 = "CPF"
CORRECTION_METHOD_GAIN_BAND5 = "CPF"
CORRECTION_METHOD_GAIN_BAND6 = "IC"
CORRECTION_METHOD_GAIN_BAND7 = "CPF"
CORRECTION_METHOD_BIAS = "IC"
SUN_AZIMUTH = 141.2669762
SUN_ELEVATION = 59.9909680
OUTPUT_FORMAT = "GEOTIFF"
END_GROUP = PRODUCT_PARAMETERS
GROUP = CORRECTIONS_APPLIED
STRIPING_BAND1 = "NONE"
STRIPING_BAND2 = "NONE"
STRIPING_BAND3 = "NONE"
STRIPING_BAND4 = "NONE"
STRIPING_BAND5 = "NONE"
STRIPING_BAND6 = "NONE"
STRIPING_BAND7 = "NONE"
BANDING = "N"
COHERENT_NOISE = "N"
MEMORY_EFFECT = "Y"
SCAN_CORRELATED_SHIFT = "Y"
INOPERABLE_DETECTORS = "N"
DROPPED_LINES = "N"
END_GROUP = CORRECTIONS_APPLIED
GROUP = PROJECTION_PARAMETERS
REFERENCE_DATUM = "WGS84"
REFERENCE_ELLIPSOID = "WGS84"
GRID_CELL_SIZE_THM = 60.000
GRID_CELL_SIZE_REF = 30.000
ORIENTATION = "NUP"
RESAMPLING_OPTION = "CC"
MAP_PROJECTION = "UTM"
END_GROUP = PROJECTION_PARAMETERS
GROUP = UTM_PARAMETERS
ZONE_NUMBER = 45
END_GROUP = UTM_PARAMETERS
END_GROUP = L1_METADATA_FILE
END
You might first find the contour with the biggest area. Then try some algorithm to find the points you want. It seems that the satellite picture in the image is not a perfect rectangle, so you can't fit a rectangle on it using OpenCV's built-in methods.
You should try something like that:
import cv2
import numpy as np
img = cv2.imread('z_edited.jpg')
imgray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
blurred = cv2.GaussianBlur(imgray, (11, 11), 0)
ret, thresh = cv2.threshold(blurred, 27, 255, 0)
cnts, _ = cv2.findContours(thresh, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
max_area = 0
max_area_index = 0
for i, cnt in enumerate(cnts):
area = cv2.contourArea(cnt)
if area > max_area:
max_area = area
max_area_index = i
x_min = np.min(cnts[max_area_index][:, 0, 0])
x_max = np.max(cnts[max_area_index][:, 0, 0])
y_min = np.min(cnts[max_area_index][:, 0, 1])
y_max = np.max(cnts[max_area_index][:, 0, 1])
(x_left, y_left) = (x_min, cnts[max_area_index][np.max(np.where(cnts[max_area_index][:, 0, 0] == x_min)), 0, 1])
(x_right, y_right) = (x_max, cnts[max_area_index][np.max(np.where(cnts[max_area_index][:, 0, 0] == x_max)), 0, 1])
(x_down, y_down) = (cnts[max_area_index][np.max(np.where(cnts[max_area_index][:, 0, 1] == y_max)), 0, 0], y_max)
(x_top, y_top) = (cnts[max_area_index][np.max(np.where(cnts[max_area_index][:, 0, 1] == y_min)), 0, 0], y_min)
cv2.circle(img, (x_left, y_left), 10, (0, 0, 255), thickness=8)
cv2.circle(img, (x_right, y_right), 10, (0, 0, 255), thickness=8)
cv2.circle(img, (x_down, y_down), 10, (0, 0, 255), thickness=8)
cv2.circle(img, (x_top, y_top), 10, (0, 0, 255), thickness=8)
# cv2.drawContours(img, cnts, max_area_index, (0, 255, 0), 2)
cv2.namedWindow('s', cv2.WINDOW_NORMAL)
cv2.imshow('s', img)
cv2.waitKey(0)
And the result looks like:
Using this code you can find the coordinates of the corners of the satellite picture inside the image(red points).
Also need to say I have assumed that your satellite picture background is completely black(the image you have uploaded, has a thin gray strip around the whole image).

Attaching a scrollbar to a listbox

I know that there have been some other questions about this, but was hoping to get some help with my current frame configuration as seen below in the code snippet. I have also attached some images, first is with no scrollbar set up. Second is when I uncommented out my scrollbar code.
Frame setup:
# -- Top Frame -- #
self.top = Frame(master, height = 71, bg = self.topColor)
self.top.pack(fill = X)
self.bottom = Frame(master, height = 650, bg = self.bottomColor)
self.bottom.pack(fill = X)
Listbox setup:
# myscroll = Scrollbar(self.bottom, orient = VERTICAL)
Label(self.bottom, text = 'Files Chosen:', bg = self.bottomColor).place(x = 4, y = 110)
self.qListBox = Listbox(self.bottom, width = 30, selectmode = SINGLE) # I did have yscrollcommand = myscroll
# myscroll.config(command = self.qListBox.yview)
# myscroll.pack(side = RIGHT, fill = Y)
self.qListBox.place(x = 4, y = 130)
Label(self.bottom, text = 'Deployment Queue:', bg = self.bottomColor).place(x = 360, y = 110)
self.dListBox = Listbox(self.bottom, width = 30, selectmode = MULTIPLE)
self.dListBox.place(x = 360, y = 130)
Figured out how to resolve this. Created three frames that are inside of my master frame as seen below:
my_frame = Frame(self.master)
my_secondF = Frame(self.master)
my_thirdF = Frame(self.master)
Once I did this I simply put my Lisboxes inside of those frames and placed them accordingly and configured my scrollbars
self.qListBox = Listbox(my_frame, yscrollcommand=myscroll_bar, width = 32, selectmode = SINGLE)
I still, however, appreciate all the replies :)

Pygame SysFont not rendering inside of function

I was making a game where you chop wood in a forest every day and was doing the function to destroy a tree after 3 seconds by putting a SysFont at the bottom of the screen, counting down from three seconds which by then it would remove the tree. I binded the key Q to chop down the first tree(for testing purposes), but instead I got no removal of the tree, and no SysFont counting down - all it did was lag the game because of the time.sleep(1) i had put in. The entire code is below:
import pygame
import time
pygame.init()
root = pygame.display.set_mode((603, 573))
pygame.display.set_caption("Homework")
window_is_open = True
white = (255, 255, 255)
black = (0, 0, 0)
width = 10
leaves_width = 30
height = 20
leaves_height = 10
x = 0
tree_trunk_x = 10
y = 0
tree_trunk_y = 10
vel = 5
brown = (150, 75, 0)
green = (58, 95, 11)
tree_one_property = True
tree_two_property = True
tree_three_property = True
tree_four_property = True
tree_five_property = True
tree_six_property = True
tree_seven_property = True
tree_eight_property = True
tree_nine_property = True
tree_ten_property = True
tree_eleven_property = True
tree_twelve_property = True
tree_thirteen_property = True
tree_fourteen_property = True
tree_fifteen_property = True
tree_sixteen_property = True
tree_seventeen_property = True
tree_eighteen_property = True
tree_nineteen_property = True
tree_twenty_property = True
tree_twenty_one_property = True
tree_twenty_two_property = True
tree_twenty_three_property = True
tree_twenty_four_property = True
tree_twenty_five_property = True
def create_tree(tree_x, tree_y, tree):
if tree:
trunk_x = tree_x + 10
trunk_y = tree_y + 10
pygame.draw.rect(root, brown, (trunk_x, trunk_y, width, height))
pygame.draw.rect(root, green, (tree_x, tree_y, leaves_width, leaves_height))
def destroy_tree(tree_property_name):
count = pygame.font.SysFont('Tahoma', 18, True, False)
countdown = count.render('3', True, (0, 0, 0))
root.blit(countdown, (590, 569))
pygame.display.update()
time.sleep(1)
count = pygame.font.SysFont('Tahoma', 18, True, False)
countdown = count.render('2', True, (0, 0, 0))
root.blit(countdown, (590, 569))
pygame.display.update()
time.sleep(1)
count = pygame.font.SysFont('Tahoma', 18, True, False)
countdown = count.render('1', True, (0, 0, 0))
root.blit(countdown, (590, 569))
pygame.display.update()
time.sleep(1)
tree_property_name = False
root.fill(white)
while window_is_open:
pygame.time.delay(100)
for event in pygame.event.get():
if event.type == pygame.QUIT:
window_is_open = False
keys = pygame.key.get_pressed()
if keys[pygame.K_RIGHT]:
x += vel
if keys[pygame.K_LEFT]:
x -= vel
if keys[pygame.K_UP]:
y -= vel
if keys[pygame.K_DOWN]:
y += vel
if keys[pygame.K_q]:
destroy_tree(tree_one_property)
root.fill(white)
font = pygame.font.SysFont('Tahoma', 18, True, False)
score = font.render('Score:', True, (0, 0, 0))
root.blit(score, (410, 0))
rectangle = pygame.draw.rect(root, (0, 0, 0), (x, y, width, 10))
tree_one = create_tree(0, 0, tree_one_property)
tree_two = create_tree(50, 0, tree_two_property)
tree_three = create_tree(100, 0, tree_three_property)
tree_four = create_tree(150, 0, tree_four_property)
tree_five = create_tree(200, 0, tree_five_property)
tree_six = create_tree(0, 50, tree_six_property)
tree_seven = create_tree(50, 50, tree_seven_property)
tree_eight = create_tree(100, 50, tree_eight_property)
tree_nine = create_tree(150, 50, tree_nine_property)
tree_ten = create_tree(200, 50, tree_ten_property)
tree_eleven = create_tree(0, 100, tree_eleven_property)
tree_twelve = create_tree(50, 100, tree_twelve_property)
tree_thirteen = create_tree(100, 100, tree_thirteen_property)
tree_fourteen = create_tree(150, 100, tree_fourteen_property)
tree_fifteen = create_tree(200, 100, tree_fifteen_property)
tree_sixteen = create_tree(0, 150, tree_sixteen_property)
tree_seventeen = create_tree(50, 150, tree_seventeen_property)
tree_eighteen = create_tree(100, 150, tree_eighteen_property)
tree_nineteen = create_tree(150, 150, tree_nineteen_property)
tree_twenty = create_tree(200, 150, tree_twenty_property)
tree_twenty_one = create_tree(0, 200, tree_twenty_one_property)
tree_twenty_two = create_tree(50, 200, tree_twenty_two_property)
tree_twenty_three = create_tree(100, 200, tree_twenty_three_property)
tree_twenty_four = create_tree(150, 200, tree_twenty_four_property)
tree_twenty_five = create_tree(200, 200, tree_twenty_five_property)
pygame.display.update()
pygame.quit()
It looks like you are drawing the font (almost) entirely off the bottom of the screen.The lines below:
root = pygame.display.set_mode((603, 573))
...
root.blit(countdown, (590, 569))
indicate that your screen has a height of 573 pixels. You are blit'ing your text with its top at 569, which is only 4 pixels onto the screen. In reality that likely means that the text is entirely off the bottom of the screen.
Try moving it a bit higher.
In fact you can actually get the size of the bounding box of the text surface countdown like this:
text_box_size = countdown.get_size()
See docs here. You can get the height and width of the text box like this and use that to determine the offset from the bottom of the screen you want to pass to blit().
I have edited this answer to add a response to the question in your comment asking why your tree was still rendering. This would be to much to add in a follow on comment.
In your code you have a method def destroy_tree(tree_property_name) and in it you try to update the variable tree_property_name and make it False. That would work if the variable was passed to the function as pass by reference, but in python that is not how arguments are passed. So when you set it to False inside the method all that does is change the value seen inside the scope of the method. The value seen by the caller of the function is not changed.
You can get more explanation by looking at the answer to How do I pass a variable by reference?:
Your code would be significantly cleaner if you made the trees into a class. It would also allow you to be able to change the internal values in the class when the class is passed into a method.

Generate a n-color rainbow palette

I'm trying to generate a rainbow with 15 different colors with (runnable code here):
size(360,100);
colorMode(HSB, 360, 100, 100); // Hue in degrees in [0, 360],
// saturation/brightness in [0, 100]
// like in Photoshop
noStroke();
for (int i = 0; i < 15; i++)
{
fill(i*24, 100, 100); // 24*15 = 360
rect(i*24, 0, 25, 100);
}
but it doesn't produce a rich 15 rainbow-color palette, instead some colors are missing (vivid yellow for example).
Is there a well known algorithm to produce a vivid rainbow color palette?
To understand what's going on, try creating a program that shows a line for each value 0-360:
size(360,100);
colorMode(HSB, 360, 100, 100);
noStroke();
for (int i = 0; i < 360; i++)
{
fill(i, 100, 100);
rect(i, 0, 1, 100);
}
You'll see this:
Notice that the "vivid yellow" band is much more narrow than, for example, the green or blue bands. That's why simply sampling every X values doesn't generate a yellow color.
The yellow color is around value 60, so you could modify your increment so it lands on 60. Drawing 12 rectangles with a width of 30 lets you land on the yellow:
size(360,100);
colorMode(HSB, 360, 100, 100);
noStroke();
for (int i = 0; i < 360; i++)
{
fill(i*30, 100, 100);
rect(i*30, 0, 30, 100);
}
Or you could come up with the values you want ahead of time and put them in an array instead of using an even distribution:
int[] hueValues = {0, 15, 30, 60, 90, 120, 150, 180, 210, 225, 240, 270, 300, 330, 360};
size(360,100);
colorMode(HSB, 360, 100, 100);
noStroke();
for (int index = 0; index < hueValues.length; index++)
{
float rectWidth = width/hueValues.length;
fill(hueValues[index], 100, 100);
rect(index*rectWidth, 0, rectWidth, height);
}
I created a function that generates N colors (rainbow) and outputs a list of strings (Hex values). This is in C# but logic can be converted. In order to understand what's going on I graphed the red, blue, and green values vs n. Doing that you'll see the three graphs each are piecewise functions with points of interest at n=0, n=1/4, n=1/2 and n=3/4.
List<string> GenerateRainbowPalette(int numColors)
{
var toRet = new List<SKColor>();
var n = (float)numColors;
for(var i = 0; i< numColors; i++)
{
int red = 255;
int green = 0;
int blue = 0;
//red: (first quarter)
if (i <= n / 4)
{
red = 255;
green = (int)(255 / (n / 4) * i);
blue = 0;
}
else if (i <= n / 2) //2nd quarter
{
red = (int)((-255)/(n/4)*i + 255 * 2);
green = 255;
blue = 0;
}
else if (i <= (.75)*n)
{ // 3rd quarter
red = 0;
green = 255;
blue = (int)(255 / (n / 4) * i + (-255 * 2));
}
else if(i > (.75)*n)
{
red = 0;
green = (int)(-255 * i / (n / 4) + (255 * 4));
blue = 255;
}
//generate hex string:
var redHex = red.ToString("X2");
var greenHex = green.ToString("X2");
var blueHex = blue.ToString("X2");
var color = $"#{redHex}{greenHex}{blueHex}";
toRet.Add(color);
}
return toRet;
}

Draw border around image using pixi.js

In JS we can do this:
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
function draw() {
var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
s = 2, // thickness scale
i = 0, // iterator
x = 5, // final position
y = 5;
// draw images at offsets from the array scaled by s
for(; i < dArr.length; i += 2)
ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = "red";
ctx.fillRect(0,0,canvas.width, canvas.height);
// draw original image in normal mode
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(img, x, y);
}
And it will draw a border around your image (PNG so it's not a rectangle border ).
How todo it in Pixi.js? Pixi.js doesn't seem to understand the transparent bits as well.

Resources