# Netron web interface - quicker and smoother version?

**URL:** <https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038>\
**Category:** NETRON\
**Created:** [July 12, 2024, 11:07pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038 "2024-07-12T23:07:49Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [July 12, 2024, 11:07pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/1 "2024-07-12T23:07:49Z")

</div>

Hello,

Is it worth to provide you a more robust, quicker and smoother web interface for Netron?

I’ve just bought my first netron EP4, and I found the web interface, lovely, but very slow, and saw a lot of enhancement which can be done (full async interface on 1 page only, with usage of promises to accelerate the different fetchs).

Does it interest you? If yes, which kind of navigator is targeted, only recent one (Chrome, Edge, Opera, Firefox ?)

Best regards,

Sylvain

---

<div class="post-metadata">

**Author:** ![Matthias](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/matthias/32/70_2.png) [@Matthias](https://forum.obsidiancontrol.com/u/Matthias)\
**Post date:** [July 14, 2024, 7:43am UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/2 "2024-07-14T07:43:48Z")

</div>

It works very fast on my laptop using edge, but we have heard mentions of a slow web ui this from very few users. I suspect some antivirus possibly causing this.  
Share a video of what it looks like for you.

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [July 21, 2024, 10:13pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/3 "2024-07-21T22:13:33Z")

</div>

Oh, my feedback was more about the code behind the web interface which is not very robust (several call to the same api, no // calls, no reuse of codes, lost of menu compact when navigating between page, heavy DOM). There’s only small things, mostly related to UI.

![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/f/f40e11df87107d2b1ad660d537fd0694a294368d.png)

I’m working on it on my side, will keep you informed 🙂

As result it requires less external calls, and it will needs 7 more requests to get the same information from the device.

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/9/9e6f9517f663f67c1400910eeaaa3ec85d31b261.png)

Will see if it worth it, but it seems we can do a more powerful interface

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [July 23, 2024, 9:00pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/4 "2024-07-23T21:00:50Z")

</div>

Some news about the development, everything seems to going fine.  
I’ve used workaround to continue to dev as CORS is blocking the direct access from the web, but it should works just fine once uploaded in the EN4 to replace current web system.

The post to set information on EN4 is not yet in place, but it will come later on.

For the moment, just trying to get all pages set-up, just started this afternoon.

As a post is always better with medias, here a quick video where the project is, and with a quick comparison with current solution:

As major change compare to current version:

- Usage:
  - Light/Dark mode (automatically retrieved from your computer or smartphone) which can also be manually forced by using the toggle on top right
  - Single time loading, the page never needs to be reloaded
    - Navigation is kept, compact menu is kept, page switching is instantaneous

  - “Quick” graphical refresh to get a bit more modern, while keeping original spirit

- Technical:
  - Only using bootstrap for main theming (css) and few dynamic effect (mostly menu)
  - Switch to Font Awesome 6 free version
  - JS ES6 vanilla (no add-on, except bootstrap that I would like to remove at a certain time)
  - All called to api done once, and then the page is not reloaded, either API recall (until it will be needed to recall API for running cues (need to see if a websocket or long polling can be setup) and identify feature)
  - Current size is about 1 Mo

- Next steps:
  - Continue the page integration from API (maybe the rotary encoders from Device Settings will be skipped and replaced by a simpler slider)
  - Reverse-eng. the different form validations
  - Reverse-eng. the different devices (e.g.: RDM10) specificities (I’m currently focused for my own, EN4 only)
  - Trying to upload the modified .img on my EN4 to test with the real APIs 🤞

Good night 🙂

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [July 30, 2024, 1:19am UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/5 "2024-07-30T01:19:46Z")

</div>

Some news, it is going ahead, more slowly than I was expected ☹

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [July 30, 2024, 10:22pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/6 "2024-07-30T22:22:11Z")

</div>

I’ve found a nice virtual keyboard, so it’s in, that will help a lot ! (see [NX1 - Netron webpage - keyboard is missing](https://forum.obsidiancontrol.com/t/nx1-netron-webpage-keyboard-is-missing/8057)

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/7/7f2966e4b51c5d2e8d3d409d4168fb0d1e68ac18.png)

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/5/52aef903a5041b6c0f7ac057cd263397ab338865.png)

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 4, 2024, 9:33pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/7 "2024-08-04T21:33:47Z")

</div>

DMX ports is done, it was an important part.

[![](https://img.youtube.com/vi/Te2Z76OzGcU/hqdefault.jpg "Netron - Next UI") ](https://www.youtube.com/watch?v=Te2Z76OzGcU)

The config is now in external file to ease the maintenance/customization:

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 6, 2024, 9:18pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/8 "2024-08-06T21:18:41Z")

</div>

I’ve figured out that before to go to deep, I need to have automatic test to validate each steps. Found out cypress which is very cool to use!

Edit:  
DMX Port page almost ended 🙂

[![](https://img.youtube.com/vi/AVXA_GjmA-4/hqdefault.jpg "Cypress.io - Netron Next UI") ](https://www.youtube.com/watch?v=AVXA_GjmA-4)

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 9, 2024, 9:00pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/9 "2024-08-09T21:00:49Z")

</div>

If people want to give a try with the interface (no package available for download, because it still very draft work): [Netron template](https://spb8lighting.github.io/Netron-UI/)

The github repository is there if some of you want to help on this project 🙂 [GitHub - Spb8Lighting/Netron-UI: Netron UI is a standalone web-application targeting to replace Netron web-application (network hardware from Obsidian Control Systems)](https://github.com/Spb8Lighting/Netron-UI)

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 14, 2024, 1:00pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/10 "2024-08-14T13:00:08Z")

</div>

Latest update:

- Better responsive design, still need to tweak the global height the menu is not accessible
- Pages completely integrated:
  - Home  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/f/fe363cdd695abb596d786c8ec7452e8663b81ead.png)
  - Presets \> Netron presets  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/5/59e484e98cfcb2dc8182d027b94ff7cc814372e2.png)  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/b/b4c8ffe567197d738e472cc61a585988897cb7af.png)
  - Presets \> User presets  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/1/1ed509cde06b4e086635f9133990296e94a9b8ba.png)  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/b/b98333372f5590dc27af2cd47de3416cdf21d84f.png)
  - DMX ports  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/d/de45f53c38a2d1648e0fa84f564cb25c773f2f5a.png)
  - Cues \> Run cue  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/4/48877f135d19fbc7e6a80b4ae6461633da0fd9f4.png)
  - Cues \> Save cue  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/a/aa8ffe9c5b1e206b9d81a85b9b64672d4346af9d.png)
  - Cues \> Cue options  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/d/d2bffe2f814d6a79ffca8fcbbfbe3830ba629f73.png)
  - IP settings  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/8/862b8fd4562296366de2d8e2540fbe8925392218.png)  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/8/8b5c379238336b6fe947b642b2a269afdf44ddc5.png)
  - System \> Status  
 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/c/cd7a7456020c9a19ccb197de59303eca928a997d.png)

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 14, 2024, 11:24pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/11 "2024-08-14T23:24:53Z")

