impoved: user interface, more samples and icons

TODO.md

@@ -1,14 +1,10 @@
 # List of my TODO items
 
 ## NOW
-- implement steering direction for distance as well
+n/a
 
 ## NEXT
-- handle multi port Motor blocks
-- horizonal block - handle all motor(s) attached to the Hub
-- convert RegistryManager for setup_devices_registry
-- consider not grouping stacks by type, but use the Y-X ordering, what about messages?
+n/a
 
 ## LATER
-- more jest tests to be added
-- radiobroadcast_whenIReceiveRadioSignalHat, collect, unify all handlers and remember last value, add channel to hub setup...
+n/a

src/github_version.ts

@@ -1,2 +1,2 @@
-const GITHUB_VERSION = 'aa';
+const GITHUB_VERSION = '';
 export { GITHUB_VERSION };

src/index.ts

@@ -11,35 +11,57 @@ function handleFileUpload(file: File) {
             debug: {},
         } as PyConverterOptions;
 
-        console.log($('#additionalCommentsCheck'));
         if (options.debug && $('#additionalCommentsCheck').is(':checked')) {
             options.debug.showExplainingComments = true;
         }
 
         try {
             const retval = await convertProjectToPython(input, options);
+            $('#preview-svg').toggleClass('d-none', !retval?.svg);
             $('#preview-svg').html(retval?.svg ?? '');
-            $('#preview-svg-map')
-                .html(retval?.svg ?? '')
-                .removeClass('d-none');
+            $('#preview-svg-map').html(retval?.svg ?? '');
             $('#preview-pycode').html(retval?.pycode ?? '');
             $('#preview-pseudocode').html(retval?.plaincode ?? '');
 
-            const slotid = retval.projectInfo?.slotIndex;
-            const sloturl = `img/cat${slotid}.svg#dsmIcon`;
-            $('#svg-program-use').attr('href', sloturl).attr('xlink:href', sloturl);
+            const devtype = `img/devtype${retval.deviceType}.png`;
+            $('#devtype').removeClass('d-none').attr('src', devtype);
+
+            const isSB3 = retval.deviceType && [1, 2].includes(retval.deviceType);
+            $('#sb3slot').toggleClass('d-none', !isSB3);
+            $('#svg-tab').toggleClass('d-none', !isSB3);
+
+            if (isSB3) {
+                const slotid = retval.projectInfo?.slotIndex;
+                const sloturl = `img/cat${slotid}.svg#dsmIcon`;
+                $('#svg-program-use').attr('href', sloturl).attr('xlink:href', sloturl);
+            }
         } catch (error) {
+            console.error('Error converting project to python', error);
+            $('#devtype').addClass('d-none');
             $('#preview-pycode').html(error as string);
+            $('#svg-tab').addClass('d-none');
+            $('#pseudocode-tab').addClass('d-none');
+            $('#preview-svg').addClass('d-none');
+            $('#preview-svg-map').addClass('d-none');
+            $('#sb3slot').addClass('d-none');
+            $('#preview-svg-map').html('');
+
+            $('#toast1 .toast-title').html('Conversion Error');
+            $('#toast1 .toast-body').html(error as string);
+            $('#toast1').addClass('show');
         }
 
         $('#tab-dummy').addClass('d-none');
         $('#tabs-main').removeClass('d-none');
-        updateMapVisibility();
+
+        updateSmallMapVisibility();
     });
 }
 
