From 24614e0764ec4655ded8b66ba6832bf8cd3cda1d Mon Sep 17 00:00:00 2001 From: ryderr Date: Mon, 29 Sep 2014 18:56:38 -0400 Subject: css --- views/controls/editor/light-control.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8b133a5..b90b646 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -3,7 +3,7 @@
-

Brightness Control

+

Luminance Control

-- cgit v1.2.3-70-g09d2 From 77f2beed5e554e23cb6ad5d5a555ee710c1e95a1 Mon Sep 17 00:00:00 2001 From: ryderr Date: Tue, 30 Sep 2014 12:32:56 -0400 Subject: labeling some stuff --- public/assets/stylesheets/app.css | 30 +++++++++++++++++------------- views/controls/editor/light-control.ejs | 2 +- views/controls/editor/media-editor.ejs | 1 + views/controls/editor/settings.ejs | 1 + 4 files changed, 20 insertions(+), 14 deletions(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 3748401..6929cef 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1247,18 +1247,13 @@ iframe.embed { .lightcontrol { margin-top: 13%; right: 80px; - padding: 20px; + padding: 13px 20px 20px 20px; -webkit-transform: translateX(400px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateX(400px); transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol h4 { - font-weight: 600; - font-size: 12px; - line-height: 0; - margin-top: 15px; -} + .lightcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); @@ -1278,12 +1273,14 @@ input[type=range] { } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; - background-color: #000; - width: 10px; - height: 10px; + background-color: white; + width: 15px; + height: 15px; border-radius:10px; cursor:pointer; + border:3px solid #000; } + #color-picker { position: relative; } @@ -1353,14 +1350,21 @@ span:hover .swatch { left: 10px; } +.vvbox h4 { + font-weight: 600; + margin-bottom: 10px; + border-bottom: 1px solid #999; + padding-bottom: 6px; +} + .settings { - padding: 20px; + padding: 10px 20px 20px 20px; bottom: 20px; right: 10px; font-size: 12px; - -webkit-transform: translateY(400px); + -webkit-transform: translateY(450px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(400px); + transform: translateY(450px); transition: -webkit-transform 0.2s ease-in-out; } diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index b90b646..410aaff 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -1,9 +1,9 @@
+

Edit Room Colors

-

Luminance Control

diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 000e8db..8f2c1c8 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -1,4 +1,5 @@
+

Media Settings

diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs index ed587fa..ad62b55 100644 --- a/views/controls/editor/settings.ejs +++ b/views/controls/editor/settings.ejs @@ -1,4 +1,5 @@
+

Room Settings

-- cgit v1.2.3-70-g09d2 From df7653219ecef9cabfdb475946d86b6b0e797274 Mon Sep 17 00:00:00 2001 From: ryderr Date: Wed, 1 Oct 2014 16:47:56 -0400 Subject: preset styles --- public/assets/stylesheets/app.css | 19 ++++++++++++++++--- views/controls/editor/light-control.ejs | 18 +++++++++++++++++- 2 files changed, 33 insertions(+), 4 deletions(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d672465..5c76560 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1351,7 +1351,7 @@ iframe.embed { /* COLOR PICKER */ .lightcontrol { - margin-top: 13%; + margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; -webkit-transform: translateX(400px); @@ -1418,12 +1418,27 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } +.color-swatches.defaults { + margin-top: 10px; +} .color-swatches span { display: inline-block; width: 50%; float:left; cursor:pointer; + font-size: 14px; + font-weight: 300; +} +.vvbox .color-swatches ~ h4 { + margin-bottom: -3px; + border-bottom: 1px solid #ddd; + padding-bottom: 6px; + padding-top: 11px; + display: inline-block; + width: 100%; + color: #555; } + .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){ margin-bottom:5px; } @@ -1439,8 +1454,6 @@ input[type="range"]::-webkit-slider-thumb { } .color-swatches label { - font-size: 14px; - font-weight: 300; position: relative; padding-left: 5px; display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 410aaff..37a243c 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -22,7 +22,23 @@
- +

Preset Styles

+
+ + Wireframe + + + Shaded + + + P.Funk + + + SeaPunk + +
+ +
diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs new file mode 100644 index 0000000..205fbdf --- /dev/null +++ b/views/controls/editor/text-editor.ejs @@ -0,0 +1,32 @@ +
+

Edit Text

+ +
+ + +
+ +
+ +
+ +
+ remove from wall +
+
+ + \ No newline at end of file diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 63df73c..92807e1 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -12,9 +12,8 @@ data-role='destroy-media' data-info="delete media" class="icon-ios7-trash-outline"> - --> @@ -26,6 +25,13 @@ data-role='toggle-light-control' data-info="edit room colors" class="icon-ios7-sunny-outline"> + +[[ if (user.username == "test12343") { ]] + +[[ } ]] diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 88d832d..065385d 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -67,7 +67,10 @@ [[ } else if (! profile) { ]] Profile [[ } ]] + + [[ if (opt.editing) { ]] + [[ } ]] [[ } else { ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2e2d8b6..1ce180a 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -100,6 +100,7 @@ + -- cgit v1.2.3-70-g09d2 From f5ab61241bf9519325a36b86ee74ab2df13a4331 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 14:43:45 -0400 Subject: colorpicker presets --- .../assets/javascripts/rectangles/models/wall.js | 2 -- .../assets/javascripts/ui/editor/LightControl.js | 33 ++++++++++++++++++++++ public/assets/javascripts/ui/reader/MediaPlayer.js | 4 +-- public/assets/stylesheets/app.css | 8 ++++-- views/controls/editor/light-control.ejs | 10 +++---- 5 files changed, 46 insertions(+), 11 deletions(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 93e1f42..820fb5f 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -230,8 +230,6 @@ this.background = background this.background.src = this.background.src.replace("url(","").replace(")","") - console.log(background) - if (this.background.src == "none") { this.wallpaperLoad(this.background.src) return diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..2b7cfaa 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -10,6 +10,7 @@ var LightControl = View.extend({ "input #brightness-control": "updateBrightness", "input #outline-hue": "updateShadow", "input #wall-hue": "updateShadow", + "click .presets span": "selectPreset", }, initialize: function(){ @@ -114,6 +115,38 @@ var LightControl = View.extend({ this.setMode(mode) }, + presets: { + wireframe: { + wall: [255,255,255], + outline: [0,0,0], + floor: [246,246,246], + ceiling: [255,255,255], + }, + shaded: { + wall: [205,205,204], + outline: [0,0,0], + floor: [109,116,106], + ceiling: [159,163,157], + }, + pfunk: { + wall: [255,63,78], + outline: [255,246,0], + floor: [255,255,0], + ceiling: [225,118,252], + }, + seapunk: { + wall: [110,255,255], + outline: [146,133,255], + floor: [89,221,255], + ceiling: [139,255,173], + }, + }, + selectPreset: function(e){ + var preset = $(e.currentTarget).data('preset') + if (! this.presets[preset]) return + this.load(this.presets[preset]) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index df2d075..6195ab6 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -53,8 +53,8 @@ var MediaPlayer = FormView.extend({ this.bind(scenery) this.$el.addClass("active") - this.$name.html(media.title) - this.$description.html(media.description) + this.$name.html( sanitize(media.title) ) + this.$description.html( marked(media.description) ) switch (media.type) { case "image": diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eb3bd87..15f29c3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1475,13 +1475,17 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } -.color-swatches.defaults { +.presets { margin-top: 10px; } -.color-swatches.defaults span{ +.presets span { font-size:12px; font-weight:500; + display: inline-block; + width: 50%; + float:left; + cursor:pointer; } .color-swatches span { display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index fdf95a7..1fc4484 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -23,17 +23,17 @@

Preset Styles

-
- +
+ Wireframe - + Shaded - + P.Funk - + SeaPunk
-- cgit v1.2.3-70-g09d2 From 4dede1ce3a31cfb17cbad80749863725a9957d19 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 18:38:43 -0400 Subject: inverse colors --- public/assets/javascripts/ui/editor/LightControl.js | 11 ++++++----- public/assets/stylesheets/app.css | 6 +++++- views/controls/editor/light-control.ejs | 6 +++--- 3 files changed, 14 insertions(+), 9 deletions(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 2b7cfaa..51e6be7 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -134,17 +134,18 @@ var LightControl = View.extend({ floor: [255,255,0], ceiling: [225,118,252], }, - seapunk: { - wall: [110,255,255], - outline: [146,133,255], - floor: [89,221,255], - ceiling: [139,255,173], + inverse: { + wall: [0,0,0], + outline: [0,230,255], + floor: [0,0,0], + ceiling: [0,0,0], }, }, selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return this.load(this.presets[preset]) + $(e.currentTarget).addClass('active') }, beginBrightness: function(){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b4d176f..f770637 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1529,6 +1529,10 @@ input[type="range"]::-webkit-slider-thumb { width: 50%; float:left; cursor:pointer; + border-bottom: 1px transparent solid; +} +.presets span.active { + border-bottom: 1px dotted; } .color-swatches span { display: inline-block; @@ -1589,7 +1593,7 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; -webkit-transform: translateY(500px); -webkit-transition: -webkit-transform 0.2s ease-in-out; - transform: translateY(450px); + transform: translateY(500px); transition: -webkit-transform 0.2s ease-in-out; width: 210px; } diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 1fc4484..8f42d8d 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -30,11 +30,11 @@ Shaded + + Inverse + P.Funk - - SeaPunk -
-- cgit v1.2.3-70-g09d2 From 763950e94505cb4db48b0d093673ddd919b2f788 Mon Sep 17 00:00:00 2001 From: ryderr Date: Fri, 10 Oct 2014 19:06:17 -0400 Subject: presets --- public/assets/stylesheets/app.css | 4 ++-- views/controls/editor/light-control.ejs | 16 ---------------- views/editor.ejs | 1 + 3 files changed, 3 insertions(+), 18 deletions(-) (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 93de396..a40c131 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1430,7 +1430,7 @@ border-left: 1px solid black; /* WALLPAPER PICKER */ -.wallpaper { +.wallpaper, .presets { right: 80px; margin-top: 77px; width: 172px; @@ -1440,7 +1440,7 @@ border-left: 1px solid black; transform: translateX(400px); padding: 5px 5px 9px 5px; } -.wallpaper.active { +.wallpaper.active, .presets:active { display:inline-block; -webkit-transform: translateX(0px); transform: translateX(0px); diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index 8f42d8d..8b20464 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -21,20 +21,4 @@
- -

Preset Styles

-
- - Wireframe - - - Shaded - - - Inverse - - - P.Funk - -
diff --git a/views/editor.ejs b/views/editor.ejs index 24f617c..330e69b 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -20,6 +20,7 @@ [[ include controls/editor/text-editor ]] [[ include controls/editor/collaborators ]] [[ include controls/editor/settings ]] + [[ include controls/editor/presets ]]
-- 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 'views/controls/editor/light-control.ejs') 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 'views/controls/editor/light-control.ejs') 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 513a272520222784d67dc22c1ac833aa47a9c844 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:58:28 -0400 Subject: rename light control to color control --- .../javascripts/mx/extensions/mx.movements.js | 4 +- .../javascripts/rectangles/engine/scenery/undo.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 2 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/ColorControl.js | 305 +++++++++++++++++++++ .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorToolbar.js | 20 +- public/assets/javascripts/ui/editor/EditorView.js | 2 +- .../assets/javascripts/ui/editor/LightControl.js | 305 --------------------- public/assets/javascripts/ui/editor/Presets.js | 2 +- public/assets/stylesheets/app.css | 6 +- views/controls/editor/color-control.ejs | 28 ++ views/controls/editor/light-control.ejs | 28 -- views/controls/editor/toolbar.ejs | 2 +- views/editor.ejs | 2 +- views/partials/scripts.ejs | 2 +- 16 files changed, 358 insertions(+), 358 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/ColorControl.js delete mode 100644 public/assets/javascripts/ui/editor/LightControl.js create mode 100644 views/controls/editor/color-control.ejs delete mode 100644 views/controls/editor/light-control.ejs (limited to 'views/controls/editor/light-control.ejs') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 40e786d..c2a2473 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -131,8 +131,8 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() $(".inuse").removeClass("inuse") } - else if (app.controller.lightControl.$el.hasClass('active')) { - app.controller.lightControl.hide() + else if (app.controller.colorControl.$el.hasClass('active')) { + app.controller.colorControl.hide() $(".inuse").removeClass("inuse") } else if (app.controller.wallpaperPicker.$el.hasClass('active')) { diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index bee8c49..ff4f911 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -122,7 +122,7 @@ type: "update-colors", undo: function(state){ Walls.setColor[ state.mode ]( state.rgb ) - app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb ) + app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb ) Minotaur.watch( app.router.editorView.settings ) }, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index fe67e9b..c8c8880 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({ this.$id.val(data._id) this.$name.val(data.name) - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() data.rooms && Rooms.deserialize(data.rooms) data.startPosition && scene.camera.move(data.startPosition) diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index a89111f..735274e 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -11,7 +11,7 @@ var BuilderView = View.extend({ this.info = new BuilderInfo ({ parent: this }) this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) }, load: function(name){ diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js new file mode 100644 index 0000000..26358f1 --- /dev/null +++ b/public/assets/javascripts/ui/editor/ColorControl.js @@ -0,0 +1,305 @@ + +var ColorControl = View.extend({ + el: ".colorcontrol", + + events: { + "mousedown": "stopPropagation", + "click .color-swatches span": "select", + "mousedown #brightness-control": "beginBrightness", + "input #brightness-control": "updateBrightness", + }, + + 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(opt){ + this.parent = opt.parent + + this.colorPicker = new LabColorPicker(this, 180, 180) + this.$("#color-picker").append( this.colorPicker.canvas ) + this.$("#color-picker").append( this.colorPicker.cursor ) + + this.$swatches = this.$(".swatch") + this.$labels = this.$(".swatch + label") + this.$swatch = { + wall: this.$("#wall-color"), + outline: this.$("#outline-color"), + floor: this.$("#floor-color"), + 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" ], + + load: function(data){ + this.modes.forEach(function(mode){ + Walls.setColor[mode](data[mode]) + this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) + }.bind(this)) + this.setMode("wall") + }, + + loadDefaults: function(){ + var colors = { + wall: app.defaults.colors.wall.slice(), + outline: app.defaults.colors.outline.slice(), + floor: app.defaults.colors.floor.slice(), + ceiling: app.defaults.colors.ceiling.slice(), + } + this.load(colors) + }, + + toggle: function(state){ + this.$el.toggleClass("active", state); + }, + + show: function(){ + this.parent.cursor.message("colors") + this.toggle(true) + }, + + hide: function(){ + this.toggle(false) + }, + + pick: function(rgb, Lab){ + this.labColor = Lab + this.setSwatchColor(this.mode, rgb) + // console.log(rgb) + Walls.setColor[ this.mode ](rgb) + }, + + setSwatchColor: function(mode, rgb) { + this.$swatch[ mode ].css("background-color", rgb_string(rgb)) + }, + + initialState: null, + + begin: function(){ + this.initialState = this.serialize() + }, + + serialize: function(){ + return { + mode: this.mode, + rgb: Walls.colors[ this.mode ] + } + }, + + finalize: function(){ + if (! this.initialState) { return } + UndoStack.push({ + type: 'update-colors', + undo: this.initialState, + redo: this.serialize(), + }) + + this.initialState = null + + // TODO: watch individual wall object here + Minotaur.watch( app.router.editorView.settings ) + }, + + setMode: function (mode) { + var color, brightness + this.mode = mode + this.$(".active").removeClass("active") + this.$swatch[ mode ].parent().addClass("active") + color = Walls.colors[ mode ] + + this.labColor = this.colorPicker.load(color) + this.$brightnessControl.val( this.labColor[0] ) + }, + + select: function(e){ + var mode = $('.swatch', e.currentTarget).data('mode') + this.setMode(mode) + }, + + beginBrightness: function(){ + this.begin() + $(window).one("mouseup", this.finalize.bind(this)) + }, + + updateBrightness: function(){ + this.labColor[0] = parseFloat( this.$brightnessControl.val() ) + var rgb = this.colorPicker.setLab( this.labColor ) + this.pick(rgb, this.labColor) + }, + +}) + +var LabColorPicker = function (parent, w, h) { + var base = this + var canvas = this.canvas = document.createElement('canvas') + var ctx = this.ctx = canvas.getContext('2d') + var imageData = ctx.createImageData(w,h) + var data = imageData.data + + var cursor = this.cursor = document.createElement("div") + cursor.className = "colorPickerCursor" + + canvas.width = w + canvas.height = h + canvas.className = "colorPicker" + + var ww = w-1 + var hh = h-1 + + var L_range = [0, 110] + var a_range = [-86.185, 98.254] + var b_range = [-107.863, 94.482] + + var rgb = [0,0,0] + + var val = 80 + + this.mouse = new mouse({ + el: canvas, + down: function(e, cursor){ + parent.begin() + cursor.x.a = -cursor.x.a + base.pick(cursor.x.a, cursor.y.a) + }, + drag: function(e, cursor){ + cursor.x.b = -cursor.x.b + base.pick(cursor.x.b, cursor.y.b) + }, + up: function(){ + parent.finalize() + } + }) + + this.setLab = function(Lab) { + val = Lab[0] + this.paint() + var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) + return rgb + } + this.pick = function(i, j){ + i = clamp(i, 0, w) + j = clamp(j, 0, h) + var x = mix( i/ww, a_range[0], a_range[1] ) + var y = mix( j/hh, b_range[0], b_range[1] ) + var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) + this.moveCursor(i, j) + parent.pick( rgb, [val,x,y] ) + } + this.load = function(rgba){ + var Lab = xyz2hunterlab(rgb2xyz(rgba)) + var val = clamp( Lab[0], L_range[0], L_range[1] ) + var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) + var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) + + this.moveCursor(x,y) + this.setLab(Lab) + return Lab + } + this.moveCursor = function(x,y){ + cursor.style.left = x + "px" + cursor.style.top = y + "px" + } + this.paint = function() { + val = clamp(val, L_range[0], L_range[1]) + var x, y, t + for (var i = 0; i < w; i++) { + for (var j = 0; j < h; j++) { + x = mix( i/ww, a_range[0], a_range[1] ) + y = mix( j/hh, b_range[0], b_range[1] ) + t = (j*w + i) * 4 + rgb = xyz2rgb(hunterlab2xyz(val, x, y)) + data[t] = Math.round( rgb[0] ) + data[t+1] = Math.round( rgb[1] ) + data[t+2] = Math.round( rgb[2] ) + data[t+3] = 255 + } + } + ctx.putImageData(imageData,0,0) + } + + function hunterlab2xyz (L,a,b) { + var_Y = L / 10 + var_X = a / 17.5 * L / 10 + var_Z = b / 7 * L / 10 + + Y = Math.pow(var_Y, 2) + X = ( var_X + Y ) / 1.02 + Z = -( var_Z - Y ) / 0.847 + xyz = [X,Y,Z] + } + function xyz2rgb(){ + var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) + var var_Y = xyz[1] / 100 //Y from 0 to 100.000 + var var_Z = xyz[2] / 100 //Z from 0 to 108.883 + + var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 + var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 + var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 + + if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 + else var_R = 12.92 * var_R + if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 + else var_G = 12.92 * var_G + if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 + else var_B = 12.92 * var_B + + rgb[0] = clamp(var_R * 255, 0, 255) + rgb[1] = clamp(var_G * 255, 0, 255) + rgb[2] = clamp(var_B * 255, 0, 255) + return rgb + } + function rgb2xyz(RGB){ + var var_R = ( RGB[0] / 255 ) // R from 0 to 255 + var var_G = ( RGB[1] / 255 ) // G from 0 to 255 + var var_B = ( RGB[2] / 255 ) // B from 0 to 255 + + if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) + else var_R = var_R / 12.92 + if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) + else var_G = var_G / 12.92 + if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) + else var_B = var_B / 12.92 + + var_R = var_R * 100 + var_G = var_G * 100 + var_B = var_B * 100 + + //Observer. = 2°, Illuminant = D65 + var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 + var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 + var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 + return [x,y,z] + } + function xyz2hunterlab (XYZ) { + var X = XYZ[0] + var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) + var Z = XYZ[2] + var L = 10 * sqrt( Y ) + var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) + var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) + return [L,a,b] + } +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index c0c140f..664b102 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({ } if (data.colors && data.colors.wall) { - this.parent.lightControl.load(data.colors) + this.parent.colorControl.load(data.colors) } else { - this.parent.lightControl.loadDefaults() + this.parent.colorControl.loadDefaults() } if (data.walls) { diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index a460bbf..dceae3c 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -10,7 +10,7 @@ var EditorToolbar = View.extend({ "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='toggle-presets']": 'togglePresets', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', - "click [data-role='toggle-light-control']": 'toggleLightControl', + "click [data-role='toggle-color-control']": 'toggleColorControl', "click [data-role='toggle-text-editor']": 'toggleTextEditor', }, @@ -46,7 +46,7 @@ var EditorToolbar = View.extend({ this.toggleMap(false) this.parent.textEditor.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.wallpaperPicker.hide() this.parent.mediaEditor.hide() this.parent.settings.toggle() @@ -75,7 +75,7 @@ var EditorToolbar = View.extend({ this.parent.textEditor.hide() this.parent.wallpaperPicker.hide() this.parent.presets.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() }, @@ -111,7 +111,7 @@ var EditorToolbar = View.extend({ this.resetMode() $("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state) this.parent.mediaEditor.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() @@ -119,17 +119,17 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.toggle(state) }, - toggleLightControl: function(){ - var state = ! $("[data-role='toggle-light-control']").hasClass("inuse") + toggleColorControl: function(){ + var state = ! $("[data-role='toggle-color-control']").hasClass("inuse") this.resetMode() - $("[data-role='toggle-light-control']").toggleClass("inuse", state) + $("[data-role='toggle-color-control']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) - this.parent.lightControl.toggle(state) + this.parent.colorControl.toggle(state) }, toggleTextEditor: function(){ @@ -138,7 +138,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.parent.settings.hide() this.parent.presets.hide() this.toggleMap(false) @@ -153,7 +153,7 @@ var EditorToolbar = View.extend({ this.parent.wallpaperPicker.hide() this.parent.textEditor.hide() this.parent.settings.hide() - this.parent.lightControl.hide() + this.parent.colorControl.hide() this.toggleMap(false) this.parent.presets.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 05d1bec..9946feb 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -17,7 +17,7 @@ var EditorView = View.extend({ this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) - this.lightControl = new LightControl ({ parent: this }) + this.colorControl = new ColorControl ({ parent: this }) this.textEditor = new TextEditor ({ parent: this }) this.collaborators = new Collaborators ({ parent: this }) this.presets = new Presets ({ parent: this }) diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js deleted file mode 100644 index 10f8d2c..0000000 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ /dev/null @@ -1,305 +0,0 @@ - -var LightControl = View.extend({ - el: ".lightcontrol", - - events: { - "mousedown": "stopPropagation", - "click .color-swatches span": "select", - "mousedown #brightness-control": "beginBrightness", - "input #brightness-control": "updateBrightness", - }, - - 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(opt){ - this.parent = opt.parent - - this.colorPicker = new LabColorPicker(this, 180, 180) - this.$("#color-picker").append( this.colorPicker.canvas ) - this.$("#color-picker").append( this.colorPicker.cursor ) - - this.$swatches = this.$(".swatch") - this.$labels = this.$(".swatch + label") - this.$swatch = { - wall: this.$("#wall-color"), - outline: this.$("#outline-color"), - floor: this.$("#floor-color"), - 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" ], - - load: function(data){ - this.modes.forEach(function(mode){ - Walls.setColor[mode](data[mode]) - this.$swatch[ mode ].css("background-color", rgb_string(data[mode])) - }.bind(this)) - this.setMode("wall") - }, - - loadDefaults: function(){ - var colors = { - wall: app.defaults.colors.wall.slice(), - outline: app.defaults.colors.outline.slice(), - floor: app.defaults.colors.floor.slice(), - ceiling: app.defaults.colors.ceiling.slice(), - } - this.load(colors) - }, - - toggle: function(state){ - this.$el.toggleClass("active", state); - }, - - show: function(){ - this.parent.cursor.message("colors") - this.toggle(true) - }, - - hide: function(){ - this.toggle(false) - }, - - pick: function(rgb, Lab){ - this.labColor = Lab - this.setSwatchColor(this.mode, rgb) - // console.log(rgb) - Walls.setColor[ this.mode ](rgb) - }, - - setSwatchColor: function(mode, rgb) { - this.$swatch[ mode ].css("background-color", rgb_string(rgb)) - }, - - initialState: null, - - begin: function(){ - this.initialState = this.serialize() - }, - - serialize: function(){ - return { - mode: this.mode, - rgb: Walls.colors[ this.mode ] - } - }, - - finalize: function(){ - if (! this.initialState) { return } - UndoStack.push({ - type: 'update-colors', - undo: this.initialState, - redo: this.serialize(), - }) - - this.initialState = null - - // TODO: watch individual wall object here - Minotaur.watch( app.router.editorView.settings ) - }, - - setMode: function (mode) { - var color, brightness - this.mode = mode - this.$(".active").removeClass("active") - this.$swatch[ mode ].parent().addClass("active") - color = Walls.colors[ mode ] - - this.labColor = this.colorPicker.load(color) - this.$brightnessControl.val( this.labColor[0] ) - }, - - select: function(e){ - var mode = $('.swatch', e.currentTarget).data('mode') - this.setMode(mode) - }, - - beginBrightness: function(){ - this.begin() - $(window).one("mouseup", this.finalize.bind(this)) - }, - - updateBrightness: function(){ - this.labColor[0] = parseFloat( this.$brightnessControl.val() ) - var rgb = this.colorPicker.setLab( this.labColor ) - this.pick(rgb, this.labColor) - }, - -}) - -var LabColorPicker = function (parent, w, h) { - var base = this - var canvas = this.canvas = document.createElement('canvas') - var ctx = this.ctx = canvas.getContext('2d') - var imageData = ctx.createImageData(w,h) - var data = imageData.data - - var cursor = this.cursor = document.createElement("div") - cursor.className = "colorPickerCursor" - - canvas.width = w - canvas.height = h - canvas.className = "colorPicker" - - var ww = w-1 - var hh = h-1 - - var L_range = [0, 110] - var a_range = [-86.185, 98.254] - var b_range = [-107.863, 94.482] - - var rgb = [0,0,0] - - var val = 80 - - this.mouse = new mouse({ - el: canvas, - down: function(e, cursor){ - parent.begin() - cursor.x.a = -cursor.x.a - base.pick(cursor.x.a, cursor.y.a) - }, - drag: function(e, cursor){ - cursor.x.b = -cursor.x.b - base.pick(cursor.x.b, cursor.y.b) - }, - up: function(){ - parent.finalize() - } - }) - - this.setLab = function(Lab) { - val = Lab[0] - this.paint() - var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round) - return rgb - } - this.pick = function(i, j){ - i = clamp(i, 0, w) - j = clamp(j, 0, h) - var x = mix( i/ww, a_range[0], a_range[1] ) - var y = mix( j/hh, b_range[0], b_range[1] ) - var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round) - this.moveCursor(i, j) - parent.pick( rgb, [val,x,y] ) - } - this.load = function(rgba){ - var Lab = xyz2hunterlab(rgb2xyz(rgba)) - var val = clamp( Lab[0], L_range[0], L_range[1] ) - var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww ) - var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh ) - - this.moveCursor(x,y) - this.setLab(Lab) - return Lab - } - this.moveCursor = function(x,y){ - cursor.style.left = x + "px" - cursor.style.top = y + "px" - } - this.paint = function() { - val = clamp(val, L_range[0], L_range[1]) - var x, y, t - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { - x = mix( i/ww, a_range[0], a_range[1] ) - y = mix( j/hh, b_range[0], b_range[1] ) - t = (j*w + i) * 4 - rgb = xyz2rgb(hunterlab2xyz(val, x, y)) - data[t] = Math.round( rgb[0] ) - data[t+1] = Math.round( rgb[1] ) - data[t+2] = Math.round( rgb[2] ) - data[t+3] = 255 - } - } - ctx.putImageData(imageData,0,0) - } - - function hunterlab2xyz (L,a,b) { - var_Y = L / 10 - var_X = a / 17.5 * L / 10 - var_Z = b / 7 * L / 10 - - Y = Math.pow(var_Y, 2) - X = ( var_X + Y ) / 1.02 - Z = -( var_Z - Y ) / 0.847 - xyz = [X,Y,Z] - } - function xyz2rgb(){ - var var_X = xyz[0] / 100 //X from 0 to 95.047 (Observer = 2°, Illuminant = D65) - var var_Y = xyz[1] / 100 //Y from 0 to 100.000 - var var_Z = xyz[2] / 100 //Z from 0 to 108.883 - - var_R = var_X * 3.2406 + var_Y * -1.5372 + var_Z * -0.4986 - var_G = var_X * -0.9689 + var_Y * 1.8758 + var_Z * 0.0415 - var_B = var_X * 0.0557 + var_Y * -0.2040 + var_Z * 1.0570 - - if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055 - else var_R = 12.92 * var_R - if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055 - else var_G = 12.92 * var_G - if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055 - else var_B = 12.92 * var_B - - rgb[0] = clamp(var_R * 255, 0, 255) - rgb[1] = clamp(var_G * 255, 0, 255) - rgb[2] = clamp(var_B * 255, 0, 255) - return rgb - } - function rgb2xyz(RGB){ - var var_R = ( RGB[0] / 255 ) // R from 0 to 255 - var var_G = ( RGB[1] / 255 ) // G from 0 to 255 - var var_B = ( RGB[2] / 255 ) // B from 0 to 255 - - if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4) - else var_R = var_R / 12.92 - if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4) - else var_G = var_G / 12.92 - if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4) - else var_B = var_B / 12.92 - - var_R = var_R * 100 - var_G = var_G * 100 - var_B = var_B * 100 - - //Observer. = 2°, Illuminant = D65 - var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805 - var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722 - var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505 - return [x,y,z] - } - function xyz2hunterlab (XYZ) { - var X = XYZ[0] - var Y = XYZ[1] || 1e-6 // otherwise divide-by-zero error when converting rgb(0,0,0) - var Z = XYZ[2] - var L = 10 * sqrt( Y ) - var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) ) - var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) ) - return [L,a,b] - } -} diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js index 4edc957..a3dc610 100644 --- a/public/assets/javascripts/ui/editor/Presets.js +++ b/public/assets/javascripts/ui/editor/Presets.js @@ -54,7 +54,7 @@ var Presets = View.extend({ selectPreset: function(e){ var preset = $(e.currentTarget).data('preset') if (! this.presets[preset]) return - this.parent.lightControl.load(this.presets[preset]) + this.parent.colorControl.load(this.presets[preset]) this.$(".active").removeClass('active') $(e.currentTarget).addClass('active') }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1ab1198..d7999b9 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,7 @@ border-left: 1px solid black; /* COLOR PICKER */ -.lightcontrol { +.colorcontrol { margin-top: 8%; right: 80px; padding: 13px 20px 20px 20px; @@ -1592,11 +1592,11 @@ border-left: 1px solid black; transition: -webkit-transform 0.2s ease-in-out; } -.lightcontrol.active { +.colorcontrol.active { -webkit-transform: translateX(0px); transform: translateX(0px); } -.lightcontrol .slider { +.colorcontrol .slider { } h4 { font-weight:300; diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs new file mode 100644 index 0000000..040808e --- /dev/null +++ b/views/controls/editor/color-control.ejs @@ -0,0 +1,28 @@ +
+

Edit Room Colors

+ +
+
+ + + +
+ +
+ +
+ +
+ + +
+ + +
+ + +
+ +
+
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs deleted file mode 100644 index 99d68f5..0000000 --- a/views/controls/editor/light-control.ejs +++ /dev/null @@ -1,28 +0,0 @@ -
-

Edit Room Colors

- -
-
- - - -
- -
- -
- -
- - -
- - -
- - -
- -
-
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 1bb31b8..7b08db6 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -29,7 +29,7 @@ data-info="add wallpaper" class="ion-ios7-keypad-outline">