About UiMagician

UiMagician is tool started as a part of VSCP project to generate HTML & Mobile apps for IOT. At present UiMagician is capable to generated
HTML apps for its user.

In Next release we are planning cloud based services to generate Mobile apps directly from UiMagician.

Uimagician was started to make life of the Embedded programmer easier. If one have to generate simple HTML/Mobile app you should have good
knowledge of HTML, javascript, CSS, PhoneGap. Most of the Embedded programmers are good in C language, but they are not use to Html or css stuff.
To generate HTML app from UiMagician you only have to know knowledge of VSCP protocol & packet format which are Tx/Rx by your device.

So you have to do a data entry stuff at your end & press generate button UiM will generate Html app !!! .

Programming Language Used for developing UiMagician is Qt & C++.

Download : Download Uimagician !!
Latest Update : Uimagician images & updates
Git : Uimagician Source Code
Android app : Android App working with vscpd daemon running on digital ocean cloud server in US. ..!!!

 Tool Version : UI Magician 1.0.0
 Author       : Dinesh Guleria  
 Copyright    : VSCP Project (2012-2014) 

UiMagician Video Tutorial's & Demo

High Level Design Video : Uimagician High Level Design
Using UiMagician apps on VSCP Network : UiMagician APP & vscpd N/W
Live Demo Video : Single Floor House Demo
Live Demo Video : Multi Floor House Demo
Live Demo Video : Multiple single floor house control
Live Demo Video : Multiple multi floor house control

How UiMagican Works

Uimagician works with a concept that you can divide your house into :–

  • Floor
  • Room or Zone
  • Devices

You can enter your details in the text view. UiMagician will save data related to your house configuration in XML file.
This XML file can be saved & used later on to edit your changes.

Uimagician use to parse this XML configuration file & generate Html app for you.

UiMagician Block Diagram

How to port Html app

Just Git clone https://github.com/grodansparadis/vscp_html5/ This will create vscp_html5 folder in you working directory.

And add to lib folder of above repository following libraries :–

https://github.com/dinguluer/UiMagician/tree/master/samples/working/lib

 vscpSimpleText_mod.js
 vscpslider.js
 vscpStateButton_mod.js
 vscpVariableButton.js
 multiFloorScript.js
 singleFloorScript.js

Now move this vscp_html5 folder to your linux machine like Rpi or Carambola, etc.

UiMagician will convert the XMl configuaration file of house into MyHome.html, dm.xml, variables.xml & two javascript files :—-

       Put files in diifrent folders of repositoryhttps://github.com/grodansparadis/vscp_html5/:-- 
       MyHome.html - ../testws folder 
       javascript files - ../lib folder 
       variables.xml - /srv/vscp folder of 
       dm.xml - /etc/vscp folder

How to Load Html app

Browser recommended to load HTML app :–

 Google Chrome
 Mozilla Firefox

As we know vscpd is using mongoose web server to communicate with HTML apps. Once you have configured webserver using vscpd.conf file.

vscpd.conf :–

      <webserver enable="true" 
                  webrootpath="/srv/vscp/vscp_html5"
                  port="8089"
                  path_cert=""
                  authdomain="mydomain.com"
                  cgi_interpreter=""
                  cgi_pattern=""
                  enable_directory_listing="true"
                  hilde_file_patterns=""
                  index_files=""
                  extra_mime_types=""
                  url_rewrites=""
                  run_as_user="" >
      
          <websockets enable="true" auth="true" />
      
      </webserver>    
      

You can load you webpage directly from you web browser :–

 http://192.168.65.153:8089/testws/index.html
 http://192.168.65.153:8089/testws/MyHome.html

Here 192.168.65.153 Ip address of machine on which vscpd is runing & 8089 is the port on which webserver is listing.

Rules to fill data

Please try to follow following Text syntax to work smoothly with UiMagician :–

  • Avoid using special characters.
  • If two Room/Zone are in same floor then keep the floor name same (spelling & upper or lower case letters).
  • Select correct Device Type, Device Sub Type, Device group & device image while filling data for a device.

UiMagician Tool look

UiMagician Tool

