Menu ▾ ▴

Tree [12162f] master /
 History

HTTPS git://
HTTPS access

File Date Author Commit
 BW.svg 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 COPYING 2019-01-19 phixi phixi [84c0b9] v_1.00 - cleared references, added README, lice...
 FBW.svg 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 FFW.svg 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 FW.svg 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 README 2019-01-19 phixi phixi [12162f] v_1.00 - renamed identifiers
 home.svg 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 index.php 2019-01-19 phixi phixi [84c0b9] v_1.00 - cleared references, added README, lice...
 walkui.css 2019-01-19 phixi phixi [d8bd60] Initial commit - v_1.00
 walkui.js 2019-01-19 phixi phixi [b73146] v_1.00 - renamed identifiers

Read Me

              W a l k U I

        Walkable User Interface
                v 1.00

            (c) PhiXi, mmXIX


    BASICS
   ********
The framework creates two 'Panels' as horizontal scrollviews rotated into POV perspective. The Panels form two side walls, right and left, of a 'Corridor' the user can walk through (forwards/backwards).
Panels contain 'Racks' with fixed width; right and left Panel contain equal amount of racks, resulting in identical scroll widths for both Panels.
Upon click on a Rack, the Corridor is scrolled to the Rack's position and the Rack flipped out. The flipped rack is highlighted on the panel. The flipped rack covers 50% width. Racks flip in again when a clicked again. Both a left and a right rack or only one or no rack can be flipped out. When a rack is flipped out, its content changes to reflect the content of the <div class='rack_detail'></div> element.
Navigation buttons are aligned vertically and positioned in the center of the view. The arrow buttons allow for go forwards/backwards and fast-forwards/fast-backwards. The central home button scrolls back completely.


    REQUIREMENTS
   **************
Include this file 'walkui.js' in the <head> section of the HTML page and include stylesheet 'walkui.css'. This provides basic navigation and does not require own application-level JS.
If the application uses own JS that accesses WUI elements, the code must be included in a <script> tag appended after <body>. The applicaton-level code must implement an 'onCreate(wui)' callback function, wherein the WUI elements can be accessed using 'wui'.


    USAGE
   *******
The HTML source should follow the template given below. Insert content only in divs with class 'rack'. As left and right Panels have same length and Racks have fixed width, both Panels must contain same number of Racks. If the HTML specifies different numbers of Racks in left and right Panel, the framework will fill up the shorter Panel with propriate number of empty Racks.


<!-- WalkUI HTML template -->
    <html>
        <head>
            <link rel="stylesheet" href="walkui.css">
            <script type="text/javascript" src="walkui.js"></script>
        </head>
        <body>
            <div class="wui-panels">
            
                <div class="wui-panel-left">    <!-- must contain exactly as many 'racks' as 'rack-details' in 'panel-flip-left' -->
                    <div class="wui-rack">
                        <!-- RACK CONTENT WHEN FLIPPED IN -->
                    </div>
                    <div class="wui-rack">
                        <!-- RACK CONTENT WHEN FLIPPED IN -->
                    </div>
                </div>
                <div class="wui-panel-flip-left">   <!-- must contain exactly as many 'rack-details' as 'racks' in 'panel-left' -->
                    <div class="wui-rack-detail">
                        <!-- RACK CONTENT WHEN FLIPPED OUT -->
                    </div>
                    <div class="wui-rack-detail">
                        <!-- RACK CONTENT WHEN FLIPPED OUT -->
                    </div>
                </div>
                
                <div class="wui-panel-right">   <!-- must contain exactly as many 'racks' as 'rack-details' in 'panel-flip-right' -->
                    <div class="wui-rack">
                        <!-- RACK CONTENT WHEN FLIPPED IN -->
                    </div>
                    <div class="wui-rack">
                        <!-- RACK CONTENT WHEN FLIPPED IN -->
                    </div>
                </div>
                <div class="wui-panel-flip-right">  <!-- must contain exactly as many 'rack-details' as 'racks' in 'panel-right' -->
                    <div class="wui-rack-detail">
                        <!-- RACK CONTENT WHEN FLIPPED OUT -->
                    </div>
                    <div class="wui-rack-detail">
                        <!-- RACK CONTENT WHEN FLIPPED OUT -->
                    </div>
                </div>
                
            </div>
        </body>
        <!-- optional: -->
        <script>
            onCreate = function( wui ){
                wui.panelLeft.select(2);
                wui.panelRight.select(1);
                wui.go.fw(100);
            };
        </script>
    </html>
<!-- EOF -->
MongoDB Logo MongoDB