Is there a way to add text to a function output in html? - textinput

I am trying to display two randomly generated numbers in a textbox, and I want it to look like this: (x,y). Is there an attribute I can add to my input to make that happen?
<input id="result" type="text">
<script>
function diceroll(){
var randnum=Math.floor((Math.random()*6)+1);
document.getElementById("result").value=randnum}
</script>

Try this:
function diceroll() {
var x = Math.floor((Math.random() * 6) + 1);
var y = Math.floor((Math.random() * 6) + 1);
let str = '(' + x + ',' + y + ')';
document.getElementById("result").value = str
}
diceroll();
<input id="result" type="text">

Related

How to add new lines into a variable passed into pug

I am trying to pass values that need to include new lines/brake lines into pug files.
So far I have tried
var value1 = "value 1";
var value2 = "value 2";
var infromation = "\n" + value1 + "\n" + value2;
res.render('pugfile', { information: information });
but when this is rendered in pug through
p Your messages are: #{information}
The html is rendered as
<p>
value 1
value 2
</p>
but the new line is not shown on the displayed webpage, which is the problem.
Please help?
instead of putting \n for newline, use <br> for break. And also you need to escape the string. For reference check this.
Try this.
let value1 = "value 1";
let value2 = "value 2";
// let information = "\n" + value1 + "\n" + value2;
let information = "<br>" + value1 + "<br>" + value2;
res.render("index", { information: information });
And in pug template
p Your messages are: !{information}
Please check here for working code
This is an old thread but if you are using data from users then it's very dangerous to use un-escaped values like !{information}, it's safer to split the string by the newlines and use standard escaped strings:
p Your messages are:
each str, indx in String(information).split('\n')
if indx > 0
br
| #{str}

How to determine width of text in OpenSCAD?

