Importing XPM graphics into an HTML5 canvas - html

Is this possible?
I am trying to port an old professor's demo-game into a web-playable format for fun, and he had setup all the graphics in the XPM format.
Is there some way to load XPM files directly into an HTML5 canvas? I could probably get by with loading them into an image editor and converting...but I'd rather stay as true to the original source as possible.

You could probably write some sort of parser for XPM in JavaScript and render canvas pixels using a similar approach to this question, however I think it'd be more efficient just to use something like ImageMagick and do a one off conversion:
mogrify -format png *.xpm

I made a little plugin to do this, there's a lot to improve but maybe it can help you... you can see the demo here: http://cortezcristian.com.ar/xpm2canvas/
You can also play with the demo in this fiddle: http://jsfiddle.net/crisboot/aXt3G/
<script src="./js/libs/jquery-1.7.1.min.js"></script>
<script src="./js/jquery.xpm2canvas.js"></script>
<script>
var pseudoXMP = [
/* <Values> */
/* <width/cols> <height/rows> <colors> <char on pixel>*/
"40 40 6 1",
/* <Colors> */
" c none",
". c #ffffff",
"X c #dadab6",
"o c #6c91b6",
"O c #476c6c",
"+ c #000000",
/* <Pixels> */
" ",
" ",
" ",
" . .X..XX.XX X ",
" .. .....X.XXXXXX XX ",
" ... ....X..XX.XXXXX XXX ",
" .. ..........X.XXXXXXXXXXX XX ",
" .... ........X..XX.XXXXXXXXX XXXX ",
" .... ..........X.XXXXXXXXXXX XXXX ",
" ooOOO..ooooooOooOOoOOOOOOOXX+++OO++ ",
" ooOOO..ooooooooOoOOOOOOOOOXX+++OO++ ",
" ....O..ooooooOooOOoOOOOOOOXX+XXXX++ ",
" ....O..ooooooooOoOOOOOOOOOXX+XXXX++ ",
" ..OOO..ooooooOooOOoOOOOOOOXX+++XX++ ",
" ++++..ooooooooOoOOOOOOOOOXX+++ +++ ",
" +++..ooooooOooOOoOOOOOOOXX+++ + ",
" ++..ooooooooOoOOOOOOOOOXX+++ ",
" ..ooooooOooOOoOOOOOOOXX+++ ",
" ..ooooooooOoOOOOOOOOOXX+++ ",
" ..ooooooOooOOoOOOOOOOXX+++ ",
" ..ooooooooOoOOOOOOOOOXX+++ ",
" ..oooooOooOOoOOOOOOXX+++ ",
" ..oooooooOoOOOOOOOOXX+++ ",
" ..ooooOooOOoOOOOOXX+++ ",
" ..ooooooOoOOOOOOOXX++++ ",
" ..o..oooOooOOoOOOOXX+XX+++ ",
" ...o..oooooOoOOOOOXX++XXX++ ",
" ....OO..ooOooOOoOOXX+++XXXX++ ",
" ...oo..+..oooOoOOOXX++XXooXXX++ ",
" ...ooo..++..OooOOoXX+++XXooOXXX+ ",
" ..oooOOXX+++....XXXX++++XXOOoOOXX+ ",
" ..oooOOXX+++ ...XXX+++++XXOOooOXX++ ",
" ..oooOXXX+++ ..XX+++ +XXOOooOXX++ ",
" .....XXX++++ XXXXXXX++ ",
" ....XX++++ XXXXXXX+ ",
" ...XX+++ XXXXX++ ",
" ",
" ",
" ",
" "];
$(document).ready(function(){
$('#xmp2canvas').xpm2canvas({xpm:pseudoXMP});
});
</script>

IIRC, the rendering context for a canvas element in such a context relies on manipulating the src attribute of an embedded img tag. As such, presumably XPM files only stand a chance of working if the browser in question supports them.
The best way to check this would be to test it. The accepted answer for this question contains some code that should help:
importing image on canvas html5

Related

How to read special characters in Pyspark

Below special characters are present in a csv file.
" – " , " ’ " , " ‘ "
I am already using option("encoding","ISO-8859-1") in the read statement in order to handle few other scenarios (without this option few spaces are getting read as – ).
But by using this option,
" Samsung – 22 " is getting read as " Samsung ? 22 "
" ‘World’ " is getting read as " ?World? "

How to convert text to CSV file?

