Check-in [e301b91a5e]
Not logged in

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:improve twv examples
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA1: e301b91a5e3046d002c116141b71d4c82b24370f
User & Date: chw 2019-06-24 13:24:19
Context
2019-06-26
03:41
add selected tk upstream changes check-in: 26ecdae69e user: chw tags: trunk
2019-06-24
13:25
merge with trunk check-in: 56b3ad1cde user: chw tags: wtf-8-experiment
13:24
improve twv examples check-in: e301b91a5e user: chw tags: trunk
13:07
fix some encoding issues in tkpath ptext items check-in: db36158b9b user: chw tags: trunk
Changes

Changes to undroid/tsb/examples/cheatsheet.tsb.

81
82
83
84
85
86
87
88

89
90
91
92
93
94
95
96
where the number is the index in the history array. Arbitrary text can be
entered which however should be valid Tcl code, except the very first line
is <code>#HTML</code> or <code>#MARKDOWN</code>, in which case the
following lines should be valid HTML or Markdown text, respectively.
The input field is evaluated when <code>&lt;Shift-Return&gt;</code>
is pressed.</p>

<p>Depending on the command evaluation the input field is sometimes hidden.

A double click on the corresponding output field(s) makes the input field
visible and thus editable, again.</p>} 14 {h3 "Output Fields"} 15 {#HTML
<p>Each input field has two corresponding output fields which are
visible/non-empty depending on context. One output field receives
preformatted text, either the result or the error message of a
command evaluation. The other output field receives HTML, e.g.
for displaying an image or for the <code>#HTML</code> and
<code>#MARKDOWN</code> formats from the input field.</p>} 16 {tsb::save cheatsheet.tsb}







|
>
|
|






81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
where the number is the index in the history array. Arbitrary text can be
entered which however should be valid Tcl code, except the very first line
is <code>#HTML</code> or <code>#MARKDOWN</code>, in which case the
following lines should be valid HTML or Markdown text, respectively.
The input field is evaluated when <code>&lt;Shift-Return&gt;</code>
is pressed.</p>

<p>Depending on the command evaluation the input field is sometimes
hidden, and a new input field gets added to the document. A double
click on the corresponding output field(s) makes a hidden input
field visible and thus editable, again.</p>} 14 {h3 "Output Fields"} 15 {#HTML
<p>Each input field has two corresponding output fields which are
visible/non-empty depending on context. One output field receives
preformatted text, either the result or the error message of a
command evaluation. The other output field receives HTML, e.g.
for displaying an image or for the <code>#HTML</code> and
<code>#MARKDOWN</code> formats from the input field.</p>} 16 {tsb::save cheatsheet.tsb}

Changes to undroid/tsb/examples/mqtt.tsb.

18
19
20
21
22
23
24

25
the GWDS/WSV.</p>} 9 {$MQTT_CLIENT subscribe "de.wsv/pegel/cm/#" callback} 10 {#HTML
<p>From now on, periodic updates should be written into the DATA array.</p>} 11 {table {topic data} [array get DATA]} 12 {#HTML
<p>Refresh the table above each minute.</p>} 13 {proc refresh {} {
    after cancel refresh
    after 60000 refresh
    tsb::eval 11
}

refresh} 14 {tsb::save mqtt.tsb}







>
|
18
19
20
21
22
23
24
25
26
the GWDS/WSV.</p>} 9 {$MQTT_CLIENT subscribe "de.wsv/pegel/cm/#" callback} 10 {#HTML
<p>From now on, periodic updates should be written into the DATA array.</p>} 11 {table {topic data} [array get DATA]} 12 {#HTML
<p>Refresh the table above each minute.</p>} 13 {proc refresh {} {
    after cancel refresh
    after 60000 refresh
    tsb::eval 11
}
# first refresh after 10 seconds ...
after 10000 refresh} 14 {tsb::save mqtt.tsb}

Changes to undroid/tsb/tsb.tcl.

