reboot

group-prototype-companion/buzz.js

@@ -0,0 +1,43 @@
+import { PressButton, PressButtonBehavior } from 'pressButton';
+import { whiteSkin, redSkin, HeaderWithBack } from 'config';
+
+let textStyle = new Style({ font: "bold 25px", color: "white" });
+let backgroundSkin = new Skin({ fill : "#202020" });
+let buzzingTextStyle = new Style({ font: "bold 30px", color: "#595959" });
+
+//Buzz Screen //now buzzing
+export var BuzzScreen = Column.template($ => ({
+    left: 0, right: 0, top: 0, bottom: 0, skin: whiteSkin, active: true,
+    contents: [
+        new HeaderWithBack({
+            title: $.childName
+        }),
+        new Picture({
+            top: 30, width: 201, height: 201,
+            url: $.childImage
+        }),
+        new Label({
+            left: 0, right: 0, top: 40,
+            style: buzzingTextStyle, string: 'Buzzing ' + $.childName + ' now...', 
+        }),
+        new PressButton({
+            top: 40,
+            height: 50, width: 200,
+            upSkin: backgroundSkin, 
+            downSkin: redSkin,
+            Behavior: class extends PressButtonBehavior {
+                onTap() {
+                    application.behavior.onStopBuzz(application);
+                }
+            },
+            contents: [
+                new Label({
+                    left: 0, right: 0, top: 0, bottom: 0,
+                    style: textStyle,
+                    string: 'Stop Buzzing'
+                })
+            ]
+        })
+
+    ],   
+}));

group-prototype-companion/config.js

@@ -0,0 +1,73 @@
+import { PressButton, PressButtonBehavior } from 'pressButton';
+
+export var APP_TITLE = "Child Tracker";
+
+export var SCREEN_HEIGHT = 1136 / 2;
+export var SCREEN_WIDTH = 640 / 2;
+
+// Solid colors application wide
+export var redSkin = new Skin({ fill : "#BC2F2F" });
+export var whiteSkin = new Skin({ fill : "white" });
+export var pressButtonSkin = new Skin({ fill: "#f9f9f9"});
+
+// Application wide
+export var backgroundSkin = new Skin({ fill : "#202020" });
+
+// Panic skins
+export var bigRedTextStyle = new Style({ font: "bold 25px", color: "red" });
+
+// Header - Application wide
+export var titleStyle = new Style({ font: "bold 22px", color: "white" });
+export var backStyle = new Style({ font: "20px", color: "white" });
+export var headerSkin = new Skin({ fill: "#4f4f4f"});
+export var backPressSkin = new Skin({fill: "#595959"});
+
+export var HeaderWithBack = Line.template($ => ({
+    name: 'headerPane',
+    left: 0, right: 0, top: 0, height: SCREEN_HEIGHT * 0.1, skin: headerSkin,
+    contents: [
+   		new PressButton({
+   			width: 80, height: SCREEN_HEIGHT * 0.1,
+   			upSkin: headerSkin,
+   			downSkin: backPressSkin,
+   			Behavior: class extends PressButtonBehavior {
+   				onTap() {
+   					application.behavior.moveScreenBack();
+   				}
+   			},
+   			contents: [
+		        new Picture({top:0, bottom:0, left: 10, url: "assets/back.png"}),
+                new Label({left: 28, top: 0, bottom: 0, string: "Back" , style: backStyle}),
+   			]
+   		}),
+        new Label({ left: 0, right: 0, top: 0, bottom: 0, string: $.title, style: titleStyle}),
+        new Container({
+        	left: 0, top: 0, bottom: 0, width: 80, skin: headerSkin
+        })
+    ]
+}));
+
+export var HeaderWithAdd = Line.template($ => ({
+    name: 'headerPane',
+    left: 0, right: 0, top: 0, height: SCREEN_HEIGHT * 0.1, skin: headerSkin,
+    contents: [
+    	new Container({
+        	left: 0, top: 0, bottom: 0, width: 80, skin: headerSkin
+        }),
+        new Label({ left: 0, right: 0, top: 0, bottom: 0, string: $.title, style: titleStyle}),
+   		new PressButton({
+   			width: 80, height: SCREEN_HEIGHT * 0.1,
+   			upSkin: headerSkin,
+   			downSkin: backPressSkin,
+   			Behavior: class extends PressButtonBehavior {
+   				onTap() {
+   					trace("ADD SCREEN\n");
+   				}
+   			},
+   			contents: [
+		        new Picture({top:0, bottom:0, left: 10, url: "assets/Add.png"}),
+                new Label({left: 28, top: 0, bottom: 0, string: "Add" , style: backStyle}),
+   			]
+   		})
+    ]
+}));

