SUKU connect your module notification implemented

src/app/main/_stores/app-helper.store.js

@@ -25,8 +25,6 @@ function checkOS() {
 }
 
 
-
-
 export const current_tooltip_store = writable({key: '', bool: false});
 
 export const appSettings = writable({
@@ -49,6 +47,7 @@ export const appSettings = writable({
   modal: '',
   os: checkOS(),
   intervalPause: false,
+  firmwareNotificationState: 0,
   activeWindowResult: {
     title: undefined,
     owner: {neme: undefined}},

src/app/main/grid-layout/GridLayout.svelte

@@ -2,6 +2,8 @@
 
   import createPanZoom from 'panzoom';
 
+  import { writable, readable, derived } from 'svelte/store';
+
   import { onMount } from 'svelte';
 
   import { appSettings } from '../_stores/app-helper.store.js';
@@ -10,16 +12,48 @@
 
   import Device from './grid-modules/Device.svelte';
 
+  import { tweened } from "svelte/motion";
+  import { cubicOut } from "svelte/easing";
+
+  import { fade, fly } from 'svelte/transition';
+
+  import { openInBrowser } from '../../shared/helpers/global-helper';
+
+
+
+  const { getGlobal } = require('electron').remote;
+  const trackEvent = getGlobal('trackEvent');
+
+  const { ipcRenderer } = require('electron');
+
   export let classes;
 
   let map;
 
   // code base versions
   let fwVersion;
 
+  let surface_width = 0;
+  let surface_height = 0;
+
+
+  const surface_origin_x = tweened(0, {
+    duration: 400,
+    delay: 150,
+    easing: cubicOut,
+  });  
+  
+  const surface_origin_y = tweened(0, {
+    duration: 400,
+    delay: 150,
+    easing: cubicOut,
+  });
+
   // $appSettings.size
   $: gridsize = 2.1 * 106.6 + 10;
 
+  let ready = false;
+
   onMount(()=>{
     createPanZoom(map, {
       bounds: true,
@@ -40,20 +74,136 @@
 
     appSettings.subscribe(s => fwVersion = s.version);
 
+    ready = true;
   })
 
+  const devices = writable([]);
+
+  runtime.subscribe(rt => {
+
+    let min_x = 0
+    let max_x = 0
+    let min_y = 0
+    let max_y = 0
+
+    rt.forEach((device, i) => {
+
+      let connection_top = 0;
+      let connection_bottom = 0;
+      let connection_left = 0;
+      let connection_right = 0;
+
+      rt.forEach(neighbor => {
+
+        if ((device.dx - neighbor.dx) === 1){
+          connection_right = 1;
+        }
+        if ((device.dx - neighbor.dx) === -1){
+          connection_left = 1;
+        }
+
+        if ((device.dy - neighbor.dy) === 1){
+          connection_bottom = 1;
+        }
+        if ((device.dy - neighbor.dy) === -1){
+          connection_top = 1;
+        }
+
+      });
+
+
+      if (min_x > device.dx){
+        min_x = device.dx
+      }
+
+      if (min_y > device.dy){
+        min_y = device.dy
+      }
+
+      if (max_x < device.dx){
+        max_x = device.dx
+      }
+
+      if (max_y < device.dy){
+        max_y = device.dy
+      }
+
+      rt[i].fly_x = 100 * (connection_right - connection_left) 
+      rt[i].fly_y = 100 * (connection_top - connection_bottom) 
+
+
+    });
+
+    surface_width = max_x - min_x + 1;
+    surface_height = max_y - min_y + 1;
+
+    surface_origin_x.set( (min_x + max_x)/2 );
+    surface_origin_y.set( (min_y + max_y)/2 );
+
+
+    devices.set(rt)
+
+  });
+
+
+
+  function refresh(){
+
+    console.log(1);
+    trackEvent('no-module', 'no-module: restart app') 
+    setTimeout(() => {
+      ipcRenderer.sendSync('restart', "foo");
+    }, 500);
+
+
+  }
+
 </script>
 
 <layout-container class="relative flex items-start {classes} h-full { $engine == 'ENABLED' ? '' : 'pointer-events-none'}">
 
+
+  {#if $devices.length === 0 && ready && $appSettings.firmwareNotificationState === 0}
+  <div in:fade="{{delay: 2000, duration: 1000}}" class="z-50 flex w-full h-full items-center justify-center text-white flex-col">
+
+    <div class="p-4 bg-primary rounded shadow w-72">
+      <div class="text-xl py-1">Connect your module now!</div>
+      <div class="py-1">Try refreshing Editor or check out the troubleshooting guide!</div>
+
+      <div class="flex justify-between items-center">
+        <button 
+          on:click={refresh} 
+          class="relative bg-commit mr-3 block hover:bg-commit-saturate-20 text-white mt-3 mb-1 py-1 px-2 rounded border-commit-saturate-10 hover:border-commit-desaturate-10 focus:outline-none">
+          <div>Refresh</div>
+
+        </button>
+
+        <button 
+          on:click={e =>{trackEvent('no-module', 'no-module: troubleshooting'); openInBrowser("https://intech.studio/support/docs/troubleshooting")}} 
+          class="relative border block hover:bg-commit-saturate-20 text-white mt-3 mb-1 py-1 px-2 rounded border-commit-saturate-10 hover:border-commit-desaturate-10 focus:outline-none">
+          <div>Troubleshooting</div>
+        </button>
+
+      </div>
+    </div>
+
+  </div>
+
+  {/if}
+
+
   <grid-layout class="absolute overflow-hidden w-full flex flex-col h-full focus:outline-none border-none outline-none"> 
 
     <div id="grid-map" bind:this={map} style="top:25%; left:25%;" class="w-full h-full flex relative focus:outline-none border-none outline-none justify-center items-center z-10">
 
-      {#each $runtime as device}
+
+
+      {#each $devices as device}
         <div 
+          in:fly="{{x: device.fly_x, y: device.fly_y, duration: 150 }}" out:fade="{{ duration: 150 }}"
+
           id="grid-device-{'dx:'+device.dx+';dy:'+device.dy}" 
-          style="--device-size: {gridsize + 'px'}; top:{-1*(device.dy*106.6*$appSettings.size*1.1) +'px'};left:{(device.dx*106.6*$appSettings.size*1.1) +'px'};"
+          style="--device-size: {gridsize + 'px'}; top:{-1*((device.dy-$surface_origin_y)*106.6*$appSettings.size*1.1) +'px'};left:{((device.dx-$surface_origin_x)*106.6*$appSettings.size*1.1) +'px'};"
           class="device"
           class:fwMismatch={JSON.stringify(device.fwVersion) !== JSON.stringify(fwVersion)}>
 

src/app/main/panels/preferences/Preferences.svelte

@@ -182,7 +182,7 @@
 
   function resetAppSettings(){
 
-    let path = ipcRenderer.sendSync('resetAppSettings', 'foo');
+    ipcRenderer.sendSync('resetAppSettings', 'foo');
 
     console.log("App settings cleared");
 

src/app/runtime/runtime.store.js

@@ -406,8 +406,14 @@ function create_runtime () {
 
   function incoming_heartbeat_handler(descr){
 
+
+
     let controller = this.create_module(descr.brc_parameters, descr.class_parameters, false);
 
+    if (controller === undefined){
+      return;
+    }
+
     _runtime.update((_runtime) => {
       let online = false;
       _runtime.forEach(device => {

src/app/serialport/SerialPort.svelte

@@ -10,27 +10,28 @@
   const SerialPort = require('serialport')
   const Readline = SerialPort.parsers.Readline;
 
-  import { pParser } from '../protocol/_utils.js';
   import { messageStream } from './message-stream.store.js';  
-  import { writeBuffer } from '../runtime/engine.store.js';
+
+
+  let port_disovery_interval;
+
+  const setIntervalAsync = (fn, ms) => {
+    fn().then(() => {
+      port_disovery_interval = setTimeout(() => setIntervalAsync(fn, ms), ms);
+    });
+  };
+
 
   let PORT = {path: 0};
   let selectedPort = "";
-  let _runtime = []
 
-  runtime.subscribe(rt => {_runtime = rt; return 1});
 
 
-  let port_disovery_interval;
-  function discoverPorts(){
-    port_disovery_interval = setInterval(() => {
-      listSerialPorts();
-    }, 300 ) // 300ms
-  }
+
 
   // Basic serial usage
 
-  function listSerialPorts(){
+  async function listSerialPorts(){
 
     SerialPort.list()
       .then(ports => {
@@ -125,35 +126,39 @@
   }
 
   function closeSerialPort() {
+    try{
+      if(PORT.path !== 0){
+        PORT.close(function(err){
+          console.warn('Port closed', err)
+        })
+
+        // reset store
+        serialComm.update((store)=>{
+          store.open = undefined;
+          store.isEnabled = false;
+          store.list = [];
+          return store
+        });
 
-    if(PORT.path !== 0){
-      PORT.close(function(err){
-        console.warn('Port closed', err)
-      })
-
-      // reset store
-      serialComm.update((store)=>{
-        store.open = undefined;
-        store.isEnabled = false;
-        store.list = [];
-        return store
-      });
-
-      
+        
 
-      // reset runtime and user input on closing the port
-      runtime.reset();
+        // reset runtime and user input on closing the port
+        runtime.reset();
 
-      
-      appSettings.update(s => {s.overlays.controlElementName = false; return s})
-      // clearup fifo writebuffer
-      // reset engine to enabled
-      engine.set('ENABLED');
-
-      // reset port
-      selectedPort = "";
-      PORT = {path: 0};
+        
+        appSettings.update(s => {s.overlays.controlElementName = false; return s})
+        // clearup fifo writebuffer
+        // reset engine to enabled
+        engine.set('ENABLED');
+
+        // reset port
+        selectedPort = "";
+        PORT = {path: 0};
+      }
+    }catch(e){
+      console.log("SERIALPORT", e)
     }
+
   }
 
   function readSerialPort() {
@@ -193,14 +198,15 @@
 
   }
 
+  onMount(() => {
+
+    setIntervalAsync(listSerialPorts, 500)
+  })
 
   onDestroy(()=>{
     clearInterval(port_disovery_interval);
     closeSerialPort();
   })
 
-  onMount(() => {
-    discoverPorts();
-  })
     
 </script>