Embedding Ventus in WT - javascript

Hello fellow programmers! My goal is to embed a Ventus window manager (http://www.rlamana.es/ventus/), repo here (https://github.com/rlamana/Ventus) in a WT page (http://www.webtoolkit.eu/wt) and get the "Simple Example" running. I have the ventus window embedded in the WT page, however I am having a styling problem with the window. My guess this is a conflict with CSS of Ventus and WT. Which brings me here, as CSS is not my strong point. I am using visual studio2010 for my development, and I have the bare minimum of a WT project running, basically the hello world app with all the widgets ripped out of it. I've included all the CSS and JS that the simple.html example uses, and have been trying to figure out how to make it work with WT. Any help would be much appreciated!
void HelloApplication::InitInterface()
{
//Include the CSS
wApp->useStyleSheet("Ventus/examples/simple/css/normalize.css");
wApp->useStyleSheet("Ventus/examples/simple/css/simple.css");
wApp->useStyleSheet("Ventus/build/ventus.css");
wApp->useStyleSheet("Ventus/examples/simple/css/browseralert.css");
//Include the JS
wApp->require("Ventus/vendor/modernizr.js");
wApp->require("Ventus/vendor/jquery.js");
wApp->require("Ventus/vendor/handlebars.js");
wApp->require("Ventus/build/ventus.js");
WContainerWidget* root = this->root();
WContainerWidget* ventus_widget = new WContainerWidget(root);
//Widget ref
std::string ventus_widget_ref = ventus_widget->jsRef(); // is a text string that will be the element when executed in JS
std::string command = ventus_widget_ref + ".wm = new Ventus.WindowManager();";
//Create the window manager
ventus_widget->doJavaScript(command);
command = ventus_widget_ref + ".wm.createWindow({title: 'Ventus', x: 10, y: 10, width: 500, height: 500}).open();";
//You may also create new windows by creating container widgets and fromQuery function
//WContainerWidget* app_window = new WContainerWidget(wApp->root());
//command = ventus_widget_ref + ".wm.createWindow.fromQuery(" + app_window->jsRef() + ", {title: 'Ventus', x: 10, y: 10, width: 500, height: 500}).open();";
//You can then add widgets to the ventus window like any other WT container
//app_window->addWidget(app.get());
//Create a window
ventus_widget->doJavaScript(command);
}

Finally figured it out. When using WT instead of using "require" for loading CSS files, use "useStyleSheet".

Related

edit Java Script to deviate a certain key and assign different values

I am trying to customize show apps icon..
tried to edit the java script
var ShowAppsIcon = new Lang.Class({
Name: 'ShowAppsIcon',
Extends: DashItemContainer,
_init() {
this.parent();
this.toggleButton = new St.Button({ style_class: 'show-apps',
track_hover: true,
can_focus: true,
toggle_mode: true });
this._iconActor = null;
this.icon = new IconGrid.BaseIcon(_("Show Applications"),
{ setSizeManually: true,
showLabel: false,
createIcon: this._createIcon.bind(this) });
this.toggleButton.add_actor(this.icon.actor);
this.toggleButton._delegate = this;
this.setChild(this.toggleButton);
this.setDragApp(null);
},
_createIcon(size) {
this._iconActor = new St.Icon({ icon_name: 'view-app-grid-symbolic',
icon_size: size,
style_class: 'show-apps-icon',
track_hover: true });
return this._iconActor;
},
this script is working as a single script for the favorite apps icons and show apps icon.
I am Using Ubuntu 18.04.
I am trying to customize the "show-apps" Icon.
Here is the Java Script file. https://superuser.com/questions/1431374/ubuntu-18-04-customize-show-apps-icon
Please have a look on below imgaes with Show-Apps button at bottom right with yellow and green color.
Question: Is it possible to alter the attached Java Script file, so that I can customize the Width of the Show-Apps Icon size keeping Show-Apps Icon Height Unchanged from the script so that when I increase the Dock Icon Size from System Settings..I will have constant height but variable width only for show apps Icon based on entire dock height.

kiosk app full screen

I have built a kiosk app for Chrome with app builder, but even if the key of doing a kiosk app is that it will be displayed at full screen, I don´t manage to get rid of the top bar (I have removed the homepage button etc. but can´t display it at total full screen). I`d like to know if there´s any commando for this in html or javascript and in which file it should be added.
In the backgroung.js file I´ve added the line "state: 'fullscreen' but it does not work (I've also added the permission for fullscreen in the manifest file):
var runApp = function() {
if (chrome.power) {
chrome.power.requestKeepAwake('display');
}
console.log(config);
chrome.app.window.create(
config ?
'exported_app_view.html' :
'designer_view.html',
{
id: 'KioskDesignerWindow',
width: 1100,
height: 720,
minWidth: 800,
minHeight: 600,
state: 'fullscreen'
},
function(win) {
if (!this.X) { return; }
var window = win.contentWindow;
window.onload = function() {
this.$addWindow(window);
var Y = this.X.subWindow(window, 'Kiosk Designer Window');
this.DOM.init(Y);
}.bind(this);
win.onClosed.addListener(function() {
this.$removeWindow(window);
}.bind(this));
}.bind(this));
}.bind(this);
Yes, you can do it with JavaScript. In background.js, your 3rd parameter to chrome.app.window.create is that callback function that has the win argument - add this line:
win.fullscreen();
https://developer.chrome.com/apps/app_window#type-AppWindow
If you hit escape while your app is running you may get the title bar back, but next time it runs it will go fullscreen again.

HTMLWidget: Shiny app run well in Rstudio but Not on Shiny-Server

Recently I have written a html widget to use a javascript file for venn diagram plotting. In RStudio the app works fine so I didn’t realize so far that there is an issue using the app on the shiny server.
If I run the app in with Shiny in RStudio no error is throw and the Web browser shows all other elements of my Shiny page except the new widget. Considering the developer console of the browser I see the following error which is kind of cryptically for me.
Uncaught TypeError: Cannot read property 'filter' of undefined
at exports.OutputBinding.shinyBinding.find (htmlwidgets.js:475)
at a (shiny.min.js:3)
at f (shiny.min.js:3)
at initShiny (shiny.min.js:3)
I also run it outside of RStudio just to get sure but same error.
I have tested this with 2 independent packages so its seems to be a systematical error on my side.
By inspecting the running app in the browser I saw that the following div is created. However, I couldn’t find the submitted data.
<div id="vennDia" style="width:100%; height:400px; " class="vennConductor html-widget html-widget-output"></div>
vennConductor.js:
HTMLWidgets.widget({
name: 'vennConductor',
type: 'output',
initialize: function(el, width, height) {
},
renderValue: function(el, x, instance) {
// console.log(x)
$(el).jvenn(x)},
resize: function(el, width, height, instance) {
$(el).attr("width", width).attr("height", height)
}
});
In my opinion “relevant” HTMLWidget R code:
htmlwidgets::createWidget(
name = 'vennConductor',
json_payload,
width = width,
height = height,
package = 'vennConductor',
elementId = elementId,
sizingPolicy = htmlwidgets::sizingPolicy(
browser.fill = TRUE,
viewer.fill = TRUE
)
)
#' #name vennConductor-shiny
#' #export
vennConductorOutput <- function(outputId, width = '100%', height = '400px'){
htmlwidgets::shinyWidgetOutput(outputId, 'vennConductor', width, height, package = 'vennConductor')
}
#' #rdname vennConductor-shiny
#' #export
renderVennConductor <- function(expr, env = parent.frame(), quoted = FALSE) {
if (!quoted) { expr <- substitute(expr) } # force quoted
htmlwidgets::shinyRenderWidget(expr, vennConductorOutput, env, quoted = TRUE)
}
and the widget call:
jVennConductor(elementId = 'vennDia', venn_lists = vlist_01, displayMode=T, displayStat=T)
Hope anyone can help me out. Thanks!!!
P.s.: R and a Packages are up-to-date and my OS is WINDOWS 10.
We have found the reason for the problem. Shiny imports jquery by lowercase, jVennConductor by uppercase and that is what causes the error. Simple change both to lowercase solved the problem.
Thanks to Joe Cheng
https://github.com/ramnathv/htmlwidgets/issues/253

how to save page state and css to server? (Drawing app)

I have a web page where the user creates simple drawings using various blocks, e.g. shapes representing furniture are drag and dropped onto a building floor plan. It uses Interact.js.
The blocks themselves can be dragged/moved, resized, added, inserted, deleted, merged, split, recoloured, font etc by the user - JavaScript acting on HTML and CSS.
I plan to save changes locally (for offline if needed) and back to the server for sharing with others who have access to this project. Undo/redo is nice to have too.
How to save modified diagrams (html & CSS)?
Option 1:
document.getElementById('foo').innerHTML for the HTML.
For CSS you'd have to recursively traverse the whole DOM and match selectors on each element to the rules defined in each CSS file.
As described in the answer above, this will (most of the times) work for classes:
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
if (classes[x].selectorText == className) {
(classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
}
}
But this is a bad, error-prone solution.
Option 2:
What you need to do is have a data model that you edit, think of JSON looking like this:
[
{type: 'circle', color: 'blue', x: 10, y: 15, children: [
{type: 'line', color: 'red', x: 100, y: 0, children: []}
]},
{type: 'square', color: 'greed', x: 100, y: 15, children: []}
]
Based on this you'd write a recursive function like this:
var foo = document.getElementById('foo'); // this is where you "draw" stuff
function draw(elements) {
var i;
for(i in elements) {
drawElement(elements[i]);
if(elements[i].children.length > 0) {
draw(elements[i].children);
}
}
}
function drawElement(element) {
var domElement = document.createElement("div");
domElement.className = 'element ' + element.type + ' ' + element.color;
domElement.style.left = element.x + 'px';
domElement.style.top = element.y + 'px';
foo.appendChild(domElement);
}
Now you need to define some CSS:
#foo {
position: relative;
}
#foo .element {
position: absolute;
}
#foo .element.square {
...
}
#foo .element.blue {
background-color: blue;
}
Next, the "interactive" part. Whenever your user adds something to the "canvas" instead of directly manipulating the DOM you only add stuff to that JSON tree and then delete the old DOM and run draw again.
You can go with option 1 but that will be a lot harder. Read the comments in the answer I attached, you'll see there are a lot of browser inconsistencies and limitations.
Option 3:
Working with a <canvas>, not the DOM is more manageable. Try looking into Fabric.js for example, it already handles "saving" and "initializing" from JSON and allows users to "draw" stuff to it.
With jQuery you can use .html() method to retrive inner html of your container. But for css I think you should manually examine all properties of all objects you want to save to get similar approach.
So, for both, if you can modify the code that handles drawing operations, I think the simplest way would be catalog all actions that user can do and store it in a variable that enable you to reproduce all the process another time.
For example:
[
["drawBox", 200, 200, 400, 400, "#ff0000", "#0000ff"],
...
]
This approach will be also useful if you want to impement undo/redo functionalities in the future.
You should store that 'state' in db.
you can use HTML5 SessionState to save rendered Page Content
also you can store that in local storage of browser and sync local storage with db.

How to update the source of an Image

I'm using the Raphaël Javascript lib (awesome stuff for SVG rendering, by the way) and am currently trying to update the source of an image as the mouse goes over it.
The thing is I can't find anything about it (it's probably not even possible, considering I've read a huge part of the Raphaël's source without finding anything related to that).
Does someone knows a way to do this ?
Maybe it can be done without directly using the Raphaël's API, but as the generated DOM elements doesn't have IDs I don't know how to manually change their properties.
I'm actually doing CoffeeScript, but it's really easy to understand. CoffeeScript is Javascript after all.
This is what I'm doing right know, and I would like the MouseOver and MouseOut methods to change the source of the "bg" attribute.
class Avatar
constructor: (father, pic, posx, posy) ->
#bg = father.container.image "pics/avatar-bg.png", posx, posy, 112, 112
#avatar = father.container.image pic, posx + 10, posy + 10, 92, 92
mouseOver = => #MouseOver()
mouseOut = => #MouseOut()
#bg.mouseover mouseOver
#bg.mouseout mouseOut
MouseOver: ->
#bg.src = "pics/avatar-bg-hovered.png"
alert "Hover"
MouseOut: ->
#bg.src = "pics/avatar-bg.png"
alert "Unhovered"
class Slider
constructor: ->
#container = Raphael "raphael", 320, 200
#sliderTab = new Array()
AddAvatar: (pic) ->
#sliderTab.push new Avatar this, pic, 10, 10
window.onload = ->
avatar = new Slider()
avatar.AddAvatar "pics/daAvatar.png"
This actually works, except for the "#bg.src" part : I wrote it knowing that it wouldn't work, but well...
var paper = Raphael("placeholder", 800, 600);
var c = paper.image("apple.png", 100, 100, 600, 400);
c.node.href.baseVal = "cherry.png"
I hope, you get the idea.
This works for me (and across all browsers):
targetImg.attr({src: "http://newlocation/image.png"})
I was using rmflow's answer until I started testing in IE8 and below which returned undefined for image.node.href.baseVal. IE8 and below did see image.node.src though so I wrote functions getImgSrc, setImgSrc so I can target all browsers.
function getImgSrc(targetImg) {
if (targetImg.node.src) {
return targetImg.node.src;
} else {
return targetImg.node.href.baseVal;
}
}
function setImgSrc(targetImg, newSrc) {
if (targetImg.node.src) {
targetImg.node.src = newSrc;
} else {
targetImg.node.href.baseVal = newSrc;
}
}

Categories