Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Transformez une photo choisie en avatar, image produit ou pièce jointe de rapport. Recadrez, tournez et redimensionnez, puis enregistrez la copie exportée.
Guides bêta publics · instructions Haptics dans sa fiche Bubble
Offre bêta publique : installation Bubble gratuite · essai de 7 jours avec carte, puis 1,50 USD/mois par plugin/projet.
Documentation révisée 6 novembre 2026
Exemples pratiques
Avatars cohérents avant l’envoi
L’utilisateur doit choisir lui-même la partie visible de sa photo de profil au lieu de subir un recadrage arbitraire.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Attendez `source_loaded`, puis Begin crop → Apply crop ; Rotate et Undo restent disponibles. Sur Enregistrer, lancez Export image.
Uniquement sur `export_completed`, transmettez `output_uri`, `output_width`, `output_height` et `output_mime` à votre workflow d’envoi validé, puis enregistrez sa référence durable dans le Profil.
En cas d’annulation ou de `editor_error`, gardez l’ancien avatar. Effacez la session lors du changement de compte pour ne pas exposer le brouillon.
La retouche crée une copie locale. Votre app choisit comment la sauvegarder ou l’envoyer.
Préparer des photos homogènes pour un catalogue
Des cadrages différents et des images trop grandes rendent le catalogue irrégulier et alourdissent les envois.
`source_url = selected item photo` ; `crop_aspect = the app’s chosen ratio` ; `export_max_dimension`, `export_format` et `export_quality` proviennent de votre politique de téléchargement.
Recadrez la zone utile, utilisez Resize si nécessaire, puis Export image après confirmation. Conservez séparément l’original ou sa référence.
Vérifiez `output_width`, `output_height`, `output_bytes` et `output_mime` avant l’envoi. Enregistrez la référence de l’image reçue dans l’Article.
Si l’export échoue ou dépasse votre politique d’envoi, affichez `error_code` et laissez corriger. Ne remplacez pas l’image existante avant confirmation de l’envoi.
La retouche crée une copie locale. Votre app choisit comment la sauvegarder ou l’envoyer.
Créer un détail utile pour un rapport d’intervention
Un technicien peut vouloir montrer une pièce endommagée tout en conservant la photo originale du rapport.
`source_url = Current Report Photo’s source` ; `document_context = the report/account reference` ; le ratio de recadrage peut rester non contraint.
Begin crop → Apply crop, puis Undo/Redo pour comparer. Export image crée la copie modifiée ; votre app demande ensuite s’il faut l’ajouter au rapport.
Utilisez `has_changes`, `can_undo`, `can_redo` et `output_uri`. Après un envoi validé, conservez l’original et la copie dans deux champs distincts.
Cancel crop ou Reset edits permet de revenir en arrière. Une annulation doit laisser intacte la pièce jointe originale du Rapport.
La retouche crée une copie locale. Votre app choisit comment la sauvegarder ou l’envoyer.
Ce qui fonctionne maintenant
Bêta publique. Utilisez les commandes et actions documentées ; testez les formats, les autorisations et le comportement dans votre propre app native. L’aperçu web ne valide pas les résultats sur appareil.
Construire le workflow
Utilisez les actions bêta disponibles ci-dessous et testez le résultat sur vos appareils cibles.
Les exemples utilisent des fiches comme Lesson, Message et Order. Remplacez-les par vos types de données et noms d’éléments. Utilisez vos propres fichiers à la place des adresses d’exemple.
Renseignez source_url avec l’image choisie. document_context identifie le compte et la fiche en cours pour effacer la photo précédente lors d’un changement.
Après source_loaded, lancez Begin crop. Choisissez 1:1 pour un avatar, ajustez puis Apply crop. Cancel crop laisse l’image inchangée.
Utilisez Rotate, Flip ou Resize. Undo et Redo parcourent les modifications terminées ; Reset edits rétablit l’original.
Lancez Export image. À export_completed, lisez output_uri, output_width, output_height et output_mime. Enregistrez ou téléversez cette copie avec votre workflow de fichiers, puis gardez le fichier enregistré dans la fiche.
Configurer une fois
L’activation par clé est prévue pour ce plugin. Créez ou choisissez votre projet Bubble dans BestPlugins → Dashboard → Plugins. Choisissez Xodera Photo Editor Native, copiez sa clé, puis ouvrez Bubble → Plugins → Xodera Photo Editor Native et collez-la dans licensing_api_key. Enregistrez une fois, puis utilisez les actions ci-dessous. Chaque plugin de chaque projet possède sa propre clé.
Votre app doit d’abord choisir ou prendre la photo. Donnez au lecteur l’adresse de cette image. Les autorisations caméra et photothèque dépendent du sélecteur utilisé.
Configurer une fois
- Créez ou choisissez votre projet Bubble dans BestPlugins → Dashboard → Plugins.
- Choisissez ce plugin et copiez sa clé de projet.
- Ouvrez Bubble → Plugins → ce plugin. Collez sa clé de projet dans licensing_api_key et enregistrez.
- Ajoutez l’élément, choisissez vos données et construisez le workflow ci-dessous.
- Dans le tableau de bord, vérifiez et confirmez l’essai de 7 jours avec carte pour ce plugin. Il coûte ensuite 1,50 USD/mois par projet, développement et production inclus. Annulez avant la fin de l’essai pour éviter le premier débit.
Installation et abonnement
Pour Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit et Haptics : installation Bubble gratuite, essai de 7 jours avec carte, puis 1,50 USD par mois, par plugin et projet. Développement et production inclus, sans plafond d’opérations. Les limites de fichier et de fonction restent applicables. Vérifiez facturation et annulation avant confirmation. Les autres plugins ne sont pas ouverts à l’achat.
Enregistrer le résultat dans votre app
Gardez l’image téléversée ou enregistrée durablement dans Profile.image ou votre pièce jointe. output_uri est temporaire sur l’appareil : sauvegardez d’abord le fichier avec votre workflow. Ajoutez ensuite output_width, output_height et output_mime. Gardez l’original si les deux versions sont utiles.
Échec, annulation et reprise
À source_load_failed ou editor_error, affichez error_code et proposez Load source. Après Cancel operation, attendez is_busy=no avant une autre retouche. Clear session vide l’éditeur, sans effacer une image déjà enregistrée ailleurs.
Fonctions et limites
Exportation JPEG et PNG ; qualité 0–1 ; côté de sortie maximal 1–4096 pixels. Entrée : jusqu'à 15 MiB et 20 mégapixels. Jusqu'à 20 modifications terminées. Options de recadrage : libre, 1 : 1, 4 : 3, 3 : 4 et 16 : 9. Pas de caméra intégrée, de filtres, de superpositions de texte, de correction de perspective, d'exportation WebP ou de téléchargement automatique.
Réglages, actions et résultats
Utilisez ces noms dans Bubble. Les fonctionnalités prévues sont marquées séparément.
Paramètres bêta disponibles
Réglages de l’élément
source_url · textdocument_context · textis_active · yes_nodisabled · yes_noshow_controls · yes_nocrop_aspect · textexport_format · textexport_quality · numberexport_max_dimension · numberallow_upscale · yes_noui_text_json · textlanguage · textÉtats
editor_status · textis_busy · yes_nohas_image · yes_nohas_changes · yes_nocan_undo · yes_nocan_redo · yes_noimage_width · numberimage_height · numberoutput_uri · textoutput_width · numberoutput_height · numberoutput_bytes · numberoutput_mime · texterror_code · textcrop_active · yes_nocrop_rect_json · textÉvénements
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_errorActions et paramètres
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionRéglages de l’élément · 12
source_urltext · Défaut: ""- Valeur exemple
https://bestplugins.online/native-samples/avatar.jpg - Expression Bubble exemple
Selected Profile's image_url - Adresse du fichier audio, vidéo ou image choisi. Utilisez un type compatible avec ce plugin.
document_contexttext · Défaut: ""- Valeur exemple
<current-user-id> - Expression Bubble exemple
Current User's unique id - Valeur stable pour ce compte ou cette fiche. Réutilisez-la pour restaurer ses fichiers ou brouillons.
is_activeyes_no · Défaut: true- Valeur exemple
yes - Expression Bubble exemple
GuideHost's view_is_active (your yes/no custom state) - yes tant que cette vue est ouverte ; no en la quittant pour arrêter la lecture ou l’action en cours.
disabledyes_no · Défaut: false- Valeur exemple
no - Expression Bubble exemple
GuideHost's is_busy (your yes/no custom state) - Désactivez l’élément si l’app est occupée ou l’action indisponible.
show_controlsyes_no · Défaut: true- Valeur exemple
yes - Expression Bubble exemple
App Settings' show_editor_controls - Afficher ou masquer les commandes intégrées.
crop_aspecttext · Défaut: "free"- Valeur exemple
1:1 - Expression Bubble exemple
Avatar Settings' crop_ratio - Utilisez la valeur de la fiche courante et les limites ci-dessous.
export_formattext · Défaut: "jpeg"- Valeur exemple
jpeg - Expression Bubble exemple
Format Dropdown's value - Utilisez la valeur de la fiche courante et les limites ci-dessous.
export_qualitynumber · Défaut: 0.85- Valeur exemple
0.85 - Expression Bubble exemple
Image Settings' quality - Utilisez la valeur de la fiche courante et les limites ci-dessous.
export_max_dimensionnumber · Défaut: 2048- Valeur exemple
2048 - Expression Bubble exemple
Image Settings' max_side - Utilisez la valeur de la fiche courante et les limites ci-dessous.
allow_upscaleyes_no · Défaut: false- Valeur exemple
no - Expression Bubble exemple
Allow upscale Checkbox is checked - Utilisez la valeur de la fiche courante et les limites ci-dessous.
ui_text_jsontext · Défaut: ""- Valeur exemple
{} - Expression Bubble exemple
App Settings' player_labels_json (supported keys only) - JSON facultatif avec les libellés de boutons pris en charge. Laissez vide pour les textes intégrés.
languagetext · Défaut: "auto"- Valeur exemple
uk - Expression Bubble exemple
Current User's preferred_language - Utilisez language=auto pour suivre une langue prise en charge sur l’appareil ou dans le navigateur. Saisissez un code de langue pris en charge pour la choisir explicitement.
Actions et paramètres · 13
Load source
Aucun paramètre d’action
Begin crop
Aucun paramètre d’action
Apply crop
origin_xnumber · Défaut: —- Valeur exemple
0 - Expression Bubble exemple
Crop Settings' x (or omit all rectangle inputs) - Utilisez la valeur de la fiche courante et les limites ci-dessous.
origin_ynumber · Défaut: —- Valeur exemple
0 - Expression Bubble exemple
Crop Settings' y (or omit all rectangle inputs) - Utilisez la valeur de la fiche courante et les limites ci-dessous.
widthnumber · Défaut: —- Valeur exemple
512 - Expression Bubble exemple
Resize Width Input's value:converted to number - Utilisez la valeur de la fiche courante et les limites ci-dessous.
heightnumber · Défaut: —- Valeur exemple
512 - Expression Bubble exemple
Resize Height Input's value:converted to number - Utilisez la valeur de la fiche courante et les limites ci-dessous.
Cancel crop
Aucun paramètre d’action
Rotate
degreesnumber · Défaut: —- Valeur exemple
90 - Expression Bubble exemple
Rotation Dropdown's value - Utilisez la valeur de la fiche courante et les limites ci-dessous.
Flip
axistext · Défaut: —- Valeur exemple
horizontal - Expression Bubble exemple
Flip Direction Dropdown's value - Utilisez la valeur de la fiche courante et les limites ci-dessous.
Resize
widthnumber · Défaut: —- Valeur exemple
512 - Expression Bubble exemple
Resize Width Input's value:converted to number - Utilisez la valeur de la fiche courante et les limites ci-dessous.
heightnumber · Défaut: —- Valeur exemple
512 - Expression Bubble exemple
Resize Height Input's value:converted to number - Utilisez la valeur de la fiche courante et les limites ci-dessous.
Undo
Aucun paramètre d’action
Redo
Aucun paramètre d’action
Reset edits
Aucun paramètre d’action
Export image
Aucun paramètre d’action
Cancel operation
Aucun paramètre d’action
Clear session
Aucun paramètre d’action
États et événements
États
editor_status · textRésultat actuel de l’action. Attendez l’événement de fin correspondant avant de valider la réussite.
is_busy · yes_noUne action est en cours. Attendez avant d’en lancer une autre.
has_image · yes_noValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
has_changes · yes_noValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
can_undo · yes_noValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
can_redo · yes_noValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
image_width · numberValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
image_height · numberValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
output_uri · textEmplacement du fichier sur cet appareil. Sauvegardez ou envoyez-le séparément pour le conserver en ligne.
output_width · numberValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
output_height · numberValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
output_bytes · numberValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
output_mime · textValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
error_code · textInformation sur l’erreur de la dernière action. Affichez un message utile et proposez la bonne nouvelle tentative.
crop_active · yes_noValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
crop_rect_json · textValeur actuelle de l’élément choisi. Lisez-la après l’événement correspondant.
Événements
source_loadedÀ cet événement, lisez les états correspondants du même élément.
source_load_failedÀ cet événement, lisez les états correspondants du même élément.
edit_appliedÀ cet événement, lisez les états correspondants du même élément.
edit_undoneÀ cet événement, lisez les états correspondants du même élément.
edit_redoneÀ cet événement, lisez les états correspondants du même élément.
editor_resetÀ cet événement, lisez les états correspondants du même élément.
export_startedÀ cet événement, lisez les états correspondants du même élément.
export_completedÀ cet événement, lisez les états correspondants du même élément.
operation_cancelledÀ cet événement, lisez les états correspondants du même élément.
editor_errorÀ cet événement, lisez les états correspondants du même élément.
Questions des développeurs
output_uri est-il un Bubble File ?
Non, c’est un chemin de cache local. Sauvez ou téléversez avant de conserver une référence cloud.
Comment fonctionne l’abonnement ?
Pour Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit et Haptics : installation Bubble gratuite, essai de 7 jours avec carte, puis 1,50 USD par mois, par plugin et projet. Développement et production inclus, sans plafond d’opérations. Les limites de fichier et de fonction restent applicables. Vérifiez facturation et annulation avant confirmation. Les autres plugins ne sont pas ouverts à l’achat.
Autres exemples du produit
Guides associés
Pour obtenir de l’aide, indiquez le plugin, l’appareil, l’action essayée et le résultat. Utilisez un exemple sans données personnelles. Ne partagez jamais votre clé ni vos fichiers privés.