Skip to content

Thumbs Up Conditional Styling #19

@abattentruefit

Description

@abattentruefit

I am unable to get the conditional styling to work of the thumbs up detection feature. I am attempting to follow the example in this section of the documentation: https://docs.quickpose.ai/docs/MobileSDK/Features/Thumbs%20up#conditional-styling

I have modified the Basic Demo provided in the sample applications with the following code:

//
//  QuickPose_BasicDemoApp.swift
//  QuickPose Demo
//
//  Created by QuickPose.ai on 12/12/2022.
//

import SwiftUI
import QuickPoseCore
import QuickPoseSwiftUI

struct QuickPoseBasicView: View {

    private var quickPose = QuickPose(sdkKey: "ApiKeyRemoved") // register for your free key at https://dev.quickpose.ai
    @State private var overlayImage: UIImage?
    @State private var feedbackText: String? = nil
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .top) {
                if ProcessInfo.processInfo.isiOSAppOnMac, let url = Bundle.main.url(forResource: "thumbs-up-test", withExtension: "mov") {
                    QuickPoseSimulatedCameraView(useFrontCamera: false, delegate: quickPose, video: url)
                } else {
                    QuickPoseCameraView(useFrontCamera: true, delegate: quickPose)
                }
                QuickPoseOverlayView(overlayImage: $overlayImage)
            }
            .frame(width: geometry.size.width)
            .edgesIgnoringSafeArea(.all)
            .onAppear {
              let thumbsUpStyle = QuickPose.Style(conditionalColors: [QuickPose.Style.ConditionalColor(min: 0.8, max: nil, color: UIColor.green)])
              let thumbsUpFeature: QuickPose.Feature = .thumbsUp(style: thumbsUpStyle)
              
              let modelConfigCustom = QuickPose.ModelConfig(detailedFaceTracking: false, detailedHandTracking: true, modelComplexity: .heavy)
              quickPose.start(features: [thumbsUpFeature], modelConfig: modelConfigCustom, onFrame: { status, image, features, feedback, landmarks in
                    overlayImage = image
                    if case .success = status {
                      if(features.values.first?.value ?? 0 >= 0.8) {
                        print(features.values)
                      }
                    } else {
                        // show error feedback
                    }
                })
            }.onDisappear {
                quickPose.stop()
            }
            .overlay(alignment: .center) {
              if let feedbackText = feedbackText {
                Text(feedbackText)
                  .font(.system(size: 26, weight: .semibold)).foregroundColor(.white).multilineTextAlignment(.center)
                  .padding(16)
                  .background(RoundedRectangle(cornerRadius: 8).foregroundColor(Color("AccentColor").opacity(0.8)))
                  .padding(.bottom, 40)
              }
            }
        }
    }
}

Here is the video I used to test: https://github.com/user-attachments/assets/0b5b0893-d2d9-4368-a2e5-f6deddf16f58

I can see from the logged output that I am getting a value greater than 0.8 multiple times from my video, however the overlay style never switches to the green color defined in the conditional styling.

I am using QuickPose version 1.2.9 running on a Macbook Pro with an Apple M1 chip.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions