as stated in the title question, I want to create a button that uses an icon as background.
I am using the wearable circle emulator with 360x360.
I tried a lot of code and examples but with no success.
Last code used:
static void
create_base_gui(appdata_s *ad)
{
/* Window */
ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
elm_win_autodel_set(ad->win, EINA_TRUE);
if (elm_win_wm_rotation_supported_get(ad->win))
{
int rots[4] = { 0, 90, 180, 270 };
elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
}
eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
/*Box*/
ad->box = elm_box_add(ad->win);
evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_show(ad->box);
elm_win_resize_object_add(ad->win, ad->box);
ad->button2 = elm_button_add(ad->box);
elm_object_text_set(ad->button2, "Click me");
evas_object_size_hint_weight_set(ad->button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(ad->button2, EVAS_HINT_FILL, EVAS_HINT_FILL);
ad->icon2 = elm_icon_add(ad->box);
elm_image_file_set(ad->icon2, "C/Tizen/testWorkspace/BasicUI/shared/res/basicui.png", NULL);
elm_image_resizable_set(ad->icon2, EINA_TRUE, EINA_TRUE);
elm_object_part_content_set(ad->button2, "icon", ad->icon2);
elm_object_content_set(ad->button2, ad->icon2);
elm_box_pack_end(ad->box, ad->button2);
evas_object_show(ad->button2);
/* Show window after base gui is set up */
evas_object_show(ad->win);
}
The button is created and it's clickable (no behaviour defined yet).
The icon is not displayed.
What am I doing wrong ?
Thanks
PS: based on https://developer.tizen.org/ko/development/ui-practices/native-application/efl/ui-components/wearable-ui-components/creating-wearable-buttons?langredirect=1
and on the default BasicUI example
You need to declare the path from the tizen system point of view.
The correct path is then
/opt/usr/apps/org.somepackage.yourapp/shared/res/youricon.png
needless to say that org.somepackage.yourapp is the package path to your app and youricon.png is your icon.
You can even check the location of your icon in the device manager.
On the following image it is
/opt/usr/apps/org.example.settingsui/shared/res/settingsui.png
This is not imho very good solution, but there is a better way of doing this:
You can use either function
app_get_shared_resource_path();
app_get_resource_path();
You can write method like this:
static void
app_get_shared_resource(const char *file_in, char *path_out, int path_max)
{
char *res_path = app_get_shared_resource_path();
if (res_path) {
snprintf(path_out, path_max, "%s%s", res_path, file_in);
free(res_path);
}
}
and then use it like this
char icon_path[128] = {0,};
app_get_shared_resource("youricon.png", icon_path, 128);
// create your button and stuff and then
elm_image_file_set(ic, icon_path, NULL);
All these are more valuable for tizen 2.3.X and lower. Since Tizen 2.4 you can use Resource Manager
My guess is that the icon should be added on button control instead of box control.
So this:
ad->icon2 = elm_icon_add(ad->box);
should be:
ad->icon2 = elm_icon_add(ad->button);
Hope that helps!
Related
I'm trying to implement a picture-in-picture mode in my app. I'm Implementing google Maps on PIP mode but I can't resize the full-screen map. It always zooms on the map center point. I have done R&D related to this issue but not finding any proper answer. Basically, I need the layout like Whatsapp app pip Screen on my app how to implement it? And my code is here:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
Display display=getWindowManager().getDefaultDisplay();
Point size=new Point();
display.getSize(size);
int width=size.x;
int height=size.y;
Rational aspectRatio=new Rational(width,height);
PictureInPictureParams params = new PictureInPictureParams.Builder()
.setAspectRatio(aspectRatio).build();
enterPictureInPictureMode(params);
}
and here is Manifest code:
<activity android:name=".activities.MainActivity"
android:supportsPictureInPicture="true"
android:resizeableActivity="true"
android:launchMode="singleTask"
android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"/>
In this code, I have the screen like
and I want
How can I solve this?
Thanks in advance!!
Just Change Your this code
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
Display display=getWindowManager().getDefaultDisplay();
Point size=new Point();
display.getSize(size);
int width=size.x;
int height=size.y;
Rational aspectRatio=new Rational(width,height);
PictureInPictureParams params = new PictureInPictureParams.Builder()
.setAspectRatio(aspectRatio).build();
enterPictureInPictureMode(params);
}
To
Rational aspectRatio = new Rational(3, 4);
PictureInPictureParams params = new PictureInPictureParams.Builder()
.setAspectRatio(aspectRatio).build();
enterPictureInPictureMode(params);
I am using wxWidget to design GUI. My GUI has multiple tabs. If user resizes the Frame, if he has selected some tab, when he is switching between tabs same modified size should be maintained. i am using sizers to put all child windows.But currently this is not happening. My current code is like this
void XTab::OnPageChanged(wxNotebookEvent & event)
{
if(isActive())
{
int page = event.GetOldSelection();
if(page!=-1)
{
XPanel * panel = (XPanel*)GetPage(page);
xdmlASSERT(panel->isActive());
panel->onUIDeactivate();
}
page = event.GetSelection();
if(page!=-1)
{
XPanel * panel = (XPanel*)GetPage(page);
xdmlASSERT(!panel->isActive());
panel->onUIActivate();
}
RecalcSize();
DFrame::UpdateLayout(this);
}
}
where DFrame is derived from wxFrame and XPanel is derived from wxPanel.The size is recalculated and best size is queried in GetSizer->CalcMin() method. This happens in ReCalcSize(). I don't know the reason why size of frame set by user is not persisting. Is there any way to store modified size of all children dynamically so? can u send some code for this?
I am trying to build a custom button in newest BlackBerry 10 platform.
The button should change background image when it is clicked and then change it back when it is clicked the second time.
The button logic is fairly simple: once clicked, I check for the type of image currently in the button and change the image source.
I started with a basic QML custom control which looks like this (stripped of labels and other unimportant things):
import bb.cascades 1.0
Container
{
id: root
layout: DockLayout
{
}
function clickMe()
{
var source = myImage.defaultImageSource.toString();
console.log(source);
if (source.endsWith("image.png"))
{
myImage.defaultImageSource = "asset:///images/image_pushed.png";
}
else
{
myImage.defaultImageSource = "asset:///images/image.png";
}
}
ImageButton
{
id: myImage
defaultImageSource: "asset:///images/image.png"
}
onCreationCompleted:
{
myImage.clicked.connect(root.clickMe);
}
}
ImageButton click event is connected to JavaScript function clickMe. The function fires and the URL is logged to console correctly.
The problem is the IF clause, because the image_pushed.png is never set. Why is this the problem and how can I implement this button?
I am looking around for a only QML solution for this problem and I found this information:
the defaultImageSource property is of type QUrl, which does contain
toString() method.
toString() method returns QString, which indeed has function endsWith.
my QML reference: http://qt-project.org/doc/qt-4.8/qstring.html#endsWith
Thanks.
Within QML QString instances appear to be a normal JavaScript strings. This mapping is done automatically. And Javascript strings don't have a endsWith method. You can use the search method with an regular expression to achieve the same.
if (source.search(/image\.png$/ !== -1) { /* ... */ }
I think you can create more simple way by using property
for example:
Control{
id : myControl
property bool state
ImageButton{
defaultImageSource : state ? "firstImageAsset.png" : "secondImageAsset.png"
onClick :{
myControl.state = !myControl.state
}
}
}
I am using Monotouch to write an Ipad app. The app uses tables to browse down through a directory tree and then select a file. I have used Monotouch.Dialog to browse the directories and I set up the directory tables as the app starts.However there are too many files to set up in a table as the app starts and so I want to set up the 'file table' as the file is selected from the lowest level directory table. I am trying to use LoadMoreElement to do this but I cannot make it work or find any examples online. I have coded the 'Elements API Walkthrough' in the Xamarin tutorial at:- http://docs.xamarin.com/ios/tutorials/MonoTouch.Dialog
I then add a new section to the code:-
_addButton.Clicked += (sender, e) => {
++n;
var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
var taskElement = new RootElement (task.Name){
new Section () {
new EntryElement (task.Name,
"Enter task description", task.Description)
},
new Section () {
new DateElement ("Due Date", task.DueDate)
},
new Section()
{
new LoadMoreElement("Passive","Active",
delegate {MyAction();})
}
};
_rootElement [0].Add (taskElement);
Where MyAction is:-
public void MyAction()
{
Console.WriteLine ("we have been actioned");
}
The problem is that MyAction is triggered and Console.Writeline writes the message but the table stays in the active state and never returns to passive. the documentation says:-
Once your code in the NSAction is finished, the UIActivity indicator stops animating and the normal caption is displayed again.
What am I missing?
Ian
You need to set the "Animating" property in the element to false.
Like this:
LoadMoreElement loadMore = null;
loadMore = new LoadMoreElement (
"Passive", "Active",
delegate {loadMore.Animating = false;});
Where did you see any documentation that says that the animation stops when the delegate stops running? If that is documented anywhere, that is wrong.
I have a window in a Vala application and an image inside it.
This image is changed sometimes by img.set_from_pixbuf(imgdata); and so it's size changes as well. It's embedded in a Gtk.Box.
box = new Gtk.Box(Orientation.VERTICAL,5);
...
box.pack_end(img,false,false);
So if there was a big image before and I replace it with a smaller one, the window remains ridiculously big and I have not found a method to dynamically shrink it to the space required.
I have tried with window.set_default_size(box.width_request,box.height_request) but it always returns -1.
So any ideas how to resize the window?
Thanks!
I have fought with this issue myself and while the accepted answer is correct, I though I could give a more "complete" answer, with working code.
Reproducing the problem
The following code (In C++, sorry) reproduces your issue:
#include <array>
#include <gtkmm.h>
class ResizableWindow : public Gtk::Window
{
public:
ResizableWindow()
: m_toggle{"Toggle"}
, m_currentImageIndex{0}
{
m_files[0] = "small.png";
m_files[1] = "large.png";
// Setup window layout:
m_layout.attach(*Gtk::manage(new Gtk::Image(m_files[m_currentImageIndex])), 0, 0, 1, 1);
m_layout.attach(m_toggle, 0, 1, 1, 1);
add(m_layout);
// Set up signal handlers:
m_toggle.signal_clicked().connect([this](){OnToggle();});
}
private:
void OnToggle()
{
// Switch image file:
if(m_currentImageIndex == 0)
{
m_currentImageIndex = 1;
}
else
{
m_currentImageIndex = 0;
}
// Load new image.
Gtk::Widget* child = m_layout.get_child_at(0, 0);
Gtk::Image* currentImage = dynamic_cast<Gtk::Image*>(child);
currentImage->set(m_files[m_currentImageIndex]);
}
Gtk::Grid m_layout;
Gtk::Button m_toggle;
std::array<std::string, 2> m_files;
size_t m_currentImageIndex;
};
int main (int argc, char* argv[])
{
auto app = Gtk::Application::create(argc, argv, "so.question.q8903140");
ResizableWindow w;
w.show_all();
return app->run(w);
}
The Toggle button changes the underlying images. Both are the same image, but with different sizes. Notice that, As you already mentionned, when toggling for the first time (small --> large), the window resizes appropriately. However, when toggling a second time (large --> small), the image is resized, but not the window, leaving extra space around the image:
Weird, I know...
Solution
To solve the issue, one needs to call the resize method. So the Toggle handler would become:
void OnToggle()
{
if(m_currentImageIndex == 0)
{
m_currentImageIndex = 1;
}
else
{
m_currentImageIndex = 0;
}
Gtk::Widget* child = m_layout.get_child_at(0, 0);
Gtk::Image* currentImage = dynamic_cast<Gtk::Image*>(child);
currentImage->set(m_files[m_currentImageIndex]);
// Resize window:
resize(1, 1);
}
Note that resize was called with dimensions 1x1 (smallest possible dimensions). Gtkmm will resize the window following geometry constraints automatically from there.
If I am not mistaken the automatic resizing of windows only only happens when elements are too large to be drawn. Additionally the set_default_size method only matters when first drawing the window and unless I am wrong is never used again. I would suggest using the resize method to set the window size. (link)
window.resize(box.width_request, box.height_request);
One thing you need to remember when using resize if you can't resize it smaller than the request_size if you run into that issue use the set_request_size method.