In OpenSCAD, I want to be able to create a module which accepts a string then create a 3-D object with that string embedded in the surface as a text. I want the object to be slightly larger than the text, so I need to know how wide the text is in order to create a properly-sized object.
I'm not sure how to query the width of the text (the height is set by an input variable), or if that's even possible.
If it's not possible, is there a function that will accept a string and a font and predict the width of the rendered text?
There is currently no way to query the actual size of the generated text geometry. However, depending on the model that shall be created, it might be enough to calculate a rough estimation and use scale() to fit the text into the known size.
// Fit text into a randomly generated area
r = rands(10, 20, 2);
length = 3 * r[0];
w = r[1];
difference() {
cube([length, w, 1]);
color("white")
translate([0, w / 2, 0.6])
linear_extrude(1, convexity = 4)
resize([length, 0], auto = true)
text("This is a Test", valign = "center");
}
If you use one of the Liberation fonts bundled with OpenSCAD or the fonts in the Microsoft Core Fonts pack, you can use my font measurement OpenSCAD library. E.g.:
use <fontmetrics.scad>;
length = measureText("This is a Test", font="Arial:style=Italic", size=20.);
The library is here. I used some Python scripts to extract metrics (including kerning pairs) from the ttf file, and you can use the scripts to add information about more fonts.
I have found a way to determine the widths of text characters in OpenSCAD. I made a JavaScript thing that lets you input a font name and style, and it outputs an array of width proportions for ascii and extended ascii characters (codes 0-255). Then for any given character, you multiply this proportion by the font size to get the width of an individual character. From there it's trivial to get the width of a string, or the angular widths of characters wrapped around a cylinder.
The tool to generate the OpenSCAD width array is here: https://codepen.io/amatulic/pen/eYeBLva
...and the code is reproduced below, which you can run from this reply, or paste into your own HTML file and load into your browser locally.
Just input the font properties, click the button, and scroll down to see usage instructions.
The secret sauce lies in the fact that JavaScript's 'canvas' support has a 'measureText()' method that measures the pixel length of any text for a given font, used like this:
canvasContext.measureText(string).width
So what this code does is use a dummy canvas on the page to get a context to which a font is assigned, arbitrarily 20 pixels in size. Then it generates an array of widths for every character from 0 to 255, dividing each by 20 to get a unitless width proportion compared to font size. It then outputs a line of OpenSCAD code that you can paste into your OpenSCAD script. Then you use OpenSCAD's ord() function to convert any character to a numeric code, which then serves as an index of the width array. You then multiply this width by the font size to get the character width.
<html>
<!--
by Alex Matulich, February 2022
Thingiverse: https://www.thingiverse.com/amatulic/designs
Website: https://www.nablu.com
-->
<head>
<script type="text/javascript">
var sctx;
function initialize() {
var canvas = document.getElementById("canvas");
sctx = canvas.getContext("2d");
}
function charwidth(fontname, style) {
sctx.font = (style + " 20px " + fontname).trim();
var charlen = [];
for (i = 0; i < 256; ++i) //{ charlen[i] = 10; console.log(i); }
charlen[i] = sctx.measureText(String.fromCharCode(i)).width / 20;
return charlen;
}
function generate() {
var fontname = document.getElementById("fontname").value;
var fontstyle = document.getElementById("fontstyle").value;
var widths = charwidth(fontname, fontstyle);
var arrayname = toCamelCase(fontname) + toCamelCase(fontstyle);
var outputhtml = arrayname + " = [<br/>\n" + widths[0].toString();
var len = widths.length;
for (i = 1; i < len; ++i) outputhtml += ', ' + widths[i].toString();
outputhtml += "<br/>\n];\n";
document.getElementById("output").innerHTML = outputhtml;
document.getElementById('usage').innerHTML = "<h3>Usage</h3>\n<p>The array above shows character width as a multiple of font size. To get the width of a character <code><char></code> given font size <code><fontsize></code> using the font \"" + fontname + " " + fontstyle + "\":</p>\n<p><code> charwidth = " + arrayname + "[ord(char)] * fontsize;<code></p>\n";
document.getElementById('sample').innerHTML = "<h3>Font sample</h3>\n<p style=\"font: " + fontstyle + " 20px " + fontname + ";\">" + fontname + " " + fontstyle + ": 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p>\n";
}
// convert the input array to camel case
function toCamelCase(stringinput) {
if (stringinput.length == 0) return '';
var inputArray = stringinput.match(/[A-Z\xC0-\xD6\xD8-\xDE]?[a-z\xDF-\xF6\xF8-\xFF]+|[A-Z\xC0-\xD6\xD8-\xDE]+(?![a-z\xDF-\xF6\xF8-\xFF])|\d+/g);
result = "";
for (let i = 0, len = inputArray.length; i < len; i++) {
let currentStr = inputArray[i];
let tempStr = currentStr.toLowerCase();
// convert first letter to upper case (the word is in lowercase)
tempStr = tempStr.substr(0, 1).toUpperCase() + tempStr.substr(1);
result += tempStr;
}
return result;
}
</script>
</head>
<body onload="initialize()">
<h1>OpenSCAD proportional font widths</h1>
<form>
<fieldset>
<legend>Identify the font</legend>
<input type="text" id="fontname" name="fontname" value="Liberation Sans">
<label for="fontname">Font name</label><br />
<input type="text" id="fontstyle" name="fontstyle" value="bold">
<label for="fontstyle">Font style (bold, italic, etc. or leave blank)<br />
</fieldset>
<input type="button" onclick="generate()" value="Generate OpenSCAD font width proportions">
</form>
<h2>Copy and paste this code into OpenSCAD</h2>
<div id="output" style="border:5px ridge silver; padding:1em; font-family:monospace;">
</div>
<div id="usage">
</div>
<div id="sample">
</div>
<canvas id="canvas"></canvas>
</body>
</html>

Count of range of columns with null rows in excel

