For primary view a "Name" column for text on image...

PA_PA · 05-26-2021 09:22 AM

In my primary view Photo I have a “Name” column for text in my Photo used to display writing on the image. I would like to move its placement a little higher up on the page or down at the bottom? I use mobile view the text displays in the middle… How can I shift it higher?
The edit button I would like to only display in 2nd view, Gallery view, not in photo view. How can i do that without taking away updates altogether?
thanks

WillowMobileSys

There is not a way to do this natively in AppSheet…yet.

Many in the community have been using SVG’s to create some pretty cool images. I believe I read in the one of the posts someone using SVG for text over the Image. I’ll see if I can find it but in the meantime, if you search the posts for SVG’s you will find a lot of info and may be able to work out how to create the image. Once you know how, it’s really not difficult to do.

WillowMobileSys

Here is a post that may prove helpful and the one I referred to. Just need to work out how to pull in the image you wish to place text onto. Which is likely easy.

PA_PA

Hi John, thanks. So the image is a jpg,or it can be a vector file. The app fills the page with the image. If you imagine adding text “on the run” to the pic. How would that fit into what you suggest? In terms of the app. Can I create a box for the text where text is written or add conditioning information (what you wrote) into the Google sheet for the column in question…?

WillowMobileSys

Since you want to add text dynamically and control where it shows, I would have:

[Overlay Text]
[Base Image]
[Updated Image]

Updated Image uses SVG to pull in the Base Image and the Overlay Text. You will have control on where the Text shows using the SVG properties.

Then as @Austin_Lambeth suggests, you can use the CONTEXT() function to determine which view you are in and which image to show. In the Detail View, maybe you don’t need the CONTEXT() function, you simply show the Update Image.

If I can find some time, I’ll try to create an example for you. Hopefully someone will already have one and post it here. Community?

PA_PA

Hi you could view my reply to Austin , what do you mean by show the update image in the context of the screen shots i send?
I think I cannot use SVG because it would require every image to be in SVG format and that may pose some problems…
thanks

to 27. toukok. 2021 klo 1.43 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:

WillowMobileSys

No changes to your existing images would be required.

Actually there is a difference between SVG file types and using SVG HTML code. The SVG concept here is to implement an SVG HTML code snippet into the Image column inside of an expression. That code can be created to use parameters to pull in a base image and use Header Text. The result of the expression is a text string that defines an image - in your case the base image with the text overlayed exactly where you want it.

If you take some of the examples provided in the posts and try them out, you’ll see what I mean. It’s a very powerful tool in AppSheet to enhance our existing images.

PA_PA

For example:
You would add this into Google excel where the source code for a particular image is? This is one for example in the Image column: Photo_L_Images/9053b660.Image.140546.jpg which is the image. There is another column which is the name and is the one in the middle of the pic that I could shift upwards.
To do that I would add your code into the excel cell of every possible image source so that when the image is updated it falls into the code and displays a text box where I can add text?
Can you please elaborate? Just adding the below does not lead to a result it seem but I may be doing it wrong…

elements: [image] <text x="…

thanks

to 27. toukok. 2021 klo 16.01 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:

WillowMobileSys

Sorry, I’ve been away for a long holiday weekend.

There would not be any changes to the spreadsheet at all. As a general rule I advocate to never apply formulas or formatting to a spreadsheet datasource - unless absolutely necessary.

I’ll try to come up with an example.

PA_PA

I understand what you mean, party. I Tried with THE concatenate(. It unfortunately removed thebut did not shift the text up. That variant did not work. I put it in the column. Thanks
B.r.

PA_PA

Thanks. I understand what you mean, partly. I tried with the concatenate(. It unfortunately removed the pic but did not shift the text up. That variant did not work. I put the text string in the column.
I believe this is the one I tried or it is : App formula for column image.

CONCATENATE(“data:image/svg+xml;utf8, <svg xmlns=”“http://www.w3.org/2000/svg”" viewBox="“0 0 100 100"”> <rect width="“100%”" height="“100%”" rx="“20"” fill="“lightblue”"/> <text font-family="“tangerine”" fill="“black”" font-size="“24px”" text-anchor="“top”" x="“50%”" y="“60%”">", [Name] ," ")

The concatenation of all these text values ( …“data:image/svg+xml;utf8, " …The value of column ‘Name’ …” "

It returns: It overrides the image … The image cannot be updated it is just blue… but text can be put in name.

If I write HI in the Name space: I get 2 Hi’s in the pic. The image cannot be updated it is just blue…

The image should of course be the one that is uploaded or saved into the sheet or data file.

You suggested these. The image needs to be updatable and the text in 1 should be in the top most part of the pic… Higher than the red Hi.

[Overlay Text]
[Base Image]
[Updated Image]

Thanks

B.r.

ti 1. kesäk. 2021 klo 22.15 John Baer via AppSheet Creator Community (appsheet@discoursemail.com) kirjoitti:

WillowMobileSys

I think you’re on the right track. There may be some additional tags or properties that allow adding an image into the SVG.

PA_PA

Hi John
When uploading or updating images to my app in a mobile or a computer I dont seem to be able to access Google Drive directly? The app provides choices of take photo or upload from phone files, however google drive and the current profiles folders are not available. How can this be so that they are which would be convenient?
thanks

WillowMobileSys

You cannot. The best you can do is specify, in the column definition in the app, a specific folder to place the files into…if the default is not acceptable.

PA_PA

ok, thanks . it can be saved, moved to the use device folders. But using drive directly would be simpler…Sharing drive folders with corresponding device folders isn’t doable?

Austin

Now im hungry from the pic…
You can hide the editable button based on the view you are in using CONTEXT()
As for adding text, if that image is a detail view where the background was set to the image, I suggest trying the header columns to display some text

PA_PA

The text is center with header column it seems as this is not landscape view, I was thinking if I somewhere can define the header column to be higher up on the page…as opposed to center. thanks.
I think I cannot use SVG because it would require every image to be in SVG format that may pose some problems…as

Do you mean in view definition below Photo L * and inserting expressions…(CONTEXT (VIEW) , LIST(“gallery”, “photo”)) show if(photo) true … something what would it be?

For primary view a "Name" column for text on image. I would like to move its placement higher? And hide the edit button in this view