How to use image map in Odoo? - odoo

I am trying to use image map in Odoo 14 CE.
This is my attempt to do a proof-of-concept, which is not working (mapping does not happen in the image, and the <img> in the client-side page does not contain usermap="#workmap" attribute).
<field name="image_parts" widget="image" usemap="#workmap"/>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"/>
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"/>
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"/>
</map>
I am trying to make a feature that display image from field image_parts (customized) and it enables users to hover and see information in a small dialog popup. Moreover, the area can also be clicked to do some other methods further on.
Is there any possible solution for this or some parts of this?

To do this kind of changes, you will have to review the Map View / Map Rendered / Map Controller and Map Model JS classes.
You can find them here /enterprise/web_map/static/src/js/.
It's always tricky wanting to do this kind of big changes in Odoo standard views ^^
You'll need some Owl knowledge, in case you don't know you can find documentation/references/trainings/notes on the Odoo Owl github.
Courage

Related

Loading content into Blazor TabControl

I've created a TabControl following this and similar guides:
https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
The relevant code on my test Tabs.razor page is:
<TabControl>
<TabPage Text="Tab 1">
<h1>The first tab</h1>
</TabPage>
<TabPage Text="Tab 2">
<h1>The second tab</h1>
</TabPage>
<TabPage Text="Tab 3">
<h1>The third tab</h1>
</TabPage>
</TabControl>
The pages inside the tabs themselves will have a lot more content than just one sentence. All the tabbed examples I've found just have the tab contents like this, flat on the page. Is there some way to make the tab content more modular, possibly having it live in separate files? I'd want it all to load on the page initialization, I'd just like to not have a big monster .razor page with the contents of all the tabs.
I'm not sure if I need nested layouts here or what, or how the rendering would work (I'll need the tab contents to behave like top-level razor pages with functions and submit actions, etc...).
Pretty new to this, obviously, and haven't been able to find an answer. Thanks in advance.
<TabPage Text="Tab 1">
<MyFirstTabbedComponent />
</TabPage>
and then develop MyFirstTabbedComponent.razor as a page/component.
enfin, you have already done something similar.

OpenERP 7.0 xml tag <group> explained

As far as I know there was fundamental change of xml tag <group> between versions 6.x and 7.0. Could somebody explain or point to a resource where I could read how this tag behaves in OpenERP 7.0?
I haven't seen a definitive doc although I vaguely remember reading something on Launchpad but I can't find it now. The developer docs have this:
Technically, the layout of forms version 7.0 is different than former
versions. There is no longer a default “grid” layout; instead the
layout is more based on HTML and CSS. The following conventions are
now used:
The elements <form> and <page> no longer define groups; the elements inside are laid out inline. One should use explicit <div> or
to create blocks.
By default, the element <group> now defines two columns inside, unless an attribute col=”n” is used. The columns have the same width
(1/n th of the group’s width). Use a element to produce a
column of fields.
The element <separator string=”XXX”/> on top of a group can be replaced putting string=”XXX” inside the <group> element.
The element <field name=”XXX”/> does not produce a label, except when they are directly below a <group> element. Use <label for=”XXX”/>
to produce the label of the field.
I have found sometimes I need to define a top level group inside the form and then use groups inside that with the regular col and colspan attributes. Possibly the best is to find a form that matches what you are trying to achieve and see how it does it.
There is also the new, annoying sheet attribute as well, I just don't understand this one (I mean I don't understand why, I know what it does).

Dojo: NumberSpinner Issue

I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.

Can I show a PDF inside a DIV with a zoom function?

I have a large PDF and I need to show it 50% reduced in size inside a div tag that is 600px 600px in size. I also need to offer the client a zoom function.
Should I use the "object" tag? But can I reduce the pdf size inside an "object"?
Is there a jquery example or anything out there?
Need help.
<div>
<object data="febrero2012.pdf" type="application/pdf" width="600px" height="600px">
alt : febrero2012.pdf
</object>
</div >
I coudn't find the way to set a default zoom level yet. If you find a way, please let me know.
No. PDFs cannot be displayed in a DIV, as they're not html or an image. You can convert the PDF to html/images on the server and display that, just like google's "quick view" function does. But in general, PDF rendering in-browser is dependent on the presence of a plugin (e.g. Adobe Reader, Chrome's built-in rendering engine notwithstanding). Plugins can't be displayed in divs, just embed/object/iframe sections.

keep data-attributes in dijit widgets

I've started using the HTML5 data- attributes in my application, but when this is applied to an element that is a dijit widget, it disappears.
<button dojoType="dijit.form.Button" data-id="5">Number 5</button>
Is dojo actually parsing this and keeping it somewhere? Or is it just removed completely because dojo isn't HTML5 compliant?
By applying the answer to this question, I was also able to keep the custom data- attributes on the surrounding element.