WIP ExampleBrowser

Data/AtomicEditor/ExampleInfo/Examples.json

@@ -1,5 +1,5 @@
 {
-	"Examples" : [
+	"examples" : [
 			{
 				"name": "Physics Platformer 2D",
 				"desc" : "Moving platforms, vines, and neat 2D lighting",
@@ -13,7 +13,7 @@
 				"screenshot" : "ToonTown.png",
 				"folder" : "ToonTown",
 				"module" : "3D"
-			},			
+			},
 			{
 				"name": "SpaceGame",
 				"desc" : "A 2D Arcade Space Game",
@@ -28,14 +28,14 @@
 				"screenshot" : "Roboman3D.png",
 				"folder" : "RoboMan3D",
 				"module" : "3D"
-			},			
+			},
 			{
 				"name": "Character Animation 2D",
 				"desc" : "Example of controlling a Spriter animated character",
 				"screenshot" : "CharacterAnimation2D.png",
 				"folder" : "CharacterAnimation2D",
 				"module" : "2D"
-			},			
+			},
 			{
 				"name": "Character Animation 3D",
 				"desc" : "Example of controlling a skeletally animated character",
@@ -58,5 +58,5 @@
 				"module" : "2D"
 			}
 
-	] 
-}
+	]
+}

Script/AtomicEditor/ui/frames/WelcomeFrame.ts

