jQuery-ui horizontal menu made easy

This is some code for building a jquery ui horizontal menu. It is based on code by https://codepen.io/seungjaeryanlee/ and modified for icon support and to create a menu automatically from a JSON schema. It’s pretty useful for HTML5 app development.

menu created from JSON
Menu created from JSON schema

HTML

This is how the menu would look be structured if just coded in html

<ul id="menubar">
  <li><div class="icon"><span class="ui-icon ui-icon-folder-open"></span><a href="#">Alpha</a></div>
     <ul>
      <li><div><a href="#">Beta 1</a></div></li>
      <li>
        <div class="icon"><span class="ui-icon ui-icon-folder-open"></span><a href="#">Beta 2</a></div>
        <ul>
          <li><div class="icon"><span class="ui-icon ui-icon-folder-open"></span><a href="#">Beta 2a</a></div></li>
          <li><div><a href="#">Beta 2b</a></div></li>
        </ul>
      </li>
      <li><div><a href="#">Beta 3</a></div></li>
    </ul>
  </li>
  <li>
    <div><a href="#">Beta</a></div>
    <ul>
      <li><div><a href="#">Beta 1</a></div></li>
      <li>
        <div><a href="#">Beta 2</a></div>
        <ul>
          <li><div><a href="#">Beta 2a</a></div></li>
          <li><div><a href="#">Beta 2b</a></div></li>
        </ul>
      </li>
      <li><div><a href="#">Beta 3</a></div></li>
    </ul>
  </li>
  <li><div><a href="#">Gamma</a></div></li>
  <li><div><a href="#">Delta</a></div></li>
 </ul>

javascript

menuStructure is the JSON menu descriptor, the code setUpMenuHTML and addMenuHTML create HTML from this schema in the format of the html above.

var menuStructure = {menu: [
                        { name: "file",  
                          menu: [
                              {name: "Open", icon: "ui-icon ui-icon-folder-open"}, 
                              {name: "save", icon: "ui-icon ui-icon-disk"}
                          ]
                         },
                        {name: "ImageProcessing", icon: "ui-icon ui-icon-image",
                         menu: [
                             {name: "Invert"}, 
                             {name: "threshold"}, 
                             {name: "binary", 
                              menu: [
                                    {name: "erode"}, 
                                    {name: "open"}, 
                                    {name: "close"}
                                    ]
                             }
                            ]
                        },
                        {name: "help", icon: "ui-icon ui-icon-help"}
                    ]};
    

