• #TakeLessons Booking Monitor#

  • Setup

  • Data

  • Display

  • Milestones

  • Team Breakdown

  • Computer

  • Accessibility

  • Storage

  • Input

  • Output

  • Booking Cards

  • Map

  • Running Graph

  • Filtering Controls

  • Social Media

  • Primary Objective

    • Display booking cards
    • Add the SVG map
    • Add map marker icons when a new card is added, matched by a swatch color
  • Secondary Objective

    • Make the booking monitor fill up with more data
    • Add animations to booking cards and map icons
    • Add a running graph below the map
  • Tertiary Objective

    • Add filters to the page
    • Create a screen that allows you to see social media interaction
    • Make it run through the screens like a slideshow
  • The project can be broken down in the following manner:

  • API/Backend Development

  • Front-end: Card Development

  • Front-end: Map and Coordination Development

  • Minimum requirements

    The machine will most likely run best on Ubuntu, with a decent graphics card to handle the CSS3 rendering that we may potentially do.

  • Display Requirements

    Aiming to display on a computer that’s at least 720P

  • This will only be accessible internally (just like Maestro). It can be accessed by anyone in the office.

  • We will be storing this data into the reporting table, where it will store the following information:

    • created_at (timestamp)
    • student_name (string)
    • category (string)
    • service (string)
    • city (string)
    • state (string)
    • lat (float)
    • lng (float)
    • product_loc_type (string)
    • teacher_name (string)
    • teacher_photo_url (string)
  • The information will be added when they are booked via Public and Maestro

  • First Iteration:

    Pull from the Sale ETL

    Second Iteration:

    Create a new machine/storage-location to store these smaller records.

  • If filtering our data, we can fetch the data in any way we want. There are the optional filters we can have:

    • Number of cards
    • Category
    • Service
    • Date-range
  • This is the data we’ll output to the display, in a JSON format that can be fetched asynchronously

    id (int),
    student: {
      name (string), 
    },
    teacher: {
      name (string),
      photo_url (string)
    },
    lesson: {
      category (string),
      service (string),
    },
    location: {
     product_loc_type (string),
     lesson_duration (string),
     lat (float),
     lng (float),
     city (string),
     state (string)
    },
    created_at (timestamp)
  • Design

    The cards will be sorted in a FIFO format.

    The most recent card will be the largest card, while other cards will shrink down as they are pushed down

  • Animation

    The cards should have these requirements:

    • Shows for at least 10 seconds.
    • Shows for at most 60 seconds.
    • Sliding animation
    • Active card must be the largest card

    If there are cards queued up, divide up the time of the cards with this simple algorithm:

    tMin = Min time of cards = 10 sec.
    tMax = Max time of cards = 60 sec.
    total = Total Cards = Actively displayed Card + Queued Cards

    timePerCard = max(tMax / total - 5), tMin);

    The “5” is the threshold to start doing this algorithm. For instance, we want to make sure we don’t burn through 5 cards immediately. We’ll start using this algorithm after having gained 5 total cards so it gives the illusion that we are still generating bookings.

  • Factors

    There are 3 factors that have been identified when adding a new card:

    • How many new cards are being backed up while a card is being shown
    • How new/old the card is (Waiting to show a card that’s 1 hour out is probably not a good idea)
    • How often the ETL is updated (20 minutes)
  • Design

    The map will be an SVG image that will be measured precisely so that map markers can be coordinated on it. It must be scalable to be used on any browser, especially an HDTV.

  • Icons

    Icons will be placed relative to the map.
    Additional effects may be added to make icons look more apparent that it has just been placed.

    Icons must be:

    • Addable
    • Removable
    • Color coded
    • Associated to a card
    • Show a motion effect when being added and removed
  • Imagery

    Represent each map marker with these symbols (All from the font Elusive)

    In-Home: http://www.fontello.com/#search=road
    In-Studio: http://www.fontello.com/#search=home
    Online: http://www.fontello.com/#search=desktop

  • Animation

    Additionally, when a map icon is added, it can create a nice effect where the map tilts based on where the icon hits on the map.

  • 48 States, plus the other 2.

    Additional kudos points if we can add Hawaii and Alaska into the corner of the screen, and having icons drop into there. Otherwise, ignore the icons.

  • Design

    The graph will show the number of sales per hour over the course of 24 hours

  • Allow the user to be able to apply filters to the map, with the provided inputs

  • Design

    Show a running page of social media from Facebook, Twitter, Instagram, and g+ on a separate “screen”

  • This person will be expected to create an API that will output expected parameters for the front-end developer to use. They also must create an interface for the front-end developer to grab the formatted data from.

    Additional: They must be able to hook this into places that generate booking, and store the data into the database.

  • This person will be responsible for stubbing out data until the API/Backend developer is able to send data with the expected parameters.

    They will also manage the card algorithm system as well.

  • The map developer will be responsible for the coordination of pin icons on a vector-based map. They will need to need to be able to create a library that will allow the front-end card developer to add and remove pins.