@@ -12,7 +12,7 @@ class WelcomeFrame extends ScriptWidget {
 
         this.load("AtomicEditor/editor/ui/welcomeframe.tb.txt");
 
-        var recentProjects = <Atomic.UILayout> this.getWidget("recentprojects");
+        var recentProjects = <Atomic.UILayout>this.getWidget("recentprojects");
         this.gravity = Atomic.UI_GRAVITY_ALL;
 
         this.recentList = new Atomic.UIListView();
@@ -20,7 +20,7 @@ class WelcomeFrame extends ScriptWidget {
 
         recentProjects.addChild(this.recentList);
 
-        var container = <Atomic.UILayout> parent.getWidget("resourceviewcontainer");
+        var container = <Atomic.UILayout>parent.getWidget("resourceviewcontainer");
 
         container.addChild(this);
 
@@ -29,7 +29,112 @@ class WelcomeFrame extends ScriptWidget {
         this.subscribeToEvent(EditorEvents.CloseProject, () => {
             this.updateRecentProjects();
         });
-        
+
+        this.initExampleBrowser();
+
+    }
+
+    addExample(example: ExampleFormat) {
+
+        var exlayout = <Atomic.UILayout>this.getWidget("examples_layout");
+
+        if (!this.currentExampleLayout) {
+            this.currentExampleLayout = new Atomic.UILayout();
+            this.currentExampleLayout.spacing = 8;
+            exlayout.addChild(this.currentExampleLayout);
+        }
+
+        // 200x150
+
+        var exampleLayout = new Atomic.UILayout();
+        exampleLayout.skinBg = "StarCondition";
+        exampleLayout.axis = Atomic.UI_AXIS_Y;
+        exampleLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+        exampleLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
+
+        // IMAGE BUTTON
+
+        var id = example.name;
+
+        var button = new Atomic.UIButton();
+        button.skinBg = "StarButton";
+        button.id = id;
+        var image = new Atomic.UIImageWidget();
+
+        image.image = this.exampleInfoDir + example.screenshot;
+        image.skinBg = "ImageFrame";
+        var rect = [0, 0, image.imageWidth / 2, image.imageHeight / 2];
+        image.rect = rect;
+
+        // NAME FIELD
+        var nameField = new Atomic.UITextField();
+        nameField.skinBg = "ImageCaption";
+        nameField.text = example.name;
+
+        var nameRect = [0, image.imageHeight / 2 - 16, image.imageWidth / 2, 16];
+        nameField.rect = nameRect;
+
+        nameField.gravity = Atomic.UI_GRAVITY_BOTTOM;
+
+        image.addChild(nameField);
+
+        button.addChild(image);
+
+        var lp = new Atomic.UILayoutParams();
+        lp.minWidth = image.imageWidth / 2;
+        lp.minHeight = image.imageHeight / 2;
+
+        button.layoutParams = lp;
+
+        button.gravity = Atomic.UI_GRAVITY_LEFT;
+
+        exampleLayout.addChild(button);
+
+        // DESC TEXT
+
+        var descField = new Atomic.UIEditField();
+        descField.styling = true;
+        descField.multiline = true;
+        descField.readOnly = true;
+        descField.wrapping = true;
+
+        var styleDesc = "<color #A9A9A9>" + example.desc + "</color>";
+
+        descField.text = styleDesc;
+
+        descField.adaptToContentSize = true;
+
+        lp.minWidth /= 2;
+        lp.maxHeight = lp.minHeight;
+        lp.maxWidth = lp.minWidth;
+        descField.layoutParams = lp;
+
+        exampleLayout.addChild(descField);
+
+        this.currentExampleLayout.addChild(exampleLayout);
+
+        this.exampleCount++;
+        // three across, todo, be smarter about this
+        if (!(this.exampleCount % 3)) {
+            this.currentExampleLayout = null;
+        }
+
+    }
+
+    initExampleBrowser() {
+
+        this.exampleInfoDir = "/Users/josh/Dev/atomic/AtomicGameEngine/Data/AtomicEditor/ExampleInfo/";
+
+        var exampleJsonFile = this.exampleInfoDir + "Examples.json";
+
+        var jsonFile = new Atomic.File(exampleJsonFile, Atomic.FILE_READ);
+        var examples = <ExamplesFormat> JSON.parse(jsonFile.readText());
+
+        for (var i in examples.examples) {
+
+            this.addExample(examples.examples[i]);
+        }
+
     }
 
     handleWidgetEvent(ev: Atomic.UIWidgetEvent) {
@@ -82,10 +187,10 @@ class WelcomeFrame extends ScriptWidget {
     updateRecentProjects() {
 
         this.recentList.deleteAllItems();
-        
+
         var prefs = Preferences.getInstance();
         prefs.updateRecentProjects();
-        
+
         this.recent = prefs.recentProjects;
 
         for (var i in this.recent) {
@@ -101,9 +206,28 @@ class WelcomeFrame extends ScriptWidget {
         menu.show(menuButtons, x, y);
     }
 
+    // examples
+    exampleInfoDir: string;
+    exampleCount = 0;
+    currentExampleLayout: Atomic.UILayout;
+
     recent: string[] = [];
     recentList: Atomic.UIListView;
 
 }
 
+class ExamplesFormat {
+
+    examples: [ExampleFormat];
+
+}
+
+class ExampleFormat {
+    name: string;
+    desc: string;
+    screenshot: string;
+    folder: string;
+    module: string;
+}
+
 export = WelcomeFrame;

Source/Atomic/UI/UIEditField.cpp

@@ -38,6 +38,17 @@ void UIEditField::SetReadOnly(bool readonly)
 
 }
 
+void UIEditField::SetStyling(bool styling)
+{
+    if (!widget_)
+        return;
+
+    TBEditField* w = (TBEditField*) widget_;
+
+    w->SetStyling(styling);
+
+}
+
 void UIEditField::SetMultiline(bool multiline)
 {
     if (!widget_)

Source/Atomic/UI/UIEditField.h

@@ -37,6 +37,7 @@ public:
     void SetEditType(UI_EDIT_TYPE type);
 
     void SetReadOnly(bool readonly);
+    void SetStyling(bool styling);
     void SetMultiline(bool multiline);
 
     void ScrollTo(int x, int y);

Source/Atomic/UI/UIImageWidget.cpp

@@ -29,6 +29,24 @@ UIImageWidget::~UIImageWidget()
 {
 }
 
+int UIImageWidget::GetImageWidth() const
+{
+    if (!widget_)
+        return 0;
+
+    return ((TBImageWidget*) widget_)->GetImageWidth();
+
+}
+
+int UIImageWidget::GetImageHeight() const
+{
+    if (!widget_)
+        return 0;
+
+    return ((TBImageWidget*) widget_)->GetImageHeight();
+
+}
+
 void UIImageWidget::SetImage(const String& imagePath)
 {
     if (!widget_)

Source/Atomic/UI/UIImageWidget.h

@@ -18,6 +18,9 @@ public:
 
     void SetImage(const String& imagePath);
 
+    int GetImageWidth() const;
+    int GetImageHeight() const;
+
 protected:
 
     virtual bool OnEvent(const tb::TBWidgetEvent &ev);