Examples with SimpleWidgetGroup edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup used on opensource projects

Example 36 with SimpleWidgetGroup

use of edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup in project cogtool by cogtool.

the class DesignEditorCmd method pasteFrameElementGroup.

private static int pasteFrameElementGroup(FrameElementGroup eltGroup, Design design, int currentDeviceTypes, Frame frame, DemoStateManager mgr, IUndoableEditSequence editSeq, Set<FrameElementGroup> groups, Set<IWidget> addedRemoteLabels) {
    int numPasted = 0;
    makeEltGroupNameUnique(eltGroup, frame);
    groups.add(eltGroup);
    groups.addAll(eltGroup.getEltGroups());
    checkForRemoteLabel(eltGroup, addedRemoteLabels);
    Iterator<FrameElement> elementsToAdd = eltGroup.iterator();
    while (elementsToAdd.hasNext()) {
        FrameElement eltToAdd = elementsToAdd.next();
        if (eltToAdd instanceof IWidget) {
            numPasted += pasteWidget((IWidget) eltToAdd, design, currentDeviceTypes, frame, mgr, editSeq, groups, addedRemoteLabels);
        } else if (eltToAdd instanceof SimpleWidgetGroup) {
            numPasted += pasteWidgetGroup((SimpleWidgetGroup) eltToAdd, design, currentDeviceTypes, frame, mgr, editSeq, groups, addedRemoteLabels);
        } else if (eltToAdd instanceof FrameElementGroup) {
            numPasted += pasteFrameElementGroup((FrameElementGroup) eltToAdd, design, currentDeviceTypes, frame, mgr, editSeq, groups, addedRemoteLabels);
        }
    }
    return numPasted;
}

Example 37 with SimpleWidgetGroup

use of edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup in project cogtool by cogtool.

the class DesignEditorCmd method pasteElements.

// pasteFrameElementGroup
public static int pasteElements(Design design, final Frame frame, Collection<Object> objects, DemoStateManager mgr, IUndoableEditSequence editSequence) {
    // If given objects contain widgets, insert into the given frame
    if ((objects != null) && (objects.size() > 0)) {
        Iterator<Object> objIt = objects.iterator();
        Set<SimpleWidgetGroup> addedGroups = new HashSet<SimpleWidgetGroup>();
        final Set<IWidget> addedRemoteLabels = new HashSet<IWidget>();
        final Set<FrameElementGroup> addedEltGroups = new HashSet<FrameElementGroup>();
        int numPasted = 0;
        // May need to add a device
        int currentDeviceTypes = DeviceType.buildDeviceSet(design.getDeviceTypes());
        // create them.
        while (objIt.hasNext()) {
            Object o = objIt.next();
            if (o instanceof IWidget) {
                IWidget widget = (IWidget) o;
                numPasted += pasteWidget(widget, design, currentDeviceTypes, frame, mgr, editSequence, addedEltGroups, addedRemoteLabels);
                SimpleWidgetGroup group = widget.getParentGroup();
                if (group != null) {
                    addedGroups.add(group);
                }
            } else if (o instanceof FrameElementGroup) {
                numPasted += pasteFrameElementGroup((FrameElementGroup) o, design, currentDeviceTypes, frame, mgr, editSequence, addedEltGroups, addedRemoteLabels);
            }
        }
        Iterator<SimpleWidgetGroup> groupsIter = addedGroups.iterator();
        while (groupsIter.hasNext()) {
            SimpleWidgetGroup group = groupsIter.next();
            repositionChildren(group);
            if (group instanceof GridButtonGroup) {
                ((GridButtonGroup) group).recalculateOffsets();
            }
            addedEltGroups.addAll(group.getEltGroups());
        }
        Iterator<FrameElementGroup> eltGroups = addedEltGroups.iterator();
        while (eltGroups.hasNext()) {
            frame.addEltGroup(eltGroups.next());
        }
        Iterator<IWidget> remoteLabels = addedRemoteLabels.iterator();
        while (remoteLabels.hasNext()) {
            IWidget remoteLabel = remoteLabels.next();
            if (!frame.containsWidget(remoteLabel)) {
                String uniqueName = NamedObjectUtil.makeNameUnique(remoteLabel.getName(), frame.getWidgets());
                remoteLabel.setName(uniqueName);
                frame.addWidget(remoteLabel);
            }
        }
        IUndoableEdit edit = new AUndoableEdit(CogToolLID.Paste) {

            @Override
            public String getPresentationName() {
                return PASTE;
            }

            @Override
            public void redo() {
                super.redo();
                Iterator<FrameElementGroup> eltGroups = addedEltGroups.iterator();
                while (eltGroups.hasNext()) {
                    frame.addEltGroup(eltGroups.next());
                }
                Iterator<IWidget> remoteLabels = addedRemoteLabels.iterator();
                while (remoteLabels.hasNext()) {
                    IWidget remoteLabel = remoteLabels.next();
                    if (!frame.containsWidget(remoteLabel)) {
                        frame.addWidget(remoteLabel);
                    }
                }
            }

            @Override
            public void undo() {
                super.undo();
                Iterator<FrameElementGroup> eltGroups = addedEltGroups.iterator();
                while (eltGroups.hasNext()) {
                    frame.removeEltGroup(eltGroups.next());
                }
                Iterator<IWidget> remoteLabels = addedRemoteLabels.iterator();
                while (remoteLabels.hasNext()) {
                    IWidget remoteLabel = remoteLabels.next();
                    if (frame.containsWidget(remoteLabel)) {
                        frame.removeWidget(remoteLabel);
                    }
                }
            }
        };
        editSequence.addEdit(edit);
        return numPasted;
    }
    return 0;
}

