zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
							<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Actions Builder</title>

    <!-- GLOBAL CSS -->
    <link href="./index.css" rel="stylesheet" />

    <!-- FONTS CSS -->
    <link href="./fonts.css" rel="stylesheet" />

</head>

<body>
    <!-- START DIV: CONTAINER -->
    <div class="container">
        <!-- END DIV: CONTAINER  -->

        <ul>
            <li>save action graph</li>
            <li>reset action graph</li>
            <li>test action graph</li>
        </ul>

        <!-- START DIV: LIST -->
        <div id="List">
            <div id="ListTriggers"></div>
            <div id="ListActions"></div>
            <div id="ListFlowActions"></div>
        </div>
        <!-- END DIV: LIST -->
        <!-- START DIV: GRAPHCONTAINER -->
        <div class="GraphContainer" id="GraphContainerID">

            <!-- START DIV: GRAPH -->
            <div id="Graph">
            </div>
            <!-- END DIV: GRAPH -->
            <!-- START DIV: TOOLBAR -->
            <div id="Toolbar">
                <ul id="ToolbarList">
                    <li>reduce all</li>
                    <li>expand all</li>
                    <li>diconnect all</li>
                    <li>reconnect all</li>
                    <li class="border">-</li>
                    <li class="border">+</li>
                </ul>
            </div>
            <!-- END DIV: TOOLBAR -->

        </div>
        <!-- END DIV: PARAMETERSCONTAINER -->
        <!-- START DIV: PARAMETERS -->
        <div id="Parameters">
        </div>
        <!-- END DIV: PARAMETERS -->
        <!-- START DIV: FORMSEND -->
        <div class="formSend">
            <button class="grey">Cancel</button>
            <button class="blue">Validate</button>
        </div>
        <!-- END DIV: FORMSEND -->

        <canvas id="renderCanvas" style="display:none;"></canvas>

        <input id="ActionsBuilderObjectName" type="hidden" />
        <input id="ActionsBuilderJSON" type="hidden" />

    </div>
    <!-- END DIV: CONTAINER -->

    <canvas id="renderCanvas" style="display:none;"></canvas>

    <input id="ActionsBuilderObjectName" type="hidden" />
    <input id="ActionsBuilderJSON" type="hidden" />

    <script src="babylon.max.js" type="text/javascript"></script>
    <script src="raphael.js" type="text/javascript"></script>
    <script src="actionKinds.js" type="text/javascript"></script>
    <script src="action.js" type="text/javascript"></script>
    <script src="utils.js" type="text/javascript"></script>
    <script src="viewer.js" type="text/javascript"></script>
    <script src="viewserToolbar.js" type="text/javascript"></script>
    <script src="parametersManager.js" type="text/javascript"></script>
    <script src="list.js" type="text/javascript"></script>
    <script src="contextMenu.js" type="text/javascript"></script>

    <script type="text/javascript">

        var graph = new AB.Graph();
        var list = new AB.List(graph);

        list.createListElements();
        graph.update();

        function resetList(type) {
            list.objectType = type;
            list.clearList();
            list.createListElements();
        }

        function updateObjectName() {
            var name = document.getElementById("ActionsBuilderObjectName").value;

            if (list.objectType == AB.ActionsBuilder.Type.SCENE)
                name += " - Scene";
            else
                name += " - Mesh";

            graph.root.text.attr("text", name);
            graph.objectName = name;
        }

        function setIsScene() {
            resetList(AB.ActionsBuilder.Type.SCENE);
        }

        function setIsObject() {
            resetList(AB.ActionsBuilder.Type.OBJECT);
        }

        function updateJSONFromGraph() {
            var json = graph.createJSON();
            json.name = graph.objectName;

            document.getElementById("ActionsBuilderJSON").value = JSON.stringify(json);
        }

        function updateGraphFromJSON() {
            var value = document.getElementById("ActionsBuilderJSON").value;

            if (value == null || value == "")
                return;

            graph.loadFromJSON(JSON.parse(value));
            graph.update();
        }

        function setMeshesNames(names) {
            for (var i = 0; i < arguments.length; i++) {
                AB.ActionsBuilder.MeshesList.push(arguments[i]);
            }
        }

        function setLightsNames(names) {
            for (var i = 0; i < arguments.length; i++) {
                AB.ActionsBuilder.LightsList.push(arguments[i]);
            }
        }

        function setCamerasNames(names) {
            for (var i = 0; i < arguments.length; i++) {
                AB.ActionsBuilder.CamerasList.push(arguments[i]);
            }
        }

        function setSoundsNames(names) {
            for (var i = 0; i < arguments.length; i++) {
                var soundName = arguments[i];

                if (soundName != "" && AB.ActionsBuilder.SoundsList.indexOf(arguments[i]) == -1) {
                    AB.ActionsBuilder.SoundsList.push(arguments[i]);
                }
            }
        }

        // Manage color theme
        graph.graph.canvas.style.background = "-ms-linear-gradient(top, rgba(38, 38, 38,1) 0%, rgba(125, 126, 125, 1) 100%)";
        graph.graph.canvas.style.background = "linear-gradient(top, rgba(38, 38, 38,1) 0%, rgba(125, 126, 125, 1) 100%)";
        graph.graph.canvas.style.background = "-webkit-linear-gradient(top, rgba(38, 38, 38,1) 0%, rgba(125, 126, 125, 1) 100%)";
        graph.graph.canvas.style.background = "-o-linear-gradient(top, rgba(38, 38, 38,1) 0%, rgba(125, 126, 125, 1) 100%)";
        list.setColorTheme("rgb(64, 64, 64)");
        graph.parametersManager.parametersElement.style.backgroundColor = "rgb(64, 64, 64)"; //graph.parametersManager.parametersElement.style.backgroundColor = "#565656";

        function createDebugElements() {
            setMeshesNames("1", "2", "3", "4");
            setCamerasNames("1", "2", "3", "4");
            setLightsNames("1", "2", "3", "4");

            document.getElementById("ActionsBuilderObjectName").value = "Unnamed";
            updateObjectName();

            var structure = '{"type":3,"name":"Jeffrey - Mesh","detached":false,"children":[{"type":0,"name":"OnLeftPickTrigger","detached":false,"children":[{"type":1,"name":"CombineAction","detached":false,"children":[{"type":2,"name":"ValueCondition","detached":false,"children":[{"type":1,"name":"SwitchBooleanAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"isVisible"}]}],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"position.x"},{"name":"value","value":"0"},{"name":"operator","value":"IsEqual"}]}],"combine":[{"type":1,"name":"InterpolateValueAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"position.x"},{"name":"value","value":"0"},{"name":"duration","value":"3000"},{"name":"stopOtherAnimations","value":"false"}]},{"type":1,"name":"InterpolateValueAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"position.y"},{"name":"value","value":"20"},{"name":"duration","value":"3000"},{"name":"stopOtherAnimations","value":"false"}]}],"properties":[]},{"type":1,"name":"InterpolateValueAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"scaling.x"},{"name":"value","value":"4"},{"name":"duration","value":"1000"},{"name":"stopOtherAnimations","value":"false"}]}],"combine":[],"properties":[]},{"type":0,"name":"OnIntersectionEnterTrigger","detached":false,"children":[{"type":1,"name":"SetValueAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"scaling.y"},{"name":"value","value":"10"}]}],"combine":[],"properties":[{"name":"parameter","value":"Deltakosh","targetType":"MeshProperties"}]},{"type":0,"name":"OnIntersectionExitTrigger","detached":false,"children":[{"type":1,"name":"SetValueAction","detached":false,"children":[],"combine":[],"properties":[{"name":"target","value":"Jeffrey","targetType":"MeshProperties"},{"name":"propertyPath","value":"scaling.y"},{"name":"value","value":"1"}]}],"combine":[],"properties":[{"name":"parameter","value":"Deltakosh","targetType":"MeshProperties"}]}],"combine":[],"properties":[]}';
            graph.loadFromJSON(JSON.parse(structure));
            graph.update();
        }
        //createDebugElements();

        var onResize = function (event) {
            var graphContainer = document.getElementById("GraphContainerID");

            var graphElement = document.getElementById("Graph");
            graphElement.style.height = window.innerHeight - graphContainer.clientTop - 80 + "px";

            var parametersElement = document.getElementById("Parameters");
            var listElement = document.getElementById("List");
            parametersElement.style.height = listElement.getBoundingClientRect().height + "px";
        };
        onResize();
        window.addEventListener("resize", onResize);
    </script>

</body>
</html>