From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:04:00 -0400 Subject: cursor that follows mouse --- public/assets/javascripts/ui/editor/HelpCursor.js | 38 +++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js new file mode 100644 index 0000000..842e871 --- /dev/null +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -0,0 +1,38 @@ + +var HelpCursor = View.extend({ + el: "#helpCursor", + + messages: { + start: "Welcome to Vvalls!", + move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + }, + shown: {}, + + initialize: function(){ + $(window).mousemove(function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }.bind(this)) + this.show("start") + }, + + show: function(name){ + if (name) this.showMessage(name) + this.$el.show() + }, + + hide: function(){ + this.$el.hide() + }, + + showMessage: function(name){ + if (+(this.shown[name] || 0) < 2) { + this.$el.html(this.messages[name]) + this.shown[name] = (+this.shown[name] || 0) + 1 + } + else { + this.$el.html("") + } + }, + +}) -- cgit v1.2.3-70-g09d2 From dd6b2cc2cdd97b6163d115e5415736bccbffa831 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:36:52 -0400 Subject: get rid of menu options --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 5 +++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 10 +++++----- public/assets/javascripts/ui/editor/HelpCursor.js | 8 ++++++-- views/controls/builder/info.ejs | 5 ++++- views/controls/editor/light-control.ejs | 7 ++++++- views/controls/editor/presets.ejs | 12 ++++-------- views/controls/editor/toolbar.ejs | 4 ++++ views/controls/editor/wallpaper.ejs | 3 +++ 8 files changed, 35 insertions(+), 19 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 072ff7e..44e416d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -213,7 +213,8 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) wheelTimeout = setTimeout(function(){ @@ -224,7 +225,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() wheelState = null - }, 500) + }, 250) } else { map.set_zoom(map.zoom_exponent - deltaY/20) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4f07d1f..9c2f3d3 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -30,11 +30,11 @@ var EditorToolbar = View.extend({ }, toggleMap: function(state){ - if (typeof state != "boolean") { - state = ! $("[data-role='toggle-map-view']").hasClass("inuse") - this.resetControls() - } - $("[data-role='toggle-map-view']").toggleClass("inuse", state) +// if (typeof state != "boolean") { +// state = ! $("[data-role='toggle-map-view']").hasClass("inuse") +// this.resetControls() +// } +// $("[data-role='toggle-map-view']").toggleClass("inuse", state) map.toggle(state) $("#minimap").toggleClass("hide", state) this.parent.info.toggle(state) diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 842e871..b2f411d 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -3,8 +3,12 @@ var HelpCursor = View.extend({ el: "#helpCursor", messages: { - start: "Welcome to Vvalls!", - move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.", + start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", + media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", + presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + colors: "", + settings: "This is where you publish your project.", }, shown: {}, diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 205938f..54bb38e 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -2,7 +2,10 @@

Map Editor

- Click a room to select it, or click and drag to make a new room. + Click and drag to make a new room. + Click a room to select it. +

+ Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b20464..4604a7a 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,6 +1,11 @@

Edit Room Colors

-
+ +

Preset Colors

+
+
+ +
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs index 70e48e3..8dd1986 100644 --- a/views/controls/editor/presets.ejs +++ b/views/controls/editor/presets.ejs @@ -1,18 +1,14 @@
-

Preset Colors

-
-
-

Preset Styles

- - Wireframe + + Inverse Shaded - - Inverse + + Wireframe P.Funk diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 57a98b9..1bb31b8 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -1,9 +1,11 @@ +
+
-- cgit v1.2.3-70-g09d2 From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 12:56:50 -0400 Subject: more help text --- .../assets/javascripts/ui/editor/EditorSettings.js | 3 ++ public/assets/javascripts/ui/editor/HelpCursor.js | 6 ++-- .../assets/javascripts/ui/editor/LightControl.js | 32 +++++++++++++++++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 2 ++ public/assets/javascripts/ui/editor/Presets.js | 24 +--------------- .../javascripts/ui/editor/WallpaperPicker.js | 1 + public/assets/stylesheets/app.css | 7 +++-- views/controls/builder/info.ejs | 2 +- views/controls/editor/light-control.ejs | 1 - 9 files changed, 43 insertions(+), 35 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index ac361a7..e47739b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) + if (state) { + this.parent.cursor.show("settings") + } }, enterSubmit: function (e) { diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index b2f411d..4a6e616 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -7,8 +7,8 @@ var HelpCursor = View.extend({ media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", presets: "These presets will affect on all the walls. Click some of them to see the walls change.", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", - colors: "", - settings: "This is where you publish your project.", + colors: "Use these colors to change the color of the walls, floor, and ceiling.", + settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, shown: {}, @@ -21,7 +21,7 @@ var HelpCursor = View.extend({ }, show: function(name){ - if (name) this.showMessage(name) + this.showMessage(name) this.$el.show() }, diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 34a5a51..bb4454a 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -5,14 +5,28 @@ var LightControl = View.extend({ events: { "mousedown": "stopPropagation", "click .color-swatches span": "select", - "input #shadow-control": "updateShadow", "mousedown #brightness-control": "beginBrightness", "input #brightness-control": "updateBrightness", - "input #outline-hue": "updateShadow", - "input #wall-hue": "updateShadow", }, + + colors: [ + [255,94,58], + [255,149,0], + [255,219,76], + [76,217,100], + [52,170,220], + [29,98,240], + [198,68,252], + [0,0,0], + [74,74,74], + [125,126,127], + [209,211,212], + [235,235,235], + [255,255,255], + ], - initialize: function(){ + initialize: function(opt){ + this.parent = opt.parent this.colorPicker = new LabColorPicker(this, 180, 180) this.$("#color-picker").append( this.colorPicker.canvas ) @@ -27,6 +41,15 @@ var LightControl = View.extend({ ceiling: this.$("#ceiling-color"), } this.$brightnessControl = this.$("#brightness-control") + + this.$colors = this.$(".colors") + this.colors.forEach(function(color){ + var $swatch = $("") + $swatch.css("background-color","rgb(" + color + ")") + $swatch.data('color', color) + this.$colors.append($swatch) + }.bind(this)) + }, modes: [ "wall", "outline", "floor", "ceiling" ], @@ -54,6 +77,7 @@ var LightControl = View.extend({ }, show: function(){ + this.parent.cursor.show("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b270be5..df77fb1 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { + this.parent.cursor.show("media") this.__super__.show.call(this) } }, @@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true + this.parent.cursor.show("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 1e70aa2..6222e33 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -7,22 +7,6 @@ var Presets = View.extend({ "click .swatches span": "selectColor", }, - colors: [ - [255,94,58], - [255,149,0], - [255,219,76], - [76,217,100], - [52,170,220], - [29,98,240], - [198,68,252], - [0,0,0], - [74,74,74], - [125,126,127], - [209,211,212], - [235,235,235], - [255,255,255], - ], - presets: { wireframe: { wall: [255,255,255], @@ -52,13 +36,6 @@ var Presets = View.extend({ initialize: function(opt){ this.parent = opt.parent - this.$colors = this.$(".colors") - this.colors.forEach(function(color){ - var $swatch = $("") - $swatch.css("background-color","rgb(" + color + ")") - $swatch.data('color', color) - this.$colors.append($swatch) - }.bind(this)) }, toggle: function(state){ @@ -66,6 +43,7 @@ var Presets = View.extend({ }, show: function(){ + this.parent.cursor.show("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bf2542..541ab31 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { + this.parent.cursor.show("wallpaper") this.load() } else { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0140dc6..250ae67 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1485,10 +1485,11 @@ border-left: 1px solid black; padding-bottom: 6px; } -#presets .colors { +.vvbox .colors { + max-width: 170px; margin-bottom: 5px; } -#presets .colors span { +.vvbox .colors span { display: inline-block; font-size: 0; width: 20px; @@ -1498,7 +1499,7 @@ border-left: 1px solid black; cursor: pointer; transition: transform 0.2s; } -#presets .colors span:hover { +.vvbox .colors span:hover { transform: translateX(3px) translateY(-3px); } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 54bb38e..2762207 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -3,7 +3,7 @@
Click and drag to make a new room. - Click a room to select it. + Click a room to select, move or resize it.

Press ESC to toggle the map.
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 4604a7a..99d68f5 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,7 +1,6 @@

Edit Room Colors

-

Preset Colors

-- cgit v1.2.3-70-g09d2 From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 15 Oct 2014 17:09:45 -0400 Subject: help messages on button, starting drag stuff --- public/assets/javascripts/app.js | 4 -- .../javascripts/mx/extensions/mx.movements.js | 12 ++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 54 ++++++++++++++-------- .../assets/javascripts/ui/editor/LightControl.js | 2 +- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/editor/Presets.js | 2 +- .../javascripts/ui/editor/WallpaperPicker.js | 2 +- 8 files changed, 52 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 98e1820..f8372cd 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -18,10 +18,6 @@ else { new WOW().init(); -$('#help-button').click( function(){ - $('body').chardinJs('start') -}); - var scene, cam, map; var app = new function(){} diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index b158625..40e786d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -129,9 +129,19 @@ MX.Movements = function (cam) { } else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) { app.controller.mediaViewer.hide() + $(".inuse").removeClass("inuse") } else if (app.controller.lightControl.$el.hasClass('active')) { app.controller.lightControl.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.wallpaperPicker.$el.hasClass('active')) { + app.controller.wallpaperPicker.hide() + $(".inuse").removeClass("inuse") + } + else if (app.controller.presets.$el.hasClass('active')) { + app.controller.presets.hide() + $(".inuse").removeClass("inuse") } else { app.controller.toolbar.toggleMap() @@ -242,7 +252,7 @@ MX.Movements = function (cam) { var ry = cam.rotationY var s = creeping ? scale * creepFactor : scale - var vrrrr = creeping ? vr * creepFactor * 5 : vr + var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5 var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown vx = vz = 0 diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index e47739b..c0c140f 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({ $(".inuse").removeClass("inuse") $("[data-role='toggle-project-settings']").toggleClass("inuse", state) if (state) { - this.parent.cursor.show("settings") + this.parent.cursor.message("settings") } }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 4a6e616..8bfaef8 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -2,6 +2,8 @@ var HelpCursor = View.extend({ el: "#helpCursor", + active: false, + messages: { start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", @@ -10,33 +12,47 @@ var HelpCursor = View.extend({ colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, - shown: {}, initialize: function(){ - $(window).mousemove(function(e){ - this.el.style.left = e.pageX + "px" - this.el.style.top = e.pageY + "px" - }.bind(this)) - this.show("start") + $('#help-button').click(this.toggle.bind(this)); }, - - show: function(name){ - this.showMessage(name) + + toggle: function(){ + this.active ? this.stop() : this.start() + }, + + start: function(){ + if (this.active) return + this.active = true + this.message('start') this.$el.show() +// $('body').chardinJs('start') +// $(window).one("click", function(){ +// $('body').chardinJs('stop') +// }) + this.move({ pageX: -1000, pageY: -10000 }) + this.moveFn = this.move.bind(this) + document.addEventListener("mousemove", this.moveFn) }, - - hide: function(){ + + stop: function(){ + this.active = false this.$el.hide() + document.removeEventListener("mousemove", this.moveFn) + }, + + move: function(e){ + this.el.style.left = e.pageX + "px" + this.el.style.top = e.pageY + "px" + }, + + show: function(name){ + this.showMessage(name) }, - showMessage: function(name){ - if (+(this.shown[name] || 0) < 2) { - this.$el.html(this.messages[name]) - this.shown[name] = (+this.shown[name] || 0) + 1 - } - else { - this.$el.html("") - } + message: function(name){ + if (! this.active) return + this.$el.html(this.messages[name]) }, }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index bb4454a..10f8d2c 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -77,7 +77,7 @@ var LightControl = View.extend({ }, show: function(){ - this.parent.cursor.show("colors") + this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index df77fb1..e196e41 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({ this.loadTrending() } else { - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, @@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({ } else { this.loaded = true - this.parent.cursor.show("media") + this.parent.cursor.message("media") this.__super__.show.call(this) } }, diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 6222e33..35b5b58 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -43,7 +43,7 @@ var Presets = View.extend({ }, show: function(){ - this.parent.cursor.show("presets") + this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 9583376..ad30ad8 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ if (! this.loaded) { - this.parent.cursor.show("wallpaper") + this.parent.cursor.message("wallpaper") this.load() } else { -- cgit v1.2.3-70-g09d2 From 9ae4f45f24e3e79aeb32e0a128ee798381b80569 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 15 Oct 2014 22:35:48 -0400 Subject: more help text --- public/assets/javascripts/defaults.js | 2 +- public/assets/javascripts/rectangles/engine/rooms/builder.js | 2 +- public/assets/javascripts/ui/editor/HelpCursor.js | 8 +++++--- public/assets/javascripts/ui/editor/MediaViewer.js | 5 ++++- public/assets/javascripts/ui/editor/Presets.js | 4 ++-- public/assets/stylesheets/app.css | 2 ++ 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 9ba0b4d..12aed62 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -3,7 +3,7 @@ app.defaults = { units: app.units = "ft", footResolution: 36, meterResolution: 100, - wallOpacity: 0.95, + wallOpacity: 0.98, outlineWidth: 2, colors: { wall: [255,255,255], diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 33333fb..c95734b 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -280,7 +280,7 @@ return el } this.make_wall = function (klass) { - // klass += ".backface-hidden" + klass += ".backface-hidden" var el = new MX.Object3D(".face" + (klass || "")) el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1 el.z = el.y = el.x = 0 diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 8bfaef8..9b6807e 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -5,9 +5,11 @@ var HelpCursor = View.extend({ active: false, messages: { - start: "Welcome to Vvalls! Click one of the tools at right to learn how it works.", - media: "This is where you pick media to go on the walls. You can upload media, paste links, or use some of the found media.", - presets: "These presets will affect on all the walls. Click some of them to see the walls change.", + start: "Welcome to Vvalls! Click one of the tools at right to learn about it.", + media: "This is where you pick media to go on the walls. You can upload media and paste links.", + addmedia: "Great, now click a wall to place this image.", + resize: "Drag the image to position it, or use the dots to resize.", + presets: "These are some basic presets to get you started. Click em! :-)", wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index e196e41..8cae4a4 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -77,6 +77,7 @@ var MediaViewer = ModalView.extend({ this.__super__.hide.call(this) this.deleteArmed(false) this.parent.mediaUpload.hide() + this.parent.cursor.message('start') }, load: function(){ @@ -232,7 +233,8 @@ var MediaViewer = ModalView.extend({ } this.hide() - + this.parent.cursor.message('addmedia') + var $ants = $('.ants'); var $floatingImg = $('.floatingImg'); @@ -267,6 +269,7 @@ var MediaViewer = ModalView.extend({ $(window).off('mousedown', _hideCursor) app.off('cancel-scenery', _hideCursor) $floatingImg.parent().removeClass('edit') + app.controller.cursor.message('resize') } $(window).on('mousemove', _followCursor) $(window).on('mousedown', _hideCursor) diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 35b5b58..4edc957 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -39,11 +39,11 @@ var Presets = View.extend({ }, toggle: function(state){ - this.$el.toggleClass("active", state); + this.$el.toggleClass("active", state) + this.parent.cursor.message(state ? "presets" : "start") }, show: function(){ - this.parent.cursor.message("presets") this.toggle(true) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 250ae67..1ab1198 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1676,6 +1676,7 @@ input[type="range"]::-webkit-slider-thumb { cursor:pointer; border-bottom: 1px transparent solid; } +.presets span:hover, .presets span.active { text-decoration: underline; } @@ -1728,6 +1729,7 @@ input[type="range"]::-webkit-slider-thumb { padding: 4px; font-weight: 500; z-index: 22; + display: none; } .settings.info { -- cgit v1.2.3-70-g09d2 From f8a4bb4609511393c92c618962f990673328d2f0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 16 Oct 2014 14:31:13 -0400 Subject: cursor stuff, hit esc to exit wallpaper mode --- .../assets/javascripts/rectangles/models/floor.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 4 +- public/assets/javascripts/ui/editor/HelpCursor.js | 15 ++++++- .../javascripts/ui/editor/WallpaperPicker.js | 46 ++++++++++------------ 5 files changed, 39 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 9838232..a144ecd 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -40,7 +40,7 @@ if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 542c99a..eb445a7 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -104,7 +104,7 @@ else if (Scenery.nextWallpaper) { var oldState = base.serialize() base.wallpaper(Scenery.nextWallpaper) - Scenery.nextWallpaper = null + // Scenery.nextWallpaper = null UndoStack.push({ type: 'update-wallpaper', diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js index 4d8a7bb..459ac1e 100644 --- a/public/assets/javascripts/ui/editor/ColorControl.js +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -73,11 +73,13 @@ var ColorControl = View.extend({ }, toggle: function(state){ + if (state) { + this.parent.cursor.message("colors") + } this.$el.toggleClass("active", state); }, show: function(){ - this.parent.cursor.message("colors") this.toggle(true) }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 9b6807e..06f6ab2 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -43,9 +43,12 @@ var HelpCursor = View.extend({ document.removeEventListener("mousemove", this.moveFn) }, + offset: 100, + lastPosition: { pageX: 0, pageY: 0 }, move: function(e){ - this.el.style.left = e.pageX + "px" + this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px" this.el.style.top = e.pageY + "px" + this.lastPosition = e }, show: function(name){ @@ -54,6 +57,16 @@ var HelpCursor = View.extend({ message: function(name){ if (! this.active) return + if (name == "start" || name == "media" || name == "settings") { + this.offset = 100 + } + else if (name == "colors") { + this.offset = 270 + } + else { + this.offset = 290 + } + this.move(this.lastPosition) this.$el.html(this.messages[name]) }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 6bcd859..afdfca7 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -28,19 +28,28 @@ var WallpaperPicker = UploadView.extend({ loaded: false, show: function(){ - if (! this.loaded) { - this.parent.cursor.message("wallpaper") - this.load() - } - else { - this.toggle(true) - } + this.toggle(true) }, - hide: function(){ - this.__super__.hide.call(this) + this.toggle(false) }, - +// hide: function(){ +// this.__super__.hide.call(this) +// }, + + toggle: function (state) { + app.tube('cancel-wallpaper') + this.$el.toggleClass("active", state) + if (state) { + this.parent.cursor.message("wallpaper") + if (! this.loaded) { + this.load() + } + } + // toggle the class that makes the cursor a paintbucket + // $("body").removeClass("pastePaper") + }, + load: function(){ $.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this)) }, @@ -86,21 +95,6 @@ var WallpaperPicker = UploadView.extend({ }.bind(this)) }, - toggle: function (state) { - if (state && ! this.loaded) { - this.show() - } - else { - this.$el.toggleClass("active", state) - } - // toggle the class that makes the cursor a paintbucket - // $("body").removeClass("pastePaper") - }, - - hide: function(){ - this.toggle(false) - }, - beforeUpload: function(){ }, @@ -145,7 +139,7 @@ var WallpaperPicker = UploadView.extend({ $floatingSwatch.removeClass("scissors").hide() } $(window).on('mousemove', _followCursor) - $(window).one('click', _hideCursor); + // $(window).one('click', _hideCursor); app.on('cancel-wallpaper', _hideCursor) $floatingSwatch.show() _followCursor(e); -- cgit v1.2.3-70-g09d2 From a49396746de264667784f52b3f02c0089cd6fd5e Mon Sep 17 00:00:00 2001 From: ryderr Date: Thu, 16 Oct 2014 15:28:36 -0400 Subject: sweet ass portrait message --- public/assets/javascripts/ui/editor/HelpCursor.js | 2 +- public/assets/stylesheets/app.css | 51 +++++++++++++++++++---- 2 files changed, 45 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 9b6807e..3bcfd7a 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -5,7 +5,7 @@ var HelpCursor = View.extend({ active: false, messages: { - start: "Welcome to Vvalls! Click one of the tools at right to learn about it.", + start: "Welcome to VValls! Click one of the tools at right to learn about it.", media: "This is where you pick media to go on the walls. You can upload media and paste links.", addmedia: "Great, now click a wall to place this image.", resize: "Drag the image to position it, or use the dots to resize.", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 44247ef..c1f872f 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1502,7 +1502,7 @@ border-left: 1px solid black; transition: transform 0.2s; } .vvbox .colors span:hover { - transform: translateX(3px) translateY(-3px); + transform: translateX(2px) translateY(-2px); } .toolButton { @@ -1735,14 +1735,18 @@ input[type="range"]::-webkit-slider-thumb { #helpCursor { position: fixed; max-width: 200px; - font-size: 13px; + font-size: 15px; color: black; - background: #fff; + background: rgba(255,255,255,0.9); margin: 8px 0 0 8px; - padding: 4px; - font-weight: 500; + padding: 10px; + font-weight: 600; z-index: 22; display: none; + margin-left:-210px; + margin-bottom:20px; + border:1px solid; + box-shadow:3px 3px black; } .settings.info { @@ -2610,7 +2614,40 @@ a[data-role="forgot-password"] { margin: 20px 0; } .projectList .room { - width: 100%; - height: 260px; + width: 100%; + height: 260px; + } + .aboutRoom { + width: 170px; + padding: 6px 8px 8px 8px; + } + .aboutRoom h2 { + font-size: 13px; + margin: 1px 0 0 0; } + .aboutRoom h1 a, .aboutRoom h1 { + font-size: 16px; + } +} + +@media screen and (orientation:portrait) { + .aboutRoom { + display:none; + } + body:after{ + content:"Hey there! For best viewing we suggest flipping your device sideways and spinning around in circles :)"; + z-index: 3; + border: 1px solid; + position: fixed; + display: inline-block; + background: white; + box-shadow: -3px 3px; + width: 170px; + background: rgba(255,255,255,0.95); + padding: 6px 8px 8px 8px; + position: fixed; + bottom: 10px; + left: 10px; + border: 1px solid; + } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 9bc2f0eec1bff31de427c97cbb190a4f7f74a483 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 24 Oct 2014 16:33:22 -0400 Subject: hide help when hovering the toolbar --- public/assets/javascripts/ui/editor/EditorToolbar.js | 10 ++++++++++ public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/HelpCursor.js | 13 +++++++------ 3 files changed, 18 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index dceae3c..3c75b95 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -4,6 +4,8 @@ var EditorToolbar = View.extend({ events: { "mousedown": 'stopPropagation', + "mouseenter": 'mouseenter', + "mouseleave": 'mouseleave', "click [data-role='undo']": 'undo', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', @@ -157,6 +159,14 @@ var EditorToolbar = View.extend({ this.toggleMap(false) this.parent.presets.toggle(state) }, + + mouseenter: function(){ + this.parent.cursor.hide() + }, + + mouseleave: function(){ + this.parent.cursor.show() + }, }) var editor = new function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 9946feb..2872ab9 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -47,6 +47,7 @@ var EditorView = View.extend({ readyLayout: function(data){ data.isNew = true + $('#help-button').trigger("click") this.ready(data) }, diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index d0e1825..de0ca01 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -16,7 +16,7 @@ var HelpCursor = View.extend({ }, initialize: function(){ - $('#help-button').click(this.toggle.bind(this)); + $('#help-button').click(this.toggle.bind(this)) }, toggle: function(){ @@ -28,10 +28,6 @@ var HelpCursor = View.extend({ this.active = true this.message('start') this.$el.show() -// $('body').chardinJs('start') -// $(window).one("click", function(){ -// $('body').chardinJs('stop') -// }) this.move({ pageX: -1000, pageY: -10000 }) this.moveFn = this.move.bind(this) document.addEventListener("mousemove", this.moveFn) @@ -52,7 +48,12 @@ var HelpCursor = View.extend({ }, show: function(name){ - this.showMessage(name) + if (this.active) { + this.$el.show() + } + }, + hide: function(){ + this.$el.hide() }, message: function(name){ -- cgit v1.2.3-70-g09d2 From 30acfabe90d189e067949b0a806682eb5b3ef3a6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Oct 2014 11:33:41 -0400 Subject: active class on help cursor --- public/assets/javascripts/ui/editor/HelpCursor.js | 6 +++++- public/assets/stylesheets/app.css | 4 +++- 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index de0ca01..7268b32 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -16,7 +16,9 @@ var HelpCursor = View.extend({ }, initialize: function(){ - $('#help-button').click(this.toggle.bind(this)) + this.helpButton = $('#help-button') + + this.helpButton.click(this.toggle.bind(this)) }, toggle: function(){ @@ -27,6 +29,7 @@ var HelpCursor = View.extend({ if (this.active) return this.active = true this.message('start') + this.helpButton.addClass('active') this.$el.show() this.move({ pageX: -1000, pageY: -10000 }) this.moveFn = this.move.bind(this) @@ -36,6 +39,7 @@ var HelpCursor = View.extend({ stop: function(){ this.active = false this.$el.hide() + this.helpButton.removeClass('active') document.removeEventListener("mousemove", this.moveFn) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index bc52d5a..d7876da 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -153,10 +153,12 @@ a{ font-size: 24px; padding: 18px 27px 0 8px; } -.topLinks a.ion-help-circled:hover { +.topLinks a.ion-help-circled.active, +.topLinks a.ion-help-circled:hover { background:transparent; color:red; } + .page #header { background: white; border-bottom: 1px solid; -- cgit v1.2.3-70-g09d2 From 2e863090cda5d6f0d9d96e5be8a7284fa57ec69f Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 29 Oct 2014 13:24:08 -0400 Subject: thingy --- public/assets/javascripts/ui/editor/HelpCursor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index de0ca01..2752a5f 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -10,7 +10,7 @@ var HelpCursor = View.extend({ addmedia: "Great, now click a wall to place this image.", resize: "Drag the image to position it, or use the dots to resize.", presets: "These are some basic presets to get you started. Click em! :-)", - wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.", + wallpaper: "Click the wallpaper you want then apply it to the walls. Feel free to upload your own too!", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", }, -- cgit v1.2.3-70-g09d2 From 68f3943062919ae081deb3a105dcd1513969b9ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 3 Nov 2014 15:29:23 -0500 Subject: filesize error alert --- public/assets/javascripts/ui/editor/HelpCursor.js | 2 +- public/assets/javascripts/ui/editor/MediaUpload.js | 5 +++++ public/assets/javascripts/ui/lib/UploadView.js | 6 ++++++ server/lib/api/media.js | 2 +- server/lib/upload.js | 2 +- 5 files changed, 14 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 8ada237..1f18910 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -19,6 +19,7 @@ var HelpCursor = View.extend({ this.helpButton = $('#help-button') this.helpButton.click(this.toggle.bind(this)) + this.$el.html(this.messages['start']) }, toggle: function(){ @@ -28,7 +29,6 @@ var HelpCursor = View.extend({ start: function(){ if (this.active) return this.active = true - this.message('start') this.helpButton.addClass('active') this.$el.show() this.move({ pageX: -1000, pageY: -10000 }) diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index b3f4ac3..65778dd 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -62,6 +62,11 @@ var MediaUpload = UploadView.extend({ this.parent.mediaViewer.addUploadedMedia(media) }, + error: function(error){ + console.log(error) + alert(error.errors.media.message) + }, + beforeUpload: function(){ this.parent.mediaViewer.deleteArmed(false) } diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js index 2d2c2c7..4b56828 100644 --- a/public/assets/javascripts/ui/lib/UploadView.js +++ b/public/assets/javascripts/ui/lib/UploadView.js @@ -77,6 +77,9 @@ var UploadView = View.extend({ success: function(media){ if (media.error) { + // console.log(media.error) + this.$upload.removeClass('uploading') + this.error(media.error) return } this.$upload.removeClass('uploading') @@ -86,5 +89,8 @@ var UploadView = View.extend({ add: function(media){ console.log(media) }, + + error: function(error){ + }, }) diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 4e2fad5..85cbdd6 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -49,7 +49,7 @@ var media = { upload.put("media", req.files.image, { username: req.user.username, unacceptable: function(err){ - res.json({ error: { errors: { avatar: { message: "Problem saving image: " + err } } } }) + res.json({ error: { errors: { media: { message: "Problem saving image: " + err } } } }) }, success: function(url){ data.url = url diff --git a/server/lib/upload.js b/server/lib/upload.js index e206f7c..f6e22da 100644 --- a/server/lib/upload.js +++ b/server/lib/upload.js @@ -41,7 +41,7 @@ module.exports.put = function (key, file, opt) { err = "file too small" } else if (file.size > 2097152) { // 2mb limit - err = "file too large" + err = "file too large. Uploads can be a maximum of 2 mb." } if (err) { -- cgit v1.2.3-70-g09d2 From ba4fc6aa719ec42419cbf9da15311f3f01c508ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 3 Nov 2014 15:42:59 -0500 Subject: builder help --- public/assets/javascripts/ui/builder/BuilderInfo.js | 6 ++++++ public/assets/javascripts/ui/editor/HelpCursor.js | 1 + 2 files changed, 7 insertions(+) (limited to 'public/assets/javascripts/ui/editor/HelpCursor.js') diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 4fd145d..e1c90c8 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -46,6 +46,12 @@ var BuilderInfo = View.extend({ this.$settings.toggle( !! this.room ) this.$noSelection.toggle( ! this.room ) this.$el.toggleClass("active", state) + if (state) { + this.parent.cursor.message("builder") + } + else { + this.parent.cursor.message("start") + } }, show: function(){ diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js index 1f18910..4c8ff0c 100644 --- a/public/assets/javascripts/ui/editor/HelpCursor.js +++ b/public/assets/javascripts/ui/editor/HelpCursor.js @@ -13,6 +13,7 @@ var HelpCursor = View.extend({ wallpaper: "Click the wallpaper you want then apply it to the walls. Feel free to upload your own too!", colors: "Use these colors to change the color of the walls, floor, and ceiling.", settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.", + builder: "This is a map of your rooms. Draw new boxes, or move and resize the ones that are there. Hit ESCAPE to toggle the map.", }, initialize: function(){ -- cgit v1.2.3-70-g09d2