GUI overhaul

[philipp2310]

This is a collection of ideas that should (but don't have to) be improved with the web UI.

Please don't add anymore to this list if it is not REQUIRED for a smooth process in the b5 release as a stabilization phase was started

New Ideas will be in the next Epic found here #360

• [x] cleanup JS -> rebuilt in vue.js - WIP
• [x] more functions behind login, including a way to logout - WIP -- [x] privacy: --- [x] aliceWatch --- [x] syslog -- [x] administration: --- [x] scenarios --- [x] skills --- [x] myHome editing mode
• [ ] device/location depending display -- [x] start directly in theater mode -- [x] use different widget layouts -- [x] start in different widget layouts -- [ ] widgets need site or at least widget instance dependent settings -- [ ] screen privileges (what is the default user access level) -- [ ] define uuid of the speaker/sat that should output voice (e.g. please log in) #251
• [x] Central login function #337
• [x] myHome display mode as widget -- [ ] only allow display and toggling devices -- [ ] allow widget show on toggle (requires multiple instances of one widget)
• [x] small screen/touch interface -- [x] left sidebar initially hidden. One button opens -- [ ] bigger sidebar as overlay/dropdown
• [x] Fix z-Indexing for widgets #330 -- [ ] is now available as a generic z-indexed css class
• [x] multiple instances of one widget #331 - WIP -- [x] way to init. widgets has to change -- [x] data of widgets has to be saved separately -- [x] adding of widgets needs changed menu ~~- [ ] parenting of widgets - not planned at the moment, lowest priority -- [ ] of bigger use when you have a big myHome widget on the lower layer and special widgets above for e.g. room temperature -- moved to long-term #360~~
• [ ] MyHome documentation - WIP
• [x] MyHome fallback for missing Icons -- [x] If an icon can't be loaded, fall back to a generic "error Icon" -> easier to debug
• [x] MyHome spawn voice created room in a more convenient size and location
• [x] MyHome nested rooms
• [x] MyHome - Renaming a device does not rename it in configs
• [x] MyHome - find a good way to "magnetize" movement and resizing -> vue?
• [x] "Alice currently not available" must not reload the page when stuff was changed (myHome, AdminConfig, widget movement..) - shouldn't be a problem with single page layout anymore!

TODOs for Merge with b5

• [ ] update skills for new path to LocationManager and Location
• [ ] update skills with telemetry for storeData and siteId == deviceId
• [ ] update skills to new widget structure
• [ ] update skills for new DeviceType structure

[hipitihop]

I'd like to add a proposal to the list, consider using React https://reactjs.org/tutorial/tutorial.html#what-is-react

[Psychokiller1888]

Re parenting... ATM I did not do it as this can easily go down a rabbit hole. We'll see if I get an idea

Now, re multi instances. It basically completly works as of now BUT... Javascript.... Where styles can be "scoped" to their parent div and not override same named classes. JS cannot. That means, on the same page, if you have twice the "time" widget active, only one will work, because well... They use the same target ids, the same function names etc etc and are loaded twice. This is really really problematic. One thing could be made core side though....

• When Alice imports the widgets
  • MD5 hash of the untouched file
  • Keep hashes in a file
  • If no modded files exist OR file hash has changed
    • Check html files for
      • id="my_id"
      • List those ids and rename them to id="uuid4()_my_id"
    • Check JS files for:
      • ID selectors => rename them according to above list
      • Function definitions => rename them to uuid4()_functionName
      • Check refs for those functions and rename accordingly
      • Constants => rename them to uuid4_constantName
      • Check refs for those constants and rename accordingly
    • CSS can be left alone, it is anyway scoped to the tag
    • Dump the new files into prod_widgetName.widget/js files
    • Serve modded files
  • If modded file exists and hash not changed serve the modded files

Question is, what do I forget?

[Psychokiller1888]

@hipitihop

I'd like to add a proposal to the list, consider using React https://reactjs.org/tutorial/tutorial.html#what-is-react

Went for Vue.js

[LazzaAU]

Observations noticed while testing the new interface. (viewed on firefox)

1.

• [x] miss alignment of headings in some of the "admin" interface. refer this following screenshot.

2. The following buttons seem to of stopped working in the skills tab

• [x] Stop
• [x] Reload
• [x] Remove

Settings button works. The following is in the console , can expand any relevant error if required.

[LazzaAU]

i can confirm the three buttons work in the skill tab again.

Clicking the "stop" button then refreshing the page takes the skill out of alphabetical order and places it to the bottom of the page. If your unaware of this new shift ( as in someone like me with a small screen that has to scroll) then you may deem it to be broken cause the skill disappears. When in fact it hasn't its just moved

Starting the skill again does not move it back to alphabetical order where you are used to it being. unless you restart

• [ ] Confirmed
• [ ] cant reproduce
• [x] fixed
• [ ] Doesn't need fixed. That's how it is.

[LazzaAU]

and sorry if i'm jumping ahead of things here but assume your aware of this also

• [ ] WIP
• [x] Fixed

[philipp2310]

Click to expand solved

Bugs: - [x] newly installed skills are only shown after reloading the skill page - [x] skills -> shop -> Ok/Install -> Toolbar switches, screen stays in the shop  - [x] skills shop shows already installed skills (like AliceCore)  - [x] switching from skill shop to any other page and back creates same inconsistent state with the toolbar as above  - [x] myHome: switching from floor painter to any other tool won't remove the floor tile from the mouse pointer but still will place the correct item. Deselecting floor isn't working as well: Only ESC works - [x] myHome: Adding a device: The skill is shown even if there is no device available for adding (for example it shows ALICECORE, but it is not clickable) Other deviceTypes (AliceSatellite, Vaccum) seem not yet implemented although the skill contains the deviceType dict  - [x] myHome: Linking starts, but no connection from AliceCore to a room is possible: red border, no error message on click - [x] myHome: Linking from device to device is possible (feature was on my list as well, but isn't intended in that case I guess)  - [x] myHome: Links are not removed when switching to another page, for example widgets:  -->followup error from failed device to device link - [x] skills: Turning off a skill, won't change the icon until reloaded with F5, starting works  - [x] myHome: dragging the map around while clicked on a location is not possible (had to get that device at 50k px -> 50k px large location - hard to miss while dragging..) -> not happens all the time as it seems - [x] uninstalled skill only reappears in the shop after restarting Alice - [x] leaving widgets on tab 2 to another page (skills, myHome..) and returning to widgets, will show the widgets of tab 2, but will show tab 1 as selected  - [x] widgets not working on second opening of the page - [x] parenting of devices seems to keep absolut x/y values: moved AliceCore from no location to a location, now it is gone, F12 shows it off the screen (NOT ALWAYS! Actually couldn't reproduce a second time - might be caused by rotations as well, they behave strange when you drop a rotated device on or out of rotated rooms):  - [x] myHome: adding two devices to one room gives error:  - [x] myHome: devices of zigbee/vacuum have a icon on creation, but no icon after restart of alice - [x] myHome: switching from any tool (device or location) to the adding tool required deselection of the prev. tool Added features - after the initial version: - [x] Up- and download of widget presets - [x] myHome removal of links - [x] myHome device settings - [x] myHome link settings -- including for the location the device is in Improvements: - [x] Adding devices should maybe be grouped by skills like widgets? - [x] Syslog should maybe started by default - if you never clicked on it, the screen is empty - [x] Add a direct link from renaming of widget tabs to FA - [x] search functionality for admin options (e.g. one free text field, if there is something entered, hide every option that is not containing that string) - [x] a marking of the center of the 100k*100k area would be nice, maybe even with arrows pointing in that direction once you are lost at 0px*0px (shouldn't be necessary, but once you have to go there, it is hard to come back... - [x] myHome: dragging a location by clicking in the center (on the text) opens the "please enter new name" popup after dropping - [x] myHome: moving a location is not sending the new position (but the old) to aliceCore via API - [x] Skills: FailedSkills are not shown - [x] Skills: FailedSkills don't show enough information and Settings must be available. Skills with API aren't start able without changing the settings manually in the file - [x] Skills: Changing settings gives an error in console - but works  - [x] Moving a device to a new location won't create a link to the new parent location --- creating a new link to the parent manually is not possible - [x] Moving a device to a room with active link removes the link after reload, but shows save error right away - [x] live updates of the links --- [ ] creating a new device won't show a link to the parent room until reloading --- [ ] removing a device keeps the link in ui until refreshed  - [x] Name of the device is shown for mouseOver of the whole - invisible - status bar, even if another device would be exactly in that spot  - [x] Device._displayName is currently held in two different positions. Once as the variable, and second as default config value. Second one is shown in UI, first one is set for new devices. Device.py line 40 vs line 67 - [x] resizing a rotated widget has wrong (pre-rotation) bounding box - hard to fix, but still worth mentioning.. -- TODO remove vue-draggable-resizable and use same as my home  - [x] without ever changing the page for widgets, adding a widget is not possible (guess page id is not set - reproduce by deleting cookies) [WidgetManager] Tried to add widget Clock from skill DateDayTimeYear to page id 0 but the page doesn't exist#033[0m __Not reproduceable anymore, might have been messed up pages?__ - [x] many functions not working when "remember login" is NOT selected, working fine when login is remembered - [x] after clearing cache: Skills Tour seems not to be working anymore "TypeError: this.skills.push is not a function" in skills.js line 123 - [x] Error message at end of skills tour:  - [x] heartbeat broken edge is blocking clicks - [x] somehow the wrong toolbar in skills is back? Couldn't find a way to call toggle from "extern"  - [x] Newly installed skills don't appear in UI anymore, only after reload - [x] :snowflake::snowflake::snowflake: widget options, value of slider for visibility and font size isn't fixed width and causes the page to jump a bit - [x] pressing enter in the "change widget tab icon" dialog causes a page reload but won't save the changed icon - [x] clicking on an already opened tab in the widget pages causes the following error for the already present widgets:  - [x] "Connect" has a confusing state on failed connection when the IP/Port have been saved before: IP and Port are filled, "remember" is set to false. If you connect now, the IP/Port will still be saved (from before) although the remember was set to false. Could maybe show "remember" when displaying IP/Port from earlier and if "remember" is set to false, delete the saved information - [x] personal Opinion: pressing ESC while linking is active from a device should only deselect the device, not deselect the tool.. maybe ;)

rest moved to #369

Improvements: - [x] concept for Telemetry: moved to #360

[Psychokiller1888]

Devices are grouped by skills, with html dropdown list titles

[Psychokiller1888]

Re myHome: Linking starts, but no connection from AliceCore to a room is possible: red border, no error message on click

On your screenshot it looks like Alice isn't placed in a location?

[philipp2310]

correct, it got initially placed in no room (parent was 0 I think)

[Psychokiller1888]

Yes, because there's no room by default instead of Hive as you had. Maybe we shouldn't display Alice until there's a room created by the user and automatically add Alice to that location?

[Psychokiller1888]

Or auto create the first location as you did

[philipp2310]

Should be easily done by just adding it initially to room 1 (just deleted my room with alice inside, added a new one and alice appeared in it)

[Psychokiller1888]

true

[Psychokiller1888]

Actually, Imma re-add your first location "The Hive", so when the user first opens the myHome page, there's a location, where we can then play the tour to explain the functions

[Psychokiller1888]

Uninstall skill will reappear in shop after the shop data has been fetched again`. Core checks every 15 minutes, and UI asks core store data every 5 minutes. I'm hesitating to trigger a store update after a skill deletion, because if a user delete 5 skills in a row, that's 5 store refresh. Thoughts?

[Psychokiller1888]

Re widgets page bug after changing main page, I honestly have no freaking idea why this happens. Added logs, the activeTabId is always correct, but the wrong class is applied to the tab

[philipp2310]

Uninstall skill will reappear in shop [...]

In my case it was the broken zigbee stick -> "Let's try reinstalling zigbee2mqtt" How about a "dirty"-flag when you uninstall, that will force a UI reload of the store even if the 5 min aren't passed yet? That shouldn't trigger too often - unless the user really uninstalls one skill -> store -> uninstall next skill -> store... Core store refresh every 15 minutes is more than enough, I wouldn't touch that.

[Psychokiller1888]

Yeah, did not think about re installing case... We could maybe also use the "skill deleted" mqtt topic and re add the skill in the store, simply?

[Psychokiller1888]

Re finding the center of floorplan, I started to add an arrow that will show the center of the map. And when you click it the map is reset to center with 1.0 zoom. I also added floorplan position and zoom saving

[LazzaAU]

New Interface Feature ? - Voice selection.

Not sure if this is already added or in the pipeline, but i'd like to suggest

• Having a drop down list in Admin screen, for TTS voice

. This would later allow a user to select a TTS voice from a drop down list for the appropriate engine selected.

[Psychokiller1888]

Yep, wanted that since long

[Psychokiller1888]

Can't repro the prevent redundant navigation

[philipp2310]

prevent redundant navigation: just a cosmetic thing, not blocking the merge - I'll take a look after work :)

.then() for admin utils restart contains the switch to syslog - if you switch manually to syslog before the promise is fulfilled, you get the double navigation.

At least that is what I read out of the constellation (was repeatable for me) - if it is true, I should be able to fix it later ^^

[Psychokiller1888]

Oh, ok, when coming from admin that auto leads to syslog, then I get it

[Psychokiller1888]

Good if we get rid of them, but I think you don't see those messages in production mode, once built

[LazzaAU]

Have started a thread for observations and bugs noticed with the merged new-interface. Issue #369

[philipp2310]

Closing this issue and collecting any open points from this issue in the corresponding topics. Awesome job! The new interface feels so good :)