I have run into a weird problem. It may be simple one, but I am unable to trace out a solution for the same.
I have 10 columns in excel where 8 columns has data and 2 columns doesn't have the data, Now want to get the count of the null columns.
a b c d e(null count)
10 10 2
5 3
4
I tried using ISBlank, CountBlank but nothing is woking for me.
Edit
When I use count bank I am getting some weird symbol equal to zero (sorry, I am unable to attach screen shot).
My code is
COUNTBLANK(D9:I9)=0
Edit
This is my code:
=IF(AND(COUNTBLANK(D9:I9)=0,COUNTBLANK(K9:P9)=0,Q9="",R9="",T9="",COUNTBLANK(V9:AF9)=0,AH9="",AK9="",AM9="",AO9=""),"",SUM(D9:I9,K9:P9,Q9,R9,T9,V9:AF9,AH9,AK9,AM9,AO9))
personal data:
<header id="head">
<!-- <img src='Images/12.jpg' width=screen.width > -->
this is god
</header>
<script>
/* <!--function slide(){ */
var ima = ['12.jpg','Pooja Vidhanam Pic.jpg' ];
/* document.getElementById("head").innerHTML ="'"+"Images/"+ima[1]+"'";
var txt="'"+"Images/"+ima[0]+"'"; */
for (i = 0; i < ima.length; i++) {
var x = document.createElement("IMG");
x.setAttribute("src", "Images/"+ima[i]);
x.setAttribute("width", "304");
x.setAttribute("height", "228");
x.setAttribute("alt", "The Pulpit Rock");
//x.setAttribute(name, value)
//document.getElementById("head").appendChild(document.createElement("<img src= txt width=screen.width >"));
document.getElementById("head").appendChild(x);
//sleep(1000);
}
/* for (i=0;i<ima.length;i++){
<img src="Images/"+images[i]+" width=screen.width" >
document.getElementById("head").innerHTML=ima[i];
} */
</script>
<!-- <script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
document.getElementById("head").innerHTML = cars[0];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
document.getElementById("head").innerHTML = text;
}
</script> -->

How to perform reverse of string in jsp?

This is my demo.jsp code ,here i'm writing code as follow,result showing as No line found exception where as i executed the code in java class working fine.How can i execute the revers e of string in jsp page?
Scanner sc = new Scanner(System.in);
System.out.println("Enter String :");
String n = sc.nextLine();
String rev = "";
int len = n.length();
for (int i = len - 1; i >= 0; i--) {
rev = rev + n.charAt(i);
}
out.println("Reverse of Given String is :");
out.println("" + rev);
Your current code works without errors . i guess the problem is you are passing the empty string as the input to nextLine method,
Try passing the values like this ,
Scanner sc = new Scanner(System.in);
System.out.println("Enter String :");
String n = sc.nextLine();
String rev = "value";
int len = n.length();
for (int i = len - 1; i >= 0; i--) {
rev = rev + n.charAt(i);
}
out.println("Reverse of Given String is :");
out.println("" + rev)
Hope this helps !!
The above code is pure Java code, not a valid JSP code. If we split what the above code does, it
Prompt for user input.
Perform the reverse on user entered string.
Print the result string.
System.in and Scanner cannot be used to read user input from a JSP page. Fundamentally the user interaction results in communication between the client (browser) and the server (like Tomcat).
In simple the below code is what makes your code a JSP.
Note : The jsp file name and the value of form action must be same.
<body>
<form action="rev.jsp">
<!-- 1. Prompt for user input -->
Enter Text : <input type="text" name="myText"/>
<input type="submit" value="Submit Text"/>
<br/>
<%
// 2. Perform the reverse on user entered string.
String rev = "";
String n = request.getParameter("myText"); // read user entered value in text box.
if(n != null) { // if myText is entered
int len = n.length();
for (int i = len - 1; i >= 0; i--) {
rev = rev + n.charAt(i);
}
// 3. Print the result string.
out.println("Reverse of Given String is :");
out.println("" + rev);
}
%>
</form>
</body>
If you want to open already existing function, You can use following,
String reverse = new StringBuffer(words).reverse().toString();
Refer THIS

