Bounding box labels

photonixapp · Apr 17, 2019 · dd35971 · dd35971
1 parent b41d4cd
commit dd35971
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/ui/src/components/BoundingBoxes.js b/ui/src/components/BoundingBoxes.js
@@ -20,7 +20,11 @@ const BoundingBoxes = ({ photoWidth, photoHeight, boxes }) => {
           let height = (box.sizeY * displayHeight) + 'px'
           let left = offsetLeft + (box.positionX * displayWidth) - (box.sizeX * displayWidth / 2) + 'px'
           let top = offsetTop + (box.positionY * displayHeight) - (box.sizeY * displayHeight / 2) + 'px'
-          return <div className="FeatureBox" key={index} style={{left: left, top: top, width: width, height: height}} />
+          return (
+            <div className="FeatureBox" key={index} style={{left: left, top: top, width: width, height: height}}>
+              <div className="FeatureLabel" key={index}>{box.name}</div>
+            </div>
+          )
         })
       }
     </div>

diff --git a/ui/src/components/PhotoDetail.js b/ui/src/components/PhotoDetail.js
@@ -9,6 +9,7 @@ const history = createHistory()
 const PhotoDetail = ({ photoId, photo }) => {
   let boxes = photo.objectTags.map((objectTag) => {
     return {
+      name: objectTag.tag.name,
       positionX: objectTag.positionX,
       positionY: objectTag.positionY,
       sizeX: objectTag.sizeX,
@@ -24,7 +25,7 @@ const PhotoDetail = ({ photoId, photo }) => {
             <div className="box">
               <h2>Camera</h2>
               <ul>
-                <li>{photo.camera.make} {photo.camera.model}</li>
+                {photo.camera ? <li>{photo.camera.make} {photo.camera.model}</li> : ''}
                 <li>Aperture: {photo.aperture}</li>
                 <li>Exposure: {photo.exposure}</li>
                 <li>ISO speed: {photo.isoSpeed}</li>

diff --git a/ui/src/static/css/BoundingBoxes.css b/ui/src/static/css/BoundingBoxes.css
@@ -3,7 +3,15 @@
   height: 100%;
 }
 .BoundingBoxes .FeatureBox {
-  border: 3px solid #f00;
+  border: 3px solid rgba(255,0,0,0.75);
   position: absolute;
-  opacity: 0.75;
-}
+}
+.BoundingBoxes .FeatureBox .FeatureLabel {
+  color: #FFF;
+  font-size: 14px;
+  background-color: rgba(255,0,0,0.75);
+  display: inline-block;
+  overflow: hidden;
+  max-width: 100%;
+  padding: 0 5px 2px 2px;
+}