group-prototype-companion/detailScreen.js

@@ -0,0 +1,145 @@
+/*
+ *     Copyright (C) 2010-2016 Marvell International Ltd.
+ *     Copyright (C) 2002-2010 Kinoma, Inc.
+ *
+ *     Licensed under the Apache License, Version 2.0 (the "License");
+ *     you may not use this file except in compliance with the License.
+ *     You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *     Unless required by applicable law or agreed to in writing, software
+ *     distributed under the License is distributed on an "AS IS" BASIS,
+ *     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *     See the License for the specific language governing permissions and
+ *     limitations under the License.
+ */
+import { HeaderWithBack, SCREEN_WIDTH, SCREEN_HEIGHT, whiteSkin, pressButtonSkin } from 'config';
+import { PressButton, PressButtonBehavior } from 'pressButton';
+
+//style
+let backgroundSkin = new Skin({ fill: "#ffffff"});
+let headerSkin = new Skin({ fill: "#413028"});
+let waterSkin = new Skin({ fill: "#C7B9AC"});
+let foodSkin = new Skin({ fill: "#C7B9AC"});
+let foodbarSkin = new Skin({ fill: "#8b5028"});
+let buttonSkin = new Skin({ fill: "#41410F"});
+var foodborderedSkin = new Skin({
+    borders: {left: 1, right: 1, top: 1, bottom: 1}, 
+    stroke: "#8b5028"
+});
+let waterbarSkin = new Skin({ fill: "#009EDF"});
+var waterborderedSkin = new Skin({
+    borders: {left: 1, right: 1, top: 1, bottom: 1}, 
+    stroke: "#009EDF"
+});
+
+let textStyle = new Style({ font: "16px", color: "white" });
+let titleStyle = new Style({ font: "bold 20px", color: "white" });
+let blackStyle = new Style({ font: "14px", color: "black" });
+let lg_blackStyle = new Style({ font: "bold 16px", color: "black" });
+//variable
+
+let DetailsPane = Container.template($ => ({
+  name: 'detailsPane',
+  left: 0, right: 0, top: 0, height: 70, skin: whiteSkin,
+  contents: [
+    new Picture({top: 0, left: 20, width: 70, height: 70, url: $.childImage}),
+    new Line({
+      top: 0, height: 70, right: 20,
+      contents: [
+        new PressButton({
+          top: 0, left: 20, width: 70, height: 70,
+          upSkin: whiteSkin,
+          downSkin: pressButtonSkin,
+          Behavior: class extends PressButtonBehavior {
+            onTap() {
+              application.distribute("onBuzz", $.childName, $.childImage);
+            }
+          },
+          contents: [
+            new Picture({left: 0, right: 0, top: 0, bottom: 0, url: "assets/buzz.png"})
+          ]
+        }),
+
+        new PressButton({
+          top: 0, left: 20, width: 70, height: 70,
+          upSkin: whiteSkin,
+          downSkin: pressButtonSkin,
+          Behavior: class extends PressButtonBehavior {
+            onTap() {
+              trace("DIRECTIONS\n");
+            }
+          },
+          contents: [
+            new Picture({left: 0, right: 0, top: 0, bottom: 0, url: "assets/directions.png"})
+          ]
+        })
+      ]
+    })
+  ]
+}));
+
+let ActivityPane = Column.template($ => ({
+    top: 50, left: 0, right: 0, bottom: 0, skin: backgroundSkin,
+    active: true, state: 0,
+    contents: [
+      new Label({ left: 0, right: 0, top: 0, bottom: 0, string: "Recent Activity" , style:lg_blackStyle }),
+      new Label({ left: 70, top: 20, bottom: 0, string: "12:30                  Arrived at Home" , style: blackStyle}),
+      new Label({ left: 70, top: 5, bottom: 0, string: "12:00                  Left Park" , style: blackStyle}),
+      new Label({ left: 70, top: 5, bottom: 70, string: "11:34                  Arrived at Park" , style: blackStyle}),
+    ]
+}));
+
+let BuzzButton = Container.template($ => ({
+  left: 0, right:0, top: 0, bottom: 0, 
+  active: true,state:0,
+  contents: [
+    new Picture({left: -40, right: 0, top: 10, height: 70, url: "assets/buzz.png"}),
+  ],
+  behavior: Behavior({
+    onCreate(container, data) {
+      this.childName = data.childName;
+      this.childImage = data.childImage;
+    },
+    onTouchEnded(container) {
+      application.delegate('onBuzz', this.childName, this.childImage);
+    }
+  })
+}));
+
+
+let DirectionsButton = Container.template($ => ({
+  left: 0, right:0, top: 0, bottom: 0, 
+  active: true,state:0,
+  contents: [
+      new Picture({left: -20, right: 0,top: 10, height: 70, url: "assets/directions.png"}),
+  ],
+  behavior: Behavior({
+    onTouchBegan(container) {
+    },
+    onTouchEnded(container) {
+    }
+  })
+}));
+//layout
+export var DetailScreen = Column.template($ => ({
+    top: 0, bottom: 0, left: 0, right: 0, skin: backgroundSkin,
+    active: true, state: 0,
+    contents: [
+        new HeaderWithBack({
+          title: $.childName
+        }),
+        new Picture({top: -20, width: SCREEN_WIDTH , url: $.mapImage}),
+        new DetailsPane({
+          childName: $.childName,
+          childImage: $.childImage
+        }),
+        new ActivityPane(),
+    ],
+    behavior: Behavior({
+
+    }),
+}));
+
+//application.add(new MainContainer());

