DecSoft Support - Dynamically Adding Pictures to the Screen

Dynamically Adding Pictures to the Screen

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Take a look at some frequently asked questions about us and our products!

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

John Clarke

I want to create an application where if I click on the screen it dynamically adds an image to it. So lets say this image is 30 pixels by 30 pixels. If I click on the app screen 10 times I will have 10 instances of that image (one instance at each point I clicked). How can I achieve this ?

DecSoft

Hello John,

You place a non too much specific question, that is, something like "I am trying this and this other but I expect this result and get this error message..."... It's possible to do something like you wanted using a bit of Javascript, and, one of the ways in which we can think is what you can see in the below app sample:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.44">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2019-06-28T13:22:39.592</Created>
    <Modified>2019-06-28T13:37:23.904</Modified>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
SetVar "[ImagesCount]" "0" "Number"]]>
      </ShowEvent>
      <ClickEvent>
        <![CDATA[
StartJS

  var
    currentNum = window.App.RootScope.ImagesCount++;

  $('#View1').append('<img style="display: none;" src="app/images/butterfly.png" id="image-' + currentNum + '">');

  $('#image-' + currentNum)
   .css({
     "width": "60px",
     "height": "60px",
     "position": "absolute",
     "top": window.App.RootScope.View1.Event.clientY + "px",
     "left": window.App.RootScope.View1.Event.clientX + "px"
   })
   .fadeIn();

EndJS]]>
      </ClickEvent>
      <Controls>
        <Control Role="40001">
          <Name>Comment1</Name>
          <Top>64</Top>
          <Left>376</Left>
          <Width>400</Width>
          <Height>72</Height>
          <Text>
            <![CDATA[You can take a look at the view's Show and Click events.]]>
          </Text>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images>
      <Path>butterfly.png</Path>
    </Images>
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.44 (6/24/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Save the above code in a file and save it as "MyApp.ab", for example. Before open the file with DecSoft App Builder, look in your computer for a PNG image and copy it aside the "MyApp.ab" file with the name: "butterfly.png". Now yes, open "MyApp.ab" with DecSoft App Builder and run the app.

As you can see, every time you click the view (and the app, since we use the scale app option), the butterfly appear in the position that you clicked.

Purchase one or more licenses of our products if they are useful to you!

John Clarke

You are brilliant - that is exactly what I wanted! Thank you so much!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.