Skip to content

Commit f55abb2

Browse files
sfranzyshensfranzyshen
authored
second try at hiding com controls when in browser
this is a second attempt at fixing the display of com and upload buttons from the www browser version of the interface ....
1 parent 824a8be commit f55abb2

1 file changed

Lines changed: 35 additions & 67 deletions

File tree

‎www/index.html‎

Lines changed: 35 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<link rel="icon" type="image/ico" href="media/app.ico" />
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
66
<title> Otto Blockly </title>
7-
<!-- JavaScript -->
87
<script type="text/javascript" src="js/blockly.min.js"></script>
98
<script type="text/javascript" src="js/type.js"></script>
109
<script type="text/javascript" src="js/types.js"></script>
@@ -78,19 +77,23 @@
7877
<script type="text/javascript" src="js/intel-hex.browser.js"></script>
7978
<script type="text/javascript" src="js/ace.js"></script>
8079
<script type="text/javascript" src="js/ext-language_tools.js"></script>
81-
<!-- CSS -->
8280
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.3.3.6.css"/>
8381
<link rel="stylesheet" type="text/css" href="css/bootstrap.toggle.min.css"/>
8482
<link rel="stylesheet" type="text/css" href="css/blocklino.css"/>
8583
<link rel="stylesheet" type="text/css" href="css/prettify.min.css"/>
84+
85+
<style>
86+
/* This class hides elements by default. JS will show them if Electron is detected. */
87+
.electron-only { display: none; }
88+
</style>
89+
8690
</head>
8791
<body onload="BlocklyDuino.init()">
8892
<div class="loading"></div>
8993
<div id="toptitle">
9094
<div id="title">
9195
<div class="img"><a href=https://www.ottodiy.com/><img src="media/icon.png" class="img-fluid" alt="Logo"></a></div>
92-
<!-- <span id="span_blocklino"></span>-->
93-
</span>
96+
</span>
9497
</div>
9598
<div id="title-bar-btns">
9699
<button id="btn_min" type="button" class="btn btn-minmax"><span class="fa fa-minimize fa-lg"></span></button>
@@ -114,13 +117,9 @@
114117
</button>
115118
</div>
116119
<select id="languageMenu" onchange="BlocklyDuino.changelanguage();" style="height: 42px; border-radius: 5px; font-weight: bold" ></select>
117-
<!-- <button id="btn_config" class="btn btn-arduino" data-toggle="modal" data-target="#configModal">
118-
<span class="fa fa-cog fa-lg fa-fw"></span>
119-
</button> -->
120-
<button id="btn_example" class="btn btn-arduino-rect" data-toggle="modal" data-target="#exampleModal">
120+
<button id="btn_example" class="btn btn-arduino-rect" data-toggle="modal" data-target="#exampleModal">
121121
<span class="fa fa-graduation"></span>
122122
</button>
123-
<!-- <span id="exampleModalLabel" style="color:white;font-size:4" > </span> -->
124123
<input id="title-project-name" type="text" placeholder="Project name" value=""/>
125124
<button id="btn_saveXML" class="btn btn-arduino-rect" >
126125
<span class="fa fa-floppy-o fa-lg fa-fw"></span>
@@ -132,17 +131,14 @@
132131
<span class="fa fa-folder-open"></span>
133132
</button>
134133
<input type="file" id="load" accept=".bloc,.xml,.py,.ino" style="display: none;" />
135-
<!-- <button id="btn_print" class="btn btn-arduino-rect"> <span class="fa fa-camera"> </span></button>-->
136-
<button id="btn_undo" class="btn btn-arduino-rect">
134+
<button id="btn_undo" class="btn btn-arduino-rect">
137135
<span class="fa fa-undo"> </span>
138136
</button>
139137
<button id="btn_redo" class="btn btn-arduino-rect">
140138
<span class="fa fa-repeat"> </span>
141139
</button>
142140

143-
<!-- <button id="btn_card" class="btn btn-arduino-rect" data-toggle="modal" data-target="#card" style="margin-top: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
144-
<span class="fa fa-microchip" > </span> </button>-->
145-
<select style="height: 0px; height: 42px; border-radius: 5px;font-weight: bold" id="boards" onchange="BlocklyDuino.change_card();">
141+
<select style="height: 0px; height: 42px; border-radius: 5px;font-weight: bold" id="boards" onchange="BlocklyDuino.change_card();">
146142
<option value="OttoESP" >ESP8266</option>
147143
<option value="nanooptiboot">♾ Nano</option>
148144
<option value="nano" >♾ Nano Old </option>
@@ -156,26 +152,20 @@
156152
<option value="micro" >♾ Micro</option>
157153
<option value="mega" >♾ Mega</option>
158154
<option value="mkrwifi1010" >♾ MKR WiFi</option>
159-
<!--<option value="mini" >Arduino Mini</option>
160-
<option value="wemosD1miniPro" >WeMos D1 mini</option>
161-
<option value="pro8" >Arduino Pro / Pro Mini 3.3V</option>
162-
<option value="yun" >Arduino Yun</option> -->
163-
</select>
164-
<!-- <button id="btn_usb" class="btn btn-arduino-rect" data-toggle="modal" data-target="#usb" style="margin-top: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
165-
<span class="fa fa-usb"></span> </button> -->
166-
<select style="height: 0px; height: 42px; border-radius: 5px;font-weight: bold" id="portserie" onchange="BlocklyDuino.save_com();"></select>
167-
<button id="btn_verify" class="btn btn-arduino" data-toggle="modal" data-target="#message">
155+
</select>
156+
<select class="electron-only" style="height: 0px; height: 42px; border-radius: 5px;font-weight: bold" id="portserie" onchange="BlocklyDuino.save_com();"></select>
157+
158+
<button id="btn_verify" class="btn btn-arduino electron-only" data-toggle="modal" data-target="#message">
168159
<span class="fa fa-check fa-1_5x"> </span>
169160
</button>
170-
<button id="btn_flash" class="btn btn-arduino" data-toggle="modal" data-target="#message">
161+
162+
<button id="btn_flash" class="btn btn-arduino electron-only" data-toggle="modal" data-target="#message">
171163
<span class="fa fa-arrow-right fa-1_5x"> </span>
172164
</button>
165+
173166
<span id="survol" style="color:#fff"></span>
174167
</div>
175168
<div id="btn_group" class="btn-group" role="group">
176-
<!-- <button id="btn_about" class="btn btn-arduino-rect" data-toggle="modal" data-target="#aboutModal"><span class="fa fa-question"></span> </button> -->
177-
<!-- <button id="btn_bin" class='btn btn-default'> <span class="fa fa-download"> </span> </button> -->
178-
<!-- <button id="btn_factory" class="btn btn-default"><span class="fa fa-industry fa-fw"> </span> </button> -->
179169
<button id="btn_term" class="btn btn-arduino-rect"><span class="fa fa-search"></span></button>
180170
<button id="btn_preview" class="btn btn-arduino-rect"><span class="fa fa-code "> </span> </button>
181171
<button id="btn_search" class='btn btn-arduino-rect'><span class="fa fa-binoculars"> </span></button>
@@ -199,7 +189,6 @@
199189
</div>
200190
<div role="tabpanel" id="content_code" class="tab-pane fade">#enter your code here</div>
201191
</div>
202-
<!-- message modal -->
203192
<div class="modal fade" id="message" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false" data-backdrop="static" >
204193
<div class="modal-dialog modal-sm">
205194
<div class="modal-content">
@@ -209,7 +198,6 @@
209198
</div>
210199
</div>
211200
</div>
212-
<!-- about modal -->
213201
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalLabel" aria-hidden="true">
214202
<div class="modal-dialog">
215203
<div class="modal-content">
@@ -244,36 +232,6 @@
244232
</div>
245233
</div>
246234
</div>
247-
<!-- toolbox config modal
248-
<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="configModalLabel" aria-hidden="true">
249-
<div class="modal-dialog">
250-
<div class="modal-content">
251-
<div class="modal-header">
252-
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&#215;</span></button>
253-
<span class="fa fa-cog fa-2x" class="modal-title" id="configModalLabel"></span>
254-
</div>
255-
<div class="modal-body">
256-
<label id="span_languageMenu"></label>
257-
<select id="languageMenu"></select><br><br>
258-
<div id="divToolbox">
259-
<label id="labelToolboxDefinition"></label>
260-
<select id="toolboxes">
261-
<option value="toolbox_6"selected="selected">Beginner 👶</option>
262-
<option value="toolbox_arduino_all" >Advanced 👨‍💻</option>
263-
<option value="toolbox_master">Master 👨‍🚀</option>
264-
</select>
265-
</div>
266-
</div>
267-
<input type="checkbox" name="select_all" id="select_all"/> <span id="span_select_all"> </span>
268-
<div class="modal-body" id="modal-body-config"></div>
269-
<div class="modal-footer">
270-
<button id="btn_valid_config" type="button" class="btn btn-primary"></button>
271-
</div>
272-
</div>
273-
</div>
274-
</div>
275-
-->
276-
<!-- example modal -->
277235
<div class="modal fade" id="exampleModal" >
278236
<div class="modal-dialog modal-lg">
279237
<div class="modal-content">
@@ -291,7 +249,6 @@
291249
</div>
292250
</div>
293251
</div>
294-
<!-- CARD modal -->
295252
<div class="modal fade" id="card" >
296253
<div class="modal-dialog modal-md">
297254
<div class="modal-content">
@@ -322,13 +279,11 @@
322279
</select>
323280
<br><br>
324281
<div id="infoboard"></div>
325-
<!-- <div class="alert alert-warning" role="alert" id="warning"> -->
326282
</div>
327283
</div>
328284
</div>
329285
</div>
330286
</div>
331-
<!-- USB modal -->
332287
<div class="modal fade" id="usb" >
333288
<div class="modal-dialog modal-sm">
334289
<div class="modal-content">
@@ -338,7 +293,6 @@
338293
</div>
339294
</div>
340295
</div>
341-
<!-- modal_blink -->
342296
<div id="modal_blink" class="modal modal-child" data-modal-parent="#exampleModal">
343297
<div class="modal-dialog modal-lg">
344298
<div class="modal-content">
@@ -386,15 +340,29 @@
386340
</div>
387341
</body>
388342
<script type="text/javascript">
389-
$(window).load(function(){$(".loading").fadeOut("slow")});
343+
$(window).load(function(){
344+
$(".loading").fadeOut("slow");
345+
346+
// DETECT ELECTRON
347+
// If the user agent string contains 'electron', we show the hidden elements
348+
if (navigator.userAgent.toLowerCase().indexOf(' electron/') > -1) {
349+
$(".electron-only").show();
350+
}
351+
});
352+
390353
ace.require("ace/ext/language_tools");
391354
var editor = ace.edit("content_code");
392355
editor.setTheme("ace/theme/sqlserver");
393356
editor.session.setTabSize(2);
394357
editor.setShowPrintMargin(false);
395-
require('../resources/app/index.js');
396-
require('../resources/app/factory.js');
358+
359+
// TRY-CATCH ADDED to prevent browser crash (Browsers don't support 'require')
360+
try {
361+
require('../resources/app/index.js');
362+
require('../resources/app/factory.js');
363+
} catch (e) {
364+
console.log("Running in Browser Mode (require not available)");
365+
}
397366
</script>
398367
</html>
399368

400-

0 commit comments

Comments
 (0)