How to set Date Cell Editor's context position in yui datatable

I want to set the inline date cell editor's position to ["tr", "br"] with reference to a yui datatable cell. How can I do that?
this way is not working --
column.editor.cfg.setProperty("context", [target, "tr", "br"])
I just overrided the datatable's doBeforeShowCellEditor method and changed the context position logic of cell editor. Most of the code is copied from YUI basecelleditor's move function.
http://developer.yahoo.com/yui/docs/YAHOO.widget.BaseCellEditor.html
DataTable.doBeforeShowCellEditor = function(cellEditor){
if(cellEditor.calendar){
// Move Editor
var elContainer = cellEditor.getContainerEl(),
elTd = cellEditor.getTdEl(elContainer),
x = d.getX(elTd),
y = d.getY(elTd);
//TODO: remove scrolling logic
// SF doesn't get xy for cells in scrolling table
// when tbody display is set to block
if(isNaN(x) || isNaN(y)) {
var elTbody = this.getTbodyEl();
x = elTd.offsetLeft + // cell pos relative to table
d.getX(elTbody.parentNode) - // plus table pos relative to document
elTbody.scrollLeft; // minus tbody scroll
y = elTd.offsetTop + // cell pos relative to table
d.getY(elTbody.parentNode) - // plus table pos relative to document
elTbody.scrollTop + // minus tbody scroll
this.getTheadEl().offsetHeight; // account for fixed THEAD cells
}
cellEditor.show();
//alert(x + " : X : width : " + elContainer.offsetWidth);
x = x - elContainer.offsetWidth + elTd.offsetWidth;
//alert(x + " : X");
elContainer.style.left = x + "px";
elContainer.style.top = y + "px";
}
return true;
};
I know I'm tardy to the party, but I like completeness...
Using Dheeraj Kumar Aggarwal's code as a starting point, I made some improvements, including defining "d". The code below only repositions the cell editor if it would have fallen off the edge of the screen, either horizontally or vertically (or both).
objDataTable.doBeforeShowCellEditor = function(cellEditor){
if(cellEditor.calendar){
// Move Editor
var d = YAHOO.util.Dom,
elContainer = cellEditor.getContainerEl(),
elTd = cellEditor.getTdEl(elContainer),
x = d.getX(elTd),
y = d.getY(elTd);
numWindowWidth = d.getDocumentWidth(); /// The size of the browser frame
numWindowHeight = d.getDocumentHeight(); /// The size of the browser frame
//TODO: remove scrolling logic
// SF doesn't get xy for cells in scrolling table
// when tbody display is set to block
if(isNaN(x) || isNaN(y)) {
// console.log('this.getTbodyEl()',this.getTbodyEl(),'this',this);
var elTbody = this.getTbodyEl();
x = elTd.offsetLeft + // cell pos relative to table
d.getX(elTbody.parentNode) - // plus table pos relative to document
elTbody.scrollLeft; // minus tbody scroll
y = elTd.offsetTop + // cell pos relative to table
d.getY(elTbody.parentNode) - // plus table pos relative to document
elTbody.scrollTop + // minus tbody scroll
this.getTheadEl().offsetHeight; // account for fixed THEAD cells
}
cellEditor.show();
//alert(x + " : X : width : " + elContainer.offsetWidth);
if (x + elContainer.offsetWidth > numWindowWidth) {
x = x - elContainer.offsetWidth + elTd.offsetWidth;
}
if (y + elContainer.offsetHeight > numWindowHeight) {
y = y - elContainer.offsetHeight + elTd.offsetHeight;
}
//alert(x + " : X");
elContainer.style.left = x + 'px';
elContainer.style.top = y + 'px';
// console.log('x',x,'y',y,'elContainer',elContainer);
}
return true;
};

Resources