Create a Thermostat widget.

  • BillBarnet
    Asked on October 7, 2019 at 2:58 PM

    I would like to have a custom image over the knob canvas widget. I need to set up a thermostat like function. If it could somehow look like the link below it would fit our needs perfectly.


    or maybe there is a better way to go about this. the knob canvas has worked out because i am calculating values based on the knob setting


    thanks!

    https://codepen.io/thebabydino/pen/eGvNjr

    Page URL:
    https://form.jotform.com/92777418647170
    Page URL: https://form.jotform.com/92777418647170
  • David JotForm Support Manager
    Replied on October 7, 2019 at 4:45 PM

    Thank you for contacting us. Unfortunately, we don't have that exact widget, I'll submit a feature request to our back-end team to have one, please note that there is no estimated time-frame for a resolution.

    Meanwhile, a possible workaround would be using the Percentage widget: https://www.jotform.com/widgets/percentage

    And customize it with CSS code injection to make it look from this:

    1570480737this Screenshot 10

    To this: https://form.jotform.com/92796755986989

    1570480784heating Screenshot 21

    I accomplished that by injecting this CSS code in the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    #topLoader > div > canvas +div{

    display: none !important;

    }

    #topLoader > div > canvas +div+div:after{

       position: absolute;

        margin-top: 0px !Important;

        font-size: .675em;

        content: "°";

    }

    #topLoader > div > canvas +div+div{

       position: absolute;

        margin-top: -80px !Important;

        font-size: 50px !important;

        height: 50px  !important;

    }

    If you like it, you may simply add the Percentage widget to your form, and inject the highlighted code in the widget, or clone my form version: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Hope this helps, let us know if you have more questions.

  • BillBarnet
    Replied on October 8, 2019 at 6:45 AM

    That definitely looks more like what I am looking for.

    one thing I notice with the percentage widget is that there is no default value option. can this be done with the css code as well?

    I need it to default to 70 and the end user can change it if need be.

    thank you for your help 

  • Richie JotForm Support
    Replied on October 8, 2019 at 7:50 AM

    I have moved your new question to this thread https://www.jotform.com/answers/1992829 to assist your better.

    Kindly follow the link.