</div>

I think this view can interest few people, automatically create cuelist view based on cues status:

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/a/aca62a65fb1e0db7215fe728e10030a981721ec9.png)

---

<div class="post-metadata">

**Author:** ![Sylvain\_Guiblain](https://forum.obsidiancontrol.com/user_avatar/forum.obsidiancontrol.com/sylvain_guiblain/32/1520_2.png) [@Sylvain\_Guiblain](https://forum.obsidiancontrol.com/u/Sylvain_Guiblain)\
**Post date:** [August 19, 2024, 6:52pm UTC](https://forum.obsidiancontrol.com/t/netron-web-interface-quicker-and-smoother-version/8038/12 "2024-08-19T18:52:02Z")

</div>

If some people want to help me, I would appreciate to get the different configuration from your Netron device to test the different configuration before the first upload on my own device (needed before public release).

I’ve wrote the following code to download all the configuration file from a Netron Device, and directly download it locally as ZIP file: _(it requires the device accessing the Netron web page to be connected to the Internet as I have a dependency to JSZip)_

```javascript
// Load JSZip library
const script = document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js'
script.onload = async () => {
    const zip = new JSZip()
    const urls = [
        'Setting.json', 'IP.json', 'index.json', 'DMXPorts.json', 'Identify.json',
        'Presets.json', 'UserPresets.json', 'Cues.json', 'CuesSetting.json',
        'CuesStatus.json', 'RemoteInputs.json', 'DMXInputab.json', 'DMXInputmerger.json'
    ]
    await Promise.all(urls.map(async url => {
        try {
            const response = await fetch(url)
            if (!response.ok) throw new Error(`Failed to fetch ${url}`)
            const content = await response.json()
            zip.file(url, JSON.stringify(content, null, 2))
        } catch (error) {
            console.warn(`Skipping ${url}: ${error.message}`)
        }
    }))
    zip.generateAsync({ type: 'blob' }).then(content => {
        const link = document.createElement('a')
        link.href = URL.createObjectURL(content)
        link.download = 'NETRON_JSON_FILES.zip'
        link.click()
    })
}
document.head.appendChild(script)

```

To use it, access your netron web interface as you’re used too.

Then, open the web developer tool (CTRL+SHIFT+I) (valid for EDGE and CHROME), the access the console:

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/8/87fe46d0fa0d59ce9d3f0822dddac63cfa0bacbd.png)

You can try to paste the code, but if it is the first time you access your console, you’ll have an advertisement that it can be dangerous to paste code here, and that’s right!

To allow to paste the code, you need to follow the instruction given in this advertisement (you need to type “allow for pasting” or something similar, then press enter.

From now you should be able to paste the code, and press enter to generate the zip file:

 ![image](https://forum.obsidiancontrol.com/uploads/default/original/2X/e/e532b97623724d0a35965562a4cbb74d13378025.png)

As an output, it will download a zip file named “NETRON\_JSON\_FILES.zip”, if you can share with me, it will be great 🙂