Add extension feature to get available icons

extensions_samples/API.md

@@ -510,6 +510,165 @@ Example: `{type:'capabilities', target:'webui', id:'connection'}`
     **type** is `capabilities`   
     **id** is the id of requested capability  
     **content** has the response it self **response**, in our case a JSON and also the  **initiator** is the initial command for reference   
+---
+### Send icon request
+
+The WebUI already a set of icons, so no need to bother with new icons, you can request a specific one if needed
+
+Be noted some icons may be specific to a system, so it may not be available in all systems
+
+Main icons are :
+```
+None: null,
+Activity: <Activity />,
+AlertCircle: <AlertCircle />,
+Anchor: <Anchor />,
+Aperture: <Aperture />,
+Award: <Award />,
+BarChart: <BarChart />,
+BellOff: <BellOff />,
+Bell: <Bell />,
+Bluetooth: <Bluetooth />,
+Bookmark: <Bookmark />,
+Box: <Box />,
+Camera: <Camera />,
+Cast: <Cast />,
+ChevronDown: <ChevronDown />,
+ChevronLeft: <ChevronLeft />,
+ChevronRight: <ChevronRight />,
+ChevronUp: <ChevronUp />,
+ChevronsDown: <ChevronsDown />,
+ChevronsLeft: <ChevronsLeft />,
+ChevronsRight: <ChevronsRight />,
+ChevronsUp: <ChevronsUp />,
+Clipboard: <Clipboard />,
+Clock: <Clock />,
+Cpu: <Cpu />,
+Crosshair: <Crosshair />,
+Database: <Database />,
+Delete: <Delete />,
+Download: <Download />,
+Droplet: <Droplet />,
+Edit: <Edit />,
+EyeOff: <EyeOff />,
+Eye: <Eye />,
+File: <File />,
+Filter: <Filter />,
+Flag: <Flag />,
+Frown: <Frown />,
+GitCommit: <GitCommit />,
+Globe: <Globe />,
+Grid: <Grid />,
+HardDrive: <HardDrive />,
+Hash: <Hash />,
+Heart: <Heart />,
+HelpCircle: <HelpCircle />,
+Home: <Home />,
+Image: <Image />,
+Info: <Info />,
+Layers: <Layers />,
+LifeBuoy: <LifeBuoy />,
+List: <List />,
+Loader: <Loader />,
+Lock: <Lock />,
+LogIn: <LogIn />,
+LogOut: <LogOut />,
+Mail: <Mail />,
+MapPin: <MapPin />,
+Meh: <Meh />,
+Menu: <Menu />,
+MessageSquare: <MessageSquare />,
+MinusCircle: <MinusCircle />,
+Monitor: <Monitor />,
+Moon: <Moon />,
+MoreHorizontal: <MoreHorizontal />,
+MoreVertical: <MoreVertical />,
+Move: <Move />,
+PauseCircle: <PauseCircle />,
+Percent: <Percent />,
+PlayCircle: <PlayCircle />,
+PlusCircle: <PlusCircle />,
+Power: <Power />,
+Printer: <Printer />,
+Radio: <Radio />,
+RefreshCw: <RefreshCw />,
+Repeat: <Repeat />,
+RotateCcw: <RotateCcw />,
+Save: <Save />,
+Scissors: <Scissors />,
+Send: <Send />,
+Server: <Server />,
+Settings: <Settings />,
+Share: <Share />,
+Slash: <Slash />,
+Sliders: <Sliders />,
+Smile: <Smile />,
+Star: <Star />,
+StopCircle: <StopCircle />,
+Sun: <Sun />,
+Sunrise: <Sunrise />,
+Sunset: <Sunset />,
+Tag: <Tag />,
+Target: <Target />,
+Terminal: <Terminal />,
+Thermometer: <Thermometer />,
+Tool: <Tool />,
+Trash2: <Trash2 />,
+Underline: <Underline />,
+Upload: <Upload />,
+VideoOff: <VideoOff />,
+Video: <Video />,
+VolumeX: <VolumeX />,
+Volume: <Volume />,
+WifiOff: <WifiOff />,
+Wifi: <Wifi />,
+Wind: <Wind />,
+XCircle: <XCircle />,
+ZapOff: <ZapOff />,
+Zap: <Zap />,
+```
+
+    3D printers have in addition:
+
+```
+Fan, 
+FeedRate, 
+FlowRate, 
+Extruder
+```
+
+cnc  has in addition :
+
+```
+Fan, 
+FeedRate, 
+FlowRate,
+```
+
+Example: `{type:'icon', target:'webui', id:'Activity'}`   
+**type** is `icon` (mandatory)  
+**target** is `webui` (mandatory)  
+**id** is `Activity` (mandatory)  
+
+* Answer format: check the `eventMsg.data`   
+
+    ```
+    {
+    "type": "icon",
+    "content": {
+        "response": "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2222%2012%2018%2012%2015%2021%209%203%206%2012%202%2012%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E",
+        "initiator": {
+            "type": "icon",
+            "target": "webui",
+            "id": "Activity"
+        }
+    },
+    "id": "Activity"
+    }
+    ```
+    **type** is `icon`   
+    **id** is the id of requested "Activity"  
+    **content** has the response it self **response**, in our case uriencoded svg , also the **initiator** is the initial command for reference   
 
 ---
 ### Dispatch message to other extensions