Example 38 with SimpleWidgetGroup

use of edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup in project cogtool by cogtool.

the class DesignExportToHTML method buildFrameHTML.

/**
	 * Build the HTML around a single frame.
	 * This really just involves building an image map over the
	 * areas specified by the widgets, as well as the GraphicalDevices
	 * Since the graphical Devices don't really have a "Name"
	 * Also, since the Graphical devices and the frame name are not in the
	 * Normal frame... (and we are using a frame not a design)
	 * Need to add graphical devices using normal HTML.
	 *
	 * Requires the name of the frame image to be passed in.
	 *
	 * A copy of overlib.js needs to be copied to the output directory as well.
	 * InputStream stream =
	 *     ClassLoader.getSystemResourceAsStream
	 *          ("edu/cmu/cs/hcii/cogtool/resources/overlib.js");
	 *
	 * @param frame
	 * @param frameImageName
	 * @return
	 */
protected String buildFrameHTML(Frame frame) {
    String notHelpString = NOT_HELP_DEFAULT;
    StringBuilder html = new StringBuilder();
    html.append("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n");
    html.append("<html>\n");
    html.append("<title>");
    html.append(frame.getName());
    html.append("</title>\n");
    //html.append("<style type='text/css'> body { margin:0; padding:0; } </style>\n");
    html.append("<link rel='stylesheet' type='text/css' href='build/fonts-min.css' />\n");
    html.append("<link rel='stylesheet' type='text/css' href='build/menu.css' />\n");
    html.append("<script type='text/javascript' src='build/yahoo-dom-event.js'></script>\n");
    html.append("<script type='text/javascript' src='build/container_core.js'></script>\n");
    html.append("<script type='text/javascript' src='build/menu.js'></script>\n");
    // Add javascript load for overlay code.
    html.append("<script type='text/javascript' ");
    html.append(" src='build/overlib.js' ");
    html.append(" language='JavaScript'></script>\n");
    html.append("<style type='text/css'> div.yuimenu { position: absolute; visibility: hidden; } </style>\n");
    html.append("<body style=\"cursor:default;\" class=' yui-skin-sam' onload=\"onLoad()\" onkeydown=\"checkKey(event)\">\n");
    // Create the table with the frame name.
    html.append("<table border=1>\n");
    html.append("<tr>\n");
    // -------------------------
    // Add the frame title
    // -------------------------
    html.append("<td align='center'>\n");
    html.append(frame.getName());
    html.append("</td>\n");
    html.append("</tr>\n");
    // -------------------------
    // Add the device interfaces.
    // -------------------------
    html.append("<tr>\n");
    html.append("<td>\n");
    html.append("<img align=center src='");
    html.append(getFrameURL(frame, ".jpg"));
    //Overlib is a javascript biult-in function that shows a nice pop-up box. DEMONSTRATE!
    //I have added a map for this image so that this image will follow a map in the case of "HotSpots"
    html.append("' onclick=\"" + NOT_ACCOMPLISH_GOAL + "\" usemap=\"#Button_Map\" />\n");
    html.append("</td>\n</tr>\n</table>\n");
    // save any menus encountered to create them in javascript later
    List<AMenuWidget> menus = new ArrayList<AMenuWidget>();
    // only build a group of radio buttons or list box items once
    Set<SimpleWidgetGroup> visitedGroups = new HashSet<SimpleWidgetGroup>();
    // loop over all widgets
    Iterator<IWidget> widgetIterator = frame.getWidgets().iterator();
    //NoticS: while function to go over all widgets
    while (widgetIterator.hasNext()) {
        IWidget widget = widgetIterator.next();
        //html.append(buildWidgetHTML(widget, visitedGroups));
        widgetHTML += buildWidgetHTML(widget, visitedGroups, frame);
        if ((widget instanceof MenuHeader) || (widget instanceof ContextMenu)) {
            menus.add((AMenuWidget) widget);
        }
    }
    mapHTML += "</map>\n";
    html.append(mapHTML);
    html.append(widgetHTML);
    mapHTML = "<map name=\"Button_map\">\n";
    widgetHTML = "";
    //javascript functions
    html.append("<script type='text/javascript'>\n");
    html.append("var isIE = navigator.appName.indexOf(\"Microsoft\")!=-1;\n");
    html.append("var isWin = navigator.appVersion.indexOf(\"Win\")!=-1;\n");
    html.append("var notAccomplishGoal = \"" + notHelpString + "\";\n");
    html.append("var keyboardString = \"\";\n");
    html.append("var hoverElt = null;\n");
    html.append("var keyTransitionMap = new Object();\n");
    html.append("var clickMap = null;\n");
    html.append("var curEvt = null;\n");
    html.append("var numClicks = 0;\n");
    html.append("var focusString = \"\";\n");
    html.append("var focusTransitionMaps = new Object();\n");
    html.append("var curFocusMap = null;\n");
    int devTypes = DeviceType.buildDeviceSet(frame.getDesign().getDeviceTypes());
    if (DeviceType.Keyboard.isMember(devTypes) || DeviceType.Touchscreen.isMember(devTypes)) {
        html.append(buildKeyTransitionMap(frame.getInputDevices(), frame.getWidgets()));
    }
    // Function to account for IE versus Firefox differences in
    // mouse events - they use a different set of mouse button constants
    html.append("\nfunction getMouseButton(button)\n{\n");
    html.append("  if (button == " + LEFT_MOUSE + ") {\n");
    html.append("    return isIE ? 1 : 0;\n  }\n");
    html.append("  if (button == " + MIDDLE_MOUSE + ") {\n");
    html.append("    return isIE ? 4 : 1;\n  }\n");
    html.append("  if (button == " + RIGHT_MOUSE + ") {\n");
    html.append("    return isIE ? 2 : 2;\n  }\n}\n\n");
    html.append("function onLoad()\n{\n");
    html.append("  var str = document.location.search;\n");
    html.append("  if (str != null) {\n");
    html.append("    str = str.substr(1);\n");
    html.append("    var search = str.split(\"&\");\n");
    html.append("    var searchCount = search.length;\n");
    html.append("    for (i = 0; i < searchCount; i++) {\n");
    html.append("      var check = search[0].split(\"=\");\n");
    html.append("      if ((check.length == 2) && (check[0] == \"focusID\")) {\n");
    html.append("        var elt = document.getElementById(decodeURIComponent(check[1]));\n");
    html.append("        if (elt != null) {\n");
    html.append("          elt.focus();\n");
    html.append("          if (elt.type == 'radio') {\n");
    html.append("            elt.checked = true;\n        }\n");
    html.append("          else if (elt.type == 'checkbox') {\n");
    html.append("            elt.checked = ! elt.checked;\n");
    html.append("          }\n");
    html.append("        }\n");
    html.append("        break;\n");
    html.append("      }\n    }\n  }\n} // onLoad\n\n");
    // The following two methods are only used for Yahoo menu events.
    // newframe is a string representing the html file of the frame to be
    // transitioned to; button is the mouse button that causes that
    // transition, and e is the actual event that is checked against
    html.append("function checkMenuTransitions(newFrame, button, e)\n{\n");
    html.append("  return (newFrame && (button == e.button));\n}\n\n");
    // The Yahoo menus use this function, so it requires three parameters.
    // The first we don't use, the second stores the event, and the third
    // is an array of strings representing html files. The function above
    // takes this information plus a mapping from the index in that array
    // to the mouse button that effects the corresponding transition, and
    // determines whether a transition should occur.  If so, it changes
    // the location of the document.
    html.append("function menuTransition(ignore, p_aArgs, p_oValue)\n{\n");
    html.append("  var transitionIndex = -1;\n  for (i = 0; i < p_oValue.length; i++) {\n");
    html.append("    if (checkMenuTransitions(p_oValue[i], getMouseButton(i+1), p_aArgs[0])) {\n");
    html.append("      if ((p_oValue[i] == " + IGNORE_LEFT_CLICK + ")) {\n");
    html.append("        return;\n      }\n");
    html.append("      transitionIndex = i;\n    }\n  }\n");
    html.append("  if (transitionIndex >= 0) {\n");
    html.append("    document.location.href = p_oValue[transitionIndex];\n  }\n");
    html.append("  else {\n    " + NOT_ACCOMPLISH_GOAL + "\n  }\n}\n\n");
    // Return an integer representing the modifier state of the current
    // event object (NOTE: event has "metaKey" but no fnKey or cmdKey)
    html.append("function getModifiers(e)\n{\n");
    html.append("  var result = 0;\n  if (e.shiftKey) {\n");
    html.append("    result += " + AAction.SHIFT + ";\n  }\n");
    html.append("  if (e.ctrlKey) {\n    result += " + AAction.CTRL + ";\n  }\n");
    html.append("  if (e.altKey) {\n    result += " + AAction.ALT + ";\n  }\n\n");
    html.append("  return result;\n}\n\n");
    // The following two functions are used for transitions from regular
    // HTML elements.  This one takes the current event object, the set
    // of values to be considered, and the number of clicks that have
    // occurred and determines whether a transition should be followed.
    html.append("function checkTransitions(clicks, params, event)\n{\n");
    html.append("  if (clicks != params[1]) {\n    return false;\n  }\n\n");
    html.append("  var modifiers = getModifiers(event);\n");
    html.append("  var button = event.button;\n");
    html.append("  if ((params[0] == " + RIGHT_MOUSE + ") &&");
    html.append(" (modifiers & " + AAction.CTRL + ") && (! isWin)) {\n");
    html.append("    button = getMouseButton(" + RIGHT_MOUSE + ");\n");
    html.append("    modifiers -= " + AAction.CTRL + ";\n  }\n\n");
    html.append("  if (getMouseButton(params[0]) != button) {\n");
    html.append("    return false;\n  }\n  if (modifiers != params[2]) {\n");
    html.append("    return false;\n  }\n\n  return true;\n}\n\n");
    // clicks is the number of clicks performed on the widget (1, 2, or 3),
    // and event is the HTML event object.  transitionMap is an array of
    // arrays.  The sub-arrays have four elements that together define a
    // mouse transition: which button, how many clicks, the keyboard
    // modifier state, and the destination frame, in that order.
    html.append("function followTransition(clicks, event, transitionMap)\n{\n");
    html.append("  var frame = null;\n");
    html.append("  for (i = 0; i < transitionMap.length; i++) {\n");
    html.append("    var params = transitionMap[i];\n");
    html.append("    if (checkTransitions(clicks, params, event)) {\n");
    html.append("      frame = params[3];\n");
    html.append("      if ((frame == " + IGNORE_LEFT_CLICK + ") && (clicks == 1)) return;\n    }\n  }\n\n");
    html.append("  if (frame != null) {\n");
    html.append("    document.location.href = frame;\n");
    html.append("    return true;\n  }\n");
    html.append("  " + NOT_ACCOMPLISH_GOAL + "\n  return false;\n}\n\n");
    // Used for context menus to put the menu where the mouse was clicked
    html.append("function displayContextMenu(event, menu)\n{\n");
    html.append("  menu.cfg.setProperty(\"x\", event.clientX);\n");
    html.append("  menu.cfg.setProperty(\"y\", event.clientY);\n");
    html.append("  menu.show();\n}\n\n");
    // This function allows clicking on the label of a checkbox to toggle
    // it instead of only being able to click on the box itself.  CogTool
    // checkbox widgets work this way.
    html.append("function toggleCheckbox(eltId)\n{\n");
    html.append("  var elt = document.getElementById(eltId);\n");
    html.append("  if (typeof(elt) != 'undefined') {\n");
    html.append("    if (elt.type == 'checkbox') {\n");
    html.append("      elt.checked = ! elt.checked;\n    }\n  }\n}\n");
    // Similar to toggleCheckbox, but for radio buttons
    html.append("function selectRadio(eltId)\n{\n");
    html.append("  var elt = document.getElementById(eltId);\n");
    html.append("  if (typeof(elt) != 'undefined') {\n");
    html.append("    if (elt.type == 'radio') {\n");
    html.append("      elt.checked = true;\n    }\n  }\n}\n\n");
    // There is no notion of "hover" in html, only mouse over.  So if
    // there is a hover transition, it needs to save the frame to be
    // transitioned to in a global variable and start a timer to see
    // if the cursor remains hovered over the element.
    html.append("function timeHover(frame)\n{\n  hoverElt = frame;\n");
    html.append("  window.setTimeout(\"checkHover()\", 1000);\n}\n\n");
    // When the timer is up, if the cursor is still there, it does the
    // transition.
    html.append("function checkHover()\n{\n  if (hoverElt) {\n");
    html.append("    document.location.href = hoverElt;\n  }\n");
    html.append(/*else {\n" + NOT_ACCOMPLISH_GOAL + "\n}\n*/
    "}\n\n");
    // If there is a mouse out event on any widget, it discards the hover
    // information.
    html.append("function cancelHover()\n{\n  hoverElt = null;\n}\n\n");
    // Used for keyboard transitions.  Taking into account regexp special
    // characters, it uses a regular expression to test whether the string
    // str (the string that collects keyboard input) ends with the string
    // s (the string that causes a transition)
    html.append("function endsWith(str, s)\n{\n");
    html.append("  s = s.replace(/\\\\|\\(|\\)|\\*|\\^|\\$|\\+|\\?|\\.|\\||\\{|\\}|\\[|\\]/g, escaper);\n");
    html.append("  var reg = new RegExp(s + \"$\");\n");
    html.append("  return reg.test(str);\n}\n\n");
    // Called when a key is pressed; adds the new key to the keyboard
    // string and, if applicable, the string for the widget that has the
    // focus (first), and checks whether it should do a transition
    // TODO NOTE: Widgets for which key transitions don't work:
    // radio buttons, links, menu items, pull-down items, list box items
    html.append("function checkKey(e)\n{\n  if (curFocusMap) {\n");
    html.append("    focusString += String.fromCharCode(e.keyCode);\n");
    html.append("    var result = checkStrings(focusString, curFocusMap);\n");
    html.append("    if (result) {\n      document.location.href = result;\n");
    html.append("      return;\n    }\n  }\n");
    html.append("  keyboardString += String.fromCharCode(e.keyCode);\n");
    html.append("  var result = checkStrings(keyboardString, keyTransitionMap);\n");
    html.append("  if (result) {\n      document.location.href = result;\n  }\n}\n\n");
    // Returns the longest string that matches the currently collected
    // input, or null
    html.append("function checkStrings(collector, map)\n{\n");
    html.append("  var longest = null;\n");
    html.append("  for (var i in map) {\n");
    html.append("    if (endsWith(collector.toLowerCase(), i)) {\n");
    html.append("      if (! longest) {\n        longest = i;\n      }\n");
    html.append("      if (i.length > longest.length) {\n        longest = i;\n");
    html.append("      }\n    }\n  }\n");
    html.append("  if (longest) {\n    return map[longest];\n  }\n");
    html.append("  return null;\n}\n\n");
    // adds escape characters to special keys so the regexp doesn't
    // get confused
    html.append("function escaper(c)\n{\n  return \'\\\\\' + c;\n}\n\n");
    // html detects left double-clicks but not middle or right double clicks,
    // so the next two functions handle that.  This one is called on mouse
    // up (onclick doesn't detect right clicks, see buildWidgetHTML()).
    // transitionMap is an array of arrays (see the comments above
    // followTransition).  It starts a timer after it is called; if
    // it is called again before the timer runs out (as determined by the
    // state of the global numClicks variable), it starts another timer,
    // otherwise it checks a single click transition.  If the second timer
    // runs out, it checks a double click transition, but if this function
    // is called a third time, it checks a triple click transition.
    // TODO: NOTE: Even with onmouseup, html seems to fail to detect middle
    // clicks in Firefox, so this solution works only with right clicks.
    html.append("function checkClicks(transitionMap, e)\n{\n");
    html.append("  curEvt = e;\n  numClicks++;\n\n");
    html.append("  if (numClicks == 3) {\n");
    html.append("    if (followTransition(3, e, transitionMap)) {\n");
    html.append("      window.clearTimeout();\n    }\n\n");
    html.append("    numClicks = 0;\n  }\n  else {\n");
    html.append("    clickMap = transitionMap;\n");
    html.append("    if (numClicks == 1) {\n");
    html.append("      window.setTimeout(\"doClick1()\", 500);\n    }\n");
    html.append("    else if (numClicks == 2) {\n");
    html.append("      window.clearTimeout();\n");
    html.append("      window.setTimeout(\"doClick2()\", 300);\n    }\n  }\n}\n\n");
    // If there was only a single click, it uses the saved
    // map to try to perform a transition with one click, and clears the state.
    html.append("function doClick1()\n{\n");
    html.append("  if ((clickMap != null) && (numClicks == 1)) {\n");
    html.append("    followTransition(1, curEvt, clickMap);\n");
    html.append("    clickMap = null;\n    numClicks = 0;\n  }\n}\n\n");
    // If there was a double click, it uses the saved
    // map to try to perform a transition with two clicks, and clears the state.
    html.append("function doClick2()\n{\n");
    html.append("  if ((clickMap != null) && (numClicks == 2)) {\n");
    html.append("    followTransition(2, curEvt, clickMap);\n");
    html.append("    clickMap = null;\n    numClicks = 0;\n  }\n}\n\n");
    // Called when any widget gets the focus (html's onfocus).  Uses the
    // widgets ID to index into the map of widgets' keyboard transitions.
    html.append("function onFocus(eltID)\n{\n");
    html.append("  keyboardString = \"\";\n");
    html.append("  var map = focusTransitionMaps[eltID];\n");
    html.append("  if (typeof(map) != 'undefined') {\n");
    html.append("    curFocusMap = focusTransitionMaps[eltID];\n  }\n}\n\n");
    // Clears the current focus map so it knows that no widget has the focus
    html.append("function onBlur()\n{\n  curFocusMap = null;\n}\n\n");
    html.append("YAHOO.util.Event.onDOMReady(function () {\n");
    // use yahoo javascript library to build up menus
    if (menus.size() > 0) {
        for (int i = 0; i < menus.size(); i++) {
            AMenuWidget menu = menus.get(i);
            String menuVar = "oMenu" + i;
            String context = "";
            if (menu instanceof MenuHeader) {
                // associate it with the corresponding menu header
                context = ", { context: [\"" + menu.getName() + "\", \"tl\", \"bl\"]}";
            }
            // else, if it is a context menu, have it appear wherever the
            // mouse is clicked (in a javascript method)
            // create the javascript menu object
            html.append("  var " + menuVar + " = new YAHOO.widget.Menu(\"menu" + i + "\"" + context + ");\n");
            html.append("  " + menuVar + ".addItems(" + buildItemsString(menu.getChildren().iterator()) + ");\n");
            html.append("  " + menuVar + ".showEvent.subscribe(function () { this.focus(); });\n");
            html.append("  " + menuVar + ".render(document.body);\n");
            if (menu instanceof MenuHeader) {
                html.append("  YAHOO.util.Event.addListener(\"" + menu.getName() + "\", \"click\", " + menuVar + ".show, null, " + menuVar + ");\n");
            } else if (menu instanceof ContextMenu) {
                html.append("  YAHOO.util.Event.addListener(\"" + menu.getName() + "\", \"contextmenu\", displayContextMenu, " + menuVar + ", " + menuVar + ");\n");
            }
        }
    }
    html.append("\n  document.body.oncontextmenu = function () {\n    return false;\n  }\n});\n\n");
    html.append("</script>\n");
    html.append("</body>\n");
    html.append("</html>\n");
    return html.toString();
}

