Jhipster - [src]="getImageUrl()" for user's avatar image not working - jhipster

I have updated column: image_url in [jhi_user] table with different values, and nothing seems to work, example: image_url= ../../../content/media/angular-js.png
Question:
Where in jhipster's file structure should i create a folder to hold user's profiles pictures, and what should the image_url value be so that it works with
<img [src]="getImageUrl()">
It's worth mentioning that this works:
<img src="../../../content/media/angular-js.png">
i created a folder "media" with image: angular-js.png
I am using mysql database and generator-jhipster: "4.6.2"
Thank you for your help in advance

There are 2 kind of images in web apps: the static assets are used for layout (icons, background, logos, ...) they are bundled within your app and the other ones that can be changed without rebuilding your app and which are data.
Static assets can be long term cached by the browser, this is why JHipster uses webpack to version their URLs with a hash code, to modify files that reference them (html, css) and bundle them.
In your design, your image URL is stored in a column of the User entity that points to an avatar image which is a static asset. So webpack is not able to rewrite it.
So either you exclude these images from webpack build process or you store your images as Blobs in your database to enable your users to upload their own images.
Second option would consist in creating a new entity Avatar that holds the Blob and have a one-to-one relationship with User entity. The reason for another entity si that JHipster does not let you modify the User entity.

Related

How to store content in a Hybris Media file?

In my application we are getting media like photos and Videos from third party and I want to store it in Hybris as a media ?
How can we upload Photos/Videos through the java code in a Hybris Media?
You can check my simple example. Not forget to add exception block. Check CatalogUnawareMedia and CatalogMedia before your implementation. If you are not planning to synchronize third-party objects use CatalogUnawareMedia.
// folder optional
final MediaFolderModel folder = mediaService.getFolder("myfolder");
final CatalogUnawareMediaModel media = getModelService().create(CatalogUnawareMediaModel.class); //or CatalogMediaModel
media.setCode(myFileName);
media.setFolder(folder);
getModelService().save(media);
mediaService.setStreamForMedia(media, myStream);
getModelService().save(media);

Load new images from assets while server is running in Angular

I'm building a nodejs + angular application. On the server-side I have a function that uploads a new image to my angular folder under assets/images/uploads, it also saves the path of where i have uploaded it to a database.
In my angular I want to be able to show that image right after I have uploaded it. I'm trying to do this by saying:
<img mat-card-image src="../../{{users.profilePicture}}" alt="Test">
my users.profilePicture contains the correct path to where my image is stored. This doesn't work because the path is not found. However, if i restart my angular application with "ng serve" the picture will be found and displayed as desired.
I've drawn the conclusion that this must be because the assets of my application are loaded once the application starts, and cannot detect that new ones have been added while the server is already running. Is there any way to bypass this, so that I can get my angular to reload my assets folder and detect that there has been added a new picture to the folder, while the application is already running?
Ng serve loads your app in memory, so newly added items won't include in your compiled app.
You can find some solutions in this SO post:
Serve assets as they are dynamically added

Xpages Layout Control - Node Image path

