gizra / cdl Goto Github PK

View Code? Open in Web Editor NEW

13.0 13.0 1.0 365.36 MB

Casa del Lector

Home Page: http://gizra.github.io/CDL/

Ruby 0.10% JavaScript 84.00% CSS 6.10% HTML 9.79%

cdl's People

Contributors

Stargazers

Watchers

Forkers

jmdall

cdl's Issues

handle chronological nodes

some nodes have children which should be displayed chronologically, ie 1st child, 2nd child etc. for example:

we detect & order these by the node title - when the title begins with :1: it's the first child, :2: is the 2nd etc.

handle "bastard" nodes

some nodes are children of a node but we dont want to show them like the normal children. we call them "bastard" nodes, and they show as hollow circle (see #14).

a bastard node is signified by :_: in the beginning of the title.

bastard nodes may have children of their own - we still need to get visual representation of that.

currently it seems like the tree view uses just a portion of the page:
<rect id="backgroud" width="960" height="500" style="fill: #ffffff;"></rect>
can we make it use the whole page (and be centered)?

Prepare node content in JSON from Brain's XML.

via idA and idB we reach Entry

<Entry>
  <guid>49A12098-E17B-065E-FA93-4A4F4EDB1EBD</guid>
  <EntryObjects>
    <EntryObject>
      <objectType>0</objectType>
      <objectID>5F686845-0FE0-05B2-DA4E-F175EF995458</objectID>
    </EntryObject>
  </EntryObjects>
  <body>&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0
    Transitional//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&amp;quot;&amp;gt;
    &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;
    &amp;lt;head&amp;gt;
    &amp;lt;meta name=&amp;quot;generator&amp;quot; content=&amp;quot;EditLive!
    7.6.2.10&amp;quot; /&amp;gt;
    &amp;lt;meta name=&amp;quot;generator&amp;quot; content=&amp;quot;TheBrain
    7.0.4.5&amp;quot; /&amp;gt;
    &amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html;
    charset=UTF-8&amp;quot; /&amp;gt;
    &amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
    &amp;lt;!--
    body {
    font-family: Arial; font-size: small; background: #ffffff; color:
    #000000;
    }
    p {
    margin-top: 0pt; margin-bottom: 0pt;
    }
    --&amp;gt;
    &amp;lt;/style&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
    &amp;lt;p&amp;gt;One of the most distinct characteristics of the Nazi
    regime was its ideology of the&amp;amp;#160; supremacy of the Aryan race
    and its detestation of the Jews and other groups. In 1942, in the
    Wannsee conference, the Nazis decided to implement a plan called the
    &amp;#8220;Final Solution of the Jewish Question&amp;#8221;. After that
    the Jews of Europe were systematically murdered in the extermination
    camps as part of the Final Solution. In some of the camps permanent gas
    chambers were erected.&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;By 1945 6,000,000 Jews, the majority of the Jews in
    Europe, were dead.&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;For more on the Holocaust follow the link to Yad Vashem&amp;apos;s
    website.&amp;lt;/p&amp;gt;
    &amp;lt;/body&amp;gt;
    &amp;lt;/html&amp;gt;
  </body>
  <format>HTML</format>
  <creationDateTime>2013-10-15 15:06:26.000 @+0200</creationDateTime>
  <modificationDateTime>2013-10-27 16:53:25.386 @+0200
  </modificationDateTime>
</Entry>

<body> - the text. Keep only <a>

All the fonts

are here: https://drive.google.com/file/d/0B7Lzf69iarhdaG5zVXpaRWc5bVE/edit?usp=sharing

node colors/graphics in the display view

NOTE: Updated the bottom image to include bastard node

double click doesn't work on Firefox

when clicking on a node in the map view in FF, nothing happens (works fine on Chrome)

lower priority for now

Broken links pages in production

URL don't exist
http://gizra.github.io/pages/0711F4D9-F275-9116-0C43-AE1B48ADAD97.html

Good url link.
http://gizra.github.io/CDL/pages/0711F4D9-F275-9116-0C43-AE1B48ADAD97.html

check text encoding

we need to standardize on utf-8 - not sure which enc we're getting from the brain

see http://gizra.github.io/CDL/pages/05C16366-E98F-8859-A0D8-AA8FE3251A80/index.html

add imagemin to grunt build

Move the parse logic to grunt file.

Move the parsing logic from the application script, to a task in Gruntfile.js.

only the focused node should be red

cc @amitaibu removing the red lines for brothers etc - we'll just show the focused node as red

allow deep linking to the tree

in the exhibition, there will be QR codes which users will scan and get a URL from.

that URL will place the user in the tree view, focused on a certain item.

this means we need to allow linking to a particular item in the view - ie, in addition to linking to an item page (eg /page/some-item) we'd also have a URL for /#item/some-time which goes to the tree view.

let me know if the above isn't clear :)

Add zoom + click to center

http://bl.ocks.org/mbostock/2206340

handle clicking a node on a touch screen

cc @amitaibu at the moment we need to double click a node to see its content page. that's the correct behavior - but it doesn't work on a touch screen.

it needs to work as follows: first click zooms on the node, 2nd click opens the content page.

show the tree in circular format instead of top down

we want the network to look like a "solar system" rather than a tree. in order to achieve this, instead of using a top->bottom we'll display the nodes as a circle. Here's an example:

note that the big circles are the top children (ie the sons of the core node). the circles that connect everything together (give it the "solar system" look) are mostly there for design reasons, we can handle them later on.

Selected Path

How the red path is defined, according the selected node?

Representation of the children not chronological in a chronological node

How will be the style and representation?

Siblings nodes

@niryariv
We need to clarify, if the brother nodes "black nodes in the same orbit" will be expand when the nodes one node of the orbit is selected.

Could have children the bastard nodes?

changes to the view

cc @amitaibu

we return to the old tree view
when an element is focused (one click), show the "on focus" view (don't show cousins) as in #14
once the user zooms out at any level we show cousins

Modify gruntfile to test locally like production.

Need to set a folder "CDL" in the build process with the command grunt server:dist

URL production.
http://gizra.github.io/CDL/

URL test dist locally.
http://127.0.0.1:9000/CDL/

Issue #26 realated

Setup domain

@niryariv we need to get the domain they want it, and setup an A record and add CNAME

Fix the zoom behaviour with mouse wheel

Maintain the zoom after zoom in or out.
In the zoom behaviour keep the center point.
Maintain the zoom scale after a drag behaviour.

import new brain

https://drive.google.com/a/mail.huji.ac.il/folderview?id=0B5SoTrS1W53QMEcxT1F6UC1UbUE&usp=sharing

https://drive.google.com/a/gizra.com/file/d/0B7Lzf69iarhdbkNfc3hMOGdTWVE/edit?usp=sharing

Create a task CDL to call the subtasks

Modify the actual Gruntfile.js and reorder the actual tasks of CDL (CDL. cdlPrepare and generate) and reorder:

Name task: CDL
Subtasks:

CDL:parse
CDL:prepare
CDL: generate

Example to call with grunt:

grunt CDL:prepare

There are titles too long for the circle in the page.

Spec:
כותרת ראשית. הכותרת הראשית היא בעיגול אדום, בקוטר 270 פיקסלים
גודל פונט 50px, צבע לבן

What suggest to do, in this cases?

use big brain file as basis

I uploaded a new XML file which consists of 5 brains merged into one - suggest we use this as the base XML, as this is the most updated we have and should include cases like chrono + children etc

https://drive.google.com/file/d/0B7Lzf69iarhdaVA4MjlVTDh5enM/edit?usp=sharing

Add Ligthbox when click images

we can use this library:
https://github.com/jackmoore/colorbox

Children of chronological nodes

chronological nodes can have children (but not grandchildren)
the child of chrono is displayed as a show/hide folder in the content page, as seen below
we still need to get a representation for how they are displayed in the map view

More than 1 root in the XML data

We found elements in the xml data (Example: National Library of Israel) that not are under the principal root "Torah+Basch 10.11.13"

@niryariv Could you indicate what is the design of the data in the diagram, expected by the client?

thanks

need spec for the sidebar titles in the content pages

see here:

move focus as the map moves

currently, to focus on a node (ie show it red) the user needs to click on it.

we want to experiment with a new method: as the user moves the map, the node that's centered.

to implement, we'll define a circle in the center of the screen, with a certain radius (say 200px?). when a node is on that field, we consider it focused. if there's more than one node on that field, we'll consider the one closest to the center as focused.

@amitaibu @ceoaliongroo what do you think? sounds doable?

Text inside nodes require multiline and masked.

Check clipping a shape with fill the text.

references:
http://bl.ocks.org/mbostock/3151318
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Text

Create pages only for non-chronological points

Chronological points and their children will be under the parent point.

Prepare Jekyll pages from Brain's XML

related to #1

Prepare JSON from Brain's XML

<Thought>
  <guid>5F686845-0FE0-05B2-DA4E-F175EF995458</guid>
  <name>The Holocaust</name>
  <label>&amp; ... #1501;
  </label>
  <creationDateTime>2013-10-15 14:30:22.000 @+0200</creationDateTime>
  <realModificationDateTime>2013-10-20 16:17:47.000 @+0200
  </realModificationDateTime>
  <displayModificationDateTime>2013-10-27 16:53:25.387 @+0200
  </displayModificationDateTime>
  <activationDateTime>2013-11-03 16:57:19.993 @+0200</activationDateTime>
  <linksModificationDateTime>2013-11-03 17:00:29.592 @+0200
  </linksModificationDateTime>
  <isType>0</isType>
  <color>0</color>
  <accessControlType>0</accessControlType>
</Thought>

via guid we reach the Link:

<Link>
  <guid>1D45C65C-6B66-4666-4A1D-546F8593C55F</guid>
  <idA>5F686845-0FE0-05B2-DA4E-F175EF995458</idA>
  <idB>72F39E01-4AA4-B0F0-A73F-6A5A2A39C293</idB>
  <dir>2</dir>
  <isBackward>0</isBackward>
  <name></name>
  <labelForward></labelForward>
  <labelBackward></labelBackward>
  <creationDateTime>2013-11-03 17:00:21.214 @+0200</creationDateTime>
  <modificationDateTime>2013-11-03 17:00:29.590 @+0200
  </modificationDateTime>
  <isType>0</isType>
  <color>0</color>
  <thickness>0</thickness>
  <strength>0</strength>
  <meaning>0</meaning>
  <linkTypeID>A612649B-7311-4A04-D5F9-0D53879CACE3</linkTypeID>
</Link>

<idA> and <idB> describe reference between 2 Thought
<dir> - direction (father, son, sibling, bastard)
<linkTypeID>

via idA and idB we reach Entry

<Entry>
  <guid>49A12098-E17B-065E-FA93-4A4F4EDB1EBD</guid>
  <EntryObjects>
    <EntryObject>
      <objectType>0</objectType>
      <objectID>5F686845-0FE0-05B2-DA4E-F175EF995458</objectID>
    </EntryObject>
  </EntryObjects>
  <body>&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0
    Transitional//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&amp;quot;&amp;gt;
    &amp;lt;html xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;
    &amp;lt;head&amp;gt;
    &amp;lt;meta name=&amp;quot;generator&amp;quot; content=&amp;quot;EditLive!
    7.6.2.10&amp;quot; /&amp;gt;
    &amp;lt;meta name=&amp;quot;generator&amp;quot; content=&amp;quot;TheBrain
    7.0.4.5&amp;quot; /&amp;gt;
    &amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html;
    charset=UTF-8&amp;quot; /&amp;gt;
    &amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
    &amp;lt;!--
    body {
    font-family: Arial; font-size: small; background: #ffffff; color:
    #000000;
    }
    p {
    margin-top: 0pt; margin-bottom: 0pt;
    }
    --&amp;gt;
    &amp;lt;/style&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
    &amp;lt;p&amp;gt;One of the most distinct characteristics of the Nazi
    regime was its ideology of the&amp;amp;#160; supremacy of the Aryan race
    and its detestation of the Jews and other groups. In 1942, in the
    Wannsee conference, the Nazis decided to implement a plan called the
    &amp;#8220;Final Solution of the Jewish Question&amp;#8221;. After that
    the Jews of Europe were systematically murdered in the extermination
    camps as part of the Final Solution. In some of the camps permanent gas
    chambers were erected.&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;By 1945 6,000,000 Jews, the majority of the Jews in
    Europe, were dead.&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;For more on the Holocaust follow the link to Yad Vashem&amp;apos;s
    website.&amp;lt;/p&amp;gt;
    &amp;lt;/body&amp;gt;
    &amp;lt;/html&amp;gt;
  </body>
  <format>HTML</format>
  <creationDateTime>2013-10-15 15:06:26.000 @+0200</creationDateTime>
  <modificationDateTime>2013-10-27 16:53:25.386 @+0200
  </modificationDateTime>
</Entry>

<body> - the text. Keep only <a>

<Attachment>
  <guid>0F1A495D-CD86-6FD4-FB2B-EF7080D63A18</guid>
  <AttachmentEntries>
    <attachmentEntryID>49A12098-E17B-065E-FA93-4A4F4EDB1EBD
    </attachmentEntryID>
  </AttachmentEntries>
  <objectID>5F686845-0FE0-05B2-DA4E-F175EF995458</objectID>
  <name>Twin Holocaust survivors describe arriving at Auschwitz</name>
  <attachmentType>3</attachmentType>
  <location>http://www.youtube.com/watch?v=MWJyjAYyF8E</location>
  <dataLength>0</dataLength>
  <format></format>
  <creationDateTime>2013-10-15 15:06:26.973 @+0200</creationDateTime>
  <modificationDateTime>2013-10-15 15:06:27.306 @+0200
  </modificationDateTime>
</Attachment>

<attachmentType> - link or file
<objectID> - connection to a Thought
< location> - can be a media file (e.g. image) or link (e.g. youtube)

Fix home link in the "pages/[guid]" pages.

When click in the link "Home" not reload the tree.

Trigger setFocus() event onChange url.

In the chart when the url #/[guid] change the guid.

Look up the element with the node.guid and focus on it.

Add Jekyll and gh-pages

This task is about moving logic into jekyll, so we can use grunt gh-pages to push our builds to Github pages.

create splash page

when the user scans a QR or enters a URL, they will this page as a splash page - the scanned item & some links. once everything was loaded they are moved to the normal view:

Create grunt taks to sanitize the node.location property

Need to remove '[' and ']' characters from filename of attachment and the The Brain data automatically.

Because, an error with usemin:htmlmin.

Fonts in production

Fix fonts path url in production, in css file.

import attachments from Brain ZIP

zip file from Shay is here - seems to contain the entire dir structure

Prepare design according to Bootstrap grid system

@niryariv If we want the design to be responsive it is highly recommended to stick to a proper grid system. Like this we won't need to define width and margins, as doing it is wrong -- since we are not dealing with a fix layout.

Line/circle styling

all lines are black 3px, except:

brothers: red
bastard: 1px
chrono sons: like above, 13px apart

Circles:

focused node: 220px diameter, red
father/son: 25px diameter, black
brother: 25px diameter, red

Between parents & all sons a light grey (#f5f5f5) triangle

Add README

@niryariv we can add some background and explanation about the project, and credits

@ceoaliongroo add the basic steps needed for installation (shouldn't be more than a few lines)

Requirements:
ruby 1.9
node 10
Bundler (gem install bundler)

bundle install
npm install
bower install

Font Styling

see here

everything is Miso font, uppercase only, black & left aligned unless stated otherwise.

focused node: white, bold, font size 35px, line height 43px. should be inside a 150x120px box

parent/son: font size 19px, line height 22px, max width 150px

brother: like parent/son, color red. below the circle in a 110x60px box

bastard: like parent/son, font weight light

chrono son: 19px font size, bold, centered

final design for content page

cc @amitaibu

https://drive.google.com/a/gizra.com/file/d/0B7Lzf69iarhddGk4MHllaUJUOEk/edit?usp=sharing

note the the embeds will be 3rd party (ie look like the provider, rather than the design here) - youtube & soundcloud

The Brain data have styles, need to removed to avoid styling issues.

Remove tag and maintain the content from the brain data.

<p align="&quot;justify&quot;">
  <font face="&quot;Calibri," serif&quot;="">After the war was over the Scroll was returned to the few survivors of the 
    community, and the honorary president of the community, Mr. Moshe Sauriano gave them to the Ben Atar family, to 
    be brought to the NLI, in memory of the Jews from Rhodes who were exterminated.
  </font>
</p>

Some data need extra style for chronological children.
Example:
http://gizra.github.io/CDL/pages/B45441E4-0097-0317-6BDB-FD5F59E44DDA/

<ul type="&quot;circle&quot;">
<li>Born in Cordoba in 1138, Maimonides grew up during &nbsp;the rule of the Berber dynasty&nbsp; of the <i>Murabitun</i> (Almoravids). Under their rule the Jewish and the Christian communities&nbsp; were protected according to Muslim law.</li>
</ul>

i think it's related with the style in the the brain data. Issue related #67