extensions_samples/icons.html

@@ -0,0 +1,69 @@
+<script type="text/javascript">
+  //Set of Icons we want to import
+  const iconsToLoad = ["Activity", "Home", "Camera", "File"];
+  const loadedIcons = {};
+  let iconsLoaded = false;
+
+  //Function that send messages to WebUI
+  function sendMessage(msg) {
+    window.parent.postMessage(msg, '*');
+  }
+
+  //Function that process all message from WebUI
+  function processMessage(eventMsg) {
+    //Load icons only if not yet loaded to avoid noise coming from request from others extensions
+    if (!iconsLoaded) {
+      //We ensure this iis a message we want to handle
+      if (eventMsg.data.type && eventMsg.data.id ) {
+        //it is an icon and we need it
+        if (eventMsg.data.type === "icon" && iconsToLoad.includes(eventMsg.data.id)) {
+          const iconName = eventMsg.data.id;
+          //the icon string is encoded to avoid any issue with json so we need to decode it
+          const iconSvg = decodeURIComponent(eventMsg.data.content.response);
+          loadedIcons[iconName] = iconSvg;
+          console.log(`Icône ${iconName} loaded:`, iconSvg);
+          //check loading is finished
+          if (Object.keys(loadedIcons).length === iconsToLoad.length) {
+            console.log("All icons are loaded !");
+            //Now we can display interface with icons
+            useLoadedIcons();
+            iconsLoaded = true;
+          }
+        }
+      }
+    }
+  }
+  //Dispatch icons on some controls
+  function useLoadedIcons() {
+    const buttonContainer = document.getElementById("buttonContainer");
+    //Lets create buttons for the demo 
+    iconsToLoad.forEach(iconName => {
+      const button = document.createElement("button");
+      button.classList.add("btn", "m-1");
+      button.innerHTML = loadedIcons[iconName];
+      button.setAttribute("data-icon", iconName);
+      button.addEventListener("click", handleButtonClick);
+      buttonContainer.appendChild(button);
+    });
+  }
+  //Button handle generic 
+  function handleButtonClick(event) {
+    const clickedIcon = event.currentTarget.getAttribute("data-icon");
+    console.log(`Button clicked with icon : ${clickedIcon}`);
+  }
+   //Function to load all icons
+  function loadIcons() {
+    iconsToLoad.forEach(iconName => {
+      sendMessage({ type: 'icon', target: 'webui', id: iconName });
+    });
+  }
+  //Once page is loaded this function is executed
+  window.onload = (event) => {
+    window.addEventListener("message", processMessage, false);
+    loadIcons();
+  }
+</script>
+
+<div class="container">
+  <div id="buttonContainer"></div>
+</div>

src/areas/index.js

@@ -17,9 +17,10 @@
  License along with This code; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
-import { h, Fragment } from "preact"
+import { h, Fragment, render } from "preact"
 import { Menu } from "./menu"
-import { machineSettings} from "../targets"
+import { iconsFeather } from "../components/Images"
+import { machineSettings, iconsTarget } from "../targets"
 import { ConnectionContainer } from "./connection"
 import { MainContainer } from "./main"
 import { useUiContext, useUiContextFn } from "../contexts/UiContext"
@@ -62,10 +63,13 @@ const ViewContainer = () => {
 }
 
 const ContentContainer = () => {
+    let displayIcon = {}
     const { getConnectionSettings, getInterfaceSettings } = useSettings()
-    const { connectionSettings, interfaceSettings, featuresSettings } = useSettingsContext()
+    const { connectionSettings, interfaceSettings, featuresSettings } =
+        useSettingsContext()
     const { createNewRequest } = useHttpQueue()
     const { toasts, modals } = useUiContext()
+    const iconsList = { ...iconsTarget, ...iconsFeather }
 
     const processExtensionMessage = (eventMsg) => {
         if (eventMsg.data.type && eventMsg.data.target == "webui") {
@@ -376,6 +380,28 @@ const ContentContainer = () => {
                         )
                     }
                     break
+                case "icon":
+                    console.log(eventMsg.data.id)
+                    const iconToSend = iconsFeather[eventMsg.data.id]
+                    //Temporary DOM
+                    const tempElement = document.createElement("div")
+                    //DO icon rendering
+                    render(iconToSend, tempElement)
+                    //Get the SVG string
+                    const iconSvgString = tempElement.firstChild.outerHTML
+                    //Delete the temporary DOM
+                    tempElement.remove()
+                    console.log(iconSvgString)
+
+                    dispatchToExtensions(
+                        "icon",
+                        {
+                            response: encodeURIComponent(iconSvgString),
+                            initiator: eventMsg.data,
+                        },
+                        eventMsg.data.id
+                    )
+                    break
                 case "capabilities":
                     let response = {}
                     switch (eventMsg.data.id) {

src/components/App/version.js

@@ -17,7 +17,7 @@
 */
 import { h } from "preact"
 import { webUIbuild } from "../../targets"
-export const webUIversion = "3.0.0-a57"
+export const webUIversion = "3.0.0-a58"
 export const Esp3dVersion = () => (
     <span>
         {webUIversion}.{webUIbuild}