-function updateMapVisibility() {
-    const visible = $("a[data-bs-toggle='tab'].active").attr('id') !== 'svg-tab';
+function updateSmallMapVisibility() {
+    const visible =
+        $("a[data-bs-toggle='tab'].active").attr('id') !== 'svg-tab' &&
+        $('#preview-svg-map').html().length > 0;
     $('#preview-svg-map').toggleClass('d-none', !visible);
 }
 
@@ -52,7 +74,7 @@ $('.example-content-button').on('click', (event: JQuery.ClickEvent) => {
     fetch(path)
         .then(async (data) => {
             const data2 = await data.blob();
-            const file = new File([data2], 'sample.llsp3');
+            const file = new File([data2], path.split('/').pop());
 
             const dataTransfer = new DataTransfer();
             dataTransfer.items.add(file);
@@ -134,7 +156,7 @@ $('.copy-button').on('click', function (event) {
 });
 
 $("a[data-bs-toggle='tab']").on('shown.bs.tab', (_) => {
-    updateMapVisibility();
+    updateSmallMapVisibility();
 });
 
 $('#preview-svg-map').on('click', (_) => {

static/css/site.css

@@ -6,7 +6,7 @@
 body::after {
     content: '';
     display: block;
-    height: 50px;
+    height: 4em;
     /* Set same as footer's height */
 }
 
@@ -18,6 +18,11 @@ footer {
     padding-top: 1em;
     width: 100%;
     height: 60px;
+    background-color: whitesmoke;
+}
+
+header {
+    background-color: whitesmoke;
 }
 
 /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
@@ -212,3 +217,7 @@ a {
 #divOptions > small:last-child {
     flex: 0 1;
 }
+
+.example-content-button {
+    margin-left: 0.4em;
+}

static/index.html

@@ -67,6 +67,15 @@
             </nav>
         </header>
 
+        <div class="toast position-fixed top-0 end-0 m-2 p-2" role="alert" aria-live="assertive" aria-atomic="true" id="toast1">
+          <div class="toast-header">
+            <strong class="me-auto toast-title"></strong>
+            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          </div>
+          <div class="toast-body">
+          </div>
+        </div> 
+
         <div class="container">
             <h3>
                 SPIKE to Pybricks Wizard
@@ -93,8 +102,20 @@ <h3>
                                 <a
                                     href="#"
                                     class="example-content-button"
-                                    data-file="samples/sample.llsp3"
-                                    >Simple SPIKE block sample</a
+                                    data-file="samples/demo_cityshaper_cranemission.llsp3"
+                                    >SPIKE block sample</a
+                                >
+                                <a
+                                    href="#"
+                                    class="example-content-button"
+                                    data-file="samples/demo_cityshaper_cranemission.lmsp"
+                                    >EV3Classroom sample</a
+                                >
+                                <a
+                                    href="#"
+                                    class="example-content-button"
+                                    data-file="samples/demo_cityshaper_cranemission.ev3"
+                                    >EV3Lab sample</a
                                 >
                             </small>
                             <small class="form-check form-switch">
@@ -107,7 +128,7 @@ <h3>
                                 <label
                                     class="form-check-label"
                                     for="additionalCommentsCheck"
-                                    >Additional&nbsp;Comments</label
+                                    >Explanatory&nbsp;Comments</label
                                 >
                             </small>
                         </div>
@@ -134,15 +155,6 @@ <h3>
                     </div>
                     <div id="tabs-main" class="h-100 d-none" style="min-height: 30vh">
                         <ul class="nav nav-tabs border-0" role="tablist">
-                            <li class="nav-item p-2">
-                                <svg width="20" height="20">
-                                    <use
-                                        id="svg-program-use"
-                                        href="img/cat0.svg#icon"
-                                        xlink:href="img/cat0.svg#icon"
-                                    ></use>
-                                </svg>
-                            </li>
                             <li class="nav-item">
                                 <a
                                     class="nav-link active"
@@ -170,6 +182,16 @@ <h3>
                                     >Preview</a
                                 >
                             </li>
+                            <li class="nav-item p-2 ms-auto">
+                                <svg width="20" height="20" id="sb3slot">
+                                    <use
+                                        id="svg-program-use"
+                                        href="img/cat0.svg#icon"
+                                        xlink:href="img/cat0.svg#icon"
+                                    ></use>
+                                </svg>
+                              <img width="20" height="20" id="devtype"></img>
+                            </li>
                         </ul>
 
                         <div id="tab-content-wrapper">