{"cards":[{"_id":"417ebf3a80f2ac27de000082","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":null,"content":"#TakeLessons Booking Monitor#"},{"_id":"41dadd0fccb988130c000023","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1.5,"parentId":null,"content":"##Setup##"},{"_id":"41dadd57ccb988130c000024","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41dadd0fccb988130c000023","content":"###Computer###"},{"_id":"41daddabccb988130c000025","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41dadd57ccb988130c000024","content":"####Minimum requirements####\nThe machine will most likely run best on Ubuntu, with a decent graphics card to handle the CSS3 rendering that we may potentially do. "},{"_id":"41dae0a3ccb988130c000027","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"41dadd57ccb988130c000024","content":"####Display Requirements####\nAiming to display on a computer that's at least 720P"},{"_id":"41dadfe6ccb988130c000026","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"41dadd0fccb988130c000023","content":"###Accessibility###"},{"_id":"41dae295ccb988130c000028","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41dadfe6ccb988130c000026","content":"This will only be accessible internally (just like Maestro). It can be accessed by anyone in the office."},{"_id":"417ec4d080f2ac27de000084","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":null,"content":"##Data##"},{"_id":"417ed0da80f2ac27de000085","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417ec4d080f2ac27de000084","content":"###Storage###"},{"_id":"417ed37d80f2ac27de000089","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417ed0da80f2ac27de000085","content":"We will be storing this data into the __reporting table__, where it will store the following information:\n\n- created_at (timestamp) \n- student_name (string)\n- category (string)\n- service (string)\n- city (string)\n- state (string)\n- lat (float)\n- lng (float)\n- product_loc_type (string)\n- teacher_name (string)\n- teacher_photo_url (string)"},{"_id":"417f74fabd28b283cf000024","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"417ed0da80f2ac27de000085","content":"The information will be added when they are booked via Public and Maestro"},{"_id":"41dc08723d78bcf75f000033","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":3,"parentId":"417ed0da80f2ac27de000085","content":"####First Iteration:####\nPull from the Sale ETL\n\n####Second Iteration:####\nCreate a new machine/storage-location to store these smaller records."},{"_id":"417f015b80f2ac27de000093","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1.5,"parentId":"417ec4d080f2ac27de000084","content":"###Input###"},{"_id":"417f01b980f2ac27de000094","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417f015b80f2ac27de000093","content":"If filtering our data, we can fetch the data in any way we want. There are the optional filters we can have:\n\n- Number of cards\n- Category\n- Service\n- Date-range"},{"_id":"417ed2ac80f2ac27de000087","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"417ec4d080f2ac27de000084","content":"###Output###"},{"_id":"417ef50a80f2ac27de000090","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417ed2ac80f2ac27de000087","content":"This is the data we'll output to the display, in a JSON format that can be fetched asynchronously\n\n```\nid (int),\nstudent: {\n name (string), \n},\nteacher: {\n name (string),\n photo_url (string)\n},\nlesson: {\n category (string),\n service (string),\n},\nlocation: {\n product_loc_type (string),\n lesson_duration (string),\n lat (float),\n lng (float),\n city (string),\n state (string)\n},\ncreated_at (timestamp)\n```"},{"_id":"417edd70dab571b7a000002c","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2.5,"parentId":null,"content":"##Display##"},{"_id":"417ef92880f2ac27de000091","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":0.25,"parentId":"417edd70dab571b7a000002c","content":"###Booking Cards###"},{"_id":"417f2d5e80f2ac27de00009a","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1.5,"parentId":"417ef92880f2ac27de000091","content":"####Design####\nThe cards will be sorted in a FIFO format. \n\nThe most recent card will be the largest card, while other cards will shrink down as they are pushed down"},{"_id":"41daffbbccb988130c000029","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1.75,"parentId":"417ef92880f2ac27de000091","content":"####Animation####\nThe cards should have these requirements:\n- Shows for at least 10 seconds.\n- Shows for at most 60 seconds.\n- Sliding animation\n- Active card must be the largest card\n\nIf there are cards queued up, divide up the time of the cards with this simple algorithm:\n\n**tMin** = Min time of cards = 10 sec.\n**tMax** = Max time of cards = 60 sec.\n**total** = Total Cards = Actively displayed Card + Queued Cards\n\n**timePerCard** = max(**tMax** / **total** - 5), **tMin**);\n\nThe \"5\" is the threshold to start doing this algorithm. For instance, we want to make sure we don't burn through 5 cards immediately. We'll start using this algorithm after having gained 5 total cards so it gives the illusion that we are still generating bookings.\n\n\n"},{"_id":"417f1bf080f2ac27de000096","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"417ef92880f2ac27de000091","content":"####Factors####\nThere are 3 factors that have been identified when adding a new card:\n- How many new cards are being backed up while a card is being shown\n- How new/old the card is (Waiting to show a card that's 1 hour out is probably not a good idea)\n- How often the ETL is updated (20 minutes)"},{"_id":"417ee28cdab571b7a000002e","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":0.5,"parentId":"417edd70dab571b7a000002c","content":"###Map###"},{"_id":"417ededbdab571b7a000002d","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417ee28cdab571b7a000002e","content":"####Design####\nThe map will be an SVG image that will be measured precisely so that map markers can be coordinated on it. It must be scalable to be used on any browser, especially an HDTV."},{"_id":"417ee4e0dab571b7a0000030","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"417ee28cdab571b7a000002e","content":"####Icons####\nIcons will be placed relative to the map.\nAdditional effects may be added to make icons look more apparent that it has just been placed.\n\nIcons must be:\n- Addable\n- Removable\n- Color coded\n- Associated to a card\n- Show a motion effect when being added and removed"},{"_id":"41e90f575aa27a539d000035","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2.25,"parentId":"417ee28cdab571b7a000002e","content":"####Imagery####\nRepresent each map marker with these symbols (All from the font Elusive)\n\nIn-Home: http://www.fontello.com/#search=road\nIn-Studio: http://www.fontello.com/#search=home\nOnline: http://www.fontello.com/#search=desktop"},{"_id":"41dbeb993d78bcf75f000032","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2.5,"parentId":"417ee28cdab571b7a000002e","content":"####Animation####\nAdditionally, when a map icon is added, it can create a nice effect where the map tilts based on where the icon hits on the map."},{"_id":"41db5ffdcab101b148000036","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":3,"parentId":"417ee28cdab571b7a000002e","content":"####48 States, plus the other 2.####\nAdditional kudos points if we can add Hawaii and Alaska into the corner of the screen, and having icons drop into there. Otherwise, ignore the icons."},{"_id":"417f229480f2ac27de000097","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":4,"parentId":"417edd70dab571b7a000002c","content":"###Running Graph###"},{"_id":"417f519cbd28b283cf00001b","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417f229480f2ac27de000097","content":"####Design####\nThe graph will show the number of sales per hour over the course of 24 hours"},{"_id":"417f254680f2ac27de000098","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":5,"parentId":"417edd70dab571b7a000002c","content":"###Filtering Controls###"},{"_id":"417f25a680f2ac27de000099","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417f254680f2ac27de000098","content":"Allow the user to be able to apply filters to the map, with the provided inputs"},{"_id":"417f5894bd28b283cf00001f","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":6,"parentId":"417edd70dab571b7a000002c","content":"###Social Media###"},{"_id":"417f58ffbd28b283cf000020","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417f5894bd28b283cf00001f","content":"####Design####\nShow a running page of social media from Facebook, Twitter, Instagram, and g+ on a separate \"screen\""},{"_id":"417f54eebd28b283cf00001c","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2.75,"parentId":null,"content":"##Milestones##"},{"_id":"417f5587bd28b283cf00001d","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"417f54eebd28b283cf00001c","content":"###Primary Objective###\n- Display booking cards\n- Add the SVG map\n- Add map marker icons when a new card is added, matched by a swatch color"},{"_id":"417f6202bd28b283cf000021","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"417f54eebd28b283cf00001c","content":"###Secondary Objective###\n- Make the booking monitor fill up with more data\n- Add animations to booking cards and map icons\n- Add a running graph below the map\n"},{"_id":"417f6685bd28b283cf000022","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":3,"parentId":"417f54eebd28b283cf00001c","content":"###Tertiary Objective###\n- Add filters to the page\n- Create a screen that allows you to see social media interaction \n- Make it run through the screens like a slideshow"},{"_id":"41db4353cab101b14800002d","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2.875,"parentId":null,"content":"##Team Breakdown##"},{"_id":"41db43aecab101b14800002e","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41db4353cab101b14800002d","content":"The project can be broken down in the following manner:\n"},{"_id":"41db44f2cab101b14800002f","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":2,"parentId":"41db4353cab101b14800002d","content":"###API/Backend Development###"},{"_id":"41db4955cab101b148000034","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41db44f2cab101b14800002f","content":"This person will be expected to create an API that will output expected parameters for the front-end developer to use. They also must create an interface for the front-end developer to grab the formatted data from.\n\nAdditional: They must be able to hook this into places that generate booking, and store the data into the database. "},{"_id":"41db450bcab101b148000030","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":3,"parentId":"41db4353cab101b14800002d","content":"###Front-end: Card Development###"},{"_id":"41db471acab101b148000033","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41db450bcab101b148000030","content":"This person will be responsible for stubbing out data until the API/Backend developer is able to send data with the expected parameters. \n\nThey will also manage the card algorithm system as well."},{"_id":"41db458fcab101b148000031","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":4,"parentId":"41db4353cab101b14800002d","content":"###Front-end: Map and Coordination Development###"},{"_id":"41db5341cab101b148000035","treeId":"417ebf2d80f2ac27de000080","seq":1,"position":1,"parentId":"41db458fcab101b148000031","content":"The map developer will be responsible for the coordination of pin icons on a vector-based map. They will need to need to be able to create a library that will allow the front-end card developer to add and remove pins."}],"tree":{"_id":"417ebf2d80f2ac27de000080","name":"TL Real-Time Booking Monitor","publicUrl":"tl-real-time-booking-monitor"}}