HTML Apps look

Single Floor HTML app Multi Floor HTML app

UiMagician User Guide

UI magician allow you to create different Widgets. Please follow Below instruction to use this tool.
Configuration File Editing Buttons
Enter Room/Zone name in the field as shown in the above image.

Configuration File Editing Buttons
Create New XML configuration file :

             New XML configuration file can be created using following option. 
                   File -> New 
                   ToolBar New button 
                   Configuration File Level --> Button New 

Open existing XML configuration file :

             Open XML configuration file using following option. 
                   File -> Save 
                   ToolBar Save button 
                   Configuration File Level --> Button Open 

Save XML configuration file :

             XML configuration file can be saved using following option 
                   File -> Open 
                   ToolBar Open button 
                   Configuration File Level --> Button Save 

Close XML configuration file :

             New XML configuration file can be closed using following option 
                   File -> close 
                   ToolBar close button 
                   Configuration File Level --> Button close 

Verify XML configuration file :

             XML configuration file content can be verified using following option. 
                   If some data is missing in an Room/Zone then popup widget will Highlight Room/Zone in RED colour. 
                   Configuration File Level --> Button Verify 



Room or zone enter/delete Buttons
Create New Room/Zone :

             Room/zone level --> New Button 

Save Current Room/Zone :

             Room/zone level --> Save Button 

Delete Current Room/Zone :

             Room/zone level --> Delete Button

Undo Current Room/Zone :

             Room/zone level --> Undo Button 
                   This will change the room to the original XML file data value. 

Redo Current Room/Zone :

             Room/zone level --> Redo Button 
                   This will change the room to the current edited Room/Zone data value. 



Device enter/delete Buttons
Create New Device in Room/Zone :

             Device level --> New Button 

Delete Current Device in Room/Zone :

             Device level --> Delete Button 

Undo Current Device in Room/Zone :

             Device level --> Undo Button 
                   This will change the Device to the original XML file data value. 

Redo Current Device in Room/Zone :

             Device level --> Redo Button 
                   This will change the Device to the current edited Device data value. 



Enter Device Details
Enter details for device:

             Device Name : Enter device name in this field. 
                   Device Type : Select Device type from List. 
                   Device Sub Type : Select Device sub type from List. 
                   Device Image : Select device image by double click on the Device image cell, select from Pop-up widget. 
                   Device Info : Enter information about the device here. 
                   Device Packet : Enter details for device packet by double click on the Device packet cell, enter details in Pop-up widget. 



Generate App
Generate Apps :

             Close an edited XML file then Reopen XML configuration file. 
                   XML configuration file can be convert it into HTML5 apps using following option. 
                   Configuration File Level --> Button Generate App 



Exit Tool
Close Tool :

             Ctrl + Q shortcut 
                   Alt + F4 shortcut 
                   Configuration File Level --> Button Open 

Widget created by UiMagician

Switch can be of following catagory :–

  • Button ON/OFF type.

Generate App

  • Variable Button - Its combination of two buttons Inc & dec.

Generate App

  • Variable Slider - It consist of slider.

Generate App
Sensor widget :–

  • Sensor - Sensor widgets can be created with UiMagician.

Generate App

Enter Device Details



Enter Device Details

You have to fill following fields in Text View cells :–

  • Device Name : Write the Name directly in the Cell.



Enter Device name

  • Device Type : Select device type from a drop down list embedded inside the cell (list will appear once you double click the cell).



Select Device type

  • Device Sub Type : Select device type from a drop down list embedded inside the cell (list will appear once you double click the cell).


Select Device sub type

  • Device Image : Select device image from a pop up widget embedded inside the cell (pop up widget will appear once you double click the cell).


Select Switch Image Select Sensor Image

  • Device Group : Select device group from a drop down list embedded inside the cell (list will appear once you double click the cell).


Select Device Group

  • Device Packet :
  Enter device packet inside a pop up widget embedded inside the cell (pop up widget will appear once you double click the cell).
  Device packet pop up widget will vary from device type & subtype selected.
                    

Enter ON/OFF Button Packet Data

UI magician allow you to create Button Widgets. Please fill the following field in the pop up dialog widget.

