Add code to allow terminal in BangleApps

pull/3619/head
Gordon Williams 2024-10-21 12:33:07 +01:00
parent 2c534e5a44
commit 0300d3c08c
4 changed files with 81 additions and 12 deletions

View File

@ -187,14 +187,18 @@
</details> </details>
</div> </div>
<div id="more-deviceinfo" style="display:none"> <div id="more-deviceinfo" style="display:none">
<h3>Device info</h3> <h3>Device info</h3>
<div id="more-deviceinfo-content"></div> <div id="more-deviceinfo-content"></div>
<div class="editor--terminal">
<div class="editor__canvas" style="position:relative;height:20rem;display:none;"></div>
<button class="btn" id="terminalEnable">Enable Terminal</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<footer class="floating hidden"> <footer class="floating hidden">
<!-- Install button, hidden by default --> <!-- PWA Install button, hidden by default -->
<div id="installContainer" class="hidden"> <div id="installContainer" class="hidden">
<button id="butInstall" type="button"> <button id="butInstall" type="button">
Install Install
@ -203,7 +207,7 @@
</footer> </footer>
<script src="webtools/puck.js"></script> <script src="webtools/puck.js"></script>
<script src="webtools/heatshrink.js"></script> <script src="webtools/heatshrink.js"></script>
<script src="core/lib/marked.min.js"></script> <script src="core/lib/marked.min.js"></script>
<script src="core/lib/espruinotools.js"></script> <script src="core/lib/espruinotools.js"></script>
<script src="core/js/utils.js"></script> <script src="core/js/utils.js"></script>
@ -416,7 +420,7 @@ if (el) el.addEventListener("click", event=>{
if (webrtc) showWebRTCID(webrtc.peerId); if (webrtc) showWebRTCID(webrtc.peerId);
else { else {
webrtc = webrtcInit({ webrtc = webrtcInit({
bridge:true, bridge:true,
onStatus : function(s) { onStatus : function(s) {
showToast(s); showToast(s);
}, },
@ -432,7 +436,7 @@ if (el) el.addEventListener("click", event=>{
onPortDisconnect : function(serialPort) { onPortDisconnect : function(serialPort) {
}, },
onPortWrite : function(data, cb) { onPortWrite : function(data, cb) {
Puck.write(data, cb); Puck.write(data, cb);
} }
}); });
connection.on("data", function(d) { connection.on("data", function(d) {

2
core

@ -1 +1 @@
Subproject commit 8f4b43bab57ddc482533b1a00bb03601dc7ead79 Subproject commit 7e5ac0271f794bcacda3a5a692cfa479457eb4dd

View File

@ -81,8 +81,8 @@ a.btn.btn-link.dropdown-toggle {
min-height: 8em; min-height: 8em;
} }
.tile-content { .tile-content {
position: relative; position: relative;
overflow-wrap: anywhere; /* stop long text like links pushing the width out too far*/ overflow-wrap: anywhere; /* stop long text like links pushing the width out too far*/
} }
.link-github { .link-github {
@ -141,3 +141,64 @@ Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wr
white-space: normal; white-space: normal;
min-width: 160px; min-width: 160px;
}*/ }*/
/* Terminal */
/* ----------------------------------------------------- */
.terminal
{
font-size: 12px;
background-color: #222;
color: white;
display: block;
border: 0;
padding: 10px;
overflow: auto; /* adds scrollbar if needed */
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
-o-user-select: text;
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
}
.termLine {
font-family: Fixed, monospace;
tab-size: 4;
min-height: 1em;
}
.terminal.focus
{
background-color: #333;
}
.terminal__focus
{
position: absolute;
top: -100px; /* hide it */
}
.terminal a
{
color:#88F;
}
.terminal a:visited
{
color:#88F;
}
.terminal--connected.focus .terminal__cursor
{
animation: blink 1s step-end 0s infinite;
}
.terminal--webcam.focus .terminal__cursor
{
text-shadow: none;
animation: blink_webcam 1s step-end 0s infinite;
}

View File

@ -190,14 +190,18 @@
</details> </details>
</div> </div>
<div id="more-deviceinfo" style="display:none"> <div id="more-deviceinfo" style="display:none">
<h3>Device info</h3> <h3>Device info</h3>
<div id="more-deviceinfo-content"></div> <div id="more-deviceinfo-content"></div>
<div class="editor--terminal">
<div class="editor__canvas" style="position:relative;height:20rem;display:none;"></div>
<button class="btn" id="terminalEnable">Enable Terminal</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<footer class="floating hidden"> <footer class="floating hidden">
<!-- Install button, hidden by default --> <!-- PWA Install button, hidden by default -->
<div id="installContainer" class="hidden"> <div id="installContainer" class="hidden">
<button id="butInstall" type="button"> <button id="butInstall" type="button">
Install Install