Example 39 with SimpleWidgetGroup

use of edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup in project cogtool by cogtool.

the class DesignExportToHTML method buildWidgetHTML.

protected String buildWidgetHTML(IWidget widget, Set<SimpleWidgetGroup> visitedGroups, Frame frame) {
    //Function is called once for each widget...
    StringBuilder html = new StringBuilder();
    DoubleRectangle bounds = widget.getEltBounds();
    String name = widget.getName();
    //How does below boolean work?
    boolean isStandard = widget.isStandard();
    //MAYBE CREATE AN IF STATEMENT TO HANDLE BUTTONS/MENU BUTTON DIFFERENTLY
    // Put the html widget in the same place as the CogTool widget
    // (adjusting for the position of the html table)
    //WE ARE ADDING TEN HERE TO COMPENSATE FOR LOCATION WITHIN BROWSER
    //WE DO NOT WANT TO ADD THAT SINCE WE ARE SWITCHING TO AREA TAG AND DEALING WITHIN IMAGE ONLY
    //POSITION AS OF NOW IS RELATIVE TO IMAGE :)
    String properties = "onfocus=\"onFocus('" + name + "')\" onblur=\"onBlur()\"" + " id=\"" + name + "\" style=\"position: absolute; left: " + (bounds.x + 10) + "; top: " + (bounds.y + 33) + "; width: " + bounds.width + "; height: " + bounds.height + ";\"";
    WidgetType type = widget.getWidgetType();
    // don't pop up the "does not help..." message if there is no left click
    // transition defined from these widgets
    int ignoreButton = 0;
    boolean ignoreLeftClick = (WidgetType.Check.equals(type) || WidgetType.TextBox.equals(type) || WidgetType.Graffiti.equals(type) || WidgetType.Menu.equals(type));
    if (ignoreLeftClick) {
        ignoreButton = LEFT_MOUSE;
    } else if (WidgetType.ContextMenu.equals(type)) {
        ignoreButton = RIGHT_MOUSE;
    }
    String eventString = getEventString(widget, ignoreButton);
    if (!widget.isRendered() && "".equals(widget.getTitle()) && widget.getImage() == null && frame.getBackgroundImage() == null && !WidgetType.Noninteractive.equals(type)) {
        blindHotSpotWarning += "This CogTool model has a hidden widget on screen. " + "You will not be able to visibly identify the location of +" + widget.getName() + ".\n";
    }
    //Why did they not use a switch statement here ?
    if (isStandard) {
        if (WidgetType.Noninteractive.equals(type) || WidgetType.Text.equals(type)) {
            return getHotspotString(widget, properties, eventString);
        }
        if (WidgetType.Button.equals(type)) {
            if (!widget.isRendered()) {
                if (!"".equals(widget.getTitle())) {
                    html.append("<div align=\"middle\"" + properties + eventString + ">" + widget.getTitle() + "</div>\n");
                }
                //In the below 6 lines I create an area tag that will be placed within the map tags, within the html code,
                //in order to create HotSpots over the image of the frame
                mapHTML += "<area shape=\"rect\" name=value ";
                mapHTML += "value ='" + widget.getTitle() + "'";
                mapHTML += " onfocus=\"onFocus('" + name + "')\" onblur=\"onBlur()\"" + " id=\"" + name + "\"" + " coords=\"" + bounds.x + "," + bounds.y + "," + (bounds.x + bounds.width) + "," + (bounds.y + bounds.height) + "\"";
                mapHTML += eventString + "/>\n";
            } else {
                html.append("<input type=button name=value value='");
                html.append(widget.getTitle());
                html.append("' " + properties + eventString + ">\n");
            }
        } else if (WidgetType.Check.equals(type)) {
            String checked = "";
            Object isSel = widget.getAttribute(WidgetAttributes.IS_SELECTED_ATTR);
            if (NullSafe.equals(WidgetAttributes.IS_SELECTED, isSel)) {
                checked = " checked";
            }
            // for checkboxes, width and height don't matter, so only deal with
            // the x and y
            String styleString = properties.substring(0, properties.indexOf("width")) + "\"";
            html.append("<input type=checkbox " + styleString + eventString);
            html.append(checked + ">\n");
            String textStyle = "style=\"position: absolute; left: " + (bounds.x + 30) + "; top: " + (bounds.y + 33) + ";\"";
            String textEvent = eventString;
            if (textSelect(widget)) {
                textEvent += " onclick=\"toggleCheckbox('";
                textEvent += widget.getName();
                textEvent += "')\"";
            }
            html.append("<a " + textStyle + textEvent + ">");
            html.append(widget.getTitle() + "</a>\n");
        } else if (WidgetType.Radio.equals(type)) {
            SimpleWidgetGroup group = widget.getParentGroup();
            if ((group != null) && !visitedGroups.contains(group)) {
                visitedGroups.add(group);
                String groupName = widget.getName();
                Iterator<IWidget> widgets = group.iterator();
                while (widgets.hasNext()) {
                    IWidget w = widgets.next();
                    DoublePoint origin = w.getShape().getOrigin();
                    String itemString = getEventString(w, LEFT_MOUSE);
                    String checked = "";
                    Object isSel = w.getAttribute(WidgetAttributes.IS_SELECTED_ATTR);
                    if (NullSafe.equals(WidgetAttributes.IS_SELECTED, isSel)) {
                        checked = " checked";
                    }
                    // for radio buttons, width and height don't matter, so only deal with
                    // the x and y
                    String styleString = "onfocus=\"onFocus('" + w.getName() + "')\" onblur=\"onBlur()\"" + "style=\"position: absolute; left: " + (origin.x + 10) + "; top: " + (origin.y + 33) + ";\"";
                    // TODO: if transitioned from, never deselects
                    html.append("<input type=radio name=\"" + groupName + "\"");
                    html.append(" id=\"");
                    html.append(w.getName());
                    html.append("\" " + styleString + itemString + checked + ">\n");
                    String textStyle = "style=\"position: absolute; left: " + (origin.x + 30) + "; top: " + (origin.y + 33) + ";\"";
                    String textEvent = itemString;
                    if (textSelect(w)) {
                        textEvent += " onclick=\"selectRadio('";
                        textEvent += w.getName();
                        textEvent += "')\"";
                    }
                    html.append("<a " + textStyle + textEvent + ">");
                    html.append(w.getTitle() + "</a>\n");
                }
            }
        } else if (WidgetType.TextBox.equals(type) || WidgetType.Graffiti.equals(type)) {
            html.append("<input type=text name=value value='");
            html.append(widget.getTitle());
            html.append("' " + properties + eventString + ">\n");
        } else if (widget instanceof ListItem) {
            SimpleWidgetGroup group = widget.getParentGroup();
            // this code will change
            if (!(visitedGroups.contains(group))) {
                visitedGroups.add(group);
                ListItem firstItem = (ListItem) group.get(0);
                DoubleRectangle itemBounds = firstItem.getEltBounds();
                // use properties of the first item in the list
                properties = "onfocus=\"onFocus('" + firstItem.getName() + "')\" onblur=\"onBlur()\"" + " id=\"" + firstItem.getName() + "\" style=\"position: absolute; left: " + (itemBounds.x + 10) + "; top: " + (itemBounds.y + 33) + "; width: " + itemBounds.width + ";\"";
                html.append("<select size=" + group.size() + " " + properties + ">\n");
                Iterator<IWidget> widgets = group.iterator();
                while (widgets.hasNext()) {
                    IWidget w = widgets.next();
                    String itemEvent = getEventString(w, 0);
                    html.append("<option" + itemEvent + " id=\"");
                    html.append(w.getName() + "\">");
                    html.append(w.getTitle() + "\n");
                }
                html.append("</select>\n");
            }
        } else if (widget instanceof MenuHeader) {
            // make hotspot associated w/ menu, use widget's
            // name for ID
            //            html.append("<input type=button name=value value='");
            //            html.append(widget.getTitle());
            //            html.append("' style=" + style + " id=\"");
            //            html.append(widget.getName());
            //            html.append("\">\n");
            // TODO: add background color?
            properties = properties.substring(0, properties.length() - 1);
            properties += " background: lightGray;\"";
            html.append("<div " + properties + eventString + ">");
            html.append(widget.getTitle());
            html.append("</div>\n");
        } else if (widget instanceof ContextMenu) {
            // TODO: add background color?
            //            style = style.substring(0, style.length() - 1);
            //            style += " background: lightGray;\"";
            html.append("<div " + properties + eventString + ">");
            html.append(widget.getTitle());
            html.append("</div>\n");
        } else if (widget instanceof PullDownHeader) {
            PullDownHeader pdh = (PullDownHeader) widget;
            //"select tag is used to create a select list" --> http://www.w3schools.com/TAGS/tag_Select.asp
            html.append("<select " + properties + ">\n");
            if (pdh.itemCount() > 0) {
                //html.append("<optgroup>\n"); //TODO: style
                Iterator<IWidget> children = pdh.getChildren().iterator();
                while (children.hasNext()) {
                    IWidget pdi = children.next();
                    String childEvent = getEventString(pdi, 0);
                    html.append("<option" + childEvent + " id=\"");
                    html.append(pdi.getName() + "\">" + pdi.getTitle() + "\n");
                }
            //html.append("</optgroup>\n");
            }
            html.append("</select>\n");
        } else if (WidgetType.Link.equals(type)) {
            properties = properties.substring(0, properties.length() - 1);
            html.append("<a " + properties + " color: blue;\"");
            html.append(eventString + "><u>");
            html.append(widget.getTitle());
            html.append("</u></a>\n");
        }
    } else {
        // unknown widget or custom version of an interactive widget
        return getHotspotString(widget, properties, eventString);
    }
    return html.toString();
}