Device Packet :

         Select device Packet by "Double click" on the Device Packet cell.



Enter Device Details

Websocket Configure

         url :- set the websocket URL for current device. Eg : ws://192.168.65.147:7681
                   Do not leave this field Empty. 
         blocal :- set default value to false 
                 True :- Allow click of button to change the state of the button.
                 False:- State of button will be change on receive of confirmation event from remote node.
         bNoState :- set default value to True. 
                 True :- Allow state of button to be changed.
                       when Button pressed down ON event is send & when Button is released up OFF event is send.
                       i.e two events are send on one button pressed.
                 False:- Do not allow state of button to be changed.
                       If state of button in ON & Button is pressed down OFF event is send & Vica versa.
                       i.e One events are send on one button pressed.
         User Name :- Username to Login to VSCPD.
         Domain :- This field is non editable & fixed & will be made editable in near future once functionality is implemented in vscpd.     
        
         Password :- Password for the user name.  
         GUID :- Set the guid for the Device eg - FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF.
                     Leave this Field empty to allow default value, i.e any device GUID allowed. 
         Index :- Set the index for the Device in HEX eg - 0 to 255 
         Zone :- Set the Zone for the Device in HEX eg - 0 to 255 
         SubZone :- Set the Sub Zone for the Device in HEX eg - 0 to 255 

Enter ON/OFF Variable Button Packet Data

UI magician allow you to create Variable Button Widgets.
It works for control class DIM LAMP & Information Class LEVEL CHANGED type only.
This widget comes with two buttons one to increment the DIM level other decrements the DIM level. Please fill the following field in the pop up dialog widget.

Device Packet :

       Select device Packet by "Double click" on the Device Packet cell.



Enter Device Details

Websocket Configure

         url :- set the websocket URL for current device. Eg : ws://192.168.65.147:7681
                   Do not leave this field Empty. 
         User Name :- Username to Login to VSCPD.                 
         Domain :- This field is non editable & fixed & will be made editable in near future once functionality 
                   is implemented in vscpd.           
         Password :- Password for the user name. 
         GUID :- Set the guid for the event eg - FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF.
                     Leave this Field empty to allow default value, i.e any device GUID allowed. 
         Zone :- Set the Zone for the Device in HEX eg - 0 to 255 
         SubZone :- Set the Sub Zone for the Device in HEX eg - 0 to 255 
         Max Value :- Maximum value of the Device level. 
         Min Value :- Minimum value of the Device level. 

Enter Slider switch Packet Data

UI magician allow you to create Variable Slider Widgets.
It works for control class DIM LAMP, BIG CHANGED LEVEL & Information Class LEVEL CHANGED, BIG CHANGED LEVEL type only.
Please fill the following fied in the pop up dialog widget.

Device Packet :

       Select device Packet by "Double click" on the Device Packet cell.



Enter Device Details Enter Device Details Enter Device Details

Websocket Configure

         url :- set the websocket URL for current device. Eg : ws://192.168.65.147:7681
                   Do not leave this field Empty. 
         User Name :- Username to Login to VSCPD.
         Domain  :- This field is non editable & fixed & will be made editable in near future once functionality 
                 is implemented in vscpd.
         Password :- Password for the user name.
         Max Value :- Maximum value of the Device level.
         Min Value :- Minimum value of the Device Level.
         GUID :- Set the guid for the event eg - FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF.
                     Leave this Field empty to allow default value, i.e any device GUID allowed. 
         Index :- Set the index for the event in HEX eg - 0 to 255. Add only for Class Big Level changed type. 
         Zone :- Set the Zone for the event in HEX eg - 0 to 255 
         SubZone :- Set the Sub Zone for the event in HEX eg - 0 to 255 

Tx/Rx Events

       Class :- Select the Class from the event list. 
       Type :- Set the Type from the event list. 

Enter Sensor Packet Data

UI magician allow you to create Sensor Widgets. Please fill the following fied in the pop up dialog widget.

Device Packet :

       Select device Packet by "Double click" on the Device Packet cell.



Enter Device Details Enter Device Details Enter Device Details

