1. Open a blank document in Inkscape (without the "RexHMI Config" object).

2. Create an SVG illustration in Inkscape (a rectangle and a text, the text overlays the rectangle and stands for the label of the button).

3. Group the whole illustration (Ctrl+G) and save the file, see MyButton_src.svg.

4. Extensions->RexHMI->Group Animation, tick Rotate and click OK.

5. Extensions->RexHMI->Group Animation, untick Rotate and click OK (by this you just wrapped the object and set internal properties which are necessary for the component to work).

6. Open the XML editor in Inkscape (Ctrl+Shift+X).

7. Find svg:g belonging to the newly created component (id="g2993" in the case of MyButton_src.svg file, it is inside another group, which is the mentioned wrapper).

8. Drag this group to the root object svg:svg so that it resides inside the so-called root level.

9. The remains of the original object (wrapper and also layer1) should be deleted - Delete node.

10. In the component being created change the value of the ns0:module attribute from "GeneralComponent" to "MyButton".

11. Find svg:rect (the rectangle, id="rect2985")..

12. Add the ns0:tag attribute manually and set it to "ButtonRect".

13. Find svg:text (the text object, id="text2987"). Alternatively it also could be an svg:tspan object.

14. Add the ns0:tag attribute manually and set it to "Label".

15. Find svg:title (id="title3000"), unfold it and change "Title" to "ButtonElement".

16. Find svg:desc (id="desc3002"), unfold and enter the description of the parameters of the component:

    {
    "connections":{"RSTATUS":"$T_RSTATUS","WSTATUS":"$T_WSTATUS"},
    "metaData":{},
    "options":{"OffColor":"#ff8000","OnColor":"#008000","LabelOffColor":"#ffffff","LabelOnColor":"#ffffff","LabelOff":"OFF","LabelOn":"ON"}
    }

17. Check the code from previous step at www.jsonlint.com, the JSON syntax must be 100% valid.

18. Close the XML editor.

19. Click on the new component (select it) and go to Extensions->RexHMI->Edit Element - a configuration dialog should appear, just like in the case of standard elements from the library.

20. Save the SVG file with the new component as "MyButton.svg", the name must correspond with the name from step 10 (the resulting SVG file is included in the MySvgLib.zip file for reference).

21. In the same folder create a subfolder "js".

22. Inside the "js" subfolder, create a file "MyButton.js", the name must correspond with step 10 again.

23. The .js file defines the animation and behavior of the object. It can contain something like this:

    REX.UI.SVG.MyButton = function (svgElem, args) {
        // Inherit from base component
        var obj = Object.create(REX.UI.SVG.Component(svgElem, args));
        // Store options for simple usage
        var $opt = obj.options || {};
    
        // Load options or default values
        var OffColor = $opt.OffColor || "#ff8000";
        var OnColor = $opt.OnColor || "#008000";
        var LabelOffColor = $opt.LabelOffColor || "#ffffff";
        var LabelOnColor = $opt.LabelOnColor || "#ffffff";
        var LabelOff = $opt.LabelOff || "OFF";
        var LabelOn = $opt.LabelOn || "ON";
            
        // Get SVG elements for manipulation
        var rect = obj.getChildByTag("ButtonRect");
        var label = obj.getChildByTag("Label");
    
    	// This function changes current state of the button according to the 
    	// value read from item.
    	function refreshState(itm){
    		if(itm.getValue()){ // Value is 'non zero' value
                // Use jQuery to change fill style parameter
    			$(rect).css('fill',OnColor);
          $(label).css('fill',LabelOnColor);
          label.textContent = LabelOn;
            }
    		else{ // Value is 'zero'
    			$(rect).css('fill',OffColor);
          $(label).css('fill',LabelOffColor);
          label.textContent = LabelOff;
    		}
    	}
    	
    	// Every writable component should be synchronized with current state of the 
    	// control system. Variable 'referesh_from' stores the value of readable connection (fallback to the writable connection)
    	var refresh_from = obj.$c.RSTATUS || obj.$c.WSTATUS;
        refresh_from.on('change', refreshState);
    
    // Create jQuery object from the button (parent of the rectangle element), then add new listener for 'mousedown' event
    	$(rect).parent().on('mousedown',function(evt){
    		// Prevent propagation of the event to the children of the target element
    		evt.preventDefault();
    		// Disable refreshing of the value to allow user to change input 
    		// (e.q. Number in input, position of the slider, etc.)
    		refresh_from.disableRefresh = true;		
    		
    		// Process the parameters of the event.
    		if(evt.which === 1){ // Left mouse button
    			// Write some value to the writable connection 
    		    // Write number '1' immediately 			
    			obj.$c.WSTATUS.setValue(1,true);
    		}				
    		// Enable refresh again
    		refresh_from.disableRefresh = false;		
    	});
      
      $(rect).parent().on('mouseup',function(evt){
    		// Prevent propagation of the event to the children of the target element
    		evt.preventDefault();
    		// Disable refreshing of the value to allow user to change input 
    		// (e.q. Number in input, position of the slider, etc.)
    		refresh_from.disableRefresh = true;		
    		
    		// Process the parameters of the event.
    		if(evt.which === 1){ // Left mouse button
    			// Write some value to the writable connection 
    		    // Write number '0' immediately 			
    			obj.$c.WSTATUS.setValue(0,true);
    		}				
    		// Enable refresh again
    		refresh_from.disableRefresh = false;		
    	});
    
        return obj;
    };

    When developing your components, use this code as a template. Respect the sytax of the file and remember that:

    • The first line must contain the correct name of the component (again step 10), thus: REX.UI.SVG.MyButton = function (svgElem, args)

    • Loading options must correspond with the options from step 16.

    • Searching objects in SVG (getChildByTag) must respect the naming from steps 12 and 14.

    • obj.$c.RSTATUS and obj.$c.WSTATUS must correspond with "connections" from step 16.

    • Function itm.getValue() returns the value of the signal in the REX control algorithm, just like you can see it e.g. in RexView - this value can be used for arbitrary animation.