I use Application Layout control (OneUI 3.0.2) with a few Application Links.
The image path is calculated because the images are saved in a separate image application.
The problem is that the Layout Control always add the path of the current application in front of the calculated link.
The only way i found was to calculate the absolute path (with http://..) to avoid this. But for me this is not a good solution, specially when you want to use a reverseproxy in front.
The image path is relative to current database by default.
Add "/.ibmxspres/domino/" in front of your image path to make it relative to Domino server's data directory instead.
Example:
Application path: /apps/hr/hr.nsf
Image database path: /core/images.nsf
<xe:basicLeafNode
...
image="/.ibmxspres/domino/core/images.nsf/yourImage.gif">
In case the image database is in same directory like your application database you can set image's path relative to current database path.
Navigate from application database path back to common directory with /.. and then to your database.
<xe:basicLeafNode
...
image="/../images.nsf/yourImage.gif">

What is metadata? How do I create a metadata and how do I associate it to a Cloud target using Vuforia?

I modified sample CloudRecog code for my own code. I created cloud database and get AccessKeys then copied this keys to CloudReco.cpp file. What should i use for metadata. I didn't understand this. Then when i was reading sample code i saw this line: private static final String mServerURL = "https://ar.qualcomm.at/samples/cloudreco/json/". How to get my metaData url?
The Vuforia Cloud Recognition Service enables new types of applications in retail and publishing. An application using Cloud Recognition will be able to query a Cloud Database with camera images (actual recognition happens in the cloud), and then handle the matching results returned from the cloud to perform local detection and tracking.
Also, every Cloud Image Target can optionally have an associated Metadata; a target metadata is essentially nothing else than a custom user-defined blob of data that can be associated to a target and filled with custom information, as long as the data size does not exeed the allowed limits (up to 1MB per target).
Therefore, you can use the metadata as a way to store additional content that relates to a specific target, that your application will be able to process using some custom logic.
For example, your application may use the metadata to store:
a simple text message that you want your app to display on the screen of your device when the target is detected, for example:
“Hello, I am your cloud image target XYZ, you have detected me :-) !”
a simple URL string (for instance “http://my_server/my_3d_models/my_model_01.obj”) pointing to a custom network location where you have stored some other content, like a 3D model, a video, an image, or any other custom data, so that for each different image target, your application may use such URL to download the specific content;
more in general, some custom string that your application is able to process and use to perform specific actions
a full 3D model (not just the URL pointing to a model on a server, but the model itself), for example the metadata itself could embed an .OBJ 3D model, provided that the size does not exceed the allowed limits (up to 1MB)
and more ...
How do I create/store metadata for a Cloud target ?
Metadata can be uploaded together with an image target at the time you create the target itself in your Cloud Database; or you can also update the metadata of an existing target, at a later time; in either case, you can use the online TargetManager, as explained here:
https://developer.vuforia.com/resources/dev-guide/managing-targets-cloud-database-using-target-manager
or you can proceed programmatically using the VWS API, as explained here:
https://developer.vuforia.com/resources/dev-guide/managing-targets-cloud-database-using-developer-api
How can I get the metadata of a Cloud target when it is recognized ?
The Vuforia SDK offers a dedicated API to retrieve the metadata of a target in your mobile application. When a Cloud target is detected (recognized), a new TargetSearchResult is reported to the application, and the metadata can be obtained using one of these methods:
Vuforia Native SDK - C++ API: TargetSearchResult::getMetaData() - const char*
Vuforia Native SDK - Java API: TargetSearchResult.getMetaData() - String
Vuforia Unity Extension - C# API: TargetSearchResult.Metadata - string
See also the API reference pages:
https://developer.vuforia.com/resources/api/classcom_1_1qualcomm_1_1vuforia_1_1_target_search_result
https://developer.vuforia.com/resources/api/unity/struct_target_finder_1_1_target_search_result
Sample code:
For a reference sample code in native Android, see the code in the Books.java in the "Books-2-x-y" sample project.
For a reference sample code in native iOS, see the code in the BooksEAGLView.mm file in the "Books-2-x-y" sample project.
For a reference sample code in Unity, see the CloudRecoEventHandler.cs script (attached to theCloudRecognition prefab) in the Books sample; in particular, the OnNewSearchResult method shows how to get a targetSearchResult object (from which you can then get the metadata, as shown in the example code).
EDIT: this is in response to the first part of your question,: "What should i use for metadata" (not the second part about how to find the URL)
Based on their documentation (https://developer.vuforia.com/resources/dev-guide/cloud-targets):
The metadata is passed to the application whenever the Cloud Reco
target is recognized. It is up to the developer to determine the
content of this metadata – Vuforia treats it as a blob and just passes
it along to the application. The maximum size of the uploadable
metadata is 150kByte.
I added some debugging in their CloudRecognition app and saw that the payload (presumably the meta-data) they return when "recognizing" an image is:
{
"thumburl": "https://developer.vuforia.com/samples/cloudreco/thumbs/01_thumbnail.png",
"author": "Karina Borland",
"your price": "43.15",
"title": "Cloud Recognition in Vuforia",
"average rating": "4",
"# of ratings": "41",
"targetid": "a47d2ea6b762459bb0aed1ae9dbbe405",
"bookurl": "https://developer.vuforia.com/samples/cloudreco/book1.php",
"list price": "43.99"
}
The MetaData, uploaded along with your image-target in the CloudReco database, is a .txt-file, containing whatever you want.
What pherris linked, as payload from the sample-application, is in fact the contents of a .json-file that the given image-target's metadata links to.
In the sample application, the structure is as follows:
The application activates the camera and recognizes an image-target
The application then requests that specific image-target's metadata
In this case, the metadata in question is a .txt-file with the following content:
http://www.link-to-a-specific-json-file.com/randomname.json
The application then requests the contents of that specific .json-file
The specific .json-file looks as the copy-pasted text-data that pherris linked
The application uses the text-data from the .json-file to fill out the actual content of the sample application

TYPO3: extension with both backend module and frontend plugin

I am trying to create an extension ('XML Uploader') with a backend module and a frontend plugin also.
The backend module will be used for managing xml files (upload, validate against a DTD), and the frontend plugin should be used for displaying the uploaded xmls.
The problem is with the frontend part:
I followed
the basic extension tutorial - added a new page, created a content element of type 'Insert plugin' - but when trying to add a new record, the type 'XML Uploader' does not appear in the list of new record types. Moreover, the changes made to class.tx_xmluploader_pi1.php have no effect.
So how should I work with the frontend plugin? Or would it be better to create a separate extension instead?
Any help would be very much appreciated.. Thank you.
When creating your table with the extension kickstarter you must check the "Allowed on pages:" checkbox to allow records from this table to be created on regular pages.
If your changes have no effect, it could be that the page is cached by typo3. In that case you can clear or disable the cache with the admin panel or in the page configuration menu.
You have to include the static template of your extension (I presume you used the kickstarter or extension_builder):
go to the your template, in the object browser you should see something like:
plugin.tx_xmluploader_pi1 = USER
if you can't find it, edit your template (edit/modify => edit whole template record) and add your extension template in the tab 'Includes'
Additionally, check your ext_localconf.php for the line
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_xmluploader_pi1.php', '_pi1', 'list_type', 0);
This is where your FE plugin is being registered.

Resources