Websocket Security

       User Name :- Username to Login to VSCPD. 
       Domain :- This field is non editable & fixed & will be made editable in near future once functionality 
                 is implemented in vscpd. 
       Password :- Password for the user name.
       Graph type :- select the graph type LINE, BAR or AREA.

Websocket Configure

         url :- set the websocket URL for current device. Eg : ws://192.168.65.147:7681
                   Do not leave this field Empty. 
         Class :- Select the Class from the event list. 
         Type :- Set the Type from the event list. 
         Sensor Index:- Set the Sensor index format from the event list. 
         Decimals :- Set the number of decimal points significant in the event Data. 
         Format String:- Set the string to be displayed on UI for event Data. 
                         e.g :- Measurement Temprature class "{0} Degrees {1}".
                                    Where {0} = numerical value to be displayed
                                    Where {1} = Units to be displayed
                                    Degree is the text displayed in between these two values.
         GUID :- Set the guid for the event eg - FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF:FF 
                     Leave this Field empty to allow default value, i.e any device GUID allowed. 

Variable Configure

         Control :- Check Index   : check this box if Index have to be checked
                    Check Zone    : check this box if Zone have to be checked
                    Check SubZone : check this box if subZone have to be checked
         Index :- Set the index for the even in HEXt eg - 0 to 255. For Measure Zone class only.
         Zone :- Set the Zone for the event in HEX eg - 0 to 255. For Measure Zone class only.
         SubZone :- Set the Sub Zone for the event in HEX eg - 0 to 255. For Measure Zone class only.

UiMagician Releases


UiMagician Fourth Release – release 1.0.3 (Ujjayati) : Date - 01-06-2015
UiMagician Third Release – release 1.0.2 (Riddhi) : Date - 03-02-2015
UiMagician Second Release – release 1.0.1 (Prakash) : Date - 23-10-2014
UiMagician First release – release 1.0.0 (Jyot) : Date - 18-12-2014

Frequently Asked Questions

Frequently Asked Questions for UiMagician.

Q- How does Ui Magician works ?

         Ui magician created XML configuration file for your Homes then read this XML configuration file , convert it into HTML5 apps 
         & some javascript configuration files. XML --> HTML5 apps + Javascript configuration files. 

Can i Edit my XML configuration file of my House ?

         Yes you can make changes to your already existing XML configuration file. Edit it, add to it, modify it 
         & Delete existing Items Like rooms & Devices.

What types off apps are generated by UiMagician ?

         UiMagician is capable to generate HTML5 apps only. 
         But in comming release it will be able to generate Apps for Following platform Android, Iphone , Windows ... etc.

How to port Html Ui files generated ?

         UiMagician will convert the XMl configuaration file of house into MyHome.html, dm.xml, variables.xml & two javascript files. 
         Put files in diifrent folders :-- 
         MyHome.html - ../testws folder 
         javascript files - ../lib folder 
         variables.xml - /srv/vscp folder 
         dm.xml - /etc/vscp folder

How to generate Mobile Apps ?

    > Release 1.0.3 of Uim comes with an dummy project for Intel Xdk with this you can generate Mobile apps on Intel cloud server. 
    > You can generate Apps for Following platform Android, Iphone , Windows .
    > Open you xml configuration file in UiM, press generate button, then select mobile app & size, press OK.
    > This step will generate MyHome.html file & two javascript file.
    > Rename MyHome.html file to index.html & replace it in the Intel XDK dummy project.
    > And copy the two javascript files in the "js" folder replacing the existing files.
    > Thats it.
    > Now you open the intel xdk project in the intel xdk developer studio.
    > And generate your mobile app.
    > For android app generation select crosswalk for android build.
    > For generation of the IoS app you need a developer licence & UUID number of a apple device.
    > For generation of the Windows app you need a developer licence from Microsoft. 

Next Release Plan ?

         Make UiM more user friendly tool ... !!!
 
tools/uimagician.txt · Last modified: 2016/03/17 11:55 by dinesh
[unknown button type]
 
Except where otherwise noted, content on this wiki is licensed under the following license: Public Domain
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki