formatted text for annotation hotspots

IdeaSpaceVR · Feb 15, 2018 · bed32a6 · bed32a6
1 parent 8634192
commit bed32a6
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## 1.2
 
-- Fixed teleportation issues with Oculus Rift touch controllers
+- Bug fix: Oculus Rift touch controllers work now in VR
+- Allow formatted text in hotspot annotations
+
 
 ## 1.1
 

diff --git a/config.php b/config.php
@@ -4,7 +4,7 @@
 
   '#theme-name' => 'IdeaSpace 3D Model',
   '#theme-key' => 'ideaspace-3d-model',
-  '#theme-version' => '1.1',
+  '#theme-version' => '1.2',
   '#ideaspace-version' => '>=1.1.0',
   '#theme-description' => '3D model viewer with info hotspots. Attach text annotations to hotspots.',
   '#theme-author-name' => 'IdeaSpaceVR',
@@ -26,9 +26,9 @@
           '#description' => 'Enter some text.',
           '#help' => 'Enter some text.',
           '#type' => 'textarea',
-          '#maxlength' => 150, 
+          '#maxlength' => 700, 
           '#rows' => 10, 
-          '#contentformat' => 'text', 
+          '#contentformat' => 'html/text', 
           '#required' => true,
         ],
 

diff --git a/css/style.css b/css/style.css
@@ -40,4 +40,25 @@ body {
   100% { transform: rotate(360deg); }
 }
 
+.cover {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    overflow: hidden;
+    background-color: #000000;
+}
+
+.annotation-text-texture {
+    font-family: Arial;
+    width: 512px;
+    height: 170px;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: -2;
+    overflow: hidden;
+}
 
diff --git a/js/aframe-html-shader-component/LICENSE b/js/aframe-html-shader-component/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Mayo Tobita
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/js/aframe-html-shader-component/aframe-html-shader.min.js b/js/aframe-html-shader-component/aframe-html-shader.min.js
diff --git a/js/main.js b/js/main.js
@@ -12,8 +12,8 @@ if (scene.hasLoaded) {
 function run() {
 
     // ORBIT CAMERA DRAG START / END EVENT LISTENERS
-//    document.querySelector('#camera').addEventListener('start-drag-orbit-controls', handleDragStart );
-//    document.querySelector('#camera').addEventListener('end-drag-orbit-controls', handleDragEnd );
+    document.querySelector('#camera').addEventListener('start-drag-orbit-controls', handleDragStart );
+    document.querySelector('#camera').addEventListener('end-drag-orbit-controls', handleDragEnd );
 }
 
 function handleDragStart(event) {

diff --git a/views/.scene.blade.php.swp b/views/.scene.blade.php.swp
diff --git a/views/index.blade.php b/views/index.blade.php
@@ -25,9 +25,9 @@
     <meta property="og:url" content="{{ \Request::url() }}" />
 
     <link rel="stylesheet" href="{{ url($theme_dir . '/css/style.css') }}">
-    <!--script src="{{ url($theme_dir . '/js/aframe/aframe-master.min.js') }}"></script//-->
     <script src="{{ url($theme_dir . '/js/aframe/aframe-v0.7.1.min.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/gradientsky.min.js') }}"></script>
+		<script src="{{ url($theme_dir . '/js/aframe-html-shader-component/aframe-html-shader.min.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/aframe-extras/aframe-extras.loaders.min.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/aframe-orbit-controls/aframe-orbit-controls-component.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/kframe/aframe-look-at-component.min.js') }}"></script>
@@ -36,6 +36,7 @@
     <script src="{{ url($theme_dir . '/js/isvr-hotspot.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/isvr-annotation.js') }}"></script>
     <script src="{{ url($theme_dir . '/js/isvr-teleportation.js') }}"></script>
+<script src="{{ url($theme_dir . '/js/aframe-log-component.min.js') }}"></script>
 </head>
 <body>
 

diff --git a/views/scene.blade.php b/views/scene.blade.php
@@ -204,13 +204,18 @@ class="annotation"
                                 position="0 0 0.01" 
                                 material="color: {{ $annotation['#content']['background-color']['#value'] }}"> 
                                 <!-- text //-->
-                                <a-plane width="0.77" height="0.2" position="0 0 0.02" color="{{ $annotation['#content']['background-color']['#value'] }}">
+                                <a-plane 
+																		material="shader: html; target: #annotation-text-texture-content-id-{{ $annotation['#content-id'] }}; transparent: false; ratio: width"
+																		width="0.77" 
+																		height="0.2" 
+																		position="0 0 0.02">
+                                <!--a-plane width="0.77" height="0.2" position="0 0 0.02" color="{{ $annotation['#content']['background-color']['#value'] }}">
                                     <a-text 
                                         value="{{ (isset($annotation['#content'])?$annotation['#content']['text']['#value']:'') }}" 
                                         color="{{ $annotation['#content']['text-color']['#value'] }}" 
                                         anchor="center" 
                                         width="0.77">
-                                    </a-text>
+                                    </a-text//-->
                                 </a-plane>
                             </a-entity>
                         </a-entity>
@@ -228,4 +233,19 @@ class="annotation"
 
     </a-scene>
 
+
+		<div class="cover">
+    </div>
+
+		@if (isset($content['model'][0]['attach-annotations']))
+
+				@foreach ($content['model'][0]['attach-annotations']['#positions'] as $annotation)
+						<div id="annotation-text-texture-content-id-{{ $annotation['#content-id'] }}" class="annotation-text-texture" style="background-color:{{ $annotation['#content']['background-color']['#value'] }}; color:{{ $annotation['#content']['text-color']['#value'] }}">
+            {!! (isset($annotation['#content'])?$annotation['#content']['text']['#value']:'') !!}
+        		</div>
+				@endforeach
+
+		@endif
+
+
 @endsection