Using the webview_flutter with evaluateJavascript(), I've been able to modify the style of most elements of my website, but can't understand why some elements don't get modified.
My WebView is included, and the website to display within the WebView is https://dme.com.sg/index.php?dispatch=auth.login_form
I've included a snapshot as well, showing how I can hide and modify the colours for most of the elements, yet it seems all those that are within the "form" cannot be changed.
Would appreciate any help on how I can modify those as well, especially to change their colours to a darker theme to match the colours of the app.
WebView(
initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
_controller = controller;
},
onPageStarted: (url) {
_controller.evaluateJavascript(
"document.getElementsByClassName('tygh-top-panel clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header')[0].style.display='none';"
"document.getElementsByClassName('tygh-footer')[0].style.display='none';"
"document.getElementsByClassName('auth-information-grid')[0].style.display='none';"
"document.getElementsByClassName('ty-breadcrumbs clearfix')[0].style.display = 'none';"
"document.getElementsByClassName('container-fluid content-grid')[0].style.background = 'black';"
"document.getElementsByClassName('ty-mainbox-title')[0].style.color = 'pink';"
"document.getElementsByClassName('buttons-container clearfix')[0].style.display = 'none';"
);
},
),
Have kept tinkering around with it, and looking up JavaScript tutorial, and I managed to find a solution. So I'm not sure HOW or WHY, so still hoping someone could comment a response that explains so I can better understand.
Something else I've learnt, it's easier to just use the "console" tab of chrome to test the java scripts on the page before moving it into flutter webview.
Using the "document.getElementsByClassName("buttons-container clearfix")" command, I got a list of where the class was being used, and found the one I wanted to change was 1. It helps that when as you type the right index number, it gets highlighted on the website.
So then using "document.getElementsByClassName("buttons-container clearfix")1.style.background = 'black'" I managed to change the style of the element I wanted.
I've included a screengrab of the chrome console here if it can help anyone else.
Related
I have been playing with Foundation 4 for a while. I have to say it is very simple to use, and lots of its markups are very readable. The documentation is brief, but we can work around. Then I hit this really big problem. In Bootstrap, you will have a functionality called scrollspy. You fix a sidebar on left, and when you scroll through page, it tells your where you are. http://getbootstrap.com/javascript/#scrollspy
I notice Foundation 4 also has a js component called Magellan. Unfortunately, the documentation has been extremely vague about what it does and how to adjust it. I played it for a while and realize that I might not be able to achieve the same effect as Bootstrap's scrollspy, where I can have a fixed leftside panel. Magellan always pushes my panel to the top of my screen.
Does anyone have the experience working with magellan?
Take a loot at the scrollspy for jQuery page on github, read the info, might be helpful to use it separately on any project:
https://github.com/sxalexander/jquery-scrollspy
esp take a loot at where it says:
$(document).ready(function() {
$('#sticky-navigation').scrollspy({
min: $('#nav').offset().top,
onEnter: function(element, position) {
$("#nav").addClass('fixed');
},
onLeave: function(element, position) {
$("#nav").removeClass('fixed');
}
});
});
I am not sure how you are supposed to control a player character in Bullet. The methods that I read were to use the provided btKinematicCharacterController. I also saw methods that use btDynamicCharacterController from the demos. However, in the manual it is stated that kinematic controller has several outstanding issues. Is this still the preferred path? If so, are there any tutorials or documentations for this? All I found are snippets of code from the demo, and the usage of controllers with Ogre, which I do not use.
If this is not the path that should be tread, then someone point me to the correct solution. I am new to bullet and would like a straightforward, easy solution. What I currently have is hacked together bits of a btKinematicCharacterController.
This is the code I used to set up the controller:
playerShape = new btCapsuleShape(0.25, 1);
ghostObject= new btPairCachingGhostObject();
ghostObject->setWorldTransform(btTransform(btQuaternion(0,0,0,1),btVector3(0,20,0)));
physics.getWorld()->getPairCache()->setInternalGhostPairCallback(new btGhostPairCallback());
ghostObject->setCollisionShape(playerShape);
ghostObject->setCollisionFlags(btCollisionObject::CF_CHARACTER_OBJECT);
controller = new btKinematicCharacterController(ghostObject,playerShape,0.5);
physics.getWorld()->addCollisionObject(ghostObject,btBroadphaseProxy::CharacterFilter, btBroadphaseProxy::StaticFilter|btBroadphaseProxy::DefaultFilter);
physics.getWorld()->addAction(controller);
This is the code I use to access the controller's position:
trans = controller->getGhostObject()->getWorldTransform();
camPosition.z = trans.getOrigin().z();
camPosition.y = trans.getOrigin().y()+0.5;
camPosition.x = trans.getOrigin().x();
The way I control it is through setWalkDirection() and jump() (if canJump() is true).
The issue right now is that the character spazzes out a little, then drops through the static floor. Clearly this is not intended. Is this due to the lack of a rigid body? How does one integrate that?
Actually, now it just falls as it should, but then slowly sinks through the floor.
I have moved this line to be right after the dynamic world is created
physics.getWorld()->getPairCache()->setInternalGhostPairCallback(new btGhostPairCallback());
It is now this:
broadphase->getOverlappingPairCache()->setInternalGhostPairCallback(new btGhostPairCallback());
I am also using a .bullet file imported from blender, if that is relevant.
The issue was with the bullet file, which has since been fixed(the collision boxes weren't working). However, I still experience jitteryness, unable to step up occasionally, instant step down from to high a height, and other issues.
My answer to this question here tells you what worked well for me and apparently also for the person who asked.
Avoid ground collision with Bullet
The character controller implementations in bullet are very "basic" unfortunately.
To get good character controller, you'll need to invest this much.
What I'm trying to do is to fill ListView in Windows 8 Metro application dynamically with pre-loaded images.
for each item (URI) I'm doing it plain simple with the code like this (C++):
Windows::UI::Xaml::Media::Imaging::BitmapImage^ bitmapSrc =
ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
bitmapSrc->CreateOptions = Windows::UI::Xaml::Media::Imaging::BitmapCreateOptions::IgnoreImageCache;
bitmapSrc->UriSource = uri;
img->Source = bitmapSrc;
LoadListView->Items->Append(img);
but when I delete (in the app) source image described by URI and I create new file with the same name and try to reload it into the list then I fail and image shown is the old one (deleted). I presume some cache works here. I tried to avoid caching by IgnoreImageCache value in CreateOptions but it didn't work.
Any clues how to disable caching of BitmapSource (Image) potentially bound to ListView in Windows 8 app?
I tried several directions inspired by Silverlight and WPF, none worked unfortunately.
Encouraged by comments, I put answer I've found myself.
Broader context (and also C# perspective) is explained here:
http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/171dfe66-78b5-4340-bd78-244337f31287/
Shortly I believe it's a problem with reference counting here.
WinRT keeps the image loaded (cached) in BitmapImage^ as long as Uri is valid and asigned to the object instance, that in my example is added to the list.
Cleaning Uri from BitmapImage^ prior to releasing it from the list solved problem in my case.
According to example in question, below code solves the problem (included in the part where the list removal is performed):
auto item = (Image^)LoadListView->Items->GetAt(selected);
auto src = (Windows::UI::Xaml::Media::Imaging::BitmapImage^)item->Source;
src->UriSource = nullptr; //this line is critical
LoadListView->Items->RemoveAt(selected);
I am trying to make dynamically generated html 5 graphs show up in a webview in Blackberry 10 Cascades. I have confirmed the html5 that I have generated, draws the correct graphs. My problem is that when I try to implement this in the Blackberry 10 Cascades Beta 3 SDK (using the Blackberry 10 Dev Alpha Simulator), the webview that is supposed to show the graph, just looks like this:
Here is the code that leads to this error:
//html_ already contains the html-5 code to make the graph at this point in the code
//This is the file path to a local file that is actually accessable in the emulator
//and not just from Windows
//
QFile *chartFile = new QFile("app/native/assets/data/chart.html");
if (chartFile->open(QIODevice::WriteOnly)) {
chartFile->write(html_.toUtf8());
chartFile->flush();
chartFile->close();
}
if (chartFile) delete chartFile;
if (graphView_) {
graphView_->setHtml("");
graphView_->setUrl(QUrl::fromLocalFile("app/native/assets/data/chart.html"));
}
I checked the permissions of that file, put they are all Allow (777 permissions for those who know Unix style permissions).
I added access_internet to the bar-descriptor.xml, eventhough my app was already able to access remote sites, just to see if that would fix it, but it did not.
I've been searching around trying to find a solution to this problem, but I have not.
If anyone could help me out with this, it would be greatly appreciated.
-------------------------------------------------------
Update:
I changed the code to set the html directly, now I have this:
if (graphView_) {
graphView_->setHtml(html_, QUrl("app/native/assets/data/chart.html"));
}
But nothing shows. It seems I have the wrong relative path relative to my base url.
My base url is this: QUrl("app/native/assets/data/chart.html")
My relative paths all begin with: ./Highcharts/js/...
My relative paths are located under: app/native/assets/data/Highcharts/js
It seems to me that I this should work, but when I do this, I just a blank screen, as if it can not find my relative paths. So I don't know what's going on here either.
I found a solution that works. I'm using the first approach, not the updated approach, but instead of
graphView_->setUrl(QUrl("app/native/assets/data/chart.html"));
I'm using:
graphView_->setUrl(QUrl("local:///assets/data/chart.html"));
And I have left the rest of the code the same, and it works.
I'm using the Chromium port of WebKit on Windows and I'm trying to retrieve a list of all of the images in my document. I figured the best way to do this was to implement WebKit::WebFrameClient::didFinishLoading like so:
WebNodeList list = document->getElementsByTagName(L"img");
for (size_t i = 0; i < list.length(); ++i) {
// Manipulate images here...
}
However, when this delegate fires, list.length() returns 0. The only times I've seen it return a list of non-zero length is when I substitute "body" or "head" for "img". Strangely enough, if I call getElementsByTagName(L"img") outside of the delegate, it works correctly.
I'm guessing that the DOM isn't fully loaded when didFinishLoading is called, but that would seem to contradict the delegate's name. Does anyone know what I may be missing here?
It turns out that the mistake was purely on my side. I was caching a pointer to the DOM document in my frame wrapper. Of course, since a frame can outlive a DOM document, I ended up referencing an out-of-date document once I loaded a new page.