I would like to display a simple HTML page in a PowerShell dialog box.
This is the way to build a dialog with dialog.ps1:
[void] [System.Reflection.Assembly]::LoadWithPartialName("System.Drawing")
[void] [System.Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms")
$objForm = New-Object System.Windows.Forms.Form
[void] $objForm.ShowDialog()
In this windows I would like to display a webpage like index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>
<body>
Hello world!
</body>
</html>
Of course, the webpage has a little more elements, like a picture with picturemap.
If this would work with CMD too, I would like this option even more.
The following snippet - which uses PSv5+[1] syntax for convenience - demonstrates use of the WebBrowser control to display HTML text in a WinForms dialog:
# PSv5+:
# Import namespaces so that types can be referred by
# their mere name (e.g., `Form` rather than `System.Windows.Forms.Form`)
#
using namespace System.Windows.Forms
using namespace System.Drawing
# Load the WinForms assembly.
Add-Type -AssemblyName System.Windows.Forms
# Create a form.
$form = [Form] #{
ClientSize = [Point]::new(400, 400)
Text = "WebBrowser-Control Demo"
}
# Create a web-browser control, make it as large as the inside of the form,
# and assign the HTML text.
$sb = [WebBrowser] #{
ClientSize = $form.ClientSize
DocumentText = #'
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>
<body>
Hello world!
</body>
</html>
'#
}
# Add the web-browser control to the form...
$form.Controls.Add($sb)
# ... and display the form as a dialog (synchronously).
$form.ShowDialog()
# Clean up.
$form.Dispose()
[1] The code also works in PowerShell [Core] v7+, but not in PowerShell Core v6.x, because the latter fundamentally did not support WinForms (and WPF).
Related
I have a folder in a ftp with a hundred of subfolders, each have it's own index.html
I want to add a <link rel="stylesheet" href="https://subdomain.domain.fr/vad/client/build/iconfont.css">
in each index.html
The subdomain is variable and can be captured from another stylesheet link ex :
<link rel="stylesheet" href="https://subdomain.domain.fr/vad/client/build/theme.css">
I tried this :
find . -type f -name index.html -exec sed -i 's/<link rel="stylesheet" href="https:\/\/\(*\).domain.fr\/vad\/client\/build\/theme.css">/<link rel="stylesheet" href="https:\/\/\1.domain.fr\/vad\/client\/build\/theme.css"><link rel="stylesheet" href="https:\/\/\1.domain.fr\/vad\/client\/build\/iconfont.css">/g' {} \;
With capturing and copy groups but it's not working
For ease and readability, change the delimiter from / to let's say # You also have to escape real dots in search pattern…
sed -i 's#<link rel="stylesheet" href="https://\(*\)\.domain\.fr/vad/client/build/theme\.css">#<link rel="stylesheet" href="https://\1.domain.fr/vad/client/build/theme.css"><link rel="stylesheet" href="https://\1.domain.fr/vad/client/build/iconfont.css">#g'
From there, I can see there's a mistake in your regexp capturing group… You wrote \(*\), but I suspect you mean \(.*\) :) (otherwise, you where trying to capture nothing …or by chance opening parenthesis only…)
Now, it's look like you are replacing one word with another one, in order to change the CSS file? As it's appearing in a specific kind of line, you can perform a simple replacement in line matching that pattern ;)
sed -i '/\<link rel="stylesheet" href="https:\/\/.*\.domain\.fr\/vad\/client\/build/s#theme#iconfont#'
Using Perl and a Mojo::DOM HTML Parser to edit your HTML:
use strict; use warnings;
use Mojo::DOM;
# Slurp the whole HTML as string
my $html = join "", <>;
my $dom = Mojo::DOM->new($html);
# Fetch domain name
$_ = $dom
->find('link[href][rel="stylesheet"]')
->map(attr => 'href')
->last;
my ($domain) = m|^https?://([^/]+)/|
or die "No match https?!\n";
# Find/append
$dom
->find('head > link[href][rel="stylesheet"]')
->last
->append(
"\n" .
'<link rel="stylesheet" href="https://' .
$domain .
'/build/iconfont.css" />'
);
# Render
print "$dom";
Output
Example of one file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="https://subdomain.domain.fr/build/theme.css" rel="stylesheet">
<link href="https://subdomain.domain.fr/build/iconfont.css" rel="stylesheet">
<title></title>
</head>
<body>
POUET
</body>
</html>
Usage
First test the script against some files without sponge.
Then, if tests are satisfactory:
#!/bin/bash
shopt -s globstar # enable recursion **
for h in **/*.html; do
perl Mojo::DOM.pl "$h" | sponge "$h"
done
I am trying to use PyScript in my HTML projects, since I'm more fluent in it than JavaScript. I need to pull input from an input block, but what should work doesn't seem like it does.
When the user presses the submit button, it's supposed to change the words above it to the value of the input box. However, the code only returns "None", as if the value doesn't exist.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PyScript Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- /demo.py
</py-env>
</head>
<body style="font-family:Times New Roman;margin-left:40px">
<br>
<p id=main_description class=text>
Hello, world.
</p>
<input class=player_input type=text id=input_box name=input autocomplete=off placeholder="What will you do?">
<button type=button id=submit pys-onclick=submit_input>submit</button>
<py-script src=/demo.py></py-script>
</body>
</html>
PyScript code:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.select(".value")
main_description = Element("main_description")
main_description.write(player_input)
I have searched for a solution to this everywhere, but it looks like PyScript is still relatively new, so I couldn't find anything except traditional Python solutions. Any advice would be greatly appreciated.
On this line player_input = input_box.select(".value") you are trying to access an element with a class of value but no elements exist inside the input. To retrieve the value of the input you need to access it with the value property like so:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.value
main_description = Element("main_description")
main_description.write(player_input)
I pretty new on these things and im trying to improve my self on html skeleton. So when I call html skeleton on vscode it's being like this as you know.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
but i want to change default html skeleton content as like this;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: black;}
</style>
</head>
<body>
</body>
</html>
Someone can help me with this?
You can make your own custom snippet using vscode.
As in your case you can create one using the following steps:
Open the gear icon on the bottom left of you vscode.
Select user snippet
Type html
Adding your custom html skelton
You can now add this code to have your custom skelton:
"boilerplate": {
"prefix": "log",
body: [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Document</title>",
" <style>",
" body{background-color: black;}",
" </style>",
"</head>",
"<body>",
" ",
"</body>",
"</html>",
],
"description": ""
}
],
"description": "Log output to console"
}
}
I haven't changed the prefix, but it can be changed through "prefix": ""
Using the custom snippet
To use the custom snippet, just type the prefix in the html file to get the results!
If you want to add you own custom code, and have problem in converting it into snippet, here's a website which will help in that:
snippet generator
For more knowledge this video can help: YouTube video
I am working on a simple webpage. I have a following sample json file and an HTML template
data.json
{
"NAME":"SAMPLE_NAME",
"ADDRESS":"New Brunswick Avenue"
}
index.html
<div class="name"></div>
<div class="address"></div>
So i have to display the name and address on the template reading from the json file. Is there any library that i can user for this or any other way to accomplish this?
I think you are looking for a compile-time templating or pre-compiled templating engine sort of thing.
You can build one your own with html, css and using javascript or jquery to change the text of certain elements, but this is going to take a long time if you have big pages.
However there is a library out there that does something like this and its called Handlebars.
Heres a link: http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro
This might give you an idea of what it does: What is the difference between handlebar.js and handlebar.runtime.js?
Here is an example using your html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// Load your html / template into this variable
var template = '<div class="name">{{name}}</div><div class="address">{{address}}</div>';
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementsByTagName('body')[0].innerHTML = html;
</script>
</body>
</html>
If you would rather write html outside of the javascript variables you could also do it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="template">
<div class="name">{{name}}</div>
<div class="address">{{address}}</div>
</div>
<script>
// Load your html / template into this variable
var template = document.getElementById('template').innerHTML;
var jsonData = {
"name":"John",
"address": "City Street"
}
var compiledTemplate = Handlebars.compile(template);
// The output html is generated using
var html = compiledTemplate(jsonData);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>
I placed the following code in enter-protein.vm
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1> Enter Protein VELOCITY </h1>
#sform ("action = enter-protein")
#stextfield ("name=enteredProtein")
#ssubmit("value=Enter")
#end
<div>Amount entered: #sproperty ("value = enteredProtein")</div>
<div> Total for the day : 100 grms </div>
<div> #sproperty ("value=goalText")</div>
</body>
</head>
</html>
I get an error at #end as
Invalid token #end
I also included additional directories like commons-collections-3.2.jar, velocity-1.6.2.jar, velocity-tools-view.2.0.jar
#end marks the end of a block started by one of #if, #foreach, #macro, or #define. Neither of these is used in the rest of the template, so there's no need for the #end used in the code. Simply remove it, and the error should be gone.
Perhaps you're trying to make #sform a macro with a body? In that case, it should be called as ##sform, but that isn't supported by Velocity 1.6, which you seem to be using.