Derive Image Source & Assign to Variable?

source is an object property for images, so you can read and write. To read this property you will do this by adding an alias to the image:

<image name="picture" alias="PICTURE" source="picture.jpg"></image>

[object:PICTURE.source] = picture.jpg

This also works for urls [object:PICTURE.url]

Could you give an example of an action that reads a picture's source and loads it into a variable?  I've been having trouble with this.  The code below results in an alert that says, "Image Source: nil".

<assign property="var:imgSource" value="[object:PICTURE.source]" />
<alert message="Image Source: [var:imgSource]"/>

What does your image tag look like?

<image name="blue01" alias="PICTURE" source="01.blue.png" style="img2" ></image>

David,

I did some research and it does appear that this IS a write only object property. I have corrected the documentation. 

I think the rationale here is that you are defining that source upfront or using an assign to determine it, so you should always be in a position to know what it is. If you have it set upfront, you can assign your imgSource var oninit and if it changes at any point during an action you can reassign the var as well. 

Do you mean write only?  You can write to an image's source using <assign property="object:PICTURE.source" value="newpicture.jpg">.

If there were a way to read an image's source I could include just 200 image tags and swap between five different images for each depending on what the current one is.  Else, I'll have to include 1,000 separate image tags for my 200 preferences with five options each. :/

yeah I meant write only.

Can you help me understand the workflow? Do you have 800 images in your app that all display oninit?

Oh, for sure. My idea is to have a little 40 x 40 image next to each route listing in my app.  When a user touches the image it will change to the next image in a five image series to give them five different ways to mark the route.  The way I currently have this set up is to have all five images displayed in the same place with the first set to alpha="1" and the rest to alpha="0".  Each image tag has a variable with its name, a variable with the name of the next image in the series, and a variable with the name of the preference being set.  When clicked, the action uses an if statement to determine which preference is being set, then turns the current image to alpha="0" and turns the next image to alpha="1" and assigns the preference.  On start up each preference is read and the corresponding image is set to alpha="1".

Is there a way for me to paste the code here?

Why don't you look at this example and see if it gets you where you need. I think I understand it. 

<wire>
    <main>
       <panel name="main" width="100%" height="100%">
       	<image name="pic" alias="PIC" source="ian1.jpg" onclickup="update" align="center"></image> 
        <panel name="check" width="200" height="100" background="ff0000" align="center" valign="bottom" onclickup="check"></panel>   
       </panel>


    </main>

    <actions>
	<action name="on" oninit="yes">
           <sync> 
            <assign property="var:imgCount" value="1" />
        	<assign property="var:imgSource" value="ian[var:imgCount].jpg" />
           </sync>    
        </action>
        <action name="update">
           <if lhs="[var:imgCount]" operator="lte" rhs="4"> 
            <sync>
               
			<if lhs="[var:imgCount]" operator="e" rhs="4"> 
                <assign property="var:imgCount" value="1" />    
                <else>
                	<assign property="var:imgCount" value="[js:[var:imgCount]+1]" />    
                </else>
            </if>
        	<assign property="var:imgSource" value="ian[var:imgCount].jpg" />
            <assign property="object:PIC.source" value="[var:imgSource]" />
            <assign property="pref:imgSource" value="[var:imgSource]" />
            </sync> 
            <else>
              <assign property="var:imgCount" value="1" />  
              <assign property="var:imgSource" value="ian1.jpg" /> 
              <assign property="object:PIC.source" value="[var:imgSource]" />
              <assign property="pref:imgSource" value="[var:imgSource]" />
           </else>    
           </if>    
           
        </action>
         
        <action name="check">
        	<alert message="VARIABLE:[var:imgSource] PREF:[pref:imgSource] COUNT:[var:imgCount]"/>
        </action>
    </actions>
</wire>

Thank you so much Ian for showing me this use of If statements.  It has allowed me to reduce the size of my wire file by at least 100 lines.