function addMenuHTML(ME, $selector)
{
    var $ulOuter = $selector;
    
    if(!$selector.is('#menubar'))
        $ulOuter = $("
    ").appendTo($selector); for(var j=0;j").appendTo($ulOuter); if(ME.menu[j].icon) { str = '
    '+ME.menu[j].name+'
    '; } else{ str = '
    ' + ME.menu[j].name + '
    '; } $(str).appendTo($liInner); // call recursively on nested menu elements if(ME.menu[j].menu) addMenuHTML(ME.menu[j], $liInner); } } function setUpMenuHTML() { var $menu = $('#menubar'); $menu.empty(); addMenuHTML(menuStructure, $menu); } function setUpMenu() { $('#menubar').menu(); $('#menubar').menu({ position: { my: 'left top', at: 'left bottom' }, blur: function() { $(this).menu('option', 'position', { my: 'left top', at: 'left bottom' }); }, focus: function(e, ui) { if ($('#menubar').get(0) !== $(ui).get(0).item.parent().get(0)) { $(this).menu('option', 'position', { my: 'left top', at: 'right top' }); } }, }); } $(document).ready(function() { setUpMenuHTML(); setUpMenu(); });

    css

    the CSS ensures that the menuu is horizonal and that the icons are correctly displayed next to the menu names and that the sub menus also indent correctly

    #menubar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    
    ul > li a{
      max-width:100%;
      color: inherit; /* blue colors for links too */
      text-decoration: inherit; /* no underline */
    }
    
    li > div {
      white-space: nowrap;
      overflow: hidden;
    }
    
    /* Make jQuery UI Menu into a horizontal menubar with vertical dropdown */
    #menubar > li { /* Menubar buttons */
      #text-align: center;
      display: inline-block;
    }
    
    #menubar li > div:not(.icon) {
      padding-left: 0.3em !important;
    }
    
    #menubar li > div.icon {
      padding-left: 1.5em;
    }
    
    #menubar > li > ul > li { /* Menubar buttons inside dropdown */
      display: block;
    }
    
    /* Change dropdown carets to correct direction */
    #menubar > li > div > span.ui-icon-caret-1-e {
      /* Caret on menubar */
      background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px !important;
    }
    #menubar ul li div span.ui-icon-caret-1-e {
      /* Caret on dropdowns */
      background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;
    }

    Welcome to the Ejectamenta website

    Ejectamenta free online HTML5 puzzle games

    This website contains the free online HTML5 puzzle games: MegaTangram (a tangram game), hexpac (a hexominos packing game), Enigmatic puzzle, befuddled and PegSolitare. They work great with any modern browser, However they are sometimes being worked on so may have temporary glitches or present new features from time to time.

    The website is currently being migrated from a CMSMS website, the two CMS systems are quite different, I’m still working on implementing the functionality and some things may not work correctly.

    Hope you enjoy it

    Cheers

    Dave

    HTTPS security of site

    Security of ejectamenta website using SSL and https

    Now main user login, user home page and puzzle pages are secured by SSL/https system. Not all pages are using https however, so check when using the quick login fields by the menu bar if you want to be extra secure. Using https is needed for facebook apps so hopefully the puzzles will soon be available on Facebook as well.


    SSL Certificate

    RhythmSticks Drumming App

    New app that simulates an online drumkit: includes different drum loudness/sound types (ie bell sounds, open hihat), quality drumkit sampling and recording rhythms as a musical score.

    The RhythmSticks app is a simulation of a 5 piece drum kit using quality sampled drum sounds. The sounds have 6 zones of loudness which are increased by hitting the drum near the center (or at the edge for the cymbals). The hihat has partially and fully open sounds and a foot splash or tap, The 24 inch ride cymbal has additional bell sounds. Cymbals are hihat, 18 & 16 inch crashes, 18 & 24 inch rides, 6 inch splash and a 22 inch china.

    Click the metronome and time is started now when you play the drums the score reflects the drums hit and the rhythm played is recorded. To play your recorded score click again on the metronome, you can even add extra beats as it is is being replayed.

    The mouse may not be the best device to play the drums with and by entering the menu (top left button) the keyboard keys can be mapped to the drums

    The WebAudio API used for this app is pretty new technology so you will need a recent browser for the app to work, on a tablet you will probably need a recent model and the latest browser (ie. chrome beta).

    Also available on facebook

    For more information on browser support see: Can I use Web Audio API

    The RhythmSticks drumming app this is what the RhythmSticks drum app looks like

    Printable calendar

    I have made an online printable calendar web application. You can upload a different photo for each month and add custom events like birthdays to the months. The calendar you create from your images can be downloaded as a pdf file for home printing. It can also be installed from the Google Chrome store.

    online printable calendar

    The calendar shows country specific holiday dates and is available (and translated) for the following countries:

    • Australia |
    • Austria |
    • Brazil |
    • Croatia |
    • Czech |
    • Denmark |
    • Discordian |
    • British |
    • Finland |
    • Germany |
    • Iceland |
    • Ireland |
    • Italy |
    • Japan |
    • Netherlands |
    • Norway |
    • Portugal |
    • Romania |
    • SanMarino |
    • Serbia |
    • Slovenia |
    • Spain |
    • Sweden |
    • Turkey |
    • United Nations Organisation |
    • USA |
    • Ukraine |
    • Venezuela |

    * There maybe some errors in the translation – these are due to inconsistencies in the locale packages of PHP frameworks used.

    Visualisation of irrational numbers as vectors

    Beauty in irrationality?

    Plotting irrational numbers (pi, e, sqrt2, golden ratio) as vectors allows their complexity to be visualised

    I have always wanted to visualise irrational numbers. Our brains are capable of recognising patterns in nature and I wanted to know if these patterns could be visualised in irrational numbers, and whether beautiful patterns could be seen that could lead to an further understanding of the irrational nature of the numbers. Just found out after publishing this article that the idea has been round for a while! (here is an interesting blog article). Here I have extended the technique to 3 dimensions for better visualisation and give results and computer code.

    Experimental Technique

    In this experiment the fractional parts of the irrational numbers, pi, e, sqrt2 and golden ratio are transformed into vectors in cartesian space for visualisation purposes. Each digit of the number sequence (from left to right) is transformed into a spatial vector with unit length. The orientation is calculated from the number as: angle = (digit/10)*2*pi. Sine and cosine functions are used to derive a position in the cartesian plane relative to the position of the previous digit (see code below for more details). As the irrational number is described to greater precision its decimal place increases, this occurs on the number string from left to right. As we are traversing the number sequence this corresponds to increasing time steps of the number analysis. On the plots the sequence position of the digit (its decimal place) is colour coded using a heat mapping (blue->red on increasing significant digits). The 3D plots also gives the sequence position of the digit on the Z axis, this helps to separate overlapping sequences in cartesian space.

    Visualisation/Results

    These plots are the results of the analysis, please click them for more detail

    2D plot of pi as vector 3D plot of pi as vector
    Fractional part of pi as a vector (colour blue->red (and Z axis) represents increasing number of decimal places) click to see enlarged image.
    2D plot of pi as vector 3D plot of pi as vector
    Fractional part of goldenratio as a vector (colour blue->red (and Z axis) represents increasing number of decimal places) click to see enlarged image.
    2D plot of pi as vector 3D plot of pi as vector
    Fractional part of sqrt2 as a vector (colour blue->red (and Z axis) represents increasing number of decimal places) click to see enlarged image.
    2D plot of e as vector 3D plot of e as vector
    Fractional part of e (natural logarithm base) as a vector (colour blue->red (and Z axis) represents increasing number of decimal places) click to see enlarged image.

    Here is a vector plot of 1 million random number generated numbers

    2D plot of e as vector 3D plot of e as vector
    Random numbers as a vector (colour blue->red (and Z axis) represents random digits in time generated by the Octave random number generator) click to see enlarged image.

    Data and Matlab/Octave computer code

    Below is the Matlab/Octave code used for generating the plots. Data can be downloaded here: pi, e, golden ratio, sqrt2 (data is without decimal point!)

    function  irrational_number_plot_as_vector(filepathname)
    %   requires file name containing string of irrational number delete decimal point from string ie 3.14... -> 314... 
    
    % read text file containing number
    format = "%1c"
    
    fileID = fopen('pi.txt','r');
    
    p = fscanf(fileID, format);
    
    _p=0;
    
    % convert character string to matlab array
    for i=1:length(p); _p(i)  = str2double(strcat(p(i),".0")); end
    
    % create arrays for plotting
    x_array = zeros(1,length(_p));
    y_array = zeros(1,length(_p));
    
    % polar angle
    for i=2:length(_p); x_array(i) = x_array(i-1)+cos((_p(i-1)/10.0)*2.0*pi); y_array(i) = y_array(i-1)+sin((_p(i-1)/10.0)*2.0*pi); end
    
    % surface plot with z axis and colour blue->red as increased fractional part
    h = surface([x_array(:), x_array(:)], [y_array(:), y_array(:)], [[1:length(_p)]', [1:length(_p)]'], [[1:length(_p)]', [1:length(_p)]'], 'EdgeColor','flat', 'FaceColor','none');
    
    end

    Tablets and mobile phones now supported

    Ejectamenta puzzle games have been tested to be working on a 7 inch Android tablet using the Google Chrome mobile browser

    Ejectamenta.com html5 puzzle games have been tested on a low specification Android tablet using the Google Chrome mobile browser and, although full screen mode is not currently supported with this browser, everything works fine (Opera mini browser however still has some problems with touch screen input). Since full screen mode is not possible, game play can sometimes be tricky (MegaTangram), however the new zooming and panning functionality allows for the accurate placement of pieces.

    Upload tangram image to facebook

    Now you can upload an image featuring your completed tangrams to facebook

    There is a new feature on MegaTangram called “create tangram picture” it is accessible either from the menu or by double clicking on one of your completed tangrams in the top of the screen. You must be logged or have completed some puzzles to add them to the canvas area. Any completed tangrams can be used as stamps and individually resized and re-coloured. An image can also be uploaded and used as the picture background. Once you are happy with the picture it can be send to facebook using the facebook upload button (directly above the zoom control).