24. The component is almost ready. You should have something like the MySvgLib-button.zip file contains.

25. To include the component in the exported HMI, you have to move the folder with the component and the JavaScript code to the C:\ProgramData\REX Controls\RexHMI\libs folder (name the folder e.g. MySvgLib).

26. Now create the HMI in Inkscape just like you would with the standard components and export the HMI. Use testHMI-button.zip to test the component I have developed.

27. Repeat the procedure for additional buttons of your taste. Always put the SVG file with the component to the MySvgLib folder as well as the corresponding .js file to the js subfolder.

28. Explore our components for inspiration.

BEWARE! - Your user libraries might get deleted when uninstalling/updating the RexHMI extension for Inkscape. Always have a backup!

Download links:

• MyButton_src.svg

• MySvgLib-button.zip

• exec.mdl

• task.mdl

• testHMI-button.zip

Hope this helps. Let me know if it works for you.

It's there now....thanks for the help!!

Hope this is the problem. If you placed the component in the subfolder by mistake, then no problem. If some part of the tutorial convinced you to put the files in the subfolder, please let me know which one so I can make it more clear for other users.

exported files as administrator :

exported HMI with path to libraries

exported HMI with empty field (no paths to libraries)

I think I did the conversion to Windows 10 when REXControl was already installed, maybe I should try to remove the complete installation and start all over with a fresh clean installation?

(FYI : I was not able to copy objects out of the library into my project when Inkscape was started as administrator. So I prepared a project as normal user and exported as administrator.)

<script type="text/javascript" src="js/rex-ui-svg-general.js"></script>
<script type="text/javascript" src="js/rex-ui-svg-home.js"></script>
<script type="text/javascript" src="js/rex-ui-svg-hvac.js"></script>

When libraries are listed in Library Path, only the selected ones are included:

<script type="text/javascript" src="js/rex-ui-svg-general.js"></script>

In both cases, the line with your library should be included:

<script type="text/javascript" src="js/BlinkLR.js"></script>

However, it is ignored for some unknown reason and I do want to find out why. Thanks for your cooperation so far.

• What Windows are you using?

• What version of RexHMI extension are you using (Extensions->RexHMI->Version Info)?

• Can you try running Inkscape as Administrator and do both exports once again?

• Can you please zip the whole folder C:\ProgramData\REX Controls\RexHMI\libs as you have it at the moment and upload it here?

exported HMI with path to libraries

exported HMI with empty field (no paths to libraries)

Even if the generated index.html does not contain a link to the BlinkLR.js file, is the BlinkLR.js file included in the exported HMI/js folder?

Can you please try exporting the HMI with the following settings?

With this settings, is the link to BlinkLR.js present in the index.html file? Can you please upload the whole exported HMI?

Thanks!

PS Your rectangular circles are beautiful

(don't mind my circles, they look like rectangles..... )

(my index.html file)

If yes, all libraries from C:\ProgramData\REX Controls\RexHMI\libs should be added automatically...