add screen shot start on readme

README.md

@@ -1,3 +1,42 @@
+## DLD4E: Decent Looking Diagrams for Engineers
+
+![screenshot](https://github.com/cidrblock/dld4e/raw/master/screenshot.png)
+
+
+## Introduction
+
+At the top of the file there should be a short introduction and/ or overview that explains **what** the project is. This description should match descriptions added for package managers (Gemspec, package.json, etc.)
+
+## Code Example
+
+Show what the library does as concisely as possible, developers should be able to figure out **how** your project solves their problem by looking at the code example. Make sure the API you are showing off is obvious, and that your code is short and concise.
+
+## Motivation
+
+A short description of the motivation behind the creation and maintenance of the project. This should explain **why** the project exists.
+
+## Installation
+
+Provide code examples and explanations of how to get the project.
+
+## API Reference
+
+Depending on the size of the project, if it is small and simple enough the reference docs can be added to the README. For medium size to larger projects it is important to at least provide a link to where the API reference docs live.
+
+## Tests
+
+Describe and show how to run the tests with code examples.
+
+## Contributors
+
+Let people know how they can dive into the project, include important links to things like issue trackers, irc, twitter accounts if applicable.
+
+## License
+
+A short snippet describing the license (MIT, Apache, etc.)
+
+
+
 ### development
 npm install
 grunt

examples/labels.yaml

@@ -4,6 +4,7 @@ diagram:
   columns: 7
   gridLines: false
 title:
+  text: Labels
   heightPercentage: 0
 azure: &azure
   color: "#004BAF"

fullscreen.html

@@ -42,8 +42,9 @@
 <script type="text/javascript">
 
   function dodraw(){
-    var design = window.opener.design;
+    var design = clone(window.opener.design);
     draw(design);
+    document.title = 'dld4e: ' + design.title.text
   }
 
   window.onload=dodraw();

index.html

@@ -57,7 +57,7 @@
             <div class="btn-toolbar pull-right">
               <div class="btn-group" uib-dropdown is-open="status.isopen1">
                 <button id="examples" type="button" class="btn btn-black btn-xs pull-right" uib-dropdown-toggle ng-disabled="disabled">
-                  examples<span class="caret"></span>
+                  Examples<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="examples">
                   <li role="menuitem" ng-click="example('curves.yaml')"><a href="#">Curves</a></li>
@@ -74,26 +74,26 @@
               </div>
               <div class="btn-group" uib-dropdown is-open="status.isopen2">
                 <button id="foo" type="button" class="btn btn-black btn-xs pull-right" uib-dropdown-toggle ng-disabled="disabled">
-                  icons<span class="caret"></span>
+                  Icons<span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="icons">
                   <li role="menuitem" ng-click="drawIconFamily('aws-native')"><a href="#">aws</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('aws-filled')"><a href="#">aws (filled)</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('aws-stroke')"><a href="#">aws (stoke)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('aws-filled')"><a href="#">aws (iconFill)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('aws-stroke')"><a href="#">aws (iconStroke)</a></li>
                   <li role="menuitem" ng-click="drawIconFamily('cisco-native')"><a href="#">cisco</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('cisco-filled')"><a href="#">cisco (filled)</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('cisco-stroke')"><a href="#">cisco (stroke)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('cisco-filled')"><a href="#">cisco (iconFill)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('cisco-stroke')"><a href="#">cisco (iconStroke)</a></li>
                   <li role="menuitem" ng-click="drawIconFamily('azureEnterprise-native')"><a href="#">azureEnterprise</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('azureEnterprise-filled')"><a href="#">azureEnterprise (filled)</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('azureEnterprise-stroke')"><a href="#">azureEnterprise (stroke)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('azureEnterprise-filled')"><a href="#">azureEnterprise (iconFill)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('azureEnterprise-stroke')"><a href="#">azureEnterprise (iconStroke)</a></li>
                   <li role="menuitem" ng-click="drawIconFamily('azureCloud-native')"><a href="#">azureCloud</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('azureCloud-filled')"><a href="#">azureCloud (filled)</a></li>
-                  <li role="menuitem" ng-click="drawIconFamily('azureCloud-stroke')"><a href="#">azureCloud (stroke)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('azureCloud-filled')"><a href="#">azureCloud (iconFill)</a></li>
+                  <li role="menuitem" ng-click="drawIconFamily('azureCloud-stroke')"><a href="#">azureCloud (iconStroke)</a></li>
 
                 </ul>
               </div>
               <button id="draw" type="submit" class="btn btn-black btn-xs pull-right" ng-click="drawClick(value)" uib-tooltip="hint: press ctrl-enter to refresh the drawing" tooltip-placement="bottom" tooltip-append-to-body="true">
-                 <span class="glyphicon glyphicon glyphicon-pencil" aria-hidden="true" ></span> draw
+                 <span class="glyphicon glyphicon glyphicon-pencil" aria-hidden="true" ></span> Draw
               </button>
             </div>
           </div>
@@ -108,7 +108,7 @@
                   <span class="fa fa-github"></span> Github
                 </a>
                 <button type="submit" class="btn btn-black btn-xs" ng-click="opend3js()">
-                   <span class="glyphicon glyphicon glyphicon-new-window" aria-hidden="true"></span>fullscreen
+                   <span class="glyphicon glyphicon glyphicon-new-window" aria-hidden="true"></span> Fullscreen
                 </button>
               </div>
           </div>
@@ -194,12 +194,13 @@
     $http.get("examples/" + file)
          .then(function(res){
             $scope.acedata = res.data;
-            $scope.drawClick()
+            $scope.drawClick();
           });
   }
   $scope.drawClick = function() {
     $window.design = jsyaml.load($scope.acedata) || {};
     draw($window.design);
+    $window.document.title = 'dld4e: ' + window.design.title.text
   }
   $scope.saveFile = function() {
     var data = $scope.acedata,

templates/aws-filled.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "aws icons"
+  text: "aws icons (iconFill)"
   stroke: black
   fill: none
 icon:

templates/aws-stroke.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "aws icons"
+  text: "aws icons (iconStroke)"
   stroke: black
   fill: none
 icon:

templates/azureCloud-filled.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "azureCloud icons"
+  text: "azureCloud icons (iconFill)"
   stroke: black
   fill: none
 icon:

templates/azureCloud-stroke.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "azureCloud icons"
+  text: "azureCloud icons (iconStroke)"
   stroke: black
   fill: none
 icon:

templates/azureEnterprise-filled.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "azureEnterprise icons"
+  text: "azureEnterprise icons (iconFill)"
   fill: none
   stroke: black
 icon:

templates/azureEnterprise-stroke.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: none
-  text: "azureEnterprise icons"
+  text: "azureEnterprise icons (iconStroke)"
   fill: none
   stroke: black
 icon:

templates/cisco-filled.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: white
-  text: "Cisco Icons"
+  text: "Cisco icons (iconFill)"
   stroke: black
   fill: none
 icon:

templates/cisco-native.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: white
-  text: "Cisco Icons"
+  text: "Cisco icons"
   stroke: black
   fill: none
 icon:

templates/cisco-stroke.yaml

@@ -9,7 +9,7 @@ title:
   type: bar
   color: black
   logoFill: white
-  text: "Cisco Icons"
+  text: "Cisco icons (iconStroke)"
   stroke: black
   fill: none
 icon: