I am using the sample RTMP Injection application for testing purposes. I want to modify the app in such a way that the injected RTMP stream should be the first video to occur in the grid of remote streams. Can someone please help?
You could set the first item of your grid with a similar code from agora-broadcast-client.js in https://github.com/digitallysavvy/agora-web-broadcast-demo using Vanilla JS:
// RTMP Connection (UI Component)
function addExternalTransmitionMiniView(rtmpUrl){
var container = $('#rtmp-controlers');
// append the remote stream template to #remote-streams
container.append(
$('<div/>', {'id': 'rtmp-container', 'class': 'container row justify-content-end mb-2'}).append(
$('<div/>', {'class': 'pulse-container'}).append(
$('<button/>', {'id': 'rtmp-toggle', 'class': 'btn btn-lg col-flex pulse-button pulse-anim mt-2'})
),
$('<input/>', {'id': 'rtmp-url', 'val': rtmpUrl, 'class': 'form-control col-flex" value="rtmps://live.facebook.com', 'type': 'text', 'disabled': true}),
$('<button/>', {'id': 'removeRtmpUrl', 'class': 'btn btn-lg col-flex close-btn'}).append(
$('<i/>', {'class': 'fas fa-xs fa-trash'})
)
)
);
}
You can hence set where you want the stream to be injected.
Related
I try to test custom widget from js reference and I get error in debugger:
Error: QWeb2: Template 'some.template' not found
qweb.xml was properly set in manifest, because when I extend ListController and use another template, it works correctly.
Here is template definition, which I use in qweb.xml:
<?xml version="1.0" encoding="UTF-8"?>
<template>
<div t-name="some.template">
<span class="val"><t t-esc="widget.count"/></span>
<button>Increment</button>
</div>
</template>
I tried to change <template> -> <templates>, totally removed tag "template" but still get the same error message.
JS:
odoo.define('working.test', function (require) {
var Widget = require('web.Widget');
var Counter = Widget.extend({
template: 'some.template',
events: {
'click button': '_onClick',
},
init: function (parent, value) {
this._super(parent);
this.count = value;
},
_onClick: function () {
this.count++;
this.$('.val').text(this.count);
},
});
// Create the instance
var counter = new Counter(this, 4);
// Render and insert into DOM
counter.appendTo(".o_nocontent_help");
})
Manifest:
# -*- coding: utf-8 -*-
{
'name': "testwidget",
'summary': """
Short (1 phrase/line) summary of the module's purpose, used as
subtitle on modules listing or apps.openerp.com""",
'description': """
Long description of module's purpose
""",
'author': "My Company",
'website': "http://www.yourcompany.com",
# Categories can be used to filter modules in modules listing
# Check https://github.com/odoo/odoo/blob/12.0/odoo/addons/base/data/ir_module_category_data.xml
# for the full list
'category': 'Uncategorized',
'version': '0.1',
# any module necessary for this one to work correctly
'depends': ['base'],
'qweb': ['static/qweb.xml'],
# always loaded
'data': [
# 'security/ir.model.access.csv',
'views/views.xml',
'views/web_asset.xml',
],
# only loaded in demonstration mode
'demo': [
'demo/demo.xml',
],
}
Any idea how I need to modify this template to make the widget working correctly and in which table in db odoo stores these templates?
I was running into this same issue and needed to put my QWeb code into static/src/xml/base.xml in order for Odoo to recognize it.
You can check to see if Odoo is loading the QWeb by going to this URL on your Odoo instance:
<odoo_instance>/web/webclient/qweb?mods=<my_module_name>
Such as:
localhost:8069/web/webclient/qweb?mods=test
For comparison, you can see a successful output by using mods=web to load the QWeb assets for the web module.
You can try changing
'qweb': ['static/qweb.xml'],
to
'qweb': ['static/*.xml'],
It happens with me sometimes, by specifying static xml file name, it does not render that template. But by just loading all .xml files by using *, templates are loaded.
To solve this issue I used as workaround Widget.xmlDependencies:
xmlDependencies: ['/test/static/qweb.xml']
but the main reason I think was cache in PyCharm which I didn't invalidate.
After having done some code reading, IMO, I realized the official documentation might not have pointed out clearly how to use templates in frontend.
To summarize my understanding:
The 'qweb' field in manifest is mainly designed for webclient (i.e. the backoffice), not the website. When entering webclient, a request to /web/webclient/qweb is made to retrieve all the templates of installed modules.
In order to use templates in website (i.e. frontend), synchronous and asynchronous ways both exist.
Synchronous way: Use qweb.add_template. When parameter is template content itself or a DOM node, template is loaded in a synchronous way. (While param is a URL, then it fires up an ajax request to server to fetch content.)
qweb.add_template is mentioned in https://www.odoo.com/documentation/13.0/reference/qweb.html
Asynchronous way:
Use ajax.loadXML which you can use anywhere you want to start loading template from a URL.
Use xmlDependencies which you specify in widget definition. And if you dig into the code in widget.js, you can see ajax.loadXML is being used in willStart.
There are discussions regarding qweb.add_template vs ajax.loadXML
See https://github.com/OCA/pylint-odoo/issues/186 and https://github.com/odoo/odoo/issues/20821
FYI.
I guess you may need to make sure that the js definition refers to the module name correctly
odoo.define('MODULE TECHNICAL NAME SHOULD BE HERE.test', function (require) {});
you should also register your js function with something like:
core.action_registry.add("module_name.name", Widget_Extend);
for more info https://www.odoo.com/documentation/11.0/reference/javascript_reference.html#registries
In Odoo 14 make sure
dashboard.js
odoo.define('library_managment.dashboard', function(require) {
"use strict";
// alert("hello odoo...............")
console.log("Hello My Module........!!")
var widgetRegistry = require('web.widget_registry');
var Widget = require('web.Widget');
var Counter = Widget.extend({
template: 'library_managment.template',
xmlDependencies: ['/library_managment/static/src/xml/template.xml'],
events: {
'click button': '_onClick',
},
init: function (parent, value) {
this._super(parent);
this.count = 4*9+5;
console.log("parent is", parent)
console.log("counter is..", this.count)
},
_onClick: function () {
this.count++;
this.$('.val').text(this.count);
},
});
widgetRegistry.add('library_counter', Counter);
return Counter;
});
template.xml
add this
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<div t-name="library_managment.template">
<span class="val">
<t t-esc="widget.count"/>
</span>
<button class="bg-danger">Increment</button>
</div>
</odoo>
then add js file in assets.xml inside youe views
<odoo>
<template id="assets_backend" name="Library assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript" src="/library_managment/static/src/js/dashboard.js"></script>
</xpath>
</template>
</odoo>
then add in manifest like this:
'js': ['/static/src/js/dashboard.js'],
'qweb': ['/static/src/xml/template.xml']
then inside form view add this line
<widget="library_counter"/>
I had the same problem but with "hr_org_chart" template idk why everything works fine in another computer but in mine it returned this problem, I solved it by installing this module hr-org-chart
I have a Vue app that generates as many forms as the user likes. Each form represent a 'risk' in this 'risks' data model:
var app = new Vue({
el: '#app',
data: {
risks: [
{
'risk_name': '', 'fields': [{'field': '', 'type': ''}], 'errors':[]
}
],
},
Then I send the 'risks' to a post API request. Then I make a second get request that brings back a template with the processed data as JSON. So far so good. However, how do I render the template (new page) with this data.
This is how I receive the data:
Submit() {
if (this.checkValidity()) {
console.info(this.risks)
axios.post('risks', this.risks)
.then(function(response) {
axios.get('risks')//This gets the data back
})
.catch(function(error) {
alert('This Error occured: ' + error)
})
}
},
This is the GET API call that I called above (Flask):
#app.route('/risks', methods=['GET'])
def getInsurancePolicyForm():
risks = getTables(app.metadata)
return render_template('form.html', risks=risks)
I can see the rendered template in developer tools, but the page the user sees remains the same.
Your page should be focussed on the risks object instead of the response from the API call.
When the user selects options, add them to the risks data object so your risks object looks like:
risks: [
{
'risk_name': '', 'fields': [{'field': 'My Field', 'type': 'text', modelToHoldData: ''}], 'errors':[]
}
]
Then, when the user clicks on Submit, by all means send it to the API but you don't need a template from there, use the risks object like so (remembering to hide the form they've just chosen their fields with):
<div v-for="risk in risks">
<label>{{risk.field}}</label>
<input type="text" v-if="risk.type === 'text'" v-model="risk.modelToHoldData" />
</div>
You can adjust the above example to add as many variations of the example as you allow the user to select.
Once all this is done and you need access to the data the user enters, you can loop through the array again and just access the modelToHoldData prop on each of the risks.
I am using Hotcakes e-commerce tools for my website. My website is using DNN platform.
Because I have 2 different websites and products need to track into Google e-commerce, therefore I need 2 set of Google e-commerce code.
One is ga('ecommerce:send'); which is fine, the other one has to be ga('Hatch.ecommerce:send');
However Hotcakes does not allow me to modify Google e-commerce code. So I have to turn it off and edit it myself into the view model
I have implemented the code but it causes view error on the page.
Can anyone help me with this issue?
It gave this error message “An error has occurred. Error: Checkout is currently unavailable.”
This is the code for “receipt.cshtml”. I have added near the bottom for Google e-commerce code:
#model Hotcakes.Modules.Core.Models.OrderViewModel
<div class="hc-receipt">
<h2>Thank you for purchasing</h2>
We know you will love creating beautiful embroidery designs with our Hatch products.<br /><br />
Click here to download Hatch Embroidery<br /><br />
<strong>You are not required to download Hatch If you purchased:</strong>
<ul>
<li>Additional Hatch add-ons</li>
<li>An UPGRADE to Embroidery Creator or Embroidery Digitizer</li>
<li>Hatch Fonts Packs</li>
</ul>
Simply RESTART the software for your new purchase to be available.<br />
Have fun and please share your creations with us on our Facebook page<br />
#Html.Partial("_SetFirstPassword")
#Html.Partial("_ViewOrder", Model)
#for (int i = 0; i < Model.Items.Count(); i++)
{
var item = Model.Items.ElementAt(i);
#item.ProductName
<span>#item.ProductSku</span><br />
**<script type="text/javascript">
ga('Hatch.ecommerce:addTransaction', {
'id': '149428',
'affiliation': 'Hatch Embroidery Online Shop',
'revenue': '0',
'shipping': '0',
'tax': '#model.LocalOrder.TotalTax',
'city': '#model.LocalOrder.BillingAddress.City',
'state': '#model.LocalOrder.BillingAddress.RegionDisplayName',
'country': '#model.LocalOrder.BillingAddress.CountryDisplayName'
});
ga('Hatch.ecommerce:addItem', {
'id': '#item.Id',
'name': '#item.ProductName',
'sku': '#item.ProductSku',
'category': 'Hatch Product',
'price': '#item.AdjustedPricePerItem',
'quantity': '#item.Quantity'
});
ga('Hatch.ecommerce:send');
</script>**
}
</div>
I figured it has to be inside the loop if customer buying multiple products….
It will be great if you can give some hint or help with this…..
Thanks
Jack
In looking at your code, there appeared to be some typo's in "Model" versus "model", additional spaces and characters in the script tag, and the product name wasn't being used correctly in the way that Razor expects to use it. I'm not sure if this will fix all of the issues you encountered, but they appeared to all be Razor syntax and typo issues so far.
#model Hotcakes.Modules.Core.Models.OrderViewModel
<div class="hc-receipt">
<h2>Thank you for purchasing</h2>
We know you will love creating beautiful embroidery designs with our Hatch products.<br /><br />
Click here to download Hatch Embroidery<br /><br />
<strong>You are not required to download Hatch If you purchased:</strong>
<ul>
<li>Additional Hatch add-ons</li>
<li>An UPGRADE to Embroidery Creator or Embroidery Digitizer</li>
<li>Hatch Fonts Packs</li>
</ul>
Simply RESTART the software for your new purchase to be available.<br />
Have fun and please share your creations with us on our Facebook page<br />
#Html.Partial("_SetFirstPassword")
#Html.Partial("_ViewOrder", Model)
#for (int i = 0; i < Model.Items.Count(); i++)
{
var item = #Model.Items.ElementAt(i);
<text>#item.ProductName</text>
<span>#item.ProductSku</span><br />
<script type="text/javascript">
ga('Hatch.ecommerce:addTransaction', {
'id': '149428',
'affiliation': 'Hatch Embroidery Online Shop',
'revenue': '0',
'shipping': '0',
'tax': '#Model.LocalOrder.TotalTax',
'city': '#Model.LocalOrder.BillingAddress.City',
'state': '#Model.LocalOrder.BillingAddress.RegionDisplayName',
'country': '#Model.LocalOrder.BillingAddress.CountryDisplayName'
});
ga('Hatch.ecommerce:addItem', {
'id': '#item.Id',
'name': '#item.ProductName',
'sku': '#item.ProductSku',
'category': 'Hatch Product',
'price': '#item.AdjustedPricePerItem',
'quantity': '#item.Quantity'
});
ga('Hatch.ecommerce:send');
</script>
}
</div>
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp
As i am new to Sencha touch mobile stuck in parsing a normal xml file and pass it to a store object and populate in a panel view. Can any one help me out how to parse a XML file kept locally in the project(as mentioned below data.xml) or as a string. Below is the XML and thanks in advance.
data.XML:-
<dataSrc>
<section>
<elem>
<id>1677</id>
<name>
<![CDATA[ United Kingdom]]>
</name>
</elem>
</section>
<section>
<elem>
<id>1678</id>
<name>
<![CDATA[ United Arab Emirates]]>
</name>
</elem>
</section>
.......
</dataSrc>
Have a model with the xml properties and a store with a xml proxy.
Ext.regModel('elem', {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
]
});
var myStore = new Ext.data.Store({
model: 'elem',
proxy: {
type: 'xml',
url : '/data.xml',
reader: {
type: 'xml',
root: 'dataSrc',
record: 'elem'
}
},
autoLoad: true
});
Then you have the contents of the xml parsed in the store. Read all about this at http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store