Example 40 with SimpleWidgetGroup

use of edu.cmu.cs.hcii.cogtool.model.SimpleWidgetGroup in project cogtool by cogtool.

the class FrameEditorMouseState method withinReorder.

// dynamicReorderWidget
protected boolean withinReorder(int x, int y) {
    double zoom = ui.getZoom();
    if (lastHoveredWidget != null) {
        IWidget lastWidget = lastHoveredWidget.getModel();
        SimpleWidgetGroup lastGroup = lastWidget.getParentGroup();
        if (lastGroup != null) {
            if (lastGroup.indexOf(lastWidget) == lastGroup.size() - 1) {
                Rectangle bounds = ui.getGroupFigureBounds(lastGroup);
                Rectangle reorderBds = new Rectangle();
                Rectangle widgetBds = lastHoveredWidget.getBounds();
                reorderBds.width = widgetBds.width + 20;
                reorderBds.height = widgetBds.height + 20;
                if (lastGroup.getOrientation() == SimpleWidgetGroup.VERTICAL) {
                    reorderBds.x = bounds.x;
                    reorderBds.y = bounds.y + bounds.height;
                } else if (lastGroup.getOrientation() == SimpleWidgetGroup.HORIZONTAL) {
                    reorderBds.x = bounds.x + bounds.width;
                    reorderBds.y = bounds.y;
                }
                reorderBds.x = PrecisionUtilities.round(reorderBds.x * zoom);
                reorderBds.y = PrecisionUtilities.round(reorderBds.y * zoom);
                reorderBds.width = PrecisionUtilities.round(reorderBds.width * zoom);
                reorderBds.height = PrecisionUtilities.round(reorderBds.height * zoom);
                return reorderBds.contains(x, y);
            }
        }
    }
    return false;
}