838
839
840
841
842
843
844

845
846
847
848
849
850
851
852
853
854
855
856



857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
...
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
....
1070
1071
1072
1073
1074
1075
1076

1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089

1090
1091
1092
1093



1094
1095
1096
1097
1098



1099
1100
1101



1102
1103
1104
1105
1106

1107





















1108
1109
1110
1111
1112
1113
1114
    variable D_style
    variable D_script
    variable D

    # HEAD
    set D_head {<!DOCTYPE html><html lang="en"><head>}
    append D_head {<meta charset="utf-8">}


    # STYLE, CSS
    set D_style {
	<style>
	body {
	    margin: 1em 2em 1em 2em;
	    font-family: sans-serif, Arial, Tahoma, Helvetica;
	    font-size: 90%;
	}
	textarea {
	    font-family: Consolas, Roboto Mono, Liberation Mono, monospace;
	    font-size: 90%;



	}
	pre {
	    /* overflow-x: auto; */
	    white-space: pre-wrap;
	    white-space: -moz-pre-wrap;
	    white-space: -pre-wrap;
	    white-space: -o-pre-wrap;
	    word-wrap: break-word;
	}
	pre, code {
	    font-family: Consolas, Roboto Mono, Liberation Mono, monospace;
	    font-size: 90%;
	}
	img, svg {
	    max-width: 95%;
	}
	.field {
	    border: 1px solid transparent;
................................................................................
	.field:hover {
	    border: 1px dotted #AAAAAA;
	}
	.infield * {
	    vertical-align: middle;
	}
	.tlabel {
	    font-family: Consolas, Roboto Mono, Liberation Mono, monospace;
	    font-size: 90%;
	    margin: 1px;
	    padding: 1px;
	    width: 7ex;
	    display: inline-block;
	    text-align: right;
	}
................................................................................
	var Field = function(id) {
	    var div = document.createElement('div');
	    div.className = 'field';
	    var html = '\n <div class="infield" id="in' + id + '">';
	    html += '\n  <label class="tlabel"';
	    html += ' for="code' + id + '">in(' + id + ')</label>';
	    html += '\n  <textarea class="tin" id="code' + id + '" rows="1"';

	    html += '></textarea>\n </div>';
	    html += '\n <div id="out' + id + '-pre">';
	    html += '<pre></pre></div>';
	    html += '\n <div id="out' + id + '-raw"></div>\n';
	    div.innerHTML = html;
	    document.body.appendChild(div);
	    /* For better readability only. */
	    document.body.appendChild(document.createTextNode('\n'));
	    needsClear[id] = null;
	    var input = document.getElementById('code' + id);
	    input.addEventListener('keydown', function(event) {
		var code;
		var shift = false;

		if (window.event) {
		    code = window.event.keyCode;
		    if (window.event.shiftKey) {
			shift = true;



		    }
		} else {
		    code = event.keyCode;
		    if (event.shiftKey) {
			shift = true;



		    }
		    if (shift && code == 13) {
			event.stopPropagation();



		    }
		}
		if (shift && code == 13) {
		    needsClear[id] = true;
		    RunTcl("" + id + " " + input.value);

		    event.preventDefault();





















		    return false;
		}
	    });
	    input.addEventListener('input', function(event) {
		var lines = input.value.split(/\r?\n|\r/);
		var nlines = (lines.length < 50) ? lines.length : 50;
		input.rows = nlines;







>










|

>
>
>










|







 







|







 







>













>




>
>
>





>
>
>



>
>
>





>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
...
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
....
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
    variable D_style
    variable D_script
    variable D

    # HEAD
    set D_head {<!DOCTYPE html><html lang="en"><head>}
    append D_head {<meta charset="utf-8">}
    append D_head {<meta name="viewport" content="width=device-width, initial-scale=1.0">}

    # STYLE, CSS
    set D_style {
	<style>
	body {
	    margin: 1em 2em 1em 2em;
	    font-family: sans-serif, Arial, Tahoma, Helvetica;
	    font-size: 90%;
	}
	textarea {
	    font-family: Consolas, "Roboto Mono", "Liberation Mono", monospace;
	    font-size: 90%;
	}
	textarea::placeholder {
	    font-style: italic;
	}
	pre {
	    /* overflow-x: auto; */
	    white-space: pre-wrap;
	    white-space: -moz-pre-wrap;
	    white-space: -pre-wrap;
	    white-space: -o-pre-wrap;
	    word-wrap: break-word;
	}
	pre, code {
	    font-family: Consolas, "Roboto Mono", "Liberation Mono", monospace;
	    font-size: 90%;
	}
	img, svg {
	    max-width: 95%;
	}
	.field {
	    border: 1px solid transparent;
................................................................................
	.field:hover {
	    border: 1px dotted #AAAAAA;
	}
	.infield * {
	    vertical-align: middle;
	}
	.tlabel {
	    font-family: Consolas, "Roboto Mono", "Liberation Mono", monospace;
	    font-size: 90%;
	    margin: 1px;
	    padding: 1px;
	    width: 7ex;
	    display: inline-block;
	    text-align: right;
	}
................................................................................
	var Field = function(id) {
	    var div = document.createElement('div');
	    div.className = 'field';
	    var html = '\n <div class="infield" id="in' + id + '">';
	    html += '\n  <label class="tlabel"';
	    html += ' for="code' + id + '">in(' + id + ')</label>';
	    html += '\n  <textarea class="tin" id="code' + id + '" rows="1"';
	    html += ' wrap="soft" placeholder="Enter Tcl code, #HTML, or #MARKDOWN. Evaluate with &lt;Shift-Return&gt;."';
	    html += '></textarea>\n </div>';
	    html += '\n <div id="out' + id + '-pre">';
	    html += '<pre></pre></div>';
	    html += '\n <div id="out' + id + '-raw"></div>\n';
	    div.innerHTML = html;
	    document.body.appendChild(div);
	    /* For better readability only. */
	    document.body.appendChild(document.createTextNode('\n'));
	    needsClear[id] = null;
	    var input = document.getElementById('code' + id);
	    input.addEventListener('keydown', function(event) {
		var code;
		var shift = false;
		var ctrl = false;
		if (window.event) {
		    code = window.event.keyCode;
		    if (window.event.shiftKey) {
			shift = true;
		    }
		    if (window.event.ctrlKey) {
			ctrl = true;
		    }
		} else {
		    code = event.keyCode;
		    if (event.shiftKey) {
			shift = true;
		    }
		    if (event.ctrlKey) {
			ctrl = true;
		    }
		    if (shift && code == 13) {
			event.stopPropagation();
		    }
		    if (ctrl && code == 9) {
			event.stopPropagation();
		    }
		}
		if (shift && code == 13) {
		    needsClear[id] = true;
		    RunTcl("" + id + " " + input.value);
		    if (event.preventDefault) {
			event.preventDefault();
		    }
		    event.returnValue = false;
		    return false;
		}
		if (ctrl && code == 9) {
		    var top = input.scrollTop;
		    if (input.setSelectionRange) {
			var start = input.selectionStart;	
			var end = input.selectionEnd;
			input.value = input.value.substring(0, start)
			    + '\t' + input.value.substr(end);
			input.setSelectionRange(start + 1, start + 1);
			input.focus();
		    } else if (input.createTextRange) {
			document.selection.createRange().text = '\t';
			event.returnValue = false;
		    }
		    input.scrollTop = top;
		    if (event.preventDefault) {
			event.preventDefault();
		    }
		    return false;
		}
	    });
	    input.addEventListener('input', function(event) {
		var lines = input.value.split(/\r?\n|\r/);
		var nlines = (lines.length < 50) ? lines.length : 50;
		input.rows = nlines;