Category: HTML5

WebController

Webcontroller is an HTML5-based browser application which allows to build versatile user interfaces for visualization, control and debugging of ROS systems. It uses and shows ROS messasges, services and parameters, much like the rqt-tools. GUIs are created right in the browser by drag&drop and can be saved. A menu bar displays the available ROS resources and widgets.

disabled属性

buttonにdisabledを追加します。

<button disabled>ボタン</button><br>
<button>ボタン2</button>

なるほど、こうやって表示されるのかー

Phone number

The size attribute specifies the width of the input field in characters.
The width of 17 characters is specified.

<p>
								電話番号(必須)<br>
								<input class="long-text" value="080-1234-5678" type="tel" size="17" required>
							</p>

うん、よい感じ。

Radio button selected

Can create a radio button by specifying type=”radio” for input element.

Enter “checked” to specify the selected state

<p id="radio">
								お仕事を探すエリア<br>
								<label><input name="job-place" class="radio" type="radio" checked>関東</label>
								<label><input name="job-place" type="radio">関西</label>
								<label><input name="job-place" type="radio">名古屋</label>
								<label><input name="job-place" type="radio">その他</label>
							</p>

ほう、いいんじゃーないでしょうか！？

foreignObject

SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.

<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
	<desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc>
	<switch>
		<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Here is a paragraph that requires word wrap</p>
		</body>
	</foreignObject>

	<text font-size="10" font-family="Verdana">
		<tspan x="10" y="10">Here is a paragraph that</tspan>
		<tspan x="10" y="20">requires word wrap.</tspan>
	</text>
</switch>
</svg>


<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
	<style>
	h1 {
		color:red;
	}
	</style>
	<g>
		<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Hello, world!</p>
		</body>
	</foreignObject>
</g>
</svg>

ん？　どういこと？

font face=””でフォントを指定する

とりあえず、明朝、ゴシックで比較

<p>通常フォント</p>
<p><font face="ＭＳ Ｐ明朝">通常フォント</font></p>
<p><font face="ＭＳ Ｐゴシック">通常フォント</font></p>
<p><font face="Impact">font test</font></p>

全然違いますね～

しかし、これデザイナーの領域だな。。。

＞重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」
なるほど、テイストによって分けるのは理解できる。。
まず、どんな文字があるのか知らないといけない。。

パスワード 入力値の確認　その2

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="confirm" id="confirm" oninput="CheckPassword(this)"><br>
<input type="submit" value="送信">
</form>
<script>
		function CheckPassword(confirm){
			var input1 = password.value;
			var input2 = confirm.value;

			if (input1 != input2){
				confirm.setCustomValidity("入力値が一致しません");
			} else{
				confirm.setCustomValidity('');
			}
		}
</script>

うまくいきました。

oninput=””か、なるほど。

パスワード 入力値の確認

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="passwordConfirm" id="passwordConfirm" required><br>
<input type="submit" value="送信">
</form>
<script>
var form = document.forms[0];
form.onsubmit = function(){
	form.password.setCustomValidity("");

	if(form.password.value != form.passwordConfirm.value){
		form.password.setCustomValidity("パスワードと確認用パスワードが一致しません")
	}
}
form.addEventListener("invalid", function(){
	document.getElementById("errorMessage").innerHTML = "入力値にエラーがあります";
}, false);
</script>

あれ？　あれ？
うまくいきませんね。。

「確認」「クリア」「戻る」ボタン

I want to display the “confirmation”, “clear” and “return” buttons within HTML form.
Here is User Interface.

confirm: type=”submit”
clear: type=”reset”
return: type=”button” onclick=”history.back()”

<center>
		<button type="submit">確認</button>　<button type="reset">クリア</button>　<button type="button" onclick="history.back()">戻る</button>
	</center>

It’s easy than expected.