control-freak-ide/documentation/docFiles/03_Interface_Designer/_index.md

Overview

Quick - Tutorial

1. Step Copy & paste the workspace://index.dhtml file to myscene.dhtml

You can do this with your preferred file manager. Just reload the file tab in the IDE.

2. Open myscene.dhtml

The IDE creates now 2 files: myscene.css and myscene.xblox. You can edit that files with your preferred editor. Changing myscene.css or myscene.dhtml from outside will update the visual editor in real-time

3. Activate your device which you want to use, make sure its up and running and contains some commands.

4. Set "relative" or "absolute" for the scene: View/Flow->Relative/Absolute

5. Drag a "Button" from the "Palette" tab (delite/delite/Button) into the scene

6. Now drag any command from your "Device" onto the button. Make sure you drop the command in the center of the button. The button will be colored in violet.