forked from Techsystech/web
ADD web_widget_model_viewer
eLBati
parent
84d7d4e132
commit
287a427735
|
|
@ -0,0 +1,120 @@
|
|||
===================
|
||||
Model viewer widget
|
||||
===================
|
||||
|
||||
.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
|
||||
.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
|
||||
:target: https://odoo-community.org/page/development-status
|
||||
:alt: Beta
|
||||
.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
|
||||
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
|
||||
:alt: License: AGPL-3
|
||||
.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
|
||||
:target: https://github.com/OCA/web/tree/12.0/web_widget_model_viewer
|
||||
:alt: OCA/web
|
||||
.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
|
||||
:target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_model_viewer
|
||||
:alt: Translate me on Weblate
|
||||
.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
|
||||
:target: https://runbot.odoo-community.org/runbot/162/12.0
|
||||
:alt: Try me on Runbot
|
||||
|
||||
|badge1| |badge2| |badge3| |badge4| |badge5|
|
||||
|
||||
``<model-viewer>`` is a web component that makes rendering interactive 3D models - optionally in AR - easy to do, on as many browsers and devices as possible. ``<model-viewer>`` strives to give you great defaults for rendering quality and performance.
|
||||
|
||||
See `source repository <https://github.com/google/model-viewer>`_ and `documentation <https://modelviewer.dev/>`_.
|
||||
|
||||
The model to load is a GLTF 2.0 file format.
|
||||
|
||||
See `<https://www.khronos.org/gltf/>`_ and GLTF overview:
|
||||
|
||||
.. figure:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/gltfOverview.png
|
||||
|
||||
Many engine developers have already started transitioning to glTF 2.0 to reap performance, portability and quality benefits, including BabylonJS, three.js, Cesium, Sketchfab, and xeogl and instant3Dhub engines. glTF 2.0 is also seeing industry support by companies such as Adobe, Google, Marmoset, Microsoft, NVIDIA, Oculus, UX3D, and more as well as prominent universities such as, University of Pennsylvania and Sapienza University of Rome.
|
||||
|
||||
"example" directory contains the GLB file of a chair, that is rendered in the following way:
|
||||
|
||||
.. figure:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/Eames_Lounge_Chair.gif
|
||||
|
||||
**Table of contents**
|
||||
|
||||
.. contents::
|
||||
:local:
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
Add ``widget="model_viewer"`` to your binary field in form view. Optionally you can set ``height`` and ``width`` attributes.
|
||||
|
||||
Changelog
|
||||
=========
|
||||
|
||||
12.0.2.0.0 (2020-07-14)
|
||||
~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
* [IMP] fullscreen and view redesign
|
||||
|
||||
12.0.1.0.0 (2020-07-10)
|
||||
~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
* Start of the history.
|
||||
|
||||
Bug Tracker
|
||||
===========
|
||||
|
||||
Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us smashing it by providing a detailed and welcomed
|
||||
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_model_viewer%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
|
||||
|
||||
Do not contact contributors directly about support or help with technical issues.
|
||||
|
||||
Credits
|
||||
=======
|
||||
|
||||
Authors
|
||||
~~~~~~~
|
||||
|
||||
* TAKOBI
|
||||
* Openindustry.it
|
||||
|
||||
Contributors
|
||||
~~~~~~~~~~~~
|
||||
|
||||
* Lorenzo Battistini (https://takobi.online)
|
||||
* Andrea Piovesana (https://openindustry.it)
|
||||
|
||||
Other credits
|
||||
~~~~~~~~~~~~~
|
||||
|
||||
Chair © Copyright 2020 Shopify Inc., licensed under CC-BY-4.0.
|
||||
|
||||
Maintainers
|
||||
~~~~~~~~~~~
|
||||
|
||||
This module is maintained by the OCA.
|
||||
|
||||
.. image:: https://odoo-community.org/logo.png
|
||||
:alt: Odoo Community Association
|
||||
:target: https://odoo-community.org
|
||||
|
||||
OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||
mission is to support the collaborative development of Odoo features and
|
||||
promote its widespread use.
|
||||
|
||||
.. |maintainer-eLBati| image:: https://github.com/eLBati.png?size=40px
|
||||
:target: https://github.com/eLBati
|
||||
:alt: eLBati
|
||||
|
||||
Current `maintainer <https://odoo-community.org/page/maintainer-role>`__:
|
||||
|
||||
|maintainer-eLBati|
|
||||
|
||||
This module is part of the `OCA/web <https://github.com/OCA/web/tree/12.0/web_widget_model_viewer>`_ project on GitHub.
|
||||
|
||||
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
# Copyright 2020 Andrea Piovesana @ Openindustry.it
|
||||
# Copyright 2020 Lorenzo Battistini @ TAKOBI
|
||||
# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
|
||||
{
|
||||
"name": "Model viewer widget",
|
||||
"summary": "Easily display interactive 3D models on the web & in AR",
|
||||
"version": "12.0.2.0.0",
|
||||
"development_status": "Beta",
|
||||
"category": "Web",
|
||||
"website": "https://github.com/OCA/web",
|
||||
"author": "TAKOBI, Openindustry.it, Odoo Community Association (OCA)",
|
||||
"maintainers": ["eLBati"],
|
||||
"license": "AGPL-3",
|
||||
"depends": [
|
||||
"web",
|
||||
],
|
||||
"data": [
|
||||
"views/assets.xml",
|
||||
],
|
||||
"qweb": [
|
||||
"static/src/xml/*.xml",
|
||||
],
|
||||
"application": False,
|
||||
"installable": True,
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,68 @@
|
|||
# Translation of Odoo Server.
|
||||
# This file contains the translation of the following modules:
|
||||
# * web_widget_model_viewer
|
||||
#
|
||||
msgid ""
|
||||
msgstr ""
|
||||
"Project-Id-Version: Odoo Server 12.0\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"POT-Creation-Date: 2020-07-14 15:43+0000\n"
|
||||
"PO-Revision-Date: 2020-07-14 17:44+0200\n"
|
||||
"Last-Translator: <>\n"
|
||||
"Language-Team: \n"
|
||||
"MIME-Version: 1.0\n"
|
||||
"Content-Type: text/plain; charset=UTF-8\n"
|
||||
"Content-Transfer-Encoding: 8bit\n"
|
||||
"Plural-Forms: \n"
|
||||
"Language: it\n"
|
||||
"X-Generator: Poedit 2.0.6\n"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/js/web_widget_model_viewer.js:57
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:27
|
||||
#, python-format
|
||||
msgid "3D model"
|
||||
msgstr "Modello 3D"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:8
|
||||
#, python-format
|
||||
msgid "Clear"
|
||||
msgstr "Eliminare"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/js/web_widget_model_viewer.js:57
|
||||
#, python-format
|
||||
msgid "Could not display the selected model."
|
||||
msgstr "Impossibile visualizzare il modello selezionatp"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:7
|
||||
#, python-format
|
||||
msgid "Edit"
|
||||
msgstr "Modificare"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:29
|
||||
#, python-format
|
||||
msgid "Fullscreen"
|
||||
msgstr "Schermo intero"
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:10
|
||||
#, python-format
|
||||
msgid "Uploading..."
|
||||
msgstr "Caricamento..."
|
||||
|
||||
#. module: web_widget_model_viewer
|
||||
#. openerp-web
|
||||
#: code:addons/web_widget_model_viewer/static/src/xml/web_widget_model_viewer.xml:29
|
||||
#, python-format
|
||||
msgid "View fullscreen"
|
||||
msgstr "Vista schermo intero"
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
* Lorenzo Battistini (https://takobi.online)
|
||||
* Andrea Piovesana (https://openindustry.it)
|
||||
|
|
@ -0,0 +1 @@
|
|||
Chair © Copyright 2020 Shopify Inc., licensed under CC-BY-4.0.
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
``<model-viewer>`` is a web component that makes rendering interactive 3D models - optionally in AR - easy to do, on as many browsers and devices as possible. ``<model-viewer>`` strives to give you great defaults for rendering quality and performance.
|
||||
|
||||
See `source repository <https://github.com/google/model-viewer>`_ and `documentation <https://modelviewer.dev/>`_.
|
||||
|
||||
The model to load is a GLTF 2.0 file format.
|
||||
|
||||
See `<https://www.khronos.org/gltf/>`_ and GLTF overview:
|
||||
|
||||
.. figure:: ../static/img/gltfOverview.png
|
||||
|
||||
Many engine developers have already started transitioning to glTF 2.0 to reap performance, portability and quality benefits, including BabylonJS, three.js, Cesium, Sketchfab, and xeogl and instant3Dhub engines. glTF 2.0 is also seeing industry support by companies such as Adobe, Google, Marmoset, Microsoft, NVIDIA, Oculus, UX3D, and more as well as prominent universities such as, University of Pennsylvania and Sapienza University of Rome.
|
||||
|
||||
"example" directory contains the GLB file of a chair, that is rendered in the following way:
|
||||
|
||||
.. figure:: ../static/img/Eames_Lounge_Chair.gif
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
12.0.2.0.0 (2020-07-14)
|
||||
~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
* [IMP] fullscreen and view redesign
|
||||
|
||||
12.0.1.0.0 (2020-07-10)
|
||||
~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
* Start of the history.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Add ``widget="model_viewer"`` to your binary field in form view. Optionally you can set ``style`` and ``max_upload_size`` (in MB) attributes.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,464 @@
|
|||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
|
||||
<title>Model viewer widget</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
:Author: David Goodger (goodger@python.org)
|
||||
:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
|
||||
:Copyright: This stylesheet has been placed in the public domain.
|
||||
|
||||
Default cascading style sheet for the HTML output of Docutils.
|
||||
|
||||
See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
|
||||
customize this style sheet.
|
||||
*/
|
||||
|
||||
/* used to remove borders from tables and images */
|
||||
.borderless, table.borderless td, table.borderless th {
|
||||
border: 0 }
|
||||
|
||||
table.borderless td, table.borderless th {
|
||||
/* Override padding for "table.docutils td" with "! important".
|
||||
The right padding separates the table cells. */
|
||||
padding: 0 0.5em 0 0 ! important }
|
||||
|
||||
.first {
|
||||
/* Override more specific margin styles with "! important". */
|
||||
margin-top: 0 ! important }
|
||||
|
||||
.last, .with-subtitle {
|
||||
margin-bottom: 0 ! important }
|
||||
|
||||
.hidden {
|
||||
display: none }
|
||||
|
||||
.subscript {
|
||||
vertical-align: sub;
|
||||
font-size: smaller }
|
||||
|
||||
.superscript {
|
||||
vertical-align: super;
|
||||
font-size: smaller }
|
||||
|
||||
a.toc-backref {
|
||||
text-decoration: none ;
|
||||
color: black }
|
||||
|
||||
blockquote.epigraph {
|
||||
margin: 2em 5em ; }
|
||||
|
||||
dl.docutils dd {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Uncomment (and remove this text!) to get bold-faced definition list terms
|
||||
dl.docutils dt {
|
||||
font-weight: bold }
|
||||
*/
|
||||
|
||||
div.abstract {
|
||||
margin: 2em 5em }
|
||||
|
||||
div.abstract p.topic-title {
|
||||
font-weight: bold ;
|
||||
text-align: center }
|
||||
|
||||
div.admonition, div.attention, div.caution, div.danger, div.error,
|
||||
div.hint, div.important, div.note, div.tip, div.warning {
|
||||
margin: 2em ;
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.admonition p.admonition-title, div.hint p.admonition-title,
|
||||
div.important p.admonition-title, div.note p.admonition-title,
|
||||
div.tip p.admonition-title {
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
div.attention p.admonition-title, div.caution p.admonition-title,
|
||||
div.danger p.admonition-title, div.error p.admonition-title,
|
||||
div.warning p.admonition-title, .code .error {
|
||||
color: red ;
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
/* Uncomment (and remove this text!) to get reduced vertical space in
|
||||
compound paragraphs.
|
||||
div.compound .compound-first, div.compound .compound-middle {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
div.compound .compound-last, div.compound .compound-middle {
|
||||
margin-top: 0.5em }
|
||||
*/
|
||||
|
||||
div.dedication {
|
||||
margin: 2em 5em ;
|
||||
text-align: center ;
|
||||
font-style: italic }
|
||||
|
||||
div.dedication p.topic-title {
|
||||
font-weight: bold ;
|
||||
font-style: normal }
|
||||
|
||||
div.figure {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
div.footer, div.header {
|
||||
clear: both;
|
||||
font-size: smaller }
|
||||
|
||||
div.line-block {
|
||||
display: block ;
|
||||
margin-top: 1em ;
|
||||
margin-bottom: 1em }
|
||||
|
||||
div.line-block div.line-block {
|
||||
margin-top: 0 ;
|
||||
margin-bottom: 0 ;
|
||||
margin-left: 1.5em }
|
||||
|
||||
div.sidebar {
|
||||
margin: 0 0 0.5em 1em ;
|
||||
border: medium outset ;
|
||||
padding: 1em ;
|
||||
background-color: #ffffee ;
|
||||
width: 40% ;
|
||||
float: right ;
|
||||
clear: right }
|
||||
|
||||
div.sidebar p.rubric {
|
||||
font-family: sans-serif ;
|
||||
font-size: medium }
|
||||
|
||||
div.system-messages {
|
||||
margin: 5em }
|
||||
|
||||
div.system-messages h1 {
|
||||
color: red }
|
||||
|
||||
div.system-message {
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.system-message p.system-message-title {
|
||||
color: red ;
|
||||
font-weight: bold }
|
||||
|
||||
div.topic {
|
||||
margin: 2em }
|
||||
|
||||
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
|
||||
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
|
||||
margin-top: 0.4em }
|
||||
|
||||
h1.title {
|
||||
text-align: center }
|
||||
|
||||
h2.subtitle {
|
||||
text-align: center }
|
||||
|
||||
hr.docutils {
|
||||
width: 75% }
|
||||
|
||||
img.align-left, .figure.align-left, object.align-left, table.align-left {
|
||||
clear: left ;
|
||||
float: left ;
|
||||
margin-right: 1em }
|
||||
|
||||
img.align-right, .figure.align-right, object.align-right, table.align-right {
|
||||
clear: right ;
|
||||
float: right ;
|
||||
margin-left: 1em }
|
||||
|
||||
img.align-center, .figure.align-center, object.align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table.align-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left }
|
||||
|
||||
.align-center {
|
||||
clear: both ;
|
||||
text-align: center }
|
||||
|
||||
.align-right {
|
||||
text-align: right }
|
||||
|
||||
/* reset inner alignment in figures */
|
||||
div.align-right {
|
||||
text-align: inherit }
|
||||
|
||||
/* div.align-center * { */
|
||||
/* text-align: left } */
|
||||
|
||||
.align-top {
|
||||
vertical-align: top }
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle }
|
||||
|
||||
.align-bottom {
|
||||
vertical-align: bottom }
|
||||
|
||||
ol.simple, ul.simple {
|
||||
margin-bottom: 1em }
|
||||
|
||||
ol.arabic {
|
||||
list-style: decimal }
|
||||
|
||||
ol.loweralpha {
|
||||
list-style: lower-alpha }
|
||||
|
||||
ol.upperalpha {
|
||||
list-style: upper-alpha }
|
||||
|
||||
ol.lowerroman {
|
||||
list-style: lower-roman }
|
||||
|
||||
ol.upperroman {
|
||||
list-style: upper-roman }
|
||||
|
||||
p.attribution {
|
||||
text-align: right ;
|
||||
margin-left: 50% }
|
||||
|
||||
p.caption {
|
||||
font-style: italic }
|
||||
|
||||
p.credits {
|
||||
font-style: italic ;
|
||||
font-size: smaller }
|
||||
|
||||
p.label {
|
||||
white-space: nowrap }
|
||||
|
||||
p.rubric {
|
||||
font-weight: bold ;
|
||||
font-size: larger ;
|
||||
color: maroon ;
|
||||
text-align: center }
|
||||
|
||||
p.sidebar-title {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold ;
|
||||
font-size: larger }
|
||||
|
||||
p.sidebar-subtitle {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
p.topic-title {
|
||||
font-weight: bold }
|
||||
|
||||
pre.address {
|
||||
margin-bottom: 0 ;
|
||||
margin-top: 0 ;
|
||||
font: inherit }
|
||||
|
||||
pre.literal-block, pre.doctest-block, pre.math, pre.code {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
pre.code .ln { color: grey; } /* line numbers */
|
||||
pre.code, code { background-color: #eeeeee }
|
||||
pre.code .comment, code .comment { color: #5C6576 }
|
||||
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
|
||||
pre.code .literal.string, code .literal.string { color: #0C5404 }
|
||||
pre.code .name.builtin, code .name.builtin { color: #352B84 }
|
||||
pre.code .deleted, code .deleted { background-color: #DEB0A1}
|
||||
pre.code .inserted, code .inserted { background-color: #A3D289}
|
||||
|
||||
span.classifier {
|
||||
font-family: sans-serif ;
|
||||
font-style: oblique }
|
||||
|
||||
span.classifier-delimiter {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
span.interpreted {
|
||||
font-family: sans-serif }
|
||||
|
||||
span.option {
|
||||
white-space: nowrap }
|
||||
|
||||
span.pre {
|
||||
white-space: pre }
|
||||
|
||||
span.problematic {
|
||||
color: red }
|
||||
|
||||
span.section-subtitle {
|
||||
/* font-size relative to parent (h1..h6 element) */
|
||||
font-size: 80% }
|
||||
|
||||
table.citation {
|
||||
border-left: solid 1px gray;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docinfo {
|
||||
margin: 2em 4em }
|
||||
|
||||
table.docutils {
|
||||
margin-top: 0.5em ;
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
table.footnote {
|
||||
border-left: solid 1px black;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docutils td, table.docutils th,
|
||||
table.docinfo td, table.docinfo th {
|
||||
padding-left: 0.5em ;
|
||||
padding-right: 0.5em ;
|
||||
vertical-align: top }
|
||||
|
||||
table.docutils th.field-name, table.docinfo th.docinfo-name {
|
||||
font-weight: bold ;
|
||||
text-align: left ;
|
||||
white-space: nowrap ;
|
||||
padding-left: 0 }
|
||||
|
||||
/* "booktabs" style (no vertical lines) */
|
||||
table.docutils.booktabs {
|
||||
border: 0px;
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.docutils.booktabs * {
|
||||
border: 0px;
|
||||
}
|
||||
table.docutils.booktabs th {
|
||||
border-bottom: thin solid;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
|
||||
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
|
||||
font-size: 100% }
|
||||
|
||||
ul.auto-toc {
|
||||
list-style-type: none }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="document" id="model-viewer-widget">
|
||||
<h1 class="title">Model viewer widget</h1>
|
||||
|
||||
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_model_viewer"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_model_viewer"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
|
||||
<p><tt class="docutils literal"><span class="pre"><model-viewer></span></tt> is a web component that makes rendering interactive 3D models - optionally in AR - easy to do, on as many browsers and devices as possible. <tt class="docutils literal"><span class="pre"><model-viewer></span></tt> strives to give you great defaults for rendering quality and performance.</p>
|
||||
<p>See <a class="reference external" href="https://github.com/google/model-viewer">source repository</a> and <a class="reference external" href="https://modelviewer.dev/">documentation</a>.</p>
|
||||
<p>The model to load is a GLTF 2.0 file format.</p>
|
||||
<p>See <a class="reference external" href="https://www.khronos.org/gltf/">https://www.khronos.org/gltf/</a> and GLTF overview:</p>
|
||||
<div class="figure">
|
||||
<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/gltfOverview.png" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/gltfOverview.png" />
|
||||
</div>
|
||||
<p>Many engine developers have already started transitioning to glTF 2.0 to reap performance, portability and quality benefits, including BabylonJS, three.js, Cesium, Sketchfab, and xeogl and instant3Dhub engines. glTF 2.0 is also seeing industry support by companies such as Adobe, Google, Marmoset, Microsoft, NVIDIA, Oculus, UX3D, and more as well as prominent universities such as, University of Pennsylvania and Sapienza University of Rome.</p>
|
||||
<p>“example” directory contains the GLB file of a chair, that is rendered in the following way:</p>
|
||||
<div class="figure">
|
||||
<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/Eames_Lounge_Chair.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_model_viewer/static/img/Eames_Lounge_Chair.gif" />
|
||||
</div>
|
||||
<p><strong>Table of contents</strong></p>
|
||||
<div class="contents local topic" id="contents">
|
||||
<ul class="simple">
|
||||
<li><a class="reference internal" href="#usage" id="id3">Usage</a></li>
|
||||
<li><a class="reference internal" href="#changelog" id="id4">Changelog</a><ul>
|
||||
<li><a class="reference internal" href="#id1" id="id5">12.0.2.0.0 (2020-07-14)</a></li>
|
||||
<li><a class="reference internal" href="#id2" id="id6">12.0.1.0.0 (2020-07-10)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a class="reference internal" href="#bug-tracker" id="id7">Bug Tracker</a></li>
|
||||
<li><a class="reference internal" href="#credits" id="id8">Credits</a><ul>
|
||||
<li><a class="reference internal" href="#authors" id="id9">Authors</a></li>
|
||||
<li><a class="reference internal" href="#contributors" id="id10">Contributors</a></li>
|
||||
<li><a class="reference internal" href="#other-credits" id="id11">Other credits</a></li>
|
||||
<li><a class="reference internal" href="#maintainers" id="id12">Maintainers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="usage">
|
||||
<h1><a class="toc-backref" href="#id3">Usage</a></h1>
|
||||
<p>Add <tt class="docutils literal"><span class="pre">widget="model_viewer"</span></tt> to your binary field in form view. Optionally you can set <tt class="docutils literal">height</tt> and <tt class="docutils literal">width</tt> attributes.</p>
|
||||
</div>
|
||||
<div class="section" id="changelog">
|
||||
<h1><a class="toc-backref" href="#id4">Changelog</a></h1>
|
||||
<div class="section" id="id1">
|
||||
<h2><a class="toc-backref" href="#id5">12.0.2.0.0 (2020-07-14)</a></h2>
|
||||
<ul class="simple">
|
||||
<li>[IMP] fullscreen and view redesign</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="id2">
|
||||
<h2><a class="toc-backref" href="#id6">12.0.1.0.0 (2020-07-10)</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Start of the history.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" id="bug-tracker">
|
||||
<h1><a class="toc-backref" href="#id7">Bug Tracker</a></h1>
|
||||
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us smashing it by providing a detailed and welcomed
|
||||
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_model_viewer%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
|
||||
<p>Do not contact contributors directly about support or help with technical issues.</p>
|
||||
</div>
|
||||
<div class="section" id="credits">
|
||||
<h1><a class="toc-backref" href="#id8">Credits</a></h1>
|
||||
<div class="section" id="authors">
|
||||
<h2><a class="toc-backref" href="#id9">Authors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>TAKOBI</li>
|
||||
<li>Openindustry.it</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="contributors">
|
||||
<h2><a class="toc-backref" href="#id10">Contributors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Lorenzo Battistini (<a class="reference external" href="https://takobi.online">https://takobi.online</a>)</li>
|
||||
<li>Andrea Piovesana (<a class="reference external" href="https://openindustry.it">https://openindustry.it</a>)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="other-credits">
|
||||
<h2><a class="toc-backref" href="#id11">Other credits</a></h2>
|
||||
<p>Chair © Copyright 2020 Shopify Inc., licensed under CC-BY-4.0.</p>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
<h2><a class="toc-backref" href="#id12">Maintainers</a></h2>
|
||||
<p>This module is maintained by the OCA.</p>
|
||||
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
|
||||
<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
|
||||
mission is to support the collaborative development of Odoo features and
|
||||
promote its widespread use.</p>
|
||||
<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainer</a>:</p>
|
||||
<p><a class="reference external" href="https://github.com/eLBati"><img alt="eLBati" src="https://github.com/eLBati.png?size=40px" /></a></p>
|
||||
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_model_viewer">OCA/web</a> project on GitHub.</p>
|
||||
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,97 @@
|
|||
// Copyright 2020 Lorenzo Battistini @ TAKOBI
|
||||
// Copyright 2020 Andrea Piovesana @ Openindustry.it
|
||||
odoo.define('web_widget_model_viewer.FieldBinaryModelViewer', function (require) {
|
||||
"use strict";
|
||||
|
||||
var BasicFields = require('web.basic_fields');
|
||||
var core = require('web.core');
|
||||
var registry = require('web.field_registry');
|
||||
var session = require('web.session');
|
||||
var utils = require('web.utils');
|
||||
var _t = core._t;
|
||||
var qweb = core.qweb;
|
||||
|
||||
var FieldBinaryModelViewer = BasicFields.FieldBinaryFile.extend({
|
||||
template: 'FieldBinaryModelViewer',
|
||||
events: _.extend({}, BasicFields.FieldBinaryFile.prototype.events, {
|
||||
'click': function () {
|
||||
if (this.mode === "readonly") {
|
||||
this.trigger_up('bounce_edit');
|
||||
}
|
||||
},
|
||||
'click #model-viewer-fullscreen': 'fullscreen',
|
||||
}),
|
||||
supportedFieldTypes: ['binary'],
|
||||
init: function () {
|
||||
this._super.apply(this, arguments);
|
||||
var max_upload_size = this.attrs.max_upload_size;
|
||||
if (max_upload_size) {
|
||||
this.max_upload_size = parseInt(max_upload_size) * 1024 * 1024;
|
||||
}
|
||||
else {
|
||||
this.max_upload_size = 250 * 1024 * 1024; // 250M
|
||||
}
|
||||
},
|
||||
_render: function () {
|
||||
var self = this;
|
||||
var url = "";
|
||||
if (this.value) {
|
||||
if (!utils.is_bin_size(this.value)) {
|
||||
url = 'data:model/gltf-binary;base64,' + this.value;
|
||||
} else {
|
||||
url = session.url('/web/content', {
|
||||
model: this.model,
|
||||
id: JSON.stringify(this.res_id),
|
||||
field: this.name,
|
||||
});
|
||||
}
|
||||
}
|
||||
var $glb = $(qweb.render("FieldBinaryModelViewer-glb", {widget: this, url: url}));
|
||||
var style = this.attrs.style;
|
||||
if (style) {
|
||||
$glb.attr('style', style);
|
||||
}
|
||||
this.$('> model-viewer').remove();
|
||||
this.$el.prepend($glb);
|
||||
$glb.on('error', function () {
|
||||
self._clearFile();
|
||||
$glb.attr('src', "");
|
||||
self.do_warn(_t("3D model"), _t("Could not display the selected model."));
|
||||
});
|
||||
},
|
||||
fullscreen: function (ev) {
|
||||
var isFullscreenAvailable = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;
|
||||
var modelViewerElem = ev.target.parentElement.parentElement.parentElement;
|
||||
if (isFullscreenAvailable) {
|
||||
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
|
||||
if (fullscreenElement) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) { /* Firefox */
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) { /* IE/Edge */
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (modelViewerElem.requestFullscreen) {
|
||||
modelViewerElem.requestFullscreen();
|
||||
} else if (modelViewerElem.mozRequestFullScreen) { /* Firefox */
|
||||
modelViewerElem.mozRequestFullScreen();
|
||||
} else if (modelViewerElem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
||||
modelViewerElem.webkitRequestFullscreen();
|
||||
} else if (modelViewerElem.msRequestFullscreen) { /* IE/Edge */
|
||||
modelViewerElem.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.error("ERROR : full screen not supported by web browser");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
registry.add('model_viewer', FieldBinaryModelViewer);
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="FieldBinaryModelViewer">
|
||||
<div class="o_field_image" aria-atomic="true" style="background-color: #FFFFFF;">
|
||||
<t t-if="widget.mode !== 'readonly'">
|
||||
<div class="o_form_image_controls">
|
||||
<button class="fa fa-pencil float-left o_select_file_button fa-2x" title="Edit" aria-label="Edit"/>
|
||||
<button class="fa fa-trash-o float-right o_clear_file_button fa-2x" title="Clear" aria-label="Clear"/>
|
||||
|
||||
<span class="o_form_binary_progress">Uploading...</span>
|
||||
<t t-call="HiddenInputFile">
|
||||
<t t-set="image_only" t-value="true"/>
|
||||
<t t-set="fileupload_id" t-value="widget.fileupload_id"/>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="FieldBinaryModelViewer-glb">
|
||||
<model-viewer
|
||||
t-att-src='url'
|
||||
t-att-border="widget.readonly ? 0 : 1"
|
||||
t-att-name="widget.name"
|
||||
alt="3D model"
|
||||
auto-rotate="1"
|
||||
camera-controls="1">
|
||||
<div class="text-center mt-2 mb-2 mr-2">
|
||||
<span id="model-viewer-fullscreen" title="View fullscreen" role="img" aria-label="Fullscreen">
|
||||
<i class="fa fa-arrows-alt fa-2x"/>
|
||||
</span>
|
||||
</div>
|
||||
</model-viewer>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
<template id="web_layout_model_viewer" name="Web layout Model viewer" inherit_id="web.layout">
|
||||
<xpath expr="//meta[@name='viewport']" position="after">
|
||||
<script type="module" src="/web_widget_model_viewer/static/lib/model-viewer.min.js" />
|
||||
<script nomodule="1" src="/web_widget_model_viewer/static/lib/model-viewer-legacy.js" />
|
||||
</xpath>
|
||||
</template>
|
||||
<template id="assets_backend" name="web_widget_model_viewer assets" inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<script type="text/javascript" src="/web_widget_model_viewer/static/src/js/web_widget_model_viewer.js" />
|
||||
</xpath>
|
||||
</template>
|
||||
</odoo>
|
||||
Loading…
Reference in New Issue