I have a text like below and I am trying to convert it into a CSV file. How can I do it?
[
[“Date”, “Description”, “Deposits”, “Withdrawals”, “Balance”, " "]
,
[“4 Mar '22”, “DIRECT CREDIT SUPPORTPYMTD230576800#”, “$4,800.00”, " ", “$27,727.50”, " "]
,
[“22 Feb '22”, “DIRECT CREDIT 31/03/2021 D569582240# INC”, “$11.13”, " ", “$22,927.50”, " "]
]
Thank you.

what do "code listings" mean in html ref definition of <figure>?

I was looking at the html reference page where they put all those description about HTML's tag. It says "The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc." I don't understand what are code listing. Does it actually means list of codes in that definition?
It means listing code on the page like
<figure>
<figcaption>Get browser details using <code>navigator</code>.</figcaption>
<pre>
function NavigatorExample() {
var txt;
txt = "Browser CodeName: " + navigator.appCodeName + "; ";
txt+= "Browser Name: " + navigator.appName + "; ";
txt+= "Browser Version: " + navigator.appVersion + "; ";
txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; ";
txt+= "Platform: " + navigator.platform + "; ";
txt+= "User-agent header: " + navigator.userAgent + "; ";
console.log("NavigatorExample", txt);
}
</pre>
</figure>

Jira Api: Why is description being merged with summary, when creating a new issue?

I'm creating a Powershell script for monitoring disk space and creating issues on Jira, with how much disk space is left.
I can't seem to figure out how to separate my summary and my description. They are "merged" together, and are both being passed into the summary when the issue is created.
I'm guessing that the formatting of my JSON body might just be off, but I can't seem to figure out what I've done wrong.
The body i'm sending is looking like this:
$body =
'{
"fields":
{
"project":
{
"key": "' + $projectKey + '"
},
"issuetype":
{
"name": "' + $issueType + '"
},
"summary": "' + $summary + '",
"description": "' + $description + '",
"priority":
{
"id": "' + $priority + '"
}
}
}';
summary and description looks like this:
$description = "{0}% space is available on the {1} drive. {2} of {3} GB of space is available." -f [math]::truncate($diskSpace), $drive, [math]::truncate($currentDrive.FreeSpace / 1gb), [math]::truncate($currentDrive.Size / 1gb);
$summary = "There is plenty of space left on the {0} drive" -f , $drive;
The issue wasn't the JSON, but the way I called my function, which was responsible for creating the Jira.
I changed it from this:
CreateJira($summary, $description)
To This:
CreateJira $summary, $description

Google Apps Script - replaceText - Can't Replace Period, Comma and Question Mark

I am trying to write a google app script, which will find and replace specific words with others in google docs...
I would like " hello " (space, hello, space) to be replaced by " R1 " (space, R1, space)
And if there is any punctuation mark after hello like a period, comma or question mark it should be the same logic:
" hello " to be replaced by " R1 "
" hello. " to be replaced by " R1. "
" hello, " to be replaced by " R1, "
" hello? " to be replaced by " R1? "
So I used the following:
function docReplace() {
var body = DocumentApp.getActiveDocument().getBody();
body.replaceText(" hello ", " R1 ");
body.replaceText(" hello. ", " R1. ");
body.replaceText(" hello, ", " R1, ");
body.replaceText(" hello? ", " R1? ");
}
Unfortunately this doesn't work, as "." , "," and "?" are regex symbols.
Then, I tried this:
function docReplace() {
var body = DocumentApp.getActiveDocument().getBody();
body.replaceText(" hello ", " R1 ");
body.replaceText(" hello\. ", " R1. ");
body.replaceText(" hello\, ", " R1, ");
body.replaceText(" hello\? ", " R1? ");
}
But still doesn't work. Commas and Question marks return as periods.
I would appreciate if anyone could help with the correct code.
You want to achieve the following replacement using Google Apps Script. In this sample, ## was used as the separator of the values.
From
## hello ##
## hello. ##
## hello, ##
## hello? ##
To
## R1 ##
## R1. ##
## R1, ##
## R1? ##
If my understanding is correct, how about this modification? In this modification, \., \, and \? are modified to \\., \\, and \\?, respectively.
Modified script:
function docReplace() {
var body = DocumentApp.getActiveDocument().getBody();
body.replaceText(" hello ", " R1 "); // Modified
body.replaceText(" hello\\. ", " R1. "); // Modified
body.replaceText(" hello\\, ", " R1, "); // Modified
body.replaceText(" hello\\? ", " R1? "); // Modified
}
Reference:
replaceText(searchPattern, replacement)
If I misunderstood your question and this was not the result you want, I apologize.