• Replies 10 replies
  • Subscribers 1 subscriber
  • Views 2 views
  • Users 0 members are here
Options
Related

Control Icons Based on Android Lock Screen

Admin
So my android phone has a really neat unlocker widget that allows me to unlock the phone directly to an app. When you power on the phone it displays a lock symbol, you touch the symbol and it expands to a larger circle with app icons on the circumference. Without removing your finger you slide and drag to the app icon that you want to launch. Once your finger is on the icon you let go and that selects the app, unlocking the phone and immediately starting the app.

I want to implement a similar widget for my control screens because they will be touch screens. For instance, a pump icon will expand to show options like start/stop/ status, or interlock conditions etc. I think this is a worthy endeavor for touchscreen applications because it adds a level of extra security against accidental control button presses without the hassle of clicking yes in an "Are you sure?" dialog.

What do you think?
  • This is a topic that the InduSoft community should comment and provide feedback on. Anyone with comments on this topic, please feel free to reply to AlexW below.

    AlexW, if you have a suggestion for product improvement or a new feature, please send an email to requirements@indusoft.com describing it.

    Richard Clark
    InduSoft TMS

  • AlexW,

     

    I like your idea, and decided to try to create a symbol for you.

     

    Click here to download IconSlider.zip.

    Please note: This is not presented as a finished, ready to use symbol it is just a proof of concept. My graphic skills leave a lot to be desired. By downloading this symbol you agree to test and make sure it works.

     

    Unzip this symbol to your system symbols folder. This is usually “C:\Program Files (x86)\InduSoft Web Studio v7.1\Symbol” or similar.

     

    It would be best to try this in a non production, test project.

    Before you insert this symbol create 3 new tags:

    1. Pressed, bool
    2. Horiz, Integer
    3. Vert, Integer

    Once you insert the symbol, open the properties and change the PumpTag value from BlinkSlow to another tag (this will be the tag for the pump On/Off ) something like "PumpCommand"

     The Symbol works by pressing the pump, the stop and check (start) icons appear. Then drag the pump to the desired action. When you release the tag will change, the pump will change color and move back to its original position.

    Hope this is what you were looking for.

    Scott A. Kortier

    Technical Evangelist, InduSoft, Inc.

  • Scott,

    This is amazing! I could just about deploy this today!

    I may have to look into reducing the overall size of the icon in it's waiting state, but other than that it's great and does exactly what I was looking for.

    Thank you,
    -Alex

  • Here is one more example you might want to consider. It is designed around the android widget that you originally asked about. Download the project from here and run it in InduSoft v7.1 SP2. It will not run in earlier releases due to the way it allows you to have variable images on the selector circle.

    When you run it you will get three selectors that look like this,

    If you touch (or left-click the mouse) on the large blue circle, then it will select the next icon as it goes around the circle in clockwise direction. Right-clicking will move in a counter-clockwise direction. The other two examples are more simple. Just drag the silver circle on an icon to select it (or off to un-select).

    These are implemented with two different linked symbols called rotator and android that you can copy to your own project. Both symbols are fully configurable and allow you to have up to eight images on the circle. The rotator symbol has properties that look like this,

    Count is the number of images. Image1 - Image8 are the files to use. The symbols are designed for 64x64 pixel images, but could be easily changed. Resize is used to make the selected image larger than the other images. 150 makes the selected image 150% of normal size. Resize can be between 0 and 100 to scale the selected image between 0% and 200% of normal. Tagname is the name of some integer-type tag to use to store the selection.

    The android symbol has properties that look like this,

    The Count, Image1 - Image8, and Tagname properties are the same as for the rotator symbol. The X and Y properties are used to store the coordinates of the silver circle in real-type tags as it is moved around the larger peach colored circle. Resize is not used in the android symbol. When an image is selected it is scaled to 150%.

    Feel free to use these, but they are provided As-Is. Please post any questions or suggestions to the forum. They are probably bigger than what most people may want, but it would not take much to make them smaller. I may make versions that support 32x32 pixel icons. Any smaller may not be too useful.

    Enjoy.

    Larry Combs
    InduSoft Technical Support Team

  • BTW, the rotator and android symbols do not require multi-touch. They should work on any standard touch screen or with a mouse.

    Larry

  • I just updated the link to the sample project with the two linked symbols. It fixes an issue where one of the symbols had an absolute path instead of relative path. It also includes better multi-touch support. You can download the project from the link in my original post or from here.
  • Thanks Larry. I am going to try these out today.