group-prototype-companion/home.js

@@ -0,0 +1,112 @@
+import { PressButton, PressButtonBehavior } from 'pressButton';
+import { SCREEN_WIDTH, SCREEN_HEIGHT, HeaderWithAdd, pressButtonSkin, APP_TITLE } from 'config';
+import { DetailScreen } from 'detailScreen';
+
+// Stores child names and other data
+export var children = [
+	{ name: "Emily", imageUrl: "assets/enki.png", mapUrl: "assets/orange.png", color: "#F2994A"},
+	{ name: "John", imageUrl: "assets/enki.png", mapUrl: "assets/green.png", color: "#6FCF97"}
+];
+
+var ChildButton = Container.template(params => ({
+	active: true,
+	top: params.top, left: params.left, right: params.right,  height: params.height,
+	Behavior: class extends PressButtonBehavior {
+		onTap(container) {
+			var name = children[params.child].name;
+			var imageUrl = children[params.child].imageUrl;
+			var mapImage = children[params.child].mapUrl;
+
+			application.behavior.moveScreenForward(new DetailScreen({
+				childName: name,
+				childImage: imageUrl,
+				mapImage: mapImage
+			}));
+		}
+	},
+	contents: [
+		new Picture({
+			top: 8, left: 8, width: 48, height: 48,
+			url: children[params.child].imageUrl
+		}),
+		new Label({
+			left: 80,
+			style: new Style({
+				font:"24px bold",
+				color: children[params.child].color
+			}),
+			string: children[params.child].name
+		}),
+		new PressButton({
+			top: 8, right: 8, height: 42, width: 78,
+			upSkin: new Skin({fill:"transparent"}),
+			downSkin: pressButtonSkin,
+			Behavior: class extends PressButtonBehavior {
+				onTap(container) {
+					var childName = children[params.child].name;
+					var childImage = children[params.child].imageUrl;
+			      	application.behavior.onBuzz(application, childName, childImage);
+				}
+			},
+			contents: [
+				new Picture({
+					top: 0, left: 0, height: 42, width: 78,
+					url: "assets/buzzWritten.png"
+				})
+			]
+		})
+	]
+}));
+
+var childList = new Column({
+	top: 0, left: 0, right: 0,
+	contents: [
+		new ChildButton({
+			top: 0, left: 0, right: 0, height: 64,
+			child: 0,
+			upSkin: new Skin({fill:"transparent"}),
+			downSkin: pressButtonSkin
+		}),
+		new ChildButton({
+			top: 0, left: 0, right: 0, height: 64,
+			child: 1,
+			upSkin: new Skin({fill:"transparent"}),
+			downSkin: pressButtonSkin
+		})
+	]
+});
+
+
+var mapContainer = new Container({
+	top: 0, left: 0, right: 0, height: SCREEN_HEIGHT * 0.6,
+	skin: new Skin({
+		fill: "black"
+	}),
+	contents: [
+		new Picture({
+			top: 0, left: -20, height: 340,
+			url: "assets/homeMap.png"
+		})
+	]
+});
+
+var childListContainer = new Container({
+	top: 0, height: 192, left: 0, right: 0,
+	skin: new Skin({
+		fill: "white"
+	}),
+	contents: [
+		childList
+	]
+});
+
+export var homeContainer = new Column({
+	top: 0, left: 0, right: 0, bottom: 0,
+	contents: [
+		new HeaderWithAdd({
+			title: APP_TITLE
+		}),
+		mapContainer,
+		childListContainer
+	]
+});